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);
}

// Landing phase bg — explicit `--priUser` revert per user spec
// (2026-05-20). The hex INTERIOR is `--duoUser` (set on `.table-hex`
// in _room.scss); the aperture AROUND the hex should be the default
// body color. Defensive override so any bf-cache / stale-CSS state
// can't leak the picker-phase green bg onto a landing render.
.my-sea-page[data-phase="landing"] {
    background: rgba(var(--priUser), 1);
}

// Sprint 6 iter 6a — gatekeeper page bg + modal chrome. The page bg
// is uniform `--duoUser` (matches the hex interior on landing /
// picker so the visual transitions read as a continuous surface);
// the `.gate-overlay`/`.gate-modal` rules in `_room.scss` already
// give us the darkened Gaussian-glass modal centered over it. No hex
// or chair-seats on this page — the gatekeeper is a transient in-
// flight UI per user spec 2026-05-20.
.my-sea-page[data-phase="gate"] {
    background: rgba(var(--duoUser), 1);
    flex: 1;
    min-height: 0;
}

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

    // Portrait — stack the cross spread above the form col (mirrors the
    // gameroom SEA SELECT modal's `@media (max-width: 600px)` stack
    // pattern in `_card-deck.scss`). Landscape keeps the side-by-side
    // layout since horizontal real-estate is the abundant axis there.
    // User-spec 2026-05-20.
    @media (orientation: portrait) {
        flex-direction: column;
    }
}

// .my-sea-cross renders all 6 surrounding positions (crown/leave/lay/
// loom + cover/cross overlaid on core) unconditionally. The SPREAD
// dropdown sets `data-spread="<name>"` on this element; per-spread
// rules below hide the positions each spread doesn't use. Inherits
// the 3×3 `grid-template-areas` from _card-deck.scss line 1189-1200
// so visible cells land in their canonical positions; hidden cells
// just leave their grid slots empty.
//
// Per-spread position subsets — user-locked 2026-05-19:
//   PPF: leave (1)  cover (2)  loom  (3)     — horizontal middle row
//   SAO: lay   (1)  cover (2)  crown (3)     — vertical center column
//   MBS: crown (1)  lay   (2)  loom  (3)     — T-shape (crown + lay vertical, loom right)
//   DOS: loom  (1)  cross (2)  crown (3)     — loom right · cross overlay · crown above
//   CC variants: all 6 positions (Waite-Smith / Escape Velocity differ in DRAW ORDER only,
//                                 not in position visibility).

// Bump grid gap on my-sea (gameroom .sea-cross stays at 0.5rem since
// gameroom slots have no per-position labels). The vertical leave/loom
// labels need ~1.5rem of horizontal clearance from adjacent cells, and
// the horizontal crown/cover/lay/cross labels need ~1rem of vertical
// clearance so they don't overlap into the next row.
.my-sea-cross {
    gap: 1rem !important;
}

.my-sea-cross[data-spread="past-present-future"] {
    .sea-pos-crown,
    .sea-pos-cross,
    .sea-pos-lay { display: none; }
}

.my-sea-cross[data-spread="situation-action-outcome"] {
    .sea-pos-leave,
    .sea-pos-loom,
    .sea-pos-cross { display: none; }
}

.my-sea-cross[data-spread="mind-body-spirit"] {
    .sea-pos-leave,
    .sea-pos-cover,
    .sea-pos-cross { display: none; }
}

.my-sea-cross[data-spread="desire-obstacle-solution"] {
    .sea-pos-leave,
    .sea-pos-cover,
    .sea-pos-lay { display: none; }
}

// Celtic Cross variants (waite-smith / escape-velocity) — all positions
// visible by default. No `display: none` overrides needed.

// Position-name caption — re-appropriates the GRAVITY/LEVITY
// `.sea-stack-name` typographic look (_card-deck.scss line 1557):
// small uppercase letter-spaced w. a subtle scaleY stretch,
// --terUser ink at 0.6 opacity. No polarity coloring — these are
// spread-position labels, not deck identifiers.
//
// Labels live OUTSIDE the .sea-card-slot (sibling, inside the crucifix
// cell or the cover/cross wrapper) so they survive SeaDeal._fillSlot's
// `slot.innerHTML = …` clobber on draw. Each label is absolute-
// positioned to nearly touch the slot's nearest border per the user-
// locked spec:
//   crown / cover — above top border
//   lay   / cross — below bottom border
//   leave         — left of left border, rotated 90° CCW
//   loom          — right of right border, rotated 90° CW
.sea-pos-label {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 1;
    color: rgba(var(--seciUser), 1);
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    position: absolute;
    z-index: 2;
}

// Cells need `position: relative` so absolute label children anchor
// to them. `.sea-pos-core` already has `position: relative` per the
// existing rule in _card-deck.scss line 1311; the other crucifix
// cells need it added.
.my-sea-cross .sea-crucifix-cell { position: relative; }

// Above top border — overlaps slot's top edge by 0.1rem (per the
// `.sea-stack-name` "tuck under" treatment in _card-deck.scss:1564).
.sea-pos-crown > .sea-pos-label,
.sea-pos-cover > .sea-pos-label {
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0.1rem) scaleY(1.2);
}

// Cover + cross labels dim w. their slots — they sit on top of the
// sig card so a vivid label would compete w. the sig at idle. Default
// 0.25 opacity matches the slot's faint dotted-outline at idle; the
// parent's :hover state (propagated up when the inside `.sea-card-
// slot:hover` fires per CSS hover-ancestor rules) boosts to the
// `.sea-pos-label` baseline 0.6, matching the slot's `--duoUser` mask
// reveal.
.sea-pos-cover > .sea-pos-label,
.sea-pos-cross > .sea-pos-label {
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.sea-pos-cover:hover > .sea-pos-label,
.sea-pos-cross:hover > .sea-pos-label {
    opacity: 1;
}

// Below bottom border — same `0.1rem` overlap but downward.
.sea-pos-lay > .sea-pos-label,
.sea-pos-cross > .sea-pos-label {
    top: 100%;
    left: 50%;
    transform: translate(-50%, -0.1rem) scaleY(1.2);
}

// Left of left border, rotated 90° CCW — text reads bottom-to-top.
// `writing-mode: vertical-rl` puts text top-to-bottom (CW); a 180°
// rotation flips it to read bottom-to-top (CCW), satisfying the user-
// locked "Leave: counterclockwise" spec.
//
// `scaleX(1.2)` (instead of the horizontal labels' scaleY) widens the
// character column (perpendicular to text-flow) — for vertical-rl
// labels, that's the visible "width" the user noticed had been lost
// at this angle. Without it, the rotated labels look squat.
.sea-pos-leave > .sea-pos-label {
    right: 100%;
    top: 50%;
    writing-mode: vertical-rl;
    transform: translate(0.1rem, -50%) rotate(180deg) scaleX(1.2);
}

// Right of right border, rotated 90° CW — text reads top-to-bottom.
// Native `writing-mode: vertical-rl` direction; no extra rotation.
.sea-pos-loom > .sea-pos-label {
    left: 100%;
    top: 50%;
    writing-mode: vertical-rl;
    transform: translate(-0.1rem, -50%) scaleX(1.2);
}

// 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;

    // Portrait — split the form into two columns. LEFT carries the
    // SPREAD field (label + reversal hint + combobox) above the action
    // btns (AUTO DRAW / GATE VIEW + DEL); RIGHT carries the DECKS
    // section (label + GRAVITY/LEVITY stacks) spanning both rows.
    // Without this rearrange, on a phone-portrait viewport the stacked
    // form col runs off the bottom of the viewport — DECKS lives above
    // the action btns + everything below the fold (user-spec
    // 2026-05-21). `.sea-form-main` uses `display: contents` so its
    // `.sea-field` + `.sea-stacks` children act as direct grid items of
    // `.my-sea-form-col` despite the intermediate wrapper in the DOM.
    @media (orientation: portrait) {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;

        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "field   stacks"
            "actions stacks";
        column-gap: 1rem;
        row-gap: 0.5rem;
        align-items: start;

        .sea-form-main    { display: contents; }
        .sea-field        { grid-area: field;   margin-bottom: 0; }
        .sea-stacks       { grid-area: stacks;  margin: 0; justify-content: center; }
        .sea-form-actions { grid-area: actions; align-self: end; padding-top: 0; }
    }

    // Portal the SPREAD dropdown out of `.sea-form-main`'s overflow
    // clip — by default the gameroom's `.sea-form-main { overflow-y:
    // auto }` (from _card-deck.scss:1424) keeps the modal contents
    // scrollable, but for my-sea's much shorter form the dropdown gets
    // clipped instead of overlaying the LOCK HAND / DEL btns below.
    // Setting overflow visible here lets the absolute-positioned
    // `.sea-select-list` extend past the form area + sit "above
    // everything else" via its existing z-index: 100.
    .sea-form-main {
        overflow: visible;
    }

    // Bump the dropdown z-index well above the picker's stacking ints
    // (cover z:3, cross z:4, modal stage z:9999 only opens on draw
    // anyway). 1000 sits above any in-page layer the user might be
    // interacting w. when they open the SPREAD picker.
    .sea-select-list {
        z-index: 1000;
    }
}

// LOCK HAND post-commit visual-lock: dim everything that mutates the
// hand. `.btn-disabled` is the project's existing soft-disabled
// treatment per [[feedback_btn_disabled_pointer_events]] — pointer-
// events:none + opacity reduction. The deck stacks aren't buttons
// themselves so we apply the class manually + the rule below ensures
// they stop responding to clicks.
.my-sea-picker--locked {
    .sea-deck-stack.btn-disabled {
        pointer-events: none;
        opacity: 0.5;
        cursor: default;
    }
}

// SPREAD combobox lock — applied after the first deposit so the user
// can't switch spread mid-draw + scramble the in-progress hand's
// position-to-card mapping. DEL releases the lock by removing this
// class. Same `pointer-events: none` treatment as `.btn-disabled` per
// [[feedback_btn_disabled_pointer_events]].
.sea-select.sea-select--locked {
    pointer-events: none;
    opacity: 0.5;
    cursor: default;
}

// ── Iter 4b: Brief banner + DEL guard portal ─────────────────────────────────
// Both reuse shared chrome: the Brief is `.note-banner` from note.js
// (portaled atop h2 w. Gaussian glass); the DEL guard is `#id_guard_portal`
// from base.html (the same one the room gear-menu DEL uses, positioned
// above the anchor button w. Gaussian glass + no backdrop). The picker IIFE
// invokes it via `window.showGuard(delBtn, "Are you sure?", confirmFn,
// null, {yesLabel: "DEL"})`. No my-sea-specific SCSS needed.