:root{
    --accent:#3fae5a;
    --accent-hover:#48c667;
    --danger:#d64545;
    --text:#f4ece0;
    --muted:#a99e8e;
    --wood:#5a3a22;
    --wood-light:#7a5233;
    --panel:rgba(20,14,10,0.72);
    --panel-border:rgba(255,255,255,0.08);
    --radius:16px;
    --shadow:0 18px 50px rgba(0,0,0,0.45);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
    color:var(--text);
    min-height:100vh;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(1200px 700px at 50% -10%, #33251a 0%, transparent 60%),
        radial-gradient(900px 600px at 50% 120%, #14100c 0%, transparent 55%),
        linear-gradient(160deg,#221812,#0f0b08);
    background-attachment:fixed;
}

/* ---------- Top bar ---------- */
.topbar{
    position:fixed; top:0; left:0; right:0; z-index:40;
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px;
    pointer-events:none;   /* let clicks fall through the empty middle to the Lobby button */
}
.topbar-right{display:flex; gap:10px; align-items:center;}
.topbar-btn{
    appearance:none; border:1px solid var(--panel-border); background:var(--panel);
    color:var(--text); padding:9px 14px; border-radius:12px; font-size:14px; font-weight:600;
    cursor:pointer; display:inline-flex; align-items:center; gap:8px;
    pointer-events:auto;   /* but the actual buttons stay clickable */
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    transition:transform .12s ease, background .2s ease, border-color .2s ease;
}
.topbar-btn:hover{transform:translateY(-1px); border-color:rgba(255,255,255,0.22);}
.topbar-btn:active{transform:translateY(0);}
.topbar-btn[hidden]{display:none;}   /* the class sets inline-flex, so [hidden] needs to win */
.reset-game-btn{border-color:rgba(214,69,69,.5); color:#ffd6d0; background:rgba(214,69,69,.16);}
.reset-game-btn:hover{border-color:rgba(214,69,69,.8); background:rgba(214,69,69,.28);}
.flag{width:26px; height:13px; border-radius:3px; display:block; box-shadow:0 1px 3px rgba(0,0,0,.4);}
.lang-label{font-size:12px; letter-spacing:.06em; color:var(--muted);}

/* ---------- Home layout ---------- */
.home-main{flex:1; display:flex; align-items:center; justify-content:center; padding:90px 18px 70px;}
.home-card{width:100%; max-width:360px; display:flex; flex-direction:column; align-items:center; gap:16px;}

/* Avatar carousel */
.avatar-carousel{display:flex; align-items:center; gap:12px; margin-bottom:4px;}
.avatar-stage{
    width:140px; height:140px; border-radius:50%; overflow:hidden;
    border:4px solid var(--wood-light);
    box-shadow:var(--shadow), inset 0 0 0 2px rgba(0,0,0,.25);
    background:#0d0a07; flex:none;
}
.avatar-slot{display:none; width:100%; height:100%;}
.avatar-slot.is-active{display:block;}
.avatar-svg{width:100%; height:100%; display:block;}
.carousel-arrow{
    appearance:none; width:44px; height:44px; border-radius:50%;
    border:1px solid var(--panel-border); background:var(--panel); color:var(--text);
    font-size:26px; line-height:1; cursor:pointer; flex:none;
    display:flex; align-items:center; justify-content:center;
    transition:transform .12s ease, background .2s ease;
}
.carousel-arrow:hover{transform:scale(1.06); background:rgba(255,255,255,.08);}
.carousel-arrow:active{transform:scale(.95);}

/* Inputs */
.text-input{
    width:100%; padding:14px 16px; border-radius:12px; font-size:16px;
    border:1px solid var(--panel-border); background:rgba(0,0,0,.28); color:var(--text);
    outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.text-input::placeholder{color:var(--muted);}
.text-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(63,174,90,.22);}
#lobby-code{letter-spacing:.18em; text-transform:uppercase; text-align:center; font-weight:700;}
#player-name{text-align:center; font-weight:700; letter-spacing:.04em;}

/* Start button */
.btn-start{
    width:100%; padding:15px 16px; border:none; border-radius:12px; cursor:pointer;
    font-size:18px; font-weight:800; letter-spacing:.02em; color:#0c2413;
    background:linear-gradient(180deg,var(--accent-hover),var(--accent));
    box-shadow:0 10px 24px rgba(63,174,90,.35), inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-start:hover{transform:translateY(-2px); filter:brightness(1.05);}
.btn-start:active{transform:translateY(0);}

.field-error{color:#ffb0a3; font-size:13px; align-self:flex-start; margin:-8px 0 0;}
.field-error[hidden]{display:none;}

@keyframes shake{
    10%,90%{transform:translateX(-1px);}
    20%,80%{transform:translateX(2px);}
    30%,50%,70%{transform:translateX(-5px);}
    40%,60%{transform:translateX(5px);}
}
.shake{animation:shake .5s;}

/* Voice note */
/* ~5x the original 13px (clamped so it doesn't overflow narrow phones), with a
   comfortable gap above the window's bottom edge. */
.voice-note{text-align:center; color:var(--muted); font-size:clamp(30px,6vw,65px); line-height:1.25; padding:14px 18px 48px;}

/* ---------- Modal ---------- */
.modal{position:fixed; top:0; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:20px;}
.modal[hidden]{display:none;}
.modal-backdrop{position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);}
.modal-card{
    position:relative; width:100%; max-width:460px; max-height:82vh; overflow:auto;
    background:linear-gradient(180deg,#241a13,#1b130d); border:1px solid var(--panel-border);
    border-radius:var(--radius); padding:24px 24px 20px; box-shadow:var(--shadow);
}
.modal-card h2{margin:0 0 12px; font-size:20px;}
.modal-close{position:absolute; top:12px; right:14px; border:none; background:transparent; color:var(--muted); font-size:26px; cursor:pointer; line-height:1;}
.modal-close:hover{color:var(--text);}
.rules-body{font-size:14px; line-height:1.55; color:#e7ddcd;}
.rules-body ol{padding-left:20px; margin:0;}
.rules-body li{margin-bottom:9px;}
.rules-foot{margin-top:14px; color:var(--muted); font-style:italic;}

/* ---------- Game page (M1 placeholder) ---------- */
.game-main{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:90px 18px 40px; text-align:center;}
.lobby-banner{font-size:15px; color:var(--muted); letter-spacing:.04em;}
.lobby-banner strong{color:var(--text); font-size:20px; letter-spacing:.22em; margin-left:8px;}
.table-preview{width:min(560px,92vw); height:auto; filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));}
.game-hint{color:var(--muted); max-width:440px; line-height:1.5;}
.game-hint strong{color:var(--text);}

@media (max-width:420px){
    .avatar-stage{width:120px; height:120px;}
    .home-main{padding-top:80px;}
    .lang-label{display:none;}
}

/* ---------- Game board (M3) ---------- */
.page-game .game-main{justify-content:center; gap:14px; padding:74px 14px 30px;}
.lobby-tag{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:35;
    appearance:none; cursor:pointer;
    color:var(--muted); font-size:22px; font-family:inherit; letter-spacing:.04em; text-align:center;
    background:var(--panel); border:1px solid var(--panel-border); border-radius:12px; padding:8px 18px;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:var(--shadow);
    transition:transform .12s ease, border-color .2s ease, background .2s ease;}
.lobby-tag:hover{transform:translateX(-50%) translateY(-1px); border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06);}
.lobby-tag:active{transform:translateX(-50%) translateY(0);}
.lobby-tag strong{color:var(--text); letter-spacing:.22em; margin-left:6px; font-size:28px;}

.table-wrap{width:96vw; max-width:940px;}
/* 16:9 box via padding (works on all browsers, unlike aspect-ratio). */
.table-felt{position:relative; width:100%; height:0; padding-bottom:56.25%;}
/* The visual green oval is a smaller box centered inside .table-felt, so seats
   (positioned against .table-felt itself, unchanged) end up sitting outside it. */
.table-oval{position:absolute; left:0; top:0; width:100%; height:100%;}
.table-svg{position:absolute; top:0; left:0; width:100%; height:100%; filter:drop-shadow(0 24px 44px rgba(0,0,0,.5));}

.table-center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:24%; max-width:180px;}
.direction-arrow{width:100%; color:#e7d3a8; opacity:.42; transition:transform .4s ease;}
.direction-arrow.ccw{transform:scaleX(-1);}
.direction-arrow svg{width:100%; height:auto; display:block;}
.cup{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:10%; width:clamp(48px,10%,86px); z-index:5;
    transition:left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1);}
.cup svg{width:100%; height:auto; display:block; filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));}
.cup.shaking{animation:cupShake .55s ease 3;}   /* concept 5.1: shake 3x */
.cup.tilted{transform:translate(-50%,-50%) rotate(-13deg) translateY(-4%);}
.cup .cup-shadow-dice{position:absolute; left:50%; bottom:-14%; transform:translateX(-50%) rotate(13deg); display:flex; gap:6%; opacity:0; transition:opacity .35s ease .25s; pointer-events:none;}
.cup.tilted .cup-shadow-dice{opacity:1;}
.cup .cup-shadow-dice .die{width:34%; filter:grayscale(1) brightness(.55); opacity:.75;}
@keyframes cupShake{
    0%,100%{transform:translate(-50%,-50%) rotate(0deg);}
    15%{transform:translate(-54%,-53%) rotate(-11deg);}
    30%{transform:translate(-46%,-53%) rotate(11deg);}
    45%{transform:translate(-54%,-52%) rotate(-9deg);}
    60%{transform:translate(-46%,-52%) rotate(9deg);}
    80%{transform:translate(-50%,-51%) rotate(-4deg);}
}

.seats{position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;}
.seat{position:absolute; transform:translate(-50%,-50%);
    width:13%; width:clamp(60px,13%,100px); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:auto;}
.seat-inner{position:relative; width:100%; height:0; padding-bottom:100%; border-radius:50%; box-sizing:border-box;}
.seat.empty .seat-inner{border:2.5px dashed rgba(230,222,205,.5); background:rgba(0,0,0,.28); cursor:pointer;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;}
.seat.empty .seat-inner:hover{border-color:var(--accent); background:rgba(63,174,90,.12); box-shadow:0 0 0 4px rgba(63,174,90,.18);}
.seat.occupied .seat-inner{border:3px solid var(--wood-light); background:#0d0a07; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.4);}
.seat.occupied.is-me .seat-inner{border-color:var(--accent); box-shadow:0 0 0 3px rgba(63,174,90,.35), 0 6px 16px rgba(0,0,0,.4);}
.seat-avatar{position:absolute; top:0; left:0; width:100%; height:100%;}
.seat-avatar svg{width:100%; height:100%; display:block;}
.seat-name{font-size:13px; line-height:1.2; max-width:118%; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text);}
.seat.empty .seat-name{color:var(--muted);}
.seat-leave{margin-top:2px;}
.seat-leave-btn{appearance:none; border:1px solid rgba(214,69,69,.55); background:rgba(214,69,69,.16); color:#ffd6d0;
    font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; cursor:pointer;
    transition:background .15s ease, transform .12s ease;}
.seat-leave-btn:hover{background:rgba(214,69,69,.3); transform:translateY(-1px);}

.spectator-note{text-align:center; color:var(--muted); font-size:14px; margin-top:4px;}

/* Toasts */
.toasts{position:fixed; top:66px; left:50%; transform:translateX(-50%); z-index:70;
    display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:90vw;}
.toast-msg{background:var(--panel); border:1px solid var(--panel-border); color:var(--text);
    padding:9px 16px; border-radius:20px; font-size:14px; box-shadow:var(--shadow);
    animation:toastIn .28s ease, toastOut .3s ease 3.2s forwards;}
@keyframes toastIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
@keyframes toastOut{to{opacity:0; transform:translateY(-8px);}}

/* Name-entry modal (reuses .modal / carousel) */
.modal-card--narrow{max-width:360px; display:flex; flex-direction:column; gap:12px; text-align:center;}
.modal-card--narrow h2{margin:0;}
.modal-card--narrow .avatar-carousel{justify-content:center; margin:0;}
.modal-card--narrow .avatar-stage{width:120px; height:120px;}
.modal-card--narrow .field-error{align-self:center; margin:0;}
.link-btn{display:block; margin:2px auto 0; background:none; border:none; color:var(--muted); font-size:13px; cursor:pointer; text-decoration:underline;}
.link-btn:hover{color:var(--text);}

/* Joined-players panel (center-left) */
.player-list{position:fixed; left:16px; top:50%; transform:translateY(-50%); z-index:30;
    width:170px; max-height:70vh; overflow-y:auto; padding:14px 14px 12px;
    background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:var(--shadow);}
.player-list-title{margin:0 0 8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.player-list-items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.player-list-items li{font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.player-list-items li.unseated{font-weight:800;}
@media (max-width:900px){
    .player-list{position:static; transform:none; width:min(400px,92vw); max-height:none;
        margin:0 auto; order:-1;}
}

/* Game control panel (M4b) */
/* margin-top keeps the dice result + action buttons clear of the bottom seat,
   which overhangs the table box (avatar circle + name + leave button). */
.game-panel{width:96vw; max-width:940px; display:flex; flex-direction:column; align-items:center; gap:12px; min-height:44px; margin-top:52px; padding-bottom:90px;}
.status-bar{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:35;
    width:min(94vw,900px); text-align:center;
    background:var(--panel); border:1px solid var(--panel-border); border-radius:16px; padding:14px 22px;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:var(--shadow);}
.game-status{color:var(--text); font-size:26px; font-weight:700; text-align:center; min-height:20px; line-height:1.35;}
.dice-row{display:flex; align-items:center; gap:12px;}
.dice-row[hidden]{display:none;}
.die{width:52px; height:52px; display:block; filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));}
.dice-call{font-size:15px; color:var(--muted); font-weight:700;}
.game-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.gbtn{border:none; border-radius:11px; padding:12px 20px; font-size:15px; font-weight:800; cursor:pointer; color:#fff;
    box-shadow:0 8px 18px rgba(0,0,0,.3); transition:transform .12s ease, filter .2s ease;}
.gbtn:hover{transform:translateY(-2px); filter:brightness(1.06);}
.gbtn:active{transform:translateY(0);}
.gbtn:disabled{opacity:.55; cursor:default; transform:none; filter:none;}
.gbtn-green{background:linear-gradient(180deg,#48c667,#3fae5a); color:#0c2413;}
.gbtn-red{background:linear-gradient(180deg,#e05a5a,#d64545);}
.gbtn-amber{background:linear-gradient(180deg,#e2a33c,#cf8b28); color:#2a1c06;}
.gbtn-neutral{background:linear-gradient(180deg,#6b7280,#565d68);}

/* Declare UI: Truth / Call Meier on top, the faint-red lie-value grid below. */
.declare-wrap{display:flex; flex-direction:column; align-items:center; gap:14px;}
.declare-top{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.lie-grid{display:flex; gap:10px; justify-content:center; align-items:flex-start;}
.lie-col{display:flex; flex-direction:column; gap:6px;}
.liebtn{appearance:none; min-width:56px; padding:9px 12px; border-radius:9px; cursor:pointer;
    font-size:15px; font-weight:800; letter-spacing:.03em;
    border:1px solid rgba(214,69,69,.42); background:rgba(214,69,69,.14); color:#ffd9d3;
    transition:background .14s ease, border-color .14s ease, transform .12s ease;}
.liebtn:hover{background:rgba(214,69,69,.28); border-color:rgba(214,69,69,.72); transform:translateY(-1px);}
.liebtn:active{transform:translateY(0);}
.liebtn:disabled{opacity:.5; cursor:default; transform:none;}

@media (max-width:520px){
    .seat{width:15%; width:clamp(48px,15%,80px);}
    .seat-name{font-size:11px;}
    .die{width:44px; height:44px;}
    .gbtn{padding:11px 16px; font-size:14px;}
    .lobby-tag{font-size:16px; padding:6px 12px;}
    .lobby-tag strong{font-size:19px;}
    .game-status{font-size:18px;}
    .status-bar{bottom:10px; padding:10px 14px;}
    .game-panel{margin-top:30px; padding-bottom:74px;}
    .lie-grid{gap:7px;}
    .lie-col{gap:5px;}
    .liebtn{min-width:46px; padding:8px 8px; font-size:14px;}
}