:root{--bg:#07150f;--felt:#0f5a3c;--felt2:#0a3f2a;--card:#12241c;--card2:#1a3328;--line:#2d4a3c;--gold:#e2b758;--gold2:#b98d2f;--ink:#f3efe3;--mut:#a8b8ad;--ok:#59d68b;--bad:#ff7a6b;--warn:#ffd166;--r:14px;--fs:15px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font:var(--fs)/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;border-radius:12px;min-height:44px;padding:0 14px;background:var(--card2);color:var(--ink);border:1px solid var(--line)}
button:active{transform:scale(.98)}button:disabled{opacity:.45;cursor:default}
button.pri{background:linear-gradient(#f0c866,#c89a37);color:#2a1d02;border:0;font-weight:700;box-shadow:0 2px 0 #8a6a1d}
button.ok{background:#1f7a4a;border-color:#2fa468}button.bad{background:#7a2a22;border-color:#a8483d}
button.ghost{background:transparent}button.sm{min-height:36px;padding:0 10px;font-size:13px}
:focus-visible{outline:3px solid #8fd3ff;outline-offset:2px}
input{background:#0b1a13;border:1px solid var(--line);border-radius:10px;min-height:44px;padding:0 12px;width:100%}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#app{height:100dvh;display:flex;flex-direction:column;max-width:1280px;margin:0 auto;position:relative}
/* ecrane simple */
.screen{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.center{max-width:420px;width:100%;margin:auto;display:flex;flex-direction:column;gap:12px}
h1{margin:0;font-size:26px;color:var(--gold)}h2{margin:0 0 6px;font-size:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.mut{color:var(--mut)}.err{color:var(--bad);min-height:1.3em}.row{display:flex;gap:8px;align-items:center}.grow{flex:1}.wrap{flex-wrap:wrap}
/* bară sus */
.top{display:flex;align-items:center;gap:8px;padding:6px 10px;min-height:52px;background:#0c1d15;border-bottom:1px solid var(--line)}
.top .ttl{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bal{font-weight:800;color:var(--gold);white-space:nowrap}.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;background:#1b3a2c;font-size:13px;white-space:nowrap}
.chip.prac{background:#5a3f10;color:#ffd98a}.chip.on{background:#1f7a4a}
/* lobby */
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.room{display:flex;flex-direction:column;gap:6px;text-align:left;height:auto;padding:12px}
.room b{font-size:17px}
/* masa */
.roomv{flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:100%}
.seats{display:flex;gap:6px;overflow-x:auto;padding:6px 8px;scrollbar-width:none;min-height:64px}
.seats::-webkit-scrollbar{display:none}
.seat{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;width:56px;font-size:12px;position:relative}
.av{width:38px;height:38px;border-radius:50%;background:#274a39;display:grid;place-items:center;font-weight:700;overflow:hidden;border:2px solid transparent}
.av img{width:100%;height:100%;object-fit:cover}
.seat.sh .av{border-color:var(--gold)}.seat.a .av{border-color:#6ab7ff}.seat.b .av{border-color:#ff9a6b}
.seat .nm{max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .tag{position:absolute;top:-2px;right:2px;font-size:12px;background:#000a;border-radius:8px;padding:0 4px}
.seat .off{opacity:.45}.seat .dot{position:absolute;bottom:14px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--ok);border:1px solid #000}.seat .dot.x{background:#777}
.tablew{position:relative;min-height:0;margin:0 8px;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,var(--felt) 0%,var(--felt2) 100%);border:3px solid #5a3b1b;box-shadow:inset 0 0 40px #0008}
.tablew canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ov{position:absolute;left:0;right:0;pointer-events:none;text-align:center}
.ov.t{top:6px}.ov.b{bottom:6px}
.pill{display:inline-block;background:#000b;border:1px solid #fff2;border-radius:99px;padding:4px 12px;font-size:14px;max-width:96%}
.banner{font-size:17px;font-weight:700;padding:8px 14px;border-radius:12px;background:#000c;display:inline-block;max-width:94%}
.banner.w{color:var(--ok)}.banner.l{color:var(--bad)}.banner.n{color:var(--mut)}
.chips{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.tc{font-size:12px;background:#000a;border-radius:8px;padding:1px 6px}.tc.W{color:var(--ok)}.tc.L{color:var(--bad)}
/* dock */
.dock{padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#0c1d15;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-height:0}
.dock .row>button{flex:1}
.stake{display:flex;align-items:center;gap:6px}.stake .v{flex:1;text-align:center;font-size:22px;font-weight:800;color:var(--gold)}
.stake button{width:48px;flex:none;padding:0}
.qa{display:flex;gap:6px;flex-wrap:wrap}.qa button{flex:1;min-width:48px;min-height:36px;font-size:13px;padding:0 6px}
.modebtn{display:flex;justify-content:space-between;align-items:center;text-align:left;width:100%}
.bar{height:6px;background:#0008;border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:var(--gold);width:0}
.badge{font-size:12px;border:1px solid var(--line);border-radius:6px;padding:0 5px;color:var(--mut)}
/* modale */
.mask{position:fixed;inset:0;background:#000c;display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:18px 18px 0 0;width:100%;max-width:560px;max-height:88dvh;overflow:auto;padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
@media(min-width:700px){.mask{align-items:center}.sheet{border-radius:18px}}
.sheet h2{display:flex;justify-content:space-between;align-items:center}
.list{display:flex;flex-direction:column;gap:8px}.item{padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--card2)}
.item.sel{border-color:var(--gold)}.tabs{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}.tabs button{flex:1;min-height:38px}.tabs button.on{background:var(--gold);color:#222}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}.opt{height:auto;min-height:64px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;font-size:12px;padding:6px}
.opt.on{outline:3px solid var(--gold)}.sw{width:30px;height:30px;border-radius:8px;border:1px solid #fff4}
.vsvg svg{width:100%;height:auto;background:#fff;border-radius:10px}.vcode{font:700 22px ui-monospace,monospace;text-align:center;letter-spacing:2px;margin:6px 0;color:var(--gold)}
.chat{display:flex;flex-direction:column;gap:6px}.msgs{height:34dvh;overflow:auto;display:flex;flex-direction:column;gap:3px;font-size:14px;padding:4px;background:#0a1711;border-radius:10px}
.msgs b{color:var(--gold)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(120px + env(safe-area-inset-bottom));background:#000d;border:1px solid var(--line);padding:8px 14px;border-radius:12px;z-index:70;max-width:92%;text-align:center}
table.t{width:100%;border-collapse:collapse;font-size:13px}.t td,.t th{padding:5px 4px;border-bottom:1px solid var(--line);text-align:left}
.pos{color:var(--ok)}.neg{color:var(--bad)}
.conn{position:absolute;top:0;left:0;right:0;background:#8a5a00;color:#fff;text-align:center;padding:4px;z-index:60;font-size:13px}
/* peisaj: masa stânga, dock dreapta */
@media(orientation:landscape) and (min-width:700px){
 .roomv{grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto minmax(0,1fr)}
 .seats{grid-column:1/-1}.tablew{grid-column:1;grid-row:2;margin:0 0 6px 8px}.dock{grid-column:2;grid-row:2;overflow:auto;border-top:0;border-left:1px solid var(--line)}
 .top{min-height:44px;padding:2px 8px}.seats{min-height:56px;padding:2px 8px}
}
@media(orientation:landscape) and (max-height:560px){.x1,.qa{display:none}.av{width:32px;height:32px}.dock{gap:6px}.stake .v{font-size:19px}.tablew{margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-height:720px) and (orientation:portrait){.x1{display:none}.dock{gap:6px;padding-top:6px}.stake .v{font-size:19px}button{min-height:40px}.qa button{min-height:32px}.seats{min-height:58px}}