:root{--bg:#090c10;--panel:#11161c;--panel2:#171d24;--panel3:#1d252e;--border:#29343e;--text:#f7f8fa;--muted:#93a1b1;--orange:#ff4b1f;--orange2:#ff7648;--orange-d:#9f2813;--gold:#f1c45b;--green:#20d37b;--felt:#0f4a32;--felt2:#176b46;--shadow:0 20px 60px rgba(0,0,0,.45)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -10%,#1d1410 0,#090c10 42%);color:var(--text);font-family:Roboto,Arial,sans-serif}button,input{font:inherit}.belot-page{min-height:100vh}.belot-shell{max-width:1260px;margin:0 auto;padding:18px 18px 48px}.belot-brandbar{display:flex;align-items:center;gap:12px;padding:8px 0 18px}.brand-mark{display:flex;gap:1px;width:56px;height:56px;border:1px solid #3b241a;border-radius:14px;align-items:center;justify-content:center;background:linear-gradient(145deg,#24150e,#11171d);box-shadow:0 8px 28px rgba(255,75,31,.12)}.brand-mark span{font-size:18px}.brand-mark span:nth-child(odd){color:#ff6843}.brand-mark span:nth-child(even){color:#f0f2f4}.brand-title{font-family:'Playfair Display',serif;font-size:18px;font-weight:900;letter-spacing:.3px}.brand-title span{color:var(--orange)}.brand-sub{font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-top:2px}.brand-actions{margin-left:auto;display:flex;align-items:center;gap:9px}.belot-badge{padding:8px 11px;border-radius:999px;border:1px solid #483027;background:#151a20;color:#f4b2a0;font-size:10px;font-weight:800;letter-spacing:1.2px}.icon-btn{border:1px solid var(--border);background:#121820;color:#d8dee5;width:40px;height:40px;border-radius:12px;cursor:pointer}.icon-btn:hover{border-color:var(--orange);color:#fff}
#belot-module{display:block}.hero-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border:1px solid #3b2b25;border-radius:22px;background:radial-gradient(circle at 80% 10%,rgba(255,75,31,.14),transparent 34%),linear-gradient(135deg,#151a20,#0e1318);box-shadow:var(--shadow);margin-bottom:16px}.eyebrow{color:#f7a38b;font-size:10px;font-weight:900;letter-spacing:2px;margin-bottom:8px}.hero-card h1{font-family:'Playfair Display',serif;font-size:clamp(26px,3.2vw,42px);line-height:1.05;margin:0 0 10px;max-width:760px}.hero-card p{margin:0;color:var(--muted);max-width:760px;line-height:1.55}.btn-primary{border:0;border-radius:12px;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;font-weight:900;letter-spacing:.7px;cursor:pointer;box-shadow:0 8px 24px rgba(255,75,31,.22);transition:transform .15s,filter .15s}.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn-lg{padding:14px 18px;white-space:nowrap}.btn-block{width:100%;padding:13px 16px}.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.belot-user-bar{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);background:#0e141a;border-radius:16px;margin-bottom:16px}.user-info{display:flex;align-items:center;gap:10px;min-width:220px;flex:1}.avatar-ring{width:42px;height:42px;border-radius:50%;padding:2px;background:linear-gradient(135deg,var(--orange),#4d241b)}.avatar-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#1a222a}.user-info .name{font-weight:900;font-size:14px}.user-info .sub{color:var(--muted);font-size:11px;margin-top:2px}.stat-pill{display:flex;align-items:baseline;gap:5px;padding:9px 12px;border:1px solid var(--border);background:#151b22;border-radius:12px;white-space:nowrap;font-size:11px;color:var(--muted)}.stat-pill b{font-size:14px;color:#fff}.stat-pill.coins b{color:var(--gold)}.stat-pill.xp b{color:#b58cff}.stat-pill.wins b{color:#7ff0b8}
.belot-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}.side-stack{display:flex;flex-direction:column;gap:16px}.panel{border:1px solid var(--border);background:linear-gradient(180deg,#141a21,#10161b);border-radius:18px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.18)}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#1a2129,#161c23)}.panel-kicker,.room-kicker{font-size:9px;font-weight:900;letter-spacing:2px;color:#cf8b78}.panel-head h2{font-size:17px;margin:3px 0 0}.count-chip{min-width:34px;padding:7px 10px;text-align:center;border-radius:10px;background:#1e272f;border:1px solid var(--border);font-weight:900;color:var(--orange)}.panel-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#231914;border:1px solid #493026;color:var(--orange);font-size:17px}
.rooms-list{padding:12px;display:flex;flex-direction:column;gap:9px;min-height:380px}.room-card{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--border);background:linear-gradient(135deg,#171e26,#12181e);border-radius:14px;transition:.15s}.room-card:hover{border-color:#6c4030;transform:translateY(-1px)}.room-felt-icon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#1d8153,#0f4a32 60%,#0c3a28);border:1px solid #2f7a59;box-shadow:inset 0 0 0 4px rgba(255,255,255,.02);font-size:20px}.room-info{min-width:0}.room-info .room-name{font-weight:900;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-info .room-meta{margin-top:4px;color:var(--muted);font-size:11px;display:flex;flex-wrap:wrap;gap:7px}.room-bet-badge{color:var(--gold);font-weight:900}.room-status-badge{font-size:9px;font-weight:900;padding:5px 8px;border-radius:999px;text-transform:uppercase}.status-waiting{color:#78edb0;border:1px solid #215c42;background:#11251d}.status-playing{color:#ff9b84;border:1px solid #683526;background:#281711}.status-starting{color:#ffd175;border:1px solid #674b25;background:#271f10}.room-seats{display:flex;gap:4px;margin-top:7px}.seat-dot{width:17px;height:17px;border-radius:50%;border:1px solid #35414c;background:#0d1217;display:grid;place-items:center;font-size:9px}.seat-dot.filled{background:#0f4a32;border-color:#2f8a62}.seat-dot.bot{background:#2b3037;border-color:#6d757f}.btn-join-room{border:1px solid #6b2c1d;background:#2a130d;color:#ffad97;border-radius:10px;padding:9px 12px;font-size:11px;font-weight:900;cursor:pointer}.btn-join-room:hover{border-color:var(--orange);color:#fff}.btn-join-room:disabled{opacity:.35;cursor:not-allowed}.loading-state,.rooms-empty{text-align:center;padding:70px 15px;color:var(--muted);font-size:12px}.spinner{width:28px;height:28px;border:3px solid #29333e;border-top-color:var(--orange);border-radius:50%;margin:0 auto 10px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.create-panel,.stats-panel{padding-bottom:14px}.form-group{padding:12px 16px 0}.form-group label{display:block;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.form-input{width:100%;background:#0e141a;border:1px solid var(--border);color:#fff;border-radius:10px;padding:11px 12px;outline:none}.form-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,75,31,.1)}.bet-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.bet-chip{padding:10px 4px;border:1px solid var(--border);border-radius:10px;background:#0d1217;color:var(--muted);font-weight:900;cursor:pointer}.bet-chip.active{border-color:var(--orange);background:#2a1510;color:#ffb39e}.cost-box{display:flex;justify-content:space-between;align-items:center;margin:12px 16px;padding:11px 12px;border-radius:10px;border:1px solid var(--border);background:#0e141a;color:var(--muted);font-size:11px}.cost-box strong{color:var(--gold)}.warning-box{margin:0 16px 12px;padding:10px;border:1px solid #6d3023;background:#2b1510;color:#ffb4a0;border-radius:9px;font-size:10px}.create-panel .btn-block{margin:0 16px;width:calc(100% - 32px)}.xp-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;padding:14px 16px 7px}.xp-meta b{color:#fff}.xp-track{height:9px;margin:0 16px 14px;background:#0d1217;border:1px solid var(--border);border-radius:999px;overflow:hidden}.xp-fill{height:100%;width:0;background:linear-gradient(90deg,#b35cff,var(--orange));transition:width .35s}.mini-stats{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;border-top:1px solid var(--border)}.mini-stats div{text-align:center;padding:12px 4px;border-right:1px solid var(--border)}.mini-stats div:last-child{border-right:0}.mini-stats b{display:block;font-size:15px}.mini-stats span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}
.overlay{position:fixed;inset:0;background:rgba(4,7,10,.82);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:18px;z-index:9000}.overlay.active{display:flex}.room-modal{width:min(980px,100%);max-height:min(900px,96vh);overflow:auto;border:1px solid #3b2a23;border-radius:24px;background:#0d1217;box-shadow:0 30px 100px rgba(0,0,0,.55)}.room-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);background:rgba(13,18,23,.96);backdrop-filter:blur(8px)}.room-head h2{font-family:'Playfair Display',serif;margin:3px 0 0;font-size:22px}.room-body{padding:16px}.bot-timer-bar{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #3e2a23;border-radius:14px;background:linear-gradient(135deg,#231711,#151a20);margin-bottom:14px;overflow:hidden}.timer-icon{font-size:22px}.timer-text{display:flex;flex-direction:column;gap:3px;flex:1}.timer-text strong{font-size:12px}.timer-text span{font-size:10px;color:var(--muted)}.timer-text b{color:var(--orange)}.timer-number{font-size:24px;font-weight:900;color:var(--orange)}.timer-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#2a1a15}.timer-progress div{height:100%;width:100%;background:linear-gradient(90deg,var(--orange),var(--orange2));transition:width .5s linear}
.table-wrap{position:relative;min-height:530px;border-radius:22px;overflow:hidden;background:radial-gradient(circle at 50% 50%,#176c47 0,#0f4a32 42%,#0a3022 75%,#061b13 100%);border:10px solid #3b241a;box-shadow:inset 0 0 0 2px #6c472f,0 18px 60px rgba(0,0,0,.35)}.table-wrap:before{content:'';position:absolute;inset:12px;border:1px solid rgba(247,199,104,.25);border-radius:14px;pointer-events:none}.table-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.05),transparent 36%)}.table-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Playfair Display',serif;font-size:22px;letter-spacing:4px;color:#d6b56a;opacity:.95;text-shadow:0 4px 18px rgba(0,0,0,.35)}.table-logo span{font-size:15px;color:#ff7a55;letter-spacing:1px}.player-seat{position:absolute;min-width:120px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 8px;border-radius:14px}.seat-top{left:50%;top:16px;transform:translateX(-50%)}.seat-left{left:18px;top:50%;transform:translateY(-50%)}.seat-right{right:18px;top:50%;transform:translateY(-50%)}.seat-bottom{left:50%;bottom:16px;transform:translateX(-50%)}.seat-avatar{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#0c1510;border:2px solid #5e6a63;box-shadow:0 5px 16px rgba(0,0,0,.3);font-size:25px}.player-seat.occupied .seat-avatar{border-color:var(--orange);background:#241611}.seat-name{font-weight:900;text-align:center;font-size:12px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.team-badge{font-size:8px;font-weight:900;border-radius:999px;padding:4px 7px;letter-spacing:.7px}.team-0{color:#9cdcff;background:#0c2431;border:1px solid #24506a}.team-1{color:#ffb2a2;background:#311711;border:1px solid #693124}
.room-chat{margin-top:14px;border:1px solid var(--border);border-radius:14px;background:#10161b;overflow:hidden}.chat-head{padding:11px 13px;border-bottom:1px solid var(--border);font-size:10px;font-weight:900;letter-spacing:1px}.chat-head span{color:var(--muted);font-weight:500}.chat-messages{height:145px;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:7px}.chat-message{font-size:11px;color:#d7dde4}.chat-message b{color:#ffb09b}.chat-input-row{display:flex;gap:8px;padding:9px;border-top:1px solid var(--border)}.chat-input-row input{flex:1;min-width:0;background:#0b1015;border:1px solid var(--border);color:#fff;border-radius:9px;padding:10px}.chat-input-row button{border:1px solid #6b2c1d;background:#2a130d;color:#ffad97;border-radius:9px;padding:10px 13px;font-weight:900;cursor:pointer}.start-btn{margin-top:14px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:10000;padding:11px 14px;border:1px solid #5b3024;background:#1a0f0b;color:#fff;border-radius:11px;font-size:12px;font-weight:800;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}

/* GAME SCREEN */
#belot-game-screen{position:fixed;inset:0;z-index:9500;display:none;background:radial-gradient(circle at 50% 45%,#135c3e 0,#0c3a28 38%,#061d14 82%);color:#fff;overflow:hidden}#belot-game-screen.active{display:flex;flex-direction:column}.game-topbar{height:62px;display:flex;align-items:center;justify-content:space-between;padding:10px max(12px,env(safe-area-inset-left)) 10px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,12,10,.72);backdrop-filter:blur(8px)}.game-title{font-family:'Playfair Display',serif;font-weight:900;letter-spacing:2px}.game-title span{color:var(--orange)}.game-status{font-size:11px;color:#c4d3c9}.game-score-pill{padding:7px 12px;border-radius:10px;background:#0e2218;border:1px solid #2f664c;font-weight:900}.btn-game-exit{width:38px;height:38px;border-radius:11px;border:1px solid #693124;background:#24110c;color:#ffb09b;cursor:pointer}.game-layout{flex:1;display:grid;grid-template-rows:72px minmax(0,1fr) 130px;gap:10px;padding:10px;min-height:0}.game-opponent-row{display:flex;justify-content:center}.game-middle{display:grid;grid-template-columns:115px minmax(0,1fr) 115px;gap:10px;min-height:0}.game-side-seat{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.game-seat-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#0c1711;border:2px solid #4a6a58}.game-seat-name{font-size:10px;font-weight:900;text-align:center;max-width:105px}.game-seat-team{font-size:8px;color:#a6b5ad}.game-table-center{position:relative;border-radius:20px;border:1px solid rgba(247,199,104,.24);background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.04),transparent 42%);display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}.game-trump-card{position:absolute;top:10px;left:50%;transform:translateX(-50%);padding:6px 9px;border-radius:999px;background:#16110d;border:1px solid #6b432e;color:#ffc07a;font-size:9px;font-weight:900;white-space:nowrap}.current-trick{position:relative;width:min(460px,90%);height:min(310px,82%);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:7px}.trick-slot{display:flex;align-items:center;justify-content:center;position:relative}.trick-seat-label{position:absolute;top:2px;font-size:8px;color:#a9b9b0}.trick-slot-empty{border:1px dashed rgba(255,255,255,.08);border-radius:14px}.game-bottom{display:flex;flex-direction:column;gap:8px;min-height:0}.game-hand-wrap{display:flex;justify-content:center;min-height:94px}.my-hand{display:flex;align-items:flex-end;justify-content:center;padding:8px 12px 0;min-height:92px;overflow:visible}.belot-card{position:relative;width:clamp(52px,7.6vw,82px);aspect-ratio:.71;background:linear-gradient(145deg,#fff,#e9ecef);border-radius:10px;color:#111;box-shadow:0 7px 18px rgba(0,0,0,.3);border:1px solid #d5d8dd;flex:0 0 auto;user-select:none;touch-action:manipulation;transition:transform .12s,box-shadow .12s,filter .12s}.my-hand .belot-card:not(:first-child){margin-left:clamp(-18px,-1.6vw,-9px)}.belot-card.card-red{color:#b82216}.belot-card.card-black{color:#111}.belot-card.card-playable{cursor:pointer;box-shadow:0 11px 22px rgba(0,0,0,.35),0 0 0 2px rgba(255,193,7,.13)}.belot-card.card-playable:hover{transform:translateY(-6px)}.belot-card.card-selected{transform:translateY(-12px);box-shadow:0 14px 26px rgba(0,0,0,.38),0 0 0 2px var(--orange)}.belot-card.card-disabled{filter:brightness(.9)}.card-corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.9}.card-top-left{left:5px;top:5px}.card-bottom-right{right:5px;bottom:5px;transform:rotate(180deg)}.card-rank{font-size:clamp(13px,1.8vw,18px);font-weight:900}.card-suit-corner{font-size:clamp(9px,1.3vw,13px)}.card-center-suit{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(22px,3vw,34px);opacity:.96}.card-back{background:repeating-linear-gradient(135deg,#311711 0 7px,#4a2015 7px 14px);border-color:#7a3a26}.action-area{display:flex;justify-content:center;align-items:center;gap:8px;min-height:36px}.game-action-panel{max-width:760px;width:100%;padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(7,12,10,.66);backdrop-filter:blur(8px)}.bid-contracts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.bid-specials-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:6px;margin-top:6px}.bid-btn{min-height:46px;border:1px solid #34413a;border-radius:10px;background:#131d18;color:#eef4f0;font-weight:900;cursor:pointer}.bid-btn span{display:block;color:#94aa9d;font-size:8px;margin-top:2px}.bid-btn:hover:not(:disabled){border-color:var(--orange);background:#26140f}.bid-btn:disabled{opacity:.3;cursor:not-allowed}.bid-pass-btn{background:#2a1711;border-color:#633122;color:#ffb09b}.bid-contra-btn{background:#251d0f;border-color:#6a4c20;color:#ffd27c}.bid-recontra-btn{background:#2b1117;border-color:#6d2838;color:#ff9aac}.bid-history{display:flex;gap:5px;overflow:auto;padding-bottom:6px}.bid-history-entry{font-size:8px;padding:4px 6px;border-radius:6px;background:#141d18;color:#9caf9f;white-space:nowrap}.bid-history-mine{color:#fff;border:1px solid #5b3428}.decl-panel{padding:10px;border-radius:12px;background:#101915}.decl-card-item{display:flex;justify-content:space-between;gap:8px;padding:7px 8px;border:1px solid #29372f;border-radius:8px;margin:4px 0;font-size:9px}.btn-decl-submit{width:100%;border:0;border-radius:9px;padding:10px;background:linear-gradient(135deg,#1d9e64,#2ecc71);color:#fff;font-weight:900}.scoring-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:18px;z-index:9700}.scoring-card{width:min(420px,94vw);background:#171d22;border:1px solid #3d2b25;border-radius:18px;padding:20px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.55)}.scoring-card h3{font-family:'Playfair Display',serif;margin:0 0 10px;font-size:24px}.scoring-card p{color:#bcc7cf;font-size:12px;line-height:1.5}.btn-scoring{width:100%;padding:12px;border:0;border-radius:10px;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;font-weight:900;cursor:pointer}
@media (max-width:900px){.belot-layout{grid-template-columns:1fr}.side-stack{display:grid;grid-template-columns:1fr 1fr}.rooms-list{min-height:260px}.game-middle{grid-template-columns:78px minmax(0,1fr) 78px}.game-layout{grid-template-rows:62px minmax(0,1fr) 138px}.game-hand-wrap{min-height:88px}.belot-card{width:clamp(50px,10vw,72px)}}
@media (max-width:640px){.belot-shell{padding:10px 10px 36px}.brand-actions .belot-badge{display:none}.hero-card{align-items:flex-start;flex-direction:column;padding:18px;border-radius:18px}.hero-card h1{font-size:27px}.btn-lg{width:100%}.belot-user-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px}.user-info{grid-column:1/-1;min-width:0}.stat-pill{justify-content:center}.side-stack{display:flex}.room-modal{border-radius:20px}.room-body{padding:10px}.table-wrap{min-height:460px;border-width:7px}.seat-left{left:8px}.seat-right{right:8px}.seat-avatar{width:50px;height:50px}.seat-name{font-size:10px}.game-topbar{height:56px}.game-layout{grid-template-rows:54px minmax(0,1fr) 146px;gap:6px;padding:6px}.game-middle{grid-template-columns:52px minmax(0,1fr) 52px;gap:5px}.game-side-seat{gap:3px}.game-seat-avatar{width:36px;height:36px;font-size:18px}.game-seat-name{font-size:8px}.game-table-center{border-radius:14px}.current-trick{width:96%;height:78%}.game-bottom{gap:5px}.my-hand{padding:4px 4px 0;min-height:88px}.belot-card{width:clamp(42px,13.2vw,56px);border-radius:8px}.my-hand .belot-card:not(:first-child){margin-left:-9px}.card-top-left{left:4px;top:4px}.card-bottom-right{right:4px;bottom:4px}.card-rank{font-size:11px}.card-suit-corner{font-size:8px}.card-center-suit{font-size:22px}.action-area{min-height:34px}.game-action-panel{padding:7px}.bid-btn{min-height:42px;font-size:10px}.bid-btn span{font-size:7px}.bid-specials-row{grid-template-columns:1.6fr 1fr 1fr}.room-chat .chat-messages{height:120px}}
@media (max-width:390px){.belot-badge{display:none}.game-layout{grid-template-rows:50px minmax(0,1fr) 152px}.game-middle{grid-template-columns:44px minmax(0,1fr) 44px}.belot-card{width:43px}.my-hand .belot-card:not(:first-child){margin-left:-10px}}

/* =========================================================
   STANDALONE BELOT — CREAM / WHITE TEMPLATE
   ========================================================= */
:root{
  --bg:#f6f0e5;
  --panel:#fffdf8;
  --panel2:#faf6ee;
  --panel3:#f1e9dc;
  --border:#e1d6c4;
  --text:#302820;
  --muted:#786f63;
  --orange:#a96f2d;
  --orange2:#c58c43;
  --orange-d:#83551f;
  --gold:#a77a2e;
  --green:#2d7b56;
  --felt:#15583b;
  --felt2:#1d7650;
  --shadow:0 18px 55px rgba(72,53,30,.12);
}
html,body{background:radial-gradient(circle at 50% -12%,#fffdf8 0,#f6f0e5 50%,#eee3d1 100%);color:var(--text)}
.belot-shell{padding-top:18px}
.belot-brandbar{padding-bottom:20px}
.brand-mark{border-color:#d9c9ad;background:linear-gradient(145deg,#fffdf8,#eee4d4);box-shadow:0 8px 28px rgba(87,63,32,.10)}
.brand-mark span:nth-child(odd){color:#a15e32}.brand-mark span:nth-child(even){color:#41372d}
.brand-title{color:#322a23}.brand-title span{color:var(--orange)}
.brand-sub{color:#8a7e6e}
.belot-badge{border-color:#ddcfba;background:#fffdf8;color:#8d6732}
.icon-btn,.install-btn{border:1px solid var(--border);background:#fffdf8;color:#534a40;box-shadow:0 3px 10px rgba(71,51,29,.06)}
.icon-btn:hover,.install-btn:hover{border-color:#bf9659;color:#7c5522}
.install-btn{padding:9px 12px;border-radius:11px;font-size:11px;font-weight:900;cursor:pointer}
.hero-card{border-color:#ded1bd;background:radial-gradient(circle at 84% 0,rgba(197,140,67,.11),transparent 35%),linear-gradient(135deg,#fffdf9,#f4ecdf);box-shadow:var(--shadow)}
.eyebrow{color:#9b6a31}.hero-card h1{color:#302820}.hero-card p{color:#70675c}
.btn-primary{background:linear-gradient(135deg,#a96f2d,#c58c43);box-shadow:0 8px 24px rgba(169,111,45,.20)}
.belot-user-bar{border-color:var(--border);background:rgba(255,253,248,.92);box-shadow:0 8px 24px rgba(74,54,31,.05)}
.avatar-ring{background:linear-gradient(135deg,#bf8840,#8f622b)}
.avatar-ring img{background:#eee5d7}
.user-info .sub{color:var(--muted)}.stat-pill{border-color:#e2d7c5;background:#fbf8f2;color:#776d61}.stat-pill b{color:#352d25}.stat-pill.coins b{color:#9b722a}.stat-pill.xp b{color:#8c6baf}.stat-pill.wins b{color:#3f845f}
.panel{border-color:var(--border);background:linear-gradient(180deg,#fffdf9,#f9f4eb);box-shadow:0 12px 34px rgba(76,57,32,.08)}
.panel-head{border-bottom-color:var(--border);background:linear-gradient(180deg,#fffdf9,#f4ecdf)}
.panel-kicker,.room-kicker{color:#9c713c}.count-chip{background:#f4ecdf;border-color:#decfb8;color:#98672b}.panel-icon{background:#f6eddf;border-color:#ddc9a7;color:#9c6a2d}
.room-card{border-color:#e1d6c4;background:linear-gradient(135deg,#fffefa,#f6f0e7)}.room-card:hover{border-color:#c7a46e}.room-info .room-meta{color:#81786c}.room-bet-badge{color:#966c29}
.btn-join-room{border-color:#c7a164;background:#f7eddd;color:#8d5e25}.btn-join-room:hover{border-color:#aa7b36;color:#684319}
.loading-state,.rooms-empty{color:#877d70}.spinner{border-color:#e4d9c7;border-top-color:#af7834}
.form-group label{color:#7e7469}.form-input{background:#fffdfa;border-color:#ddd0bd;color:#342c25}.form-input:focus{border-color:#b98a4a;box-shadow:0 0 0 3px rgba(185,138,74,.12)}
.bet-chip{border-color:#dfd4c4;background:#fbf7ef;color:#786f65}.bet-chip.active{border-color:#b9853e;background:#f5ead9;color:#87591f}.cost-box{border-color:#ddd1bf;background:#fbf7f0;color:#756c61}.cost-box strong{color:#98702a}
.warning-box{border-color:#dfbd9d;background:#fff0e4;color:#a65d34}.xp-meta{color:#81776b}.xp-meta b{color:#3d342b}.xp-track{background:#eee5d8;border-color:#ddd0be}.xp-fill{background:linear-gradient(90deg,#a77a32,#c59043)}.mini-stats{border-top-color:var(--border)}.mini-stats div{border-right-color:var(--border)}.mini-stats span{color:#82786c}
.overlay{background:rgba(60,43,24,.42)}.room-modal{border-color:#d7c7b0;background:#fffdf8;box-shadow:0 30px 90px rgba(57,41,23,.23)}.room-head{border-bottom-color:var(--border);background:rgba(255,253,248,.96)}.room-head h2{color:#352c24}
.bot-timer-bar{border-color:#ddcfbb;background:linear-gradient(135deg,#fffaf1,#f3eadc)}.timer-text span{color:#83796c}.timer-text b,.timer-number{color:#a66d28}.timer-progress{background:#e3d5c1}
.room-chat{border-color:var(--border);background:#faf6ef}.chat-head{border-bottom-color:var(--border)}.chat-message{color:#544b41}.chat-message b{color:#96652c}.chat-input-row{border-top-color:var(--border)}.chat-input-row input{background:#fffdfa;border-color:#ddd0bd;color:#332b24}.chat-input-row button{border-color:#c7a164;background:#f6ecdd;color:#8c602a}
.toast{border-color:#d3bf9e;background:#3c2c1e;color:#fff}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px;padding:16px 4px 0;border-top:1px solid #e2d7c5;color:#857a6d;font-size:11px}.site-footer div{display:flex;gap:8px;align-items:center}.site-footer strong{color:#4b3e31}.site-footer span{opacity:.85}

/* Keep the actual card table recognizable while the site chrome stays cream/white. */
#belot-game-screen{background:radial-gradient(circle at 50% 45%,#1d7650 0,#12543a 42%,#0a3021 86%)}
.game-topbar{background:rgba(41,29,18,.72);border-bottom-color:rgba(255,255,255,.10)}.game-title span{color:#d3a25d}.game-status{color:#dfd7ca}.game-score-pill{background:#163b2a;border-color:#56806a}.btn-game-exit{border-color:#bd9360;background:#33261c;color:#f1c995}
.game-table-center{border-color:rgba(238,207,154,.30)}.game-trump-card{background:#fff7e9;border-color:#d6b174;color:#7f5a23}.game-seat-avatar{background:#163b2a;border-color:#7aa18c}
.game-action-panel{background:rgba(39,31,23,.72);border-color:rgba(255,255,255,.12)}
.bid-btn{background:#24483a;border-color:#5d806e;color:#f5f0e8}.bid-btn span{color:#b9c9be}.bid-pass-btn{background:#503326;border-color:#9a664d;color:#ffd1bd}.bid-contra-btn{background:#554422;border-color:#a58b57;color:#ffdda0}.bid-recontra-btn{background:#4d2730;border-color:#9c5565;color:#ffc3ce}
.scoring-overlay{background:rgba(49,35,22,.62)}.scoring-card{background:#fffdf8;border-color:#dbc8aa;color:#342b22;box-shadow:0 24px 70px rgba(38,28,17,.28)}.scoring-card p{color:#70665a}.btn-scoring{background:linear-gradient(135deg,#a96f2d,#c58c43)}

@media (max-width:640px){
  .belot-shell{padding-left:10px;padding-right:10px}
  .brand-actions{gap:6px}.install-btn{padding:8px 9px;font-size:10px}.belot-badge{display:none}
  .site-footer{flex-direction:column;align-items:flex-start}
  .hero-card h1{font-size:28px}
  .stat-pill{min-width:0}
}

/* =========================================================
   AUTH / ACCOUNT — STANDALONE APP
   ========================================================= */
.auth-screen{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% -10%,#fffdf8 0,#f5efe4 52%,#eadfcd 100%)}
.auth-shell{width:min(440px,100%);display:flex;flex-direction:column;align-items:center;gap:15px}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.brand-mark.large{width:64px;height:64px;border-radius:18px}
.auth-card{width:100%;padding:24px;border:1px solid #ded1bd;border-radius:24px;background:rgba(255,253,248,.94);box-shadow:0 22px 70px rgba(69,50,27,.14);backdrop-filter:blur(14px)}
.auth-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.auth-kicker{font-size:9px;letter-spacing:2px;font-weight:900;color:#9a6c36}.auth-suits{font-size:14px;letter-spacing:3px;color:#a6793e}
.auth-card h1{font-family:'Playfair Display',serif;margin:0;color:#342b23;font-size:31px}.auth-card p{margin:7px 0 18px;color:#766c61;font-size:12px;line-height:1.55}
.auth-actions-row{display:flex;flex-direction:column;gap:8px}.text-btn{border:0;background:none;color:#98692f;font-weight:800;font-size:11px;cursor:pointer;padding:4px}.text-btn:hover{text-decoration:underline}
.auth-switch{margin-top:15px;text-align:center;color:#776d62;font-size:11px}.auth-switch button{border:0;background:none;color:#8e612b;font-weight:900;cursor:pointer;padding:0 0 0 3px}.auth-message{padding:10px 11px;border-radius:10px;font-size:11px;line-height:1.45;margin-bottom:10px}.auth-message.error{border:1px solid #dfb9a2;background:#fff0e8;color:#a3532f}.auth-note{margin-top:15px;padding:10px 11px;border:1px solid #e7dbc9;background:#faf5ec;border-radius:10px;color:#7d7367;font-size:10px;text-align:center}.auth-note strong{color:#8c622e}.auth-footer{margin:0;color:#8b8074;font-size:10px;text-align:center}
.app-screen{min-height:100vh}.account-button{border:0;background:transparent;padding:0}.account-chip{display:block;border:1px solid var(--border);background:#fffdf8;color:#55493d;border-radius:12px;padding:9px 11px;font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 3px 10px rgba(71,51,29,.05);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-chip:hover{border-color:#bf9659;color:#7c5522}
.room-action{display:flex;flex-direction:column;align-items:flex-end;gap:7px}.player-seat .seat-type{font-size:8px;color:rgba(255,255,255,.64)}
.rooms-empty{display:flex;flex-direction:column;align-items:center;gap:7px;min-height:380px;justify-content:center}.rooms-empty strong{font-size:13px;color:#5a5045}.rooms-empty span{font-size:10px}.empty-suits{font-size:21px;letter-spacing:4px;color:#b08244;margin-bottom:4px}
.account-modal-card{width:min(520px,94vw);border:1px solid #d8c8b0;border-radius:20px;background:#fffdf8;box-shadow:0 30px 90px rgba(57,41,23,.23);overflow:hidden}.small-modal{width:min(480px,94vw)}.account-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fffdf9,#f4ecdf)}.account-modal-head h2{margin:3px 0 0;font-family:'Playfair Display',serif;color:#352c24}.account-modal-body{padding:18px}.account-summary{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #e5d9c7;background:#fbf7ef;border-radius:14px;margin-bottom:12px}.account-summary img{width:48px;height:48px;border-radius:50%;border:2px solid #c59a5c;background:#f3e8d6}.account-summary strong{display:block;color:#3f342a;font-size:13px}.account-summary span{display:block;color:#81786d;font-size:10px;margin-top:3px}.account-message{min-height:18px;color:#9a6c36;font-size:10px;padding:5px 2px}.account-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn-secondary{border:1px solid #d7cab7;border-radius:11px;background:#f6efe3;color:#6f6559;padding:12px;font-weight:900;cursor:pointer}.btn-secondary:hover{border-color:#bc9a6b;color:#805c2e}.install-help p{margin:0 0 10px;color:#6f665b;font-size:12px;line-height:1.55}.install-help p:last-child{margin-bottom:0}.noscript-box{position:fixed;inset:16px;z-index:99999;background:#fffdf8;border:1px solid #d9c9ad;border-radius:16px;padding:18px;color:#3a3027;box-shadow:0 20px 60px rgba(0,0,0,.15)}
@media (max-width:820px){.brand-actions{gap:6px}.brand-actions .belot-badge{display:none}.account-chip{max-width:95px}.side-stack{display:flex}}
@media (max-width:640px){.auth-card{padding:20px;border-radius:20px}.auth-card h1{font-size:27px}.auth-screen{padding-left:11px;padding-right:11px}.belot-user-bar{grid-template-columns:1fr 1fr}.account-chip{padding:8px 9px;font-size:10px}.brand-title{font-size:17px}.hero-card h1{font-size:26px}.rooms-list{min-height:300px}.room-card{grid-template-columns:40px minmax(0,1fr) auto;gap:9px}.room-action{gap:5px}.room-status-badge{font-size:8px}.btn-join-room{padding:8px 9px;font-size:10px}.room-modal{max-height:98dvh}.auth-footer{max-width:320px}.game-topbar{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-bottom:max(7px,env(safe-area-inset-bottom))}}
@media (max-width:390px){.account-chip{max-width:80px}.profile-email{display:none}.auth-card{padding:17px}.account-actions{grid-template-columns:1fr}.site-footer{font-size:10px}}


/* =========================================================
   V5 UX / GUEST ACCESS / CLEANER GAME
   ========================================================= */
.auth-modal-overlay{position:fixed;inset:0;z-index:12000;background:rgba(53,40,25,.20);align-items:center;justify-content:center;padding:18px}.auth-modal-overlay.active{display:flex}
.auth-modal-overlay[hidden]{display:none!important}.auth-modal-overlay .auth-shell{max-height:calc(100dvh - 36px);overflow:auto}.auth-modal-overlay .auth-card{box-shadow:0 30px 90px rgba(57,41,23,.22)}
.guest-auth-actions{display:flex;align-items:center;gap:7px}.menu-auth-btn{border:1px solid #d6c5ac;border-radius:11px;background:#fffdf8;color:#6d5a45;padding:9px 12px;font-size:11px;font-weight:900;cursor:pointer}.menu-auth-btn:hover{border-color:#b98a4a;color:#845b28}.menu-auth-btn.primary{background:#a66f2e;border-color:#a66f2e;color:#fff}.menu-auth-btn.primary:hover{filter:brightness(1.05)}
.guest-user-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;margin-bottom:16px;border:1px solid #dfd1bd;border-radius:16px;background:linear-gradient(135deg,#fffdf8,#f7efe3);box-shadow:0 8px 25px rgba(76,57,32,.06)}.guest-user-bar strong{display:block;color:#40352a;font-size:13px}.guest-user-bar span{display:block;color:#81766a;font-size:10px;margin-top:2px}.guest-user-actions{display:flex;gap:7px;flex:0 0 auto}
.belot-brandbar{padding-bottom:14px}.brand-sub{display:none}.hero-card{padding:22px 24px}.hero-card h1{font-size:clamp(28px,3.5vw,42px)}.hero-card p{font-size:12px}.site-footer{padding-top:12px}.site-footer span{font-size:10px}
.chat-message{padding:7px 9px;border:1px solid #e3d7c6;border-radius:10px;background:#fffdf8}.chat-message.user{background:#fff}.chat-message.bot{background:#f6efe4}.chat-message.system{background:#f1e5d2}.chat-speaker{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}.chat-speaker b{color:#805721}.chat-speaker span{font-size:8px;color:#998b7b;text-transform:uppercase;letter-spacing:.6px}.chat-text{font-size:11px;color:#4f453a;line-height:1.4}.chat-empty{padding:18px 10px;text-align:center;color:#9a8f82;font-size:10px}
.game-topbar{background:rgba(255,253,248,.96);border-bottom:1px solid #dfd1bc;color:#4a3d30}.game-title{color:#493a2b}.game-title span{color:#a36d2b}.game-status{color:#7b6d5e;font-weight:900}.game-score-pill{background:#f5eddf;border-color:#d5b886;color:#704b20}.btn-game-exit{border-color:#d3b589;background:#fffaf1;color:#805722}.game-turn-hint{font-size:10px;font-weight:900;color:#9b7550;min-width:90px;text-align:center}.game-turn-hint.mine{color:#2d7b55}.game-side-seat.turn-active .game-seat-avatar{border-color:#e5c071;box-shadow:0 0 0 3px rgba(229,192,113,.18)}.game-side-seat.self-seat .game-seat-name{color:#ffe6b3}.game-action-panel{background:rgba(255,253,248,.96);border-color:#d9c9af;color:#4c3d2e;box-shadow:0 12px 30px rgba(28,22,16,.12)}.action-title{font-weight:900;font-size:11px;color:#6f532f;margin:0 0 6px}.your-turn-label{display:inline-block;margin:0 0 6px;padding:4px 7px;border-radius:999px;background:#e9f4ec;border:1px solid #bdd8c6;color:#2b7650;font-size:8px;font-weight:900}.bid-history-entry{display:flex;gap:4px;align-items:center;background:#f5eee4;color:#7d6f60;border:1px solid #e3d6c5}.bid-history-entry b{color:#644b30}.bid-history-entry span{font-weight:900;color:#8b5e25}.bid-wait{color:#807567}.bid-wait b{color:#694d31}.bid-wait span{display:block;margin-top:3px;font-size:9px;color:#9a8e81}.bid-btn{background:#faf5ec;border-color:#d9cbb6;color:#574635}.bid-btn span{color:#8c7b68}.bid-btn:hover:not(:disabled){border-color:#ad7e42;background:#f5e9d7}.bid-pass-btn{background:#fff0e7;border-color:#e2b9a2;color:#a75b37}.bid-contra-btn{background:#f5ecd9;border-color:#d7be8a;color:#806127}.bid-recontra-btn{background:#f5e5e7;border-color:#d9aab3;color:#8e4755}.decl-card-item{border-color:#ded1bd;background:#faf6ef;color:#554637}.decl-waiting{font-size:9px;color:#9a8f82;margin:6px 0}.btn-decl-submit{background:linear-gradient(135deg,#a36e2f,#c49452)}.game-trump-card{background:#fffaf1;border-color:#d8bb8c;color:#795724}.trick-winner{outline:2px solid rgba(229,192,113,.34);border-radius:12px}
@media(max-width:700px){.guest-user-bar{flex-direction:column;align-items:flex-start}.guest-user-actions{width:100%}.guest-user-actions .menu-auth-btn{flex:1}.guest-auth-actions{gap:5px}.menu-auth-btn{padding:8px 9px}.game-turn-hint{min-width:0;font-size:9px}.game-topbar{gap:5px}.game-title{font-size:11px}}

.room-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.room-actions .btn-block{margin-top:0}.room-actions .btn-secondary{width:100%}
@media(max-width:640px){.room-actions{grid-template-columns:1fr}}