:root{
    --gold:#d6b46a;
    --bg:#050505;
    --panel:#0d0d10;
    --line:#292331;
    --ivory:#f7f1fb;
    --purple:#e9ddf3;
    --muted:#b9aeba;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
    background:#050505;
}

body{
    background:
        radial-gradient(
            circle at top,
            #15101b 0,
            #050505 45%
        );
    color:var(--gold);
    font-family:Inter,Arial,sans-serif;
    min-height:100vh;
    overflow-x:hidden;
}

button,
input{
    font:inherit;
}

button{
    -webkit-tap-highlight-color:transparent;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar{
    height:70px;
    border-bottom:1px solid #221d27;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5vw;
    position:sticky;
    top:0;
    background:rgba(5,5,5,.94);
    backdrop-filter:blur(12px);
    z-index:20;
}

.brand{
    letter-spacing:5px;
    font-weight:800;
}

.brand span{
    font-weight:400;
}

.tag{
    font-size:11px;
    letter-spacing:2px;
    opacity:.7;
}


/* =========================================================
   MAIN PAGE
========================================================= */

.wrap{
    max-width:1200px;
    margin:auto;
    padding:55px 22px;
}

.hero{
    text-align:center;
    max-width:760px;
    margin:0 auto 45px;
}

.eyebrow{
    font-size:11px;
    letter-spacing:4px;
}

.hero h1{
    font-family:Georgia,serif;
    font-size:clamp(42px,7vw,78px);
    margin:8px 0;
    color:var(--gold);
    font-weight:500;
}

.hero p{
    color:#c9becb;
    line-height:1.7;
}


/* =========================================================
   TWO GAME CARDS ONLY
========================================================= */

.game-grid{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:18px;
    max-width:900px;
    margin-inline:auto;
}

.game-card{
    min-height:240px;
    background:
        linear-gradient(
            145deg,
            #111014,
            #09090b
        );
    border:1px solid #302a35;
    border-radius:22px;
    color:var(--gold);
    cursor:pointer;
    padding:30px;
    text-align:left;
    transition:
        transform .25s,
        border-color .25s,
        box-shadow .25s;
}

.game-card:hover{
    transform:translateY(-5px);
    border-color:var(--gold);
    box-shadow:0 18px 50px #000;
}

.game-card span{
    display:block;
    font-size:54px;
    margin-bottom:30px;
}

.game-card b{
    display:block;
    font:500 28px Georgia,serif;
}

.game-card small{
    display:block;
    color:#bcb1bf;
    margin-top:8px;
}


/* =========================================================
   PANELS
========================================================= */

.panel{
    background:rgba(14,13,17,.97);
    border:1px solid var(--line);
    border-radius:22px;
    padding:28px;
    margin-top:30px;
}

.hidden{
    display:none!important;
}

.back,
.ghost{
    background:transparent;
    color:var(--gold);
    border:1px solid #51455a;
    border-radius:999px;
    padding:10px 16px;
    cursor:pointer;
    transition:.2s;
}

.back:hover,
.ghost:hover{
    border-color:var(--gold);
    background:#151117;
}

.panel h2{
    font:500 32px Georgia,serif;
}

.muted{
    color:var(--muted);
    line-height:1.6;
}


/* =========================================================
   REGISTRATION FORM
========================================================= */

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.form-grid label{
    color:#d9c8dd;
    font-size:13px;
}

.form-grid input{
    display:block;
    width:100%;
    margin-top:7px;
    padding:14px 15px;
    border-radius:12px;
    border:1px solid #3b3341;
    background:#080709;
    color:var(--ivory);
    outline:none;
}

.form-grid input:focus{
    border-color:var(--gold);
}

.consent{
    display:flex;
    gap:10px;
    align-items:center;
    color:#bdb2c0;
    margin:20px 0;
    font-size:13px;
}

.primary{
    border:0;
    background:var(--ivory);
    color:#17111b;
    padding:14px 24px;
    border-radius:999px;
    font-weight:800;
    letter-spacing:1px;
    cursor:pointer;
}

.primary:hover{
    filter:brightness(.96);
}

.primary:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.error{
    color:#ef9a9a;
}


/* =========================================================
   GAME HEADER
========================================================= */

.game-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}

.game-title-block{
    min-width:0;
}

.game-head span{
    display:block;
    font-size:12px;
    letter-spacing:2px;
}

.game-head strong{
    display:block;
    font:500 25px Georgia,serif;
    margin-top:4px;
}

.game-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.board{
    min-height:300px;
    border-radius:18px;
    background:#070708;
    border:1px solid #2b2630;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    overflow:hidden;
}

.game-help{
    margin:14px 2px 0;
}

.orientation-notice{
    margin:0 0 12px;
    padding:10px 14px;
    border:1px solid #5c4a30;
    border-radius:12px;
    background:#151108;
    color:#e6c67a;
    text-align:center;
    font-size:13px;
}


/* =========================================================
   CHESS
========================================================= */

.chessboard{
    width:min(72vw,72vh,640px);
    aspect-ratio:1;
    display:grid;
    grid-template-columns:repeat(8,1fr);
    grid-template-rows:repeat(8,1fr);
    border:5px solid #1b171d;
    flex:0 0 auto;
}

.sq{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(24px,5vw,46px);
    cursor:pointer;
    color:#111;
    min-width:0;
    min-height:0;
    user-select:none;
}

.sq.light{
    background:#f0e9f2;
}

.sq.dark{
    background:#826b91;
}

.sq.sel{
    outline:4px solid var(--gold);
    outline-offset:-4px;
}


/* =========================================================
   8 BALL POOL
========================================================= */

.pool-shell{
    width:100%;
    max-width:1080px;
    margin:auto;
    text-align:center;
}

.pool-canvas{
    width:100%;
    height:auto;
    display:block;
    border-radius:22px;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
    cursor:crosshair;
}

.pool-power-text{
    margin-top:12px;
    color:var(--gold);
    font-size:13px;
    letter-spacing:1px;
}

.pool-power-track{
    width:min(440px,80%);
    height:8px;
    margin:8px auto 14px;
    border-radius:20px;
    background:#252128;
    overflow:hidden;
}

.pool-power-bar{
    height:100%;
    background:
        linear-gradient(
            90deg,
            #eee4d4,
            #d6b46a
        );
    transition:width .04s linear;
}

.pool-status{
    margin-top:14px;
    color:#d8cadb;
}

.pool-groups{
    margin-top:7px;
    color:#a99cac;
    font-size:13px;
}

.pool-instruction{
    margin-top:9px;
    color:#998e9d;
    font-size:12px;
    line-height:1.5;
}


/* =========================================================
   WINNERS
========================================================= */

.winners{
    margin-top:36px;
}

.winner-grid{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:18px;
}

.winner-grid > div{
    background:#0d0c10;
    border:1px solid #28232c;
    border-radius:18px;
    padding:20px;
    color:#d8cadb;
}

.winner-grid h3{
    color:var(--gold);
    font-family:Georgia,serif;
    font-weight:500;
}


/* =========================================================
   WINNER MODAL
========================================================= */

.modal{
    position:fixed;
    inset:0;
    background:#000c;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2000;
}

.modal-box{
    background:#0e0c11;
    border:1px solid var(--gold);
    border-radius:22px;
    padding:40px;
    text-align:center;
    min-width:min(420px,90vw);
}

.modal-box h2{
    font:500 40px Georgia,serif;
}


/* =========================================================
   TRUE / FALLBACK FULLSCREEN
========================================================= */

#game:fullscreen,
#game:-webkit-full-screen,
#game.pseudo-fullscreen{
    background:#070708;
    border:0;
    border-radius:0;
    margin:0;
    padding:16px 18px;
    width:100vw;
    height:100dvh;
    max-width:none;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    z-index:1999;

    box-shadow:none;
}

#game.pseudo-fullscreen{
    position:fixed;
    inset:0;
}

body.pseudo-fullscreen-active{
    overflow:hidden;
}


/* Header remains visible in fullscreen */

#game:fullscreen .game-head,
#game:-webkit-full-screen .game-head,
#game.pseudo-fullscreen .game-head{
    flex:0 0 auto;
    margin-bottom:10px;
}


/* Board takes available fullscreen space */

#game:fullscreen .board,
#game:-webkit-full-screen .board,
#game.pseudo-fullscreen .board{
    flex:1 1 auto;
    min-height:0;
    padding:10px;
    border-radius:14px;
}


/* Help text compact in fullscreen */

#game:fullscreen .game-help,
#game:-webkit-full-screen .game-help,
#game.pseudo-fullscreen .game-help{
    flex:0 0 auto;
    margin:7px 2px 0;
    font-size:11px;
    line-height:1.35;
}


/* =========================================================
   CHESS FULLSCREEN
   Portrait / square optimized
========================================================= */

#game:fullscreen .chessboard,
#game:-webkit-full-screen .chessboard,
#game.pseudo-fullscreen .chessboard{
    width:min(
        calc(100vw - 36px),
        calc(100dvh - 150px),
        820px
    );
    height:auto;
}


/* =========================================================
   POOL FULLSCREEN
========================================================= */

#game:fullscreen .pool-shell,
#game:-webkit-full-screen .pool-shell,
#game.pseudo-fullscreen .pool-shell{
    max-width:none;
    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    min-height:0;
}

#game:fullscreen .pool-canvas,
#game:-webkit-full-screen .pool-canvas,
#game.pseudo-fullscreen .pool-canvas{
    width:auto;
    max-width:100%;
    max-height:calc(100dvh - 205px);
    margin:auto;
    object-fit:contain;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:800px){

    .game-grid,
    .winner-grid{
        grid-template-columns:1fr;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .topbar{
        padding:0 18px;
    }

    .tag{
        display:none;
    }

    .wrap{
        padding:32px 14px;
    }

    .panel{
        padding:18px;
    }

    .game-head{
        align-items:flex-start;
    }

    .game-actions{
        gap:7px;
    }

    .ghost{
        padding:9px 12px;
    }

    .board{
        padding:10px;
    }

    .chessboard{
        width:min(
            calc(100vw - 48px),
            620px
        );
    }
}


/* =========================================================
   PHONE
========================================================= */

@media(max-width:600px){

    .game-card{
        min-height:190px;
        padding:24px;
    }

    .game-card span{
        font-size:44px;
        margin-bottom:20px;
    }

    .hero{
        margin-bottom:28px;
    }

    .hero h1{
        font-size:48px;
    }

    .game-head strong{
        font-size:20px;
    }

    .game-head{
        gap:8px;
    }

    .game-actions{
        max-width:50%;
    }

    .game-actions .ghost{
        font-size:11px;
        padding:8px 10px;
    }

    #game:fullscreen,
    #game:-webkit-full-screen,
    #game.pseudo-fullscreen{
        padding:
            max(8px,env(safe-area-inset-top))
            max(8px,env(safe-area-inset-right))
            max(8px,env(safe-area-inset-bottom))
            max(8px,env(safe-area-inset-left));
    }

    #game:fullscreen .chessboard,
    #game:-webkit-full-screen .chessboard,
    #game.pseudo-fullscreen .chessboard{
        width:min(
            calc(100vw - 18px),
            calc(100dvh - 135px)
        );
    }
}


/* =========================================================
   POOL — PHONE LANDSCAPE FULLSCREEN
========================================================= */

@media(
    orientation:landscape
)
and
(max-height:600px){

    #game:fullscreen,
    #game:-webkit-full-screen,
    #game.pseudo-fullscreen{
        padding:
            max(5px,env(safe-area-inset-top))
            max(8px,env(safe-area-inset-right))
            max(5px,env(safe-area-inset-bottom))
            max(8px,env(safe-area-inset-left));
    }

    #game:fullscreen .game-head,
    #game:-webkit-full-screen .game-head,
    #game.pseudo-fullscreen .game-head{
        margin-bottom:4px;
    }

    #game:fullscreen .game-head strong,
    #game:-webkit-full-screen .game-head strong,
    #game.pseudo-fullscreen .game-head strong{
        font-size:17px;
    }

    #game:fullscreen .game-head span,
    #game:-webkit-full-screen .game-head span,
    #game.pseudo-fullscreen .game-head span{
        font-size:9px;
    }

    #game:fullscreen .ghost,
    #game:-webkit-full-screen .ghost,
    #game.pseudo-fullscreen .ghost{
        padding:6px 9px;
        font-size:10px;
    }

    #game:fullscreen .board,
    #game:-webkit-full-screen .board,
    #game.pseudo-fullscreen .board{
        padding:3px;
    }

    #game:fullscreen .pool-canvas,
    #game:-webkit-full-screen .pool-canvas,
    #game.pseudo-fullscreen .pool-canvas{
        max-height:calc(100dvh - 126px);
        max-width:100%;
    }

    #game:fullscreen .pool-power-text,
    #game:-webkit-full-screen .pool-power-text,
    #game.pseudo-fullscreen .pool-power-text{
        margin-top:2px;
        font-size:10px;
    }

    #game:fullscreen .pool-power-track,
    #game:-webkit-full-screen .pool-power-track,
    #game.pseudo-fullscreen .pool-power-track{
        margin:2px auto 4px;
        height:5px;
    }

    #game:fullscreen #poolShoot,
    #game:-webkit-full-screen #poolShoot,
    #game.pseudo-fullscreen #poolShoot{
        padding:7px 18px;
        font-size:11px;
    }

    #game:fullscreen .pool-status,
    #game:-webkit-full-screen .pool-status,
    #game.pseudo-fullscreen .pool-status{
        margin-top:3px;
        font-size:10px;
    }

    #game:fullscreen .pool-groups,
    #game:-webkit-full-screen .pool-groups,
    #game.pseudo-fullscreen .pool-groups{
        margin-top:2px;
        font-size:9px;
    }

    #game:fullscreen .pool-instruction,
    #game:-webkit-full-screen .pool-instruction,
    #game.pseudo-fullscreen .pool-instruction{
        display:none;
    }

    #game:fullscreen .game-help,
    #game:-webkit-full-screen .game-help,
    #game.pseudo-fullscreen .game-help{
        display:none;
    }
}