/* ==========================================================================
   shell.css -- the homepage frame: menu bar, app iframe, floating dock,
   name caller. Everything here lives in the top window and stays on screen
   whatever the iframe is showing.
   ========================================================================== */

html, body.shell {
    height: 100%;
    overflow: hidden;
}

/* --- Menu bar ----------------------------------------------------------- */

.bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--bar-h);
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 0 8px;
    background: var(--green-bar);
    border-bottom: 2px solid #3a2a12;
    z-index: 12000;
}
/* A menu is open (shell.js): above everything, so nothing covers it. */
.bar.has-menu-open { z-index: 30000; }

.bar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 0 6px;
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: var(--yellow);
    white-space: nowrap;
    user-select: none;
}

/* The brand mark -- the same ABC/123 icon the tab favicon uses, so the bar and
   the tab agree. 180px artwork drawn at ~44px: the extra pixels are there for
   high-dpi screens.
   homepage.php sets --bar-mark to the same file at the site's asset version
   (?v=N), so "Change Version" reaches it too. The url() fallback is relative
   to this stylesheet and keeps the mark showing if the property is missing.
   The artwork is square and both sides are fixed here -- letting the box
   stretch is what squashes the logo in the root site's header. */
.bar-mark {
    width: calc(var(--bar-h) - 14px);
    height: calc(var(--bar-h) - 14px);
    flex: 0 0 auto;
    background: var(--bar-mark, url("../img/fav_icon/favicon-180.png")) center / contain no-repeat;
}

.bar-spacer { flex: 1 1 auto; }

.bar-item { position: relative; display: flex; }

.bar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 15px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: var(--radius);
    margin: 7px 0;
    color: #efefef;
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.bar-btn:hover,
.bar-btn:focus-visible {
    background: var(--brown);
    border-color: var(--yellow);
    outline: none;
}
.bar-btn[aria-expanded="true"] {
    background: var(--orange);
    border-color: var(--yellow);
    color: #1a1000;
}
.bar-btn.is-current {
    background: #3a2a12;
    border-color: #6b4c1f;
}
.bar-btn .caret { font-size: 10px; opacity: 0.75; }

/*  The three primary sections, each in its own color. */
.bar-btn[data-section="review"]     { color: #00E4FF; }
.bar-btn[data-section="activities"] { color: #5EFF00; }
.bar-btn[data-section="games"]      { color: #FFB700; }

/*  How many things are behind a library button. It is the one thing the
 *  dropdowns showed at a glance that a plain button otherwise would not. */
.bar-btn .bar-count {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 11px;
    font-weight: normal;
    line-height: 1.5;
}
.bar-btn:hover .bar-count,
.bar-btn.is-current .bar-count { background: rgba(0, 0, 0, 0.3); }
.bar-btn .swatch {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--brown); border: 1px solid rgba(0,0,0,0.6);
}

.bar-btn-icon { padding: 0 11px; font-size: 19px; }

/*  "Free Version" -- a link to the account page, shown only on the free
 *  level. Outlined in yellow so it reads as a status, not one more tool. */
.bar-btn-free {
    border-color: rgba(255, 204, 0, 0.55);
    color: var(--yellow);
    font-size: 14px;
    text-decoration: none;
}
.bar-btn-free:hover { color: #fff; }

/* --- Dropdowns ---------------------------------------------------------- */

.menu {
    position: absolute;
    top: calc(var(--bar-h) - 4px);
    left: 0;
    min-width: 248px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    background: #171717;
    border: 2px solid #4a3718;
    border-radius: 8px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75);
    display: none;
}
.menu.is-open { display: block; }
.menu.align-right { left: auto; right: 0; }

.menu-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    color: #eaeaea;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.menu-item:hover,
.menu-item:focus-visible {
    background: var(--brown);
    color: #fff;
    outline: none;
}
.menu-item .swatch {
    width: 12px; height: 12px; margin-top: 3px;
    border-radius: 3px; flex: 0 0 auto;
    border: 1px solid rgba(0,0,0,0.5);
}
.menu-item .menu-label { font-weight: bold; }
.menu-item .menu-blurb {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-dim);
    font-weight: normal;
}
.menu-item:hover .menu-blurb { color: #f0e0c8; }

.menu-empty {
    padding: 14px 12px;
    color: var(--ink-dim);
    font-size: 13px;
    line-height: 1.5;
}
.menu-empty code {
    display: block;
    margin-top: 6px;
    color: #b8d98a;
    font-size: 11px;
    word-break: break-all;
}
.menu-sep { height: 1px; margin: 6px 4px; background: #333; }

/* --- App frame ---------------------------------------------------------- */

.stage {
    position: fixed;
    top: var(--bar-h); left: 0; right: 0; bottom: 0;
    background: #000;
}
.stage iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0d0d0d;
}

.stage-welcome {
    position: absolute;
    inset: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 30px;
    background: radial-gradient(circle at 50% 30%, #1d1a0c 0%, #000 65%);
}
.stage-welcome h2 {
    margin: 0;
    font-size: 40px;
    color: var(--yellow);
}
.stage-welcome p { margin: 0; color: var(--ink-dim); max-width: 520px; line-height: 1.6; }

/* --- Floating dock buttons ---------------------------------------------- */

.dock-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    pointer-events: auto;
    background: var(--tint, #996633);
    border: 3px solid #000;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    overflow: visible;
    transition: transform 90ms ease-out, box-shadow 120ms;
    touch-action: none;
}
.dock-btn:hover,
.dock-btn:focus-visible {
    border-color: var(--yellow);
    box-shadow: 0 0 26px 6px rgba(255, 251, 0, 0.45);
    transform: scale(1.06);
    outline: none;
}
.dock-btn:active { transform: scale(0.96); }
.dock-btn img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
.dock-btn-text {
    padding: 4px;
    color: #fff;
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.05;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0,0,0,0.6);
    pointer-events: none;
}
.dock-btn-cap {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3px;
    padding: 1px 6px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 4px;
    color: #ffe9a8;
    font-size: 11px;
    font-family: Helvetica, Arial, sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms;
}
.dock-btn:hover .dock-btn-cap { opacity: 1; }
.dock-btn.is-hidden { display: none; }
.dock-btn.is-ghost  { opacity: 0.35; }

.dock-resize { display: none; }

#abc-dock.is-arranging .dock-btn {
    cursor: move;
    outline: 2px dashed var(--yellow);
    outline-offset: 3px;
}
#abc-dock.is-arranging .dock-btn .dock-btn-cap { opacity: 1; }
#abc-dock.is-arranging .dock-resize {
    display: block;
    position: absolute;
    right: -9px;
    bottom: -9px;
    width: 20px;
    height: 20px;
    background: var(--yellow);
    border: 2px solid #000;
    border-radius: 4px;
    cursor: nwse-resize;
    touch-action: none;
}

/* --- Arrange panel ------------------------------------------------------ */

.dock-panel {
    position: fixed;
    left: 18px;
    bottom: 18px;
    width: 330px;
    padding: 14px;
    background: #141414;
    border: 2px solid #4a3718;
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.8);
    z-index: 22000;
}
.dock-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: 19px;
    color: var(--yellow);
}
.dock-panel-close {
    background: none; border: 0; color: var(--ink-dim);
    font-size: 24px; line-height: 1; cursor: pointer;
}
.dock-panel-close:hover { color: var(--orange); }
.dock-panel-hint { margin: 0 0 12px; font-size: 12px; color: var(--ink-dim); line-height: 1.45; }
.dock-panel-row {
    display: grid;
    grid-template-columns: 22px 1fr 108px 30px;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}
.dock-panel-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-panel-size { text-align: right; color: var(--ink-dim); font-size: 12px; }
.dock-panel-row input[type="range"] { width: 100%; accent-color: var(--orange); }
.dock-panel-show input { accent-color: var(--green-lt); }
.dock-panel-foot {
    display: flex; justify-content: space-between; gap: 8px;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid #2c2c2c;
}

/* --- Name caller -------------------------------------------------------- */

/*  STACKING ORDER -- keep these in step, they span two files:
 *
 *      12000  .bar            the menu bar
 *      15000  #abc-dock       floating buttons        (dock.js)
 *      20000  #abc-rain-layer falling stars           (celebrate.js)
 *      21000  .name-reveal    the called name         <- must beat the rain
 *      22000  .dock-panel     arrange panel
 *      23000  .toast-wrap     messages
 *      30000  .bar.has-menu-open   the bar while one of its menus is open,
 *                             so a menu is never under anything
 *
 *  The name has to read clearly THROUGH a storm of 200 sprites, so it sits
 *  above the rain rather than under it.
 */
.name-reveal {
    position: fixed;
    inset: 0;
    top: 0; left: 0; width: 100%; height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 21000;
    /* Dark behind the name for legibility, clear at the edges so the stars
       are not dimmed by a flat scrim across the whole board. */
    background: radial-gradient(ellipse 60% 40% at 50% 50%,
                rgba(0, 0, 0, 0.72) 0%,
                rgba(0, 0, 0, 0.45) 55%,
                rgba(0, 0, 0, 0) 100%);
    cursor: pointer;
    user-select: none;
}
.name-reveal.is-on { display: flex; }
.name-reveal-inner { position: relative; width: 100%; text-align: center; }
.name-reveal-text {
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: 16vh;
    line-height: 1.1;
    color: var(--yellow);
    word-break: break-word;
}
.name-reveal-note {
    position: absolute;
    left: 0; right: 0; bottom: -38vh;
    color: #cfcfcf;
    font-size: 15px;
}

/* --- Toast -------------------------------------------------------------- */

.toast-wrap {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 23000;
    pointer-events: none;
}
.toast {
    padding: 10px 18px;
    background: #202020;
    border: 2px solid #4a3718;
    border-radius: 8px;
    color: #f0f0f0;
    font-size: 14px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.7);
}
.toast.is-bad { border-color: #7a2f2f; color: #ffc9c9; }

@media (max-width: 860px) {
    .bar-brand { display: none; }
    .bar-btn { padding: 0 10px; font-size: 15px; }
}