:root{
  --bg:#fff9ee;--bg2:#eef9ff;--surface:#fff;--surface2:#f7fbff;--ink:#263248;--muted:#738097;--line:#e3e9f1;
  --primary:#5b8def;--primary2:#7aa5f6;--primary-soft:#eaf1ff;--green:#52a875;--green-soft:#e8f7ee;--red:#d87575;--red-soft:#fbeaea;
  --yellow:#f4c95d;--shadow:0 14px 38px rgba(62,82,120,.12);--radius:22px;
  --card-w:78px;--card-h:109px;--hand-w:86px;--hand-h:121px;
}
*{box-sizing:border-box}html{min-height:100%;background:linear-gradient(135deg,var(--bg),var(--bg2));color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% 10%,#fff4d6 0 8%,transparent 28%),radial-gradient(circle at 90% 20%,#dff4ff 0 10%,transparent 30%)}button,input,select{font:inherit}button{cursor:pointer}a,button{color:inherit}.hidden{display:none!important}.muted{color:var(--muted)}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(30px,4vw,50px);line-height:1.03;margin-bottom:10px}h2{font-size:20px}small{display:block;color:var(--muted)}
.topbar{position:sticky;top:0;z-index:100;min-height:70px;padding:10px max(14px,calc((100vw - 1260px)/2));display:flex;align-items:center;justify-content:space-between;gap:14px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(227,233,241,.88)}.brand{border:0;background:transparent;display:flex;align-items:center;gap:9px;padding:0}.brand-card{width:38px;height:49px;border-radius:10px;background:linear-gradient(145deg,#6da0f4,#4f82df);display:grid;place-items:center;color:#fff;font-size:22px;font-weight:950;box-shadow:0 8px 18px rgba(91,141,239,.25);transform:rotate(-4deg)}.brand strong{display:block;font-size:18px}.brand small{font-size:11px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.nav{display:flex;align-items:center;gap:6px;min-width:0}.nav-item,.lang-select{border:0;background:transparent;border-radius:12px;padding:9px 10px;font-weight:750;color:#4a5870}.nav-item:hover{background:var(--primary-soft);color:#346cc9}.lang-select{border:1px solid var(--line);background:#fff;padding:7px}.credit-pill{background:#fff7d7;border:1px solid #f2df99;color:#88691d;padding:7px 10px;border-radius:999px;font-weight:850;white-space:nowrap}
.avatar,.avatar-mini,.avatar-xl,.avatar-game,.avatar-chat{object-fit:cover;border-radius:50%;background:#e9f0fb;display:inline-grid;place-items:center;flex:0 0 auto}.avatar{width:42px;height:42px}.avatar-mini{width:36px;height:36px}.avatar-xl{width:112px;height:112px;font-size:40px}.avatar-game{width:44px;height:44px}.avatar-chat{width:30px;height:30px}.avatar-letter{background:linear-gradient(145deg,#dff2ff,#ffe9bb);color:#4e6582;font-weight:900;border:2px solid #fff;box-shadow:0 4px 14px rgba(82,110,151,.12)}
.app-shell{width:min(1260px,calc(100% - 28px));margin:28px auto 70px}.footer{text-align:center;color:#8d99ab;padding:0 16px 32px;font-size:12px}.panel,.auth-card,.table-tile,.loading-card{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.panel{padding:22px}.loading-card{width:min(420px,100%);margin:90px auto;padding:30px;text-align:center;color:var(--muted)}.page-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.page-head p{color:var(--muted);max-width:680px;margin-bottom:0}.btn{border:0;border-radius:14px;padding:11px 16px;font-weight:850;min-height:43px;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.16s transform,.16s box-shadow,.16s background}@media(hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px)}}.btn.primary{background:linear-gradient(145deg,var(--primary2),var(--primary));color:#fff;box-shadow:0 8px 20px rgba(91,141,239,.24)}.btn.secondary{background:var(--primary-soft);color:#3f6fc2}.btn.ghost{background:#f4f6fa;color:#647087}.btn.danger-soft,.take-btn{background:var(--red-soft);color:#a74f4f;border:1px solid #f1cfcf}.pass-btn{background:var(--green-soft);color:#317c50;border:1px solid #cbe8d5}.btn.small{min-height:36px;padding:8px 11px}.btn.tiny{min-height:31px;padding:6px 10px;font-size:12px}.back-link{border:0;background:transparent;color:#6380aa;padding:0;font-weight:800}.input{width:100%;border:1px solid #dce4ef;background:#fff;border-radius:13px;padding:11px 12px;color:var(--ink);outline:none}.input:focus{border-color:#8eb2f3;box-shadow:0 0 0 4px rgba(91,141,239,.11)}.input.compact{width:auto;padding:8px 10px}.stack{display:grid;gap:14px}.stack label,.form-grid label{display:grid;gap:6px;font-size:13px;font-weight:800;color:#526078}.two,.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.check{display:flex!important;align-items:center;gap:8px}.notice{padding:14px;border-radius:14px;background:#f3f7fc;margin-top:14px}.notice.success{background:var(--green-soft);color:#317c50}.notice.error{background:var(--red-soft);color:#a24c4c}.toast{position:fixed;top:82px;left:50%;transform:translate(-50%,-20px);opacity:0;pointer-events:none;z-index:9999;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px;padding:11px 16px;transition:.18s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.bad{background:#fff0f0;color:#a64e4e;border-color:#f0cccc}
.auth-wrap{min-height:70vh;display:grid;place-items:center}.auth-card{width:min(520px,100%);padding:32px}.auth-logo{display:block;width:64px;height:44px;margin:0 0 18px;overflow:visible}.logo-bubble{width:54px;height:54px;border-radius:18px;background:linear-gradient(145deg,#7aa5f6,#5b8def);color:white;display:grid;place-items:center;font-weight:950;font-size:28px;box-shadow:0 10px 24px rgba(91,141,239,.25);margin-bottom:18px}.auth-links{display:flex;gap:12px;justify-content:space-between;margin-top:18px}.auth-links button{border:0;background:transparent;color:#5279ba;font-weight:800;padding:0}
.table-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.table-tile{padding:19px;display:grid;gap:10px;position:relative;overflow:hidden}.table-tile:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#75a3ef,#8ed7c5)}.table-tile-top,.tile-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.table-no{font-weight:950;color:#5676a9}.status{font-size:11px;font-weight:900;padding:5px 8px;border-radius:999px}.status.waiting{background:#fff4cf;color:#907225}.status.playing{background:#e7f6ed;color:#39815a}.status.intermission{background:#eaf1ff;color:#4f73b3}.status.closed{background:#f1f2f5;color:#7b8390}.table-tile h3{font-size:20px;margin:2px 0}.tile-meta{display:flex;flex-wrap:wrap;gap:7px}.tile-meta span,.chips span,.seat-chip{background:#f4f7fb;border:1px solid #e7ecf3;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:800;color:#66748b}.tile-mode{color:var(--muted);font-size:13px}.create-panel{margin-bottom:20px}.form-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}.empty-state{grid-column:1/-1;min-height:220px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:36px}.empty-state h3{font-size:18px;margin-top:-50px}
.room-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.room-head h1{font-size:34px;margin:4px 0 8px}.chips{display:flex;gap:6px;flex-wrap:wrap}.room-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.join-box{display:flex;gap:8px}.join-box .input{width:170px}.invite-code{margin:10px 0 0;color:#6e7b90}.room-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}.room-grid .chat-panel{grid-column:1/-1}.players-list{display:grid;gap:8px}.player-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:9px;border-radius:14px;background:#f8fbff}.round-list{display:grid;gap:8px}.round-list>div{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.game-page{display:grid;gap:12px}.game-top{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px 14px;box-shadow:0 8px 24px rgba(72,93,125,.08)}.game-top>div:nth-child(2){display:grid}.game-top span{font-size:11px;color:var(--muted)}.game-credit{margin-left:auto;font-weight:900;color:#8b6a1a}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px}.game-board{min-height:720px;position:relative;overflow:hidden;border-radius:34px;border:10px solid #d7b87b;background:radial-gradient(circle at 50% 42%,#effff4,#dff7e7 62%,#d4f0df);box-shadow:inset 0 0 0 2px rgba(255,255,255,.75),0 20px 46px rgba(87,115,101,.18)}.game-board:after{content:"";position:absolute;inset:10px;border:2px dashed rgba(62,133,88,.18);border-radius:22px;pointer-events:none}.players-ring{position:absolute;left:4%;right:4%;top:18px;z-index:6;display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.game-player{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);border:1px solid rgba(197,222,205,.9);padding:6px 8px;border-radius:999px;box-shadow:0 7px 16px rgba(75,107,89,.1)}.game-player b{font-size:12px;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-player small{font-size:10px}.game-player.attacker{outline:2px solid #f1c85e}.game-player.defender{outline:2px solid #84aef1}.game-player.finished{opacity:.58}.role{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:950;color:#fff}.role.attack{background:#d7a82f}.role.defend{background:#5b8def}.play-center{position:absolute;left:5%;right:5%;top:50%;transform:translateY(-52%);display:grid;grid-template-columns:130px 1fr;align-items:center;gap:20px;z-index:5}.deck-area{display:grid;justify-items:center;gap:10px;color:#69816f;font-size:11px;font-weight:800}.deck-stack{position:relative;width:115px;height:118px}.playing-card{width:var(--card-w);height:var(--card-h);object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 6px 7px rgba(66,79,95,.18))}.deck-card{position:absolute;left:4px;top:0;box-shadow:7px 7px 0 #8bbde8,12px 12px 0 #c7e4f9;border-radius:12px}.trump-card{position:absolute;left:30px;top:5px;transform:rotate(90deg);transform-origin:center;z-index:-1}.deck-empty{width:var(--card-w);height:var(--card-h);display:grid;place-items:center;border:2px dashed #9fc8a9;border-radius:14px;color:#7ea486}.battlefield{min-height:250px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px}.battle-pair{position:relative;width:calc(var(--card-w) + 24px);height:calc(var(--card-h) + 26px);border-radius:14px}.battle-pair .defense-card{position:absolute;left:24px;top:22px;transform:rotate(6deg)}.battle-pair.target{outline:4px solid rgba(244,201,93,.55);background:rgba(255,247,212,.6)}.table-empty{color:#75917d;background:rgba(255,255,255,.68);border:1px dashed #acd0b4;padding:12px 16px;border-radius:999px}.hand-zone{position:absolute;left:2%;right:2%;bottom:12px;z-index:8;text-align:center}.hand-hint{display:inline-block;background:rgba(255,255,255,.92);border:1px solid #d7e7dc;border-radius:999px;padding:5px 10px;color:#60806a;font-size:11px;font-weight:800}.hand{display:flex;justify-content:safe center;overflow-x:auto;overflow-y:hidden;min-height:calc(var(--hand-h) + 30px);padding:18px 18px 5px;scrollbar-width:thin}.hand .playing-card{--hand-lift:0px;--hand-rotation:0deg;width:var(--hand-w);height:var(--hand-h);flex:0 0 auto;margin-left:-31px;cursor:pointer;transform:translate3d(0,var(--hand-lift),0) rotate(var(--hand-rotation));transform-origin:center bottom;transition:.15s transform,.15s opacity,.15s filter}.hand .playing-card:first-child{margin-left:0}.hand .playing-card.selected,.hand .playing-card:focus-visible{--hand-lift:-14px;position:relative;z-index:2;filter:drop-shadow(0 10px 8px rgba(83,102,126,.22))}.hand .playing-card.disabled{cursor:not-allowed}.game-controls{display:flex;justify-content:center;gap:8px;margin-top:2px}.spectator-banner{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:8;background:rgba(255,255,255,.9);border-radius:999px;padding:8px 13px;color:#62788b;font-weight:800}.game-over{position:absolute;inset:0;z-index:20;background:rgba(248,253,250,.84);backdrop-filter:blur(7px);display:grid;place-items:center}.game-over-card{width:min(430px,92%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;text-align:center;box-shadow:var(--shadow)}.result-list{display:grid;gap:6px;margin:14px 0 18px;text-align:left}.result-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f7fbff;border:1px solid #e8eef5;border-radius:12px;padding:8px 10px}.result-row b{color:#7d641f}
.chat-panel{display:grid;grid-template-rows:auto 1fr auto;min-height:0}.chat-list{height:530px;overflow:auto;display:grid;align-content:start;gap:8px;padding-right:3px}.chat-msg{display:grid;grid-template-columns:auto 1fr;gap:8px;background:#f8fbff;padding:8px;border-radius:13px}.chat-msg b{font-size:11px}.chat-msg>div span{display:block;font-size:12px;word-break:break-word}.chat-msg small{font-size:9px}.chat-form{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:10px}
.profile-grid{display:grid;grid-template-columns:340px 1fr;gap:16px}.profile-card{text-align:center}.profile-avatar{display:grid;place-items:center;margin:8px 0 14px}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:18px 0}.stat-grid>div{background:#f8fbff;border-radius:14px;padding:12px}.stat-grid b{font-size:22px;display:block}.stat-grid span{font-size:10px;color:var(--muted)}.avatar-actions{display:grid;gap:7px}hr{border:0;border-top:1px solid var(--line);margin:24px 0}.history-list{display:grid}.history-item{display:grid;grid-template-columns:minmax(220px,1fr) 100px 90px 90px auto;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line)}
.replay-page{display:grid;gap:14px}.replay-head{display:flex;gap:14px;align-items:center}.replay-head h1{font-size:32px;margin:0}.replay-board{background:radial-gradient(circle at center,#f1fff4,#dcf5e5);border:9px solid #d7b87b;border-radius:28px;padding:18px;min-height:590px;box-shadow:var(--shadow)}.replay-players{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}.replay-player{background:rgba(255,255,255,.9);border:1px solid #d9eadf;border-radius:16px;padding:8px;display:grid;grid-template-columns:auto 1fr;gap:7px;align-items:center}.replay-player.attacker{outline:2px solid #efc75b}.replay-player.defender{outline:2px solid #78a4eb}.replay-hand{grid-column:1/-1;display:flex;overflow-x:auto;padding:5px}.replay-hand .playing-card{width:52px;height:73px;margin-left:-18px}.replay-hand .playing-card:first-child{margin-left:0}.replay-center{display:grid;grid-template-columns:130px 1fr;gap:20px;align-items:center;min-height:300px}.replay-controls{display:grid;grid-template-columns:auto auto auto 1fr auto auto;gap:8px;align-items:center}.replay-controls input[type=range]{width:100%}
@media(max-width:1000px){.table-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-layout{grid-template-columns:1fr}.chat-list{height:260px}.room-grid,.profile-grid{grid-template-columns:1fr}.game-board{min-height:690px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.history-item{grid-template-columns:1fr 80px 80px 80px auto}}
@media(max-width:720px){:root{--card-w:62px;--card-h:87px;--hand-w:66px;--hand-h:92px}.topbar{min-height:60px;padding:8px 10px}.brand small,.nav .wide,.credit-pill{display:none}.nav{gap:2px}.nav-item,.lang-select{padding:7px}.app-shell{width:calc(100% - 12px);margin:12px auto 50px}.page-head{align-items:stretch;flex-direction:column}.page-head .btn{width:100%}.table-grid{grid-template-columns:1fr}.form-grid,.two{grid-template-columns:1fr}.room-head{align-items:stretch;flex-direction:column}.room-actions,.join-box{width:100%}.join-box{flex-direction:column}.join-box .input{width:100%}.room-actions .btn{flex:1}.game-board{min-height:610px;border-width:6px;border-radius:24px}.players-ring{top:10px;left:2%;right:2%;gap:4px}.game-player{padding:4px 6px}.game-player .avatar-game{width:30px;height:30px}.game-player b{max-width:68px;font-size:10px}.game-player small{font-size:8px}.role{width:17px;height:17px;font-size:8px}.play-center{left:2%;right:2%;top:45%;grid-template-columns:86px 1fr;gap:4px}.deck-stack{width:82px;height:94px}.trump-card{left:18px}.battlefield{gap:6px;min-height:220px}.battle-pair{width:calc(var(--card-w) + 14px);height:calc(var(--card-h) + 17px)}.battle-pair .defense-card{left:14px;top:14px}.hand{justify-content:flex-start;padding-inline:8px}.game-controls .btn{min-height:40px}.chat-panel{padding:14px}.replay-board{padding:10px;border-width:6px}.replay-players{grid-template-columns:1fr 1fr}.replay-player{display:block}.replay-center{grid-template-columns:90px 1fr}.replay-controls{grid-template-columns:auto auto auto}.replay-controls input[type=range]{grid-column:1/-1}.replay-controls span{grid-column:1/3}.history-item{grid-template-columns:1fr auto}.history-item span{font-size:11px}.history-item .btn{grid-column:1/-1}}
@media(max-width:430px){:root{--card-w:55px;--card-h:77px;--hand-w:58px;--hand-h:81px}.brand strong{font-size:15px}.brand-card{width:31px;height:40px;font-size:18px}.avatar-mini{display:none}.game-board{min-height:575px}.players-ring{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;padding:0 4px 4px}.game-player{flex:0 0 auto}.play-center{top:44%}.deck-area span{font-size:9px}.replay-players{grid-template-columns:1fr}.replay-hand .playing-card{width:44px;height:62px}.table-tile{padding:16px}.panel{padding:16px}.auth-card{padding:22px}}
@media(max-height:650px) and (orientation:landscape){.topbar{position:relative}.game-board{min-height:510px}.players-ring{top:7px}.play-center{top:42%}.hand-zone{bottom:4px}.hand-hint{display:none}.footer{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
:root{
  --bg:#37414c;
  --bg2:#414c58;
  --surface:#4a5663;
  --surface2:#525f6d;
  --ink:#f3f6f9;
  --muted:#b9c2cc;
  --line:#65717e;
  --primary:#6f94c2;
  --primary2:#82a5cf;
  --primary-soft:#566b82;
  --green:#78a98a;
  --green-soft:#486153;
  --red:#bf7b7b;
  --red-soft:#694e52;
  --yellow:#d0aa68;
  --shadow:0 16px 38px rgba(25,31,38,.22);
}
html{
  background:#37414c;
  color:var(--ink);
}
body{
  background:
    radial-gradient(circle at 12% 4%,rgba(111,148,194,.14),transparent 30%),
    radial-gradient(circle at 88% 14%,rgba(199,174,130,.07),transparent 26%),
    linear-gradient(145deg,#37414c 0%,#414c58 52%,#39444f 100%);
}
h1,h2,h3,.brand strong{color:#f5f7fa}
small,.muted,.page-head p{color:var(--muted)}
.eyebrow{color:#9eb9d8}
.topbar{
  background:rgba(57,68,80,.95);
  border-bottom-color:#596572;
  box-shadow:0 8px 24px rgba(25,31,38,.12);
}
.brand-card,.logo-bubble{
  background:linear-gradient(145deg,#809fbe,#6685a8);
  box-shadow:0 8px 20px rgba(28,37,48,.24);
}
.brand small{color:#aeb9c5}
.nav-item,.lang-select{color:#d7dee6}
.nav-item:hover{background:#4b5a69;color:#fff}
.lang-select{background:#45515e;border-color:#65717e;color:#f2f5f8}
.credit-pill{background:#565247;border-color:#746c58;color:#ead8ad}
.avatar,.avatar-mini,.avatar-xl,.avatar-game,.avatar-chat{background:#596775}
.avatar-letter{
  background:linear-gradient(145deg,#70859b,#596c80);
  color:#f4f7fa;
  border-color:#718090;
  box-shadow:0 4px 14px rgba(25,31,38,.2);
}
.panel,.auth-card,.table-tile,.loading-card{
  background:rgba(73,85,98,.97);
  border-color:#64717f;
  box-shadow:var(--shadow);
}
.loading-card{color:#c0c8d1}
.btn.primary{
  background:linear-gradient(145deg,#82a5cf,#6a8fb9);
  color:#fff;
  box-shadow:0 8px 18px rgba(29,39,52,.22);
}
.btn.secondary{background:#536b83;color:#edf4fb;border:1px solid #66809a}
.replay-btn{background:#435d78;color:#f4f7fa;border:1px solid #6f89a3}
.replay-btn:hover{background:#526f8c}
.replay-btn:disabled{background:#4b5967;color:#cbd3da;border-color:#65717e;cursor:not-allowed;transform:none}
.btn.ghost{background:#56616d;color:#e1e6eb;border:1px solid #65717d}
.btn.danger-soft,.take-btn{background:#694e52;color:#f2dada;border-color:#856064}
.pass-btn{background:#486153;color:#dff1e5;border-color:#5f7a68}
.back-link,.auth-links button{color:#b4cae3}
.input{
  background:#414c58;
  border-color:#667381;
  color:#f4f6f8;
}
.input::placeholder{color:#9faab6}
.input:focus{border-color:#86a7ca;box-shadow:0 0 0 4px rgba(118,154,196,.16)}
.stack label,.form-grid label{color:#d5dce3}
.notice{background:#505c69;color:#e1e6eb}
.notice.success{background:#486153;color:#def0e4}
.notice.error{background:#694e52;color:#f2dada}
.toast{background:#4b5662;border-color:#65717d;color:#f3f6f9}
.toast.bad{background:#694e52;color:#f4dede;border-color:#865f64}
.table-tile:before{background:#7d9bb9}
.table-no{color:#b8cee5}
.status.waiting{background:#625b48;color:#ead8aa}
.status.playing{background:#496255;color:#d9eee1}
.status.intermission{background:#51657a;color:#dbe7f3}
.status.closed{background:#555f69;color:#c7cdd4}
.tile-meta span,.chips span,.seat-chip{background:#55616e;border-color:#697683;color:#d7dde4}
.tile-mode,.invite-code{color:#b5bec8}
.empty-state{color:#bec6cf}
.player-row,.stat-grid>div,.result-row,.chat-msg{background:#525e6b;border-color:#65717e}
.result-row b{color:#e2c184}
.game-top{background:#46525e;border-color:#626f7c;box-shadow:0 8px 24px rgba(23,29,35,.14)}
.game-top span{color:#b6c0ca}
.game-credit{color:#e2c184}
.game-player{
  background:rgba(76,89,102,.96);
  border-color:#6a7885;
  box-shadow:0 7px 16px rgba(23,29,35,.17);
}
.game-player.attacker{outline-color:#cba869}
.game-player.defender{outline-color:#7fa2c7}
.game-player-wrap{display:grid;justify-items:center;align-content:start;gap:6px}
.player-role-status{color:#f0f3f6;font-size:14px;font-weight:800;line-height:1;text-align:center}
.player-decision-badge{display:inline-flex;align-items:center;justify-content:center;min-width:84px;min-height:38px;padding:8px 18px;border:1px solid #7890a8;border-radius:10px;background:#354b61;color:#f7f9fb;font-size:17px;font-weight:900;line-height:1;text-align:center;box-shadow:0 7px 16px rgba(22,28,34,.3)}
.role.attack{background:#b28f52}.role.defend{background:#698db5}
.deck-area{color:#c3cbd3}
.deck-card{box-shadow:7px 7px 0 #62788d,12px 12px 0 #4d5d6b}
.deck-empty{border-color:#7c8995;color:#c1c8cf}
.battle-pair.target{outline-color:rgba(210,170,104,.64);background:rgba(160,137,100,.18)}
.table-empty{color:#d0d6dc;background:rgba(73,85,98,.82);border-color:#75818d}
.hand-hint{background:rgba(70,82,94,.95);border-color:#687582;color:#d4dae0}
.spectator-banner{background:rgba(70,82,94,.95);color:#d7dde3;border:1px solid #687582}
.game-over{background:rgba(52,62,72,.88)}
.game-over-card{background:#4b5764;border-color:#65717e}
.chat-msg b{color:#f1f4f7}.chat-msg>div span{color:#e0e5ea}.chat-msg small{color:#aeb7c1}
.replay-board{
  background:radial-gradient(circle at center,#687785,#586673);
  border-color:#9d876b;
}
.replay-player{background:rgba(76,89,102,.96);border-color:#697783}
.replay-player.attacker{outline-color:#cba869}.replay-player.defender{outline-color:#7fa2c7}
.footer{color:#9faab5}
hr{border-top-color:#65717e}
.take-btn:hover{background:#74565a}.pass-btn:hover{background:#526c5c}
.mobile-menu{display:none;border:1px solid var(--line);background:#45515e;color:#f4f6f8;border-radius:10px;min-width:42px;min-height:42px}
.nav-links{display:flex;align-items:center;gap:6px;min-width:0}
.status.round_finished{background:#51657a;color:#dbe7f3}
.play-center{grid-template-columns:minmax(270px,340px) 1fr}
.piles{display:grid;grid-template-columns:repeat(3,minmax(78px,1fr));gap:10px;align-items:start}
.pile{display:grid;justify-items:center;gap:7px;color:#d1d8df;font-size:11px;font-weight:800;text-align:center}
.pile>span{text-transform:uppercase;letter-spacing:.08em}
.pile-card{position:relative;width:var(--card-w);height:var(--card-h)}
.pile .deck-card,.pile .discard-card{position:static;box-shadow:5px 5px 0 #62788d,9px 9px 0 #4d5d6b;border-radius:12px}
.draw-pile{grid-column:span 2}
.pile .draw-stack{width:calc(var(--card-w) + 48px)}
.pile .draw-stack .draw-trump-card{position:absolute;left:48px;top:0;z-index:0;transform:rotate(270deg);filter:drop-shadow(0 7px 8px rgba(22,28,34,.3))}
.pile .draw-stack .deck-card{position:absolute;left:0;top:0;z-index:1}
.pile .draw-stack.trump-only .draw-trump-card{left:50%;z-index:1;transform:translateX(-50%)}
.pile .draw-stack .trump-suit-icon{position:absolute;left:50%;top:50%;width:var(--card-w);height:var(--card-w);object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 7px 8px rgba(22,28,34,.3))}
.hand{scroll-padding-inline:12px;overscroll-behavior-x:contain}
.hand .playing-card{opacity:1;touch-action:manipulation}
.hand .playing-card.disabled{opacity:1;cursor:not-allowed;pointer-events:none}
.hand .playing-card.hand-trump{outline:2px solid #dc963f;outline-offset:-2px;border-radius:8% / 6%}
.hand .playing-card.processing{pointer-events:none}
.result-summary{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.result-actions>*{width:100%}
.result-actions>*:last-child:nth-child(odd){grid-column:1/-1}
.continue-panel{display:grid;gap:10px;margin-top:2px}
.continue-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.continue-chip{position:relative;width:32px;height:32px}
.continue-chip .avatar-chat{width:32px;height:32px}
.continue-chip-mark{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:950;line-height:1;box-shadow:0 0 0 2px #1b2621}
.continue-chip-pending .continue-chip-mark{background:#4a4030;color:#e8c98a}
.continue-chip-ready .continue-chip-mark{background:#0d5139;color:#73edb3}
.continue-chip-auto .continue-chip-mark{background:#123b59;color:#8ed5ff}
.continue-timer{text-align:center;color:var(--muted);font-size:12px;font-weight:800}
.continue-waiting{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:#73edb3;font-weight:800;font-size:13px;padding:9px 0}
.replay-piles{min-width:270px}
.replay-event{text-align:center;min-height:24px;color:#d5dde5;font-weight:800;text-transform:capitalize}
.replay-controls{grid-template-columns:auto auto auto auto 1fr auto auto}
.pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 8px 8px}
.pagination .btn:disabled{opacity:.45;pointer-events:none}
@media(max-width:1000px){
  .play-center{grid-template-columns:1fr;top:43%;gap:10px}
  .piles{width:min(380px,100%);margin:auto}
  .battlefield{min-height:190px}
}
@media(max-width:720px){
  .topbar{align-items:flex-start}
  .nav{position:relative;justify-content:flex-end}
  .mobile-menu{display:grid;place-items:center}
  .nav-links{display:none;position:absolute;right:0;top:48px;width:max-content;min-width:200px;max-width:min(236px,calc(100vw - 28px));padding:12px;gap:4px;flex-direction:column;align-items:stretch;background:#46525e;border:1px solid #65717e;border-radius:16px;box-shadow:var(--shadow)}
  .nav.open .nav-links{display:flex}
  .nav-links .nav-item,.nav-links .btn,.nav-links .lang-select{display:block;width:100%;padding:10px 12px;border-radius:10px;text-align:left}
  .nav-links .avatar-mini{display:none}
  .nav-links .credit-pill{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:4px 0 2px;
    padding:10px 14px;
    border:1px solid rgba(246,198,63,.38);
    border-radius:12px;
    background:linear-gradient(135deg,rgba(246,198,63,.22),rgba(246,198,63,.05)),var(--credits-bg,#3a2d10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 14px rgba(0,0,0,.28);
    font-size:15px;
  }
  .nav-links .credit-pill .coin-icon{width:20px;height:20px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
  .play-center{top:39%;left:1%;right:1%}
  .piles{grid-template-columns:repeat(3,minmax(62px,1fr));gap:4px}
  .pile{font-size:9px}
  .hand{padding-inline:10px;padding-bottom:8px}
  .hand .playing-card{margin-left:-20px}
  .hand .playing-card:first-child{margin-left:0}
  .replay-center{grid-template-columns:1fr}
  .replay-piles{min-width:0}
  .replay-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .replay-controls input[type=range]{grid-column:1/-1}
}
@media(max-width:430px){
  .game-board{min-height:650px}
  .play-center{top:37%}
  .hand .playing-card{margin-left:-16px}
}
@media(max-height:650px) and (orientation:landscape){
  .play-center{top:37%;grid-template-columns:minmax(240px,300px) 1fr}
  .piles{grid-template-columns:repeat(3,minmax(60px,1fr))}
}
.game-top{position:relative;z-index:30}
.game-top>div:nth-child(2){min-width:0;flex:1}
.game-top>div:nth-child(2)>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-top-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.game-layout{grid-template-columns:minmax(0,1fr) minmax(290px,320px)}
.game-board:after{inset:8px;border:1px solid rgba(225,232,238,.14);border-radius:17px}
.game-chat-toggle,.game-sound-toggle,.game-top-actions .self-seat-control{position:relative;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:1px solid #687786;border-radius:12px;background:#53616e;color:#f4f7fa;font-size:19px;place-items:center}
.game-chat-toggle{display:none}.game-sound-toggle{display:grid}
.game-top-actions .self-seat-control{display:grid}
.game-top-actions .self-seat-control svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-unread{position:absolute;right:-6px;top:-7px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center;border:2px solid #46525e;border-radius:999px;background:#bf6f73;color:#fff;font-size:10px;font-weight:950}
.chat-unread[hidden]{display:none}
.game-chat-shell{min-width:0}
.game-chat-shell>.chat-panel{height:100%}
.chat-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.game-chat-shell .chat-panel-head h2{margin:0}
.game-chat-close{display:none}
@media(min-width:1101px){
  .game-chat-shell{position:relative;min-height:0}
  .game-chat-shell>.chat-panel{
    position:absolute;
    inset:0;
    height:auto;
    min-height:0;
    overflow:hidden;
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  .game-chat-shell .chat-list{
    height:auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(190,204,196,.48) transparent;
  }
  .game-chat-shell .chat-list::-webkit-scrollbar{width:6px}
  .game-chat-shell .chat-list::-webkit-scrollbar-track{background:transparent}
  .game-chat-shell .chat-list::-webkit-scrollbar-thumb{
    border:1px solid transparent;
    border-radius:999px;
    background:rgba(190,204,196,.48);
    background-clip:padding-box;
  }
  .game-chat-shell .chat-list::-webkit-scrollbar-thumb:hover{background:rgba(210,220,214,.68);background-clip:padding-box}
}
.self-seat-control{white-space:nowrap}
.player-chat-bubble{max-width:180px;margin-top:4px;padding:7px 10px;border-radius:12px;background:#fff;color:#273342;font-size:11px;font-weight:750;line-height:1.25;overflow-wrap:anywhere;box-shadow:0 7px 18px rgba(20,27,34,.24)}
.hand-status-row{min-height:29px;display:flex;align-items:center;justify-content:center;gap:8px}
.turn-timer{min-width:58px;padding:6px 9px;border:1px solid #967f58;border-radius:999px;background:#564f43;color:#f2d89f;font-size:12px;font-weight:950;line-height:1}
.game-controls{min-height:48px;align-items:center}
.game-controls .btn{min-width:112px;min-height:48px;font-size:15px}
.hand{display:grid;position:relative;justify-content:center;justify-items:center;align-content:end;overflow:visible;scrollbar-width:none}
.hand::-webkit-scrollbar{display:none}
.hand-row{position:relative;width:100%;display:flex;justify-content:center}
.hand-row+.hand-row{margin-top:var(--hand-row-overlap,-60px)}
.hand-card-slot{position:relative;width:var(--hand-w);height:var(--hand-h);flex:0 0 auto;margin-left:var(--hand-overlap,-31px);pointer-events:none}
.hand-card-slot.selected-card-slot{z-index:2}
.hand-card-slot:first-child{margin-left:0}
.hand-card-slot .playing-card{margin-left:0;pointer-events:auto}
.hand-row:has(.playing-card.selected),.hand-row:has(.playing-card:focus-visible){z-index:20!important}
@media(max-width:1100px){
  .game-page{width:100vw;max-width:none;margin-left:calc(50% - 50vw);padding:0 8px}
  .game-layout{grid-template-columns:minmax(0,1fr)}
  .game-chat-toggle{display:grid}
  .game-chat-shell{display:none;position:fixed;inset:0;z-index:400;padding:12px;background:rgba(25,31,38,.78);backdrop-filter:blur(5px)}
  .game-chat-shell.open{display:grid;place-items:center}
  .game-chat-shell>.chat-panel{width:min(540px,100%);height:min(680px,calc(100dvh - 24px));padding-top:22px}
  .game-chat-shell .chat-list{height:auto;min-height:0}
  .game-chat-shell.open .chat-list{
    scrollbar-width:thin;
    scrollbar-color:rgba(190,204,196,.48) transparent;
  }
  .game-chat-shell.open .chat-list::-webkit-scrollbar{width:6px}
  .game-chat-shell.open .chat-list::-webkit-scrollbar-track{background:transparent}
  .game-chat-shell.open .chat-list::-webkit-scrollbar-thumb{
    border:1px solid transparent;
    border-radius:999px;
    background:rgba(190,204,196,.48);
    background-clip:padding-box;
  }
  .game-chat-shell.open .chat-list::-webkit-scrollbar-thumb:hover{background:rgba(210,220,214,.68);background-clip:padding-box}
  .game-chat-shell.open .chat-msg b{font-size:12px}
  .game-chat-shell.open .chat-msg>div span{font-size:13px}
  .game-chat-shell.open .chat-msg small{font-size:10px}
  .game-chat-close{display:grid;place-items:center;position:static;flex:0 0 auto;width:38px;height:38px;padding:0;border:1px solid #748391;border-radius:11px;background:#566472;color:#fff;font-size:25px;line-height:1}
  .game-board{min-height:720px}
  .play-center{top:43%;grid-template-columns:minmax(250px,310px) 1fr;gap:12px}
  .piles{width:100%;margin:0}
}
@media(max-width:720px){
  html.game-active,body.game-active{height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden;overscroll-behavior:none}
  body.game-active .topbar{position:relative;height:48px;min-height:48px;padding:4px 7px}
  body.game-active .brand-card{width:28px;height:36px;font-size:17px}
  body.game-active .brand strong{font-size:14px}
  body.game-active .mobile-menu{min-width:38px;min-height:38px}
  body.game-active .app-shell{width:100%;height:calc(100dvh - 48px);min-height:0;max-height:calc(100dvh - 48px);margin:0;overflow:hidden}
  body.game-active .footer{display:none}
  body.game-active .game-page{width:100%;height:100%;margin:0;padding:4px;grid-template-rows:auto minmax(0,1fr);gap:4px}
  body.game-active .game-layout{height:100%;min-height:0}
  body.game-active .game-board{height:100%;min-height:0}
  .game-top{padding:5px 7px;border-radius:14px;gap:6px}
  .game-top>div:nth-child(2)>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .game-top-actions{gap:4px}
  .game-chat-toggle,.game-sound-toggle,.game-top-actions .self-seat-control{width:38px;min-width:38px;height:38px}
  .game-board{border-width:4px;border-radius:18px}
  .game-board:after{inset:5px;border-radius:12px}
  .players-ring{gap:7px}
  .play-center{left:1%;right:1%;top:43%;grid-template-columns:1fr;gap:10px}
  .piles{width:min(360px,100%);margin:auto}
  .battlefield{min-height:175px;gap:9px;padding:5px 7px}
  .hand-zone{left:0;right:0;bottom:8px}
  .hand-status-row{margin-bottom:3px}
  .hand{width:100%;padding:16px 10px 7px}
  .game-controls{margin-top:4px}
  .game-controls .btn{min-width:120px;min-height:48px}
  .game-chat-shell{padding:6px}
  .game-chat-shell>.chat-panel{width:100%;height:calc(100dvh - 12px);padding-top:14px;border-radius:18px}
  .player-chat-bubble{max-width:130px;font-size:10px}
}
@media(max-width:430px){
  body.game-active .players-ring{overflow:visible;flex-wrap:wrap;justify-content:center;gap:7px 8px;padding:0 6px 5px}
  body.game-active .play-center{top:clamp(160px,25%,185px);bottom:clamp(185px,29%,220px);transform:none;grid-template-rows:auto minmax(0,1fr);align-items:start}
  body.game-active .piles{width:min(300px,86%)}
}
@media(max-width:390px) and (max-height:700px) and (orientation:portrait){
  body.game-active .topbar{height:44px;min-height:44px;padding:3px 6px}
  body.game-active .app-shell{height:calc(100dvh - 44px);max-height:calc(100dvh - 44px)}
  body.game-active .brand-card{width:26px;height:32px;font-size:16px}
  body.game-active .mobile-menu{min-width:34px;min-height:34px}
  body.game-active .game-page{--card-w:46px;--card-h:64px;--hand-w:45px;--hand-h:63px}
  body.game-active .game-top{min-height:42px;padding:2px 5px;gap:5px}
  body.game-active .game-top>div:nth-child(2)>b{font-size:12px}
  body.game-active .game-top>div:nth-child(2)>span{font-size:8px}
  body.game-active .game-top-actions{gap:3px}
  body.game-active .game-chat-toggle,body.game-active .game-sound-toggle,body.game-active .game-top-actions .self-seat-control{width:34px;min-width:34px}
  body.game-active .game-top-actions .game-chat-toggle,
  body.game-active .game-top-actions .game-sound-toggle,
  body.game-active .game-top-actions .self-seat-control{height:34px;min-height:34px}
  body.game-active .game-top-actions .self-seat-control svg{width:19px;height:19px}
  body.game-active .players-ring{left:1%;right:1%;top:5px;gap:0;padding:0 4px 4px;overflow:visible;flex-wrap:nowrap;justify-content:space-evenly}
  body.game-active .game-player-wrap{gap:3px;min-width:0}
  body.game-active .game-player{gap:2px;padding:2px 3px}
  body.game-active .game-player .avatar-game{width:20px;height:20px}
  body.game-active .game-player b{max-width:30px;font-size:8px}
  body.game-active .game-player small{font-size:7px}
  body.game-active .player-role-status{font-size:9px;line-height:1.1}
  body.game-active .player-decision-badge{min-width:72px;min-height:36px;padding:7px 14px;font-size:16px}
  body.game-active .player-chat-bubble{max-width:72px;padding:4px 6px;font-size:8px}
  body.game-active .play-center{left:1%;right:1%;top:clamp(60px,14%,82px);bottom:clamp(152px,31%,172px);grid-template-columns:1fr;gap:8px}
  body.game-active .piles{width:min(220px,76%);grid-template-columns:repeat(3,minmax(42px,1fr));gap:4px}
  body.game-active .pile{gap:3px;font-size:8px}
  body.game-active .pile .draw-stack{width:calc(var(--card-w) + 30px)}
  body.game-active .pile .draw-stack .draw-trump-card{left:30px}
  body.game-active .battlefield{min-height:115px;gap:4px;padding:5px 8px}
  body.game-active .battle-pair{width:calc(var(--card-w) + 12px);height:calc(var(--card-h) + 13px)}
  body.game-active .battle-pair .defense-card{left:10px;top:10px}
  body.game-active .hand-zone{left:4px;right:4px;bottom:4px}
  body.game-active .hand-status-row{min-height:21px;margin-bottom:3px;gap:5px}
  body.game-active .hand-hint,
  body.game-active .turn-timer{padding:3px 6px;font-size:9px}
  body.game-active .hand{min-height:calc(var(--hand-h) + 11px);padding:7px 6px 4px}
  body.game-active .game-controls{min-height:38px;margin-top:4px;gap:7px}
  body.game-active .game-controls .btn{min-width:88px;min-height:38px;padding:6px 10px;font-size:12px}
}
:root{
  --lobby-bg:#0d0d0a;
  --lobby-bg-soft:#15130e;
  --panel-bg:#101d19;
  --panel-bg-hover:#1b2420;
  --panel-border:rgba(246,198,63,.14);
  --panel-border-strong:rgba(246,198,63,.4);
  --gold:#f6c63f;
  --gold-light:#ffd657;
  --gold-dark:#c99728;
  --text-main:#f7f4ec;
  --text-secondary:#beb9ad;
  --text-muted:#8f8a80;
  --filter-bg:#111713;
  --filter-border:rgba(255,255,255,.1);
  --green-thumbnail:#0d492f;
  --green-thumbnail-dark:#093522;
  --playing-bg:#0d5428;
  --playing-border:rgba(65,235,112,.16);
  --playing-text:#52ef7a;
  --stats-blue-bg:#123b59;
  --stats-blue-text:#8ed5ff;
  --stats-neutral-bg:rgba(52,49,42,.92);
  --credits-bg:#3a2d10;
  --credits-text:#f6c63f;
  --danger:#8b4f59;
  --bg:var(--lobby-bg);
  --bg2:var(--lobby-bg-soft);
  --surface:var(--panel-bg);
  --surface2:var(--panel-bg-hover);
  --ink:var(--text-main);
  --muted:var(--text-muted);
  --line:var(--panel-border);
  --primary:var(--gold);
  --primary2:var(--gold-light);
  --primary-soft:var(--filter-bg);
  --green:#70a97f;
  --green-soft:#263f2c;
  --red:#b66b76;
  --red-soft:#3d252a;
  --yellow:var(--gold);
  --shadow:0 18px 44px rgba(0,0,0,.34);
  --radius:16px;
}
html{background:var(--bg)}
body{
  background:radial-gradient(circle at 72% -12%,rgba(112,69,28,.18),transparent 38%),linear-gradient(180deg,var(--lobby-bg-soft),var(--lobby-bg) 62%);
  color:var(--ink);
  font-weight:450;
}
h1,h2,h3,.brand strong{color:var(--ink)}
h1{font-size:clamp(27px,3vw,38px);line-height:1.08;letter-spacing:-.025em;font-weight:800}
h2{font-size:18px;letter-spacing:-.01em;font-weight:750}
h3{font-weight:750}
.eyebrow{color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.14em}
.muted,small,.page-head p{color:var(--muted)}
.app-shell{margin:22px auto 56px}
.topbar{
  min-height:56px;
  padding:6px max(14px,calc((100vw - 1260px)/2));
  background:rgba(13,13,10,.96);
  border-bottom:1px solid var(--panel-border);
  box-shadow:0 8px 28px rgba(0,0,0,.24);
}
.brand{gap:8px}
.brand-card,.logo-bubble{
  background:linear-gradient(145deg,var(--gold-light),var(--gold-dark));
  color:#16120a;
  box-shadow:inset 0 1px 0 rgba(255,248,220,.22),0 7px 18px rgba(0,0,0,.28);
  transform:none;
}
.brand-card{width:30px;height:38px;border-radius:9px;font-size:17px}
.brand strong{font-size:15px;letter-spacing:-.01em}
.brand small{font-size:9px;letter-spacing:.15em;color:var(--text-muted)}
.nav-item,.lang-select{padding:7px 9px;border-radius:9px;color:var(--text-secondary);font-size:13px;font-weight:650}
.nav-item:hover{background:var(--filter-bg);color:var(--text-main)}
.lang-select{background:var(--panel-bg);border:1px solid var(--panel-border)}
.credit-pill{padding:6px 9px;background:var(--credits-bg);border:0;color:var(--credits-text);font-size:12px;font-weight:750}
.coin-icon{width:1.25em;height:1.25em;display:inline-block;flex:0 0 auto;object-fit:contain;vertical-align:middle}
.credit-pill,.credits-stat,.room-entry-chip{display:inline-flex;align-items:center;justify-content:center;gap:.25em}
.avatar,.avatar-mini,.avatar-xl,.avatar-game,.avatar-chat{background:#2b3a33}
.avatar-letter{background:linear-gradient(145deg,#4e655b,#34483f);color:#f2f5f2;border-color:#61766c;box-shadow:0 4px 14px rgba(4,9,7,.22)}
body:not(.game-active):not(.lobby-active) .avatar,
body:not(.game-active):not(.lobby-active) .avatar-mini,
body:not(.game-active):not(.lobby-active) .avatar-xl,
body:not(.game-active):not(.lobby-active) .avatar-chat{background:var(--filter-bg)}
body:not(.game-active):not(.lobby-active) .avatar-letter{background:linear-gradient(145deg,#554529,#302719);color:var(--text-main);border-color:var(--panel-border-strong);box-shadow:0 4px 14px rgba(0,0,0,.28)}
.avatar-mini{width:32px;height:32px}
.mobile-menu{background:var(--filter-bg);border:1px solid var(--panel-border);border-radius:9px;color:var(--text-main)}
.panel,.auth-card,.table-tile,.loading-card{
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.panel{padding:20px}
.panel>h2{margin-bottom:14px;color:var(--text-main)}
.page-head{margin-bottom:18px}
.page-head h1{margin-bottom:7px}
.loading-card{color:var(--text-muted)}
.input{
  background:#111713;
  border:1px solid var(--filter-border);
  border-radius:10px;
  color:var(--text-main);
}
.input::placeholder{color:var(--text-muted)}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(246,198,63,.16)}
.stack label,.form-grid label{color:var(--text-secondary)}
.btn{
  min-height:38px;
  padding:8px 13px;
  border-radius:9px;
  font-size:13px;
  font-weight:750;
  box-shadow:none;
  transition:.15s transform,.15s background,.15s box-shadow;
}
.btn.primary{border:1px solid rgba(255,230,130,.72);background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 55%,#e5ad2e 100%);color:#16120a;box-shadow:0 6px 18px rgba(185,127,15,.2)}
.btn.secondary{background:var(--filter-bg);border:1px solid var(--filter-border);color:var(--text-main)}
.btn.ghost{background:transparent;border:1px solid var(--panel-border);color:var(--text-secondary)}
.btn.danger-soft,.take-btn{background:#513a40;border:0;color:#efc7c9}
.pass-btn{background:#355442;border:0;color:#dcebe2}
@media(hover:hover) and (pointer:fine){
  .btn.primary:hover{background:linear-gradient(180deg,#ffe078 0%,var(--gold-light) 55%,var(--gold) 100%);box-shadow:0 8px 22px rgba(185,127,15,.27)}
  .btn.secondary:hover{background:var(--panel-bg-hover);border-color:var(--panel-border-strong)}
  .btn.ghost:hover{background:var(--filter-bg);color:var(--text-main)}
  .btn.danger-soft:hover,.take-btn:hover{background:#5c4148}
  .pass-btn:hover{background:#40644f}
}
.btn.small{min-height:34px;padding:7px 10px;font-size:12px}
.btn.tiny{min-height:29px;padding:5px 9px;font-size:11px}
.btn:focus-visible,.lang-select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.back-link,.auth-links button{color:var(--gold)}
.back-link{font-size:13px;font-weight:700}
.replay-btn{background:var(--filter-bg);color:var(--text-main);border-color:var(--panel-border)}
.replay-btn:hover{background:var(--panel-bg-hover)}
.replay-btn:disabled{background:var(--panel-bg);color:var(--text-muted);border-color:var(--filter-border)}
.notice{background:var(--filter-bg);color:var(--text-secondary)}
.notice.success{background:var(--green-soft);color:#e0e8d9}
.notice.error{background:var(--red-soft);color:#f0d7d3}
.toast{background:var(--panel-bg-hover);border-color:var(--panel-border);color:var(--text-main)}
.empty-state{color:var(--muted)}
.table-tile{padding:18px;gap:9px;background:var(--panel-bg);transition:.16s transform,.16s box-shadow,.16s background}
.table-tile:hover{transform:translateY(-2px);background:var(--panel-bg-hover);box-shadow:0 17px 34px rgba(0,0,0,.3)}
.table-tile:before{display:none}
.table-tile h3{font-size:18px;margin:1px 0}
.table-no{color:var(--gold);font-size:13px;font-weight:800}
.status{padding:4px 7px;border-radius:7px;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.status.waiting{background:#332e20;color:#d8bb75}
.status.playing{background:var(--playing-bg);color:var(--playing-text)}
.status.intermission,.status.round_finished{background:var(--stats-neutral-bg);color:var(--text-secondary)}
.status.closed{background:var(--filter-bg);color:var(--text-muted)}
.tile-meta{gap:5px}
.tile-meta span,.chips span,.seat-chip{padding:5px 8px;background:var(--filter-bg);border:0;border-radius:8px;color:var(--text-secondary);font-size:10px;font-weight:650}
.tile-mode{font-size:12px;color:var(--text-muted)}
.room-page{display:grid;gap:14px;min-width:0}
.room-head.panel{display:block;margin:0;padding:0 2px;background:transparent;border:none;border-radius:0;box-shadow:none}
.room-head.panel:before{display:none}
.room-head.panel{background-image:none}
.room-heading{min-width:0}
.room-heading-top{display:flex;align-items:center;gap:10px}
.room-heading-top .eyebrow{color:var(--gold)}
.room-head h1{margin:5px 0 9px;font-size:clamp(29px,3.2vw,42px)}
.room-meta-chips{gap:7px}
.room-meta-chips span{padding:6px 10px;background:rgba(12,38,31,.78);border:1px solid rgba(48,92,75,.18);color:#e0e9e4;font-size:11px}
.invite-code{margin:8px 0 0;color:var(--text-secondary);font-size:12px}
.invite-code b{color:var(--gold);letter-spacing:.08em}
.invite-link-row{display:flex;gap:6px;margin-top:6px;align-items:center}
.invite-link-row .input{flex:1;min-width:0;color:var(--text-secondary)}
.room-layout{display:grid;grid-template-columns:minmax(300px,.88fr) minmax(400px,1.45fr) minmax(270px,.9fr);grid-template-areas:"players chat controls" "rounds rounds rounds";align-items:stretch;gap:14px;min-width:0}
.room-layout.room-no-chat{grid-template-columns:minmax(360px,1fr) minmax(280px,.72fr);grid-template-areas:"players controls" "rounds rounds"}
.room-card{min-width:0;background:var(--panel-bg);border:1px solid rgba(180,144,62,.24);border-radius:14px;box-shadow:0 12px 28px rgba(0,0,0,.25)}
.room-card>h2,.room-chat-card .chat-panel-head h2{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:var(--text-main);font-size:18px}
.room-card>h2>span,.room-chat-card .chat-panel-head h2{color:#f4f7f5}
.room-players-title{justify-content:space-between}
.room-players-title>span:first-child{display:flex;align-items:center;gap:10px}
.room-seat-limit{display:grid;grid-template-columns:28px 24px 28px;align-items:center;gap:3px;margin-left:auto;padding:3px;border:1px solid rgba(110,132,121,.35);border-radius:9px;background:rgba(8,23,18,.5)}
.room-seat-limit button{width:28px;height:28px;padding:0;border:1px solid #64736b;border-radius:7px;background:rgba(30,48,40,.9);color:#f2f5f3;font-family:inherit;font-size:18px;font-weight:800;line-height:1;cursor:pointer}
.room-seat-limit button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.room-seat-limit button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.room-seat-limit button:disabled{opacity:.3;cursor:not-allowed}
.room-seat-limit b{font-size:12px;text-align:center}
.room-players-card{grid-area:players;min-height:500px}
.room-chat-card{grid-area:chat;height:auto;min-height:500px;contain:size;grid-template-rows:auto minmax(0,1fr) auto}
.room-controls-card{grid-area:controls;min-height:500px}
.room-controls-card:before{display:none}
.room-rounds-card{grid-area:rounds;min-height:220px}
.players-list{display:grid;align-content:start;gap:8px}
.player-row.room-player-slot{position:relative;display:grid;grid-template-columns:34px 46px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:62px;padding:8px 10px;background:rgba(8,23,18,.42);border:1px solid rgba(95,128,112,.24);border-radius:11px}
.player-row.room-player-slot.empty{grid-template-columns:34px 46px minmax(0,1fr);color:var(--text-secondary)}
.room-seat-number{width:34px;height:42px;display:grid;place-items:center;border-radius:8px;background:rgba(31,52,44,.72);color:#f0f3f1;font-size:14px;font-weight:800}
.room-player-slot .avatar{width:46px;height:46px;box-shadow:0 5px 14px rgba(4,9,7,.3)}
.room-empty-avatar{width:46px;height:46px;display:grid;place-items:center;border:1px dashed #82948c;border-radius:50%;color:#e6ece8;font-size:25px}
.room-player-identity{min-width:0}
.room-player-identity b{display:block;overflow:hidden;color:var(--text-main);font-size:13px;font-weight:750;white-space:nowrap;text-overflow:ellipsis}
.room-player-identity small{margin-top:2px;color:var(--text-secondary);font-size:10px}
.room-player-presence{color:#d6a66b!important}
.room-owner-crown{color:var(--gold);font-size:16px}
.room-player-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.room-player-slot .seat-chip{max-width:112px;padding:6px 9px;border-radius:8px;font-size:10px;line-height:1.15;text-align:center;white-space:normal}
.room-player-slot .seat-chip.ready{background:#075c3b;color:#73edb3;box-shadow:inset 0 0 0 1px rgba(31,173,111,.35)}
.room-player-slot .seat-chip.not-ready{background:#591c25;color:#ffb6bb;box-shadow:inset 0 0 0 1px rgba(220,57,76,.48)}
.room-kick-player{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;padding:0;border:1px solid #81475a;border-radius:8px;background:#5a2937;color:#ffdce3;font-family:inherit;font-size:18px;font-weight:800;line-height:1;cursor:pointer}
.room-kick-player:hover{border-color:#9b5368;background:#713343}
.room-kick-player:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.room-add-bots{width:100%;min-height:42px;margin-top:12px;border:1px solid #66756d;background:rgba(18,35,29,.72);color:#e4ebe7}
.room-add-bots:hover{border-color:#8c9c93;background:rgba(27,49,41,.9)}
.room-chat-card .chat-panel-head{min-height:28px}
.room-chat-card .chat-list{height:auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 3px 0 0;gap:0;scrollbar-width:thin;scrollbar-color:rgba(185,196,190,.5) transparent}
.room-chat-card .chat-list::-webkit-scrollbar{width:6px}
.room-chat-card .chat-list::-webkit-scrollbar-track{background:transparent}
.room-chat-card .chat-list::-webkit-scrollbar-thumb{border:1px solid transparent;border-radius:999px;background:rgba(185,196,190,.5);background-clip:padding-box}
.room-chat-card .chat-list::-webkit-scrollbar-thumb:hover{background:rgba(210,220,214,.68);background-clip:padding-box}
.room-chat-card .chat-msg{padding:11px 0;background:transparent;border-bottom:1px solid rgba(113,135,124,.22);border-radius:0}
.room-chat-card .chat-msg:last-child{border-bottom:0}
.room-chat-card .avatar-chat{width:38px;height:38px}
.room-chat-card .chat-msg b{font-size:12px}.room-chat-card .chat-msg>div span{font-size:13px}.room-chat-card .chat-msg small{font-size:9px}
.room-chat-card .chat-form{margin-top:12px}
.room-chat-card .chat-form .input,.room-chat-card .chat-form .btn{height:44px;min-height:44px}
.room-control-actions{display:grid;gap:10px}
.room-control-actions>.btn,.room-control-actions>.join-box,.room-control-actions .join-box>.btn{width:100%}
.room-control-actions .join-box{display:grid;width:100%}
.room-control-actions .join-box .input{width:100%}
.room-control-actions .btn{min-height:42px;padding:7px 11px;font-size:13px}
.room-control-actions .room-ready-action{border:1px solid #176b4d;background:linear-gradient(180deg,#0d5139,#0a3c2d);color:#e1f7ec}
.room-control-actions .room-ready-action.is-ready{background:linear-gradient(180deg,#08724a,#075838);color:#75f0b5;box-shadow:0 7px 18px rgba(5,81,52,.25)}
.room-control-actions .room-ready-action.is-unready{border-color:#8b4050;background:linear-gradient(180deg,#713343,#5b2937);color:#ffdce3;box-shadow:0 7px 18px rgba(91,24,40,.24)}
.room-control-actions .room-start-action{border-color:#ffe274;background:linear-gradient(180deg,#ffdf55,#ffc82f);color:#171309;box-shadow:0 8px 19px rgba(217,156,18,.24)}
.room-control-actions .room-leave-action{background:linear-gradient(180deg,#6b3848,#5a2d3b);border:1px solid #81475a;color:#f5dce4}
.room-control-actions .room-close-action{background:linear-gradient(180deg,#6b3848,#5a2d3b);border:1px solid #81475a;color:#f5dce4}
.room-action-icon{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.room-status-summary{margin-top:20px;padding-top:18px;border-top:1px solid rgba(126,143,134,.27)}
.room-status-summary h3{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:16px}
.room-status-summary h3 span{color:var(--gold);font-size:9px}
.room-status-summary>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 1px;border-bottom:1px solid rgba(113,135,124,.18);color:var(--text-secondary);font-size:12px}
.room-status-summary>div:last-child{border-bottom:0}.room-status-summary b{max-width:55%;color:var(--text-main);font-size:12px;text-align:right}
.round-list{display:grid;gap:0}
.round-list>div{display:grid;grid-template-columns:62px minmax(160px,.75fr) minmax(105px,.4fr) minmax(170px,1fr) auto;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid rgba(113,135,124,.2);font-size:12px}
.round-list>div:last-child{border-bottom:0}
.room-round-number{color:var(--gold);font-weight:800}
.room-round-date,.room-round-players{color:var(--text-secondary)}
.room-round-players,.room-round-result{display:flex;align-items:center;gap:5px;min-width:0}
.room-round-players b,.room-round-result b{color:var(--text-main)}
.room-round-result b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-round-result.is-draw{color:var(--text-secondary)}
.room-round-empty{min-height:150px;display:grid;place-items:center;align-content:center;gap:7px;text-align:center}
.room-round-empty>span{color:#aab9b1;font-size:50px;line-height:1}.room-round-empty b{font-size:20px}.room-round-empty small{color:var(--text-secondary);font-size:12px}
@media(max-width:1119px){
  .room-page{gap:12px}
  .room-layout,.room-layout.room-no-chat{grid-template-columns:minmax(0,1fr);grid-template-areas:"players" "chat" "rounds" "controls";gap:10px}
  .room-layout.room-no-chat{grid-template-areas:"players" "rounds" "controls"}
  .room-card{min-height:0}
  .room-players-card .players-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .player-row.room-player-slot,.player-row.room-player-slot.empty{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;gap:6px;min-height:150px;padding:10px 6px;text-align:center}
  .room-seat-number{position:absolute;left:7px;top:7px;width:30px;height:32px;font-size:13px}
  .room-player-slot .avatar,.room-empty-avatar{width:48px;height:48px;margin-top:1px}
  .room-player-identity{width:100%}
  .room-player-identity b{padding:0 3px;font-size:12px;text-align:center}
  .room-player-identity small{font-size:9px}
  .room-player-identity .bot-difficulty-badge{margin-inline:auto}
  .room-player-actions{width:100%;justify-content:center;gap:4px;margin-top:auto}
  .room-player-slot .seat-chip{max-width:100%;padding:5px 7px;font-size:9px}
  .room-kick-player{width:28px;height:28px}
  .room-chat-card{height:auto;min-height:300px;contain:none}
  .room-chat-card .chat-list{min-height:150px;max-height:280px}
  .room-page{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .room-page .room-controls-card{
    position:fixed;
    left:7px;
    right:7px;
    bottom:4px;
    z-index:390;
    width:auto;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom))!important;
    border:1px solid rgba(246,198,63,.22);
    border-radius:17px;
    background:rgba(20,22,18,.96);
    box-shadow:0 -5px 20px rgba(0,0,0,.32);
    backdrop-filter:blur(16px);
  }
  .room-controls-card>h2,.room-status-summary{display:none}
  .room-page .room-control-actions{display:flex;align-items:stretch;flex-wrap:nowrap;gap:5px;width:100%}
  .room-page .room-control-actions>.btn{
    flex:1 1 0;
    width:auto;
    min-width:0;
    min-height:44px;
    padding:6px 5px;
    overflow:hidden;
    font-size:clamp(9px,1.8vw,12px);
    line-height:1.1;
    letter-spacing:-.01em;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .room-page .room-control-actions>.join-box{display:flex;grid-column:auto;flex:1 1 0;gap:5px;min-width:0}
  .room-page .room-control-actions>.join-box .input{min-width:0;height:44px;padding:6px 8px;font-size:11px}
  .room-page .room-control-actions>.join-box .btn{flex:0 0 auto;min-height:44px;padding:6px 10px;font-size:11px;white-space:nowrap}
  .room-rounds-card{min-height:210px}
}
@media(max-width:560px){
  .room-head h1{margin:7px 0 10px;font-size:32px}
  .room-heading-top{gap:8px}.room-heading-top .back-link{font-size:12px}.room-heading-top .eyebrow{font-size:10px}
  .room-meta-chips{gap:5px}.room-meta-chips span{padding:6px 9px;font-size:10px}
  .room-meta-chips .room-entry-chip,.room-meta-chips span:last-child{display:none}
  .room-card{padding:12px!important;border-radius:12px}
  .room-card>h2,.room-chat-card .chat-panel-head h2{margin-bottom:11px;font-size:16px}
  .room-players-title>span:first-child{gap:7px}
  .room-seat-limit{grid-template-columns:25px 20px 25px;gap:2px;padding:2px}
  .room-seat-limit button{width:25px;height:25px;font-size:16px}
  .room-players-card .players-list{gap:5px}
  .room-layout.room-slots-2 .room-players-card .players-list,
  .room-layout.room-slots-4 .room-players-card .players-list,
  .room-layout.room-slots-5 .room-players-card .players-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .room-layout.room-slots-3 .room-players-card .players-list,
  .room-layout.room-slots-6 .room-players-card .players-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .room-layout.room-slots-5 .room-player-slot:nth-child(5){grid-column:1/-1;width:calc((100% - 5px)/2);justify-self:center}
  .player-row.room-player-slot,.player-row.room-player-slot.empty{min-height:137px;padding:9px 4px 7px}
  .room-layout.room-slots-2 .room-player-slot{min-height:225px;padding:18px 8px 12px}
  .room-layout.room-slots-4 .room-player-slot{min-height:154px;padding:12px 6px 8px}
  .room-layout.room-slots-5 .room-player-slot{min-height:112px;padding:8px 5px 6px}
  .room-seat-number{left:6px;top:6px;width:28px;height:30px;font-size:12px}
  .room-player-slot .avatar,.room-empty-avatar{width:45px;height:45px}
  .room-layout.room-slots-2 .room-player-slot .avatar,
  .room-layout.room-slots-2 .room-empty-avatar{width:68px;height:68px;margin-top:9px}
  .room-layout.room-slots-4 .room-player-slot .avatar,
  .room-layout.room-slots-4 .room-empty-avatar{width:52px;height:52px}
  .room-layout.room-slots-5 .room-player-slot .avatar,
  .room-layout.room-slots-5 .room-empty-avatar{width:40px;height:40px}
  .room-player-identity b{font-size:11px}.room-player-identity small{font-size:8px}
  .room-layout.room-slots-2 .room-player-identity b{font-size:16px}
  .room-layout.room-slots-2 .room-player-identity small{font-size:11px}
  .room-layout.room-slots-4 .room-player-identity b{font-size:12px}
  .room-layout.room-slots-5 .room-player-identity b{font-size:10px}
  .room-player-slot .seat-chip{padding:5px 4px;font-size:8px}
  .room-layout.room-slots-2 .room-player-slot .seat-chip{padding:7px 9px;font-size:11px}
  .room-layout.room-slots-4 .room-player-slot .seat-chip{padding:6px 7px;font-size:9px}
  .room-layout.room-slots-5 .room-player-slot .seat-chip{padding:4px 6px;font-size:8px}
  .room-kick-player{width:24px;height:26px;font-size:16px}
  .room-owner-crown{font-size:13px}
  .room-chat-card{min-height:260px}
  .room-chat-card .chat-list{min-height:110px;max-height:220px}
  .room-chat-card .avatar-chat{width:34px;height:34px}
  .room-chat-card .chat-msg{padding:9px 0}.room-chat-card .chat-msg>div span{font-size:12px}
  .room-chat-card .chat-form .input,.room-chat-card .chat-form .btn{height:42px;min-height:42px}
  .room-chat-card .chat-form .btn{padding-inline:13px}
  .room-controls-card{padding:0!important}
  .room-control-actions{gap:7px}
  .room-control-actions .btn{min-height:42px;padding:7px 6px;font-size:11px}
  .round-list>div{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"number . replay" "date date date" "players result result";gap:6px 9px;padding:10px 1px;font-size:10px}
  .room-round-number{grid-area:number}
  .room-round-date{grid-area:date}
  .room-round-players{grid-area:players}
  .room-round-result{grid-area:result;justify-self:end;max-width:100%}
  .round-list .replay-btn{grid-area:replay}
  .room-round-empty{min-height:130px}.room-round-empty>span{font-size:42px}.room-round-empty b{font-size:17px}.room-round-empty small{font-size:10px}
}
@media(max-width:720px){
  .chat-send-label{display:none}
  .chat-form .chat-send-icon{display:block}
  .chat-form .chat-send-button,
  .room-chat-card .chat-form .chat-send-button{display:grid;place-items:center;width:44px;min-width:44px;padding:0}
  .room-page{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .room-page .room-controls-card{
    position:fixed;
    left:7px;
    right:7px;
    bottom:4px;
    z-index:390;
    width:auto;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom))!important;
    border:1px solid rgba(246,198,63,.22);
    border-radius:17px;
    background:rgba(20,22,18,.96);
    box-shadow:0 -5px 20px rgba(0,0,0,.32);
    backdrop-filter:blur(16px);
  }
  .room-page .room-control-actions{display:flex;align-items:stretch;gap:5px;width:100%}
  .room-page .room-control-actions>.btn{
    flex:1 1 0;
    width:auto;
    min-width:0;
    min-height:44px;
    padding:6px 3px;
    overflow:hidden;
    font-size:clamp(8px,2.75vw,11px);
    line-height:1.05;
    letter-spacing:-.02em;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .room-page .room-control-actions>.join-box{display:flex;grid-column:auto;flex:1 1 0;gap:5px;min-width:0}
  .room-page .room-control-actions>.join-box .input{min-width:0;height:44px;padding:6px 8px;font-size:10px}
  .room-page .room-control-actions>.join-box .btn{flex:0 0 auto;min-height:44px;padding:6px 9px;font-size:10px;white-space:nowrap}
}
.game-page{gap:8px}
.game-top{
  padding:8px 10px;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:12px;
  box-shadow:0 7px 20px rgba(4,9,7,.22);
}
.game-top>div:nth-child(2)>b{font-size:14px;font-weight:750}
.game-top span{font-size:10px;color:var(--text-muted)}
.game-top .back-link{width:30px;height:30px;border-radius:8px;background:var(--filter-bg);color:var(--gold)}
.game-credit{color:var(--gold)}
.game-player{
  padding:5px 8px;
  background:rgba(22,32,27,.94);
  border:1px solid rgba(155,178,165,.16);
  border-radius:12px;
  box-shadow:0 7px 16px rgba(5,10,15,.18);
  backdrop-filter:blur(5px);
}
.game-player.attacker{outline:0;border-color:rgba(216,181,119,.7);box-shadow:0 0 0 1px rgba(216,181,119,.13),0 7px 16px rgba(5,10,15,.18)}
.game-player.defender{outline:0;border-color:rgba(126,171,221,.75);box-shadow:0 0 0 1px rgba(126,171,221,.13),0 7px 16px rgba(5,10,15,.18)}
.game-player b{font-weight:700}
.player-role-status{font-size:12px;font-weight:700;color:#e3e9e5}
.player-decision-badge{display:inline-flex;align-items:center;justify-content:center;min-width:70px;min-height:32px;padding:6px 14px;border:1px solid transparent;border-radius:10px;font-size:13px;font-weight:850;line-height:1;text-align:center;letter-spacing:0;box-shadow:0 7px 16px rgba(4,9,7,.32)}
.piles{gap:8px}
.pile{padding:8px 4px 7px;background:rgba(15,35,25,.4);border:1px solid rgba(171,198,181,.1);border-radius:14px;gap:5px}
.pile>span{color:#afbeb6;font-size:9px;font-weight:750;letter-spacing:.1em}
.pile>b{color:#dce5e0;font-size:11px}
.playing-card{filter:drop-shadow(0 7px 8px rgba(4,8,12,.28))}
.pile .deck-card,.pile .discard-card{box-shadow:4px 4px 0 #4b6277,7px 7px 0 #263746}
.deck-empty{border:1px dashed rgba(166,195,177,.32);color:#a7b5ad}
.battlefield{position:relative}
.battle-pair.target{background:rgba(194,157,96,.13);outline:2px solid rgba(214,174,108,.58)}
.table-empty{padding:9px 13px;background:rgba(26,48,37,.5);border:0;border-radius:9px;color:#bfccc5;font-size:12px}
.hand-hint,.spectator-banner{background:rgba(27,44,36,.94);border:0;color:#d5dfda;box-shadow:0 5px 14px rgba(4,9,7,.22)}
.hand-finish-message{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 14px;border:1px solid #4f7864;border-radius:10px;background:#263a31;color:#e8f1ec;font-size:13px;font-weight:850;line-height:1.25;box-shadow:0 5px 14px rgba(4,9,7,.24)}
.hand-finish-message.first{border-color:#806f46;background:#3c3b2e;color:#f2d89f}
.turn-timer{min-width:52px;padding:5px 8px;background:#2c3028;border:0;border-radius:8px;color:#c39a55;font-size:11px}
.game-controls{min-height:44px;gap:6px}
.game-controls .btn{min-width:104px;min-height:40px;border-radius:9px;font-size:13px}
.game-controls .take-btn,
.player-decision-badge.decision-take{
  background:#7e2d36;
  border:1px solid #983743;
  border-radius:12px;
  color:#fff;
  font-weight:850;
  box-shadow:none;
}
.game-controls .take-btn:hover,
.game-controls .take-btn:focus,
.game-controls .take-btn:active{
  background:#722930;
  border-color:#8b323c;
  color:#fff;
  box-shadow:none;
}
.game-controls .pass-btn,
.player-decision-badge.decision-pass{
  background:#8a5a24;
  border:1px solid #b57a32;
  border-radius:12px;
  color:#fff;
  font-weight:850;
  box-shadow:none;
}
.game-controls .pass-btn:hover,
.game-controls .pass-btn:focus,
.game-controls .pass-btn:active{
  background:#754b1e;
  border-color:#a56d2c;
  color:#fff;
  box-shadow:none;
}
.hand-hint.attack-hint{
  background:#214f3b;
  border:1px solid #376b54;
  box-shadow:0 4px 11px rgba(4,20,13,.165);
}
.game-controls .take-btn:disabled,.game-controls .pass-btn:disabled{
  background:#26332c;
  border-color:rgba(155,178,165,.16);
  color:#77847d;
  box-shadow:none;
  opacity:.7;
  cursor:not-allowed;
  transform:none;
}
.game-chat-toggle,.game-sound-toggle,.game-top-actions .self-seat-control{background:var(--filter-bg);border:1px solid var(--panel-border);border-radius:9px;color:var(--text-main)}
.game-top-actions .reclaim-seat-control{border-color:rgba(224,177,61,.55);background:rgba(75,60,22,.56);color:#f0c65c}
.game-chat-toggle:focus-visible,.game-sound-toggle:focus-visible,.game-top-actions .self-seat-control:focus-visible{outline:3px solid #92b3a3;outline-offset:2px}
.self-seat-control:disabled{opacity:.68;cursor:wait;transform:none}
.chat-unread{border-color:#1b2621}
.game-chat-close{background:#26332c;border-color:var(--line);color:#f2f5f2}
.player-chat-bubble{background:#f2f5f2;color:#1c2923;box-shadow:0 7px 18px rgba(4,9,7,.26)}
.self-seat-control{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(hover:none),(pointer:coarse){
  .game-top-actions .self-seat-control:hover{transform:none}
  .game-top-actions .enable-bot-control:hover{background:var(--filter-bg);color:var(--text-main)}
  .game-top-actions .reclaim-seat-control:hover{border-color:rgba(224,177,61,.55);background:rgba(75,60,22,.56);color:#f0c65c}
}
.game-over{background:rgba(13,20,17,.84)}
.game-over-card{background:#1b2621;border:0;border-radius:18px;box-shadow:0 22px 55px rgba(3,8,6,.42)}
.result-row{background:#26332c;border:0}
.stat-grid>div{background:var(--filter-bg);border:1px solid var(--filter-border)}
.result-row b{color:var(--gold)}
.chat-msg{background:transparent;border-radius:0;border-bottom:1px solid var(--filter-border)}
.chat-msg b{color:#f2f5f2}.chat-msg>div span{color:#dce4df}.chat-msg small{color:#929f98}
.chat-form{align-items:stretch}
.chat-form .input,.chat-form .btn{height:38px;min-height:38px}
.chat-form .btn{border:1px solid rgba(255,230,130,.72);background:linear-gradient(180deg,var(--gold-light),var(--gold) 58%,#e5ad2e);color:#16120a;box-shadow:0 6px 15px rgba(185,127,15,.2)}
.chat-form .btn:hover{background:linear-gradient(180deg,#ffe078,var(--gold-light) 58%,var(--gold))}
.chat-send-icon{display:none;width:21px;height:21px;fill:currentColor}
.chat-compose{position:relative;min-width:0}
.chat-compose .input{padding-right:43px}
.chat-form .chat-emoji-toggle{
  position:absolute;
  top:50%;
  right:5px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0;
  transform:translateY(-50%);
  border:0;
  border-radius:8px;
  background:transparent;
  color:#d6dfd9;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.chat-emoji-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-emoji-toggle .chat-emoji-eye{fill:currentColor;stroke:none}
.chat-form .chat-emoji-toggle:hover,
.chat-form .chat-emoji-toggle[aria-expanded="true"]{background:rgba(180,202,188,.12);color:#fff}
.chat-form .chat-emoji-toggle:focus-visible,
.chat-emoji-option:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.chat-emoji-picker{
  position:absolute;
  left:0;
  bottom:calc(100% + 8px);
  z-index:50;
  width:min(258px,calc(100vw - 48px));
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:3px;
  padding:8px;
  border:1px solid #61796b;
  border-radius:12px;
  background:#172720;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.chat-emoji-picker[hidden]{display:none}
@media(min-width:721px) and (max-width:1100px){
  .chat-emoji-picker{left:auto;right:0}
}
@media(min-width:1101px){
  .chat-emoji-picker{left:auto;right:0}
  .game-chat-shell .chat-emoji-picker{
    width:min(174px,100%);
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
.chat-emoji-option{
  min-width:0;
  height:36px;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.chat-emoji-option:hover{background:#2c4638}
.replay-board{background:radial-gradient(ellipse at center,#304b3c,#21352b);border:1px solid #506a5b;box-shadow:var(--shadow)}
.replay-player{background:rgba(25,36,31,.94);border-color:rgba(155,178,165,.16)}
.footer{color:var(--text-muted)}
hr{border-top-color:var(--line)}
@media(max-width:1100px){
  .game-chat-shell{background:rgba(7,13,10,.8)}
  .game-top-actions .self-seat-control,.game-top-actions .game-chat-toggle,.game-top-actions .game-sound-toggle{height:38px;min-height:38px}
}
@media(max-width:720px){
  .app-shell{margin:12px auto 40px}
  .topbar{padding:6px 8px}
  .room-head.panel{padding:2px 2px 13px}
  .room-actions{justify-content:flex-start;flex-wrap:nowrap;gap:4px}
  .room-actions #startBtn,.room-actions #readyBtn,.room-actions #leaveBtn,.room-actions #closeBtn{width:auto;min-width:0;flex:0 1 auto;padding-inline:7px;font-size:11px;white-space:nowrap}
  .room-actions .join-box{flex:1 1 100%}
  .room-grid>.panel{padding:15px}
  .game-top{padding:5px 7px;border-radius:11px}
  .pile{padding:4px 2px;border-radius:10px}
  .nav-links{
    overflow:hidden;
    background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 46%),var(--panel-bg-hover);
    border-color:var(--panel-border-strong);
    box-shadow:0 18px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
  }
  .nav-links:before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:3px;
    background:linear-gradient(90deg,var(--gold-dark),var(--gold-light) 50%,var(--gold-dark));
    opacity:.8;
  }
  body.game-active .player-decision-badge{min-width:60px;min-height:30px;padding:5px 11px;font-size:13px}
}
@media(min-width:721px){
  .game-page .play-center{grid-template-columns:minmax(160px,220px) minmax(280px,1fr) minmax(160px,220px);grid-template-areas:"deck battlefield discard";gap:16px}
  .game-page .play-center>.piles{display:contents}
  .game-page .draw-pile{grid-area:deck;justify-self:center}
  .game-page .play-center>.battlefield{grid-area:battlefield}
  .game-page .discard-pile{grid-area:discard;justify-self:center}
}
.game-page .game-board{
  --table-rim:7px;
  border:var(--table-rim) solid transparent;
  border-radius:32px;
  background-image:
    radial-gradient(ellipse at 50% 42%,#2a8b5d 0%,#1d7a4e 58%,#0b3a28 100%),
    repeating-linear-gradient(2deg,rgba(244,211,164,.08) 0 1px,transparent 1px 4px,rgba(37,17,8,.15) 5px 6px,transparent 7px 11px),
    repeating-linear-gradient(178deg,rgba(234,195,143,.06) 0 1px,transparent 1px 5px,rgba(31,14,7,.17) 6px 7px,transparent 8px 13px),
    repeating-linear-gradient(88deg,rgba(244,211,164,.07) 0 1px,transparent 1px 4px,rgba(37,17,8,.14) 5px 6px,transparent 7px 12px),
    repeating-linear-gradient(92deg,rgba(234,195,143,.06) 0 1px,transparent 1px 5px,rgba(31,14,7,.16) 6px 7px,transparent 8px 13px),
    linear-gradient(180deg,rgba(255,225,181,.14) 0%,rgba(255,225,181,.035) 24%,transparent 48%,rgba(30,13,6,.28) 100%),
    linear-gradient(145deg,#85542d 0%,#64391f 22%,#7a4927 46%,#5a321c 70%,#704323 100%);
  background-size:auto,100% var(--table-rim),100% var(--table-rim),var(--table-rim) 100%,var(--table-rim) 100%,auto,auto;
  background-position:0 0,top left,bottom left,top left,top right,0 0,0 0;
  background-repeat:no-repeat;
  background-origin:padding-box,border-box,border-box,border-box,border-box,border-box,border-box;
  background-clip:padding-box,border-box,border-box,border-box,border-box,border-box,border-box;
  box-shadow:inset 0 0 0 1px rgba(225,243,231,.14),inset 0 15px 26px rgba(255,255,255,.035),inset 0 -42px 78px rgba(3,20,12,.2),0 25px 52px rgba(3,8,12,.4),0 0 0 1px #432614;
}
.game-page .game-board:after{inset:3px;border:0;border-radius:16px;box-shadow:inset 0 0 26px rgba(3,19,11,.15)}
body.game-active .game-page .game-board{
  --player-safe-x:14px;
  --player-safe-top:12px;
}
body.game-active .game-board:not(.seated-table) .players-ring{
  left:var(--player-safe-x);
  right:var(--player-safe-x);
  top:var(--player-safe-top);
}
@media(max-width:720px){
  .game-page .game-board{--table-rim:5px;border-radius:22px}
  .game-page .game-board:after{inset:2px;border-radius:12px}
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .hand-finish-message{transform:translateY(4px)}
  body.game-active .seated-table.six-player-table .hand-finish-message{transform:translateY(7px)}
  body.game-active .seated-table.six-player-table .players-side .game-player-wrap{--player-status-slot-height:22px}
  body.game-active .seated-table.six-player-table .players-side .player-role-status{padding:1px 4px;white-space:normal;text-overflow:clip;overflow-wrap:anywhere;font-size:8.5px;line-height:10px;text-align:center}
}
body.game-active .game-player-wrap{
  --player-status-slot-height:16px;
  --player-decision-slot-height:32px;
  grid-template-rows:auto var(--player-status-slot-height) var(--player-decision-slot-height);
  position:relative;
  min-width:0;
  gap:4px;
}
body.game-active .game-board:not(.seated-table) .players-ring>.game-player-wrap{flex:1 1 0;max-width:180px}
body.game-active .game-board:not(.seated-table) .players-ring>.game-player-wrap>.game-player{width:100%;min-width:0}
.player-role-status{width:100%;height:var(--player-status-slot-height);display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.player-decision-slot{width:100%;height:var(--player-decision-slot-height);display:grid;place-items:start center;min-width:0}
.player-decision-slot .player-decision-badge{height:100%}
body.game-active .seated-table .game-player-wrap{min-width:0;max-width:180px;gap:4px}
body.game-active .seated-table .game-player{display:grid;grid-template-columns:auto minmax(0,1fr);width:100%;gap:4px 7px;padding:6px 8px}
body.game-active .seated-table .game-player .avatar-game{width:30px;height:30px}
.player-identity{min-width:0}
body.game-active .seated-table .game-player .player-username{display:block;max-width:112px;font-size:12px;line-height:1.25}
.player-card-meta{display:flex;align-items:center;gap:7px;white-space:nowrap}
body.game-active .seated-table .game-player .player-card-count{font-size:11px;line-height:1.3}
body.game-active .seated-table .game-player-wrap>.player-role-status{font-size:11px;line-height:1.25}
body.game-active .seated-table .player-decision-badge{width:min(92px,100%);min-width:0}
body.game-active .seated-table .game-player-wrap .player-chat-bubble{max-width:100%;font-size:11px}
@media(max-width:1100px) and (orientation:landscape){
  html.game-active,body.game-active{height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden;overscroll-behavior:none}
  body.game-active .topbar{position:relative;height:48px;min-height:48px;padding:4px 7px}
  body.game-active .brand-card{width:28px;height:36px;font-size:17px}
  body.game-active .brand small{display:none}
  body.game-active .nav{position:relative;justify-content:flex-end}
  body.game-active .mobile-menu{display:grid;place-items:center;min-width:38px;min-height:38px}
  body.game-active .nav-links{display:none;position:absolute;right:0;top:44px;width:min(280px,calc(100vw - 20px));padding:10px;flex-direction:column;align-items:stretch;background:#1b2621;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
  body.game-active .nav.open .nav-links{display:flex}
  body.game-active .nav-links .nav-item,
  body.game-active .nav-links .btn,
  body.game-active .nav-links .lang-select{display:block;width:100%;text-align:left}
  body.game-active .nav-links .avatar-mini{display:none}
  body.game-active .nav-links .credit-pill{display:block;text-align:center}
  body.game-active .app-shell{width:100%;height:calc(100dvh - 48px);min-height:0;max-height:calc(100dvh - 48px);margin:0;overflow:hidden}
  body.game-active .footer{display:none}
  body.game-active .game-page{width:100%;height:100%;margin:0;padding:4px;grid-template-rows:auto minmax(0,1fr);gap:4px}
  body.game-active .game-layout,
  body.game-active .game-board{height:100%;min-height:0}
  body.game-active .game-page .play-center{top:clamp(90px,20%,130px);bottom:265px;transform:none;align-items:center}
  body.game-active .game-page .play-center>.battlefield{min-height:0}
  body.game-active .game-page .game-board.seated-table{gap:6px;padding:8px;overflow:hidden}
  body.game-active .seated-table .hand-status-row{min-height:24px}
  body.game-active .seated-table .hand{min-height:calc(var(--hand-h) + 14px);padding:8px 10px 5px}
  body.game-active .seated-table .game-controls{min-height:40px;margin-top:2px}
  body.game-active .seated-table .game-controls .btn{min-height:40px}
}
@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
  body.game-active .game-player-wrap{--player-status-slot-height:12px;--player-decision-slot-height:34px}
  body.game-active .topbar{height:40px;min-height:40px;padding:3px 6px}
  body.game-active .app-shell{height:calc(100dvh - 40px);max-height:calc(100dvh - 40px)}
  body.game-active .brand-card{width:24px;height:30px;font-size:15px}
  body.game-active .brand strong{font-size:13px}
  body.game-active .mobile-menu{min-width:32px;min-height:32px}
  body.game-active .nav-links{top:36px}
  body.game-active .game-page{--card-w:42px;--card-h:59px;--hand-w:43px;--hand-h:60px;padding:3px;gap:3px}
  body.game-active .game-top{min-height:36px;padding:2px 5px;gap:5px}
  body.game-active .game-top>div:nth-child(2)>b{font-size:11px}
  body.game-active .game-top>div:nth-child(2)>span{font-size:8px}
  body.game-active .game-top-actions{gap:3px}
  body.game-active .game-top-actions .game-chat-toggle,
  body.game-active .game-top-actions .game-sound-toggle,
  body.game-active .game-top-actions .self-seat-control{height:32px;min-height:32px}
  body.game-active .game-chat-toggle,body.game-active .game-sound-toggle,body.game-active .game-top-actions .self-seat-control{width:32px;min-width:32px;font-size:16px}
  body.game-active .game-top-actions .self-seat-control svg{width:18px;height:18px}
  body.game-active .game-page .game-board{--table-rim:3px;border-radius:16px}
  body.game-active .game-page .game-board:after{inset:1.5px;border-radius:9px}
  body.game-active .players-ring{left:1%;right:1%;top:3px;gap:3px;padding:0 4px;overflow:visible;flex-wrap:nowrap;justify-content:space-evenly}
  body.game-active .game-player-wrap{gap:2px;min-width:0}
  body.game-active .game-player{gap:3px;padding:2px 4px}
  body.game-active .game-player .avatar-game{width:22px;height:22px}
  body.game-active .game-player b{max-width:64px;font-size:8px}
  body.game-active .game-player small{font-size:7px}
  body.game-active .player-role-status{font-size:8px;line-height:1.1}
  body.game-active .player-decision-badge{min-width:60px;min-height:28px;padding:4px 8px;font-size:11px}
  body.game-active .player-chat-bubble{max-width:72px;padding:3px 5px;font-size:8px}
  body.game-active .game-page .play-center{left:1%;right:1%;top:34px;bottom:126px;transform:none;grid-template-columns:78px minmax(0,1fr) 68px;grid-template-areas:"deck battlefield discard";gap:4px;align-items:center}
  body.game-active .game-page .play-center>.piles{display:contents}
  body.game-active .draw-pile{grid-area:deck;justify-self:center}
  body.game-active .discard-pile{grid-area:discard;justify-self:center}
  body.game-active .game-page .play-center>.battlefield{grid-area:battlefield;min-height:0;gap:4px;padding:3px}
  body.game-active .pile{padding:3px 1px;gap:2px;font-size:7px}
  body.game-active .pile>span{font-size:7px}
  body.game-active .pile>b{font-size:8px}
  body.game-active .pile .draw-stack{width:calc(var(--card-w) + 20px)}
  body.game-active .pile .draw-stack .draw-trump-card{left:20px}
  body.game-active .battle-pair{width:calc(var(--card-w) + 10px);height:calc(var(--card-h) + 11px)}
  body.game-active .battle-pair .defense-card{left:9px;top:9px}
  body.game-active .hand-zone{left:3px;right:3px;bottom:2px}
  body.game-active .hand-status-row{min-height:17px;margin-bottom:1px;gap:4px}
  body.game-active .hand-hint,
  body.game-active .turn-timer{padding:2px 5px;font-size:8px}
  body.game-active .hand{min-height:calc(var(--hand-h) + 7px);padding:4px 5px 3px}
  body.game-active .game-controls{min-height:34px;margin-top:1px;gap:5px}
  body.game-active .game-controls .btn{min-width:82px;min-height:34px;padding:5px 9px;font-size:11px}
  body.game-active .game-page .game-board.seated-table{--side-seat-width:70px;grid-template-columns:calc(var(--side-seat-width) + var(--player-safe-x)) 52px minmax(0,1fr) 52px calc(var(--side-seat-width) + var(--player-safe-x));grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top top top top top" "left deck battlefield discard right" "hand hand hand hand hand";gap:3px;padding:3px;overflow:hidden}
  body.game-active .seated-table .players-top,
  body.game-active .seated-table .players-side{gap:3px}
  body.game-active .seated-table .game-player-wrap{max-width:100%}
  body.game-active .seated-table .players-side .game-player-wrap{--player-status-slot-height:18px}
  body.game-active .seated-table .players-side .player-role-status{white-space:normal;text-overflow:clip;overflow-wrap:anywhere}
  body.game-active .seated-table.crowded-table .players-side{gap:2px}
  body.game-active .seated-table.crowded-table .players-side .game-player-wrap{--player-decision-slot-height:28px}
  body.game-active .seated-table .game-player{gap:2px 3px;padding:2px 3px}
  body.game-active .seated-table .game-player .avatar-game{width:20px;height:20px}
  body.game-active .seated-table .game-player .player-username{max-width:58px;font-size:8px}
  body.game-active .seated-table .game-player .player-card-count{font-size:7px}
  body.game-active .seated-table .game-player-wrap>.player-role-status{font-size:8px;line-height:1.05;padding:1px 2px}
  body.game-active .seated-table .player-decision-badge{min-height:28px;padding:4px 7px;font-size:11px}
  body.game-active .seated-table.crowded-table .players-side .player-decision-badge{min-height:24px;padding:3px 5px;font-size:11px}
  body.game-active .seated-table .pile{--card-w:38px;--card-h:53px;width:50px;padding:2px 1px}
  body.game-active .seated-table .draw-stack{width:calc(var(--card-w) + 14px)}
  body.game-active .seated-table .draw-stack.has-hidden-deck .draw-trump-card{left:14px}
  body.game-active .seated-table .battlefield{padding:2px;gap:4px}
  body.game-active .seated-table .hand-zone{min-width:0}
}
@media(max-width:390px) and (max-height:700px) and (orientation:portrait){
  body.game-active .game-page .game-board{
    --player-safe-x:10px;
    --player-safe-top:8px;
  }
  html.game-active,body.game-active{height:100svh;min-height:100svh;max-height:100svh}
  body.game-active .topbar{height:42px;min-height:42px}
  body.game-active .app-shell{height:calc(100svh - 42px);max-height:calc(100svh - 42px);padding-bottom:env(safe-area-inset-bottom,0px)}
  body.game-active #app{height:100%;min-height:0}
  body.game-active .game-top{min-height:38px}
  body.game-active .game-player-wrap{--player-status-slot-height:12px;--player-decision-slot-height:22px;gap:2px}
  body.game-active .player-decision-badge{min-width:0;min-height:22px;padding:2px 5px;font-size:10px}
  body.game-active .seated-table .players-top,
  body.game-active .seated-table .players-side{gap:2px}
  body.game-active .seated-table .game-player-wrap,
  body.game-active .seated-table .players-side .game-player-wrap{--player-status-slot-height:12px;--player-decision-slot-height:22px;gap:1px}
  body.game-active .seated-table.six-player-table .players-side .game-player-wrap,
  body.game-active .seated-table.crowded-table .players-side .game-player-wrap{--player-status-slot-height:12px;--player-decision-slot-height:22px;gap:1px}
  body.game-active .seated-table .game-player,
  body.game-active .seated-table .players-side .game-player{gap:2px;padding:2px 3px}
  body.game-active .seated-table.crowded-table .players-side .game-player{gap:2px;padding:2px 3px}
  body.game-active .seated-table .game-player .avatar-game,
  body.game-active .seated-table .players-side .avatar-game{width:18px;height:18px}
  body.game-active .seated-table.crowded-table .players-side .avatar-game{width:18px;height:18px}
  body.game-active .seated-table .game-player .player-username,
  body.game-active .seated-table .players-side .player-username{max-width:100%;font-size:8px}
  body.game-active .seated-table.crowded-table .players-side .player-username{max-width:100%;font-size:8px}
  body.game-active .seated-table .game-player .player-card-count{font-size:7px}
  body.game-active .seated-table .game-player-wrap>.player-role-status,
  body.game-active .seated-table .players-side .player-role-status{font-size:8px;line-height:1.05}
  body.game-active .seated-table .player-decision-badge,
  body.game-active .seated-table.crowded-table .players-side .player-decision-badge{min-height:22px;padding:2px 4px;font-size:10px}
  body.game-active .game-page .pile{--card-w:36px;--card-h:50px;padding:3px 1px;gap:2px}
  body.game-active .game-page .draw-stack{width:calc(var(--card-w) + 18px)}
  body.game-active .game-page .draw-stack.has-hidden-deck .draw-trump-card{left:18px}
  body.game-active .seated-table .battlefield{padding:2px 0;gap:4px}
  body.game-active .toast{top:48px;width:max-content;max-width:calc(100vw - 16px);padding:7px 10px;border-radius:9px;font-size:11px;line-height:1.25;text-align:center}
}
.phone-rotate-overlay{display:none}
.phone-rotate-card{width:min(360px,calc(100% - 32px));padding:28px 22px;border:1px solid var(--line);border-radius:18px;background:#1b2621;color:#f2f5f2;text-align:center;box-shadow:0 22px 55px rgba(3,8,6,.5)}
.phone-rotate-icon{margin-bottom:12px;font-size:42px;line-height:1}
.phone-rotate-card h2{margin-bottom:7px;font-size:22px}
.phone-rotate-card p{margin:0;color:#bdc7c1;line-height:1.5}
@media(hover:none) and (pointer:coarse) and (orientation:landscape) and (max-width:950px) and (max-height:500px){
  body.game-active .phone-rotate-overlay{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:24px;background:rgba(7,13,10,.94)}
}
.rules-page{width:min(1040px,100%);margin:0 auto;display:grid;gap:16px}
.rules-head{margin-bottom:0}
.rules-overview{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);align-items:center;gap:24px}
.rules-overview h2,.rules-guide h2,.rules-examples-panel h2{margin-bottom:8px}
.rules-overview p,.rules-examples-head p,.rules-example p{margin:0;color:var(--muted);line-height:1.6}
.rules-facts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.rules-facts span{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--text-secondary);font-size:11px;font-weight:750}
.rules-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;overflow:hidden}
.rules-guide>section{padding:20px;border-bottom:1px solid var(--line)}
.rules-guide>section:nth-child(odd){border-right:1px solid var(--line)}
.rules-guide>section:nth-last-child(-n+2){border-bottom:0}
.rules-guide ul{margin:0;padding-left:20px;color:var(--text-secondary);line-height:1.6}
.rules-guide li+li{margin-top:8px}
.rules-guide li::marker{color:#6f9b84}
.rules-examples-head{margin-bottom:15px}
.rules-example-group{display:grid;gap:10px}
.rules-example-group+.rules-example-group{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.rules-example-group-title{margin:0;color:var(--text-main);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.rules-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rules-example{display:grid;grid-template-columns:minmax(174px,.8fr) minmax(0,1fr);align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--panel-bg)}
.rules-example h3{margin:0 0 5px;font-size:14px}
.rules-example p{font-size:12px}
.rules-card-play{position:relative;min-height:104px;padding:9px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;background:radial-gradient(circle at center,#234b37,#182f25)}
.rules-card-play .rules-example-card{width:54px;height:76px;filter:drop-shadow(0 5px 6px rgba(2,7,4,.3))}
.rules-card-play.rules-cards-three{gap:4px}
.rules-card-play.rules-cards-three .rules-example-card{width:42px;height:59px}
.rules-card-play.rules-cards-three .rules-card-marker{width:20px;height:20px;font-size:13px}
.rules-rank-options{display:grid;gap:4px}
.rules-rank-row{display:flex;align-items:center;justify-content:center;gap:4px}
.rules-card-play.rules-ranks-four .rules-example-card{width:35px;height:49px}
.rules-card-play.rules-ranks-four .rules-card-marker{width:18px;height:18px;font-size:11px}
.rules-card-marker{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:#30473b;color:#b9dec9;font-size:16px;font-weight:900}
.rules-example.invalid .rules-card-marker{background:#513a40;color:#efc7c9}
.rules-example.invalid .rules-cards-three .rules-card-marker:first-of-type{background:#30473b;color:#b9dec9}
.rules-example.match .rules-card-marker{background:#303e37;color:#cbd7d0}
.rules-example.limit .rules-card-marker{background:#3c3b2e;color:#dbc38d}
.rules-scene-limit{position:absolute;right:7px;top:7px;padding:3px 6px;border-radius:999px;background:#513a40;color:#efc7c9;font-size:10px;font-weight:900}
.rules-mini-hand{display:flex;align-items:center;padding-left:18px}
.rules-mini-hand .rules-limit-card{width:43px;height:60px;margin-left:-18px}
.rules-counted-card{position:relative;display:grid;place-items:center}
.rules-counted-card .rules-limit-card{width:48px;height:67px}
.rules-counted-card b{position:absolute;right:-5px;bottom:-4px;min-width:27px;padding:3px 5px;border-radius:999px;background:#18251e;color:#dbe4de;font-size:10px;text-align:center;box-shadow:0 2px 6px rgba(2,7,4,.25)}
.rules-limit-number{display:grid;place-items:center;min-width:38px;height:38px;border-radius:10px;background:#3c3b2e;color:#dbc38d;font-size:16px;font-weight:900}
.footer-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px 16px}
.footer-brand{color:var(--text-muted)}
.footer-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px 14px}
.footer-links button{border:0;background:transparent;padding:2px 0;color:inherit;font-size:inherit}
.footer-links button:hover,.footer-links button:focus-visible{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.footer-links .pwa-install-button{padding:5px 9px;border:1px solid var(--panel-border);border-radius:8px;background:var(--panel-bg);color:var(--text-secondary);font-weight:750}
.footer-links .pwa-install-button:hover,.footer-links .pwa-install-button:focus-visible{background:var(--panel-bg-hover);color:var(--text-main);text-decoration:none}
.pwa-install-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px;background:rgba(5,4,3,.76)}
.pwa-install-modal[hidden]{display:none}
.pwa-install-card{position:relative;width:min(360px,100%);padding:24px;border:1px solid var(--panel-border);border-radius:16px;background:var(--panel-bg-hover);box-shadow:0 22px 60px rgba(0,0,0,.52)}
.pwa-install-card .brand-card{margin-bottom:15px}
.pwa-install-card h2{margin:0 36px 16px 0}
.pwa-install-card ol{display:grid;gap:10px;margin:0;padding-left:22px;color:var(--text-secondary);line-height:1.45}
.pwa-install-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:1px solid var(--filter-border);border-radius:9px;background:var(--filter-bg);color:var(--text-secondary);font-size:23px;line-height:1}
.pwa-install-close:hover,.pwa-install-close:focus-visible{border-color:var(--panel-border-strong);background:var(--panel-bg-hover);color:var(--text-main)}
.action-confirmation-card h2{margin:0 0 20px}
.action-confirmation-actions{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:720px){#actionConfirmation .action-confirmation-card{transform:scale(.8)}}
.prompt-modal-card h2{font-size:18px}
.prompt-modal-card .input{margin:14px 0 20px}
.bot-seat-card{width:min(580px,100%);max-height:calc(100dvh - 28px);display:grid;gap:18px;overflow:auto;padding:22px}
.bot-seat-heading{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding-right:36px}
.bot-seat-heading-icon{width:42px;height:42px;padding:6px;border:1px solid var(--panel-border-strong);border-radius:12px;background:var(--filter-bg);object-fit:contain}
.bot-seat-heading h2{margin:0 0 4px;font-size:22px}
.bot-seat-heading p{margin:0;color:var(--text-secondary);font-size:12px;line-height:1.4}
.bot-seat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.bot-seat-option{position:relative;min-width:0;cursor:pointer}
.bot-seat-option>input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.bot-seat-choice{position:relative;min-height:142px;display:grid;place-items:center;align-content:center;gap:5px;padding:13px 8px;border:1px solid var(--filter-border);border-radius:12px;background:rgba(8,23,18,.58);color:var(--text-main);text-align:center;transition:.15s border-color,.15s background,.15s box-shadow,.15s transform}
.bot-seat-choice:hover{border-color:#718078;background:rgba(21,42,34,.82)}
.bot-seat-option>input:focus-visible+.bot-seat-choice{outline:2px solid var(--gold);outline-offset:2px}
.bot-seat-option>input:checked+.bot-seat-choice{border-color:#d8aa2e;background:rgba(59,48,20,.72);box-shadow:inset 0 0 0 1px rgba(255,207,60,.28),0 7px 18px rgba(0,0,0,.2);transform:translateY(-1px)}
.bot-seat-choice img{width:48px;height:48px;padding:5px;border:1px solid #61766b;border-radius:50%;background:#263a31}
.bot-seat-choice strong{font-size:13px}.bot-seat-choice small{color:var(--text-secondary);font-size:10px}
.bot-seat-number{position:absolute;left:8px;top:8px;width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:rgba(36,58,49,.9);font-size:12px;font-weight:850}
.bot-seat-item{position:relative;min-width:0}
.bot-seat-item .bot-seat-choice{min-height:170px;padding-bottom:52px}
.bot-seat-difficulty{position:absolute;left:7px;right:7px;bottom:7px;display:block;min-width:0;font-size:0;line-height:0}
.bot-difficulty-field{min-width:0;display:grid;gap:5px;color:var(--text-secondary);font-size:12px;font-weight:650}
.bot-seat-difficulty[hidden],.bot-difficulty-field[hidden],.bot-difficulty-group[hidden]{display:none}
.bot-seat-difficulty .input{display:block;width:100%;min-width:0;min-height:34px;padding:5px 26px 5px 9px;font-size:12px;font-weight:650;line-height:1.2;color-scheme:dark;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#aaa394 50%),linear-gradient(135deg,#aaa394 50%,transparent 50%);background-position:calc(100% - 15px) calc(50% - 2px),calc(100% - 10px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.bot-seat-difficulty .input:focus{background-image:linear-gradient(45deg,transparent 50%,#f6c63f 50%),linear-gradient(135deg,#f6c63f 50%,transparent 50%)}
.bot-difficulty-badge{display:block;width:fit-content;max-width:100%;margin:3px 0 0;padding:0 5px;border:1px solid var(--filter-border);border-radius:5px;color:var(--text-secondary);font-size:max(1em,9px);font-weight:650;line-height:1.5;white-space:nowrap}
.bot-seat-option>input:checked+.bot-seat-choice .bot-seat-number{background:#d8aa2e;color:#181307}
.bot-seat-footer{position:sticky;bottom:-22px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -22px -22px;padding:13px 22px 22px;border-top:1px solid var(--filter-border);background:linear-gradient(180deg,rgba(20,29,25,.96),var(--panel-bg-hover) 30%)}
.bot-seat-selection{color:var(--text-secondary);font-size:11px;font-weight:750}
.bot-seat-actions{display:flex;justify-content:flex-end;gap:8px}.bot-seat-actions .btn{min-height:40px}
@media(max-width:560px){
  .bot-seat-modal{padding:8px}
  .bot-seat-card{max-height:calc(100dvh - 16px);gap:14px;padding:16px;border-radius:14px}
  .bot-seat-heading{gap:9px;padding-right:34px}.bot-seat-heading-icon{width:36px;height:36px;font-size:20px}
  .bot-seat-heading h2{font-size:18px}.bot-seat-heading p{font-size:10px}
  .bot-seat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .bot-seat-choice{min-height:118px;padding:10px 5px}.bot-seat-choice img{width:42px;height:42px}
  .bot-seat-item .bot-seat-choice{min-height:150px;padding-bottom:48px}
  .bot-seat-difficulty{left:5px;right:5px;bottom:5px}
  .bot-seat-choice strong{font-size:11px}.bot-seat-choice small{font-size:9px}
  .bot-seat-footer{bottom:-16px;display:grid;margin:0 -16px -16px;padding:11px 16px calc(16px + env(safe-area-inset-bottom))}
  .bot-seat-actions{display:grid;grid-template-columns:1fr 1.25fr}.bot-seat-actions .btn{min-width:0;padding-inline:7px;font-size:11px}
}
.legal-page{width:min(860px,100%);margin:0 auto;display:grid;gap:16px}
.legal-head{margin-bottom:0}
.legal-content{display:grid;gap:0}
.legal-section{padding:17px 0;border-bottom:1px solid var(--line)}
.legal-section:first-child{padding-top:0}
.legal-section:last-child{padding-bottom:0;border-bottom:0}
.legal-section h2{margin-bottom:6px}
.legal-section p{margin:0;color:var(--text-secondary);line-height:1.65}
@media(max-width:800px){
  .rules-overview{grid-template-columns:1fr}
  .rules-facts{justify-content:flex-start}
  .rules-examples{grid-template-columns:1fr}
}
@media(max-width:600px){
  .rules-guide{grid-template-columns:1fr}
  .rules-guide>section,.rules-guide>section:nth-child(odd){border-right:0;border-bottom:1px solid var(--line)}
  .rules-guide>section:last-child{border-bottom:0}
  .rules-example{grid-template-columns:1fr}
  .rules-card-play{width:min(270px,100%);margin:auto}
  .footer-inner{gap:5px 12px}
  .footer-links{gap:5px 11px}
  .legal-section{padding:15px 0}
}
body.lobby-active{
  background:radial-gradient(circle at 78% -10%,rgba(91,55,23,.2),transparent 35%),linear-gradient(180deg,var(--lobby-bg-soft),var(--lobby-bg) 48%);
}
body.lobby-active .topbar{background:rgba(13,13,10,.96);border-bottom-color:var(--panel-border);box-shadow:0 8px 24px rgba(0,0,0,.24)}
body.lobby-active .topbar .brand-card{background:linear-gradient(145deg,var(--gold-light),var(--gold-dark));color:#241a08}
body.lobby-active .credit-pill{background:var(--credits-bg);border-color:var(--panel-border);color:var(--credits-text)}
body:not(.lobby-active) .nav-links .lobby-only-nav{display:none}
body.lobby-active .app-shell{margin:18px auto 48px}
@media(min-width:1101px){body.lobby-active .topbar{padding-inline:max(20px,calc((100vw - 1260px)/2))}body.lobby-active .nav-links{flex-wrap:nowrap}body.lobby-active .nav-links>*{flex-shrink:0}body.lobby-active .nav-item{white-space:nowrap}}
body.lobby-active .btn.primary,
body.lobby-active .lobby-create-button{border:1px solid rgba(255,230,130,.72);background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 55%,#e5ad2e 100%);color:#16120a;box-shadow:0 6px 18px rgba(185,127,15,.2)}
@media(hover:hover) and (pointer:fine){
  body.lobby-active .btn.primary:hover,
  body.lobby-active .lobby-create-button:hover{background:linear-gradient(180deg,#ffe078 0%,var(--gold-light) 55%,var(--gold) 100%);box-shadow:0 8px 22px rgba(185,127,15,.27)}
}
.lobby-page,.lobby-shell{min-width:0}
.lobby-shell{display:grid}
.lobby-main{display:grid;gap:15px;min-width:0}
.lobby-hero{
  position:relative;
  min-height:288px;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(34px,4vw,68px);
  border:1px solid rgba(220,169,48,.52);
  border-radius:22px;
  background:
    radial-gradient(ellipse 42% 88% at 82% -10%,
      rgba(255,205,91,.22) 0%,
      rgba(179,126,37,.10) 30%,
      transparent 67%
    ),
    radial-gradient(ellipse 38% 60% at 64% 58%,
      rgba(18,92,63,.18) 0%,
      transparent 72%
    ),
    linear-gradient(116deg,
      transparent 0 49%,
      rgba(241,218,151,.030) 49.2% 53.2%,
      transparent 53.4% 100%
    ),
    linear-gradient(108deg,
      transparent 0 63%,
      rgba(246,217,127,.040) 63.2% 68.5%,
      transparent 68.7% 100%
    ),
    linear-gradient(101deg,
      #020706 0%,
      #020a08 29%,
      #04140f 49%,
      #06271b 72%,
      #072e20 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255,236,175,.07),
    inset 0 -22px 45px rgba(0,0,0,.12),
    0 20px 50px rgba(0,0,0,.38);
}
.lobby-hero::before{
  content:none;
}
.lobby-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 76% 12%,rgba(255,220,124,.25) 0 1px,transparent 1.8px),
    radial-gradient(circle at 81% 19%,rgba(255,220,124,.16) 0 1px,transparent 1.7px),
    radial-gradient(circle at 69% 25%,rgba(255,220,124,.12) 0 1px,transparent 1.6px),
    linear-gradient(112deg,
      transparent 0 67%,
      rgba(255,224,141,.070) 67.2% 71.2%,
      transparent 71.4% 100%
    ),
    linear-gradient(112deg,
      transparent 0 76%,
      rgba(255,213,98,.052) 76.2% 80%,
      transparent 80.2% 100%
    ),
    repeating-linear-gradient(
      100deg,
      transparent 0 76px,
      rgba(221,236,227,.012) 77px,
      transparent 79px 154px
    );
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    auto;
  opacity:.88;
}
.lobby-hero-copy{
  position:relative;
  z-index:3;
  width:100%;
}
.lobby-hero .eyebrow,
.lobby-hero h1,
.lobby-hero p{
  position:static;
}
.lobby-hero .eyebrow{
  color:#f2c54c;
  letter-spacing:.20em;
}
.lobby-hero h1{
  max-width:48%;
  margin:7px 0 10px;
  color:#f7f4ed;
  font-size:clamp(40px,4.6vw,68px);
  font-weight:820;
  line-height:1;
  letter-spacing:-.035em;
  text-shadow:0 4px 22px rgba(0,0,0,.42);
  white-space:nowrap;
}
.lobby-hero p{
  max-width:590px;
  margin:0 0 23px;
  color:#c9c4b9;
  font-size:clamp(14px,1.35vw,17px);
  line-height:1.5;
}
.lobby-create-button{
  min-width:190px;
  min-height:49px;
  padding:11px 22px;
  border:1px solid rgba(255,224,129,.82);
  border-radius:10px;
  background:linear-gradient(180deg,#f9d66d 0%,#efbe43 55%,#e8ad2d 100%);
  color:#171208;
  font-size:14px;
  font-weight:800;
  box-shadow:
    inset 0 1px 0 rgba(255,249,216,.42),
    0 9px 24px rgba(161,109,14,.20);
}
.lobby-hero-copy::before,
.lobby-hero-copy::after,
.lobby-hero h1::before,
.lobby-hero h1::after,
.lobby-hero .eyebrow::before,
.lobby-hero .eyebrow::after,
.lobby-hero p::before,
.lobby-hero p::after{
  content:"";
  position:absolute;
  display:block;
  pointer-events:none;
  user-select:none;
}
.lobby-hero-copy::before{
  z-index:4;
  left:56.4%;
  top:18px;
  width:clamp(90px,6.05vw,104px);
  aspect-ratio:78/109;
  background:url('/assets/cards/v2/10H.svg') center/contain no-repeat;
  filter:
    drop-shadow(0 10px 10px rgba(0,0,0,.34))
    drop-shadow(0 0 13px rgba(234,180,58,.08));
  transform:rotate(-10deg);
  transform-origin:center;
}
.lobby-hero-copy::after{
  z-index:4;
  right:-.3%;
  top:0;
  width:clamp(112px,7.4vw,128px);
  height:clamp(148px,10.25vw,176px);
  background-image:
    url('/assets/cards/back.svg'),
    url('/assets/cards/back.svg'),
    url('/assets/cards/back.svg'),
    url('/assets/cards/back.svg');
  background-repeat:no-repeat;
  background-position:
    34px 0,
    23px 5px,
    12px 10px,
    2px 15px;
  background-size:
    88px auto,
    88px auto,
    88px auto,
    88px auto;
  filter:
    saturate(.72)
    brightness(.88)
    contrast(1.08)
    drop-shadow(0 12px 11px rgba(0,0,0,.40));
  transform:rotate(7deg);
  transform-origin:center;
}
.lobby-hero h1::before{
  z-index:4;
  left:68.4%;
  top:82px;
  width:clamp(88px,5.9vw,101px);
  aspect-ratio:78/109;
  background:url('/assets/cards/v2/JC.svg') center/contain no-repeat;
  filter:drop-shadow(0 11px 10px rgba(0,0,0,.35));
  transform:rotate(-6deg);
  transform-origin:center;
}
.lobby-hero h1::after{
  z-index:4;
  left:79.2%;
  top:145px;
  width:clamp(92px,6.1vw,105px);
  aspect-ratio:78/109;
  background:url('/assets/cards/v2/7D.svg') center/contain no-repeat;
  filter:drop-shadow(0 12px 11px rgba(0,0,0,.37));
  transform:rotate(12deg);
  transform-origin:center;
}
.lobby-hero .eyebrow::before{
  z-index:2;
  left:41.6%;
  top:54px;
  width:42px;
  height:42px;
  background:url('/assets/cards/spades.svg') center/contain no-repeat;
  opacity:.16;
  filter:invert(74%) sepia(31%) saturate(485%) hue-rotate(356deg) brightness(82%);
  transform:rotate(-6deg);
}
.lobby-hero .eyebrow::after{
  z-index:2;
  left:75.4%;
  top:51px;
  width:34px;
  height:34px;
  background:url('/assets/cards/hearts.svg') center/contain no-repeat;
  opacity:.34;
  filter:saturate(.68) brightness(.88);
  transform:rotate(8deg);
}
.lobby-hero p::before{
  z-index:2;
  left:52.7%;
  top:179px;
  width:52px;
  height:52px;
  background:url('/assets/cards/clubs.svg') center/contain no-repeat;
  opacity:.15;
  filter:invert(71%) sepia(22%) saturate(380%) hue-rotate(350deg) brightness(72%);
  transform:rotate(5deg);
}
.lobby-hero p::after{
  z-index:2;
  right:4.6%;
  top:186px;
  width:47px;
  height:47px;
  background:url('/assets/cards/diamonds.svg') center/contain no-repeat;
  opacity:.17;
  filter:saturate(.58) brightness(.76);
  transform:rotate(4deg);
}
.lobby-hero.lobby-hero-fallback{background-color:transparent}
body.lobby-create-open{overflow:hidden}
.lobby-create-modal{position:fixed;inset:0;z-index:1250;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:rgba(3,7,5,.88);overscroll-behavior:contain}
.lobby-create-panel{width:min(820px,100%);max-height:calc(100dvh - 36px);margin:0;overflow:auto;overscroll-behavior:contain;padding:26px;border:1px solid rgba(246,198,63,.24);border-radius:18px;background:linear-gradient(180deg,#17261f 0%,#122019 100%);box-shadow:0 28px 80px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.025)}
.lobby-create-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.lobby-create-head h2{margin:4px 0 0;font-size:24px;letter-spacing:-.02em}
.lobby-create-head>button{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--filter-border);border-radius:10px;background:#22322b;color:#dce4df;font-size:25px;line-height:1;transition:.15s background,.15s border-color,.15s color}
.lobby-create-head>button:hover,.lobby-create-head>button:focus-visible{border-color:var(--panel-border-strong);background:#2b3d34;color:#fff}
.lobby-create-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;align-items:end}
.lobby-create-field{min-width:0;display:grid;gap:7px;color:var(--text-secondary);font-size:13px;font-weight:750;line-height:1.2}
.lobby-create-field[hidden]{display:none}
.lobby-create-field-wide{grid-column:1/-1}
.bot-difficulty-group{min-width:0;margin:0;padding:10px 12px 12px;border:1px solid var(--filter-border);border-radius:11px}
.bot-difficulty-group legend{padding:0 5px;color:var(--text-secondary);font-size:12px;font-weight:750}
.bot-difficulty-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px}
.lobby-create-form .input{width:100%;min-width:0;min-height:48px;padding:11px 14px;border:1px solid rgba(255,255,255,.11);border-radius:11px;background:#0c1511;color:var(--text-main);font-size:14px;font-weight:650;line-height:1.2;box-shadow:inset 0 1px 0 rgba(255,255,255,.018);transition:.15s border-color,.15s box-shadow,.15s background}
.lobby-create-form .input:hover{border-color:rgba(246,198,63,.26);background:#0f1a15}
.lobby-create-form .input:focus{border-color:rgba(246,198,63,.82);background:#101b16;box-shadow:0 0 0 3px rgba(246,198,63,.12)}
.lobby-create-form .lobby-create-field-note{display:flex;align-items:center;min-height:48px;margin:0;color:var(--text-muted);font-size:13px;font-weight:600;line-height:1.35}
.lobby-create-form select.input{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,#aaa394 50%),linear-gradient(135deg,#aaa394 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 2px),calc(100% - 13px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;color-scheme:dark}
.lobby-create-form select.input:focus{background-image:linear-gradient(45deg,transparent 50%,#f6c63f 50%),linear-gradient(135deg,#f6c63f 50%,transparent 50%)}
.lobby-create-form option{background:#101813;color:var(--text-main)}
.lobby-create-form select.input.bot-difficulty-select{min-height:38px;padding:8px 40px 8px 10px;font-size:13px}
.lobby-create-field{position:relative}
.lobby-native-select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
}
.lobby-select-shell{position:relative;min-width:0}
.lobby-select-shell.open{z-index:40}
.lobby-select-trigger{
  width:100%;
  min-width:0;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:11px;
  background:#0c1511;
  color:var(--text-main);
  font:inherit;
  font-size:14px;
  font-weight:650;
  line-height:1.2;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
  outline:none;
  cursor:pointer;
  transition:.15s border-color,.15s box-shadow,.15s background;
}
.lobby-select-trigger:hover{border-color:rgba(246,198,63,.26);background:#0f1a15}
.lobby-select-trigger:focus-visible,
.lobby-select-shell.open .lobby-select-trigger{
  border-color:rgba(246,198,63,.82);
  background:#101b16;
  box-shadow:0 0 0 3px rgba(246,198,63,.12);
}
.lobby-select-trigger:disabled{opacity:.48;cursor:not-allowed}
.lobby-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bot-difficulty-list .lobby-select-trigger{min-height:38px;padding:8px 32px 8px 10px;font-size:13px}
.lobby-select-trigger::after{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  margin:0 2px 3px 8px;
  border-right:1.5px solid #aaa394;
  border-bottom:1.5px solid #aaa394;
  transform:rotate(45deg);
  transition:.15s transform,.15s border-color;
}
.lobby-select-shell.open .lobby-select-trigger::after{
  margin-top:5px;
  border-color:var(--gold);
  transform:rotate(225deg);
}
.lobby-select-menu{
  position:absolute;
  z-index:1305;
  left:0;
  right:0;
  top:calc(100% + 6px);
  max-height:min(240px,42dvh);
  overflow:auto;
  overscroll-behavior:contain;
  padding:5px;
  border:1px solid rgba(246,198,63,.28);
  border-radius:11px;
  background:#0b1410;
  box-shadow:0 18px 44px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.025);
  scrollbar-width:thin;
  scrollbar-color:rgba(246,198,63,.32) transparent;
}
.lobby-select-menu[hidden]{display:none}
.lobby-select-shell.open-up .lobby-select-menu{top:auto;bottom:calc(100% + 6px)}
.lobby-select-option{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#ddd8cd;
  font:inherit;
  font-size:13px;
  font-weight:650;
  line-height:1.2;
  text-align:left;
  cursor:pointer;
  outline:none;
}
.lobby-select-option:hover,
.lobby-select-option:focus-visible{
  border-color:rgba(246,198,63,.18);
  background:#18261f;
  color:#fff;
}
.lobby-select-option.selected{
  background:rgba(246,198,63,.14);
  color:#ffd75a;
}
.lobby-select-option.selected::after{
  content:"✓";
  margin-left:auto;
  padding-left:12px;
  color:#ffd75a;
  font-weight:900;
}
.lobby-select-option:disabled{opacity:.34;cursor:not-allowed}
.lobby-create-actions{grid-column:1/-1;display:flex;justify-content:flex-end;padding-top:4px}
.lobby-create-submit{width:min(220px,100%);min-height:48px;font-size:14px}
.lobby-results{display:grid;gap:11px}
.lobby-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:5px 1px 2px}
.lobby-filters{display:flex;align-items:center;gap:7px;min-width:0}
.lobby-filter{min-height:34px;padding:6px 13px;border:1px solid var(--filter-border);border-radius:999px;background:var(--filter-bg);color:#c7c2b8;font-size:12px;font-weight:750;white-space:nowrap}
.lobby-filter.active{border:2px solid var(--gold);background:rgba(34,29,18,.9);color:var(--gold);box-shadow:none}
@media(hover:hover) and (pointer:fine){.lobby-filter:hover{border-color:rgba(246,198,63,.55)}}
.lobby-result-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--text-secondary);font-size:12px}
.lobby-result-controls>b{color:var(--text-main);font-size:13px}
.lobby-result-controls label{display:flex;align-items:center;gap:7px;white-space:nowrap}
.lobby-view-toggle{display:flex;align-items:center;gap:3px;padding:2px;border:1px solid var(--filter-border);border-radius:9px;background:var(--filter-bg)}
.lobby-view-toggle button{min-height:27px;padding:4px 8px;border:0;border-radius:6px;background:transparent;color:var(--text-secondary);font-size:10px;font-weight:750;white-space:nowrap}
.lobby-view-toggle button.active{background:var(--panel-bg-hover);color:var(--gold)}
.lobby-sort{
  max-width:190px;
  min-height:36px;
  padding:7px 36px 7px 12px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:10px;
  background-color:#0c1511;
  background-image:
    linear-gradient(45deg,transparent 50%,#aaa394 50%),
    linear-gradient(135deg,#aaa394 50%,transparent 50%);
  background-position:
    calc(100% - 17px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  color:#ece8e1;
  font:inherit;
  font-weight:700;
  line-height:1.2;
  -webkit-appearance:none;
  appearance:none;
  color-scheme:dark;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
  transition:.15s border-color,.15s box-shadow,.15s background-color;
}
.lobby-sort:hover{
  border-color:rgba(246,198,63,.26);
  background-color:#0f1a15;
}
.lobby-sort:focus,
.lobby-sort:focus-visible{
  border-color:rgba(246,198,63,.82);
  background-color:#101b16;
  background-image:
    linear-gradient(45deg,transparent 50%,#f6c63f 50%),
    linear-gradient(135deg,#f6c63f 50%,transparent 50%);
  box-shadow:0 0 0 3px rgba(246,198,63,.12);
}
.lobby-sort option{
  background:#101813;
  color:var(--text-main);
}
.lobby-table-grid{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:11px}
.lobby-table-grid.lobby-table-list{grid-template-columns:1fr}
.lobby-table-card{min-height:146px;grid-template-columns:104px minmax(0,1fr) 102px;align-items:center;gap:13px;padding:13px;border:1px solid var(--panel-border);border-radius:18px;background:var(--panel-bg);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.lobby-table-card:before{display:none}
.lobby-table-card:hover{background:var(--panel-bg-hover);border-color:var(--panel-border-strong)}
.lobby-table-thumb{position:relative;width:104px;height:112px;overflow:hidden;border:1px solid rgba(246,198,63,.18);border-radius:14px;background:linear-gradient(145deg,#115437 0%,var(--green-thumbnail) 55%,var(--green-thumbnail-dark) 100%);box-shadow:inset 0 0 22px rgba(2,8,5,.3)}
.lobby-table-number{position:absolute;left:7px;top:7px;z-index:4;padding:4px 7px;border-radius:9px;background:rgba(8,25,17,.82);color:var(--text-main);font-size:9px;font-weight:700;letter-spacing:.04em;box-shadow:0 3px 8px rgba(3,5,4,.3)}
.lobby-table-card-back,.lobby-table-trump-ace{position:absolute;width:58px;height:81px;border-radius:6px;filter:drop-shadow(0 7px 7px rgba(2,5,3,.4))}
.lobby-table-card-back{right:9px;bottom:4px;z-index:1;transform:rotate(9deg)}
.lobby-table-trump-ace{left:22px;bottom:8px;z-index:2;transform:rotate(-8deg)}
.lobby-trump-pending{position:absolute;left:22px;bottom:8px;z-index:2;width:58px;height:81px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:6px;background:linear-gradient(145deg,#253a31,#14251d);color:var(--text-muted);font-size:22px;transform:rotate(-8deg);box-shadow:0 7px 7px rgba(2,5,3,.34)}
.lobby-table-info{min-width:0;align-self:center}
.lobby-table-card h3{max-width:100%;margin:0 0 8px;overflow:hidden;color:var(--text-main);font-size:17px;line-height:1.18;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal}
.lobby-table-stats{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.lobby-table-stats>span{padding:4px 6px;border-radius:6px;background:var(--stats-neutral-bg);color:var(--text-secondary);font-size:10px;font-weight:750;white-space:nowrap}
.lobby-table-stats .players-stat{background:var(--stats-blue-bg);color:var(--stats-blue-text)}
.lobby-table-stats .eye-icon{display:inline-flex;align-items:center}
.lobby-table-stats .eye-icon svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.lobby-table-stats .credits-stat{background:var(--credits-bg);color:var(--credits-text)}
.lobby-table-card .tile-mode{max-width:100%;overflow:hidden;color:var(--text-muted);font-size:10px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal}
.lobby-table-aside{width:102px;display:grid;justify-items:stretch;align-self:stretch;align-content:space-between;gap:9px;text-align:center}
.lobby-table-card .status{width:100%;max-width:none;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;line-height:1.15;white-space:normal}
.lobby-table-card .status i{width:6px;height:6px;display:block;flex:0 0 auto;border-radius:50%;background:currentColor}
.lobby-table-card .status.playing{border:1px solid var(--playing-border);background:var(--playing-bg);color:var(--playing-text)}
.lobby-table-row{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:14px;padding:10px 12px;border:1px solid var(--panel-border);border-radius:12px;background:var(--panel-bg)}
.lobby-table-row:hover{background:var(--panel-bg-hover);border-color:var(--panel-border-strong)}
.lobby-list-main{min-width:0;display:grid;gap:6px}
.lobby-list-title{min-width:0;display:flex;align-items:center;gap:9px}
.lobby-list-title>span{flex:0 0 auto;color:var(--gold);font-size:10px;font-weight:800}
.lobby-list-title h3{min-width:0;margin:0;overflow:hidden;color:var(--text-main);font-size:14px;white-space:nowrap;text-overflow:ellipsis}
.lobby-table-row .lobby-table-stats{margin:0}
.lobby-list-aside{width:112px;display:grid;gap:7px}
.lobby-table-row .status{width:100%;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 4px;line-height:1.15;text-align:center;white-space:normal}
.lobby-table-row .status i{width:6px;height:6px;display:block;flex:0 0 auto;border-radius:50%;background:currentColor}
.lobby-table-action{width:100%;min-height:38px;padding:6px 7px;border:2px solid var(--gold);border-radius:9px;background:rgba(20,18,13,.82);color:var(--text-main);font-size:10px;line-height:1.15;box-shadow:none}
.lobby-table-action.reclaim-seat-btn{border-color:rgba(255,230,130,.72);background:linear-gradient(180deg,var(--gold-light),var(--gold) 58%,#e5ad2e);color:#16120a;font-weight:800}
.lobby-table-action:focus-visible,.lobby-filter:focus-visible,.lobby-bottom-nav button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.lobby-table-action:hover{background:rgba(246,198,63,.08)}.lobby-table-action.reclaim-seat-btn:hover{background:linear-gradient(180deg,#ffe078,var(--gold-light) 58%,var(--gold));color:#16120a}}
.lobby-empty{min-height:190px;align-content:center;gap:10px;border:1px dashed rgba(155,178,165,.2);border-radius:16px;background:var(--panel-bg)}
.lobby-empty>span{font-size:38px}
.lobby-empty h3{margin:0;padding:0 20px;color:#bdc7c1}
.lobby-pagination{gap:6px;flex-wrap:wrap}
.lobby-bottom-nav{display:none}
.lobby-bottom-nav[hidden]{display:none!important}
@media(min-width:721px) and (max-width:1100px){
  body.lobby-active .app-shell{width:calc(100% - 24px);margin:12px auto 40px}
  .lobby-hero{min-height:258px;padding:30px}
  .lobby-hero-copy{width:100%}
  .lobby-hero h1{max-width:49%;font-size:clamp(35px,5.5vw,50px)}
  .lobby-hero-copy::before{left:57%;top:20px;width:78px}
  .lobby-hero h1::before{left:69%;top:72px;width:76px}
  .lobby-hero h1::after{left:80%;top:130px;width:78px}
  .lobby-hero-copy::after{right:-2%;top:2px;width:104px;height:145px;background-position:27px 0,18px 5px,10px 10px,2px 15px;background-size:72px auto}
  .lobby-hero .eyebrow::before{left:42%;top:52px;width:34px;height:34px}
  .lobby-hero .eyebrow::after{left:76%;top:48px;width:27px;height:27px}
  .lobby-hero p::before{left:53%;top:161px;width:43px;height:43px}
  .lobby-hero p::after{right:5%;top:169px;width:39px;height:39px}
  .lobby-table-grid{grid-template-columns:1fr}
}
@media(min-width:960px) and (max-width:1100px){
  .lobby-table-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:721px) and (max-width:1100px){
  .lobby-create-modal{padding:20px}
  .lobby-create-panel{width:min(760px,calc(100vw - 40px));max-height:calc(100dvh - 40px);padding:24px}
  .lobby-create-head{margin-bottom:20px}
  .lobby-create-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 16px}
  .lobby-create-form .input{min-height:50px;font-size:14px}
  .lobby-select-trigger{min-height:50px;font-size:14px}
  .lobby-create-submit{min-height:50px}
}
@media(max-width:720px){
  body.lobby-active .app-shell{width:100%;margin:0;padding:12px 10px 0}
  .lobby-main{gap:11px}
  .lobby-hero{
    min-height:214px;
    margin:0;
    padding:24px 18px 19px;
    border-radius:22px;
    background:
      radial-gradient(ellipse 45% 72% at 91% -5%,rgba(255,205,91,.16),transparent 66%),
      linear-gradient(114deg,transparent 0 62%,rgba(241,218,151,.028) 62.2% 68%,transparent 68.2%),
      linear-gradient(103deg,#020706 0%,#030d0a 43%,#051c14 70%,#062d20 100%);
  }
  .lobby-hero::before{content:none}
  .lobby-hero::after{
    background:
      linear-gradient(111deg,transparent 0 73%,rgba(255,221,122,.05) 73.2% 79%,transparent 79.2%),
      repeating-linear-gradient(101deg,transparent 0 58px,rgba(220,236,227,.010) 59px,transparent 61px 118px);
    opacity:.60;
  }
  .lobby-hero-copy{width:100%}
  .lobby-hero h1{
    max-width:calc(68% - 4px);
    margin:5px 0 8px;
    font-size:clamp(36px,9.5vw,42px);
    white-space:normal;
  }
  .lobby-hero p{
    max-width:225px;
    margin-bottom:13px;
    font-size:11px;
    line-height:1.42;
  }
  .lobby-create-button{
    width:auto;
    min-width:188px;
    min-height:42px;
    padding:9px 16px;
    font-size:12px;
  }
  .lobby-hero-copy::before{left:69%;top:16px;width:47px}
  .lobby-hero h1::before{left:79%;top:58px;width:47px}
  .lobby-hero h1::after{left:89%;top:102px;width:48px}
  .lobby-hero-copy::after{
    right:-1%;
    top:10px;
    width:64px;
    height:91px;
    background-position:16px 0,10px 4px,5px 8px,0 12px;
    background-size:44px auto;
  }
  .lobby-hero .eyebrow::before,
  .lobby-hero .eyebrow::after,
  .lobby-hero p::before,
  .lobby-hero p::after{display:none}
  .lobby-create-modal{padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));align-items:center}
  .lobby-create-panel{width:100%;max-height:calc(100dvh - 20px);padding:18px;border-radius:16px}
  .lobby-create-head{gap:12px;margin-bottom:17px}.lobby-create-head h2{font-size:21px}.lobby-create-head>button{width:36px;height:36px}
  .lobby-create-form{grid-template-columns:1fr;gap:12px}
  .lobby-create-field-wide{grid-column:auto}
  .lobby-create-field{gap:6px;font-size:12px}
  .lobby-create-form .input{min-height:46px;padding:10px 13px;font-size:16px}
  .lobby-select-trigger{min-height:46px;padding:10px 13px;font-size:16px}
  .lobby-select-menu{max-height:min(230px,38dvh)}
  .lobby-select-option{min-height:42px;padding:9px 10px;font-size:15px}
  .lobby-create-actions{grid-column:auto;padding-top:3px}
  .lobby-create-submit{width:100%;min-height:46px}
  .lobby-filter-bar{display:grid;grid-template-columns:1fr;gap:10px;padding:4px 0 2px}
  .lobby-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .lobby-filter{min-width:0;min-height:34px;padding:6px 4px;font-size:10px;line-height:1.1;white-space:normal}
  .lobby-result-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:8px 10px;
    font-size:10px
  }
  .lobby-result-controls>b{
    flex:0 0 100%;
    font-size:11px;
    line-height:1.2
  }
  .lobby-view-toggle{
    flex:0 0 auto;
    justify-self:auto;
    gap:2px;
    padding:2px;
    border-radius:10px
  }
  .lobby-view-toggle button{min-height:30px;padding:4px 8px;font-size:10px}
  .lobby-result-controls label{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    font-size:10px;
    white-space:nowrap
  }
  .lobby-sort{width:140px;min-width:140px;max-width:none;min-height:34px;padding:7px 32px 7px 10px;font-size:10px}
  .lobby-table-grid{grid-template-columns:1fr;gap:8px}
  .lobby-table-card{min-height:134px;grid-template-columns:84px minmax(0,1fr) 86px;gap:9px;padding:10px;border-radius:19px}
  .lobby-table-thumb{width:84px;height:104px;border-radius:12px}
  .lobby-table-card-back,.lobby-table-trump-ace,.lobby-trump-pending{width:52px;height:73px}.lobby-table-card-back{right:6px;bottom:5px}.lobby-table-trump-ace,.lobby-trump-pending{left:18px;bottom:8px}
  .lobby-table-card h3{margin-bottom:7px;font-size:15px}.lobby-table-stats{gap:4px;margin-bottom:6px}.lobby-table-stats>span{padding:3px 5px;font-size:9px}
  .lobby-table-card .tile-mode{font-size:9px}.lobby-table-aside{width:86px;gap:7px}.lobby-table-card .status{font-size:8px}.lobby-table-action{min-height:38px;padding:5px 4px;font-size:9px}
  .lobby-table-row{grid-template-columns:minmax(0,1fr) 86px;gap:9px;padding:9px 10px}.lobby-list-aside{width:86px}.lobby-list-title h3{font-size:13px}.lobby-table-row .tile-mode{font-size:9px}
  body.authenticated-mobile-nav-visible{--mobile-nav-shell-height:56px;--mobile-nav-bottom:2px;--mobile-nav-total-height:calc(var(--mobile-nav-shell-height) + var(--mobile-nav-bottom) + 2px);padding-bottom:var(--mobile-nav-total-height)}
  .lobby-bottom-nav{position:fixed;left:12px;right:12px;bottom:var(--mobile-nav-bottom);z-index:390;height:var(--mobile-nav-shell-height);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;padding:4px 6px 0;border:0;background:transparent;box-shadow:none}
  .lobby-bottom-nav:before{content:"";position:absolute;left:0;right:0;top:0;height:var(--mobile-nav-shell-height);z-index:0;border:1px solid rgba(246,198,63,.2);border-radius:24px;background:#181611;box-shadow:0 -4px 18px rgba(0,0,0,.24);pointer-events:none}
  .lobby-bottom-create-item{position:relative;overflow:visible;height:48px;display:grid;place-items:center}
  .lobby-bottom-create-item:before{content:"";position:absolute;left:50%;top:-27px;z-index:0;width:80px;height:52px;box-sizing:border-box;transform:translateX(-50%);border-top:1px solid rgba(246,198,63,.2);border-left:0;border-right:0;border-bottom:0;border-radius:80px 80px 0 0;background:#181611;pointer-events:none}
  .lobby-bottom-nav button{position:relative;z-index:1;width:100%;height:48px;min-width:0;display:grid;place-items:center;align-content:center;gap:2px;padding:3px 1px;border:0;border-radius:0;background:transparent;color:#b9b4aa;font-weight:600;-webkit-tap-highlight-color:transparent}
  .lobby-bottom-nav button:not(.lobby-bottom-create){transform:none}
  .lobby-bottom-nav button>span{font-size:23px;line-height:1}.lobby-bottom-nav button small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:11px;font-weight:600;line-height:1.1}
  .lobby-bottom-nav button>span svg{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .lobby-bottom-nav button.active{background:transparent;color:var(--gold)}
  .lobby-bottom-nav .lobby-bottom-create{width:62px;height:62px;align-self:center;justify-self:center;border:1px solid rgba(255,230,130,.72);border-radius:50%;background:linear-gradient(180deg,var(--gold-light),var(--gold) 55%,#e5ad2e);color:#16120a;box-shadow:0 7px 15px rgba(185,127,15,.22);transform:translateY(-17px)}
  .lobby-bottom-nav .lobby-bottom-create>span{font-size:28px}.lobby-bottom-nav .lobby-bottom-create small{font-size:9px;font-weight:800}
}
@media(hover:none),(pointer:coarse){
  .lobby-table-card:hover{transform:none;background:var(--panel-bg);border-color:var(--panel-border)}
}
@media(max-width:350px){
  .lobby-table-card{grid-template-columns:68px minmax(0,1fr) 74px;gap:7px;padding:8px}
  .lobby-table-thumb{width:68px;height:90px}.lobby-table-aside{width:74px}.lobby-table-card h3{font-size:14px}
  .lobby-table-card-back,.lobby-table-trump-ace,.lobby-trump-pending{width:44px;height:62px}.lobby-table-card-back{right:4px}.lobby-table-trump-ace,.lobby-trump-pending{left:14px}
  .lobby-table-card .tile-mode{font-size:8px}.lobby-table-action{font-size:8px}
}
@media(max-width:390px) and (max-height:700px) and (orientation:portrait){
  body.lobby-active .app-shell{padding:10px 7px 0}
  .lobby-main{gap:8px}
  .lobby-hero{min-height:196px;margin:0;padding:19px 14px 14px;border-radius:18px}
  .lobby-hero-copy{width:100%}
  .lobby-hero h1{max-width:calc(68% - 4px);font-size:34px}
  .lobby-hero p{max-width:205px;margin-bottom:10px;font-size:10px}
  .lobby-create-button{width:auto;min-width:174px;min-height:39px;padding:8px 12px;font-size:11px}
  .lobby-hero-copy::before{left:70%;top:14px;width:41px}
  .lobby-hero h1::before{left:81%;top:50px;width:41px}
  .lobby-hero h1::after{left:91%;top:88px;width:42px}
  .lobby-hero-copy::after{right:-1%;top:9px;width:57px;height:80px;background-position:14px 0,9px 3px,4px 6px,0 9px;background-size:39px auto}
  .lobby-filter-bar{gap:8px}
  .lobby-filters{gap:6px}
  .lobby-filter{min-height:31px;padding:5px 2px;font-size:8.5px}
  .lobby-result-controls{
    gap:7px 8px;
    font-size:9px
  }
  .lobby-result-controls>b{font-size:10px}
  .lobby-result-controls label{
    flex:1 1 auto;
    justify-content:flex-end;
    gap:6px;
    font-size:9px
  }
  .lobby-view-toggle button{min-height:28px;padding-inline:6px;font-size:9px}
  .lobby-sort{width:126px;min-width:126px;max-width:none;min-height:31px;padding:6px 30px 6px 8px;font-size:9px}
  .lobby-table-grid{gap:7px}.lobby-table-card{min-height:116px;grid-template-columns:70px minmax(0,1fr) 74px;gap:7px;padding:8px;border-radius:17px}
  .lobby-table-thumb{width:70px;height:90px}.lobby-table-number{left:4px;top:4px;padding:3px 5px;font-size:8px}
  .lobby-table-card-back,.lobby-table-trump-ace,.lobby-trump-pending{width:45px;height:63px}.lobby-table-card-back{right:4px;bottom:4px}.lobby-table-trump-ace,.lobby-trump-pending{left:14px;bottom:7px}
  .lobby-table-card h3{margin-bottom:5px;font-size:13px}.lobby-table-stats{margin-bottom:4px}.lobby-table-stats>span{font-size:8px}.lobby-table-card .tile-mode{font-size:8px}.lobby-table-aside{width:74px}.lobby-table-action{min-height:31px;font-size:8px}
}
@media(max-width:350px){
  .lobby-hero h1{font-size:30px}
}
@media(max-width:360px){
  body.authenticated-mobile-nav-visible{--mobile-nav-shell-height:54px}
  .lobby-bottom-nav{padding:3px 6px 0}
  .lobby-bottom-nav button{height:48px}.lobby-bottom-nav button>span{font-size:21px}.lobby-bottom-nav button small{font-size:10px}
  .lobby-bottom-nav .lobby-bottom-create{width:60px;height:60px;transform:translateY(-17px)}
  .lobby-bottom-nav .lobby-bottom-create>span{font-size:26px}.lobby-bottom-nav .lobby-bottom-create small{font-size:8px}
}
@media(max-width:720px){
  @supports (-webkit-touch-callout:none){
    body.authenticated-mobile-nav-visible{--mobile-nav-bottom:max(2px,calc(env(safe-area-inset-bottom) - 28px))}
    .lobby-bottom-nav:before{border-radius:999px}
  }
}
body.game-active .game-page .battlefield:has(.battle-pair){
  --battle-card-w:clamp(36px,6vw,60px);
  --battle-card-h:clamp(50px,8.4vw,84px);
  --battle-offset:clamp(7px,.8vw,10px);
  --battle-gap:clamp(4px,.7vw,8px);
  --battle-pair-w:calc(var(--battle-card-w) + var(--battle-offset));
  --battle-pair-h:calc(var(--battle-card-h) + var(--battle-offset));
  width:100%;
  max-width:calc(var(--battle-pair-w) + var(--battle-pair-w) + var(--battle-pair-w) + var(--battle-gap) + var(--battle-gap) + 12px);
  margin-inline:auto;
  padding:6px;
  gap:var(--battle-gap);
  align-content:center;
  justify-content:center;
  justify-self:center;
}
body.game-active .game-page .battlefield:has(.battle-pair) .battle-pair{
  width:var(--battle-pair-w);
  height:var(--battle-pair-h);
  flex:0 0 var(--battle-pair-w);
}
body.game-active .game-page .battlefield:has(.battle-pair) .battle-pair>.playing-card{
  width:var(--battle-card-w);
  height:var(--battle-card-h);
}
body.game-active .game-page .battlefield:has(.battle-pair) .battle-pair>.defense-card{
  left:var(--battle-offset);
  top:var(--battle-offset);
}
@media(max-width:1100px) and (orientation:portrait){
  body.game-active .game-page .hand{
    overflow:visible;
    min-width:0;
  }
  body.game-active .game-page .hand-row{
    width:100%;
    max-width:100%;
    flex-wrap:nowrap;
    justify-content:center;
    min-width:0;
  }
  body.game-active .game-page .hand-row+.hand-row{margin-top:0}
  body.game-active .game-page .hand-zone{
    display:flex;
    flex-direction:column;
    min-width:0;
    gap:clamp(2px,.45dvh,5px);
  }
  body.game-active .game-page .hand-zone>.game-controls{
    position:static;
    inset:auto;
    order:-1;
    margin:0;
    flex:0 0 auto;
  }
  body.game-active .game-page .hand-status-row,
  body.game-active .game-page .hand{
    flex:0 0 auto;
  }
  body.game-active .game-page .players-top,
  body.game-active .game-page .players-side{
    min-width:0;
    min-height:0;
  }
  body.game-active .game-page .players-side{
    max-height:100%;
    justify-content:center;
  }
  body.game-active .game-page .player-role-status,
  body.game-active .game-page .player-decision-slot{
    max-width:100%;
  }
}
@media(max-width:720px) and (orientation:portrait){
  html.game-active,body.game-active{
    --live-header-h:clamp(42px,6svh,48px);
    height:100svh;
    min-height:100svh;
    max-height:100svh;
  }
  body.game-active .topbar{
    height:var(--live-header-h);
    min-height:var(--live-header-h);
    padding:clamp(3px,.8dvh,6px) clamp(6px,2vw,9px);
  }
  body.game-active .app-shell{
    height:calc(100svh - var(--live-header-h));
    max-height:calc(100svh - var(--live-header-h));
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  body.game-active .game-page{
    --card-w:clamp(44px,min(14vw,9dvh),62px);
    --card-h:calc(var(--card-w) * 1.3975);
    padding:clamp(3px,.9vw,5px);
    gap:clamp(3px,.8dvh,5px);
  }
  body.game-active .game-top{
    min-height:clamp(38px,5.6dvh,48px);
    padding:clamp(2px,.65dvh,5px) clamp(5px,1.8vw,8px);
    gap:clamp(4px,1.2vw,7px);
  }
  body.game-active .game-top>div:nth-child(2)>b{font-size:clamp(11px,3.2vw,14px)}
  body.game-active .game-top>div:nth-child(2)>span{font-size:clamp(8px,2.25vw,10px)}
  body.game-active .game-top-actions{gap:clamp(3px,1vw,5px)}
  body.game-active .game-top-actions .game-chat-toggle,
  body.game-active .game-top-actions .game-sound-toggle,
  body.game-active .game-top-actions .self-seat-control{
    height:clamp(34px,5dvh,38px);
    min-height:clamp(34px,5dvh,38px);
  }
  body.game-active .game-player-wrap{
    --player-status-slot-height:clamp(12px,3.7vw,16px);
    --player-decision-slot-height:clamp(24px,8.2vw,34px);
    gap:clamp(1px,.7vw,3px);
  }
  body.game-active .seated-table .players-top,
  body.game-active .seated-table .players-side{gap:clamp(2px,1.5vw,7px)}
  body.game-active .seated-table .game-player,
  body.game-active .seated-table .players-side .game-player{
    gap:clamp(2px,.8vw,4px);
    padding:clamp(2px,.8vw,5px);
  }
  body.game-active .seated-table .game-player .avatar-game,
  body.game-active .seated-table .players-side .avatar-game{
    width:clamp(18px,5.8vw,25px);
    height:clamp(18px,5.8vw,25px);
  }
  body.game-active .seated-table .game-player .player-username,
  body.game-active .seated-table .players-side .player-username{
    max-width:100%;
    font-size:clamp(8px,2.55vw,11px);
  }
  body.game-active .seated-table .game-player .player-card-count{
    font-size:clamp(7px,2vw,9px);
  }
  body.game-active .seated-table .game-player-wrap>.player-role-status,
  body.game-active .seated-table .players-side .player-role-status{
    font-size:clamp(8px,2.25vw,10px);
    line-height:1.1;
  }
  body.game-active .seated-table .player-decision-badge,
  body.game-active .seated-table.crowded-table .players-side .player-decision-badge{
    min-height:var(--player-decision-slot-height);
    padding:clamp(2px,.7vw,5px) clamp(4px,1.4vw,8px);
    font-size:clamp(10px,3.2vw,13px);
  }
  body.game-active .seated-table .draw-pile,
  body.game-active .seated-table .discard-pile,
  body.game-active .seated-table.six-player-table .draw-pile,
  body.game-active .seated-table.six-player-table .discard-pile{
    transform:none;
    height:calc(var(--card-h) + clamp(28px,7dvh,38px));
  }
  body.game-active .seated-table .pile{
    --card-w:clamp(38px,min(11vw,7.2dvh),52px);
    --card-h:calc(var(--card-w) * 1.3975);
    padding:clamp(2px,.7vw,4px) 1px;
    gap:2px;
  }
  body.game-active .seated-table .draw-stack{width:calc(var(--card-w) + clamp(14px,5vw,22px))}
  body.game-active .seated-table .draw-stack.has-hidden-deck .draw-trump-card{left:clamp(14px,5vw,22px)}
  body.game-active .game-page .hand-zone{gap:clamp(2px,.5dvh,4px)}
  body.game-active .hand-status-row{
    min-height:clamp(21px,3.6dvh,29px);
    margin:0;
    gap:clamp(4px,1.4vw,8px);
  }
  body.game-active .hand-hint,
  body.game-active .turn-timer{
    padding:clamp(3px,.65dvh,5px) clamp(6px,2vw,9px);
    font-size:clamp(9px,2.45vw,11px);
  }
  body.game-active .hand{
    width:100%;
    min-height:calc(var(--hand-h) + clamp(8px,1.6dvh,14px));
    padding:clamp(6px,1.3dvh,12px) clamp(6px,2vw,10px) clamp(3px,.7dvh,6px);
  }
  body.game-active .game-controls{
    min-height:clamp(36px,5.6dvh,44px);
    gap:clamp(6px,2vw,9px);
  }
  body.game-active .game-controls .btn{
    min-width:clamp(88px,29vw,120px);
    min-height:clamp(36px,5.6dvh,44px);
    padding:clamp(5px,.9dvh,8px) clamp(9px,3vw,14px);
    font-size:clamp(11px,3.15vw,13px);
  }
  body.game-active .game-page .pile{
    --card-w:clamp(38px,min(11vw,7.2dvh),52px);
    --card-h:calc(var(--card-w) * 1.3975);
  }
}
@media(min-width:721px) and (max-width:1100px) and (orientation:portrait){
  body.game-active .game-page .game-board{
    --player-safe-x:12px;
    --player-safe-top:10px;
  }
  body.game-active .game-page{
    --card-w:clamp(58px,min(8.5vw,8dvh),72px);
    --card-h:calc(var(--card-w) * 1.3975);
    --hand-w:clamp(63px,min(9.45vw,9dvh),79px);
    --hand-h:calc(var(--hand-w) * 1.3959);
  }
  body.game-active .game-page .game-board.seated-table{
    --side-seat-width:clamp(108px,16vw,148px);
    gap:clamp(8px,1.35vw,12px);
    padding:clamp(9px,1.4vw,12px);
    overflow:hidden;
  }
  body.game-active .game-page .hand-zone{gap:4px}
  body.game-active .game-page .hand{min-height:calc(var(--hand-h) + 16px);padding:10px 12px 6px}
  body.game-active .game-page .game-controls{min-height:42px}
  body.game-active .game-page .game-controls .btn{min-height:42px}
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .hand-zone{
    gap:clamp(1px,min(.55vw,.35dvh),4px);
  }
  body.game-active .game-page .hand-status-row{
    min-height:auto;
    gap:clamp(3px,1vw,6px);
  }
  body.game-active .game-page .hand-hint,
  body.game-active .game-page .turn-timer{
    padding:clamp(2px,.45dvh,4px) clamp(5px,1.8vw,8px);
    font-size:clamp(8px,min(2.4vw,1.8dvh),10px);
    line-height:1.1;
  }
  body.game-active .game-page .hand{
    min-height:calc(var(--hand-h) + clamp(5px,1.1dvh,9px));
    padding:clamp(4px,.9dvh,8px) clamp(5px,1.7vw,9px) clamp(2px,.45dvh,4px);
  }
  body.game-active .game-page .game-controls{
    min-height:auto;
    gap:clamp(4px,1.2vw,7px);
  }
  body.game-active .game-page .game-controls .btn{
    min-width:clamp(72px,24vw,96px);
    min-height:clamp(30px,min(8.5vw,5.8dvh),36px);
    padding:clamp(3px,.55dvh,5px) clamp(7px,2.2vw,10px);
    border-radius:8px;
    font-size:clamp(10px,min(3vw,2dvh),12px);
    line-height:1;
  }
  body.game-active .game-page .game-player-wrap{
    grid-template-rows:auto auto auto;
    gap:clamp(0px,min(.5vw,.28dvh),2px);
    min-height:0;
  }
  body.game-active .game-page .player-role-status{
    height:auto;
    min-height:0;
    padding:0 1px;
    overflow:visible;
    white-space:normal;
    text-overflow:clip;
    overflow-wrap:normal;
    font-size:clamp(7.5px,min(2.25vw,1.65dvh),9.5px);
    line-height:1.08;
  }
  body.game-active .game-page .player-role-status:empty,
  body.game-active .game-page .player-decision-slot:empty{
    display:none;
  }
  body.game-active .game-page .player-decision-slot{
    height:auto;
    min-height:0;
  }
  body.game-active .game-page .player-decision-slot .player-decision-badge,
  body.game-active .game-page .seated-table.crowded-table .players-side .player-decision-badge{
    width:min(90px,100%);
    min-height:clamp(22px,min(7.4vw,4.8dvh),30px);
    height:auto;
    padding:clamp(2px,.4dvh,4px) clamp(4px,1.3vw,7px);
    font-size:clamp(9px,min(2.9vw,1.9dvh),11px);
    line-height:1;
  }
  body.game-active .game-page .seated-table .game-player,
  body.game-active .game-page .seated-table .players-side .game-player,
  body.game-active .game-page .seated-table.crowded-table .players-side .game-player{
    gap:clamp(1px,.6vw,3px);
    padding:clamp(2px,min(.7vw,.45dvh),4px);
  }
  body.game-active .game-page .seated-table .game-player .avatar-game,
  body.game-active .game-page .seated-table .players-side .avatar-game,
  body.game-active .game-page .seated-table.crowded-table .players-side .avatar-game{
    width:clamp(16px,min(5.4vw,4.1dvh),22px);
    height:clamp(16px,min(5.4vw,4.1dvh),22px);
  }
  body.game-active .game-page .seated-table .game-player .player-username,
  body.game-active .game-page .seated-table .players-side .player-username,
  body.game-active .game-page .seated-table.crowded-table .players-side .player-username{
    max-width:100%;
    font-size:clamp(7.5px,min(2.45vw,1.75dvh),10px);
    line-height:1.08;
  }
  body.game-active .game-page .seated-table .game-player .player-card-count{
    font-size:clamp(6.5px,min(1.9vw,1.4dvh),8px);
    line-height:1.05;
  }
  body.game-active .game-page .pile{
    --phone-pile-card-w:clamp(34px,min(10.5vw,6.5dvh),48px);
    --card-w:var(--phone-pile-card-w);
    --card-h:calc(var(--phone-pile-card-w) * 1.3975);
    padding:clamp(2px,.4dvh,4px) 1px;
    gap:clamp(1px,.3dvh,3px);
  }
  body.game-active .game-page .pile>span{
    font-size:clamp(6.5px,min(1.85vw,1.35dvh),8px);
    line-height:1.05;
  }
  body.game-active .game-page .pile>b{
    font-size:clamp(7px,min(2vw,1.45dvh),9px);
    line-height:1;
  }
  body.game-active .game-page .draw-stack{
    width:calc(var(--card-w) + clamp(13px,4.5vw,20px));
  }
  body.game-active .game-page .draw-stack.has-hidden-deck .draw-trump-card{
    left:clamp(13px,4.5vw,20px);
  }
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .player-decision-slot .player-decision-badge,
  body.game-active .game-page .seated-table.crowded-table .players-side .player-decision-badge{
    min-height:clamp(19px,min(6.2vw,4dvh),25px);
    padding:clamp(1px,.25dvh,3px) clamp(3px,1vw,6px);
    font-size:clamp(8.5px,min(2.7vw,1.7dvh),10.5px);
  }
}
@media(max-width:720px) and (max-height:450px) and (orientation:portrait){
  body.game-active .game-page .pile{
    --phone-pile-card-w:clamp(30px,min(9.5vw,6dvh),38px);
    padding:1px;
    gap:1px;
  }
}
@media(max-width:720px) and (max-height:450px) and (orientation:portrait){
  body.game-active .game-page .player-decision-slot .player-decision-badge,
  body.game-active .game-page .seated-table.crowded-table .players-side .player-decision-badge{
    min-height:18px;
    padding:1px 3px;
    font-size:8.5px;
  }
}
body.game-active .game-page .game-board.seated-table .players-top,
body.game-active .game-page .game-board.seated-table .players-side{
  box-sizing:border-box;
}
body.game-active .game-page .game-board.seated-table .players-top,
body.game-active .game-page .game-board.seated-table .players-left,
body.game-active .game-page .game-board.seated-table .players-right{
  --chip-safe-inset:clamp(9px,2vw,16px);
}
body.game-active .game-page .game-board.seated-table .players-top{
  padding-top:var(--chip-safe-inset);
}
body.game-active .game-page .game-board.seated-table .players-left{
  padding-left:var(--chip-safe-inset);
}
body.game-active .game-page .game-board.seated-table .players-right{
  padding-right:var(--chip-safe-inset);
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .game-board.seated-table .game-player-wrap{
    --stable-player-status-h:clamp(11px,min(3.4vw,2.4dvh),16px);
    --stable-player-decision-h:clamp(14px,min(6.2vw,3.2dvh),25px);
    position:relative;
    grid-template-rows:auto var(--stable-player-status-h);
    align-content:start;
  }
  body.game-active .game-page .game-board.seated-table .players-side .game-player-wrap{
    --stable-player-status-h:clamp(18px,min(5.8vw,3.6dvh),24px);
  }
  body.game-active .game-page .game-board.seated-table .player-role-status,
  body.game-active .game-page .game-board.seated-table .player-role-status:empty{
    display:flex;
    width:100%;
    height:var(--stable-player-status-h);
    min-height:var(--stable-player-status-h);
    max-height:var(--stable-player-status-h);
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
  }
  body.game-active .game-page .game-board.seated-table .player-decision-slot,
  body.game-active .game-page .game-board.seated-table .player-decision-slot:empty{
    display:grid;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    width:100%;
    height:var(--stable-player-decision-h);
    min-height:var(--stable-player-decision-h);
    max-height:var(--stable-player-decision-h);
    place-items:start center;
    box-sizing:border-box;
    pointer-events:none;
  }
  body.game-active .game-page .game-board.seated-table .player-decision-slot .player-decision-badge{
    height:100%;
    min-height:0;
    max-height:100%;
    box-sizing:border-box;
  }
}
body.game-active .game-page .hand-zone>.game-controls:empty{
  display:none;
  min-height:0;
  height:0;
  margin:0;
  padding:0;
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .hand-zone>.game-controls,
  body.game-active .game-page .hand-zone>.game-controls:empty{
    display:flex;
    --stable-local-action-h:clamp(30px,min(8.5vw,5.8dvh),36px);
    min-height:var(--stable-local-action-h);
    height:var(--stable-local-action-h);
    flex:0 0 var(--stable-local-action-h);
    align-items:center;
    margin:0;
    padding:0;
  }
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .hand-finish-message,
  body.game-active .game-page .seated-table.six-player-table .hand-finish-message{
    min-height:0;
    height:auto;
    max-height:none;
    margin:0;
    padding:calc(clamp(2px,.45dvh,4px) - 1px) clamp(5px,1.8vw,8px);
    border-radius:999px;
    font-size:clamp(8px,min(2.4vw,1.8dvh),10px);
    line-height:1.1;
    transform:none;
    box-sizing:border-box;
  }
  body.game-active .game-page .game-over{
    padding:8px;
    box-sizing:border-box;
    overflow:hidden;
  }
  body.game-active .game-page .game-over-card{
    width:min(430px,100%);
    max-height:100%;
    padding:clamp(14px,4vw,20px);
    border-radius:18px;
    box-sizing:border-box;
    overflow:hidden;
  }
  body.game-active .game-page .game-over-card h2{
    margin:0 0 14px;
    font-size:18px;
    line-height:1.1;
  }
  body.game-active .game-page .game-over-card>p{
    margin:0 0 14px;
    font-size:17px;
    line-height:1.1;
  }
  body.game-active .game-page .result-summary{
    margin:0 0 14px;
    font-size:13px;
    line-height:1.1;
  }
  body.game-active .game-page .result-list{
    gap:6px;
    margin:0 0 18px;
  }
  body.game-active .game-page .result-row{
    min-height:0;
    gap:10px;
    padding:8px 10px;
    border-radius:11px;
    font-size:16px;
    line-height:1.1;
  }
  body.game-active .game-page .result-row b{
    font-size:inherit;
    line-height:inherit;
  }
  body.game-active .game-page .result-row>span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.game-active .game-page .result-actions{
    gap:7px;
    margin:0;
  }
  body.game-active .game-page .result-actions .btn{
    min-width:0;
    min-height:38px;
    padding:8px 14px;
    font-size:13px;
    line-height:1;
    white-space:nowrap;
  }
}
@media(max-width:720px) and (max-height:560px) and (orientation:portrait){
  body.game-active .game-page .game-over{
    padding:4px;
  }
  body.game-active .game-page .game-over-card{
    width:min(400px,90%);
    padding:clamp(7px,1.35dvh,10px);
  }
  body.game-active .game-page .game-over-card h2{
    margin-bottom:clamp(3px,.65dvh,5px);
    font-size:clamp(17px,3.25dvh,22px);
  }
  body.game-active .game-page .game-over-card>p,
  body.game-active .game-page .result-summary{
    margin-bottom:clamp(3px,.65dvh,5px);
  }
  body.game-active .game-page .game-over-card>p{
    font-size:clamp(13px,2.45dvh,17px);
  }
  body.game-active .game-page .result-summary{
    font-size:clamp(10px,1.9dvh,13px);
  }
  body.game-active .game-page .result-list{
    gap:clamp(2px,.4dvh,3px);
    margin-bottom:clamp(3px,.7dvh,5px);
  }
  body.game-active .game-page .result-row{
    padding:clamp(3px,.55dvh,4px) clamp(6px,1.8vw,8px);
    font-size:clamp(10px,2dvh,13px);
  }
  body.game-active .game-page .result-actions .btn{
    min-height:clamp(26px,4.5dvh,30px);
    padding:3px 7px;
    font-size:clamp(9.5px,1.8dvh,11px);
  }
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .hand-zone:has(.hand-finish-message) .hand{
    min-height:calc(var(--hand-h) + clamp(4px,.9dvh,8px) + clamp(2px,.45dvh,4px));
  }
}
@media(min-width:721px) and (max-width:1100px){
  body.game-active .game-page .hand-zone,
  body.game-active .game-page .hand,
  body.game-active .game-page .hand-row{
    width:100%;
    max-width:100%;
    min-width:0;
  }
}
@media(min-width:721px) and (max-width:1100px) and (min-height:501px) and (orientation:landscape){
  body.game-active .game-page{
    --hand-w:clamp(63px,min(7.65vw,10.8dvh),79px);
    --hand-h:calc(var(--hand-w) * 1.3959);
  }
  body.game-active .game-page .game-board.seated-table{
    grid-template-rows:auto minmax(0,1fr) auto auto;
  }
  body.game-active .game-page .seated-table .hand{
    min-height:calc(var(--hand-h) + 12px);
    padding:7px 12px 5px;
  }
}
body.game-active .game-page .draw-pile,
body.game-active .game-page .discard-pile{
  background:transparent;
  border-color:transparent;
}
body.game-active .game-page .draw-stack.has-hidden-deck .draw-trump-card{
  translate:8px 0;
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .seated-table .players-top .game-player-wrap{
    flex:0 0 clamp(100px,30vw,120px);
    max-width:clamp(100px,30vw,120px);
  }
  body.game-active .game-page .game-board:not(.seated-table) .players-ring{
    column-gap:clamp(10px,3vw,14px);
  }
  body.game-active .game-page .game-board:not(.seated-table) .players-ring>.game-player-wrap{
    flex:0 0 clamp(92px,27vw,108px);
    max-width:clamp(92px,27vw,108px);
  }
  body.game-active .game-page .game-board:not(.seated-table) .players-ring>.game-player-wrap>.player-decision-slot:not(:empty){
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:7;
    display:grid;
    width:100%;
    height:auto;
    min-height:0;
    place-items:start center;
    pointer-events:none;
  }
}
body.game-active .game-page .game-player-wrap .player-chat-bubble{
  position:absolute;
  left:50%;
  top:calc(100% - var(--player-decision-slot-height,38px));
  z-index:12;
  margin:0;
  transform:translateX(-50%);
  pointer-events:none;
}
body.game-active .game-page .draw-pile>b,
body.game-active .game-page .discard-pile>b{
  position:relative;
  top:4px;
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .game-player-wrap .player-chat-bubble{
    top:100%;
    font-size:9px;
  }
}
@media(max-width:390px) and (max-height:700px) and (orientation:portrait){
  body.game-active .game-page .game-player-wrap .player-chat-bubble{
    font-size:7px;
  }
}
@media(min-width:1101px),
       (min-width:721px) and (max-width:1100px) and (orientation:landscape){
  body.game-active .game-page .game-board:not(.seated-table)>.hand-zone>.game-controls{
    position:absolute;
    left:0;
    right:0;
    bottom:calc(100% + 4px);
    margin:0;
  }
  body.game-active .game-page .game-board:not(.seated-table):has(> .hand-zone)>.play-center{
    padding-bottom:52px;
    box-sizing:border-box;
  }
}
@media(min-width:1921px) and (min-height:1081px){
  :root{
    --desktop-shell-w:min(65.625vw,116.667vh);
    --desktop-lobby-shell-w:min(81.25vw,144.444vh);
    --desktop-board-h:min(37.5vw,66.667vh);
    --desktop-card-w:min(4.0625vw,7.222vh);
    --desktop-card-h:min(5.6771vw,10.093vh);
    --desktop-hand-w:min(4.5vw,8vh);
    --desktop-hand-h:min(6.2813vw,11.166vh);
    --desktop-chat-w:min(16.146vw,28.704vh);
    --desktop-gap-8:min(.4167vw,.741vh);
    --desktop-gap-12:min(.625vw,1.111vh);
    --desktop-gap-14:min(.7292vw,1.296vh);
  }
  .app-shell{
    width:var(--desktop-shell-w);
    margin:min(1.1458vw,2.037vh) auto min(2.9167vw,5.185vh);
  }
  body.lobby-active .app-shell{
    width:var(--desktop-lobby-shell-w);
    margin:min(.9375vw,1.667vh) auto min(2.5vw,4.444vh);
  }
  .topbar{
    min-height:min(2.9167vw,5.185vh);
    padding:min(.3125vw,.556vh) calc((100vw - var(--desktop-shell-w))/2);
  }
  body.lobby-active .topbar{
    padding-inline:calc((100vw - var(--desktop-lobby-shell-w))/2);
  }
  .brand{gap:min(.4167vw,.741vh)}
  .brand-card{
    width:min(1.5625vw,2.778vh);
    height:min(1.9792vw,3.519vh);
    border-radius:min(.4688vw,.833vh);
    font-size:min(.8854vw,1.574vh);
  }
  .brand strong{font-size:min(.7813vw,1.389vh)}
  .brand small{font-size:min(.4688vw,.833vh)}
  .nav{gap:min(.3125vw,.556vh)}
  .nav-item,.lang-select{
    padding:min(.3646vw,.648vh) min(.4688vw,.833vh);
    border-radius:min(.4688vw,.833vh);
    font-size:min(.6771vw,1.204vh);
  }
  .credit-pill{
    padding:min(.3125vw,.556vh) min(.4688vw,.833vh);
    font-size:min(.625vw,1.111vh);
  }
  .avatar-mini{width:min(1.6667vw,2.963vh);height:min(1.6667vw,2.963vh)}
  body.game-active .game-page{
    --card-w:var(--desktop-card-w);
    --card-h:var(--desktop-card-h);
    --hand-w:var(--desktop-hand-w);
    --hand-h:var(--desktop-hand-h);
    gap:var(--desktop-gap-8);
  }
  body.game-active .game-top{
    padding:min(.4167vw,.741vh) min(.5208vw,.926vh);
    border-radius:min(.625vw,1.111vh);
    gap:var(--desktop-gap-12);
  }
  body.game-active .game-top>div:nth-child(2)>b{font-size:min(.7292vw,1.296vh)}
  body.game-active .game-top span{font-size:min(.5208vw,.926vh)}
  body.game-active .game-top .back-link{
    width:min(1.5625vw,2.778vh);
    height:min(1.5625vw,2.778vh);
    border-radius:min(.4167vw,.741vh);
  }
  body.game-active .game-top-actions{gap:min(.4167vw,.741vh)}
  body.game-active .game-layout{
    grid-template-columns:minmax(0,1fr) var(--desktop-chat-w);
    gap:var(--desktop-gap-14);
  }
  body.game-active .game-board{
    min-height:var(--desktop-board-h);
    --table-rim:min(.3646vw,.648vh);
    --player-safe-x:clamp(14px,min(.7vw,1.2vh),22px);
    --player-safe-top:clamp(12px,min(.55vw,1vh),20px);
    border-radius:min(1.6667vw,2.963vh);
  }
  body.game-active .game-board:after{
    inset:min(.15625vw,.278vh);
    border-radius:min(.8333vw,1.481vh);
  }
  body.game-active .game-board:not(.seated-table) .players-ring{
    top:min(.9375vw,1.667vh);
    gap:min(.4167vw,.741vh);
  }
  body.game-active .game-board:not(.seated-table) .players-ring>.game-player-wrap{
    max-width:min(9.375vw,16.667vh);
  }
  body.game-active .game-page .play-center{
    grid-template-columns:minmax(min(8.333vw,14.815vh),min(11.458vw,20.37vh)) minmax(0,1fr) minmax(min(8.333vw,14.815vh),min(11.458vw,20.37vh));
    gap:min(.8333vw,1.481vh);
  }
  body.game-active .battlefield{
    min-height:min(13.021vw,23.148vh);
    gap:min(.9375vw,1.667vh);
  }
  body.game-active .battle-pair{
    width:calc(var(--card-w) + min(1.25vw,2.222vh));
    height:calc(var(--card-h) + min(1.3542vw,2.407vh));
    border-radius:min(.7292vw,1.296vh);
  }
  body.game-active .battle-pair .defense-card{
    left:min(1.25vw,2.222vh);
    top:min(1.1458vw,2.037vh);
  }
  body.game-active .game-player-wrap{
    --player-status-slot-height:min(.8333vw,1.481vh);
    --player-decision-slot-height:min(1.9792vw,3.519vh);
    gap:min(.2083vw,.37vh);
  }
  body.game-active .game-player{
    gap:min(.3646vw,.648vh);
    padding:min(.2604vw,.463vh) min(.4167vw,.741vh);
    border-radius:min(.625vw,1.111vh);
  }
  body.game-active .game-player .avatar-game{
    width:min(1.5625vw,2.778vh);
    height:min(1.5625vw,2.778vh);
  }
  body.game-active .game-player b{
    max-width:min(5.2083vw,9.259vh);
    font-size:min(.625vw,1.111vh);
  }
  body.game-active .game-player small{font-size:min(.5208vw,.926vh)}
  body.game-active .player-role-status{font-size:min(.625vw,1.111vh)}
  body.game-active .player-decision-badge{
    min-width:min(3.6458vw,6.481vh);
    min-height:min(1.6667vw,2.963vh);
    padding:min(.3125vw,.556vh) min(.7292vw,1.296vh);
    border-radius:min(.5208vw,.926vh);
    font-size:min(.6771vw,1.204vh);
  }
  body.game-active .game-page .game-board.seated-table{
    --side-seat-width:min(7.7083vw,13.704vh);
    gap:var(--desktop-gap-12);
    padding:var(--desktop-gap-12);
  }
  body.game-active .seated-table .game-player-wrap{
    max-width:min(9.375vw,16.667vh);
    gap:min(.2083vw,.37vh);
  }
  body.game-active .seated-table .players-top{gap:var(--desktop-gap-12)}
  body.game-active .seated-table .players-top .game-player-wrap{flex-basis:min(8.9583vw,15.926vh)}
  body.game-active .seated-table .players-side{gap:var(--desktop-gap-12)}
  body.game-active .seated-table .game-player{
    gap:min(.2083vw,.37vh) min(.3646vw,.648vh);
    padding:min(.3125vw,.556vh) min(.4167vw,.741vh);
  }
  body.game-active .seated-table .game-player .avatar-game{
    width:min(1.5625vw,2.778vh);
    height:min(1.5625vw,2.778vh);
  }
  body.game-active .seated-table .game-player .player-username{
    max-width:min(5.8333vw,10.37vh);
    font-size:min(.625vw,1.111vh);
  }
  body.game-active .seated-table .game-player .player-card-count{font-size:min(.5729vw,1.019vh)}
  body.game-active .seated-table .game-player-wrap>.player-role-status{font-size:min(.5729vw,1.019vh)}
  body.game-active .seated-table .player-decision-badge{width:min(min(4.7917vw,8.519vh),100%)}
  body.game-active .seated-table .draw-stack{width:calc(var(--card-w) + min(1.25vw,2.222vh))}
  body.game-active .seated-table .draw-stack.has-hidden-deck .draw-trump-card{left:min(1.25vw,2.222vh)}
  body.game-active .seated-table .battlefield{
    padding:min(.3125vw,.556vh);
    gap:min(.5208vw,.926vh);
  }
  body.game-active .hand{
    min-height:calc(var(--hand-h) + min(1.5625vw,2.778vh));
    padding:min(.9375vw,1.667vh) min(.9375vw,1.667vh) min(.2604vw,.463vh);
  }
  body.game-active .hand-card-slot{
    margin-left:max(-1.6146vw,-2.87vh);
  }
  body.game-active .hand-row+.hand-row{margin-top:max(-3.125vw,-5.556vh)}
  body.game-active .hand .playing-card.selected,
  body.game-active .hand .playing-card:focus-visible{--hand-lift:max(-.7292vw,-1.296vh)}
  body.game-active .hand-hint{
    padding:min(.2604vw,.463vh) min(.5208vw,.926vh);
    border-radius:min(.5208vw,.926vh);
    font-size:min(.5729vw,1.019vh);
  }
  body.game-active .turn-timer{
    min-width:min(2.7083vw,4.815vh);
    padding:min(.2604vw,.463vh) min(.4167vw,.741vh);
    border-radius:min(.4167vw,.741vh);
    font-size:min(.5729vw,1.019vh);
  }
  body.game-active .game-controls{
    min-height:min(2.2917vw,4.074vh);
    gap:min(.3125vw,.556vh);
  }
  body.game-active .game-controls .btn{
    min-width:min(5.4167vw,9.63vh);
    min-height:min(2.0833vw,3.704vh);
    border-radius:min(.4688vw,.833vh);
    font-size:min(.6771vw,1.204vh);
  }
  body.game-active .pile{
    padding:min(.4167vw,.741vh) min(.2083vw,.37vh) min(.3646vw,.648vh);
    border-radius:min(.7292vw,1.296vh);
    gap:min(.2604vw,.463vh);
  }
  body.game-active .pile>span{font-size:min(.4688vw,.833vh)}
  body.game-active .pile>b{font-size:min(.5729vw,1.019vh)}
  body.game-active .pile .draw-stack{width:calc(var(--card-w) + min(2.5vw,4.444vh))}
  body.game-active .game-chat-shell>.chat-panel{
    font-size:min(.7292vw,1.296vh);
  }
  body.game-active .chat-msg{gap:min(.4167vw,.741vh);padding:min(.4167vw,.741vh)}
  body.game-active .chat-msg b{font-size:min(.5729vw,1.019vh)}
  body.game-active .chat-msg>div span{font-size:min(.625vw,1.111vh)}
  body.game-active .chat-msg small{font-size:min(.4688vw,.833vh)}
  body.game-active .chat-form{
    gap:min(.3646vw,.648vh);
    margin-top:min(.5208vw,.926vh);
  }
  body.game-active .chat-form .input,
  body.game-active .chat-form .btn{
    height:min(1.9792vw,3.519vh);
    min-height:min(1.9792vw,3.519vh);
    font-size:min(.625vw,1.111vh);
  }
  body.lobby-active .lobby-main{gap:min(.7813vw,1.389vh)}
  body.lobby-active .lobby-hero{
    min-height:min(15vw,26.667vh);
    padding:min(2.5vw,4.444vh);
    border-radius:min(1.1458vw,2.037vh);
  }
  body.lobby-active .lobby-hero-copy{width:100%}
  body.lobby-active .lobby-hero-copy::before{width:min(5.4167vw,9.63vh)}
  body.lobby-active .lobby-hero h1::before{width:min(5.2604vw,9.352vh)}
  body.lobby-active .lobby-hero h1::after{width:min(5.4688vw,9.722vh)}
  body.lobby-active .lobby-hero-copy::after{
    width:min(6.6667vw,11.852vh);
    height:min(9.1667vw,16.296vh);
    background-position:min(1.7708vw,3.148vh) 0,min(1.1979vw,2.13vh) min(.2604vw,.463vh),min(.625vw,1.111vh) min(.5208vw,.926vh),min(.1042vw,.185vh) min(.7813vw,1.389vh);
    background-size:min(4.5833vw,8.148vh) auto;
  }
  body.lobby-active .lobby-hero h1{
    margin:min(.3646vw,.648vh) 0 min(.5208vw,.926vh);
    font-size:min(3.5417vw,6.296vh);
  }
  body.lobby-active .lobby-hero p{
    max-width:min(29.1667vw,51.852vh);
    margin:0 0 min(1.1458vw,2.037vh);
    font-size:min(.8854vw,1.574vh);
  }
  body.lobby-active .lobby-create-button{
    min-height:min(2.4479vw,4.352vh);
    padding:min(.5729vw,1.019vh) min(.9896vw,1.759vh);
    font-size:min(.7292vw,1.296vh);
  }
  body.lobby-active .lobby-filter-bar{
    gap:min(.7292vw,1.296vh);
    padding:min(.2604vw,.463vh) min(.0521vw,.093vh) min(.1042vw,.185vh);
  }
  body.lobby-active .lobby-filters{gap:min(.3646vw,.648vh)}
  body.lobby-active .lobby-filter{
    min-height:min(1.7708vw,3.148vh);
    padding:min(.3125vw,.556vh) min(.6771vw,1.204vh);
    font-size:min(.625vw,1.111vh);
  }
  body.lobby-active .lobby-result-controls{
    gap:min(.8333vw,1.481vh);
    font-size:min(.625vw,1.111vh);
  }
  body.lobby-active .lobby-result-controls>b{font-size:min(.6771vw,1.204vh)}
  body.lobby-active .lobby-table-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(25vw,44.444vh),1fr));
    gap:min(.5729vw,1.019vh);
  }
  body.lobby-active .lobby-table-card{
    min-height:min(7.6042vw,13.519vh);
    grid-template-columns:min(5.4167vw,9.63vh) minmax(0,1fr) min(5.3125vw,9.444vh);
    gap:min(.6771vw,1.204vh);
    padding:min(.6771vw,1.204vh);
    border-radius:min(.9375vw,1.667vh);
  }
  body.lobby-active .lobby-table-thumb{
    width:min(5.4167vw,9.63vh);
    height:min(5.8333vw,10.37vh);
    border-radius:min(.7292vw,1.296vh);
  }
  body.lobby-active .lobby-table-number{
    left:min(.3646vw,.648vh);
    top:min(.3646vw,.648vh);
    padding:min(.2083vw,.37vh) min(.3646vw,.648vh);
    border-radius:min(.4688vw,.833vh);
    font-size:min(.4688vw,.833vh);
  }
  body.lobby-active .lobby-table-card-back,
  body.lobby-active .lobby-table-trump-ace{
    width:min(3.0208vw,5.37vh);
    height:min(4.2188vw,7.5vh);
    border-radius:min(.3125vw,.556vh);
  }
  body:not(.game-active):not(.lobby-active){font-size:min(.8333vw,1.481vh)}
  body:not(.game-active):not(.lobby-active) .panel{padding:min(1.0417vw,1.852vh)}
  body:not(.game-active):not(.lobby-active) h1{font-size:min(1.9792vw,3.519vh)}
  body:not(.game-active):not(.lobby-active) h2{font-size:min(.9375vw,1.667vh)}
}
body.game-active .game-page .game-player-wrap{
  --live-chip-width:clamp(124px,9vw,162px);
  --live-chip-height:42px;
  --live-chip-avatar:52px;
  --live-chip-avatar-left:-7px;
  --live-chip-role:19px;
  --live-chip-role-overlap:14px;
  --live-chip-bot-marker:13px;
  width:var(--live-chip-width);
  max-width:var(--live-chip-width);
}
body.game-active .game-page .players-side .game-player-wrap{
  width:100%;
  max-width:100%;
}
body.game-active .game-page .game-player{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  height:var(--live-chip-height);
  min-height:var(--live-chip-height);
  padding:5px 9px 5px calc(var(--live-chip-avatar) - 2px);
  overflow:visible;
  border:1px solid rgba(190,207,199,.17);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 42%),
    rgba(9,14,12,.91);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 5px 12px rgba(1,6,4,.24);
  backdrop-filter:blur(7px);
}
body.game-active .game-page .game-player.attacker{
  border-color:rgba(255,103,129,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 0 0 2px rgba(255,103,129,.2),
    0 0 11px rgba(244,71,102,.23),
    0 5px 12px rgba(1,6,4,.24);
}
body.game-active .game-page .game-player.co-attacker{
  border-color:rgba(240,163,74,.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 0 0 2px rgba(240,163,74,.22),
    0 0 11px rgba(221,128,37,.25),
    0 5px 12px rgba(1,6,4,.24);
}
body.game-active .game-page .game-player.defender{
  border-color:rgba(91,166,250,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 0 0 2px rgba(91,166,250,.21),
    0 0 11px rgba(50,136,235,.24),
    0 5px 12px rgba(1,6,4,.24);
}
body.game-active .game-page .game-player .avatar-game{
  position:absolute;
  left:var(--live-chip-avatar-left);
  top:50%;
  z-index:2;
  width:var(--live-chip-avatar);
  height:var(--live-chip-avatar);
  transform:translateY(-50%);
  border:2px solid #87928e;
  border-radius:50%;
  background:#26312d;
  box-shadow:
    0 0 0 2px #0d1310,
    0 0 0 3px rgba(210,221,216,.38),
    0 4px 11px rgba(0,0,0,.4);
}
body.game-active .game-page .player-turn-countdown{
  position:absolute;
  left:calc(var(--live-chip-avatar-left) - 2px);
  top:50%;
  z-index:3;
  width:calc(var(--live-chip-avatar) + 4px);
  height:calc(var(--live-chip-avatar) + 4px);
  transform:translateY(-50%);
  pointer-events:none;
  transition:opacity .15s linear;
}
body.game-active .game-page .player-turn-countdown svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.3));
}
body.game-active .game-page .player-turn-countdown circle{
  fill:none;
  stroke:rgba(255,255,255,.96);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:var(--turn-offset,0);
  transform:scaleX(-1) rotate(-90deg);
  transform-origin:50% 50%;
  transition:stroke-dashoffset .25s linear;
}
body.game-active .game-page .game-player.attacker .avatar-game{
  border-color:#ff6d86;
  box-shadow:
    0 0 0 2px #180c10,
    0 0 0 3px rgba(255,103,129,.78),
    0 0 12px rgba(244,71,102,.42),
    0 4px 11px rgba(0,0,0,.42);
}
body.game-active .game-page .game-player.co-attacker .avatar-game{
  border-color:#f0a34a;
  box-shadow:
    0 0 0 2px #1b1107,
    0 0 0 3px rgba(240,163,74,.82),
    0 0 12px rgba(221,128,37,.44),
    0 4px 11px rgba(0,0,0,.42);
}
body.game-active .game-page .game-player.defender .avatar-game{
  border-color:#63adff;
  box-shadow:
    0 0 0 2px #09121b,
    0 0 0 3px rgba(91,166,250,.82),
    0 0 12px rgba(50,136,235,.44),
    0 4px 11px rgba(0,0,0,.42);
}
body.game-active .game-page .game-player .player-identity{
  display:flex;
  min-width:0;
  height:100%;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}
body.game-active .game-page .game-player .player-username,
body.game-active .game-page .game-player b.player-username{
  display:block;
  max-width:100%;
  overflow:hidden;
  color:#f5f7f6;
  font-size:12px;
  font-weight:700;
  line-height:1.12;
  letter-spacing:.005em;
  text-overflow:ellipsis;
  transform:translateX(5px);
  white-space:nowrap;
}
body.game-active .game-page .game-player .player-card-meta{
  display:flex;
  min-width:0;
  align-items:center;
  gap:5px;
  color:#d7dfdb;
  line-height:1;
  white-space:nowrap;
}
body.game-active .game-page .game-player .player-card-count{
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:4px;
  color:#d7dfdb;
  font-size:11px;
  font-weight:650;
  line-height:1;
}
body.game-active .game-page .player-card-icon{
  width:11px;
  height:13px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.game-active .game-page .player-role-badge{
  position:absolute;
  left:calc(var(--live-chip-avatar-left) + var(--live-chip-avatar) - var(--live-chip-role-overlap));
  top:-4px;
  z-index:4;
  width:var(--live-chip-role);
  height:var(--live-chip-role);
  display:grid;
  place-items:center;
  border:2px solid #919b97;
  border-radius:50%;
  background:#121916;
  color:#f8faf9;
  box-shadow:0 2px 6px rgba(0,0,0,.46);
  pointer-events:none;
}
body.game-active .game-page .player-role-badge svg{
  width:68%;
  height:68%;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.game-active .game-page .player-role-badge circle{
  fill:currentColor;
  stroke:none;
}
body.game-active .game-page .player-role-attacker{
  border-color:#ff6d86;
  background:#271016;
  box-shadow:0 0 0 1px rgba(255,105,132,.2),0 2px 7px rgba(0,0,0,.5);
}
body.game-active .game-page .player-role-co-attacker{
  border-color:#f0a34a;
  background:#2a1b0d;
  box-shadow:0 0 0 1px rgba(240,163,74,.22),0 2px 7px rgba(0,0,0,.5);
}
body.game-active .game-page .player-role-defender{
  border-color:#63adff;
  background:#0e1925;
  box-shadow:0 0 0 1px rgba(91,166,250,.2),0 2px 7px rgba(0,0,0,.5);
}
body.game-active .game-page .player-role-bot{
  border-color:#9da7a3;
  background:#151b19;
}
body.game-active .game-page .player-bot-trigger{
  appearance:none;
  -webkit-appearance:none;
  margin:0;
  padding:0;
  font:inherit;
  line-height:1;
  cursor:pointer;
  pointer-events:auto;
}
body.game-active .game-page .player-bot-marker{
  position:absolute;
  left:calc(var(--live-chip-avatar-left) + var(--live-chip-avatar) - var(--live-chip-role-overlap));
  bottom:-4px;
  z-index:3;
  width:var(--live-chip-bot-marker);
  height:var(--live-chip-bot-marker);
  display:grid;
  place-items:center;
  border:1px solid #9da7a3;
  border-radius:50%;
  background:#151b19;
  color:#f8faf9;
  box-shadow:0 2px 6px rgba(0,0,0,.46);
}
body.game-active .game-page .player-bot-marker svg{
  width:68%;
  height:68%;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.game-active .game-page .player-bot-marker circle{
  fill:currentColor;
  stroke:none;
}
body.game-active .game-page .player-bot-tooltip{
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  padding:3px 7px;
  border-radius:6px;
  background:#0e1512;
  color:#f5f7f6;
  font-size:11px;
  font-weight:650;
  line-height:1.3;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s ease;
}
body.game-active .game-page .player-bot-trigger:hover .player-bot-tooltip,
body.game-active .game-page .player-bot-trigger:focus .player-bot-tooltip,
body.game-active .game-page .player-bot-trigger:focus-visible .player-bot-tooltip{
  opacity:1;
  visibility:visible;
}
body.game-active .game-page .seated-table .players-left .player-bot-tooltip{
  top:50%;
  left:calc(100% + 8px);
  transform:translateY(-50%);
}
body.game-active .game-page .seated-table .players-right .player-bot-tooltip{
  top:50%;
  left:auto;
  right:calc(100% + 8px);
  transform:translateY(-50%);
}
@media(max-width:1100px) and (orientation:landscape){
  body.game-active .game-page .game-player-wrap{
    --live-chip-width:clamp(104px,14vw,132px);
    --live-chip-height:31px;
    --live-chip-avatar:39px;
    --live-chip-avatar-left:-5px;
    --live-chip-role:15px;
    --live-chip-role-overlap:11px;
    --live-chip-bot-marker:12px;
  }
  body.game-active .game-page .game-player{
    padding:3px 6px 3px calc(var(--live-chip-avatar) - 2px);
  }
  body.game-active .game-page .game-player .player-username,
  body.game-active .game-page .game-player b.player-username{font-size:10px}
  body.game-active .game-page .game-player .player-card-count{font-size:9px}
  body.game-active .game-page .player-card-icon{width:9px;height:11px}
  body.game-active .game-page .player-role-badge{top:-3px}
  body.game-active .game-page .player-bot-marker{bottom:-3px}
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .game-player-wrap{
    --live-chip-width:clamp(92px,27vw,120px);
    --live-chip-height:27px;
    --live-chip-avatar:35px;
    --live-chip-avatar-left:-4px;
    --live-chip-role:14px;
    --live-chip-role-overlap:10px;
    --live-chip-bot-marker:11px;
    width:var(--live-chip-width);
    max-width:var(--live-chip-width);
  }
  body.game-active .game-page .seated-table .players-top .game-player-wrap{
    width:clamp(100px,30vw,120px);
    max-width:clamp(100px,30vw,120px);
  }
  body.game-active .game-page .players-side .game-player-wrap{
    width:100%;
    max-width:100%;
  }
  body.game-active .game-page .game-player,
  body.game-active .game-page .seated-table .game-player,
  body.game-active .game-page .seated-table .players-side .game-player,
  body.game-active .game-page .seated-table.crowded-table .players-side .game-player{
    display:block;
    height:var(--live-chip-height);
    min-height:var(--live-chip-height);
    padding:2px 4px 2px calc(var(--live-chip-avatar) - 3px);
    border-radius:999px;
  }
  body.game-active .game-page .game-player .avatar-game,
  body.game-active .game-page .seated-table .game-player .avatar-game,
  body.game-active .game-page .seated-table .players-side .avatar-game,
  body.game-active .game-page .seated-table.crowded-table .players-side .avatar-game{
    left:var(--live-chip-avatar-left);
    top:50%;
    width:var(--live-chip-avatar);
    height:var(--live-chip-avatar);
  }
  body.game-active .game-page .game-player .player-identity,
  body.game-active .game-page .seated-table .players-side .player-identity{
    display:flex;
    height:100%;
  }
  body.game-active .game-page .game-player .player-username,
  body.game-active .game-page .game-player b.player-username,
  body.game-active .game-page .seated-table .players-side .player-username{
    max-width:100%;
    font-size:clamp(8px,2.45vw,10px);
    line-height:1.05;
  }
  body.game-active .game-page .game-player .player-card-meta,
  body.game-active .game-page .seated-table .players-side .player-card-meta{
    display:flex;
    gap:3px;
  }
  body.game-active .game-page .game-player .player-card-count,
  body.game-active .game-page .seated-table .game-player .player-card-count{
    font-size:clamp(7px,2vw,8.5px);
    transform:translateX(4px);
  }
  body.game-active .game-page .player-card-icon{width:8px;height:9px;stroke-width:1.7}
  body.game-active .game-page .player-role-badge{top:-3px;border-width:1.5px}
  body.game-active .game-page .player-bot-marker{bottom:-3px;border-width:1.5px}
}
@media(max-width:430px) and (orientation:portrait){
  body.game-active .game-page .game-player-wrap{
    --live-chip-height:25px;
    --live-chip-avatar:32px;
    --live-chip-role:13px;
    --live-chip-role-overlap:9px;
    --live-chip-bot-marker:10px;
  }
  body.game-active .game-page .game-player,
  body.game-active .game-page .seated-table .game-player,
  body.game-active .game-page .seated-table .players-side .game-player{
    padding-right:3px;
    padding-left:calc(var(--live-chip-avatar) - 3px);
  }
}
@media(min-width:1921px) and (min-height:1081px){
  body.game-active .game-page .game-player-wrap{
    --live-chip-width:min(8.4375vw,15vh);
    --live-chip-height:min(2.1875vw,3.889vh);
    --live-chip-avatar:min(2.7083vw,4.815vh);
    --live-chip-avatar-left:max(-.3646vw,-.648vh);
    --live-chip-role:min(.9896vw,1.759vh);
    --live-chip-role-overlap:min(.7292vw,1.296vh);
    --live-chip-bot-marker:min(.6771vw,1.204vh);
  }
  body.game-active .game-page .game-player{
    padding:min(.2604vw,.463vh) min(.4688vw,.833vh) min(.2604vw,.463vh) calc(var(--live-chip-avatar) - min(.1042vw,.185vh));
  }
  body.game-active .game-page .game-player .player-identity{gap:min(.1042vw,.185vh)}
  body.game-active .game-page .game-player .player-username,
  body.game-active .game-page .game-player b.player-username{font-size:min(.625vw,1.111vh)}
  body.game-active .game-page .game-player .player-card-count{gap:min(.2083vw,.37vh);font-size:min(.5729vw,1.019vh)}
  body.game-active .game-page .player-card-icon{width:min(.5729vw,1.019vh);height:min(.6771vw,1.204vh)}
  body.game-active .game-page .player-role-badge{top:max(-.2083vw,-.37vh)}
  body.game-active .game-page .player-bot-marker{bottom:max(-.2083vw,-.37vh)}
}
body.game-active .game-page .game-board:not(.seated-table)>.players-ring{
  justify-content:center;
  column-gap:clamp(24px,4vw,44px);
}
@media(min-width:1101px), (orientation:landscape){
  body.game-active .game-page .game-board:not(.seated-table)>.players-ring{
    top:clamp(14px,2.5vh,22px);
  }
}
@media(max-width:1100px) and (orientation:portrait){
  body.game-active .game-page .game-board:not(.seated-table)>.players-ring{
    padding-top:clamp(6px,1.5dvh,10px);
  }
}
body.game-active .game-page .game-board.seated-table.crowded-table:not(.six-player-table) .players-top{
  justify-content:center;
  column-gap:clamp(24px,4vw,44px);
  padding-top:calc(var(--chip-safe-inset) + 5px);
}
body.game-active .game-page .game-board.seated-table{
  --pile-to-card-line:clamp(50px,6.5dvh,56px);
}
body.game-active .game-page .game-board.seated-table .draw-pile,
body.game-active .game-page .game-board.seated-table .discard-pile{
  height:calc(var(--card-h) + 26px);
  align-content:center;
  transform:translateY(var(--pile-to-card-line));
  z-index:7;
}
body.game-active .game-page .game-board.seated-table.crowded-table:not(.six-player-table) .players-top{
  --five-top-seat-width:172px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,var(--five-top-seat-width)));
  justify-content:center;
  justify-items:stretch;
  column-gap:clamp(96px,12vw,168px);
}
body.game-active .game-page .game-board.seated-table.crowded-table:not(.six-player-table) .players-top .game-player-wrap{
  width:100%;
  max-width:100%;
}
body.game-active .game-page .game-board.seated-table.six-player-table .players-side{
  transform:translateY(10%);
}
body.game-active .game-page .game-player-wrap{
  --live-chip-width:82px;
  --live-chip-height:62px;
  --live-chip-avatar:62px;
  --live-chip-avatar-left:0px;
  width:var(--live-chip-width);
  max-width:var(--live-chip-width);
  justify-items:center;
}
body.game-active .game-page .players-top .game-player-wrap,
body.game-active .game-page .players-side .game-player-wrap,
body.game-active .game-page .spectator-seat-bottom .game-player-wrap,
body.game-active .game-page .game-board.seated-table.crowded-table:not(.six-player-table) .players-top .game-player-wrap{
  width:var(--live-chip-width);
  max-width:var(--live-chip-width);
  justify-self:center;
  flex-basis:var(--live-chip-width);
}
body.game-active .game-page .players-side{
  align-items:center;
}
body.game-active .game-page .game-board.seated-table.six-player-table .players-side .game-player-wrap{
  transform:translateY(-10%);
}
body.game-active .game-page .game-board.seated-table.six-player-table .players-top .game-player-wrap{
  transform:translateY(10px);
}
body.game-active .game-page .game-player,
body.game-active .game-page .seated-table .game-player,
body.game-active .game-page .seated-table .players-side .game-player,
body.game-active .game-page .seated-table.crowded-table .players-side .game-player{
  position:relative;
  display:block;
  width:var(--live-chip-avatar);
  min-width:var(--live-chip-avatar);
  max-width:var(--live-chip-avatar);
  height:var(--live-chip-avatar);
  min-height:var(--live-chip-avatar);
  margin-inline:auto;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
body.game-active .game-page .game-player.attacker,
body.game-active .game-page .game-player.co-attacker,
body.game-active .game-page .game-player.defender{
  border:0;
  background:transparent;
  box-shadow:none;
}
body.game-active .game-page .game-player .avatar-game,
body.game-active .game-page .seated-table .game-player .avatar-game,
body.game-active .game-page .seated-table .players-side .avatar-game,
body.game-active .game-page .seated-table.crowded-table .players-side .avatar-game{
  left:0;
  top:50%;
  width:var(--live-chip-avatar);
  height:var(--live-chip-avatar);
}
body.game-active .game-page .game-player .player-identity,
body.game-active .game-page .seated-table .players-side .player-identity{
  display:contents;
  width:auto;
  height:auto;
}
body.game-active .game-page .game-player .player-username,
body.game-active .game-page .game-player b.player-username,
body.game-active .game-page .seated-table .players-side .player-username{
  position:absolute;
  left:50%;
  bottom:calc(100% + 5px);
  z-index:5;
  width:max-content;
  max-width:calc(var(--live-chip-width) + 28px);
  overflow:hidden;
  color:#f5f7f6;
  font-size:12px;
  font-weight:700;
  line-height:1.05;
  text-align:center;
  text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,.72);
  transform:translateX(-50%);
  white-space:nowrap;
}
body.game-active .game-page .game-player .player-card-meta,
body.game-active .game-page .seated-table .players-side .player-card-meta{
  position:absolute;
  left:-8px;
  top:50%;
  z-index:5;
  display:flex;
  min-width:0;
  padding:3px 5px;
  align-items:center;
  border:1px solid rgba(196,211,203,.38);
  border-radius:999px;
  background:rgba(10,18,14,.92);
  box-shadow:0 2px 6px rgba(0,0,0,.28);
  transform:translate(-50%,-50%);
}
body.game-active .game-page .game-player .player-card-count,
body.game-active .game-page .seated-table .game-player .player-card-count{
  gap:3px;
  color:#f1f5f3;
  font-size:10px;
  font-weight:750;
  transform:none;
}
body.game-active .game-page .player-card-icon{
  width:9px;
  height:11px;
}
body.game-active .game-page .player-role-badge{
  left:auto;
  right:-4px;
  top:-4px;
}
body.game-active .game-page .player-bot-marker{
  left:auto;
  right:-3px;
  bottom:-3px;
}
body.game-active .game-page .player-turn-countdown{
  left:-2px;
}
body.game-active .game-page .player-role-status{
  width:100%;
  text-align:center;
}
@media(max-width:1100px) and (orientation:landscape){
  body.game-active .game-page .game-player-wrap{
    --live-chip-width:63px;
    --live-chip-height:47px;
    --live-chip-avatar:47px;
    --live-chip-avatar-left:0px;
  }
  body.game-active .game-page .game-player .player-username,
  body.game-active .game-page .game-player b.player-username,
  body.game-active .game-page .seated-table .players-side .player-username{
    bottom:calc(100% + 3px);
    max-width:calc(var(--live-chip-width) + 22px);
    font-size:10px;
  }
  body.game-active .game-page .game-player .player-card-meta,
  body.game-active .game-page .seated-table .players-side .player-card-meta{
    left:-6px;
    padding:2px 4px;
  }
  body.game-active .game-page .game-player .player-card-count,
  body.game-active .game-page .seated-table .game-player .player-card-count{font-size:9px}
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .game-player-wrap{
    --live-chip-width:58px;
    --live-chip-height:42px;
    --live-chip-avatar:42px;
    --live-chip-avatar-left:0px;
    width:var(--live-chip-width);
    max-width:var(--live-chip-width);
  }
  body.game-active .game-page .seated-table .players-top .game-player-wrap,
  body.game-active .game-page .players-side .game-player-wrap{
    width:var(--live-chip-width);
    max-width:var(--live-chip-width);
  }
  body.game-active .game-page .game-player .player-username,
  body.game-active .game-page .game-player b.player-username,
  body.game-active .game-page .seated-table .players-side .player-username{
    bottom:calc(100% + 2px);
    max-width:calc(var(--live-chip-width) + 18px);
    font-size:clamp(8px,2.45vw,10px);
  }
  body.game-active .game-page .game-player .player-card-meta,
  body.game-active .game-page .seated-table .players-side .player-card-meta{
    left:-5px;
    padding:2px 3px;
  }
  body.game-active .game-page .game-player .player-card-count,
  body.game-active .game-page .seated-table .game-player .player-card-count{
    gap:2px;
    font-size:clamp(7px,2vw,8.5px);
  }
  body.game-active .game-page .player-card-icon{width:8px;height:9px}
}
@media(max-width:430px) and (orientation:portrait){
  body.game-active .game-page .game-player-wrap{
    --live-chip-width:54px;
    --live-chip-height:38px;
    --live-chip-avatar:38px;
  }
}
@media(min-width:1921px) and (min-height:1081px){
  body.game-active .game-page .game-player-wrap{
    --live-chip-width:min(4.2708vw,7.593vh);
    --live-chip-height:min(3.25vw,5.778vh);
    --live-chip-avatar:min(3.25vw,5.778vh);
    --live-chip-avatar-left:0px;
  }
  body.game-active .game-page .game-player .player-username,
  body.game-active .game-page .game-player b.player-username,
  body.game-active .game-page .seated-table .players-side .player-username{
    bottom:calc(100% + min(.2604vw,.463vh));
    max-width:calc(var(--live-chip-width) + min(1.4583vw,2.593vh));
    font-size:min(.625vw,1.111vh);
  }
  body.game-active .game-page .game-player .player-card-meta,
  body.game-active .game-page .seated-table .players-side .player-card-meta{
    left:max(-.4167vw,-.741vh);
    padding:min(.15625vw,.278vh) min(.2604vw,.463vh);
  }
  body.game-active .game-page .game-player .player-card-count,
  body.game-active .game-page .seated-table .game-player .player-card-count{
    gap:min(.15625vw,.278vh);
    font-size:min(.5208vw,.926vh);
  }
  body.game-active .game-page .player-card-icon{
    width:min(.4688vw,.833vh);
    height:min(.5729vw,1.019vh);
  }
}
@media(min-width:721px) and (max-width:1100px) and (orientation:portrait){
  body.game-active .game-page .game-board.seated-table{
    --pile-to-card-line:clamp(40px,5dvh,46px);
  }
  body.game-active .game-page .game-board.seated-table:has(.game-controls:not(:empty)){
    --pile-to-card-line:calc(clamp(40px,5dvh,46px) + 46px);
  }
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .game-board.seated-table{
    --pile-to-card-line:clamp(52px,8.5dvh,64px);
  }
  body.game-active .game-page .game-board.seated-table.crowded-table:not(.six-player-table) .players-top{
    --five-top-seat-width:clamp(100px,30vw,120px);
    column-gap:clamp(42px,14vw,60px);
  }
  body.game-active .game-page .game-board.seated-table.crowded-table:not(.six-player-table) .players-side{
    transform:translateY(clamp(20px,2.8dvh,26px));
  }
  body.game-active .game-page .game-board.seated-table.six-player-table .players-side .game-player-wrap:last-child{
    inset-block-start:clamp(24px,3.5dvh,30px);
  }
}
@media(min-width:1101px){
  body.game-active .game-page .battlefield:has(.battle-pair){
    --battle-card-w:var(--hand-w);
    --battle-card-h:var(--hand-h);
    --battle-offset:clamp(12px,1vw,18px);
    --battle-gap:clamp(8px,1vw,14px);
  }
  body.game-active .game-page .battlefield:has(.battle-pair) .battle-pair{
    width:var(--battle-pair-w);
    height:var(--battle-pair-h);
    flex-basis:var(--battle-pair-w);
  }
  body.game-active .game-page .battlefield:has(.battle-pair) .battle-pair>.playing-card{
    width:var(--hand-w);
    height:var(--hand-h);
  }
  body.game-active .game-page .battlefield:has(.battle-pair) .battle-pair>.defense-card{
    left:var(--battle-offset);
    top:var(--battle-offset);
  }
  body.game-active .game-page .game-board.two-player-table{
    min-height:max(720px,var(--desktop-board-h,720px));
  }
  body.game-active .game-page .game-board.three-player-table{
    min-height:max(780px,var(--desktop-board-h,780px));
  }
  body.game-active .game-page .game-board.three-player-table:not(.seated-table) .players-ring{
    --five-top-seat-width:172px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,var(--five-top-seat-width)));
    justify-content:center;
    justify-items:stretch;
    column-gap:clamp(96px,12vw,168px);
  }
  body.game-active .game-page .game-board.three-player-table:not(.seated-table) .players-ring>.game-player-wrap{
    width:100%;
    max-width:100%;
  }
  body.game-active .game-page .game-board:is(.two-player-table,.three-player-table):not(.seated-table):has(> .hand-zone)>.play-center{
    left:3%;
    right:3%;
    top:clamp(145px,16%,270px);
    bottom:clamp(245px,34%,430px);
    transform:none;
    grid-template-columns:calc(var(--card-w) + clamp(55px,5vw,105px)) minmax(0,1fr) calc(var(--card-w) + clamp(55px,5vw,105px));
    gap:12px;
    padding-bottom:0;
    align-items:center;
  }
  body.game-active .game-page .game-board.three-player-table:not(.seated-table):has(> .hand-zone)>.play-center{
    top:clamp(185px,24%,310px);
    bottom:clamp(255px,34%,455px);
  }
}
@media(min-width:721px) and (max-width:1100px) and (orientation:portrait) and (hover:hover) and (pointer:fine){
  body.game-active .game-page .game-board:is(.two-player-table,.three-player-table):not(.seated-table):has(> .hand-zone) .battlefield{
    --battle-card-w:var(--hand-w);
    --battle-card-h:var(--hand-h);
    --battle-offset:clamp(12px,1.4vw,16px);
    --battle-gap:clamp(8px,1.1vw,14px);
    min-height:calc(2 * (var(--battle-card-h) + var(--battle-offset)) + var(--battle-gap) + 12px);
  }
}
@media(min-width:721px){
  .lobby-create-modal{
    overflow:auto;
  }
  .lobby-create-panel{
    max-height:none;
    overflow:visible;
  }
  .lobby-select-shell.open{
    z-index:80;
  }
  .lobby-select-menu{
    z-index:1400;
  }
}
@media(min-width:721px){
  .history-page-head{
    align-items:flex-end;
  }
  .history-page-head>div>p:not(.history-archive-info){
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
.history-page-head>div{
  min-width:0;
}
.history-archive-info{
  margin:0;
  color:var(--text-muted);
  font-size:13px;
  line-height:1.45;
}
.history-page-size{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.history-page-size .lobby-sort{
  width:94px;
  min-width:94px;
  max-width:94px;
}
.history-panel{
  min-width:0;
}
.history-list .history-item:last-child{
  border-bottom:0;
}
@media(min-width:721px){
  .history-item .btn{
    grid-column:-2/-1;
  }
}
.history-item .history-coin-pill,
.history-item .leaderboard-gain{
  justify-self:start;
}
.history-coin-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.3em;
  min-width:60px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(246,198,63,.28);
  background:var(--credits-bg);
  color:var(--credits-text);
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.history-coin-pill .coin-icon{width:1em;height:1em}
@media(max-width:560px){
  .history-coin-pill{min-width:0;padding:5px 10px;font-size:12px}
}
.history-pagination{
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px;
  padding:18px 0 0;
  border-top:1px solid var(--line);
}
.history-pagination .btn{
  min-width:34px;
}
.history-pagination .btn[aria-current="page"]{
  cursor:default;
}
.history-pagination-ellipsis{
  min-width:24px;
  display:grid;
  place-items:center;
  color:var(--text-muted);
  font-weight:800;
}
@media(max-width:720px){
  .bot-difficulty-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bot-difficulty-list .lobby-select-trigger{min-height:44px;font-size:15px}
  .bot-difficulty-field-last-odd{grid-column:1/-1}
  .bot-seat-difficulty .input{min-height:34px;font-size:16px}
  .history-page-head{
    gap:12px;
    margin-bottom:14px;
  }
  .history-page-head>div>p:not(.history-archive-info){
    min-height:44px;
  }
  .history-page-size{
    width:100%;
    justify-content:space-between;
    gap:12px;
  }
  .history-page-size .lobby-sort{
    width:112px;
    min-width:112px;
    max-width:112px;
  }
  .history-pagination{
    gap:5px;
    margin-top:8px;
    padding-top:14px;
  }
  .history-pagination .btn{
    min-width:32px;
    min-height:32px;
    padding:5px 8px;
    font-size:11px;
  }
  .history-pagination-ellipsis{
    min-width:18px;
    font-size:11px;
  }
}
@media(min-width:0){
  body.game-active .game-page{
    --arena-table-top:clamp(40px,6.5%,110px);
    --arena-table-x:clamp(14px,1.8%,48px);
    --arena-bottom:clamp(150px,22%,360px);
    --arena-side-seat:clamp(112px,14%,220px);
    --arena-seat-clear:clamp(68px,9%,150px);
    --arena-control-clear:clamp(56px,8%,126px);
    --arena-hand-gap:10px;
    --arena-pile-bottom:18px;
    --arena-hand-bottom:10px;
    --arena-hand-zone-extra:34px;
    --arena-hand-min-extra:18px;
    --arena-status-gap:54px;
    --arena-control-gap:4px;
    --arena-opponent-top:clamp(20px,2.5dvh,26px);
    --arena-six-upper-lift:clamp(110px,15dvh,150px);
    --arena-six-lower-lift:clamp(50px,7dvh,70px);
  }
  body.game-active .game-layout{
    align-items:stretch;
    min-width:0;
  }
  body.game-active .game-board,
  body.game-active .game-page .game-board.seated-table{
    position:relative;
    display:block;
    min-width:0;
    min-height:clamp(590px,calc(100dvh - 170px),920px);
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  body.game-active .game-page .game-board::before{
    content:"";
    position:absolute;
    z-index:0;
    left:var(--arena-table-x);
    right:var(--arena-table-x);
    top:var(--arena-table-top);
    bottom:calc(var(--arena-bottom) - 12px);
    border:var(--table-rim,7px) solid transparent;
    border-radius:50% / 46%;
    background-image:
      radial-gradient(ellipse at 50% 42%,#2a8b5d 0%,#1d7a4e 58%,#0b3a28 100%),
      repeating-linear-gradient(2deg,rgba(244,211,164,.08) 0 1px,transparent 1px 4px,rgba(37,17,8,.15) 5px 6px,transparent 7px 11px),
      repeating-linear-gradient(178deg,rgba(234,195,143,.06) 0 1px,transparent 1px 5px,rgba(31,14,7,.17) 6px 7px,transparent 8px 13px),
      repeating-linear-gradient(88deg,rgba(244,211,164,.07) 0 1px,transparent 1px 4px,rgba(37,17,8,.14) 5px 6px,transparent 7px 12px),
      repeating-linear-gradient(92deg,rgba(234,195,143,.06) 0 1px,transparent 1px 5px,rgba(31,14,7,.16) 6px 7px,transparent 8px 13px),
      linear-gradient(180deg,rgba(255,225,181,.14) 0%,rgba(255,225,181,.035) 24%,transparent 48%,rgba(30,13,6,.28) 100%),
      linear-gradient(145deg,#85542d 0%,#64391f 22%,#7a4927 46%,#5a321c 70%,#704323 100%);
    background-size:auto,100% var(--table-rim,7px),100% var(--table-rim,7px),var(--table-rim,7px) 100%,var(--table-rim,7px) 100%,auto,auto;
    background-position:0 0,top left,bottom left,top left,top right,0 0,0 0;
    background-repeat:no-repeat;
    background-origin:padding-box,border-box,border-box,border-box,border-box,border-box,border-box;
    background-clip:padding-box,border-box,border-box,border-box,border-box,border-box,border-box;
    box-shadow:inset 0 0 0 1px rgba(225,243,231,.14),inset 0 15px 26px rgba(255,255,255,.035),inset 0 -42px 78px rgba(3,20,12,.2),0 25px 52px rgba(3,8,12,.4),0 0 0 1px #432614;
    pointer-events:none;
  }
  body.game-active .game-page .game-board::after{
    content:"";
    position:absolute;
    z-index:1;
    left:calc(var(--arena-table-x) + var(--table-rim,7px) + 2px);
    right:calc(var(--arena-table-x) + var(--table-rim,7px) + 2px);
    top:calc(var(--arena-table-top) + var(--table-rim,7px) + 2px);
    bottom:calc(var(--arena-bottom) - 12px + var(--table-rim,7px) + 2px);
    border:0;
    border-radius:50% / 46%;
    box-shadow:inset 0 0 28px rgba(3,19,11,.22);
    pointer-events:none;
  }
  body.game-active .game-page .players-ring,
  body.game-active .game-page .seated-table .players-ring{
    position:absolute;
    z-index:6;
    inset:0;
    display:block;
    padding:0;
    overflow:visible;
  }
  body.game-active .game-page .game-board:not(.seated-table) .players-ring{
    top:var(--arena-opponent-top);
    left:var(--arena-side-seat);
    right:var(--arena-side-seat);
    bottom:auto;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:12px;
  }
  body.game-active .game-page .seated-table .players-top{
    position:absolute;
    z-index:6;
    top:0;
    left:var(--arena-side-seat);
    right:var(--arena-side-seat);
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:12px;
    padding:0;
  }
  body.game-active .game-page .seated-table .players-side{
    position:absolute;
    z-index:6;
    top:calc(var(--arena-table-top) + var(--arena-seat-clear));
    bottom:calc(var(--arena-bottom) + 6px);
    width:var(--arena-side-seat);
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    gap:12px;
    padding:0;
    overflow:visible;
  }
  body.game-active .game-page .seated-table .players-left{left:0}
  body.game-active .game-page .seated-table .players-right{right:0}
  body.game-active .game-page .game-board.seated-table:not(.crowded-table) .players-side,
  body.game-active .game-page .game-board.seated-table.crowded-table:not(.six-player-table) .players-side,
  body.game-active .game-page .game-board.seated-table.six-player-table .players-side{
    transform:none;
  }
  body.game-active .game-page .game-board.seated-table:not(.crowded-table) .players-left .game-player-wrap,
  body.game-active .game-page .game-board.seated-table.crowded-table:not(.six-player-table) .players-left .game-player-wrap{
    transform:translateX(-35%);
  }
  body.game-active .game-page .game-board.seated-table:not(.crowded-table) .players-right .game-player-wrap,
  body.game-active .game-page .game-board.seated-table.crowded-table:not(.six-player-table) .players-right .game-player-wrap{
    transform:translateX(35%);
  }
  body.game-active .game-page .game-board.seated-table.six-player-table .players-left .game-player-wrap:first-child{
    transform:translate(82%,calc(-1 * var(--arena-six-upper-lift)));
  }
  body.game-active .game-page .game-board.seated-table.six-player-table .players-right .game-player-wrap:first-child{
    transform:translate(-82%,calc(-1 * var(--arena-six-upper-lift)));
  }
  body.game-active .game-page .game-board.seated-table.six-player-table .players-left .game-player-wrap:last-child{
    inset-block-start:0;
    transform:translate(-35%,calc(-1 * var(--arena-six-lower-lift)));
  }
  body.game-active .game-page .game-board.seated-table.six-player-table .players-right .game-player-wrap:last-child{
    inset-block-start:0;
    transform:translate(35%,calc(-1 * var(--arena-six-lower-lift)));
  }
  body.game-active .game-page .seated-table .game-player-wrap{
    width:100%;
    max-width:180px;
  }
  body.game-active .game-page .play-center,
  body.game-active .game-page .seated-table .play-center{
    position:static;
    display:block;
    transform:none;
  }
  body.game-active .game-page .play-center>.piles,
  body.game-active .game-page .seated-table .piles{display:contents}
  body.game-active .game-page .battlefield,
  body.game-active .game-page .seated-table .battlefield{
    position:absolute;
    z-index:5;
    left:calc(var(--arena-side-seat) + 2%);
    right:calc(var(--arena-side-seat) + 2%);
    top:calc(var(--arena-table-top) + var(--arena-seat-clear));
    bottom:calc(var(--arena-bottom) + var(--arena-control-clear));
    min-width:0;
    min-height:0;
    align-content:center;
    align-items:center;
    justify-content:center;
    padding:6px;
    overflow:visible;
  }
  body.game-active .game-page .draw-pile,
  body.game-active .game-page .discard-pile,
  body.game-active .game-page .seated-table .draw-pile,
  body.game-active .game-page .seated-table .discard-pile{
    position:absolute;
    z-index:7;
    bottom:var(--arena-pile-bottom);
    width:var(--arena-side-seat);
    min-width:0;
    height:auto;
    transform:none;
  }
  body.game-active .game-page .game-board.seated-table .draw-pile,
  body.game-active .game-page .game-board.seated-table .discard-pile,
  body.game-active .game-page .game-board.seated-table.six-player-table .draw-pile,
  body.game-active .game-page .game-board.seated-table.six-player-table .discard-pile{
    transform:translateY(-50%);
  }
  body.game-active .game-page .draw-pile>.pile-card,
  body.game-active .game-page .discard-pile>.pile-card{
    zoom:1.28;
  }
  body.game-active .game-page .draw-pile>.pile-card{
    border-radius:12px;
    background:rgba(225,232,226,.9);
  }
  body.game-active .game-page .draw-pile{left:0}
  body.game-active .game-page .discard-pile{right:0}
  body.game-active .game-page .hand-zone,
  body.game-active .game-page .seated-table .hand-zone{
    position:absolute;
    z-index:8;
    left:calc(var(--arena-side-seat) + var(--arena-hand-gap));
    right:calc(var(--arena-side-seat) + var(--arena-hand-gap));
    bottom:var(--arena-hand-bottom);
    width:auto;
    max-width:none;
    min-width:0;
    height:calc(var(--hand-h) + var(--arena-hand-zone-extra));
  }
  body.game-active .game-page .hand-zone>.hand-status-row{
    position:absolute;
    left:0;
    right:0;
    bottom:calc(100% + var(--arena-status-gap));
    margin:0;
  }
  body.game-active .game-page .hand-zone>.game-controls,
  body.game-active .game-page .seated-table .game-controls{
    position:absolute;
    left:0;
    right:0;
    bottom:calc(100% + var(--arena-control-gap));
    margin:0;
  }
  body.game-active .game-page .hand-zone>.hand{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    min-width:0;
    min-height:calc(var(--hand-h) + var(--arena-hand-min-extra));
    padding:10px 12px 4px;
  }
}
@media(min-width:1101px){
  body.game-active .app-shell{
    margin:clamp(16px,1.667vh,18px) auto clamp(10px,1.111vh,12px);
  }
  body.game-active .game-layout{
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  body.game-active .game-chat-toggle{display:grid}
  body.game-active .game-chat-shell{
    display:none;
    position:fixed;
    inset:0;
    z-index:400;
    min-height:0;
    padding:12px;
    background:rgba(7,13,10,.8);
    backdrop-filter:blur(5px);
  }
  body.game-active .game-chat-shell.open{
    display:grid;
    place-items:center;
  }
  body.game-active .game-chat-shell>.chat-panel{
    position:relative;
    inset:auto;
    width:min(540px,100%);
    height:min(680px,calc(100dvh - 24px));
    min-height:0;
    padding-top:22px;
    overflow:hidden;
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  body.game-active .game-chat-shell .chat-list{
    height:auto;
    min-height:0;
  }
  body.game-active .game-chat-close{
    display:grid;
    position:static;
    width:38px;
    height:38px;
    flex:0 0 auto;
    place-items:center;
    padding:0;
    border:1px solid #748391;
    border-radius:11px;
    background:#566472;
    color:#fff;
    font-size:25px;
    line-height:1;
  }
}
body.game-active .footer{display:none}
@media(min-width:721px) and (max-width:1100px) and (orientation:landscape){
  body.game-active .game-page{
    --arena-table-top:clamp(28px,5%,46px);
    --arena-bottom:clamp(116px,21%,160px);
    --arena-side-seat:clamp(92px,14%,132px);
    --arena-seat-clear:clamp(50px,8%,76px);
    --arena-control-clear:clamp(46px,8%,70px);
  }
  body.game-active .game-board,
  body.game-active .game-page .game-board.seated-table{
    height:100%;
    min-height:0;
  }
  body.game-active #app,
  body.game-active .game-page{
    height:100%;
    min-height:0;
  }
  body.game-active .game-page .hand-zone,
  body.game-active .game-page .seated-table .hand-zone{
    left:calc(var(--arena-side-seat) + 6px);
    right:calc(var(--arena-side-seat) + 6px);
    height:calc(var(--hand-h) + 22px);
  }
  body.game-active .game-page .hand-zone>.hand-status-row{bottom:calc(100% + 44px)}
  body.game-active .game-page .hand-zone>.game-controls,
  body.game-active .game-page .seated-table .game-controls{bottom:calc(100% + 2px)}
  body.game-active .game-page .hand-zone>.hand{min-height:calc(var(--hand-h) + 10px);padding:5px 8px 3px}
}
@media(min-width:721px) and (max-width:1100px) and (orientation:portrait){
  body.game-active .game-page{
    --arena-table-top:clamp(42px,6%,62px);
    --arena-bottom:clamp(154px,21%,190px);
    --arena-side-seat:clamp(102px,15%,144px);
    --arena-seat-clear:clamp(66px,8%,92px);
    --arena-control-clear:clamp(58px,8%,84px);
  }
  body.game-active .game-board,
  body.game-active .game-page .game-board.seated-table{
    min-height:clamp(720px,calc(100dvh - 150px),900px);
  }
}
@media(min-width:1921px) and (min-height:1081px){
  body.game-active .game-page{
    --arena-table-top:min(3.0729vw,5.463vh);
    --arena-table-x:min(1.1719vw,2.083vh);
    --arena-bottom:min(10.4167vw,18.519vh);
    --arena-side-seat:min(9.1667vw,16.296vh);
    --arena-seat-clear:min(4.2708vw,7.593vh);
    --arena-control-clear:min(3.8021vw,6.759vh);
    --arena-hand-gap:min(.5208vw,.926vh);
    --arena-pile-bottom:min(.9375vw,1.667vh);
    --arena-hand-bottom:min(.5208vw,.926vh);
    --arena-hand-zone-extra:min(1.7708vw,3.148vh);
    --arena-hand-min-extra:min(.9375vw,1.667vh);
    --arena-status-gap:min(2.8125vw,5vh);
    --arena-control-gap:min(.2083vw,.37vh);
    --arena-opponent-top:min(1.3542vw,2.407vh);
    --arena-six-upper-lift:min(7.8125vw,13.889vh);
    --arena-six-lower-lift:min(3.6458vw,6.481vh);
  }
  body.game-active .app-shell{
    width:var(--desktop-shell-w);
    margin:min(.9375vw,1.667vh) auto min(.625vw,1.111vh);
  }
  body.game-active .topbar{padding-inline:calc((100vw - var(--desktop-shell-w))/2)}
  body.game-active .game-board,
  body.game-active .game-page .game-board.seated-table{min-height:min(47.3958vw,84.259vh)}
  body.game-active .game-layout{
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  body.game-active .game-page .seated-table .game-player-wrap{
    max-width:min(9.375vw,16.667vh);
  }
  body.game-active .game-chat-shell{padding:min(.625vw,1.111vh)}
  body.game-active .game-chat-shell>.chat-panel{
    width:min(28.125vw,50vh);
    height:min(35.4167vw,62.963vh);
    padding-top:min(1.1458vw,2.037vh);
  }
}
@media(min-width:0){
  body.game-active .game-page{
    --arena-table-x:10%;
    --arena-six-upper-lift:clamp(90px,min(5.75vw,10.2dvh),220px);
  }
}
@media(min-width:721px) and (max-width:1100px) and (orientation:portrait){
  body.game-active .game-page{
    --arena-six-upper-lift:clamp(80px,10dvh,100px);
  }
}
@media(min-width:0){
  body.game-active .game-page .game-board::before,
  body.game-active .game-page .game-board::after{
    border-radius:28px;
  }
}
@media(min-width:0){
  body.game-active .game-page .game-board.seated-table:not(.six-player-table) .players-side{
    top:0;
    bottom:0;
    width:calc(var(--arena-table-x) + var(--arena-table-x) + var(--table-rim,7px) + var(--table-rim,7px));
    align-self:stretch;
    transform:none;
  }
  body.game-active .game-page .game-board.seated-table:not(.six-player-table) .players-left .game-player-wrap,
  body.game-active .game-page .game-board.seated-table.crowded-table:not(.six-player-table) .players-left .game-player-wrap{
    position:absolute;
    left:50%;
    top:calc((var(--arena-table-top) + 100% - var(--arena-bottom) + 12px - var(--live-chip-avatar)) / 2);
    transform:translateX(-50%);
  }
  body.game-active .game-page .game-board.seated-table:not(.six-player-table) .players-right .game-player-wrap,
  body.game-active .game-page .game-board.seated-table.crowded-table:not(.six-player-table) .players-right .game-player-wrap{
    position:absolute;
    right:50%;
    top:calc((var(--arena-table-top) + 100% - var(--arena-bottom) + 12px - var(--live-chip-avatar)) / 2);
    transform:translateX(50%);
  }
  body.game-active .game-page .game-board.seated-table.six-player-table .players-left .game-player-wrap:first-child{
    position:absolute;
    left:50%;
    top:calc(var(--arena-table-top) + var(--table-rim,7px) - (var(--live-chip-avatar) / 2));
    transform:translateX(-50%);
  }
  body.game-active .game-page .game-board.seated-table.six-player-table .players-right .game-player-wrap:first-child{
    position:absolute;
    right:50%;
    top:calc(var(--arena-table-top) + var(--table-rim,7px) - (var(--live-chip-avatar) / 2));
    transform:translateX(50%);
  }
  body.game-active .game-page .game-board.seated-table.six-player-table .players-left .game-player-wrap:last-child{
    position:absolute;
    left:50%;
    top:calc((var(--arena-table-top) + 100% - var(--arena-bottom) + 12px - var(--live-chip-avatar)) / 2);
    transform:translateX(-50%);
  }
  body.game-active .game-page .game-board.seated-table.six-player-table .players-right .game-player-wrap:last-child{
    position:absolute;
    right:50%;
    top:calc((var(--arena-table-top) + 100% - var(--arena-bottom) + 12px - var(--live-chip-avatar)) / 2);
    transform:translateX(50%);
  }
  body.game-active .game-page .game-board.seated-table.six-player-table .players-side{
    top:0;
    bottom:0;
    width:calc(var(--arena-table-x) + var(--arena-table-x) + var(--table-rim,7px) + var(--table-rim,7px));
    align-self:stretch;
    transform:none;
  }
  body.game-active .game-page .game-board .draw-pile,
  body.game-active .game-page .game-board .discard-pile{
    bottom:calc(var(--arena-pile-bottom) + 28px);
    height:calc(var(--card-h) + 26px);
    align-content:center;
    transform:translateY(-50%);
  }
  body.game-active .game-page .game-board .draw-stack{
    width:calc(var(--card-w) + 24px);
  }
  body.game-active .game-page .game-board .draw-pile>.pile-card{
    isolation:isolate;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  body.game-active .game-page .game-board .draw-pile>.pile-card:is(.last-trump-card,.empty-deck){
    width:calc(var(--card-w) + 14px);
  }
  body.game-active .game-page .game-board .draw-pile>.pile-card.empty-deck{
    border:0;
    background:radial-gradient(
      ellipse at center,
      rgba(245,247,245,.9) 0%,
      rgba(226,231,227,.68) 28%,
      rgba(180,190,183,.3) 50%,
      rgba(126,141,131,.1) 65%,
      transparent 78%
    );
    box-shadow:none;
  }
  body.game-active .game-page .game-board .draw-pile>.pile-card.empty-deck::before{
    content:none;
  }
  body.game-active .game-page .game-board .draw-pile .empty-deck .trump-suit-icon{
    width:55%;
    height:55%;
    opacity:1;
    filter:none;
  }
  body.game-active .game-page .game-board .draw-stack.has-hidden-deck .draw-trump-card{
    left:50%;
    top:50%;
    z-index:0;
    translate:none;
    transform:translate(-50%,-50%) translateX(calc(var(--card-w) * .95 - 12px)) rotate(90deg);
    filter:drop-shadow(0 8px 10px rgba(0,0,0,.34));
  }
  body.game-active .game-page .game-board .draw-stack.has-hidden-deck .deck-card{
    left:0;
    top:0;
    z-index:3;
    box-shadow:0 10px 18px rgba(0,0,0,.3);
  }
  body.game-active .game-page .game-board .discard-pile .discard-card{
    position:relative;
    z-index:3;
    box-shadow:0 10px 18px rgba(0,0,0,.3);
  }
  body.game-active .game-page .game-board .draw-stack.has-hidden-deck::before,
  body.game-active .game-page .game-board .discard-pile .pile-card:has(.discard-card)::before,
  body.game-active .game-page .game-board .draw-stack.has-hidden-deck::after,
  body.game-active .game-page .game-board .discard-pile .pile-card:has(.discard-card)::after{
    content:"";
    position:absolute;
    width:var(--card-w);
    height:var(--card-h);
    border:1px solid rgba(174,190,202,.22);
    border-radius:11px;
    pointer-events:none;
  }
  body.game-active .game-page .game-board .draw-stack.has-hidden-deck::before,
  body.game-active .game-page .game-board .discard-pile .pile-card:has(.discard-card)::before{
    left:4px;
    top:5px;
    z-index:1;
    background:linear-gradient(145deg,#36414b 0%,#252e37 58%,#1a2026 100%);
    box-shadow:
      inset 0 1px rgba(255,255,255,.07),
      0 8px 14px rgba(0,0,0,.24);
  }
  body.game-active .game-page .game-board .draw-stack.has-hidden-deck::after,
  body.game-active .game-page .game-board .discard-pile .pile-card:has(.discard-card)::after{
    left:2px;
    top:2px;
    z-index:2;
    background:linear-gradient(145deg,#46515c 0%,#303943 52%,#222930 100%);
    box-shadow:inset 0 1px rgba(255,255,255,.08);
  }
  body.game-active .game-page .game-board .discard-pile .deck-empty{
    border:1px solid rgba(166,190,177,.5);
    background:rgba(20,31,25,.52);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.025),
      inset 0 0 18px rgba(3,9,6,.14),
      0 7px 16px rgba(0,0,0,.18);
  }
  body.game-active .game-page .game-board .draw-pile{
    left:calc(((var(--card-w) + 24px) * 1.28 - var(--arena-side-seat)) / 2);
  }
  body.game-active .game-page .game-board .discard-pile{
    right:calc((var(--card-w) * 1.28 - var(--arena-side-seat)) / 2 + clamp(12px,1vw,18px));
  }
}
@media(min-width:0){
  body.game-active .game-page .game-board::before{
    background-image:
      radial-gradient(ellipse at 48% 38%,#299966 0%,#197b50 48%,#0d5539 76%,#063123 100%),
      repeating-linear-gradient(2deg,rgba(255,224,174,.13) 0 1px,transparent 1px 4px,rgba(38,16,7,.2) 5px 6px,transparent 7px 11px),
      repeating-linear-gradient(178deg,rgba(245,205,151,.1) 0 1px,transparent 1px 5px,rgba(30,12,5,.22) 6px 7px,transparent 8px 13px),
      repeating-linear-gradient(88deg,rgba(255,221,168,.12) 0 1px,transparent 1px 4px,rgba(38,16,7,.2) 5px 6px,transparent 7px 12px),
      repeating-linear-gradient(92deg,rgba(245,205,151,.1) 0 1px,transparent 1px 5px,rgba(30,12,5,.22) 6px 7px,transparent 8px 13px),
      linear-gradient(180deg,rgba(255,232,194,.2) 0%,rgba(255,226,181,.045) 25%,transparent 48%,rgba(26,10,4,.34) 100%),
      linear-gradient(145deg,#a36637 0%,#70401f 21%,#92562c 45%,#552f18 70%,#7d4724 100%);
    box-shadow:
      inset 0 0 0 1px rgba(219,248,231,.2),
      inset 0 3px 9px rgba(255,255,255,.07),
      inset 0 -48px 88px rgba(1,25,14,.24),
      0 27px 58px rgba(2,7,5,.46),
      0 0 0 1px #392012,
      0 0 22px rgba(128,79,35,.12);
  }
  body.game-active .game-page .game-board::after{
    background:
      linear-gradient(115deg,rgba(255,255,255,.035) 0%,transparent 29%),
      radial-gradient(ellipse at 50% 44%,transparent 52%,rgba(0,28,17,.2) 100%);
    box-shadow:
      inset 0 0 34px rgba(2,25,15,.24),
      inset 0 1px rgba(230,255,240,.08);
  }
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page{
    --hand-w:clamp(50px,min(16.6vw,10.6svh),84px);
    --hand-h:calc(var(--hand-w) * 1.3959);
    --phone-ctl-h:clamp(32px,min(9vw,6svh),38px);
    --phone-battle-w:clamp(38px,min(13vw,8.2svh),60px);
    --arena-table-top:36px;
    --arena-table-x:10%;
    --arena-side-seat:clamp(52px,14.6vw,68px);
    --arena-seat-clear:38px;
    --arena-opponent-top:6px;
    --arena-hand-gap:3px;
    --arena-hand-bottom:6px;
    --arena-hand-zone-extra:18px;
    --arena-hand-min-extra:12px;
    --arena-pile-bottom:6px;
    --arena-control-gap:3px;
    --arena-status-gap:calc(var(--phone-ctl-h) + 8px);
    --arena-bottom:calc(var(--hand-h) + 6px);
    --arena-control-clear:calc(var(--phone-ctl-h) + 52px);
  }
  body.game-active .game-layout{
    height:100%;
    min-height:0;
    grid-template-rows:minmax(0,1fr);
  }
  body.game-active .game-board,
  body.game-active .game-page .game-board.seated-table{
    height:100%;
    min-height:0;
  }
  body.game-active .game-page .hand-zone>.hand{
    padding:14px 4px 4px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
  }
  body.game-active .game-page .hand-zone>.hand::-webkit-scrollbar{display:none}
  body.game-active .game-page .hand-row.hand-overflow{
    justify-content:flex-start;
  }
  body.game-active .game-page .hand-row.hand-overflow::after{
    content:"";
    flex:0 0 4px;
  }
  body.game-active .game-page .hand-zone>.hand-status-row{
    flex-wrap:wrap;
    justify-content:center;
    gap:5px;
  }
  body.game-active .game-page .hand-hint,
  body.game-active .game-page .turn-timer,
  body.game-active .game-page .hand-finish-message{
    padding:4px 9px;
    font-size:clamp(10.5px,3vw,12px);
    line-height:1.1;
  }
  body.game-active .game-page .hand-zone>.game-controls,
  body.game-active .game-page .hand-zone>.game-controls:empty{
    --stable-local-action-h:var(--phone-ctl-h);
  }
  body.game-active .game-page .game-controls .btn{
    min-width:clamp(88px,28vw,120px);
    min-height:var(--phone-ctl-h);
    font-size:clamp(11px,3.1vw,13px);
  }
  body.game-active .game-page .battlefield,
  body.game-active .game-page .seated-table .battlefield{
    align-self:stretch;
  }
  body.game-active .game-page .game-board .battlefield:has(.battle-pair){
    --battle-card-w:var(--phone-battle-w);
    --battle-card-h:calc(var(--phone-battle-w) * 1.3959);
    --battle-offset:clamp(9px,2.6vw,12px);
    --battle-gap:clamp(6px,2vw,10px);
    gap:var(--battle-gap);
    padding:6px;
    max-width:calc(3 * var(--battle-pair-w) + 2 * var(--battle-gap) + 20px);
  }
  body.game-active .game-page .game-board .players-top .player-role-status,
  body.game-active .game-page .game-board:not(.seated-table) .players-ring .player-role-status{
    white-space:nowrap;
    font-size:clamp(7.5px,min(2.25vw,1.65dvh),9px);
  }
  body.game-active .game-page .game-board.seated-table .players-top{--chip-safe-inset:14px}
  body.game-active .game-page .game-board.game-board.game-board .pile{
    --pile-w:clamp(33px,9.7vw,48px);
    --card-w:var(--pile-w);
    --card-h:calc(var(--pile-w) * 1.3975);
    --pile-radius:calc(var(--pile-w) * .15);
    --pile-layer-x:calc(var(--pile-w) * .13);
    --pile-layer-y:calc(var(--pile-w) * .17);
    --trump-peek:calc(var(--pile-w) * .75);
    padding:0 1px 3px;
    gap:0;
  }
  body.game-active .game-page .game-board.game-board.game-board .draw-pile,
  body.game-active .game-page .game-board.game-board.game-board .discard-pile{
    bottom:var(--arena-pile-bottom);
    width:var(--arena-side-seat);
    height:auto;
    transform:none;
    align-content:end;
  }
  body.game-active .game-page .game-board.game-board.game-board .draw-pile{left:0;right:auto}
  body.game-active .game-page .game-board.game-board.game-board .discard-pile{left:auto;right:0}
  body.game-active .game-page .game-board.game-board.game-board .pile>span{margin-bottom:3px}
  body.game-active .game-page .game-board.game-board.game-board .pile>b{margin-top:calc(var(--pile-layer-y) + 3px)}
  body.game-active .game-page .game-board.game-board.game-board :is(.draw-pile,.discard-pile)>.pile-card{
    zoom:1;
    transform:none;
    width:calc(var(--pile-w) + var(--pile-layer-x));
  }
  body.game-active .game-page .game-board.game-board.game-board .draw-pile>.pile-card:is(.last-trump-card,.empty-deck){
    width:calc(var(--pile-w) * 1.47);
  }
  body.game-active .game-page .game-board.game-board.game-board .draw-pile>.pile-card.has-hidden-deck{
    margin-top:var(--trump-peek);
  }
  body.game-active .game-page .game-board.game-board.game-board .pile .deck-card,
  body.game-active .game-page .game-board.game-board.game-board .pile .discard-card,
  body.game-active .game-page .game-board.game-board.game-board .discard-pile .deck-empty,
  body.game-active .game-page .game-board.game-board.game-board .draw-stack.has-hidden-deck::before,
  body.game-active .game-page .game-board.game-board.game-board .draw-stack.has-hidden-deck::after,
  body.game-active .game-page .game-board.game-board.game-board .discard-pile .pile-card:has(.discard-card)::before,
  body.game-active .game-page .game-board.game-board.game-board .discard-pile .pile-card:has(.discard-card)::after{
    border-radius:var(--pile-radius);
  }
  body.game-active .game-page .game-board.game-board.game-board .discard-pile .deck-empty{
    width:var(--pile-w);
    height:var(--card-h);
  }
  body.game-active .game-page .game-board.game-board.game-board .draw-stack.has-hidden-deck::before,
  body.game-active .game-page .game-board.game-board.game-board .discard-pile .pile-card:has(.discard-card)::before{
    left:var(--pile-layer-x);
    top:var(--pile-layer-y);
  }
  body.game-active .game-page .game-board.game-board.game-board .draw-stack.has-hidden-deck::after,
  body.game-active .game-page .game-board.game-board.game-board .discard-pile .pile-card:has(.discard-card)::after{
    left:calc(var(--pile-layer-x) / 2);
    top:calc(var(--pile-layer-x) / 2);
  }
  body.game-active .game-page .game-board.game-board.game-board .draw-stack.has-hidden-deck .draw-trump-card{
    left:50%;
    top:calc(var(--pile-w) * -.25);
    translate:none;
    transform:translate(-50%,-50%) rotate(90deg);
  }
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page{
    --m-av:clamp(40px,min(12.8vw,7.6svh),60px);
    --m-name:clamp(10px,min(2.8vw,1.7svh),12.2px);
    --m-tag:clamp(9px,min(2.5vw,1.5svh),10px);
    --m-count:clamp(10px,min(2.75vw,1.65svh),11px);
    --m-btn-h:clamp(38px,min(11.2vw,6.6svh),50px);
    --m-pile-w:clamp(32px,min(9.6vw,6svh),50px);
    --m-battle-w1:clamp(50px,min(19.5vw,12.6svh),92px);
    --m-battle-w2:clamp(46px,min(17.6vw,11.4svh),82px);
    --m-bw-cap:calc(15.4vw - max(0px,360px - 100vw) * .135);
    --m-battle-w3:clamp(40px,min(var(--m-bw-cap),10.2svh),72px);
    --m-battle-w4:clamp(38px,min(var(--m-bw-cap),calc(12.9svh - 27.6px)),68px);
    --m-pile-col-h:calc(var(--m-pile-w) * 2.15 + 10px);
    --m-dec-h:clamp(20px,min(5.6vw,2.9svh),27px);
    --m-role-top:calc(var(--m-av) + var(--m-name) * 1.28 + 9px);
    --m-role-h:calc(var(--m-tag) * 1.15 + 5px);
    --m-cluster-h:calc(var(--m-role-top) + var(--m-role-h) + 12px + var(--m-dec-h));
    --m-pile-top-from-bottom:calc(var(--arena-hand-bottom) + var(--hand-h) + var(--arena-hand-zone-extra) + 8px + var(--m-pile-col-h) + 8px);
    --hand-w:clamp(54px,min(17.8vw,11.2svh),86px);
    --hand-h:calc(var(--hand-w) * 1.3959);
    --phone-ctl-h:var(--m-btn-h);
    --arena-table-top:calc(var(--m-av) / 2 + 10px);
    --arena-table-x:8%;
    --arena-side-seat:clamp(52px,14.6vw,68px);
    --arena-seat-clear:calc(var(--m-av) / 2 + 50px);
    --arena-opponent-top:6px;
    --arena-hand-gap:3px;
    --arena-hand-bottom:6px;
    --arena-hand-zone-extra:18px;
    --arena-hand-min-extra:12px;
    --arena-pile-bottom:6px;
    --arena-control-gap:3px;
    --arena-status-gap:calc(var(--m-btn-h) + 8px);
    --arena-bottom:calc(var(--hand-h) + 6px);
    --arena-control-clear:calc(var(--m-btn-h) + 64px);
  }
  body.game-active .game-page .game-player-wrap{
    --live-chip-avatar:var(--m-av);
    --live-chip-height:var(--m-av);
    --live-chip-width:calc(var(--m-av) + 24px);
    --live-chip-role:clamp(15px,calc(var(--m-av) * .36),19px);
    --live-chip-role-overlap:calc(var(--live-chip-role) * .72);
    --live-chip-bot-marker:clamp(12px,calc(var(--m-av) * .3),16px);
    width:var(--live-chip-width);
    max-width:var(--live-chip-width);
  }
  body.game-active .game-page .seated-table .players-top .game-player-wrap,
  body.game-active .game-page .players-side .game-player-wrap{
    width:var(--live-chip-width);
    max-width:var(--live-chip-width);
  }
  body.game-active .game-page .game-board.game-board.game-board .players-side .game-player-wrap{flex:0 0 auto}
  body.game-active .game-page .game-board.game-board.game-board .game-player .player-username,
  body.game-active .game-page .game-board.game-board.game-board .game-player b.player-username,
  body.game-active .game-page .game-board.game-board.seated-table .players-side .player-username{
    top:calc(100% + 2px);
    bottom:auto;
    max-width:calc(var(--live-chip-width) + 18px);
    padding:1px 7px 2px;
    border:1px solid rgba(190,207,199,.26);
    border-radius:999px;
    background:linear-gradient(180deg,rgba(24,35,30,.96),rgba(8,14,11,.96));
    box-shadow:0 2px 6px rgba(0,0,0,.4);
    font-size:var(--m-name);
    font-weight:700;
    line-height:1.28;
    text-shadow:none;
  }
  body.game-active .game-page .game-board.game-board.game-board .game-player.attacker .player-username{border-color:rgba(255,109,134,.6)}
  body.game-active .game-page .game-board.game-board.game-board .game-player.co-attacker .player-username{border-color:rgba(240,163,74,.65)}
  body.game-active .game-page .game-board.game-board.game-board .game-player.defender .player-username{border-color:rgba(99,173,255,.65)}
  body.game-active .game-page .game-board.game-board.game-board .game-player .player-card-meta,
  body.game-active .game-page .game-board.game-board.seated-table .players-side .player-card-meta{
    left:-4px;
    top:-3px;
    transform:none;
    padding:2px 5px 2px 4px;
    border:1px solid rgba(214,226,219,.5);
    background:rgba(8,14,11,.95);
    box-shadow:0 2px 6px rgba(0,0,0,.45);
  }
  body.game-active .game-page .game-board.game-board.game-board .game-player .player-card-count,
  body.game-active .game-page .game-board.game-board.game-board .seated-table .game-player .player-card-count{
    gap:3px;
    font-size:var(--m-count);
    font-weight:800;
    line-height:1;
    transform:none;
  }
  body.game-active .game-page .game-board.game-board.game-board .player-card-icon{width:9px;height:11px}
  body.game-active .game-page .game-board.game-board.game-board .game-player-wrap{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--live-chip-avatar);
    row-gap:0;
    min-height:calc(var(--m-role-top) + var(--m-role-h));
  }
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .player-role-status,
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .player-role-status:empty{
    position:absolute;
    left:50%;
    top:var(--m-role-top);
    display:block;
    width:max-content;
    max-width:calc(var(--live-chip-width) + 14px);
    height:auto;
    min-height:0;
    max-height:none;
    margin:0;
    padding:1px 7px 2px;
    transform:translateX(-50%);
    text-align:center;
    border:1px solid transparent;
    border-radius:999px;
    font-size:var(--m-tag);
    font-weight:800;
    line-height:1.15;
    letter-spacing:.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:rgba(226,233,229,.78);
  }
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .player-role-status:empty{visibility:hidden}
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .game-player.attacker~.player-role-status{background:rgba(255,109,134,.2);border-color:rgba(255,109,134,.5);color:#ffc2cd}
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .game-player.co-attacker~.player-role-status{background:rgba(240,163,74,.2);border-color:rgba(240,163,74,.5);color:#ffd9a8}
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .game-player.defender~.player-role-status{background:rgba(99,173,255,.2);border-color:rgba(99,173,255,.5);color:#bcdcff}
  body.game-active .game-page .game-board.game-board.game-board .player-decision-slot{grid-template-columns:minmax(0,1fr)}
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .player-decision-slot .player-decision-badge{
    width:max-content;
    min-width:0;
    max-width:none;
    justify-self:center;
    padding-inline:10px;
    white-space:nowrap;
    font-size:clamp(10.5px,2.9vw,12px);
  }
  body.game-active .game-page .game-board.game-board:not(.seated-table) .players-ring{
    top:calc(var(--arena-table-top) + var(--table-rim,5px) / 2 - var(--m-av) / 2);
    padding-top:0;
    justify-content:space-evenly;
    column-gap:0;
  }
  body.game-active .game-page .game-board.game-board:not(.seated-table) .players-ring>.game-player-wrap{
    flex:0 0 var(--live-chip-width);
    max-width:var(--live-chip-width);
  }
  body.game-active .game-page .game-board.game-board.seated-table .players-top,
  body.game-active .game-page .game-board.game-board.seated-table.crowded-table:not(.six-player-table) .players-top{
    --chip-safe-inset:calc(var(--arena-table-top) + var(--table-rim,5px) / 2 - var(--m-av) / 2);
    --five-top-seat-width:calc(var(--m-av) + 24px);
    column-gap:clamp(34px,15vw,72px);
  }
  body.game-active .game-page .game-board.game-board.seated-table .players-top .game-player-wrap{
    flex:0 0 var(--live-chip-width);
  }
  body.game-active .game-page .game-board.game-board.seated-table.six-player-table .players-top .game-player-wrap{transform:none}
  body.game-active .game-page .game-board.game-board.seated-table.six-player-table .players-left .game-player-wrap:first-child,
  body.game-active .game-page .game-board.game-board.seated-table.six-player-table .players-right .game-player-wrap:first-child{
    top:calc(var(--arena-table-top) + var(--table-rim,5px) / 2 - var(--m-av) / 2);
  }
  body.game-active .game-page .game-board.game-board.game-board .battlefield:has(.battle-pair){
    --bw:var(--m-battle-w3);
    --battle-card-w:var(--bw);
    --battle-card-h:calc(var(--bw) * 1.3959);
    --battle-offset:clamp(10px,3vw,14px);
    --battle-gap:clamp(6px,2vw,10px);
    gap:var(--battle-gap);
    max-width:calc(3 * var(--battle-pair-w) + 2 * var(--battle-gap) + 20px);
  }
  body.game-active .game-page .game-board.game-board.game-board .battlefield:has(.battle-pair:nth-child(2)):not(:has(.battle-pair:nth-child(3))){--bw:var(--m-battle-w2)}
  body.game-active .game-page .game-board.game-board.game-board .battlefield:has(.battle-pair:first-child):not(:has(.battle-pair:nth-child(2))){--bw:var(--m-battle-w1)}
  body.game-active .game-page .game-board.game-board.game-board .battlefield:has(.battle-pair:nth-child(4)){--bw:var(--m-battle-w4)}
  body.game-active .game-page .game-board.game-board.game-board .table-empty{
    font-size:clamp(12px,3.3vw,14px);
    padding:8px 14px;
    text-align:center;
  }
  body.game-active .game-page .hand-zone,
  body.game-active .game-page .seated-table .hand-zone{
    left:4px;
    right:4px;
  }
  body.game-active .game-page .hand-zone>.hand-status-row{
    padding-inline:calc(var(--m-pile-w) * 1.13 + 20px);
  }
  body.game-active .game-page .game-board.game-board.game-board .hand-zone .hand-hint,
  body.game-active .game-page .game-board.game-board.game-board .hand-zone .turn-timer,
  body.game-active .game-page .game-board.game-board.game-board .hand-zone .hand-finish-message{
    padding:5px 12px;
    font-size:clamp(11.5px,3.25vw,13px);
    line-height:1.15;
    transform:none;
  }
  body.game-active .game-page .game-board.game-board.game-board .game-controls .btn{
    min-width:clamp(96px,30vw,132px);
    min-height:var(--m-btn-h);
    border-radius:12px;
    font-size:clamp(13px,3.6vw,15px);
    font-weight:800;
  }
  body.game-active .game-page .game-board.game-board.game-board .pile{
    --pile-w:var(--m-pile-w);
  }
  body.game-active .game-page .game-board.game-board.game-board .draw-pile,
  body.game-active .game-page .game-board.game-board.game-board .discard-pile{
    bottom:calc(var(--arena-hand-bottom) + var(--hand-h) + var(--arena-hand-zone-extra) + 8px);
    width:calc(var(--pile-w) * 1.13 + 12px);
  }
  body.game-active .game-page .game-board.game-board.game-board .draw-pile{left:4px}
  body.game-active .game-page .game-board.game-board.game-board .discard-pile{right:4px}
  body.game-active .game-page .game-board.game-board.game-board .pile>span{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    margin:0;
  }
  body.game-active .game-page .game-board.game-board.game-board .pile>b{
    position:absolute;
    left:50%;
    bottom:0;
    top:auto;
    margin:0;
    padding:1px 7px 2px;
    transform:translateX(-50%);
    border-radius:999px;
    border:1px solid rgba(214,226,219,.4);
    background:rgba(8,14,11,.94);
    box-shadow:0 2px 6px rgba(0,0,0,.45);
    font-size:clamp(11px,3vw,12.5px);
    font-weight:800;
    line-height:1.2;
    color:#f1f5f3;
    z-index:6;
  }
  body.game-active .game-page .game-board.game-board.game-board .pile{padding-bottom:0}
  body.game-active .game-page .game-board.game-board.game-board :is(.draw-pile,.discard-pile)>.pile-card{
    margin-bottom:10px;
  }
  body.game-active .game-page .game-board.game-board.game-board .draw-pile>.pile-card.has-hidden-deck{
    margin-top:var(--trump-peek);
  }
  body.game-active .game-page .hand-zone>.hand{padding:20px 2px 4px;overflow:visible;touch-action:manipulation}
  body.game-active .game-page .hand .playing-card.legal:not(.selected){
    --hand-lift:-8px;
    filter:drop-shadow(0 0 6px rgba(255,214,102,.55)) drop-shadow(0 7px 8px rgba(4,8,12,.28));
  }
  body.game-active .game-page .hand:has(.playing-card.legal) .playing-card.disabled{
    filter:brightness(.87) saturate(.9) drop-shadow(0 7px 8px rgba(4,8,12,.28));
  }
  body.game-active .game-page .game-board.game-board.seated-table:not(.six-player-table) .players-left .game-player-wrap,
  body.game-active .game-page .game-board.game-board.seated-table.crowded-table:not(.six-player-table) .players-left .game-player-wrap{
    top:min(
      calc((var(--arena-table-top) + 100% - var(--arena-bottom) + 12px - var(--m-av)) / 2 - 10px),
      calc(100% - var(--m-pile-top-from-bottom) - var(--m-cluster-h))
    );
  }
  body.game-active .game-page .game-board.game-board.seated-table:not(.six-player-table) .players-right .game-player-wrap,
  body.game-active .game-page .game-board.game-board.seated-table.crowded-table:not(.six-player-table) .players-right .game-player-wrap{
    top:min(
      calc((var(--arena-table-top) + 100% - var(--arena-bottom) + 12px - var(--m-av)) / 2 - 10px),
      calc(100% - var(--m-pile-top-from-bottom) - var(--m-cluster-h))
    );
  }
  body.game-active .game-page .game-board.game-board.seated-table.six-player-table .players-left .game-player-wrap:last-child,
  body.game-active .game-page .game-board.game-board.seated-table.six-player-table .players-right .game-player-wrap:last-child{
    top:max(
      calc(
        (
          (var(--arena-table-top) + var(--table-rim,5px) / 2 - var(--m-av) / 2)
          + (100% - var(--m-pile-top-from-bottom))
        ) / 2
      ),
      calc(var(--arena-table-top) + var(--table-rim,5px) / 2 - var(--m-av) / 2 + var(--m-role-top) + var(--m-role-h) + 18px)
    );
  }
  body.game-active .game-page .game-board::after{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='260 180 504 330'%3E%3Cg transform='translate(512 370) scale(1.4) translate(-512 -370)' fill='%23000' fill-opacity='.16'%3E%3Cpath d='M405.5 456.5 L371.5 356.5 C376.6 355.8 380.6 353.1 383.8 347.2 L453.7 378.4 L500.8 292.2 C503.2 294.6 507 292.8 512 292.8 C517 292.8 520.8 294.6 523.2 292.2 L570.3 378.4 L640.3 348.1 C643.4 353.1 647.4 355.8 652.5 356.5 L618.5 456.5 C581.8 445 546 437 512 437 C478 437 442.2 445 405.5 456.5 Z'/%3E%3Ccircle cx='365' cy='336' r='22.5'/%3E%3Ccircle cx='512' cy='269' r='27.5'/%3E%3Ccircle cx='659' cy='336' r='22.5'/%3E%3C/g%3E%3C/svg%3E") 50% 44%/46% auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 46'%3E%3Ctext x='160' y='31' text-anchor='middle' font-family='Arial,sans-serif' font-size='26' font-weight='800' letter-spacing='3' fill='%23000' fill-opacity='.16'%3EDurakArena.MD%3C/text%3E%3C/svg%3E") 50% 68%/52% auto no-repeat,
      linear-gradient(115deg,rgba(255,255,255,.035) 0%,transparent 29%),
      radial-gradient(ellipse at 50% 44%,transparent 52%,rgba(0,28,17,.2) 100%);
  }
  body.game-active .game-page .game-board.game-board.game-board .game-player-wrap .player-chat-bubble{
    top:calc(100% + 3px);
    left:50%;
    transform:translateX(-50%);
    width:max-content;
    max-width:min(170px,44vw);
    padding:6px 10px;
    border-radius:12px;
    box-shadow:0 8px 18px rgba(0,0,0,.4);
    font-size:clamp(11.5px,3.2vw,13px);
    font-weight:700;
    line-height:1.25;
    z-index:14;
  }
  body.game-active .game-page .game-board.game-board.game-board .players-left .game-player-wrap .player-chat-bubble{left:0;transform:none}
  body.game-active .game-page .game-board.game-board.game-board .players-right .game-player-wrap .player-chat-bubble{left:auto;right:0;transform:none}
  body.game-active .game-page .game-board.game-board.game-board .player-decision-slot:has(.player-decision-badge)~.player-chat-bubble{
    top:calc(100% + var(--m-dec-h) + 6px);
  }
  body.game-active .game-page .game-board.game-board.game-board .players-side .game-player-wrap{
    --live-chip-width:min(calc(var(--m-av) + 7px),calc(16vw + 2.8px));
  }
  body.game-active .game-page .game-board.game-board.game-board .players-side .player-username,
  body.game-active .game-page .game-board.game-board.game-board .players-side b.player-username{
    max-width:calc(16vw + 2.8px);
    padding-inline:6px;
    font-size:min(var(--m-name),11.5px);
  }
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .players-side .player-role-status{
    max-width:calc(16vw + 2.8px);
    padding:1px 4px 2px;
    border:0;
    font-size:9px;
    letter-spacing:0;
  }
  body.game-active .game-page .game-board.game-board.game-board .players-side .player-card-meta{left:0}
  body.game-active .game-page .game-board.game-board.game-board .table-empty{max-width:calc(100% - 16px)}
  body.game-active .game-page .hand-zone>.hand-status-row,
  body.game-active .game-page .hand-zone>.game-controls{pointer-events:none}
  body.game-active .game-page .hand-zone>.game-controls .btn{pointer-events:auto}
  body.game-active .game-page .game-board.game-board.game-board .hand-zone>.hand-status-row{
    flex-wrap:nowrap;
    align-items:center;
  }
  body.game-active .game-page .game-board.game-board.game-board .hand-zone .hand-hint,
  body.game-active .game-page .game-board.game-board.game-board .hand-zone .hand-finish-message{
    flex:0 1 auto;
    min-width:0;
    text-align:center;
  }
  body.game-active .game-page .game-board.game-board.game-board .hand-zone .turn-timer{flex:0 0 auto}
  body.game-active .game-page .game-board.game-board.game-board .game-player:has(.player-turn-countdown:not([hidden]))::before{
    content:"";
    position:absolute;
    inset:-3px;
    z-index:1;
    border-radius:50%;
    pointer-events:none;
    animation:m-ripple 1.9s ease-out infinite;
  }
  @keyframes m-ripple{
    0%{box-shadow:0 0 0 0 rgba(255,232,150,.55)}
    70%,100%{box-shadow:0 0 0 12px rgba(255,232,150,0)}
  }
  body.game-active .game-page .hand .playing-card,
  body.game-active .game-page .game-controls .btn,
  body.game-active .game-page .battle-pair{-webkit-tap-highlight-color:transparent}
  body.game-active .game-page .hand .playing-card.legal:not(.selected):active{--hand-lift:-14px}
  body.game-active .game-page .game-controls .btn:active{transform:scale(.96)}
}
@property --ctl-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.take-btn,
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.pass-btn{
  position:relative;
  gap:.62em;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--ctl-ink);
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  text-shadow:none;
  -webkit-user-select:none;
  user-select:none;
  background:
    radial-gradient(130% 150% at 50% -35%,var(--ctl-lift),transparent 58%) padding-box,
    linear-gradient(180deg,var(--ctl-fill-a),var(--ctl-fill-b)) padding-box,
    conic-gradient(from var(--ctl-angle),var(--ctl-edge-lo) 0deg,var(--ctl-edge-hi) 24deg,var(--ctl-edge-lo) 72deg,var(--ctl-edge-lo) 180deg,var(--ctl-edge-hi) 204deg,var(--ctl-edge-lo) 252deg,var(--ctl-edge-lo) 360deg) border-box;
  box-shadow:0 12px 26px -8px rgba(0,0,0,.62),0 0 32px -8px var(--ctl-glow);
  transition:transform .16s ease,box-shadow .22s ease,filter .22s ease;
  animation:ctl-rise .34s cubic-bezier(.2,.7,.2,1) backwards,ctl-orbit 8s linear infinite;
}
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.take-btn{
  --ctl-ink:#fbeee3;
  --ctl-fill-a:#671b2f;
  --ctl-fill-b:#43101d;
  --ctl-lift:rgba(255,190,190,.16);
  --ctl-edge-lo:rgba(226,158,146,.34);
  --ctl-edge-hi:#ffe5d4;
  --ctl-glow:rgba(196,52,84,.34);
}
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.pass-btn{
  --ctl-ink:#2a1d07;
  --ctl-fill-a:#f9ecbf;
  --ctl-fill-b:#d8b968;
  --ctl-lift:rgba(255,255,255,.22);
  --ctl-edge-lo:rgba(255,236,170,.55);
  --ctl-edge-hi:#fffbe8;
  --ctl-glow:rgba(240,206,110,.42);
  animation:ctl-rise .34s cubic-bezier(.2,.7,.2,1) backwards,ctl-orbit 8s linear -4s infinite;
}
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.take-btn::before,
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.pass-btn::before{
  content:"";
  flex:0 0 auto;
  width:1.12em;
  height:1.12em;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.take-btn::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11.2'/%3E%3Cpath d='M7.2 10.2l4.8 4.8 4.8-4.8'/%3E%3Cpath d='M4.2 16.8v1.6a2.2 2.2 0 0 0 2.2 2.2h11.2a2.2 2.2 0 0 0 2.2-2.2v-1.6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11.2'/%3E%3Cpath d='M7.2 10.2l4.8 4.8 4.8-4.8'/%3E%3Cpath d='M4.2 16.8v1.6a2.2 2.2 0 0 0 2.2 2.2h11.2a2.2 2.2 0 0 0 2.2-2.2v-1.6'/%3E%3C/svg%3E");
}
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.pass-btn::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.9l5 5.1L19.6 6.6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.9l5 5.1L19.6 6.6'/%3E%3C/svg%3E");
}
@media(hover:hover) and (pointer:fine){
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.take-btn:hover,
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.pass-btn:hover{
    filter:brightness(1.14);
    box-shadow:0 14px 30px -8px rgba(0,0,0,.66),0 0 40px -6px var(--ctl-glow);
  }
}
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.take-btn:active,
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.pass-btn:active{
  filter:brightness(.92);
  box-shadow:0 5px 12px -6px rgba(0,0,0,.7),0 0 20px -8px var(--ctl-glow);
}
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.take-btn:disabled,
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.pass-btn:disabled{
  filter:grayscale(.85) brightness(.7);
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
  animation:none;
}
@media(prefers-reduced-motion:reduce){
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.take-btn,
body.game-active .game-page .game-board.game-board.game-board .game-controls .btn.pass-btn{animation:none}
}
@keyframes ctl-orbit{to{--ctl-angle:360deg}}
@keyframes ctl-rise{
  0%{opacity:0;transform:translateY(7px) scale(.985)}
  100%{opacity:1;transform:none}
}
.deal-layer{position:fixed;inset:0;z-index:300;overflow:hidden;pointer-events:none}
.deal-deck,.deal-flight{position:absolute;left:0;top:0;width:var(--dw);height:var(--dh);transform-origin:50% 50%;pointer-events:none;will-change:transform,opacity}
.deal-deck{opacity:0;filter:drop-shadow(0 6px 8px rgba(0,0,0,.42))}
img.deal-flight{display:block;opacity:0;border-radius:9% / 6.5%;box-shadow:0 4px 7px rgba(0,0,0,.34);-webkit-user-drag:none;user-select:none}
div.deal-flight{opacity:0}
.deal-card{position:absolute;left:0;top:0;width:100%;height:100%;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
.deal-flip{perspective:520px}
.deal-flip-inner{position:absolute;inset:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.deal-face{position:absolute;left:0;top:0;width:100%;height:100%;display:block;border-radius:9% / 6.5%;box-shadow:0 4px 8px rgba(0,0,0,.32);-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:none}
.deal-face.front{transform:rotateY(180deg)}
body.game-active .game-board[data-dealing] .draw-pile,
body.game-active .game-board[data-dealing] .battlefield{visibility:hidden}
body.game-active .game-board[data-dealing] .hand .playing-card{opacity:0;pointer-events:none!important}
body.game-active .game-board[data-dealing] .hand .playing-card[data-dealt]{opacity:1}
body.game-active .game-board [data-play-hold]{opacity:0!important}
body.game-active .game-board[data-play-sweep] .battlefield{visibility:hidden}
body.game-active .game-board[data-play-pile] .discard-pile{visibility:hidden}
body.game-active .game-page .game-board.spectator-table .battlefield>.table-empty{display:none}
body.game-active .game-page .game-board.spectator-table .spectator-seat-bottom{
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
}
body.game-active .game-page .game-board.spectator-table .spectator-seat-bottom .game-player-wrap{
  --p1-gap:4px;
  --p1-role-h:var(--player-status-slot-height,16px);
  --p1-dec-h:var(--player-decision-slot-height,32px);
  position:absolute;
  left:50%;
  bottom:calc(var(--arena-bottom) - 12px + var(--table-rim,7px) / 2 - var(--live-chip-avatar) / 2);
  display:block;
  width:var(--live-chip-width);
  max-width:var(--live-chip-width);
  height:var(--live-chip-avatar);
  min-height:0;
  margin:0;
  padding:0;
  transform:translateX(-50%);
  pointer-events:auto;
}
body.game-active .game-page .game-board.spectator-table .spectator-seat-bottom .player-username,
body.game-active .game-page .game-board.spectator-table .spectator-seat-bottom b.player-username{
  top:calc(100% + 6px);
  bottom:auto;
}
body.game-active .game-page .game-board.spectator-table .spectator-seat-bottom .player-role-status,
body.game-active .game-page .game-board.spectator-table .spectator-seat-bottom .player-role-status:empty{
  position:absolute;
  left:50%;
  top:auto;
  bottom:calc(100% + var(--p1-gap));
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:calc(var(--live-chip-width) + 40px);
  height:var(--p1-role-h);
  min-height:0;
  max-height:none;
  margin:0;
  transform:translateX(-50%);
}
body.game-active .game-page .game-board.spectator-table .spectator-seat-bottom .player-decision-slot,
body.game-active .game-page .game-board.spectator-table .spectator-seat-bottom .player-decision-slot:empty{
  position:absolute;
  left:0;
  right:0;
  top:auto;
  bottom:calc(100% + var(--p1-gap) + var(--p1-role-h) + var(--p1-gap));
  display:grid;
  width:100%;
  height:var(--p1-dec-h);
  min-height:0;
  max-height:none;
  place-items:end center;
  pointer-events:none;
}
body.game-active .game-page .game-board.spectator-table .spectator-seat-bottom .player-decision-slot .player-decision-badge{
  height:100%;
  min-height:0;
  max-height:100%;
}
body.game-active .game-page .game-board.spectator-table .spectator-seat-bottom .player-chat-bubble{
  top:auto;
  bottom:calc(100% + var(--p1-gap) + var(--p1-role-h) + var(--p1-gap) + var(--p1-dec-h) + var(--p1-gap));
}
body.game-active .game-page .spectator-banner{
  position:absolute;
  left:50%;
  right:auto;
  top:auto;
  bottom:10px;
  transform:translateX(-50%);
  z-index:8;
  padding:6px 14px;
  border:1px solid rgba(190,207,199,.16);
  border-radius:999px;
  background:rgba(12,22,17,.86);
  box-shadow:0 4px 12px rgba(4,9,7,.24);
  color:#d5dfda;
  font-size:13px;
  font-weight:750;
  line-height:1.2;
  white-space:nowrap;
  pointer-events:none;
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .game-board.spectator-table .spectator-seat-bottom .game-player-wrap{
    --p1-gap:3px;
    --p1-role-h:var(--m-role-h);
    --p1-dec-h:var(--m-dec-h);
  }
  body.game-active .game-page .game-board.game-board.game-board.spectator-table .spectator-seat-bottom .player-username,
  body.game-active .game-page .game-board.game-board.game-board.spectator-table .spectator-seat-bottom b.player-username{
    top:calc(100% + 2px);
    bottom:auto;
  }
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board.spectator-table .spectator-seat-bottom .player-role-status,
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board.spectator-table .spectator-seat-bottom .player-role-status:empty{
    position:absolute;
    left:50%;
    top:auto;
    bottom:calc(100% + var(--p1-gap));
    height:auto;
    min-height:var(--p1-role-h);
    transform:translateX(-50%);
  }
  body.game-active .game-page .game-board.game-board.game-board.spectator-table .spectator-seat-bottom .player-chat-bubble{
    top:auto;
    bottom:calc(100% + var(--p1-gap) + var(--p1-role-h) + var(--p1-gap) + var(--p1-dec-h) + var(--p1-gap));
  }
  body.game-active .game-page .spectator-banner{
    bottom:6px;
    padding:4px 12px;
    font-size:clamp(11px,3vw,12.5px);
  }
}
.game-top-actions .game-spectators{display:inline-flex;align-items:center;justify-content:center;align-self:stretch;flex:0 0 auto;gap:.36em;min-width:2.9em;padding:0 .8em;box-sizing:border-box;border:1px solid var(--panel-border);border-radius:9px;background:var(--filter-bg);color:var(--text-secondary);font-size:14px;font-weight:800;line-height:1;white-space:nowrap;cursor:default;user-select:none;-webkit-user-select:none}
.game-top-actions .game-spectators svg{width:1.3em;height:1.3em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.game-top-actions .game-spectators b{font-weight:800;font-variant-numeric:tabular-nums}
@media(max-width:720px){
  body.game-active .game-top-actions .game-spectators{font-size:12px;padding:0 .6em;min-width:0}
}
@media(max-width:350px){
  body.game-active .game-top-actions .game-spectators{font-size:11px;padding:0 .5em}
}
@media(max-width:1119px){
  .room-page.room-no-actions{padding-bottom:0}
  .room-page.room-no-actions .room-controls-card{display:none}
  .room-page.room-no-actions .room-layout{grid-template-areas:"players" "chat" "rounds"}
  .room-page.room-no-actions .room-layout.room-no-chat{grid-template-areas:"players" "rounds"}
}
body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-take,
body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-pass{
  position:relative;
  gap:.4em;
  border:1px solid transparent;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  -webkit-user-select:none;
  user-select:none;
  animation:dec-life var(--dec-life,1800ms) cubic-bezier(.2,.9,.3,1.1) both;
  box-shadow:
    0 0 0 1px var(--dec-edge),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -2px 4px var(--dec-shade),
    0 5px 11px rgba(0,0,0,.46),
    0 0 14px var(--dec-glow);
}
body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-take{
  --dec-shade:rgba(56,4,16,.55);
  --dec-edge:rgba(44,4,14,.78);
  --dec-glow:rgba(226,64,88,.34);
  color:#fff7ee;
  text-shadow:0 1px 1px rgba(60,4,14,.72);
  background:
    radial-gradient(120% 95% at 50% -30%,rgba(255,255,255,.34),rgba(255,255,255,0) 62%) padding-box,
    linear-gradient(180deg,#dd4a5f 0%,#b52a40 48%,#761328 100%) padding-box,
    linear-gradient(180deg,#ffeaa9 0%,#c8962f 50%,#f4d377 100%) border-box;
}
body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-pass{
  --dec-shade:rgba(96,58,6,.5);
  --dec-edge:rgba(72,44,6,.72);
  --dec-glow:rgba(246,198,63,.32);
  color:#33200a;
  text-shadow:0 1px 0 rgba(255,238,178,.7);
  background:
    radial-gradient(120% 95% at 50% -30%,rgba(255,255,255,.5),rgba(255,255,255,0) 62%) padding-box,
    linear-gradient(180deg,#ffe38f 0%,#f0bb45 50%,#c58a22 100%) padding-box,
    linear-gradient(180deg,#fffbe3 0%,#d7a339 50%,#8f5f14 100%) border-box;
}
body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-take::before,
body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-pass::before{
  content:"";
  flex:0 0 auto;
  width:1.15em;
  height:1.15em;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-take::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11.2'/%3E%3Cpath d='M7.2 10.2l4.8 4.8 4.8-4.8'/%3E%3Cpath d='M4.2 16.8v1.6a2.2 2.2 0 0 0 2.2 2.2h11.2a2.2 2.2 0 0 0 2.2-2.2v-1.6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11.2'/%3E%3Cpath d='M7.2 10.2l4.8 4.8 4.8-4.8'/%3E%3Cpath d='M4.2 16.8v1.6a2.2 2.2 0 0 0 2.2 2.2h11.2a2.2 2.2 0 0 0 2.2-2.2v-1.6'/%3E%3C/svg%3E");
}
body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-pass::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.9l5 5.1L19.6 6.6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.9l5 5.1L19.6 6.6'/%3E%3C/svg%3E");
}
body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-take::after,
body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-pass::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 60%) 100% 0%/260% 100% no-repeat;
  animation:dec-sheen 700ms ease-in-out 320ms both;
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-take,
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-pass{
    gap:.3em;
    letter-spacing:.03em;
    padding-inline:7px;
  }
}
@media(max-width:350px) and (orientation:portrait){
  body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-take::before,
  body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-pass::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-take,
  body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-pass,
  body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-take::after,
  body.game-active .game-page .game-board.game-board.game-board .player-decision-slot .player-decision-badge.decision-pass::after{animation:none}
}
@keyframes dec-life{
  0%{opacity:0;transform:translateY(7px) scale(.84)}
  11%{opacity:1;transform:translateY(-1px) scale(1.06)}
  18%{opacity:1;transform:none}
  86%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-3px) scale(.96)}
}
@keyframes dec-sheen{
  0%{background-position:100% 0%}
  100%{background-position:0% 0%}
}
@media(min-width:721px) and (min-height:501px){
  body.game-active .game-page{
    --d-u:1px;
    --d-name:calc(12.5 * var(--d-u));
    --d-tag:calc(10.5 * var(--d-u));
    --d-count:calc(11.5 * var(--d-u));
    --d-pill:calc(13 * var(--d-u));
    --d-drop:calc(3 * var(--d-u));
    --d-lift-side:clamp(0px,calc((870px - 100dvh) * .5 + 8px),calc(26 * var(--d-u)));
  }
  body.game-active .game-page .game-board.game-board.game-board .game-player-wrap{
    --d-role-h:calc(var(--d-tag) * 1.15 + 5 * var(--d-u));
    --d-role-top:calc(var(--d-drop) + var(--d-name) * 1.28 + 7 * var(--d-u));
    --player-status-slot-height:calc(var(--d-role-top) + var(--d-role-h) - 4px);
    --d-lift-top:clamp(0px,calc((860px - 100dvh) * .2),calc(var(--live-chip-avatar) * .25));
    grid-template-columns:minmax(0,1fr);
    gap:4px;
  }
  body.game-active .game-page .game-board.game-board.game-board .game-player .player-username,
  body.game-active .game-page .game-board.game-board.game-board .game-player b.player-username{
    top:calc(100% + var(--d-drop));
    bottom:auto;
    max-width:calc(var(--live-chip-width) + 44 * var(--d-u));
    padding:calc(1 * var(--d-u)) calc(10 * var(--d-u)) calc(2 * var(--d-u));
    border:1px solid rgba(190,207,199,.26);
    border-radius:999px;
    background:linear-gradient(180deg,rgba(24,35,30,.96),rgba(8,14,11,.96));
    box-shadow:0 2px 6px rgba(0,0,0,.4);
    font-size:var(--d-name);
    font-weight:700;
    line-height:1.28;
    text-shadow:none;
  }
  body.game-active .game-page .game-board.game-board.game-board .game-player.attacker .player-username{border-color:rgba(255,109,134,.6)}
  body.game-active .game-page .game-board.game-board.game-board .game-player.co-attacker .player-username{border-color:rgba(240,163,74,.65)}
  body.game-active .game-page .game-board.game-board.game-board .game-player.defender .player-username{border-color:rgba(99,173,255,.65)}
  body.game-active .game-page .game-board.game-board.game-board .game-player .player-card-meta{
    left:calc(-6 * var(--d-u));
    top:calc(-4 * var(--d-u));
    transform:none;
    padding:calc(2 * var(--d-u)) calc(6 * var(--d-u)) calc(2 * var(--d-u)) calc(5 * var(--d-u));
    border:1px solid rgba(214,226,219,.5);
    background:rgba(8,14,11,.95);
    box-shadow:0 2px 6px rgba(0,0,0,.45);
  }
  body.game-active .game-page .game-board.game-board.game-board .game-player .player-card-count{
    gap:calc(3 * var(--d-u));
    font-size:var(--d-count);
    font-weight:800;
    line-height:1;
    transform:none;
  }
  body.game-active .game-page .game-board.game-board.game-board .player-card-icon{
    width:calc(10 * var(--d-u));
    height:calc(12 * var(--d-u));
  }
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .player-role-status,
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .player-role-status:empty{
    align-self:end;
    justify-self:center;
    box-sizing:border-box;
    width:max-content;
    max-width:calc(var(--live-chip-width) + 44 * var(--d-u));
    height:var(--d-role-h);
    min-height:0;
    max-height:none;
    margin:0;
    padding:calc(1 * var(--d-u)) calc(9 * var(--d-u)) calc(2 * var(--d-u));
    border:1px solid transparent;
    border-radius:999px;
    font-size:var(--d-tag);
    font-weight:800;
    line-height:1.15;
    letter-spacing:.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:rgba(226,233,229,.78);
  }
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .player-role-status:empty{visibility:hidden}
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .game-player.attacker~.player-role-status{background:rgba(255,109,134,.2);border-color:rgba(255,109,134,.5);color:#ffc2cd}
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .game-player.co-attacker~.player-role-status{background:rgba(240,163,74,.2);border-color:rgba(240,163,74,.5);color:#ffd9a8}
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board .game-player.defender~.player-role-status{background:rgba(99,173,255,.2);border-color:rgba(99,173,255,.5);color:#bcdcff}
  body.game-active .game-page .game-board.game-board.spectator-table .spectator-seat-bottom .game-player-wrap{
    --p1-gap:5px;
    --p1-role-h:var(--d-role-h);
  }
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board.spectator-table .spectator-seat-bottom .player-role-status,
  body.game-active .game-page .game-board.game-board.game-board.game-board.game-board.spectator-table .spectator-seat-bottom .player-role-status:empty{
    align-self:auto;
    height:var(--p1-role-h);
  }
  body.game-active .game-page .game-board.seated-table .players-top .game-player-wrap,
  body.game-active .game-page .game-board.seated-table.six-player-table .players-side .game-player-wrap:first-child{
    translate:0 calc(-1 * var(--d-lift-top));
  }
  body.game-active .game-page .game-board.seated-table:not(.six-player-table) .players-side .game-player-wrap,
  body.game-active .game-page .game-board.seated-table.six-player-table .players-side .game-player-wrap:last-child{
    translate:0 calc(-1 * var(--d-lift-side));
  }
  body.game-active .game-page .game-board.game-board.game-board .game-player:has(.player-turn-countdown:not([hidden]))::before{
    content:"";
    position:absolute;
    inset:-3px;
    z-index:1;
    border-radius:50%;
    pointer-events:none;
    animation:d-ripple 1.9s ease-out infinite;
  }
  @keyframes d-ripple{
    0%{box-shadow:0 0 0 0 rgba(255,232,150,.55)}
    70%,100%{box-shadow:0 0 0 14px rgba(255,232,150,0)}
  }
  body.game-active .game-page .game-board.game-board.game-board .game-player-wrap .player-chat-bubble{
    width:max-content;
    max-width:calc(190 * var(--d-u));
    padding:calc(7 * var(--d-u)) calc(12 * var(--d-u));
    border-radius:calc(13 * var(--d-u));
    box-shadow:0 8px 18px rgba(0,0,0,.4);
    font-size:calc(12.5 * var(--d-u));
    font-weight:700;
    line-height:1.25;
  }
  body.game-active .game-page .game-board.game-board.game-board .pile>span{
    color:rgba(196,214,204,.74);
  }
  body.game-active .game-page .game-board.game-board.game-board .pile>b{
    padding:calc(1 * var(--d-u)) calc(9 * var(--d-u)) calc(2 * var(--d-u));
    border:1px solid rgba(214,226,219,.4);
    border-radius:999px;
    background:rgba(8,14,11,.94);
    box-shadow:0 2px 6px rgba(0,0,0,.45);
    font-size:calc(12.5 * var(--d-u));
    font-weight:800;
    line-height:1.2;
    color:#f1f5f3;
  }
  body.game-active .game-page .hand .playing-card.legal:not(.selected){
    --hand-lift:-8px;
    filter:drop-shadow(0 0 6px rgba(255,214,102,.55)) drop-shadow(0 7px 8px rgba(4,8,12,.28));
  }
  body.game-active .game-page .hand:has(.playing-card.legal) .playing-card.disabled{
    filter:brightness(.87) saturate(.9) drop-shadow(0 7px 8px rgba(4,8,12,.28));
  }
  body.game-active .game-page .hand-zone>.hand-status-row,
  body.game-active .game-page .hand-zone>.game-controls{pointer-events:none}
  body.game-active .game-page .hand-zone>.game-controls .btn{pointer-events:auto}
  body.game-active .game-page .game-board.game-board.game-board .hand-zone .hand-hint,
  body.game-active .game-page .game-board.game-board.game-board .hand-zone .turn-timer,
  body.game-active .game-page .game-board.game-board.game-board .hand-zone .hand-finish-message{
    padding:calc(5 * var(--d-u)) calc(13 * var(--d-u));
    font-size:var(--d-pill);
    line-height:1.15;
    transform:none;
  }
  body.game-active .game-page .game-board::after{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='260 180 504 330'%3E%3Cg transform='translate(512 370) scale(1.4) translate(-512 -370)' fill='%23000' fill-opacity='.16'%3E%3Cpath d='M405.5 456.5 L371.5 356.5 C376.6 355.8 380.6 353.1 383.8 347.2 L453.7 378.4 L500.8 292.2 C503.2 294.6 507 292.8 512 292.8 C517 292.8 520.8 294.6 523.2 292.2 L570.3 378.4 L640.3 348.1 C643.4 353.1 647.4 355.8 652.5 356.5 L618.5 456.5 C581.8 445 546 437 512 437 C478 437 442.2 445 405.5 456.5 Z'/%3E%3Ccircle cx='365' cy='336' r='22.5'/%3E%3Ccircle cx='512' cy='269' r='27.5'/%3E%3Ccircle cx='659' cy='336' r='22.5'/%3E%3C/g%3E%3C/svg%3E") 50% 46%/clamp(230px,30%,460px) auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 46'%3E%3Ctext x='160' y='31' text-anchor='middle' font-family='Arial,sans-serif' font-size='26' font-weight='800' letter-spacing='3' fill='%23000' fill-opacity='.16'%3EDurakArena.MD%3C/text%3E%3C/svg%3E") 50% 82%/clamp(280px,36%,560px) auto no-repeat,
      linear-gradient(115deg,rgba(255,255,255,.035) 0%,transparent 29%),
      radial-gradient(ellipse at 50% 44%,transparent 52%,rgba(0,28,17,.2) 100%);
  }
  body.game-active .game-page .game-board:has(.battle-pair)::after{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='260 180 504 330'%3E%3Cg transform='translate(512 370) scale(1.4) translate(-512 -370)' fill='%23000' fill-opacity='.07'%3E%3Cpath d='M405.5 456.5 L371.5 356.5 C376.6 355.8 380.6 353.1 383.8 347.2 L453.7 378.4 L500.8 292.2 C503.2 294.6 507 292.8 512 292.8 C517 292.8 520.8 294.6 523.2 292.2 L570.3 378.4 L640.3 348.1 C643.4 353.1 647.4 355.8 652.5 356.5 L618.5 456.5 C581.8 445 546 437 512 437 C478 437 442.2 445 405.5 456.5 Z'/%3E%3Ccircle cx='365' cy='336' r='22.5'/%3E%3Ccircle cx='512' cy='269' r='27.5'/%3E%3Ccircle cx='659' cy='336' r='22.5'/%3E%3C/g%3E%3C/svg%3E") 50% 46%/clamp(230px,30%,460px) auto no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 46'%3E%3Ctext x='160' y='31' text-anchor='middle' font-family='Arial,sans-serif' font-size='26' font-weight='800' letter-spacing='3' fill='%23000' fill-opacity='.07'%3EDurakArena.MD%3C/text%3E%3C/svg%3E") 50% 82%/clamp(280px,36%,560px) auto no-repeat,
      linear-gradient(115deg,rgba(255,255,255,.035) 0%,transparent 29%),
      radial-gradient(ellipse at 50% 44%,transparent 52%,rgba(0,28,17,.2) 100%);
  }
}
@media(min-width:721px) and (min-height:501px) and (max-height:819px){
  body.game-active .game-page{
    --d-drop:calc(-5 * var(--d-u));
  }
}
@media(min-width:1921px) and (min-height:1081px){
  body.game-active .game-page{--d-u:min(.0521vw,.0926vh)}
}
@media(min-width:721px){
  body.game-active .game-page .game-over{
    position:fixed;
    inset:0;
    z-index:25;
    background:
      radial-gradient(ellipse 62% 58% at 50% 48%,rgba(14,24,19,.5),rgba(5,9,7,.86) 100%),
      rgba(8,13,10,.3);
    -webkit-backdrop-filter:blur(9px) saturate(.85);
    backdrop-filter:blur(9px) saturate(.85);
  }
}
body.game-active .game-page .game-top-actions .self-seat-control{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  width:auto;
  min-width:0;
  padding:0 .85em 0 .7em;
  font-size:13px;
  font-weight:750;
  line-height:1;
  letter-spacing:.005em;
  white-space:nowrap;
}
.self-seat-control .seat-ctl-icon{display:grid;place-items:center;flex:0 0 auto}
.self-seat-control .seat-ctl-text{display:inline-flex;align-items:center}
.self-seat-control .seat-ctl-short{display:none}
body.game-active .game-page .game-top .self-seat-control span{font-size:inherit;color:inherit;line-height:inherit}
body.game-active .game-page .game-top-actions .enable-bot-control .seat-ctl-icon{color:#b6d9c8}
body.game-active .game-page .game-top-actions .enable-bot-control::after{
  content:"";
  flex:0 0 auto;
  width:1.95em;
  height:1.1em;
  margin-left:.2em;
  border-radius:999px;
  background:
    radial-gradient(circle at .55em 50%,#e6ece8 0 .4em,transparent .43em),
    rgba(255,255,255,.13);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
@media(hover:hover) and (pointer:fine){
  body.game-active .game-page .game-top-actions .enable-bot-control:hover{border-color:var(--panel-border-strong);background:var(--panel-bg-hover)}
}
body.game-active .game-page .game-top-actions .reclaim-seat-control{
  color:#2a1d07;
  border:1px solid rgba(255,236,170,.65);
  background:
    radial-gradient(130% 150% at 50% -35%,rgba(255,255,255,.28),transparent 58%),
    linear-gradient(180deg,#f9ecbf,#d8b968);
  box-shadow:0 0 0 0 rgba(240,206,110,.42),0 5px 14px -5px rgba(0,0,0,.6);
  animation:seat-ctl-pulse 2.6s ease-out infinite;
}
body.game-active .game-page .game-top-actions .reclaim-seat-control .seat-ctl-icon svg{stroke-width:2}
body.game-active .game-page .game-top-actions .self-seat-control:disabled{animation:none}
body.game-active .game-page .game-top-actions .self-seat-control:active:not(:disabled){transform:scale(.96)}
@media(hover:hover) and (pointer:fine){
  body.game-active .game-page .game-top-actions .reclaim-seat-control:hover{filter:brightness(1.07)}
}
@keyframes seat-ctl-pulse{
  0%{box-shadow:0 0 0 0 rgba(240,206,110,.42),0 5px 14px -5px rgba(0,0,0,.6)}
  70%,100%{box-shadow:0 0 0 8px rgba(240,206,110,0),0 5px 14px -5px rgba(0,0,0,.6)}
}
@media(max-width:720px){
  body.game-active .game-page .game-top-actions .self-seat-control{font-size:12px;gap:.4em;padding:0 .7em 0 .55em}
  .self-seat-control .seat-ctl-long{display:none}
  .self-seat-control .seat-ctl-short{display:inline}
}
@media(max-width:390px) and (max-height:700px) and (orientation:portrait){
  body.game-active .game-page .game-top-actions .self-seat-control{font-size:11px}
}
@media(max-width:350px){
  body.game-active .game-page .game-top-actions .enable-bot-control::after{display:none}
  body.game-active .game-page .game-top-actions .self-seat-control{padding:0 .6em 0 .5em}
}
body .btn.btn.btn{
  border-radius:11px;
  font-weight:700;
  letter-spacing:.012em;
  transition:transform .16s ease,box-shadow .22s ease,filter .22s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
}
body .btn.btn.btn.small,body .btn.btn.btn.tiny{border-radius:9px}
body .btn.btn.btn:active:not(:disabled){transform:translateY(1px) scale(.992)}
body .btn.btn.btn:disabled{opacity:.5;filter:none;cursor:not-allowed;transform:none}
body .btn.btn.btn:focus-visible{outline:2px solid rgba(246,198,63,.75);outline-offset:2px}
body .btn.btn.btn.primary,
body .btn.btn.btn.lobby-create-button,
body .btn.btn.btn.reclaim-seat-btn{
  color:#241a08;
  border:1px solid rgba(255,236,176,.5);
  background:linear-gradient(180deg,#f2d98e 0%,#e4bd58 58%,#d5a840 100%);
  box-shadow:inset 0 1px 0 rgba(255,250,228,.55),inset 0 -1px 0 rgba(120,80,10,.22),0 8px 20px -9px rgba(201,151,40,.6);
}
@media(hover:hover) and (pointer:fine){
  body .btn.btn.btn.primary:hover,
  body .btn.btn.btn.lobby-create-button:hover,
  body .btn.btn.btn.reclaim-seat-btn:hover{
    filter:brightness(1.06);
    transform:translateY(-1px);
    background:linear-gradient(180deg,#f2d98e 0%,#e4bd58 58%,#d5a840 100%);
    box-shadow:inset 0 1px 0 rgba(255,250,228,.6),inset 0 -1px 0 rgba(120,80,10,.22),0 12px 24px -9px rgba(201,151,40,.7);
  }
}
body .btn.btn.btn.secondary{
  color:#eee9dc;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),var(--filter-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body .btn.btn.btn.ghost:not(.room-leave-action){
  color:var(--text-secondary);
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  box-shadow:none;
}
@media(hover:hover) and (pointer:fine){
  body .btn.btn.btn.secondary:hover{border-color:rgba(246,198,63,.45);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),var(--panel-bg-hover)}
  body .btn.btn.btn.ghost:not(.room-leave-action):hover{color:var(--text-main);border-color:rgba(246,198,63,.4);background:rgba(255,255,255,.035)}
}
body .btn.btn.btn.danger-soft,
body .room-control-actions .btn.btn.room-leave-action,
body .room-control-actions .btn.btn.room-ready-action.is-unready{
  color:#f6dcd6;
  border:1px solid rgba(226,158,146,.3);
  background:linear-gradient(180deg,rgba(255,190,190,.07),rgba(255,190,190,0) 60%),linear-gradient(180deg,#4d1e2c,#381521);
  box-shadow:inset 0 1px 0 rgba(255,220,210,.08);
}
@media(hover:hover) and (pointer:fine){
  body .btn.btn.btn.danger-soft:hover,
  body .room-control-actions .btn.btn.room-leave-action:hover,
  body .room-control-actions .btn.btn.room-ready-action.is-unready:hover{border-color:rgba(238,180,168,.5);filter:brightness(1.1)}
}
body .room-control-actions .btn.btn.room-ready-action:not(.is-unready){
  color:#e1f7ec;
  border:1px solid rgba(96,208,160,.32);
  background:linear-gradient(180deg,rgba(200,255,225,.07),rgba(200,255,225,0) 60%),linear-gradient(180deg,#0f5a41,#0a4130);
  box-shadow:inset 0 1px 0 rgba(200,255,225,.1);
}
body .btn.btn.lobby-table-action{
  border:1px solid rgba(246,198,63,.5);
  border-radius:10px;
  color:#f3e7c4;
  font-weight:700;
  background:linear-gradient(180deg,rgba(246,198,63,.12),rgba(246,198,63,.04));
  box-shadow:inset 0 1px 0 rgba(255,236,176,.08);
}
@media(hover:hover) and (pointer:fine){
  body .btn.btn.lobby-table-action:hover{border-color:rgba(246,198,63,.8);background:linear-gradient(180deg,rgba(246,198,63,.2),rgba(246,198,63,.08))}
}
body .lobby-filter.active{
  border:1px solid rgba(246,198,63,.7);
  color:#f6d36f;
  background:linear-gradient(180deg,rgba(246,198,63,.14),rgba(246,198,63,.05));
}
body .auth-links button{font-size:13px;font-weight:650;letter-spacing:.01em;color:#e2c063;transition:color .18s ease}
@media(hover:hover) and (pointer:fine){
  body .auth-links button:hover{color:#f6dc8f;text-decoration:underline;text-underline-offset:3px}
}
body .back-link{transition:color .18s ease}
body .input{
  background:#0f1613;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
  transition:border-color .18s ease,box-shadow .18s ease;
}
body .input:focus{border-color:rgba(246,198,63,.6);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 0 0 3px rgba(246,198,63,.12)}
body .panel,body .auth-card,body .table-tile,body .loading-card{
  background-image:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 46%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px -14px rgba(0,0,0,.6);
}
@media(hover:hover) and (pointer:fine){
  body .table-tile.lobby-table-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 38px -14px rgba(0,0,0,.65)}
}
.panel,.auth-card,.loading-card{
  position:relative;
  background-image:
    radial-gradient(ellipse 90% 180px at 50% 0%,rgba(246,198,63,.07),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 46%);
}
.panel:before,.auth-card:before,.loading-card:before{
  content:"";position:absolute;inset:-1px -1px auto -1px;height:var(--radius);
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light) 50%,var(--gold-dark));
  -webkit-mask-image:linear-gradient(#000 4px,transparent 4px);
  mask-image:linear-gradient(#000 4px,transparent 4px);
  opacity:.85;
  pointer-events:none;
}
html[data-cards="v2ru"] .lobby-hero h1::before{background-image:url('/assets/cards/v2/JCru.svg')}
html[data-cards="v3"] .lobby-hero-copy::before{background-image:url('/assets/cards/v3/10H.svg')}
html[data-cards="v3"] .lobby-hero h1::before{background-image:url('/assets/cards/v3/JC.svg')}
html[data-cards="v3"] .lobby-hero h1::after{background-image:url('/assets/cards/v3/7D.svg')}
html[data-cards="v1"] .lobby-hero-copy::before{background-image:url('/assets/cards/v1/10H.svg')}
html[data-cards="v1"] .lobby-hero h1::before{background-image:url('/assets/cards/v1/JC.svg')}
html[data-cards="v1"] .lobby-hero h1::after{background-image:url('/assets/cards/v1/7D.svg')}
.card-style{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:780px;margin:0 0 12px}
.card-style-option{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.card-style-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.card-style-tile{
  display:grid;justify-items:center;gap:2px;
  padding:14px 8px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),var(--filter-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  text-align:center;
  transition:border-color .18s ease,box-shadow .2s ease,background-color .2s ease,transform .16s ease;
}
.card-style-preview{position:relative;display:block;width:84px;height:66px;margin-bottom:9px}
.card-style-preview img{position:absolute;bottom:0;width:44px;height:auto;aspect-ratio:250/350;border-radius:5px;box-shadow:0 7px 12px -5px rgba(0,0,0,.7);pointer-events:none;-webkit-user-select:none;user-select:none}
.card-style-preview img:first-child{left:6px;transform:rotate(-9deg)}
.card-style-preview img:last-child{right:6px;transform:rotate(8deg)}
.card-style-tile b{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text-main)}
.card-style-tile small{font-size:11px;letter-spacing:.08em;color:var(--text-secondary)}
.card-style-option input:checked+.card-style-tile{
  border-color:rgba(246,198,63,.75);
  background:linear-gradient(180deg,rgba(246,198,63,.14),rgba(246,198,63,.04)),var(--filter-bg);
  box-shadow:inset 0 1px 0 rgba(255,236,176,.1),0 10px 22px -12px rgba(201,151,40,.55);
}
.card-style-option input:checked+.card-style-tile b{color:#f6dc8f}
.card-style-option input:focus-visible+.card-style-tile{outline:2px solid rgba(246,198,63,.75);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .card-style-option:hover .card-style-tile{border-color:rgba(246,198,63,.42);transform:translateY(-1px)}
}
.card-style+small{display:block;line-height:1.5}
@media(max-width:720px){.card-style{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.card-style{gap:8px}.card-style-tile{padding:12px 4px 10px}}
.card-back-style{grid-template-columns:repeat(3,minmax(0,1fr));max-width:480px}
body .panel.lobby-create-panel{
  background-color:#122019;
  background-image:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 40%),linear-gradient(180deg,#17261f 0%,#122019 100%);
}
@media(max-width:1119px){
  .room-page{--room-bar-bottom:4px;--room-bar-side:7px;--room-bar-radius:17px}
  @supports (-webkit-touch-callout:none){
    .room-page{
      --room-bar-bottom:max(4px,calc(env(safe-area-inset-bottom) - 28px));
      --room-bar-side:max(7px,calc(env(safe-area-inset-bottom) - 22px));
      --room-bar-radius:max(17px,calc(env(safe-area-inset-bottom) - 10px));
    }
  }
  body .room-page{padding-bottom:calc(60px + var(--room-bar-bottom))}
  body .room-page .room-controls-card{
    left:var(--room-bar-side);
    right:var(--room-bar-side);
    bottom:var(--room-bar-bottom);
    padding:6px!important;
    border-radius:var(--room-bar-radius);
  }
}
.topbar .pwa-install-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  margin:0 8px 0 auto;
  min-height:36px;
  padding:0 13px 0 11px;
  border:1px solid rgba(246,198,63,.55);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(246,198,63,.18),rgba(246,198,63,.06));
  color:#f6dc8f;
  font-size:12.5px;
  font-weight:750;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,236,176,.1);
  -webkit-tap-highlight-color:transparent;
}
.topbar .pwa-install-button[hidden]{display:none}
.topbar .pwa-install-button svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.topbar .pwa-install-button:active{transform:scale(.97)}
.topbar .pwa-install-button:focus-visible{outline:2px solid rgba(246,198,63,.8);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .topbar .pwa-install-button:hover{border-color:rgba(246,198,63,.85);background:linear-gradient(180deg,rgba(246,198,63,.26),rgba(246,198,63,.1))}
}
@media(max-width:720px) and (min-width:361px){
  .topbar .pwa-install-button{
    position:absolute;
    left:50%;
    top:50%;
    margin:0;
    transform:translate(-50%,-50%);
  }
  .topbar .pwa-install-button:active{transform:translate(-50%,-50%) scale(.97)}
}
@media(max-width:360px){
  .topbar .pwa-install-button{margin-right:6px;padding:0 10px 0 9px;font-size:11.5px}
  .topbar .pwa-install-button svg{width:14px;height:14px}
}
.lobby-empty>.lobby-empty-joker{display:block;width:62px;height:auto;aspect-ratio:250/350;margin:0 auto 2px;border-radius:6px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));-webkit-user-select:none;user-select:none}
@media(min-width:721px) and (max-width:1100px){
  body.game-active .game-page .battlefield:has(.battle-pair){
    --battle-card-w:var(--hand-w);
    --battle-card-h:var(--hand-h);
    --battle-offset:clamp(12px,1.4vw,16px);
    --battle-gap:clamp(8px,1.1vw,14px);
  }
  body.game-active .game-page .battlefield:has(.battle-pair:nth-child(4)){
    --battle-card-w:min(var(--hand-w),max(60px,calc(38dvh - 195px)));
    --battle-card-h:calc(var(--battle-card-w) * 1.3959);
    --battle-offset:clamp(7px,.8vw,10px);
    --battle-gap:clamp(4px,.7vw,8px);
  }
  body.game-active .game-page .battlefield:has(.battle-pair) .battle-pair>.playing-card{
    width:var(--battle-card-w);
    height:var(--battle-card-h);
  }
}
html.game-active,body.game-active{--live-header-h:56px}
@media(max-width:720px){
  body.game-active .topbar{height:56px;min-height:56px;padding:6px 8px}
  body.game-active .brand strong{font-size:15px}
  body.game-active .mobile-menu{min-width:42px;min-height:42px}
  body.game-active .app-shell{height:calc(100dvh - 56px);max-height:calc(100dvh - 56px)}
  body.game-active .toast{top:62px}
}
@media(max-width:720px) and (orientation:portrait){
  body.game-active .topbar{height:56px;min-height:56px;padding:6px 8px}
  body.game-active .app-shell{height:calc(100svh - 56px);max-height:calc(100svh - 56px)}
}
@media(min-width:721px) and (max-width:1100px) and (min-height:501px) and (orientation:landscape){
  body.game-active .topbar{height:56px;min-height:56px;padding:6px max(14px,calc((100vw - 1260px)/2))}
  body.game-active .app-shell{height:calc(100dvh - 56px);max-height:calc(100dvh - 56px)}
  body.game-active .brand small{display:block}
  body.game-active .brand strong{font-size:15px}
  body.game-active .mobile-menu{display:none}
  body.game-active .nav-links,
  body.game-active .nav.open .nav-links{display:flex;position:static;width:auto;padding:0;flex-direction:row;align-items:center;background:none;border:0;border-radius:0;box-shadow:none}
  body.game-active .nav-links .nav-item,
  body.game-active .nav-links .btn,
  body.game-active .nav-links .lang-select{display:inline-block;width:auto;text-align:center}
  body.game-active .nav-links .credit-pill{display:inline-flex}
  body.game-active .nav-links .avatar-mini{display:inline-grid}
}
.pwa-install-card .pwa-install-logo{display:block;width:64px;height:42px;margin:0 0 16px;overflow:visible}
.profile-menu-wrap{position:relative}
.profile-menu-trigger{border:0;background:transparent;padding:2px;border-radius:50%;line-height:0;cursor:pointer}
.profile-menu-trigger:hover,.profile-menu-trigger:focus-visible{background:var(--filter-bg)}
.profile-menu-trigger:focus-visible{outline:2px solid var(--panel-border-strong);outline-offset:1px}
.profile-menu-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:120;width:272px;padding:18px 16px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;box-shadow:var(--shadow)}
.profile-menu-head{display:grid;justify-items:center;justify-content:center;text-align:center;gap:4px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--panel-border)}
.profile-menu-avatar{margin-bottom:4px}
.profile-menu-avatar .avatar-xl{width:72px;height:72px;font-size:26px;border:3px solid var(--gold-light);box-shadow:0 0 0 3px rgba(0,0,0,.35),0 10px 20px rgba(0,0,0,.4)}
.profile-menu-username{max-width:100%;color:var(--text-main);font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-menu-rating{display:flex;align-items:center;justify-content:center;gap:6px}
.profile-menu-rating b{font-size:17px;color:var(--gold-light)}
.profile-menu-rating-label{color:var(--text-muted);font-size:11px;font-weight:650}
.profile-menu-stats.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px}
.profile-menu-stats.stat-grid>div{padding:9px 10px}
.profile-menu-stat{display:flex;align-items:center;gap:8px;min-height:58px;text-align:left}
.profile-menu-stat b{display:block;font-size:15px;line-height:1.15}
.profile-menu-stat>div>span{display:block;font-size:10px;line-height:1.25;color:var(--text-muted)}
.profile-menu-stat-icon{display:grid;place-items:center;flex:0 0 auto;font-size:21px}
.profile-menu-stat-icon .coin-icon{width:16px;height:16px}
.profile-menu-manage{width:100%}
.daily-bonus-dot{position:absolute;top:0;right:0;z-index:2;width:10px;height:10px;border-radius:50%;background:#f1091d;box-shadow:0 0 0 2px var(--panel-bg,#181611);pointer-events:none}
.daily-bonus-dot[hidden]{display:none}
.daily-bonus-mobile-profile{position:relative;z-index:2;display:block;min-width:0}
.daily-bonus-mobile-profile .daily-bonus-dot{top:3px;right:25%}
.profile-menu-bonus{width:100%;margin-bottom:8px}
.profile-bonus-link{width:100%;margin:0 0 14px}
@media(max-width:720px){
  .daily-bonus-mobile-profile{height:48px}
  .daily-bonus-mobile-profile .mobile-profile-menu-panel{top:auto;bottom:calc(100% + 12px);right:0;width:min(272px,calc(100vw - 24px));max-height:calc(100vh - var(--mobile-nav-total-height) - 24px);max-height:calc(100dvh - var(--mobile-nav-total-height) - 24px);overflow-y:auto}
  .lobby-bottom-nav .mobile-profile-menu-panel .btn{height:auto;min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px}
}
.daily-bonus-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:4px 0 22px}
.daily-bonus-stage{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;min-width:0;min-height:210px;padding:20px;border:1px solid var(--panel-border);border-radius:18px;background:linear-gradient(155deg,var(--bonus-tint),transparent 64%),var(--filter-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.18)}
.daily-bonus-stage-1{--bonus-accent:#d6a677;--bonus-tint:rgba(187,119,70,.13)}
.daily-bonus-stage-2{--bonus-accent:#d5dce2;--bonus-tint:rgba(171,187,199,.12)}
.daily-bonus-stage-3{--bonus-accent:var(--gold-light);--bonus-tint:rgba(246,198,63,.17)}
.daily-bonus-stage.current{border-color:rgba(246,198,63,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(246,198,63,.18),0 12px 30px rgba(0,0,0,.22)}
.daily-bonus-stage-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.daily-bonus-stage-mark{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border:1px solid var(--bonus-accent);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.12),transparent),var(--bonus-tint);color:var(--bonus-accent);font-size:19px;font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.2)}
.daily-bonus-stage-top small{color:var(--text-secondary);font-size:11px;font-weight:700;text-align:right;line-height:1.4}
.daily-bonus-stage-rewards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:auto}
.daily-bonus-stage-rewards>div{padding:14px 8px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(0,0,0,.16);text-align:center}
.daily-bonus-stage-rewards b{display:block;color:var(--bonus-accent);font-size:21px;font-weight:850;line-height:1.1;font-variant-numeric:tabular-nums}
.daily-bonus-stage-rewards span{display:block;margin-top:5px;color:var(--text-secondary);font-size:10px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.daily-bonus-action{display:grid;justify-items:center;gap:9px;padding:22px 0 4px;border-top:1px solid var(--panel-border)}
.daily-bonus-action .daily-bonus-claim{min-width:220px;font-size:14px}
.daily-bonus-action .daily-bonus-claim:disabled{opacity:.55;cursor:not-allowed;pointer-events:none;filter:saturate(.6)}
.daily-bonus-action small{color:var(--text-muted);font-size:12px;text-align:center}
.daily-bonus-footer{margin:12px 0 0;color:var(--text-muted);font-size:11px;text-align:center}
.daily-bonus-retry{border:0;background:transparent;padding:0;color:var(--gold);font:inherit;text-decoration:underline;cursor:pointer}
@media(max-width:720px){.daily-bonus-grid{grid-template-columns:1fr}.daily-bonus-stage{min-height:0}.daily-bonus-stage-rewards{margin-top:0}}
.wheel-section{margin-top:38px}
.wheel-heading{margin:0 0 18px}
.wheel-heading .eyebrow{display:block;margin-bottom:5px;color:var(--gold);font-size:11px;letter-spacing:.15em}
.wheel-heading h2{margin:0 0 7px;color:var(--text-main);font-size:clamp(25px,3vw,34px);font-weight:900;letter-spacing:-.025em}
.wheel-heading p{max-width:680px;margin:0;color:var(--text-secondary);font-size:14px}
.wheel-panel{padding:24px;background:radial-gradient(circle at 24% 32%,rgba(246,198,63,.12),transparent 43%),radial-gradient(circle at 96% 100%,rgba(38,117,90,.1),transparent 40%),var(--panel-bg)}
.wheel-layout{display:grid;justify-items:center;max-width:588px;margin:0 auto}
.wheel-display{min-width:0;width:100%;display:grid;justify-items:center;align-content:start;text-align:center}
.wheel-frame{position:relative;width:min(100%,546px);aspect-ratio:1;display:grid;place-items:center;margin:0 auto 12px;filter:drop-shadow(0 18px 26px rgba(0,0,0,.4))}
.wheel-disc{width:100%;aspect-ratio:1;transform-origin:center;will-change:transform}
.wheel-disc.is-spinning{transition:transform 3.1s cubic-bezier(.13,.72,.12,1)}
.wheel-art{display:block;width:100%;height:100%}
.wheel-rim-outline{fill:none;stroke:#f4d894;stroke-width:2.5}
.wheel-rim{fill:none;stroke:url(#wheelRimGradient);stroke-width:26}
.wheel-rim-edge{fill:none;stroke:#f0c874;stroke-width:3}
.wheel-vignette{pointer-events:none}
.wheel-wedge{stroke:#d9ad5c;stroke-width:2.4}
.wheel-wedge.jackpot{fill:url(#wheelJackpotGradient);stroke:#ffe49c}
.wheel-wedge-suit{fill:#fff;opacity:.13;font-size:56px;font-weight:700;pointer-events:none}
.wheel-wedge-suit.jackpot{fill:#4a2f0a;opacity:.18}
.wheel-wedge-icon{fill:#f3cf7e;stroke:#6b4717;stroke-width:.5;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.wheel-wedge-icon.jackpot{fill:#5c3a16;stroke:#2e1d09}
.wheel-wedge-label{fill:#f9f3e4;stroke:rgba(9,17,13,.58);stroke-width:2.5;paint-order:stroke;pointer-events:none;font-family:inherit;font-weight:900}
.wheel-wedge-label.jackpot{fill:#34220b;stroke:rgba(255,237,181,.45)}
.wheel-wedge-amount{font-size:18px;letter-spacing:-.03em}
.wheel-wedge-label.jackpot .wheel-wedge-amount{font-size:12.5px;letter-spacing:.02em}
.wheel-wedge-unit{font-size:9.5px;font-weight:700}
.wheel-rim-facet{fill:#f3d179;stroke:#8a5a1c;stroke-width:1}
.wheel-rim-stud{fill:url(#wheelStudGradient);stroke:#6b4717;stroke-width:.75}
.wheel-rim-light{fill:#ffe9ad;stroke:#c89433;stroke-width:1;filter:drop-shadow(0 0 4px rgba(255,214,120,.8))}
.wheel-hub{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:104px;height:104px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 36% 28%,#2c261f,#0b0906 72%);box-shadow:0 0 0 3px #190f06,0 0 0 10px #e3b159,0 0 0 13px #6b4717,0 0 0 18px #f6d98c,0 0 0 20px #5c3c14,inset 0 4px 8px rgba(0,0,0,.65),inset 0 -3px 4px rgba(255,255,255,.06),0 11px 25px rgba(0,0,0,.5)}
.wheel-hub-icon{width:62%;height:62%;fill:#f3d381}
.wheel-pointer{position:absolute;left:50%;top:-7px;z-index:3;width:70px;transform:translateX(-50%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
.wheel-display .wheel-spin{width:min(322px,100%);min-height:48px;font-size:15px}
.wheel-action-note{min-height:17px;margin:10px 0 0;color:var(--text-secondary);font-size:12px;line-height:1.4}
.wheel-result{display:grid;place-items:center;min-height:49px;width:min(100%,476px);margin-top:14px;padding:10px 13px;border:1px solid var(--panel-border);border-radius:12px;background:var(--filter-bg);color:var(--text-main);font-size:12px;font-weight:750;line-height:1.45}
.wheel-result.jackpot{border-color:rgba(246,198,63,.7);background:linear-gradient(120deg,rgba(246,198,63,.2),rgba(246,198,63,.05));color:var(--gold-light);box-shadow:0 0 24px rgba(246,198,63,.12)}
.wheel-credits-box{display:flex;align-items:center;justify-content:center;gap:9px;min-height:49px;width:min(100%,476px);margin-top:14px;padding:10px 16px;border:1px solid rgba(246,198,63,.35);border-radius:12px;background:linear-gradient(115deg,rgba(246,198,63,.16),rgba(246,198,63,.04)),var(--filter-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);color:var(--text-secondary);font-size:13px;font-weight:700}
.wheel-credits-box strong{color:var(--gold-light);font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.wheel-error{margin:14px 0 0}
.wheel-loading{min-height:300px;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center}
.wheel-loading .notice{margin:0}
.wheel-loading-icon{display:grid;place-items:center;width:70px;height:70px;border:2px solid rgba(246,198,63,.5);border-radius:50%;background:rgba(246,198,63,.08);color:var(--gold-light);font-size:32px}
.wheel-prize-modal{
  background:radial-gradient(ellipse 62% 58% at 50% 46%,rgba(14,24,19,.55),rgba(5,9,7,.9) 100%),rgba(5,4,3,.32);
  -webkit-backdrop-filter:blur(10px) saturate(.85);
  backdrop-filter:blur(10px) saturate(.85);
}
.wheel-prize-card{position:relative;width:min(380px,100%);padding:40px 28px 32px;border:1px solid rgba(246,198,63,.35);border-radius:20px;background:radial-gradient(circle at 50% 0%,rgba(246,198,63,.16),transparent 60%),linear-gradient(180deg,#17261f 0%,#0d1712 100%);box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);text-align:center;overflow:hidden}
.wheel-prize-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wheel-prize-confetti i{position:absolute;top:-10%;width:8px;height:14px;border-radius:2px;opacity:0;animation:wheel-confetti-fall var(--confetti-duration,2s) ease-in var(--confetti-delay,0s) 1 both}
@keyframes wheel-confetti-fall{
  0%{opacity:0;transform:translate(0,-20px) rotate(0deg)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(var(--confetti-drift,0px),420px) rotate(var(--confetti-spin,360deg))}
}
.wheel-prize-title{position:relative;z-index:1;margin:0 0 22px;color:var(--text-main);font-size:30px;font-weight:900;letter-spacing:-.02em}
.wheel-prize-badge{position:relative;z-index:1;display:grid;place-items:center;width:128px;height:128px;margin:0 auto 20px}
.wheel-prize-badge-ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(246,198,63,.5) 0%,rgba(246,198,63,.12) 55%,transparent 72%);box-shadow:0 0 50px 8px rgba(246,198,63,.35);animation:wheel-prize-glow-pulse 2.2s ease-in-out infinite}
.wheel-prize-badge-coin{position:relative;z-index:1;display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:linear-gradient(180deg,#1e2b23,#121d17);box-shadow:0 10px 24px rgba(0,0,0,.4),inset 0 0 0 1px rgba(246,198,63,.3)}
.wheel-prize-badge-coin .coin-icon{width:62px;height:62px}
.wheel-prize-badge-coin .wheel-prize-star{font-size:62px;line-height:1}
@keyframes wheel-prize-glow-pulse{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}
.wheel-prize-amount{position:relative;z-index:1;margin:0 0 7px;color:var(--gold-light);font-size:26px;font-weight:900;letter-spacing:-.01em}
.wheel-prize-subtitle{position:relative;z-index:1;margin:0 0 26px;color:var(--text-secondary);font-size:13px}
.wheel-prize-continue{position:relative;z-index:1;width:100%;min-height:48px;font-size:15px}
.wheel-prize-modal.jackpot .wheel-prize-badge-ring{box-shadow:0 0 70px 12px rgba(246,198,63,.55)}
.wheel-prize-modal.jackpot .wheel-prize-amount{font-size:21px}
@media(max-width:430px){
  .wheel-prize-card{padding:32px 20px 26px;border-radius:18px}
  .wheel-prize-title{font-size:25px;margin-bottom:18px}
  .wheel-prize-badge{width:106px;height:106px;margin-bottom:16px}
  .wheel-prize-badge-coin{width:72px;height:72px}
  .wheel-prize-badge-coin .coin-icon{width:52px;height:52px}
  .wheel-prize-badge-coin .wheel-prize-star{font-size:52px}
  .wheel-prize-amount{font-size:22px}
}
@media(max-width:800px){.wheel-frame{width:min(100%,504px)}}
@media(max-width:430px){
  .wheel-section{margin-top:30px}.wheel-panel{padding:16px}.wheel-frame{width:min(100%,448px)}
  .wheel-hub{width:87px;height:87px;box-shadow:0 0 0 3px #190f06,0 0 0 8px #e3b159,0 0 0 11px #6b4717,0 0 0 15px #f6d98c,0 0 0 17px #5c3c14,inset 0 3px 7px rgba(0,0,0,.6),inset 0 -1px 3px rgba(255,255,255,.06),0 8px 20px rgba(0,0,0,.45)}
  .wheel-pointer{width:59px}
}
@media(max-width:720px){
  .nav-links .profile-menu-wrap{display:none}
}
.stat-grid>div:last-child:nth-child(odd){grid-column:1/-1}
.leaderboard-title{display:flex;align-items:center;gap:11px}
.leaderboard-title-icon{font-size:.72em;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.leaderboard-title-text{
  background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 55%,var(--gold-dark) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.leaderboard-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:4px;margin:0 0 16px;background:var(--filter-bg);border:1px solid var(--panel-border);border-radius:14px}
.leaderboard-tab{min-height:38px;padding:8px 4px;border:0;border-radius:10px;background:transparent;color:var(--text-secondary);font-size:12.5px;font-weight:800;line-height:1.15;white-space:normal;transition:.15s background-color,.15s color}
.leaderboard-tab.active{background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 100%);color:#16120a;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 4px rgba(120,80,10,.25),0 4px 12px rgba(185,127,15,.28)}
@media(hover:hover) and (pointer:fine){
  .leaderboard-tab:not(.active):hover{background:var(--panel-bg-hover);color:var(--text-main)}
}
.leaderboard-panel{
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse 90% 220px at 50% 0%,rgba(246,198,63,.1),transparent 72%),var(--panel-bg);
}
.leaderboard-panel:before{content:"";position:absolute;inset:-1px -1px auto -1px;height:4px;border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light) 50%,var(--gold-dark));opacity:.85}
.leaderboard-podium{position:relative;display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;margin-bottom:16px}
.leaderboard-podium:before{content:"";position:absolute;left:50%;top:-10px;width:70%;height:125%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(246,198,63,.2),transparent 70%);pointer-events:none}
.podium-spot{position:relative;overflow:hidden;display:grid;justify-items:center;align-content:start;gap:6px;min-width:0;min-height:150px;padding:16px 6px 14px;border:1px solid var(--panel-border);border-radius:16px;background:var(--filter-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 14px rgba(0,0,0,.18)}
.podium-place-1{
  order:2;min-height:190px;padding-top:34px;padding-bottom:20px;
  --medal-ring:var(--gold);--medal-glow:rgba(246,198,63,.6);
  background:linear-gradient(180deg,rgba(246,198,63,.18),var(--filter-bg) 72%);
  border-color:var(--panel-border-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.22),0 0 0 1px rgba(246,198,63,.1);
}
.podium-place-2{
  order:1;
  --medal-ring:#c7d0d8;--medal-glow:rgba(199,208,216,.55);
  background:linear-gradient(180deg,rgba(199,208,216,.14),var(--filter-bg) 72%);
  border-color:rgba(199,208,216,.4);
}
.podium-place-3{
  order:3;
  --medal-ring:#d69a5c;--medal-glow:rgba(214,154,92,.55);
  background:linear-gradient(180deg,rgba(214,154,92,.16),var(--filter-bg) 72%);
  border-color:rgba(214,154,92,.4);
}
.podium-place-1:before,.podium-place-2:before,.podium-place-3:before{
  content:"";position:absolute;inset:0;background-repeat:repeat;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Csvg x='10' y='10' width='80' height='80' viewBox='0 0 512 512'%3E%3Cpath fill='%23111111' d='M256 36 C237 72 208 108 174 145 C134 188 92 225 72 277 C49 337 76 394 126 417 C173 439 217 421 242 382 C245 416 237 447 213 474 L299 474 C275 447 267 416 270 382 C295 421 339 439 386 417 C436 394 463 337 440 277 C420 225 378 188 338 145 C304 108 275 72 256 36 Z'/%3E%3C/svg%3E%3Csvg x='110' y='10' width='80' height='80' viewBox='0 0 512 512'%3E%3Cpath fill='%23d7263d' d='M256 458 74 276C16 218 16 124 74 68c52-50 132-48 181 6 49-54 129-56 181-6 58 56 58 150 0 208L256 458Z'/%3E%3C/svg%3E%3Csvg x='10' y='110' width='80' height='80' viewBox='0 0 512 512'%3E%3Cpath fill='%23d7263d' d='M256 40 428 256 256 472 84 256Z'/%3E%3C/svg%3E%3Csvg x='110' y='110' width='80' height='80' viewBox='0 0 120 120'%3E%3Cpath fill='%23111111' transform='translate(10 10)' d='M50 6 C38 6 29 16 29 29 C29 34 31 38 34 42 C30 40 25 39 21 39 C8 39 -1 49 -1 62 C-1 76 9 87 23 87 C34 87 41 81 45 73 L45 82 C45 90 40 95 31 99 L69 99 C60 95 55 90 55 82 L55 73 C59 81 66 87 77 87 C91 87 101 76 101 62 C101 49 92 39 79 39 C75 39 70 40 66 42 C69 38 71 34 71 29 C71 16 62 6 50 6 Z'/%3E%3C/svg%3E%3C/svg%3E");
  background-size:72px 72px;
  opacity:.11;
}
.podium-place-1:after,.podium-place-2:after,.podium-place-3:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.22) 45%,rgba(255,255,255,.05) 55%,transparent 80%);background-repeat:no-repeat;background-size:220% 100%;background-position:160% 0;animation:podium-shine 4.5s ease-in-out infinite;pointer-events:none}
.podium-place-2:after{animation-delay:.5s}
.podium-place-3:after{animation-delay:1s}
.podium-crown{position:absolute;top:6px;left:50%;font-size:20px;color:var(--gold);transform:translateX(-50%);text-shadow:0 3px 8px rgba(0,0,0,.4),0 0 6px rgba(246,198,63,.45);animation:podium-crown-bounce 2.4s ease-in-out infinite;will-change:transform}
.podium-crown:after{content:"♛";position:absolute;inset:0;color:inherit;text-shadow:0 5px 10px rgba(0,0,0,.4),0 0 18px rgba(246,198,63,1);opacity:0;animation:podium-crown-glow-pulse 2.4s ease-in-out infinite;will-change:opacity}
.podium-avatar-wrap{position:relative}
.podium-place-1 .avatar-xl{width:72px;height:72px;font-size:26px}
.podium-place-2 .avatar-xl,.podium-place-3 .avatar-xl{width:56px;height:56px;font-size:20px}
.podium-avatar-wrap .avatar-xl{box-shadow:0 0 0 3px var(--medal-ring),0 10px 20px rgba(0,0,0,.32);animation:podium-avatar-glow 2.6s ease-in-out infinite}
.podium-place-2 .avatar-xl{animation-delay:.4s}
.podium-place-3 .avatar-xl{animation-delay:.8s}
@keyframes podium-shine{0%,55%{background-position:160% 0}85%,100%{background-position:-60% 0}}
@keyframes podium-crown-bounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-3px)}
}
@keyframes podium-crown-glow-pulse{
  0%,100%{opacity:0}
  50%{opacity:1}
}
@keyframes podium-avatar-glow{
  0%,100%{box-shadow:0 0 0 3px var(--medal-ring),0 10px 20px rgba(0,0,0,.32),0 0 0 0 transparent}
  50%{box-shadow:0 0 0 3px var(--medal-ring),0 10px 20px rgba(0,0,0,.32),0 0 20px 3px var(--medal-glow)}
}
@media(prefers-reduced-motion:reduce){
  .podium-crown,.podium-crown:after,.podium-avatar-wrap .avatar-xl,.podium-place-1:after,.podium-place-2:after,.podium-place-3:after{animation:none}
}
.podium-rank-badge{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--panel-bg);border-radius:50%;background:var(--stats-neutral-bg,rgba(52,49,42,.92));color:var(--text-secondary);font-size:11px;font-weight:900}
.podium-place-1 .podium-rank-badge{width:26px;height:26px;font-size:13px;background:linear-gradient(145deg,#ffe27a,#d8a92e);color:#241a08}
.podium-place-2 .podium-rank-badge{background:linear-gradient(145deg,#f1f4f6,#b7c0c8);color:#1f2429}
.podium-place-3 .podium-rank-badge{background:linear-gradient(145deg,#e6b587,#a9713a);color:#241a08}
.podium-name{max-width:100%;overflow:hidden;color:var(--text-main);font-weight:750;font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
.podium-place-1 .podium-name{font-size:14px}
.podium-spot .leaderboard-gain{min-width:0;padding:4px 9px;font-size:11px}
.podium-me{border-color:rgba(246,198,63,.6)}
.leaderboard-list{display:grid;gap:8px}
.leaderboard-load-more{display:flex;align-items:center;margin:14px auto 0;gap:6px}
.leaderboard-load-more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.leaderboard-row{
  display:grid;
  grid-template-columns:38px 44px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:1px solid var(--panel-border);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--filter-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 12px rgba(0,0,0,.16);
  transition:.15s background-color,.15s border-color,.15s transform;
}
.leaderboard-podium+.leaderboard-list{margin-top:2px}
@media(hover:hover) and (pointer:fine){
  .leaderboard-row:hover{background:var(--panel-bg-hover);border-color:var(--panel-border-strong);transform:translateY(-1px)}
}
.leaderboard-row .avatar-mini{width:44px;height:44px;display:inline-grid}
.leaderboard-rank{
  width:34px;
  height:34px;
  margin:0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--stats-neutral-bg,rgba(52,49,42,.92));
  color:var(--text-secondary);
  font-size:12px;
  font-weight:800;
}
.leaderboard-name{overflow:hidden;color:var(--text-main);font-weight:750;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.leaderboard-gain{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:60px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(142,213,255,.28);
  background:rgba(142,213,255,.12);
  color:var(--stats-blue-text,#8ed5ff);
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.leaderboard-row-me{
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),rgba(246,198,63,.1);
  border-color:rgba(246,198,63,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px rgba(246,198,63,.12);
}
@media(max-width:560px){
  .leaderboard-tabs{gap:4px;padding:3px}
  .leaderboard-tab{min-height:34px;padding:6px 3px;font-size:11px}
  .leaderboard-podium{gap:6px;margin-bottom:12px}
  .podium-spot{min-height:118px;padding:12px 4px 10px;border-radius:14px}
  .podium-place-1:before,.podium-place-2:before,.podium-place-3:before{background-size:50px 50px}
  .podium-place-1{min-height:150px;padding-top:28px;padding-bottom:16px}
  .podium-place-1 .avatar-xl{width:60px;height:60px;font-size:22px}
  .podium-place-2 .avatar-xl,.podium-place-3 .avatar-xl{width:46px;height:46px;font-size:16px}
  .podium-name{font-size:11px}
  .podium-place-1 .podium-name{font-size:12.5px}
  .podium-spot .leaderboard-gain{font-size:10px;padding:3px 7px}
  .leaderboard-row{grid-template-columns:30px 38px minmax(0,1fr) auto;gap:8px;padding:9px 10px}
  .leaderboard-row .avatar-mini{width:38px;height:38px}
  .leaderboard-rank{width:28px;height:28px;font-size:11px}
  .leaderboard-name{font-size:12.5px}
  .leaderboard-gain{min-width:0;padding:5px 10px;font-size:12px}
}
.result-values{display:flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap}
.result-row b.result-rating{color:var(--stats-blue-text,#8ed5ff)}