/*! ---------------------------------------------------------------------------
  Indian Rummy — table stylesheet
  Copyright (c) 2026 Agswamy Software Technologies. All rights reserved.
  Proprietary and confidential. Copying, rehosting, modifying or redistributing
  this stylesheet, in whole or in part, is not permitted without written
  permission. See LICENSE for the full terms.
--------------------------------------------------------------------------- */
:root{--cream:#f4ecda;--cream-deep:#eadfc6;--panel:#fdfaf1;--panel-2:#f8f2e2;--line:#e6d8b7;--line-soft:#f0e6cf;--gold:#c8a24c;--gold-lt:#e7d29a;--gold-dk:#9a7826;--gold-deep:#7c5f1c;--ink:#3a2f18;--ink-2:#6b5a37;--ink-3:#9c8b67;--ink-4:#b9ab8c;--felt-1:#a8834f;--felt-2:#8b6a41;--felt-3:#715534;--felt-4:#59422a;--felt-5:#453320;--wood:#6b5228;--wood-lt:#c2a065;--card-face:#fffdf7;--card-edge:#d9caa6;--suit-red:#c0352c;--suit-black:#23262c;--back-1:#2c5296;--back-2:#142c58;--ok:#1f7a4d;--warn:#b3821f;--bad:#b23a32;--font-display:Georgia,"Iowan Old Style","Times New Roman",serif;--font-ui:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;--cw:clamp(40px, min(3.75vw, 6.9vh), 70px);--ch:calc(var(--cw) * 1.42);--cw-sm:clamp(26px, min(3.1vw, 5.6vh), 58px);--ch-sm:calc(var(--cw-sm) * 1.42);--cw-pile:clamp(52px, min(5vw, 9vh), 100px);--ch-pile:calc(var(--cw-pile) * 1.42);--radius:10px;--shadow-panel:0 1px 2px rgba(90,68,26,.06),0 8px 22px rgba(120,94,40,.10);--shadow-soft:0 2px 5px rgba(80,60,20,.16),0 10px 24px rgba(80,60,20,.12);--ease:cubic-bezier(.22,.61,.36,1)}
*,::after,::before{box-sizing:border-box}
body,html{height:100%}
body{margin:0;font-family:var(--font-ui);font-size:14px;color:var(--ink);background:linear-gradient(180deg,#fdf9ee 0,#f7f0e2 32%,var(--cream) 64%,var(--cream-deep) 100%);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit}
::selection{background:rgba(200,162,76,.35)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:18px;height:18px;display:block;flex:none;fill:currentColor}
.wallpaper{position:fixed;inset:0;z-index:0;pointer-events:none}
.dot{opacity:.55;margin:0 4px}
.app{position:relative;z-index:1;height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:10px clamp(14px,1.6vw,26px) 8px;border-bottom:1px solid rgba(190,166,110,.34);position:relative}
.brand{grid-column:2;justify-self:center;display:flex;align-items:center;gap:10px;min-width:0}
.brand-crown{width:clamp(26px,3.3vh,36px);height:clamp(26px,3.3vh,36px);color:var(--gold-dk);filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.brand-text{text-align:center}
.brand-text h1{margin:0;font:700 clamp(18px, 2.5vh, 27px)/1 var(--font-display);letter-spacing:.015em;background:linear-gradient(180deg,#e0bd68 0,#b58c2c 55%,#8f6d1c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.brand-text p{margin:5px 0 0;font-size:clamp(7.5px, .95vh, 9.5px);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.topbar-right{grid-column:3;justify-self:end;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.icon-btn{position:relative;width:clamp(32px,4.2vh,40px);height:clamp(32px,4.2vh,40px);display:grid;place-items:center;border-radius:9px;border:1px solid var(--line);background:linear-gradient(180deg,#fffdf7,#f6efe0);color:var(--ink-2);cursor:pointer;box-shadow:0 1px 2px rgba(90,68,26,.1);transition:transform .16s var(--ease),box-shadow .16s var(--ease),color .16s}
.icon-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(120,94,40,.2);color:var(--gold-dk)}
.icon-btn:active{transform:translateY(0)}
.icon-btn.sm{width:28px;height:28px;border-radius:7px}
.icon-btn.sm .ic{width:15px;height:15px}
.icon-btn.gold{background:linear-gradient(180deg,#d7b25c,#b58c2c);border-color:#8f6d1c;color:#3a2a06}
.badge-dot{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:linear-gradient(180deg,#d1463c,#a92b23);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;border:1.5px solid #fdfaf1;box-shadow:0 1px 3px rgba(120,20,20,.35)}
.avatar{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--font-display);color:#fff8e6;border:2px solid rgba(231,210,154,.92);box-shadow:0 2px 6px rgba(50,35,10,.32);text-shadow:0 1px 1px rgba(0,0,0,.35)}
.avatar-priya{background:linear-gradient(160deg,#d2708c,#a13c60)}
.avatar-arjun{background:linear-gradient(160deg,#3f8f8a,#1f5f63)}
.avatar-meera{background:linear-gradient(160deg,#8a6fc4,#533a8f)}
.avatar-self{background:linear-gradient(160deg,#d3a44a,#9a6f1d)}
.main{display:grid;grid-template-columns:clamp(196px,14.6vw,244px) minmax(0,1fr) clamp(178px,13.2vw,220px);gap:clamp(8px,1vw,18px);padding:8px clamp(14px,1.6vw,26px) 0;min-height:0}
.rail{display:flex;flex-direction:column;gap:10px;min-height:0}
.panel{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-panel);padding:11px 13px 12px;position:relative}
.panel::after{content:"";position:absolute;inset:4px;border:1px solid rgba(214,192,140,.45);border-radius:8px;pointer-events:none}
.panel-title{display:flex;align-items:center;gap:7px;margin:0 0 9px;font:700 13px/1 var(--font-display);letter-spacing:.04em;color:var(--ink)}
.panel-title .ic{width:17px;height:17px;color:var(--gold-dk)}
.info-list{margin:0;display:grid;gap:5px}
.info-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11.5px;padding:2px 0;border-bottom:1px dashed rgba(214,192,140,.45)}
.info-row:last-child{border-bottom:0}
.info-row dt{color:var(--ink-3)}
.info-row dd{margin:0;color:var(--ink);font-weight:600;text-align:right}
.info-row dd.is-joker{color:var(--gold-deep)}
.scores{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.score-row{display:grid;grid-template-columns:9px 1fr auto auto;align-items:center;gap:7px;font-size:11.5px;padding:4px 5px;border-radius:7px;transition:background .2s}
.score-row .who{display:flex;align-items:center;gap:5px;min-width:0;color:var(--ink-2)}
.score-row .who .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.score-row .tag{flex:none;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:1px 5px;border-radius:999px;border:1px solid rgba(154,120,38,.45);background:rgba(200,162,76,.16);color:var(--gold-deep)}
.score-row .delta{font-size:10.5px;color:var(--ink-3);min-width:26px;text-align:right}
.score-row .total{font-weight:700;color:var(--ink);min-width:30px;text-align:right;font-variant-numeric:tabular-nums}
.score-row .sdot{width:8px;height:8px;border-radius:50%;background:var(--ink-4)}
.score-row.is-active{background:rgba(200,162,76,.16)}
.score-row.is-active .sdot{background:var(--gold);box-shadow:0 0 0 3px rgba(200,162,76,.22)}
.score-row.is-folded{opacity:.72}
.score-row.is-out{opacity:.5}
.score-row.is-out .tag{border-color:rgba(178,58,50,.45);background:rgba(178,58,50,.12);color:var(--bad)}
.score-row.is-out .total{text-decoration:line-through}
.score-row.is-you .who{font-weight:700;color:var(--ink)}
.score-row .delta.pos{color:var(--bad)}
.score-row .delta.zero{color:var(--ok)}
.panel-note{margin:9px 0 0;font-size:9.5px;line-height:1.45;color:var(--ink-3)}
.panel-note b{color:var(--gold-deep)}
.panel-history{flex:0 0 auto;display:flex;flex-direction:column}
.history{list-style:none;margin:0;padding:0 4px 0 0;display:grid;gap:3px;overflow-y:auto;flex:1 1 auto;max-height:100%;scrollbar-width:thin}
.history::-webkit-scrollbar{width:6px}
.history::-webkit-scrollbar-thumb{background:rgba(200,162,76,.45);border-radius:3px}
.history li{display:grid;grid-template-columns:9px 1fr;gap:7px;align-items:start;padding:3px 0;font-size:11px;line-height:1.3}
.history .hdot{width:8px;height:8px;margin-top:4px;border-radius:50%;background:var(--ink-4);box-shadow:0 0 0 2.5px rgba(0,0,0,.045)}
.history .hdot.pick{background:#2f8f5b}
.history .hdot.discard{background:#c0403a}
.history .hdot.info{background:var(--gold)}
.history .hdot.declare{background:#2f6fbf}
.history .htxt{color:var(--ink-2)}
.history .htxt b{color:var(--ink);font-weight:600}
.history .htxt .suit-D,.history .htxt .suit-H{color:var(--suit-red)}
.history .htxt .suit-C,.history .htxt .suit-S{color:var(--suit-black)}
.history .htime{display:block;font-size:9.5px;color:var(--ink-4);margin-top:1px}
.rail-tagline{margin:auto 0 2px;display:flex;align-items:center;justify-content:center;gap:9px;text-align:left;color:var(--ink-3)}
.rail-tagline .ic{width:26px;height:26px;color:rgba(200,162,76,.75)}
.rail-tagline em{font:italic 400 clamp(11px, 1.5vh, 15px)/1.35 var(--font-display);letter-spacing:.02em}
.tl-small{font-size:.82em;letter-spacing:.06em}
.action-card{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:9px 2px;text-align:left;border:0;border-radius:8px;background:0 0;box-shadow:none;cursor:pointer;transition:color .16s var(--ease),transform .16s var(--ease)}
.action-card:hover{transform:translateX(2px)}
.action-card:active{transform:translateX(0)}
.action-card:hover .ac-text strong{color:var(--gold-deep)}
.action-card .ac-icon{width:24px;height:24px;padding:0;border:0;background:0 0;color:var(--gold-deep);box-sizing:content-box}
.ac-text{display:grid;gap:2px;min-width:0}
.ac-text strong{font:700 12.5px/1 var(--font-display);color:var(--ink);transition:color .16s}
.ac-text small{font-size:9.5px;color:var(--ink-3)}
.action-card:disabled{cursor:default;opacity:.42}
.action-card:disabled:hover{transform:none}
.action-card:disabled:hover .ac-text strong{color:var(--ink)}
.action-card.is-ready .ac-icon,.action-card.is-ready .ac-text strong{color:var(--gold-deep)}
.action-card.is-ready .ac-icon{animation:readyPulse 1.9s ease-in-out infinite}
@keyframes readyPulse{
0%,100%{opacity:1}
50%{opacity:.4}
}
a.action-card{text-decoration:none;color:inherit}
.rail-sep{height:0;margin:7px 2px;border:0;border-top:1px solid var(--line)}
.rail-thumb{display:block;margin:2px 0 0;line-height:0;transition:transform .16s var(--ease)}
.rail-thumb img{display:block;width:100%;height:auto}
.rail-thumb:hover{transform:translateY(-3px)}
.rail-thumb:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px;border-radius:8px}
.stage{position:relative;min-height:0;min-width:0}
.table{position:absolute;inset:1% 1.5%;border-radius:50%;background:radial-gradient(115% 96% at 50% 34%,#a8834f 0,#8b6a41 32%,#715534 60%,#59422a 84%,#453320 100%);box-shadow:inset 0 0 0 2px rgba(255,241,205,.08),inset 0 14px 44px rgba(0,0,0,.26),inset 0 -22px 58px rgba(0,0,0,.38),0 0 0 clamp(4px,.7vh,8px) var(--wood),0 0 0 clamp(8px,1.3vh,15px) var(--wood-lt),0 0 0 clamp(11px,1.8vh,20px) #8a6b3a,0 18px 44px rgba(60,42,18,.28),0 6px 16px rgba(60,42,18,.2)}
.felt{position:absolute;inset:2.6%;border-radius:50%;overflow:hidden;box-shadow:inset 0 34px 80px rgba(0,0,0,.2),inset 0 -46px 100px rgba(0,0,0,.3)}
.felt::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.030) 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 4px);opacity:.85}
.felt::after{content:none}
.felt-watermark{position:absolute;margin:0;top:21%;font:400 clamp(11px, 1.65vh, 20px)/1.42 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,248,235,.11);white-space:pre-line;text-align:center}
.wm-left{left:11%}
.wm-right{right:11%}
.seat{position:absolute;display:flex;align-items:center;gap:6px;z-index:3}
.seat-top{top:-1.5%;left:50%;transform:translateX(-50%);flex-direction:column-reverse;gap:5px}
.seat-left,.seat-right{top:26%;flex-direction:column-reverse;gap:7px}
.seat-left{left:11.5%}
.seat-right{right:11.5%}
.seat-self{left:50%;bottom:7%;transform:translateX(-50%)}
.nameplate{display:flex;align-items:center;padding:7px 16px;border-radius:999px;background:linear-gradient(180deg,#6b4f2c,#3f2d18);border:1.6px solid rgba(231,210,154,.85);box-shadow:0 4px 12px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.14);white-space:nowrap}
.nameplate strong{font:700 clamp(11px, 1.5vh, 14px)/1 var(--font-ui);color:#fdf4dc;letter-spacing:.01em}
.seat.is-turn .nameplate{border-color:var(--gold-lt);box-shadow:0 0 0 2px rgba(231,210,154,.35),0 4px 16px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.18);animation:plaqueGlow 1.9s ease-in-out infinite}
@keyframes plaqueGlow{
0%,100%{box-shadow:0 0 0 2px rgba(231,210,154,.28),0 4px 16px rgba(0,0,0,.36)}
50%{box-shadow:0 0 0 5px rgba(231,210,154,.16),0 4px 20px rgba(0,0,0,.4)}
}
.seat.is-out .nameplate{filter:grayscale(.65);opacity:.72}
.seat-cards{--cw:var(--cw-sm);--ch:var(--ch-sm);min-height:var(--ch-sm);min-width:0}
.seat-top .seat-cards{width:clamp(150px,13.5vw,235px)}
.seat-left .seat-cards,.seat-right .seat-cards{width:clamp(118px,12.5vw,215px)}
.seat.revealed .seat-cards{width:clamp(200px,20vw,350px);--cw:clamp(28px, 2.5vw, 42px);--ch:calc(var(--cw) * 1.42)}
.seat.revealed .seat-cards .card{box-shadow:0 2px 5px rgba(0,0,0,.28),0 6px 14px rgba(0,0,0,.2)}
.piles{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);display:flex;align-items:flex-start;--pile-gap:clamp(14px, 1.9vw, 34px);gap:var(--pile-gap);z-index:4}
.pile{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;background:0 0;border:0;padding:0;color:inherit}
.pile-joker{margin-right:calc(-1 * var(--pile-gap) - 1px)}
.pile-slot{width:var(--cw-pile);height:var(--ch-pile);border-radius:calc(var(--cw-pile) * .1);display:grid;place-items:center;position:relative}
.pile-slot .card{position:absolute;inset:0;width:100%;height:100%}
.pile-joker .pile-slot{width:calc(var(--ch-pile)/ 2);height:var(--ch-pile);overflow:hidden}
.pile-joker .pile-slot .card{width:var(--cw-pile);height:var(--ch-pile);left:calc((var(--ch-pile) - var(--cw-pile))/ 2);top:0;right:auto;bottom:auto;transform:rotate(-90deg);transform-origin:50% 50%}
.pile-joker .pile-slot:empty::after{border-radius:4px}
.pile-joker .pile-label{white-space:nowrap}
.pile-slot:empty::after{content:"";position:absolute;inset:0;border-radius:calc(var(--cw-pile) * .1);border:1.5px dashed rgba(255,255,255,.22);background:rgba(0,0,0,.12)}
.pile-label{font-size:clamp(10px, 1.35vh, 13px);letter-spacing:.04em;color:rgba(255,248,235,.94);text-shadow:0 1px 3px rgba(45,28,10,.62);text-align:center}
.piles.no-pile-labels .pile-count,.piles.no-pile-labels .pile-label{visibility:hidden}
.pile-count{position:absolute;left:50%;top:calc(var(--ch-pile) - 13px);transform:translateX(-50%);z-index:4;min-width:38px;padding:2px 10px;border-radius:999px;background:linear-gradient(180deg,#6b4f2c,#3f2d18);border:1px solid rgba(231,210,154,.5);color:#f3e7c8;font-size:clamp(10.5px, 1.4vh, 13.5px);font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.pile-draw{cursor:pointer}
.pile-draw:not(:disabled):hover .pile-slot{transform:translateY(-4px)}
.pile-slot{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.pile-draw:disabled{cursor:default}
.card.is-draggable{cursor:grab}
.card.is-draggable:hover{box-shadow:0 0 0 2px rgba(231,210,154,.85),0 10px 22px rgba(0,0,0,.35)}
.card.is-draggable.dragging{opacity:.45}
.pile-draw.is-target .pile-slot{box-shadow:0 0 0 3px rgba(231,210,154,.7),0 0 22px rgba(231,210,154,.38);border-radius:calc(var(--cw-pile) * .1)}
.pile-discard .pile-label{transition:color .2s}
.pile-discard.is-target .pile-slot{box-shadow:0 0 0 3px rgba(231,210,154,.85),0 0 26px rgba(231,210,154,.45);border-radius:calc(var(--cw-pile) * .1)}
.turn-badge{position:absolute;left:12%;bottom:calc(14% + var(--ch) + 52px);z-index:5;display:inline-flex;align-items:center;gap:8px;padding:7px 18px;border-radius:999px;background:linear-gradient(180deg,#6b4f2c,#3f2d18);border:1.6px solid rgba(231,210,154,.8);box-shadow:0 6px 18px rgba(0,0,0,.34);color:#fdf4dc;font:700 clamp(11px, 1.5vh, 14px)/1 var(--font-ui);letter-spacing:.01em;white-space:nowrap;max-width:78%;transition:opacity .25s}
.turn-badge .ic{width:clamp(13px,1.7vh,16px);height:clamp(13px,1.7vh,16px);color:var(--gold-lt)}
.turn-badge span{overflow:hidden;text-overflow:ellipsis}
.turn-badge.mine{background:linear-gradient(180deg,#d9b860,#a97f22);border-color:#fbf0cf;color:#33240a;animation:badgePulse 1.7s ease-in-out infinite}
.turn-badge.mine .ic{color:#4a3407}
@keyframes badgePulse{
0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.3),0 0 0 0 rgba(231,210,154,.55)}
50%{box-shadow:0 6px 22px rgba(0,0,0,.34),0 0 0 9px rgba(231,210,154,0)}
}
.card{position:relative;width:var(--cw);height:var(--ch);flex:none;border-radius:calc(var(--cw) * .11);background:linear-gradient(163deg,var(--card-face) 0,#fbf5e7 62%,#f2e8d2 100%);border:1px solid var(--card-edge);box-shadow:0 1px 2px rgba(60,40,10,.22),0 7px 16px rgba(60,40,10,.16);font-family:var(--font-display);color:var(--suit-black);user-select:none;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.card.suit-D,.card.suit-H{color:var(--suit-red)}
.card::after{content:"";position:absolute;inset:3px;border-radius:calc(var(--cw) * .08);border:.5px solid rgba(190,168,116,.35);pointer-events:none}
.card .cx{position:absolute;left:7%;top:4.5%;display:grid;justify-items:center;line-height:.92}
.card .cx.br{left:auto;right:7%;top:auto;bottom:4.5%;transform:rotate(180deg)}
.card .cx b{font-size:calc(var(--cw) * .3);font-weight:700;letter-spacing:-.02em}
.card .cx i{font-size:calc(var(--cw) * .245);font-style:normal;margin-top:1px}
.card .pip{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw) * .6);line-height:1;padding-bottom:2%}
.card.is-joker .jk-frame{position:absolute;inset:5%;border-radius:calc(var(--cw) * .07);background:linear-gradient(160deg,#93264f 0,#6a1f4d 52%,#3f1740 100%);box-shadow:inset 0 0 0 1.5px rgba(231,210,154,.62),inset 0 0 14px rgba(0,0,0,.35);display:grid;place-items:center;padding-left:17%}
.card.is-joker .jk-icon{width:72%;height:66%;color:var(--gold-lt);fill:currentColor;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.card.is-joker .jk-word{position:absolute;top:9%;bottom:9%;left:6%;writing-mode:vertical-rl;font-size:calc(var(--cw) * .125);letter-spacing:.16em;color:rgba(253,244,220,.85)}
.card.is-wild-rank{box-shadow:0 0 0 2px rgba(200,162,76,.95),0 0 16px rgba(200,162,76,.5),0 1px 2px rgba(60,40,10,.22)}
.card .wild-flag{position:absolute;right:-5px;top:-5px;width:calc(var(--cw) * .34);height:calc(var(--cw) * .34);border-radius:50%;background:linear-gradient(180deg,#e6cd8a,#b58c2c);border:1.4px solid #fdf8ea;color:#3a2a06;font:700 calc(var(--cw) * .19)/1 var(--font-ui);display:grid;place-items:center;box-shadow:0 2px 6px rgba(80,60,20,.4)}
.card.back{--bk-edge:calc(var(--cw) * .017);--bk-ring:calc(var(--cw) * .05);--bk-weave:calc(var(--cw) * .011);--bk-gap:calc(var(--cw) * .075);background:radial-gradient(circle at 50% 40%,rgba(231,210,154,.16),transparent 58%),repeating-linear-gradient(45deg,rgba(231,210,154,.11) 0 1px,transparent 1px var(--bk-weave)),repeating-linear-gradient(-45deg,rgba(231,210,154,.11) 0 1px,transparent 1px var(--bk-gap)),linear-gradient(160deg,#1a6042 0,#0e3d2a 58%,#07231a 100%);border-color:#0a2c1d;box-shadow:inset 0 0 0 var(--bk-edge) rgba(231,210,154,.52),inset 0 0 0 var(--bk-ring) rgba(9,44,29,.92),0 1px 2px rgba(20,15,5,.3),0 7px 16px rgba(20,15,5,.22)}
.card.back::before{content:none}
.card.back::after{border-color:rgba(231,210,154,.32);inset:calc(var(--cw) * .085)}
.card.back .bk-mark{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold-lt)}
.card.back .bk-mark svg{width:46%;height:46%;fill:currentColor;opacity:.95;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.card.back .jk-icon{display:none}
.card.back.tiny{--cw:var(--cw-sm);--ch:var(--ch-sm)}
.fan{position:relative}
.fan .card{position:absolute;top:0;left:0}
.hand-fan .card .cx.br{display:none}
.hand-area{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);width:min(60%,720px);min-height:calc(var(--ch) + 22px)}
.hand-fan{height:var(--ch)}
.hand-fan .card{cursor:grab}
.hand-fan .card:hover{box-shadow:0 1px 2px rgba(60,40,10,.2),0 12px 26px rgba(60,40,10,.26)}
.hand-fan .card.selected{box-shadow:0 0 0 3px rgba(200,162,76,.95),0 14px 30px rgba(60,40,10,.34)}
.hand-fan .card.dragging{opacity:.35}
.hand-fan .card.wrong{box-shadow:0 0 0 3px rgba(178,58,50,.85),0 12px 26px rgba(120,20,20,.3)}
.hand-fan .card.drawn-card{box-shadow:0 0 0 2.5px rgba(231,210,154,.95),0 0 26px rgba(231,210,154,.55),0 12px 26px rgba(60,40,10,.3);animation:drawnBob 1.9s ease-in-out infinite}
@keyframes drawnBob{
0%,100%{margin-top:0}
50%{margin-top:-7px}
}
.hand-fan .card.drawn-card::before{content:"DRAWN";position:absolute;left:50%;top:-15px;transform:translateX(-50%);font:700 8px/1 var(--font-ui);letter-spacing:.14em;color:#4a3407;background:linear-gradient(180deg,#e6cd8a,#c8a24c);border-radius:999px;padding:3px 7px;box-shadow:0 2px 6px rgba(80,60,20,.35)}
.drop-gap{position:absolute;top:0;width:3px;height:var(--ch);border-radius:2px;background:linear-gradient(180deg,transparent,var(--gold),transparent);box-shadow:0 0 12px rgba(200,162,76,.8);pointer-events:none;z-index:40}
.hand-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font:italic 400 14px/1 var(--font-display)}
.hand-empty[hidden]{display:none}
.bottom{position:relative;display:grid;justify-items:stretch;gap:7px;padding:0 clamp(14px,1.6vw,26px) 12px}
.actionbar{display:flex;align-items:center;justify-content:center;justify-self:center;gap:clamp(7px,.8vw,13px);flex-wrap:wrap;max-width:100%}
.btn{display:inline-flex;align-items:center;gap:8px;height:clamp(34px,5vh,48px);padding:0 clamp(12px,1.4vw,20px);border-radius:9px;border:1px solid var(--gold);background:linear-gradient(180deg,#fffdf7,#f4ecd9);color:var(--ink);font-size:clamp(11.5px, 1.5vh, 14px);font-weight:600;letter-spacing:.01em;cursor:pointer;white-space:nowrap;box-shadow:0 2px 5px rgba(80,60,20,.14),inset 0 1px 0 rgba(255,255,255,.7);transition:transform .16s var(--ease),box-shadow .16s var(--ease),filter .16s}
.btn .ic{width:clamp(15px,1.9vh,18px);height:clamp(15px,1.9vh,18px)}
.btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(80,60,20,.24)}
.btn:not(:disabled):active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:saturate(.6)}
.btn-primary{background:linear-gradient(180deg,#18663f 0,#0c4128 100%);border-color:#d9bb6e;color:#fdf6e2;text-shadow:0 1px 1px rgba(0,0,0,.3);box-shadow:0 3px 8px rgba(20,60,35,.32),inset 0 1px 0 rgba(255,255,255,.16)}
.btn-primary:not(:disabled):hover{box-shadow:0 9px 20px rgba(20,60,35,.38)}
.btn-tan{background:linear-gradient(180deg,#d6c39c 0,#bda87e 100%);border-color:#a98f5c;color:#3b2f16}
.btn-gold{background:linear-gradient(180deg,#e3c572 0,#bd9330 100%);border-color:#8f6d1c;color:#38270a;box-shadow:0 3px 8px rgba(120,90,20,.3),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-ghost{background:0 0;border-style:dashed;border-color:rgba(154,120,38,.55);color:var(--ink-2);box-shadow:none}
.btn-ghost:not(:disabled):hover{background:rgba(255,253,247,.75)}
.btn.pulse{animation:btnPulse 1.6s ease-in-out infinite}
@keyframes btnPulse{
0%,100%{box-shadow:0 0 0 0 rgba(200,162,76,.55),0 3px 8px rgba(120,90,20,.28)}
50%{box-shadow:0 0 0 8px rgba(200,162,76,0),0 3px 8px rgba(120,90,20,.28)}
}
.credit{position:absolute;left:clamp(14px,1.6vw,26px);bottom:16px;margin:0;font-size:10.5px;letter-spacing:.02em;color:var(--ink-3);white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.65)}
.credit strong{font-weight:600;color:var(--gold-deep)}
.decor{position:fixed;bottom:0;z-index:0;pointer-events:none;opacity:.72}
.decor svg{display:block;width:clamp(140px,16vw,250px);height:auto}
.decor-left{left:0}
.decor-right{right:0}
.toast-host{position:fixed;top:clamp(74px,10vh,96px);left:50%;transform:translateX(-50%);z-index:60;display:grid;gap:8px;justify-items:center;pointer-events:none;width:min(92vw,520px)}
.toast{display:flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;background:linear-gradient(180deg,#6b4f2c,#3f2d18);border:1.5px solid rgba(231,210,154,.8);color:#fdf6e2;font-size:12.5px;box-shadow:0 8px 22px rgba(40,26,10,.4);animation:toastIn .28s var(--ease);max-width:100%}
.toast .ic{width:16px;height:16px;color:var(--gold-lt)}
.toast.bad{background:linear-gradient(180deg,#8d2f28,#5f1c17);border-color:#e0a79f}
.toast.good{background:linear-gradient(180deg,#5c6a2e,#37411b)}
.toast.gold{background:linear-gradient(180deg,#d9b860,#a97f22);border-color:#fbf0cf;color:#33240a}
.toast.gold .ic{color:#4a3407}
.toast.out{animation:toastOut .3s var(--ease) forwards}
@keyframes toastIn{
from{opacity:0;transform:translateY(-10px) scale(.96)}
}
@keyframes toastOut{
to{opacity:0;transform:translateY(-8px) scale(.97)}
}
.modal-root{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(38,28,10,.42);backdrop-filter:blur(3px);animation:fadeIn .2s var(--ease)}
.modal-root[hidden]{display:none}
@keyframes fadeIn{
from{opacity:0}
}
.modal-card{width:min(94vw,560px);max-height:88vh;overflow-y:auto;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--gold);border-radius:16px;box-shadow:0 24px 60px rgba(40,28,8,.42);padding:20px 22px 18px;animation:popIn .26s var(--ease)}
@keyframes popIn{
from{opacity:0;transform:translateY(14px) scale(.97)}
}
.modal-card h3{margin:0 0 4px;font:700 clamp(17px, 2.4vh, 22px)/1.15 var(--font-display);letter-spacing:.02em;color:var(--ink);text-align:center}
.modal-card .sub{margin:0 0 14px;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.modal-rule{height:1px;margin:12px 0;background:linear-gradient(90deg,transparent,rgba(200,162,76,.7),transparent)}
.modal-body{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.modal-body ol,.modal-body ul{margin:6px 0;padding-left:18px}
.modal-body li{margin:3px 0}
.modal-body b{color:var(--ink)}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px;position:sticky;bottom:-18px;padding:12px 0 18px;margin-bottom:-18px;background:var(--panel-2);box-shadow:0 -12px 14px -12px rgba(120,90,30,.5)}
.score-table{width:100%;border-collapse:collapse;font-size:12.5px}
.score-table td,.score-table th{padding:7px 8px;text-align:left;border-bottom:1px solid var(--line-soft)}
.score-table th{font:600 10px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.score-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.score-table tr.is-you td{background:rgba(200,162,76,.13);font-weight:600;color:var(--ink)}
.score-table tr.is-winner td{color:var(--ok);font-weight:700}
.score-table .pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:10px;border:1px solid var(--line)}
.score-table .pill.ok{color:var(--ok);border-color:rgba(31,122,77,.45);background:rgba(31,122,77,.08)}
.score-table .pill.out{color:var(--bad);border-color:rgba(178,58,50,.4);background:rgba(178,58,50,.08)}
.score-table .pill.bad{color:#fff;border-color:#8d2f28;background:linear-gradient(180deg,#a83a30,#7d241c);font-weight:700}
.meld-strip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,253,247,.75)}
.meld-group{display:grid;gap:4px;justify-items:center}
.meld-cards{display:flex;gap:3px}
.mini-card{display:inline-grid;place-items:center;min-width:26px;height:34px;padding:0 4px;border-radius:4px;background:#fffdf7;border:1px solid var(--card-edge);box-shadow:0 1px 2px rgba(60,40,10,.18);font:700 11px/1 var(--font-display);color:var(--suit-black)}
.meld-group small{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.name-input{width:100%;padding:10px 13px;border-radius:9px;border:1px solid var(--line);background:#fffdf7;font:500 14px/1 var(--font-ui);color:var(--ink)}
.name-input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,76,.24)}
.modal-body .opt{display:block;margin:5px 0 0;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fffdf7;cursor:pointer;font-size:12px;color:var(--ink-2)}
.modal-body .opt:hover{border-color:var(--gold-lt)}
.modal-body .opt input{margin-right:6px}
.modal-body .opt small{color:var(--ink-3)}
.field-row{display:flex;align-items:center;gap:10px;margin-top:5px}
.field-row .num-input{width:104px;flex:none;text-align:center;font-weight:600}
.field-row small{color:var(--ink-3);line-height:1.45}
.seat-names{display:grid;gap:7px}
.seat-row{display:flex;align-items:center;gap:9px}
.seat-row .avatar{width:28px;height:28px;font-size:12px;border-width:1.5px}
.seat-row .name-input{flex:1;min-width:0;padding:7px 11px;font-size:13px}
@media (max-width:1240px){
.rail-tagline{display:none}
.ac-text small{display:none}
}
@media (max-width:1080px){
.main{grid-template-columns:clamp(168px,20vw,200px) minmax(0,1fr)}
.rail-right{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;padding-bottom:6px}
.rail-right .action-card{width:auto;flex:1 1 150px}
.rail-sep{display:none}
.rail-thumb{flex:0 0 auto;width:118px;align-self:center}
.seat-self{bottom:4%}
}
@media (max-width:860px){
body{overflow:auto}
.app{height:auto;min-height:100dvh}
.main{grid-template-columns:minmax(0,1fr)}
.rail-left{order:2}
.stage{min-height:min(62vh,460px);order:1}
.rail-right{order:3}
.topbar{grid-template-columns:1fr auto}
.brand{grid-column:1;justify-self:start}
.topbar-right{grid-column:2}
.felt-watermark{display:none}
.seat-left,.seat-right{top:36%}
.piles{gap:14px}
.actionbar{justify-content:center}
.credit{position:static;margin:6px auto 0;text-align:center;white-space:normal}
.history{max-height:190px}
}
@media (max-width:560px){
:root{--cw:clamp(30px, 8.4vw, 44px);--cw-pile:clamp(36px, 11vw, 54px)}
.nameplate{padding:5px 11px}
.turn-badge{font-size:10.5px;padding:6px 12px}
.btn{padding:0 11px}
.decor{display:none}
}
@media (max-height:700px){
.brand-text p{display:none}
.panel-note{display:none}
.hand-area{min-height:calc(var(--ch) + 14px)}
}
@media (max-height:600px){
.turn-badge{left:50%;transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
*,::after,::before{animation-duration:NaNs!important;animation-iteration-count:1!important;transition-duration:NaNs!important}
}