python-tdd/src/static_src/scss/_gameboard.scss

// Aperture foundation (html/body/.container overflow + flex-column) lives
// universally in _base.scss. Gameboard's only divergence: `overflow: clip`
// on .container instead of `hidden` — `clip` prevents the seat tooltip
// scroll-anchoring quirk Firefox triggers under overflow:hidden. The
// `.row { margin-bottom: -1rem }` pull mirrors the billboard/dashboard
// h2-row tightening.

body.page-gameboard {
    .container {
        overflow: clip;
    }

    .row {
        margin-bottom: -1rem;
    }
}

.gameboard-page {
    flex: 1;
    min-width: 425px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

@media (max-width: 550px) {
    .gameboard-page {
        min-width: 0;
        overflow: hidden;
    }
}

@media (min-width: 738px) {
    .gameboard-page {
        min-width: 666px;
    }

    body.page-gameboard .container {
        overflow: visible;
    }
}

@media (orientation: landscape) {
    // Restore clip in landscape — overrides the >738px overflow:visible above,
    // preventing the gameboard applets from bleeding into the footer sidebar.
    body.page-gameboard .container {
        overflow: clip;
    }
    // Reset the 666px min-width so gameboard-page shrinks to fit within the
    // sidebar-bounded container rather than overflowing into the footer sidebar.
    .gameboard-page {
        min-width: 0;
    }
}

#id_applet_game_kit {
    display: flex;
    flex-direction: column;

    #id_game_kit {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        overflow-x: visible;
        scrollbar-width: none;
        &::-webkit-scrollbar { display: none; }

        .token { position: static; }

        .token:hover .token-tooltip,
        .token:hover .tt { display: none; } // JS portal handles show/hide

        .token,
        .kit-item { font-size: 1.5rem; }

        .kit-item { opacity: 0.6; }
    }
}

#id_applet_new_game {
    display: flex;
    flex-direction: column;
}

#id_applet_my_games {
    display: flex;
    flex-direction: column;

    .applet-list {
        flex: 1;
        padding-top: 0.25rem;
    }
}

#id_tooltip_portal {
    position: fixed;
    z-index: 9999;

    padding: 0.75rem 1.5rem;

    @extend %tt-token-fields;

    .tt-equip-btns {
        position: absolute;
        left: -1rem;
        top: -1rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        z-index: 1;

        .btn { margin: 0; }
    }

    // Tray sig-card tooltip (Phase 2) — PRV / NXT btns pinned to the bottom
    // corners of the portal, 1rem outside the panel so the btn centres land
    // exactly on the corners. The shared @stat-block-shared mixin in
    // _card-deck.scss already does this for fan / sig / sea contexts; the
    // portal isn't covered by that mixin so we re-state the rules here.
    .fyi-prev,
    .fyi-next {
        display: inline-flex;
        position: absolute;
        bottom: -1rem;
        margin: 0;
        z-index: 70;
    }
    .fyi-prev { left:  -1rem; }
    .fyi-next { right: -1rem; }

    &.active { display: block; }
}

#id_mini_tooltip_portal {
    position: fixed;
    z-index: 9999;
    font-size: 0.8em;
    font-style: italic;
    width: fit-content;
    white-space: nowrap;
    text-align: right;

    &.active { display: block; }
}

@media (max-height: 500px) {
    body.page-gameboard {
        .container {
            .row {
                padding: 0.25rem 0;
                .col-lg-6 h2 {
                    margin-bottom: 0.5rem;
                }
            }
        }
    }
}

// ─── My Sea sign-gate ────────────────────────────────────────────────────────
// Sprint 4b of [[project-my-sea-roadmap]]. Renders when User.significator
// is None, on both the standalone /gameboard/my-sea/ page AND the
// /gameboard/ My Sea applet. Look!-formatted Brief-style line w. FYI
// (→ /billboard/my-sign/) + BACK (→ /gameboard/) action buttons. Inline
// content (not portaled like .note-banner) — it IS the page content
// until a sig is picked, not a transient nudge.
.my-sea-sign-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    color: rgba(var(--terUser), 1);

    .my-sea-sign-gate__line {
        text-align: center;
        font-size: 1.1rem;
        line-height: 1.4;
        margin: 0;
        // --terUser ink mirrors the gate's accent + signals "do this
        // first" visually distinct from the body's standard --secUser.
        color: rgba(var(--terUser), 1);
    }

    .my-sea-sign-gate__actions {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    // Applet variant — denser layout, omits NVM (the user is already on
    // the gameboard). Smaller line + just the FYI action surviving.
    &.my-sea-sign-gate--applet {
        padding: 0.5rem;
        gap: 0.5rem;

        .my-sea-sign-gate__line {
            font-size: 0.85rem;
        }
    }
}

// ─── My Sea DRAW SEA landing ─────────────────────────────────────────────────
// Sprint 5 iter 1 of [[project-my-sea-roadmap]]. When a user has a saved
// significator (gate passed), /gameboard/my-sea/ renders this landing
// screen: DRY table hex w. 6 chair seats labeled 1C-6C + central DRAW
// SEA btn. Mirrors my-sign's `.my-sign-page` + `.my-sign-landing`
// structure — same room-shell chain so room.js's scaleTable() can size
// the hex; same flex setup so the container chain propagates real
// height down for the scale calc.
.my-sea-page {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.my-sea-landing {
    flex: 1;
    min-height: 0;
    display: flex;

    // FREE DRAW btn — centered in the hex, mirrors SCAN SIGN's 2-line
    // font sizing so "FREE/DRAW" sits cleanly inside the 4rem circle.
    #id_draw_sea_btn {
        font-size: 0.75rem;
        line-height: 1.1;
        white-space: normal;
    }

    // Chair-position labels (1C-6C). Mirrors the room's `.seat-role-
    // label` grid placement (col 2, row 1 by default; flips to col 1
    // for left-side seats 3/4/5 so the label sits closest to the hex)
    // but uses a role-free class name — my-sea is the solo draw flow,
    // no role-pick phase, so the room's role-grammar doesn't apply.
    .table-seat .seat-position-label {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        color: rgba(var(--secUser), 1);
    }
    .table-seat[data-slot="3"] .seat-position-label,
    .table-seat[data-slot="4"] .seat-position-label,
    .table-seat[data-slot="5"] .seat-position-label {
        grid-column: 1;
    }

    // Seated chair (post-FREE DRAW). Visual transition mirrors
    // `.table-seat.active .fa-chair` from _room.scss line 626 —
    // --terUser color + --ninUser drop-shadow glow — but uses a stable
    // `.seated` class (semantically distinct from `.active`: active =
    // current turn in a multi-user room; seated = draw-locked occupant
    // in this solo-flow). _room.scss line 596 makes the colour change
    // a 0.6s ease transition so the chair animates rather than snaps.
    // Status icon (.position-status-icon) colour swap fa-ban red →
    // fa-circle-check green is handled by _room.scss lines 615-616.
    .table-seat.seated .fa-chair {
        color: rgba(var(--terUser), 1);
        filter: drop-shadow(0 0 4px rgba(var(--ninUser), 1));
    }
}

// Picker phase bg — `--duoUser` matches the table hex's interior so
// the landing→picker swap reads as a continuous surface (parallels
// `.my-sign-page[data-phase="picker"]` in _card-deck.scss line 704).
.my-sea-page[data-phase="picker"] {
    background: rgba(var(--duoUser), 1);
}

.my-sea-picker {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

// .my-sea-cross renders all 6 surrounding positions (crown/lay/cross
// PLUS leave/loom/cover) so the SPREAD dropdown can toggle 3-card vs
// 6-card layout via a single data-attribute swap (no DOM mutation).
// Default `three-card` hides the 3 forsaken positions via `display:
// none`; `six-card` (Celtic Cross variants) renders all 7 cells.
// Cover always shows (it's part of both shapes — overlaid on sig).
.my-sea-cross[data-spread-shape="three-card"] {
    grid-template-areas:
        "leave core loom";
    grid-template-rows: auto;

    .sea-pos-crown,
    .sea-pos-lay,
    .sea-pos-cross { display: none; }
}

.my-sea-cross[data-spread-shape="six-card"] {
    // Inherits `.sea-cross`'s 3×3 template from _card-deck.scss line 1189-
    // 1200; nothing to override layout-wise. All cells visible.
}

// Section dividers inside the SPREAD combobox — labels "3-card spreads"
// / "6-card spreads" separating the option groups. Styled to echo the
// `.kit-bag-label` treatment (small uppercase underlined letter-spaced
// --quaUser) but horizontal rather than vertical (kit-bag uses writing-
// mode: vertical-rl; this is a flat dropdown).
.sea-select-list .sea-select-divider {
    font-size: 0.55rem;
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: 0.12em;
    color: rgba(var(--quaUser), 0.75);
    padding: 0.4rem 0.6rem 0.2rem;
    pointer-events: none;     // not selectable; combobox.js skips it
                              // (no role=option), but belt-and-braces
                              // against accidental hover/click styles.
    list-style: none;
}

// Form col on my-sea — same DRY treatment as the gameroom sea-overlay
// `.sea-form-col` (handled in _card-deck.scss) but sits next to the
// picker's cross on a `--duoUser` page. Just constrain the width so it
// doesn't fight the cross for horizontal space.
.my-sea-form-col {
    flex: 0 0 16rem;
    max-width: 16rem;
}