/* GlobalFolkGames Ludo Module Responsive Stylesheet */

html {
    scroll-behavior: smooth; /* BUTTERY SMOOTH UP AND DOWN SCROLLING */
    overscroll-behavior-y: none;
}

body {
    margin: 0; padding: 0; background-color: #121212; color: #fff;
    font-family: system-ui, sans-serif; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; height: auto;
    min-height: 100vh; overflow-y: auto; /* ALLOWS COMFORTABLE UP AND DOWN SCROLLING */
    overflow-x: hidden; /* STOPS DEFECTIVE LEFT AND RIGHT LAYOUT SLIDING */
    box-sizing: border-box;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y; /* FOEVER ALLOWS VERTICAL GESTURES, BLOCKS HORIZONTAL DRAG */
}

.back-btn { 
    background: #333; color: #fff; border: none; padding: 8px 12px; 
    border-radius: 6px; font-weight: bold; cursor: pointer; 
    text-decoration: none; font-size: 0.9rem;
}

/* Master Game Layout Arena Wrapper */
#game-arena-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    padding: 4px 0;
    box-sizing: border-box;
    gap: 4px;
    overflow-x: hidden;
    overflow-y: visible;
}

/* Persistent on-chain outage banner (Ludo, shown while devnet is unreachable) */
.chain-down-banner {
    display: none;
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 1200;
    max-width: 90%;
    text-align: center;
    background: var(--danger, #e74c3c);
    color: #fff;
    border: 2px solid #f87818;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.chain-down-banner #chain-retry-btn {
    display: inline-block;
    margin-left: 12px;
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: #f87818;
    color: #0f0f13;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.chain-down-banner #chain-retry-btn:hover { background: #ffb347; }
.chain-down-banner #chain-retry-btn:active { transform: scale(0.97); }

/* Visible integrity-warning popup (tampered / unverifiable local data).
   Brand colours: orange accent on the dark canvas, purple on the button. */
.gfg-persistence-warning {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    align-items: center;
    justify-content: center;
    z-index: 1400;
    padding: 20px;
    box-sizing: border-box;
}
.gfg-persistence-warning .gfg-pw-box {
    background: #1a1a24;
    border: 2px solid #f87818;
    border-radius: 14px;
    padding: 22px 24px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 12px 34px rgba(0,0,0,0.6);
}
.gfg-persistence-warning .gfg-pw-title {
    color: #f87818;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 10px;
}
.gfg-persistence-warning .gfg-pw-msg {
    color: #e8e8ee;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 18px;
}
.gfg-persistence-warning #gfg-pw-ok {
    border: none;
    border-radius: 9px;
    padding: 9px 22px;
    background: #7838f8;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.gfg-persistence-warning #gfg-pw-ok:hover { background: #b06cc9; }

/* Dedicated On-Screen Cultural Notification Banner Line */
#ludo-log {
    font-size: 0.85rem;
    font-weight: bold;
    color: #f87818;
    text-align: center;
    width: 94vw;
    max-width: 550px;
    min-height: 20px;
    letter-spacing: 0.3px;
    background: rgba(30,30,30,0.5);
    padding: 4px 8px;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Anti-Cheat Configuration Selector Panel Grid */
#player-setup-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 94vw;
    max-width: 550px;
    background: #1e1e1e;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #333;
    box-sizing: border-box;
    gap: 8px;
}

/* 2P / 4P mode selector (pre-lock only) */
.mode-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mode-selector .mode-label {
    font-size: 0.78rem;
    font-weight: bold;
    color: #ccc;
    margin-right: 4px;
}

.mode-btn {
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.mode-btn.active {
    background: #f87818;
    color: #000;
    border-color: #f87818;
}

.mode-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.setup-slots-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.setup-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7rem;
    font-weight: bold;
    flex: 1;
    transition: opacity 0.2s, filter 0.2s;
}

/* Seat toggle pill: tap a colour to add/remove it in 2 Players mode. */
.seat-toggle {
    background: transparent;
    color: inherit;
    border: 1.5px solid currentColor;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background 0.2s, color 0.2s, transform 0.1s;
    user-select: none;
}

.seat-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

.seat-toggle:active {
    transform: scale(0.95);
}

/* Bold INACTIVE badge shown only while the seat is out of the match. */
.seat-status {
    display: none;
    font-size: 0.62rem;
    font-weight: bold;
    color: #888;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.setup-slot.inactive .seat-status {
    display: inline;
}

.setup-slot.inactive .seat-toggle {
    color: #777;
    border-color: #555;
}

/* Greyed-out seat (2P): dropdown disabled + whole slot dimmed. */
.setup-slot.inactive {
    opacity: 0.55;
    filter: grayscale(0.6);
}

.setup-slot select {
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 3px;
    margin-top: 2px;
    font-size: 0.75rem;
    cursor: pointer;
    outline: none;
    width: 90%;
    max-width: 100px;
}

.setup-slot select:disabled {
    background: #151515;
    color: #666;
    border-color: #222;
    cursor: not-allowed;
}

/* Persistent Action Panel Controls */
.panel-control-btn {
    color: #fff;
    border: none;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    height: 40px; /* Aligned evenly to match the start button height profile */
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
    transition: background 0.2s ease;
    white-space: nowrap;
}

#pauseBtn { background: #e86818; }
#pauseBtn.paused-state { background: #2ecc71; }

#resetBtn { 
    background: #c0392b; 
    width: 100%;
    margin-top: 6px;
    padding: 8px;
    font-size: 0.8rem;
    height: auto;
}
#resetBtn:hover { background: #e74c3c; }

/* Wooden rim around the board, like a physical Ludo set. The frame sits
   OUTSIDE the canvas, so dice still bounce within the 600x600 play area and
   visually rebound off the rim. Cosmetic only. Padding was halved (12px -> 6px)
   so the rim reads as a slim frame, not a thick slab. */
#board-frame {
    display: inline-block;
    padding: 6px;
    border-radius: 12px;
    background:
        linear-gradient(135deg, #a8783f 0%, #8b5a2b 22%, #6e451f 48%, #9a6b36 72%, #7a5230 100%);
    box-shadow:
        inset 0 2px 3px rgba(255, 214, 160, 0.35),
        inset 0 -3px 6px rgba(40, 22, 6, 0.55),
        0 10px 26px rgba(0, 0, 0, 0.6);
    max-width: 94vw;
    box-sizing: border-box;
}

/* Control container scaling safely without squashing the canvas element properties.
   The canvas FILLS the frame's content box (width:100%) instead of capping itself
   at 94vw, which used to push it wider than the frame + padding and overflow the
   wood rim on one side. height:auto keeps the board perfectly square. */
canvas {
    background: #ffffff;
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    border-radius: 8px;
    touch-action: pan-y; /* VERTICAL SCROLL GESTURES ON THE BOARD ITSELF; BLOCKS HORIZONTAL */
}

/* ===== Real 3D rolled dice overlay (ludo-lab only) =====
   The dice are genuine CSS-3D cubes built by physics.js and laid over the board
   canvas on top of the wooden rim. The stage is fully transparent and ignores
   pointer events, so the canvas underneath keeps every board interaction. */
#board-frame {
    position: relative;
}

.gfg-dice-3d-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    perspective: 900px;
    transform-style: preserve-3d;
    z-index: 20;
}

.gfg-die {
    position: absolute;
    transform-style: preserve-3d;
    will-change: transform, left, top;
}

.gfg-die-shadow {
    position: absolute;
    left: 4%;
    top: 58%;
    width: 92%;
    height: 24%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0) 75%);
    transform: translateZ(0);
    pointer-events: none;
}

.gfg-die-cube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: 50% 50% 0;
}

/* Flat settled die (owner 2026-08-31): a plain 2D face shown once the die
   locks onto the ER VRF result, so the number the player sees always matches
   the number the game counts. Pips are drawn straight from the value. */
.gfg-die-flat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #ffffff 0%, #f4f4f7 55%, #e8eaee 100%);
    border: 1px solid #b8bdc6;
    border-radius: 14%;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.9),
                inset 0 -3px 5px rgba(0,0,0,0.12);
    z-index: 2;
}

.gfg-die-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #ffffff 0%, #f4f4f7 55%, #e8eaee 100%);
    border: 1px solid #b8bdc6;
    border-radius: 14%;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.9),
                inset 0 -3px 5px rgba(0,0,0,0.12);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.gfg-die-face-front  { transform: translateZ(calc(var(--die-size) / 2)); }
.gfg-die-face-back   { transform: rotateY(180deg) translateZ(calc(var(--die-size) / 2)); }
.gfg-die-face-right  { transform: rotateY(90deg) translateZ(calc(var(--die-size) / 2)); }
.gfg-die-face-left   { transform: rotateY(-90deg) translateZ(calc(var(--die-size) / 2)); }
.gfg-die-face-top    { transform: rotateX(-90deg) translateZ(calc(var(--die-size) / 2)); }
.gfg-die-face-bottom { transform: rotateX(90deg) translateZ(calc(var(--die-size) / 2)); }

.gfg-pip {
    position: absolute;
    width: var(--pip-size);
    height: var(--pip-size);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4c4c58 0%, #20202a 55%, #10101a 100%);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.7);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Persistent Console Control Center Container */
#dice-container {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 4px; 
    background: rgba(20,20,20,0.95); 
    padding: 8px 14px; 
    border-radius: 14px; 
    border: 1px solid #333; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.7); 
    width: 94vw;
    max-width: 550px;
    box-sizing: border-box;
    margin-bottom: 25px; /* Creates clean breathing room bottom tracking padding */
}

/* Pure Vanilla Mobile Warning Confirmation Modal Popup Overlay Styles */
#custom-confirm-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.85); display: none; align-items: center;
    justify-content: center; z-index: 9999; padding: 20px; box-sizing: border-box;
}

.confirm-modal-box {
    background: #1e1e1e; border: 1px solid #c0392b; padding: 20px;
    border-radius: 12px; width: 100%; max-width: 400px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.confirm-modal-box h3 { margin-top: 0; color: #e74c3c; font-size: 1.15rem; }
.confirm-modal-box p { font-size: 0.9rem; color: #ccc; line-height: 1.4; margin-bottom: 20px; }
.confirm-action-row { display: flex; justify-content: space-between; gap: 12px; width: 100%; }

.confirm-modal-btn {
    flex: 1; padding: 10px; border-radius: 6px; font-weight: bold;
    font-size: 0.9rem; border: none; cursor: pointer; transition: opacity 0.2s;
}

.confirm-modal-btn:active { opacity: 0.8; }
#confirm-ok-btn { background: #2ecc71; color: #fff; text-align: center; }
#confirm-cancel-btn { background: #555; color: #fff; text-align: center; }

/* ===== Match Complete Result Ceremony Overlay (M1 endgame) ===== */
#result-ceremony-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.88); display: none; align-items: center;
    justify-content: center; z-index: 9999; padding: 20px; box-sizing: border-box;
}

#result-ceremony-overlay.visible { display: flex; }

.ceremony-modal-box {
    background: #1e1e1e; border: 1px solid #f87818; padding: 22px;
    border-radius: 12px; width: 100%; max-width: 400px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.ceremony-modal-box h3 { margin-top: 0; color: #f87818; font-size: 1.3rem; }
.ceremony-modal-box p { font-size: 0.9rem; color: #ccc; line-height: 1.4; margin-bottom: 14px; }

.ceremony-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 18px; }
.ceremony-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: #26262e; border: 1px solid #333; border-radius: 8px;
    font-size: 0.95rem;
}
.ceremony-medal { font-size: 1.15rem; width: 26px; text-align: left; }
.ceremony-seat { font-weight: bold; flex: 1; text-align: left; }
.ceremony-actor { color: #9aa3b8; font-size: 0.82rem; }

.ceremony-proof {
    display: flex; flex-direction: column; gap: 6px; margin: 2px 0 16px;
    padding: 10px 12px; background: #20232b; border: 1px solid #333a4a;
    border-radius: 8px; font-size: 0.82rem; color: #aeb6c8; text-align: left;
    word-break: break-all; line-height: 1.5;
}
.ceremony-proof-status { color: #9fd6a9; }
.ceremony-proof-receipt { color: #cfd6e4; }
.ceremony-proof-sig { font-family: monospace; font-size: 0.72rem; background: #16181f; padding: 2px 6px; border-radius: 4px; cursor: pointer; color: #9fd6a9; }

#play-again-btn { background: #2ecc71; color: #fff; }
#ceremony-end-btn { background: #555; color: #fff; }

/* ===== Local Ludo Header (sticky, pinned under the global header) ===== */
.ludo-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    box-sizing: border-box;
    background: #1a1a24;
    border-bottom: 1px solid #2c2c3a;
    height: 48px;
    position: sticky;
    /* header.js measures the real global-header height (2 lines on mobile when
       the user pill wraps) and exposes it as --gfg-header-h, so the local
       header sticks exactly below it and is never covered. Desktop keeps a
       48px fallback. */
    top: var(--gfg-header-h, 48px);
    z-index: 10;
}

.ludo-header-center {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #f87818;
    font-size: 0.95rem;
}

.ludo-flag {
    font-size: 1.1rem;
}

/* One-line folk-game heritage strip under the local header. Keeps the
   corrected origin prominent and names where the game is most loved. */
.ludo-origin-line {
    padding: 6px 14px;
    font-size: 0.78rem;
    color: #7838f8;
    background: #14141c;
    border-bottom: 1px solid #2c2c3a;
    line-height: 1.4;
}