/* =========================
   Base
   ========================= */
:root {
    /* =========================
       BIGBIG BAKERY THEME
       Tweak these variables to quickly re-skin the whole UI.
       ========================= */

    /* Palette */
    --paper: #F3E4CF;
    /* cream / paper */
    --beige: #E8D1B5;
    /* warm beige */
    --honey: #D7A86E;
    /* caramel / honey */
    --choco: #5B3A2E;
    /* chocolate brown */
    --cocoa: #2B1A14;
    /* dark cocoa */
    --milk: #FFF6E8;
    /* soft white highlight */

    /* Surfaces */
    --bg: var(--paper);
    --panel: rgba(255, 246, 232, 0.72);
    --panel2: rgba(255, 246, 232, 0.55);
    --stroke: rgba(43, 26, 20, 0.18);
    --stroke2: rgba(43, 26, 20, 0.28);

    /* Compatibility (old naming) */
    --muted: var(--stroke);
    --muted2: var(--stroke2);

    /* Text */
    --text: var(--cocoa);
    --textSoft: rgba(43, 26, 20, 0.72);
    --textFaint: rgba(43, 26, 20, 0.55);

    /* Accents */
    --accent: var(--honey);
    --accent2: rgba(215, 168, 110, 0.55);

    /* Legacy variables used throughout the project (keep for compatibility) */
    --card: #E9B7DA;
    /* soft strawberry paper (fallback if no card image) */
    --slot: var(--honey);
    /* trays */
    --terrain: #D9A56B;
    /* serving board */

    /* Radius + shadows */
    --radius: 18px;
    --radiusSm: 12px;
    --radiusLg: 22px;

    --shadowSm: 0 6px 14px rgba(43, 26, 20, 0.16);
    --shadowMd: 0 12px 26px rgba(43, 26, 20, 0.18);
    --shadowLg: 0 20px 46px rgba(43, 26, 20, 0.22);

    /* Motion (set to 0 to disable most hover lifts) */
    --lift: 1;

    /* Cards sizing
       TCG cards are 750x1050 => ratio 5/7.
       Change --cardW to make cards bigger/smaller on the board.
    */
    --cardW: 110px;

    /* Ambient background (cosmetic). 1 = on, 0 = off */
    --ambient: 1;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: var(--bg);
    color: var(--text);
    overflow-y: auto;
    /* remet le scroll vertical */
    overflow-x: hidden;
    /* évite un scroll horizontal */
    height: auto;
    /* ou supprime la ligne height */

    /* BIGBIG: soft bakery background layers */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background: radial-gradient(1200px 700px at 20% 10%, rgba(215, 168, 110, 0.25), transparent 55%),
            radial-gradient(900px 600px at 85% 30%, rgba(91, 58, 46, 0.10), transparent 60%),
            radial-gradient(900px 700px at 50% 95%, rgba(215, 168, 110, 0.18), transparent 60%);
    }

    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        opacity: calc(0.18 * var(--ambient));
        background-image: url("Asset/ui/paper_texture.png");
        background-size: 2086px 1556px;
        mix-blend-mode: multiply;
    }

    .hidden {
        display: none !important;
    }

    .app {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    /* =========================
   Topbar
   ========================= */
    .topbar {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--stroke);
    }

    .topbar h1 {
        margin: 0;
        font-family: "Fredoka", "Nunito", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
        font-size: 18px;
        letter-spacing: 0.5px;
    }

    .hint {
        margin: 6px 0 0 0;
        color: var(--textSoft);
        font-size: 12px;
        line-height: 1.3;
        max-width: 800px;
    }

    .topbarRight {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }

    .terrainControls {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .status {
        font-size: 12px;
        color: var(--textSoft);
        padding: 8px 10px;
        border: 1px solid var(--stroke);
        background: var(--panel2);
        border-radius: 999px;
        max-width: 320px;
        box-shadow: var(--shadowSm);
    }

    /* =========================
   Buttons / Select
   ========================= */
    .btn {
        background: linear-gradient(180deg, rgba(255, 246, 232, 0.95), rgba(232, 209, 181, 0.70));
        color: var(--cocoa);
        border: 1px solid var(--stroke2);
        border-radius: 999px;
        padding: 10px 14px;
        cursor: pointer;
        transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
        user-select: none;
        box-shadow: var(--shadowSm);
        position: relative;
        overflow: hidden;
    }

    /* subtle shine */
    .btn::after {
        content: "";
        position: absolute;
        inset: -2px;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient(400px 60px at 30% 20%, rgba(255, 246, 232, 0.85), transparent 60%);
        transition: opacity 140ms ease;
    }

    .btn:hover {
        transform: translateY(calc(-1px * var(--lift)));
        filter: brightness(1.02);
    }

    .btn:hover::after {
        opacity: 1;
    }

    .btn:active {
        transform: translateY(0px) scale(0.99);
        box-shadow: 0 4px 10px rgba(43, 26, 20, 0.14);
    }

    .btn[disabled] {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
        filter: grayscale(0.15);
    }

    .btn--primary {
        background: linear-gradient(180deg, rgba(215, 168, 110, 0.98), rgba(215, 168, 110, 0.78));
        border-color: rgba(91, 58, 46, 0.30);
        color: var(--cocoa);
    }

    .btn--draw {
        padding: 8px 10px;
        border-radius: 10px;
    }

    .btn--tiny {
        padding: 6px 8px;
        border-radius: 10px;
        font-size: 11px;
    }

    /* Reset button near terrain */
    .btn--reset {
        padding: 10px 12px;
        border-radius: 12px;
        font-weight: 800;
        border-color: rgba(255, 255, 255, 0.18);
        background: var(--panel2);
        align-self: center;
        white-space: nowrap;
    }

    .select {
        width: 100%;
        background: rgba(255, 246, 232, 0.92);
        border: 1px solid var(--stroke2);
        color: var(--cocoa);
        border-radius: 999px;
        padding: 10px 12px;
        outline: none;
        box-shadow: var(--shadowSm);
    }

    .select:focus {
        border-color: rgba(215, 168, 110, 0.9);
        box-shadow: 0 0 0 3px rgba(215, 168, 110, 0.28), var(--shadowSm);
    }

    .select--small {
        width: 220px;
        padding: 8px 10px;
    }

    /* Deck UI */
    .pileTop {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .pileActions {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .deckBack {
        height: 70px;
        border-radius: 12px;
        border: 1px solid rgba(255, 0, 255, 0.28);
        background: linear-gradient(135deg, rgba(255, 0, 255, 0.22), rgba(0, 0, 0, 0.25));
        display: grid;
        place-items: center;
        font-size: 12px;
        color: var(--cocoa);
        cursor: grab;
        user-select: none;
    }

    .deckBack:active {
        cursor: grabbing;
    }

    /* =========================
   Screen Select
   ========================= */
    .screen {
        width: 100%;
    }

    .screen--select {
        display: flex;
        flex-direction: column;
    }

    .selectRow {
        padding: 18px 16px;
        display: grid;
        grid-template-columns: repeat(4, minmax(180px, 1fr));
        gap: 14px;
    }

    .panel {
        border: 1px solid var(--stroke);
        border-radius: var(--radius);
        padding: 14px;
        background: var(--panel);
    }

    .panelTitle {
        font-family: "Fredoka", "Nunito", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .label {
        display: block;
        font-size: 12px;
        color: var(--textFaint);
        margin-bottom: 6px;
    }

    .panel--start {
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
    }

    .micro {
        margin: 0;
        font-size: 12px;
        color: var(--textFaint);
    }

    .footerNote {
        padding: 0 16px 16px 16px;
    }

    .warn {
        border: 1px solid rgba(215, 168, 110, 0.38);
        background: rgba(215, 168, 110, 0.18);
        border-radius: var(--radius);
        padding: 12px 14px;
        font-size: 12px;
        color: var(--cocoa);
    }

    /* Responsive select screen */
    @media (max-width: 980px) {
        .selectRow {
            grid-template-columns: 1fr;
        }

        .topbar {
            flex-direction: column;
            align-items: stretch;
        }

        .topbarRight {
            align-items: stretch;
        }

        .select--small {
            width: 100%;
        }
    }

    /* =========================
   Board Layout
   ========================= */
    .screen--game {
        display: flex;
        flex-direction: column;
        flex: 1;
        /* Allow the board grid to shrink properly inside the viewport */
        min-height: 0;
    }

    .board {
        position: relative;
        flex: 1;
        padding: 14px 16px 16px 16px;
        display: grid;
        grid-template-columns: 440px 1fr;
        grid-template-rows: auto 1fr auto;
        gap: 14px;
        /* Needed so the left column (P3) can scroll instead of being visually cut */
        min-height: 0;
    }

    /* Zones */
    .zone {
        border: 1px solid var(--stroke);
        border-radius: var(--radius);
        background: var(--panel);
        padding: 12px;
        overflow: hidden;
    }

    /* Left column (P3): never clip the board, allow internal scrolling */
    .zone.zone--left {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .zoneHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .zoneHeader--vertical {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .zoneName {
        font-family: "Fredoka", "Nunito", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
        font-weight: 800;
        letter-spacing: 0.4px;
        opacity: 0.95;
    }

    /* Placement in grid */
    .zone--top {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .zone--left {
        grid-column: 1;
        grid-row: 2;
        /* P3 panel can be taller than the available row: scroll instead of clipping */
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
    }

    .center {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
    }

    .centerWrap {
        width: 100%;
        display: flex;
        gap: 14px;
        align-items: stretch;
        justify-content: center;
    }

    .zone--bottom {
        grid-column: 1 / span 2;
        grid-row: 3;
    }

    /* Responsive board */
    @media (max-width: 980px) {
        .board {
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto auto;
        }

        .zone--top {
            grid-column: 1;
            grid-row: 1;
        }

        .zone--left {
            grid-column: 1;
            grid-row: 2;
            /* P3 is taller than the available space on many screens.
       Make this zone scroll instead of clipping its content. */
            overflow: auto;
            overflow-x: hidden;
            min-height: 0;
        }

        .center {
            grid-column: 1;
            grid-row: 3;
        }

        .zone--bottom {
            grid-column: 1;
            grid-row: 4;
        }
    }

    /* =========================
   Hands / Slots
   ========================= */
    .handAndSlots {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .handAndSlots--left {
        flex-direction: row;
        gap: 14px;
        align-items: center;
    }

    /* Hands containers */
    .hand {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        min-height: 132px;
        padding: 10px;
        border-radius: 12px;
        background: var(--panel);
        border: 1px dashed rgba(43, 26, 20, 0.18);
    }

    .hand--top {}

    .hand--bottom {}

    .hand--left {
        flex-direction: column;
        min-width: 140px;
        min-height: 420px;
    }

    /* Slots containers */
    .slots {
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        padding: 10px;
        border-radius: 12px;
    }

    .slots--top,
    .slots--bottom {
        flex-direction: row;
    }

    .slots--left {
        flex-direction: column;
    }

    /* =========================
   Card / Slot visuals
   ========================= */
    .card {
        width: var(--cardW);
        aspect-ratio: 5 / 7;
        height: auto;
        border-radius: 16px;
        border: 1px solid rgba(43, 26, 20, 0.28);
        background: var(--card);
        color: var(--cocoa);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: grab;
        user-select: none;
        box-shadow: var(--shadowMd);
        transition: transform 140ms ease, filter 140ms ease, outline 140ms ease, box-shadow 140ms ease;
        overflow: hidden;
    }


    /* BIGBIG card texture + shine */
    .card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.22;
        background-image: url("Asset/ui/paper_texture.png");
        background-size: cover;
        mix-blend-mode: multiply;
    }

    .card::after {
        content: "";
        position: absolute;
        inset: -40% -20% auto -20%;
        height: 60%;
        pointer-events: none;
        opacity: 0;
        transform: rotate(12deg) translateY(-10px);
        background: linear-gradient(90deg, transparent, rgba(255, 246, 232, 0.55), transparent);
        transition: opacity 160ms ease;
    }

    .card:hover::after {
        opacity: calc(0.9 * var(--lift));
    }

    .card:hover {
        filter: brightness(1.02);
        outline: 2px solid rgba(215, 168, 110, 0.35);
        transform: translateY(calc(-2px * var(--lift)));
    }

    .card:active {
        cursor: grabbing;
    }

    .cardFace {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        text-align: center;
        font-weight: 800;
        letter-spacing: 0.2px;
    }

    .cardName {
        font-size: 12px;
        line-height: 1.2;
        color: rgba(43, 26, 20, 0.70);
    }

    /* Optional image inside card */
    .card img {
        width: 100%;
        height: 100%;
        /* contain = no cropping, usually better to read TCG text */
        object-fit: contain;
        display: block;

        /* Small sharpness helpers (mainly Chrome/WebKit) */
        image-rendering: auto;
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
    }

    /* Terrain styling (orange zone with card inside) */
    .terrain {
        width: min(360px, 92%);
        height: min(260px, 46vh);
        border-radius: var(--radiusLg);
        border: 1px solid rgba(43, 26, 20, 0.22);
        background: linear-gradient(180deg, rgba(232, 209, 181, 0.55), rgba(215, 168, 110, 0.22));
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-shadow: var(--shadowLg);
    }

    .terrain::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.22;
        background-image: url("Asset/ui/paper_texture.png");
        background-size: cover;
        mix-blend-mode: multiply;
    }

    .terrainLabel {
        position: absolute;
        top: 10px;
        left: 12px;
        font-size: 12px;
        opacity: 0.85;
        letter-spacing: 1px;
    }

    /* ===== Terrain behaves like a slot (hard constraints) ===== */
    #terrainCard {
        /* même logique que tes slots */
        --tW: var(--slotW, 100px);
        width: var(--tW);
        height: calc(var(--tW) * 7 / 5);
        display: grid;
        place-items: center;
        overflow: hidden;
        border-radius: 14px;
    }

    /* peu importe ce que ton JS injecte, on le force à remplir */
    #terrainCard .terrainCardInner,
    #terrainCard .card,
    #terrainCard .slotCard {
        width: 100% !important;
        height: 100% !important;
        max-width: 100%;
        max-height: 100%;
    }

    /* l'image doit respecter le cadre */
    #terrainCard img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* ou cover si tu veux crop */
        display: block;
    }

    /* (optionnel) si tu gardes la face "Aucun" */
    .terrainCard .cardFace--terrain {
        width: 100%;
        height: 100%;
        border-radius: 14px;
    }

    /* Slots */
    /* Slots: make them card-shaped so the artwork is visible */
    .slot {
        --slotW: 100px;
        width: var(--slotW);
        height: calc(var(--slotW) * 7 / 5);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(215, 168, 110, 0.95), rgba(215, 168, 110, 0.72));
        border: 1px solid rgba(91, 58, 46, 0.30);
        box-shadow: inset 0 2px 0 rgba(255, 246, 232, 0.55), 0 10px 18px rgba(43, 26, 20, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        text-align: center;
        color: rgba(43, 26, 20, 0.78);
        font-weight: 900;
        font-size: 10px;
        user-select: none;
        transition: transform 120ms ease, outline 120ms ease, filter 120ms ease;
    }

    /* When a card is rendered inside a BLUE slot, keep the blue frame visible.
   (Visual-only; fixes the "blue slot disappears" feeling.) */
    .slot--blue .slotCard--inBlue {
        background: transparent;
        border: 0;
    }

    .slot--blue .slotCard--inBlue img {
        /* show the back/front artwork, not a purple background */
        background: transparent;
    }

    .slot.canDrop {
        outline: 3px solid rgba(215, 168, 110, 0.75);
        transform: translateY(-1px);
    }

    .slot.occupied {
        filter: brightness(0.98);
        outline: 2px solid rgba(0, 0, 0, 0.30);
    }

    /* Selected state for click-to-place */
    .card.selected {
        outline: 3px solid rgba(255, 255, 255, 0.35);
        transform: translateY(-4px) scale(1.02);
    }

    .slot {
        position: relative;
    }

    .slotName {
        padding-top: 10px;
    }

    .slotCard {
        width: 100%;
        height: 100%;
        border-radius: 12px;
        display: grid;
        place-items: center;
        padding: 0;
        overflow: hidden;
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
        background: rgba(255, 246, 232, 0.35);
        border: 1px solid rgba(91, 58, 46, 0.22);
        cursor: grab;
    }

    /* Ensure the card image fills the slot cleanly */
    .slotCard img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        transform: translateZ(0);
        backface-visibility: hidden;
    }


    /* =========================
   Green slot attachments (items/equipment/support)
   ========================= */
    .attachmentsBar {
        position: absolute;
        left: 6px;
        bottom: 6px;
        display: flex;
        gap: 4px;
        align-items: flex-end;
        z-index: 5;
        pointer-events: auto;
    }

    .attachmentBadge {
        width: 26px;
        height: 36px;
        border-radius: 6px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.18);
        border: 1px solid rgba(0, 0, 0, 0.25);
        cursor: grab;
    }

    .attachmentBadge img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        background: transparent;
    }

    .attachmentBadge:active {
        cursor: grabbing;
    }

    .attachmentMore {
        height: 36px;
        padding: 0 6px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        font-weight: 900;
        font-size: 11px;
        color: rgba(0, 0, 0, 0.75);
        background: rgba(255, 255, 255, 0.20);
        border: 1px solid rgba(0, 0, 0, 0.18);
    }

    /* Fallback face inside a slot */
    .slotCard .cardFace {
        width: 100%;
        height: 100%;
        border-radius: 12px;
    }

    .slotCard:active {
        cursor: grabbing;
    }

    /* Green slot Defense stance: rotate the card (TCG style)
   We rotate the card and scale it down so it stays inside a 5/7 slot. */
    .slotCard.stanceDefense {
        transform: rotate(90deg) scale(0.72);
        transform-origin: center;
    }

    .slotClear {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 20px;
        height: 20px;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.35);
        background: rgba(0, 0, 0, 0.18);
        color: rgba(0, 0, 0, 0.75);
        font-weight: 900;
        cursor: pointer;
        line-height: 1;
        display: grid;
        place-items: center;
    }

    .slotClear:hover {
        background: rgba(0, 0, 0, 0.26);
    }

    .graveyard {
        width: 180px;
        min-height: 120px;
        border-radius: 14px;
        border: 1px solid var(--stroke);
        background: var(--panel);
        padding: 10px;
    }

    .graveTitle {
        font-family: "Fredoka", "Nunito", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
        font-weight: 800;
        font-size: 12px;
        letter-spacing: 0.5px;
        opacity: 0.9;
        margin-bottom: 8px;
    }

    .graveList {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-height: 160px;
        overflow: auto;
        padding-right: 4px;
    }

    .graveItem {
        border-radius: 10px;
        padding: 6px 8px;
        font-size: 11px;
        line-height: 1.2;
        background: rgba(215, 168, 110, 0.18);
        border: 1px solid rgba(91, 58, 46, 0.22);
        color: var(--cocoa);
    }

    /* petit scrollbar discret */
    .graveList::-webkit-scrollbar {
        width: 8px;
    }

    .graveList::-webkit-scrollbar-thumb {
        background: rgba(91, 58, 46, 0.18);
        border-radius: 999px;
    }

    /* =========================
   Deck / Banish piles
   ========================= */
    .pile {
        width: 190px;
        min-height: 120px;
        border-radius: 14px;
        border: 1px solid var(--stroke);
        background: var(--panel);
        padding: 10px;
    }

    .pileTitle {
        font-family: "Fredoka", "Nunito", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
        font-weight: 900;
        font-size: 12px;
        letter-spacing: 0.6px;
        opacity: 0.95;
    }

    .pileMeta {
        margin-top: 2px;
        font-size: 11px;
        opacity: 0.75;
    }

    .pileList {
        margin-top: 8px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-height: 160px;
        overflow: auto;
        padding-right: 4px;
    }

    .pileItem {
        border-radius: 10px;
        padding: 6px 8px;
        font-size: 11px;
        line-height: 1.2;
        background: var(--panel2);
        border: 1px solid var(--stroke);
        color: var(--cocoa);
        cursor: grab;
        user-select: none;
    }

    .pileItem:hover {
        outline: 2px solid rgba(215, 168, 110, 0.55);
    }

    .pileItem:active {
        cursor: grabbing;
    }

    .pile--banish {
        border-color: rgba(215, 168, 110, 0.45);
        background: rgba(215, 168, 110, 0.16);
    }

    /* drop highlight */
    .dropTarget {
        outline: 2px solid rgba(215, 168, 110, 0.65);
        transform: translateY(-1px);
    }

    /* =========================
   Zoom modal
   ========================= */
    .zoomModal {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        z-index: 9999;
    }

    .zoomBackdrop {
        position: absolute;
        inset: 0;
        background: rgba(43, 26, 20, 0.55);
    }

    .zoomContent {
        position: relative;
        z-index: 1;
        /* Allow larger zoom so card text is readable */
        width: min(900px, 96vw);
        border-radius: 18px;
        border: 1px solid var(--stroke);
        background: rgba(255, 246, 232, 0.96);
        padding: 14px;
        box-shadow: var(--shadowLg);
    }

    .zoomClose {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        border-radius: 12px;
        border: 1px solid var(--stroke);
        background: var(--panel2);
        color: var(--cocoa);
        cursor: pointer;
    }

    .zoomInner {
        display: grid;
        place-items: center;
        padding: 24px 10px 10px;
    }

    .zoomCard {
        /* Display as close as possible to the native 750x1050 without exceeding the viewport */
        width: min(750px, 92vw);
        aspect-ratio: 5 / 7;
        height: auto;
        max-height: 86vh;
        border-radius: 18px;
        background: var(--card);
        border: 2px solid rgba(0, 0, 0, 0.55);
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    }

    .zoomCard img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;

        /* Keep zoom crisp */
        image-rendering: auto;
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .zoomCaption {
        margin-top: 10px;
        font-size: 13px;
        opacity: 0.85;
        text-align: center;
    }

    .zoomActions {
        margin-top: 12px;
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .zoomBtn {
        padding: 10px 14px;
        border-radius: 12px;
        border: 1px solid var(--stroke);
        background: var(--panel2);
        color: rgba(255, 255, 255, 0.95);
        cursor: pointer;
    }

    .zoomBtn:hover {
        background: rgba(255, 255, 255, 0.10);
    }

    /* Slots stack (green + blue) */
    .slotsStack {
        display: flex;
    }

    .slotsStack--h {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .slotsStack--v {
        flex-direction: row;
        gap: 12px;
        align-items: center;
    }

    /* Depth: blue is always "behind" green */
    .slots--green {
        position: relative;
        z-index: 2;
    }

    .slots--blue {
        position: relative;
        z-index: 1;
        opacity: 0.85;
    }

    /* Default overlap (P1): blue sits behind and slightly overlaps toward green */
    .slotsStack--h .slots--blue {
        transform: translateY(-14px);
    }

    .slotsStack--v .slots--blue {
        transform: translateX(-14px);
    }

    /* P2 (top): the stack direction is reversed so blue must be farther from the center */
    .zone--top .slotsStack--h {
        flex-direction: column-reverse;
    }

    .zone--top .slotsStack--h .slots--blue {
        transform: translateY(14px);
    }

    /* P3 (left): reverse horizontally so blue is farther from the center */
    .zone--left .slotsStack--v {
        flex-direction: row-reverse;
    }

    .zone--left .slotsStack--v .slots--blue {
        transform: translateX(14px);
    }

    /* Blue slots: cookie wrapper / tin */
    .slot--blue {
        background: linear-gradient(180deg, rgba(232, 209, 181, 0.90), rgba(243, 228, 207, 0.80));
        border-color: rgba(91, 58, 46, 0.26);
        box-shadow: inset 0 2px 0 rgba(255, 246, 232, 0.65), 0 10px 18px rgba(43, 26, 20, 0.14);
    }

    .slot--blue::after {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: 12px;
        pointer-events: none;
        opacity: 0.35;
        background-image: url("Asset/ui/paper_texture.png");
        background-size: 180px 180px;
        mix-blend-mode: multiply;
    }

    .slot--blue.occupied {
        outline-color: rgba(0, 0, 0, 0.30);
    }

    /* Extra / Side piles accent */
    .pile--extra {
        border-color: rgba(215, 168, 110, 0.55);
    }

    .pile--side {
        border-color: rgba(91, 58, 46, 0.35);
    }

    /* =========================
   Ambient (cosmetic)
   ========================= */
    .ambientLayer {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
        opacity: calc(1 * var(--ambient));
    }

    .ambientCrumb {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(215, 168, 110, 0.35);
        filter: blur(0.2px);
        animation: crumbDrift var(--t) linear infinite;
        transform: translate3d(0, 0, 0);
    }

    .ambientCrumb::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(255, 246, 232, 0.45), transparent 60%);
        opacity: 0.7;
    }

    @keyframes crumbDrift {
        from {
            transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s));
        }

        to {
            transform: translate3d(var(--x1), var(--y1), 0) scale(var(--s));
        }
    }

    .app {
        position: relative;
        z-index: 1;
    }

    .screen--game {
        overflow-y: auto;
        min-height: 0;
    }

    .board {
        flex: 0 0 auto;
        min-height: max-content;
    }

    /* =========================
   Multiplayer role modal
   ========================= */
    .roleModal {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, .55);
        z-index: 9999;
    }

    .roleModal.hidden {
        display: none;
    }

    .roleCard {
        width: min(520px, 92vw);
        border-radius: 18px;
        padding: 18px 18px 16px;
        background: linear-gradient(180deg, rgba(26, 18, 36, .96), rgba(18, 14, 24, .96));
        border: 1px solid rgba(255, 255, 255, .12);
        box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
    }

    .roleTitle {
        font-weight: 800;
        letter-spacing: .2px;
        font-size: 22px;
        margin-bottom: 6px;
    }

    .roleSub {
        opacity: .85;
        margin-bottom: 14px;
        line-height: 1.25;
    }

    .roleRow {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 12px;
    }

    .roleLabel {
        opacity: .8;
        width: 56px;
    }

    .roleInput {
        flex: 1;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .14);
        background: rgba(0, 0, 0, .25);
        color: #fff;
        outline: none;
    }

    .roleGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .roleBtn {
        padding: 12px 12px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, .18);
        background: rgba(125, 79, 255, .18);
        color: #fff;
        cursor: pointer;
        font-weight: 700;
    }

    .roleBtn:hover {
        filter: brightness(1.08);
    }

    .roleBtn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .roleBtnGhost {
        background: rgba(255, 255, 255, .06);
    }

    .roleStatus {
        margin-top: 10px;
        font-size: 13px;
        opacity: .85;
        min-height: 18px;
    }