@font-face { font-family: "Cormorant Garamond"; src: url("assets/fonts/cormorant-garamond-medium.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
/* Chonk 锄大猫 — base tokens and reset */
/* Layout: a fixed 1024x576 landscape stage scaled to fit. Left sidebar = status, top row = three opponents,
   centre = the felt table, bottom = your jokers, hand and actions. The shop slides up over the table. */
:root {
  /* Catpoker: paper, graphite, sage and muted red */
  --night: #e9e4da;
  --night-2: #ede8df;
  --panel: #faf7f0;
  --panel-2: #f0ebe2;
  --line: #cdc7ba;
  --ink: #30312e;
  --muted: #62665b;
  --felt: #697a69;
  --felt-dark: #596b5a;
  --wood: #d5cdbc;
  --wood-light: #b2aa98;
  --lamp: #a82e39;
  --lamp-ink: #fffaf2;
  --paper: #a82e39;
  --paper-dark: #87303a;
  --neon: #e6c9c7;
  --danger: #a42b32;
  --star: #4f5d86;
  --kitten: #94566a;
  --card: #fffdf8;
  --card-line: #d9d2c4;
  --card-ink: #2a221d;
  --back: #697a69;
  --s-fish: #30312e;
  --s-yarn: #bd2934;
  --s-mice: #30312e;
  --s-paws: #bd2934;
  --p0: #a82e39; --p1: #965a70; --p2: #4e6b85; --p3: #56724e;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brush: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
  --cw: 72px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--font-body); overflow: hidden; position: relative; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* ---------- game ---------- */

/* ---------- viewport + stage ---------- */
#viewport { position: absolute; inset: 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 8px;
  background: radial-gradient(ellipse at 50% 20%, #17302f 0%, var(--night) 70%); }
#stage { position: absolute; left: 50%; top: 50%; width: 1024px; height: 576px; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(var(--k, 1)); font-size: 14px; line-height: 1.35; }
#stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 18px; opacity: .22; mix-blend-mode: overlay; z-index: 50;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.region { position: absolute; }
#side { left: 12px; top: 12px; width: 180px; height: 552px; display: flex; flex-direction: column; gap: 8px; }
#opps { left: 204px; top: 12px; width: 808px; height: 92px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#table { left: 204px; top: 114px; width: 808px; height: 242px; }
#mine { left: 204px; top: 364px; width: 808px; height: 50px; display: grid; grid-template-columns: 1fr 300px; gap: 12px; }
#handzone { left: 204px; top: 420px; width: 648px; height: 144px; }
#actions { left: 864px; top: 420px; width: 148px; height: 144px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 6px; }
#shop { left: 204px; top: 114px; width: 808px; height: 450px; z-index: 20; }
#ov { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#ov > * { pointer-events: auto; }
#fx { position: absolute; inset: 0; z-index: 45; pointer-events: none; overflow: visible; }

/* ---------- sidebar ---------- */
.logo { display: flex; align-items: baseline; gap: 6px; padding: 2px 4px 0; white-space: nowrap; }
.logo b { font-family: var(--font-display); font-weight: 400; font-size: 30px; color: var(--lamp); line-height: 1; text-shadow: 0 2px 0 var(--lamp-ink); }
.logo span { font-family: var(--font-brush); font-size: 20px; color: var(--paper); line-height: 1; filter: drop-shadow(0 1px 0 #000); }
.panel { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.me-card { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.me-card .por { width: 52px; height: 52px; }
.money { display: flex; flex-direction: column; gap: 2px; }
.money div { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 18px; }
.money svg { width: 18px; height: 18px; flex: none; }
.money small { font-size: 12px; font-weight: 500; color: var(--muted); }
.meter { padding: 8px 10px 10px; text-align: left; position: relative; overflow: hidden; border-color: var(--lamp); }
.meter .lbl { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.meter .x { font-family: var(--font-display); font-size: 46px; line-height: 1; color: var(--lamp); text-shadow: 0 3px 0 var(--lamp-ink); position: relative; z-index: 1; display: inline-block; }
.meter .pips { display: flex; gap: 4px; margin-top: 4px; position: relative; z-index: 1; }
.meter .pips i { width: 16px; height: 8px; border-radius: 4px; border: 1.5px solid var(--lamp); }
.meter .pips i.on { background: var(--lamp); }
.meter .note { font-size: 11.5px; color: var(--muted); position: relative; z-index: 1; margin-top: 4px; }
.meter.hot::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 90%; background: radial-gradient(ellipse at 50% 100%, rgba(255,120,40,.65), rgba(255,180,60,.25) 45%, transparent 70%); animation: flame 0.9s ease-in-out infinite alternate; }
.meter.blaze .x { color: #fff3c4; text-shadow: 0 0 12px #ff8a2a, 0 3px 0 var(--lamp-ink); }
@keyframes flame { from { transform: scaleY(.9) translateY(4px); opacity: .75; } to { transform: scaleY(1.12) translateY(-2px); opacity: 1; } }
.bump { animation: bump .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.sign { padding: 8px 10px; background: linear-gradient(180deg, var(--paper), var(--paper-dark)); border: 1px solid #d9573f; border-radius: 10px; position: relative; }
.sign::before, .sign::after { content: ""; position: absolute; top: -9px; width: 2px; height: 9px; background: var(--muted); }
.sign::before { left: 24px; } .sign::after { right: 24px; }
.sign .nm { font-family: var(--font-display); font-size: 16px; color: #ffe7a6; line-height: 1.1; text-shadow: 0 0 6px rgba(255,200,90,.7); }
.sign.lit .nm { color: #fff; text-shadow: 0 0 4px #fff, 0 0 10px var(--neon), 0 0 18px var(--neon); animation: neon 3.2s infinite; }
@keyframes neon { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
.sign .tx { font-size: 11.5px; color: #ffd9cf; margin-top: 2px; }
.info { padding: 6px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 12.5px; color: var(--muted); }
.info b { color: var(--ink); font-size: 14px; }
.sbtns { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sbtn { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 6px 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.sbtn:hover { color: var(--ink); border-color: var(--muted); }

/* ---------- seats ---------- */
.seat { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 8px; position: relative; transition: box-shadow .2s, border-color .2s; }
.seat.turn { border-color: var(--lamp); box-shadow: 0 0 0 1px var(--lamp), 0 0 22px -4px var(--lamp); }
.seat .por { width: 72px; height: 72px; border-radius: 50%; position: relative; }
.por svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ring { position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--c); pointer-events: none; }
.seat .body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.seat .top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.seat .nm { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .cnt { font-family: var(--font-display); font-size: 24px; line-height: 1; }
.seat .cnt small { font-family: var(--font-body); font-size: 11px; color: var(--muted); margin-left: 2px; }
.seat .row { display: flex; gap: 10px; font-size: 12.5px; color: var(--muted); align-items: center; }
.seat .row b { color: var(--ink); }
.minibacks { display: flex; height: 16px; }
.minibacks i { width: 11px; height: 16px; border-radius: 2px; margin-right: -5px; border: 1px solid #d8a35a; background: var(--back); }
.chips { display: flex; gap: 3px; flex-wrap: nowrap; overflow: hidden; }
.chip { font-size: 10.5px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); white-space: nowrap; line-height: 16px; }
.chip.pounce { background: var(--lamp); border-color: var(--lamp); color: var(--lamp-ink); font-weight: 700; }
.chip.lvl { border-color: var(--star); color: var(--star); }
.chip.muted { color: var(--muted); }
.bubble { position: absolute; left: 58px; top: -6px; background: var(--card); color: var(--card-ink); font-weight: 800; font-size: 13px; border-radius: 12px; padding: 3px 10px; box-shadow: 0 3px 0 rgba(0,0,0,.35); z-index: 3; white-space: nowrap; }
.bubble::after { content: ""; position: absolute; left: 6px; bottom: -6px; border: 6px solid transparent; border-top-color: var(--card); border-bottom: 0; }
.bubble.think { animation: dots 1s steps(1) infinite; }

/* ---------- table ---------- */
.felt { position: absolute; inset: 0; border-radius: 26px; border: 10px solid var(--wood); box-shadow: inset 0 0 0 2px var(--wood-light), inset 0 10px 40px rgba(0,0,0,.45), 0 6px 0 rgba(0,0,0,.4);
  background: radial-gradient(ellipse at 50% 38%, #1d6a5c 0%, var(--felt) 45%, var(--felt-dark) 100%); overflow: hidden; }
.felt::before { content: ""; position: absolute; left: 20%; right: 20%; top: -40%; height: 110%; background: radial-gradient(ellipse at 50% 0%, rgba(255,214,140,.22), transparent 70%); animation: lamp 6s ease-in-out infinite; pointer-events: none; }
@keyframes lamp { 0%, 100% { opacity: .85; } 47% { opacity: 1; } 50% { opacity: .7; } 53% { opacity: 1; } }
.felt.rev { background: radial-gradient(ellipse at 50% 38%, #4a2a6a 0%, #2d1d4f 50%, #1b1233 100%); }
#status { position: absolute; left: 110px; right: 110px; top: 10px; text-align: center; }
#status .m { font-size: 16px; font-weight: 700; text-wrap: balance; }
#status .m em { font-style: normal; color: var(--lamp); }
#status .sb { font-size: 12.5px; color: #cfe4dc; opacity: .85; }
#trick { position: absolute; left: 140px; width: 508px; top: 58px; height: 120px; }
#trick .lbl { position: absolute; left: 0; right: 0; bottom: -24px; text-align: center; font-size: 12.5px; color: #d6ebe3; }
#trick .lbl b { color: var(--ink); }
#trick .empty { position: absolute; inset: 22px 120px; border: 2px dashed rgba(255,255,255,.15); border-radius: 14px; display: grid; place-items: center; color: rgba(255,255,255,.4); font-size: 13px; }
#deck { position: absolute; left: 26px; top: 70px; width: 64px; height: 110px; }
#deck .stack { position: absolute; left: 3px; top: 0; }
#deck .stack .cd { position: absolute; }
#deck .cap, #litter .cap { position: absolute; left: -10px; right: -10px; bottom: 0; text-align: center; font-size: 11.5px; color: #cfe4dc; }
#litter { position: absolute; right: 18px; top: 52px; width: 92px; height: 78px; }
.box { position: absolute; left: 8px; top: 4px; width: 76px; height: 50px; }
.box svg { width: 100%; height: 100%; }
#tray { position: absolute; right: 12px; top: 138px; width: 104px; display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
#tray .cd { --cw: 22px; }
#tray .cd .cd-art, #tray .cd .cd-r.b { display: none; }
#tray .cd .cd-r { font-size: 9px; top: 2px; left: 3px; }
#tray .cd .cd-p { width: 10px; height: 10px; left: 6px; top: 13px; }
.revbar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: var(--neon); color: #2a0614; font-weight: 800; font-size: 12.5px; padding: 3px 12px; border-radius: 999px; box-shadow: 0 0 14px var(--neon); white-space: nowrap; }

/* ---------- cards ---------- */
.cd { width: var(--cw); height: calc(var(--cw) * 1.4); position: absolute; border-radius: calc(var(--cw) * .1); flex: none; user-select: none; -webkit-user-select: none;
  transform: translateY(var(--lift, 0px)) rotate(var(--rot, 0deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .16s cubic-bezier(.3,1.4,.5,1), box-shadow .16s, filter .2s; }
.cd-i { position: absolute; inset: 0; border-radius: inherit; background: var(--card); border: 1px solid var(--card-line); box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--card-line), 0 3px 0 rgba(0,0,0,.28), 0 8px 14px -8px rgba(0,0,0,.7); overflow: hidden; color: var(--suit); }
.cd[data-suit="fish"] { --suit: var(--s-fish); } .cd[data-suit="yarn"] { --suit: var(--s-yarn); } .cd[data-suit="mice"] { --suit: var(--s-mice); } .cd[data-suit="paws"] { --suit: var(--s-paws); }
.cd-r { position: absolute; top: calc(var(--cw) * .07); left: calc(var(--cw) * .1); font-family: var(--font-display); font-size: calc(var(--cw) * .3); line-height: 1; }
.cd-r.b { top: auto; left: auto; bottom: calc(var(--cw) * .07); right: calc(var(--cw) * .1); transform: rotate(180deg); }
.cd-p { position: absolute; width: calc(var(--cw) * .2); height: calc(var(--cw) * .2); left: calc(var(--cw) * .1); top: calc(var(--cw) * .4); }
.cd-art { position: absolute; left: 22%; right: 12%; top: 22%; bottom: 14%; display: grid; place-items: center; }
.cd-art svg { width: 100%; height: 100%; overflow: visible; }
.cd.back .cd-i { background: var(--back); border-color: #d8a35a; box-shadow: inset 0 0 0 3px var(--back), inset 0 0 0 4px #d8a35a, 0 3px 0 rgba(0,0,0,.28);
  background-image: repeating-linear-gradient(45deg, rgba(246,185,73,.22) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(246,185,73,.22) 0 2px, transparent 2px 8px); }
.cd.back .seal { position: absolute; left: 50%; top: 50%; width: 46%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--paper-dark); border: 2px solid #d8a35a; display: grid; place-items: center; }
.cd.back .seal svg { width: 60%; height: 60%; }
.cd .wild { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font-size: calc(var(--cw) * .14); font-weight: 800; color: var(--card-ink); opacity: .65; text-transform: uppercase; }
.mk { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.5); z-index: 2; }
.mk.ic { background: var(--night); display: grid; place-items: center; }
.mk.ic svg { width: 11px; height: 11px; }
.mk + .mk { right: auto; left: -5px; }
#hand { position: absolute; inset: 0; perspective: 700px; }
button.cd { padding: 0; border: 0; background: none; font: inherit; color: inherit; }
#hand .cd { cursor: pointer; }
#hand .cd:hover { --lift: -14px; z-index: 30 !important; }
#hand .cd.sel { --lift: -28px; }
#hand .cd.sel .cd-i { box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--card-line), 0 0 0 3px var(--lamp), 0 12px 18px -8px rgba(0,0,0,.8); }
#hand .cd.drawn .cd-i { box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--card-line), 0 0 0 3px var(--star), 0 8px 14px -8px rgba(0,0,0,.7); }
#hand.wait .cd { filter: brightness(.82); }
#hint { position: absolute; left: 0; right: 0; top: -2px; text-align: center; font-size: 13px; color: var(--muted); z-index: 31; pointer-events: none; }
#hint.err { color: var(--danger); } #hint.ok { color: var(--ink); }

/* ---------- jokers row ---------- */
.jrow { display: flex; gap: 8px; align-items: center; padding: 0 4px; overflow: hidden; }
.jrow .lbl, .srow .lbl { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); font-weight: 700; flex: none; width: 54px; line-height: 1.15; }
.jk { height: 46px; min-width: 104px; max-width: 128px; border-radius: 9px; padding: 4px 8px 4px 34px; position: relative; background: linear-gradient(160deg, var(--jc), #0f1e21 140%); border: 1.5px solid var(--jc); font-size: 12px; font-weight: 700; line-height: 1.15; display: flex; align-items: center; color: var(--ink); }
.jk svg { position: absolute; left: 5px; top: 9px; width: 24px; height: 24px; }
.jk.used { opacity: 1; }
.jk.empty { --jc: var(--line); background: transparent; border-style: dashed; color: var(--muted); font-weight: 500; padding-left: 8px; justify-content: center; min-width: 70px; }
.jk[data-kind="Mult"] { --jc: #c8603a; } .jk[data-kind="Rule"] { --jc: #4a6fc7; } .jk[data-kind="Economy"] { --jc: #4c9a55; } .jk[data-kind="Interaction"] { --jc: #b8508a; } .jk[data-kind="Defence"] { --jc: #3b9a9a; }
.srow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; align-content: center; padding: 0 8px; }

/* ---------- actions ---------- */
.act { border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 rgba(0,0,0,.4); transition: transform .08s; }
.act:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.act:disabled { opacity: .35; cursor: not-allowed; }
.act.big { grid-column: span 2; background: var(--lamp); color: var(--lamp-ink); border-color: var(--lamp); font-size: 17px; }
.act.dig { color: var(--star); border-color: var(--star); }
.act.pounce { color: var(--lamp); border-color: var(--lamp); }
.act.small { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ---------- fx ---------- */
.ghost { position: absolute; left: 0; top: 0; z-index: 46; will-change: transform; }
.pop { position: absolute; font-family: var(--font-display); font-size: 22px; color: var(--lamp); text-shadow: 0 2px 0 var(--lamp-ink), 0 0 12px rgba(0,0,0,.6); white-space: nowrap; transform: translate(-50%, -50%); }
.pop.small { font-family: var(--font-body); font-weight: 800; font-size: 14px; color: var(--ink); background: rgba(10,20,22,.85); padding: 2px 9px; border-radius: 999px; text-shadow: none; border: 1px solid var(--line); }
.pop.red { color: var(--danger); }
.pop.huge { font-size: 44px; color: #fff; text-shadow: 0 0 6px #fff, 0 0 18px var(--neon), 0 4px 0 #3a0b1e; }
.ptc { position: absolute; left: 0; top: 0; width: 18px; height: 18px; }
.ptc svg { width: 100%; height: 100%; }

/* ---------- shop ---------- */
#shop { background: linear-gradient(180deg, #13292d, #0e1f22); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 -10px 30px rgba(0,0,0,.5); padding: 10px 14px; overflow-y: auto; display: grid; grid-template-columns: 1fr 360px; gap: 8px 12px; align-content: start; }
#shop.in { animation: slideup .45s cubic-bezier(.2,1,.3,1); }
@keyframes slideup { from { transform: translateY(110%); } to { transform: none; } }
.sh-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.sh-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 23px; color: var(--lamp); line-height: 1; }
.sh-head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; max-width: 60ch; }
.sh-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh-sec h3 { margin: 0 0 4px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.wares { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ware { border-radius: 12px; padding: 7px 10px 7px 46px; position: relative; background: linear-gradient(160deg, var(--jc), #0f1e21 120%); border: 1.5px solid var(--jc); display: flex; flex-direction: column; gap: 2px; }
.ware[data-kind="Mult"] { --jc: #c8603a; } .ware[data-kind="Rule"] { --jc: #4a6fc7; } .ware[data-kind="Economy"] { --jc: #4c9a55; } .ware[data-kind="Interaction"] { --jc: #b8508a; } .ware[data-kind="Defence"] { --jc: #3b9a9a; }
.ware > svg { position: absolute; left: 9px; top: 10px; width: 28px; height: 28px; }
.ware .k { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #e6d9c9; opacity: .85; }
.ware .n { font-weight: 800; font-size: 14.5px; }
.ware p { margin: 0; font-size: 11.5px; line-height: 1.25; color: #e3ebe7; opacity: .9; flex: 1; }
.ware .btn { margin-top: 3px; }
.btn { border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); font-weight: 700; font-size: 12.5px; padding: 5px 10px; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.btn.gold { background: var(--lamp); color: var(--lamp-ink); border-color: var(--lamp); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pack { position: relative; border-radius: 4px; padding: 13px 10px 8px; min-height: 0; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(135deg, var(--pc), #1a1030 160%); color: #1b1020;
  clip-path: polygon(0 6px, 6% 0, 12% 6px, 18% 0, 24% 6px, 30% 0, 36% 6px, 42% 0, 48% 6px, 54% 0, 60% 6px, 66% 0, 72% 6px, 78% 0, 84% 6px, 90% 0, 96% 6px, 100% 0, 100% 100%, 0 100%); }
.pack::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%); background-size: 250% 100%; animation: foil 4s linear infinite; pointer-events: none; }
@keyframes foil { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.pack[data-pack="kitten"] { --pc: var(--kitten); } .pack[data-pack="star"] { --pc: var(--star); } .pack[data-pack="fortune"] { --pc: var(--lamp); }
.pack .n { font-family: var(--font-display); font-size: 16px; line-height: 1; }
.pack p { margin: 0; font-size: 11px; line-height: 1.25; flex: 1; font-weight: 600; }
.pack .btn { position: relative; z-index: 1; background: rgba(20,12,30,.85); color: var(--ink); border-color: rgba(20,12,30,.85); }
.owned { display: flex; gap: 6px; flex-wrap: wrap; }
.owned .jk { padding-right: 4px; gap: 4px; }
.owned .jk .ctl { display: flex; gap: 2px; margin-left: auto; }
.owned .jk .ctl button { font-size: 10.5px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.3); border-radius: 5px; padding: 0 4px; line-height: 16px; }
.owned .jk .ctl button:disabled { opacity: .3; }
.stars { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 12.5px; color: var(--muted); }
.stars b { color: var(--star); }
.deckgrid { display: grid; grid-template-columns: repeat(13, 25px); gap: 2px; }
.cell { position: relative; padding: 0; border: 0; background: none; width: 25px; height: 34px; }
.mini { position: absolute; inset: 0; border-radius: 4px; background: var(--card); border: 1px solid var(--card-line); color: var(--suit); display: block; }
.mini b { position: absolute; left: 2px; top: 1px; font-size: 9.5px; font-family: var(--font-display); font-weight: 400; line-height: 1; }
.mini svg { position: absolute; left: 6px; bottom: 4px; width: 13px; height: 13px; }
.cell[data-suit="fish"] { --suit: var(--s-fish); } .cell[data-suit="yarn"] { --suit: var(--s-yarn); } .cell[data-suit="mice"] { --suit: var(--s-mice); } .cell[data-suit="paws"] { --suit: var(--s-paws); }
.cell .mk { width: 11px; height: 11px; top: -4px; right: -4px; border-width: 1.5px; }
.cell .mk.ic svg { width: 7px; height: 7px; }
.cell .mk + .mk { left: -4px; }
.cell .x2 { position: absolute; right: -4px; bottom: -4px; background: var(--ink); color: var(--night); font-size: 9px; font-weight: 800; border-radius: 5px; padding: 0 2px; line-height: 12px; z-index: 3; }
.cell.gone .mini { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.cell:disabled { cursor: default; }
.deckgrid.target .cell:not(:disabled) .mini { box-shadow: 0 0 0 2px var(--lamp); }
.modes { display: flex; gap: 6px; margin-bottom: 6px; }
.mode { flex: 1; text-align: left; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); padding: 5px 8px; font-size: 12px; font-weight: 700; }
.mode small { display: block; font-weight: 500; color: var(--muted); font-size: 10.5px; line-height: 1.2; }
.mode[aria-pressed="true"] { border-color: var(--lamp); box-shadow: 0 0 0 1px var(--lamp); }
.toast { min-height: 16px; font-size: 12px; margin-top: 4px; }
.toast.err { color: var(--danger); } .toast.ok { color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.sh-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 0 0; }
.sh-foot .btn { font-size: 16px; padding: 9px 20px; }
.chooser { position: absolute; inset: 0; z-index: 25; background: rgba(6,12,14,.82); display: grid; place-items: center; border-radius: 18px; }
.chooser.banner { inset: auto 14px 64px auto; width: 330px; height: auto; background: none; place-items: stretch; }
.ch-box { width: 680px; max-width: 94%; background: var(--panel); border: 2px solid var(--pc); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ch-box[data-pack="kitten"] { --pc: var(--kitten); } .ch-box[data-pack="star"] { --pc: var(--star); } .ch-box[data-pack="fortune"] { --pc: var(--lamp); }
.ch-box h3 { margin: 0; font-family: var(--font-display); font-weight: 400; color: var(--pc); font-size: 20px; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.opt { text-align: left; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); padding: 10px; display: flex; flex-direction: column; gap: 4px; min-height: 120px; animation: fanin .4s cubic-bezier(.2,1.3,.4,1) both; }
.opt:nth-child(2) { animation-delay: .08s; } .opt:nth-child(3) { animation-delay: .16s; }
@keyframes fanin { from { transform: translateY(30px) rotate(-6deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.opt:hover:not(:disabled), .opt[aria-pressed="true"] { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc); }
.opt small { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pc); }
.opt strong { font-size: 15px; }
.opt span { font-size: 12px; color: var(--muted); }
.opt:disabled { opacity: .45; cursor: not-allowed; }
.ch-note { font-size: 13px; color: var(--lamp); font-weight: 700; }

/* ---------- overlays ---------- */
.sheet { position: absolute; inset: 0; background: rgba(5,10,12,.78); display: grid; place-items: center; animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.sheet-box { width: 760px; max-width: 94%; max-height: 92%; overflow-y: auto; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: 0 16px 50px rgba(0,0,0,.6); }
.sheet-box h2 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--lamp); line-height: 1.1; }
.sheet-box h3 { margin: 14px 0 4px; font-size: 15px; }
.sheet-box p { margin: 4px 0; max-width: 68ch; color: #dfe8e4; font-size: 13.5px; }
.sheet-box ul, .sheet-box ol { margin: 4px 0; padding-left: 20px; font-size: 13.5px; color: #dfe8e4; display: flex; flex-direction: column; gap: 3px; }
.sheet-box b { color: var(--lamp); }
.sheet-box .close { float: right; }
.sheet-box table { border-collapse: collapse; font-size: 13px; margin: 4px 0; }
.sheet-box td, .sheet-box th { padding: 3px 10px 3px 0; text-align: left; border-bottom: 1px solid var(--line); }
.sheet-box th { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.ex { display: flex; gap: 4px; margin: 4px 0; flex-wrap: wrap; }
.ex .cd { position: relative; --cw: 34px; transition: none; }
.ex .cd .cd-r.b { display: none; }
.combos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.combos div { display: flex; flex-direction: column; }
.combos span { font-size: 12.5px; font-weight: 700; }
.toc { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 4px; }
.toc a { font-size: 12px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.logbox { font-size: 13px; display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.logbox .head { color: var(--ink); font-weight: 700; margin-top: 6px; } .logbox .win { color: var(--ink); } .logbox .pounce { color: var(--lamp); } .logbox .joker { color: var(--p2); } .logbox .dig { color: var(--star); }
.optrow { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.optrow > span { width: 130px; font-weight: 700; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { border: 0; background: var(--panel); padding: 5px 12px; font-weight: 700; font-size: 13px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--lamp); color: var(--lamp-ink); }

/* payout */
.pay-box { width: 700px; }
.pay-head { display: flex; align-items: center; gap: 14px; }
.pay-head .por { width: 84px; height: 84px; flex: none; }
.pay-head .tot { margin-left: auto; text-align: right; }
.pay-head .tot b { font-family: var(--font-display); font-weight: 400; font-size: 36px; color: var(--lamp); display: block; line-height: 1; }
.prow { display: grid; grid-template-columns: 46px 86px 1fr 150px; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); min-height: 58px; }
.prow .por { width: 44px; height: 44px; }
.prow .who { font-weight: 800; font-size: 14px; }
.prow .who small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.prow .lo { position: relative; height: 46px; }
.prow .lo .cd { --cw: 30px; transition: none; }
.prow .lo .cd .cd-art, .prow .lo .cd .cd-r.b { display: none; }
.prow .lo .cd .cd-p { width: 9px; height: 9px; top: 18px; left: 4px; }
.prow .lo .cd .cd-r { font-size: 11px; }
.prow .calc { text-align: right; font-size: 13px; color: var(--muted); }
.prow .calc b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--danger); line-height: 1.05; }
.prow .calc small { display: block; font-size: 11px; }
.pay-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 13px; color: var(--muted); }
.end-rows { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.end-row { display: grid; grid-template-columns: 34px 50px 1fr 80px 70px; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 10px; background: rgba(255,255,255,.03); }
.end-row.first { background: rgba(246,185,73,.12); border: 1px solid var(--lamp); }
.end-row .pl { font-family: var(--font-display); font-size: 22px; color: var(--lamp); }
.end-row .por { width: 46px; height: 46px; }
.end-row .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.rotate { position: absolute; inset: 0; background: var(--night); display: grid; place-items: center; text-align: center; padding: 24px; z-index: 60; }
.rotate .ph { width: 70px; height: 110px; border: 4px solid var(--lamp); border-radius: 14px; margin: 0 auto 16px; animation: tilt 2s ease-in-out infinite; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
.shake { animation: shake .35s; }
@keyframes shake { 0%, 100% { transform: translate(-50%, -50%) scale(var(--k)); } 20% { transform: translate(calc(-50% - 6px), calc(-50% + 3px)) scale(var(--k)); } 40% { transform: translate(calc(-50% + 5px), calc(-50% - 4px)) scale(var(--k)); } 60% { transform: translate(calc(-50% - 4px), calc(-50% + 2px)) scale(var(--k)); } 80% { transform: translate(calc(-50% + 3px), -50%) scale(var(--k)); } }
@media (prefers-reduced-motion: reduce) {
  .felt::before, .pack::after, .meter.hot::before, .sign.lit .nm { animation: none !important; }
}

/* ---------- low-text pass: tooltips + compact items ---------- */
[data-tt] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.tip { position: absolute; z-index: 90; max-width: calc(250px * var(--tz, 1)); padding: 7px 10px 8px; border-radius: 10px; background: rgba(8,16,18,.96); border: 1px solid var(--lamp); box-shadow: 0 8px 24px rgba(0,0,0,.55); pointer-events: none; font-size: calc(12.5px * var(--tz, 1)); line-height: 1.35; color: #dbe8e3; }
.tip b { display: block; color: var(--lamp); font-size: calc(13.5px * var(--tz, 1)); font-weight: 800; }
.tip span { display: block; margin-top: 2px; }
.tip.in { animation: tipin .14s ease-out; }
@keyframes tipin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.act[aria-disabled="true"], .btn[aria-disabled="true"], .opt[aria-disabled="true"], .mode[aria-disabled="true"] { opacity: .38; cursor: not-allowed; box-shadow: none; }
.act[aria-disabled="true"]:active { transform: none; }
.act.big { transition: box-shadow .2s, transform .1s; }
.act.big.ready { box-shadow: 0 3px 0 var(--lamp-ink), 0 0 18px -2px var(--lamp); animation: ready 1.6s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 3px 0 var(--lamp-ink), 0 0 26px 2px var(--lamp); } }
.ji { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--jc, var(--line)); border: 1px solid rgba(255,255,255,.25); flex: none; }
.ji svg { width: 14px; height: 14px; }
.ji[data-kind="Mult"] { --jc: #c8603a; } .ji[data-kind="Rule"] { --jc: #4a6fc7; } .ji[data-kind="Economy"] { --jc: #4c9a55; } .ji[data-kind="Interaction"] { --jc: #b8508a; } .ji[data-kind="Defence"] { --jc: #3b9a9a; }
.sb { font-size: 11px; font-weight: 800; color: var(--star); border: 1px solid var(--star); border-radius: 6px; padding: 0 4px; line-height: 18px; flex: none; }
.seat .chips { gap: 4px; align-items: center; min-height: 20px; }
.seat .row svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.money > div { display: flex; align-items: center; gap: 6px; }
.money svg { width: 18px; height: 18px; flex: none; }
.faint { color: var(--line); font-size: 16px; }
.count { position: absolute; right: -6px; bottom: -6px; min-width: 24px; padding: 0 6px; border-radius: 999px; background: var(--night); border: 1.5px solid var(--lamp); color: var(--lamp); font-weight: 800; font-size: 12.5px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; z-index: 5; }
#deck .count { right: -4px; bottom: 8px; }
#litter .count { right: 2px; bottom: -2px; }
#trick .empty { border-color: rgba(255,255,255,.09); }
.revbar { cursor: help; }
.jk.empty { min-width: 70px; }
.srow .chip.lvl { font-size: 11.5px; line-height: 20px; }
.info span { cursor: help; }
/* shop, compact */
.sh-head { align-items: center; justify-content: flex-start; }
.sh-head .coins { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: 20px; color: var(--lamp); margin-left: auto; }
.sh-head .coins svg, .btn svg { width: 16px; height: 16px; vertical-align: -3px; }
.sh-head .deal { font-size: 15px; padding: 8px 18px; }
.ware { padding: 8px 10px 8px 46px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 6px; row-gap: 0; min-height: 52px; }
.ware .n { grid-column: 1; grid-row: 1; line-height: 1.15; }
.ware .k { grid-column: 1; grid-row: 2; }
.ware .btn { grid-column: 2; grid-row: 1 / 3; margin: 0; display: inline-flex; align-items: center; gap: 3px; }
.pack { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 10px 9px; }
.pack .btn { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; }
.pack.opened { filter: saturate(.3) brightness(.7); }
.pack.opened::after { display: none; }
.stars.panel { padding: 6px 10px; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stars.panel span { display: flex; flex-direction: column; align-items: center; font-size: 10.5px; text-align: center; line-height: 1.15; padding: 3px 2px; border-radius: 7px; border: 1px solid transparent; cursor: help; }
.stars.panel span b { font-family: var(--font-display); font-weight: 400; font-size: 16px; color: var(--muted); }
.stars.panel span.up { border-color: var(--star); color: var(--ink); }
.stars.panel span.up b { color: var(--star); }
.deckp { padding: 8px 10px; }
.mode { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mode span { display: inline-flex; align-items: center; gap: 3px; color: var(--lamp); font-weight: 800; }
.mode span svg { width: 13px; height: 13px; }
.cell[aria-disabled="true"] { cursor: default; }
.deckgrid.target .cell:not([aria-disabled="true"]) .mini { box-shadow: 0 0 0 2px var(--lamp); }
.deckgrid.target .cell:disabled .mini { box-shadow: none; }
.opt { min-height: 0; align-items: center; text-align: center; padding: 14px 10px 12px; gap: 6px; }
.opt > svg { width: 38px; height: 38px; }
.opt-ic { width: 38px !important; height: 38px !important; }
.opt-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--lamp); margin: 6px; }
.opt-glyph { font-family: var(--font-display); font-size: 30px; line-height: 38px; color: var(--pc) !important; }
.opt:hover:not([aria-disabled="true"]) { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc); }
.ch-box h3 { text-align: center; }
.ch-box > div:last-child { display: flex; justify-content: center; }
.pay-box [data-tt] { cursor: help; }
#pinc svg { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- fewer opponents ---------- */
#opps.n1 { grid-template-columns: 380px; justify-content: center; }
#opps.n2 { grid-template-columns: repeat(2, 380px); justify-content: center; }
.chip.ready { border-color: #8fd18a; color: #b9f0b4; }

/* ---------- title screen ---------- */
.title-screen { position: absolute; inset: 0; z-index: 60; border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 1fr 330px; gap: 22px; padding: 26px 30px 26px 34px;
  background: radial-gradient(ellipse 60% 55% at 32% 30%, rgba(246,185,73,.20), transparent 70%), radial-gradient(ellipse 40% 40% at 85% 90%, rgba(255,127,168,.10), transparent 70%), linear-gradient(180deg, #0f1c1f, var(--night)); animation: fade .3s; }
.ts-art { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; }
.ts-logo { display: flex; align-items: baseline; gap: 14px; transform: rotate(-3deg); }
.ts-logo b { font-family: var(--font-display); font-weight: 400; font-size: 118px; line-height: .9; color: var(--lamp); text-shadow: 0 6px 0 var(--lamp-ink), 0 0 40px rgba(246,185,73,.35); }
.ts-logo span { font-family: var(--font-brush); font-size: 62px; color: var(--paper); filter: drop-shadow(0 3px 0 #000); }
.ts-felt { width: 520px; height: 200px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #1d6a5c, var(--felt) 55%, var(--felt-dark)); border: 10px solid var(--wood); box-shadow: inset 0 0 0 2px var(--wood-light), 0 18px 40px rgba(0,0,0,.6); display: grid; place-items: center; position: relative; }
.ts-cats { display: flex; gap: 14px; transform: translateY(-34px); }
.ts-cat { width: 96px; height: 96px; border-radius: 50%; position: relative; transition: transform .3s cubic-bezier(.3,1.5,.5,1), opacity .3s, filter .3s; filter: grayscale(.8) brightness(.45); opacity: .55; transform: translateY(14px) scale(.9); }
.ts-cat.on { filter: none; opacity: 1; transform: none; }
.ts-cat.on::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--c); }
.ts-cat:nth-child(2).on { transition-delay: .03s; } .ts-cat:nth-child(3).on { transition-delay: .06s; } .ts-cat:nth-child(4).on { transition-delay: .09s; }
.ts-panel { align-self: center; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ts-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ts-field > span:first-child { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ts-panel input { font: inherit; color: var(--ink); background: var(--night); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; width: 170px; font-weight: 700; }
.ts-panel input:focus { outline: 2px solid var(--lamp); outline-offset: 1px; }
.ts-seg button { padding: 6px 16px; font-size: 15px; }
.ts-play { font-size: 22px; padding: 11px; font-family: var(--font-display); font-weight: 400; letter-spacing: .5px; }
.ts-or { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; margin-top: 2px; }
.ts-or i { flex: 1; height: 1px; background: var(--line); }
.ts-create { padding: 8px; font-size: 14px; }
.ts-join { display: flex; gap: 6px; }
.ts-join input { flex: 1; min-width: 0; width: auto; text-transform: uppercase; letter-spacing: 4px; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 17px; padding: 5px; }
.ts-join input:disabled { opacity: .4; }
.ts-join .btn { padding: 5px 16px; font-size: 14px; }
.ts-rooms { display: flex; flex-direction: column; gap: 4px; }
.ts-rooms:empty { display: none; }
.ts-room { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 8px; text-align: left; border: 1px solid var(--line); background: var(--night-2); border-radius: 9px; padding: 5px 9px; }
.ts-room:hover { border-color: var(--lamp); }
.ts-room b { font-family: var(--font-display); font-weight: 400; letter-spacing: 2px; color: var(--lamp); }
.ts-room span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-room i { font-style: normal; color: var(--muted); font-size: 12px; }
.ts-msg { font-size: 12.5px; color: var(--danger); }
.ts-foot { display: flex; gap: 6px; justify-content: flex-end; margin-top: 2px; }
.ts-foot .sbtn { padding: 5px 12px; }

/* ---------- room lobby ---------- */
.room-box, .leave-box, .gone-box { width: 600px; }
.rm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rm-head h2 { margin: 0; }
.rm-code { font-family: var(--font-display); font-size: 44px; line-height: 1; letter-spacing: 8px; color: var(--ink); background: var(--night); border: 2px dashed var(--lamp); border-radius: 12px; padding: 6px 8px 4px 16px; cursor: help; }
.rm-seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 8px; }
.rm-seat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; border: 1.5px dashed var(--line); background: rgba(255,255,255,.02); animation: fanin .35s cubic-bezier(.2,1.3,.4,1) both; }
.rm-seat .por { width: 70px; height: 70px; opacity: .45; filter: grayscale(.7); transition: opacity .3s, filter .3s; }
.rm-seat.on { border: 1.5px solid var(--c); background: rgba(255,255,255,.04); }
.rm-seat.on .por { opacity: 1; filter: none; }
.rm-seat.you { box-shadow: 0 0 0 1px var(--c), 0 0 18px -4px var(--c); }
.rm-seat b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-seat:not(.on) b { color: var(--muted); font-weight: 600; }
.rm-seat small { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); min-height: 14px; }
.rm-seat.you small { color: var(--lamp); }
.rm-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rm-foot > .btn:last-child { margin-left: auto; }
.rm-n button { font-size: 18px; padding: 3px 14px; }
.rm-n button[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.rm-start { font-size: 16px; padding: 8px 26px; }
.rm-wait { color: var(--muted); font-size: 13.5px; }
.rm-wait::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--lamp); animation: neon 1.4s infinite; vertical-align: 2px; }

/* Catpoker reviewed edition: preserve complete printed faces and corner indices. */
.cd-image { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; pointer-events: none; }
.cd .wild { bottom: 3%; left: 22%; right: 22%; background: #fff; opacity: 1; font-size: calc(var(--cw) * .12); }
.cd[data-suit="fish"], .cd[data-suit="mice"] { --suit: #30312e; }
.cd[data-suit="yarn"], .cd[data-suit="paws"] { --suit: #bd2934; }

/* Catpoker parlour — shared surfaces, hierarchy and interaction states. */
#viewport { background: var(--night); }
#stage::after, .felt::before, .meter.hot::before, .sign::before, .sign::after, .pack::after { display: none; }
#opps { height: 80px; gap: 10px; }
#table { top: 102px; height: 226px; }
#mine { top: 338px; height: 44px; }
#handzone { top: 394px; height: 170px; }
#actions { top: 394px; height: 170px; }
#shop { top: 102px; height: 462px; background: var(--panel); box-shadow: none; border-radius: 14px; }
.panel, .sheet-box { background: var(--panel); box-shadow: none; }
.logo b { font-size: 35px; text-shadow: none; letter-spacing: -.03em; }
.logo span, .ts-logo span { filter: none; }
.me-card, .info { background: transparent; border-color: transparent; }
.meter { border-color: var(--line); text-align: left; padding: 12px; }
.meter .lbl { letter-spacing: .6px; }
.meter .x { font-size: 54px; text-shadow: none; }
.meter.blaze .x { color: var(--lamp); text-shadow: none; }
.score-meter .x { font-size: 38px; }
.score-meter .x { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.award-list { margin: 10px 0; }
.award-row { display: grid; grid-template-columns: 42px minmax(110px,1fr) 190px 84px; gap: 12px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); }
.award-row.is-you { background: #eee8dc; }
.award-row .por { width: 40px; height: 40px; }
.award-name { min-width: 0; }
.award-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.award-row small { display: block; color: var(--muted); font-size: 11px; }
.award-parts { font-size: 12px; text-align: right; }
.award-total { text-align: right; font-variant-numeric: tabular-nums; }
.award-total b { font: 400 28px/1 var(--font-display); color: var(--lamp); }
.side-stakes { font-size: 11px; margin: 8px 0; }
.side-stakes summary { cursor: pointer; }
.side-stakes p { margin: 6px 0; line-height: 1.5; }
.score-rate { font-size: 12px; margin-top: 4px; }
.score-open { margin-top: 6px; width: 100%; text-align: left; }
.score-receipt { padding: 12px 0; border-bottom: 1px solid var(--line); }
.score-receipt summary { cursor: pointer; font-weight: 700; }
.score-receipt li { margin-bottom: 8px; }
.score-receipt p { max-width: 72ch; }
.order-preview { font-size: 12px; line-height: 1.4; }
.sign { background: #e9ded3; border-color: #d2bfae; padding: 10px; }
.sign .nm, .sign.lit .nm { color: #753b39; text-shadow: none; animation: none; font-size: 20px; }
.sign .tx { color: #644b43; }
.seat { grid-template-columns: 58px 1fr; padding: 7px 9px; gap: 9px; }
.seat .por { width: 58px; height: 58px; }
.seat.turn { border-color: var(--lamp); box-shadow: none; }
.seat.turn::after { content: "Playing"; position: absolute; right: 9px; bottom: 7px; font-size: 10px; color: var(--lamp); font-weight: 700; }
.seat .cnt { font-size: 26px; }
.ring { border-width: 1px; inset: -2px; }
.por { overflow: hidden; border-radius: 50%; background: #fff; }
.por img { display: block; width: 100%; height: 100%; object-fit: contain; }
.minibacks i { background: #899783; border-color: #586b56; }
.bubble { box-shadow: 0 3px 10px #30312e18; }
.felt { background: var(--felt); border: 1px solid #52634f; border-radius: 18px; box-shadow: none; }
.felt.rev { background: #716a80; }
#status { top: 12px; }
#status .m, #status .m em { color: #fffdf7; }
#status .sb { color: #fffdf7; opacity: 1; border-color: #d6dfd0; }
#trick { top: 55px; }
#trick .lbl, #trick .lbl b, #deck .cap, #litter .cap { color: #fffdf7; }
#trick .empty { border: 1px dashed #c4d0bd; color: #fffdf7; }
#deck { top: 64px; }
#deck .count { bottom: -2px; }
.revbar { background: #f4e9df; color: #604563; box-shadow: none; }
.cd { border-radius: 5px; transition-timing-function: cubic-bezier(.22,1,.36,1); }
.cd-i, .cd.back .cd-i { background: #fff; border: 1px solid #d3ccbe; box-shadow: 0 4px 9px #30312e24; }
#hand .cd:hover, #hand .cd:focus-visible { --lift: -12px; z-index: 30 !important; }
#hand .cd.sel { --lift: -24px; }
#hand .cd.sel .cd-i { box-shadow: 0 0 0 2px var(--lamp), 0 8px 14px #30312e22; }
#hand .cd.drawn .cd-i { outline: 2px dashed var(--star); outline-offset: 2px; box-shadow: 0 4px 9px #30312e24; }
#hand .cd.drawn::before { content: "New"; position: absolute; top: -18px; left: 0; right: 0; font: 700 11px var(--font-body); color: var(--star); text-align: center; }
#hand.wait .cd { filter: none; }
#hint { top: 0; }
.act, .btn, .sbtn { box-shadow: none; border-radius: 7px; }
.act, .btn { background: var(--panel); }
.act.big, .btn.gold { background: var(--lamp); color: var(--lamp-ink); }
.act.big.ready { animation: none; box-shadow: none; outline: 1px solid var(--lamp); outline-offset: 3px; }
.act:hover:not([aria-disabled="true"]), .btn:hover:not([aria-disabled="true"]), .sbtn:hover { border-color: var(--lamp); }
.act[aria-disabled="true"], .btn[aria-disabled="true"], .mode[aria-disabled="true"], .opt[aria-disabled="true"] { opacity: .65; }
.jk, .ware { background: #f6f0e6; border-color: var(--line); color: var(--ink); }
.jk { border-radius: 7px; }
.ware .k, .ware p { color: var(--muted); opacity: 1; }
.pack { background: #e8e1d5; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; clip-path: none; }
.pack .n { font-size: 21px; }
.pack .btn { background: var(--panel); color: var(--lamp); border-color: var(--line); }
.pack.opened { filter: none; opacity: .6; }
.owned .jk .ctl button { background: var(--panel); border-color: var(--line); }
.jrow .lbl, .srow .lbl, .sh-sec h3 { text-transform: none; letter-spacing: 0; }
.sheet, .chooser { background: #30312e66; }
.sheet-box { border-radius: 14px; }
.sheet-box h2 { font-size: 32px; }
.sheet-box p, .sheet-box ul, .sheet-box ol { color: var(--ink); }
.tip { background: #faf7f0; color: var(--ink); border-color: #b7ab98; box-shadow: 0 4px 14px #30312e20; }
.tip b { color: var(--lamp); }
.chip.ready { color: #3e643a; border-color: #6a8563; }
.rm-seat.you { box-shadow: none; border-width: 2px; }
.rm-wait::after { animation: none; }
.title-screen { background: var(--panel); grid-template-columns: 1fr 320px; gap: 36px; padding: 30px 40px; border: 1px solid var(--line); }
.ts-art { gap: 14px; }
.ts-logo { transform: none; gap: 18px; }
.ts-logo b { color: var(--ink); font-size: 100px; text-shadow: none; letter-spacing: -.04em; }
.ts-logo span { font-size: 40px; }
.ts-description { margin: 0; color: var(--muted); font-size: 16px; text-align: center; }
.ts-fan { position: relative; width: 500px; height: 260px; margin-top: 20px; }
.ts-fan .cd { --cw: 132px; top: 26px; }
.ts-fan .cd:nth-child(1) { left: 58px; --rot: -17deg; }
.ts-fan .cd:nth-child(2) { left: 145px; top: 4px; --rot: -5deg; }
.ts-fan .cd:nth-child(3) { left: 237px; top: 4px; --rot: 8deg; }
.ts-fan .cd:nth-child(4) { left: 320px; --rot: 20deg; }
.ts-caption { margin: 0; font-size: 13px; color: var(--muted); }
.ts-panel { background: transparent; border: 0; border-radius: 0; padding: 0; gap: 14px; }
.ts-panel input { background: #fffdf8; font-weight: 500; }
.ts-field > span:first-child { text-transform: none; letter-spacing: 0; font-size: 13px; }
.ts-play { font-family: var(--font-body); font-size: 17px; font-weight: 700; padding: 14px; }
.ts-or { letter-spacing: 0; text-transform: none; }
.ts-create { padding: 11px; }
.ts-room { background: #f0ebe2; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Compact seat rows fit above the table; numeric game state uses the UI face. */
.seat .body { gap: 1px; }
.seat .top { line-height: 19px; }
.seat .cnt { font: 700 20px/20px var(--font-body); }
.seat .row { font-size: 11px; line-height: 16px; }
.seat .chips { min-height: 16px; }
.seat .ji { width: 16px; height: 16px; border-radius: 4px; }
.seat .minibacks { height: 9px; }
.seat .minibacks i { height: 9px; }
.mini b, .stars.panel span b { font-family: var(--font-body); font-weight: 600; }
.cd-index { position: absolute; top: 3%; left: 3%; width: 21%; height: 31%; background: #fff; color: var(--suit); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cd-index b { font: 600 calc(var(--cw) * .21)/1 var(--font-body); }
.cd-index svg { width: 75%; height: auto; max-height: 42%; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

.pop, .pop.huge { text-shadow: none; color: var(--lamp); background: var(--panel); padding: 3px 10px; border-radius: 8px; }
.pop.small { background: var(--panel); }
.chooser.banner { background: none; }
/* Illustrated shop: one browsing surface, a separate scrollable deck, and committed pack reveals. */
#shop { display: flex; flex-direction: column; gap: 8px; overflow: hidden; padding: 12px 16px; }
#shop .sh-head { flex: none; min-height: 36px; gap: 10px; }
#shop .sh-head h2 { font-size: 27px; white-space: nowrap; }
.shop-next { color: var(--muted); font-size: 11px; max-width: 120px; }
#shop .sh-head .coins { font-family: var(--font-body); font-size: 17px; }
#shop .sh-head .deal { padding: 7px 16px; }
.shop-display { display: grid; grid-template-columns: 294px 1fr; gap: 24px; flex: 1; min-height: 0; }
.shop-display h3, .collection-row h3 { font-size: 13px; margin: 0 0 7px; color: var(--muted); font-weight: 600; }
.joker-shelf > div { display: flex; justify-content: center; gap: 14px; }
.pack-shelf > div { display: flex; gap: 10px; justify-content: space-between; }
.shop-offer { width: 138px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.collectible { display: flex; flex-direction: column; align-items: stretch; position: relative; width: 138px; height: 150px; padding: 5px; border: 1px solid #bfb29a; border-radius: 9px; background: #fff9e9; color: var(--ink); text-align: center; box-shadow: 0 4px 7px #41382918; transition: transform .18s ease-out; isolation: isolate; }
.collectible[data-type="star"] { background: #e7e9f1; border-color: #939cb3; }
.collectible[data-type="fortune"] { background: #e5ebe0; border-color: #9ca98f; }
.collectible-art { position: relative; display: block; flex: 1; min-height: 0; overflow: hidden; border-radius: 5px; background: #faf4e7; }
.collectible-art img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; transform-origin: 50% 85%; animation: cat-breathe 5.5s ease-in-out infinite; }
.collectible[data-type="star"] .collectible-art img { animation: star-drift 7s ease-in-out infinite; }
.collectible[data-type="fortune"] .collectible-art img { animation: fortune-sway 7s ease-in-out infinite; }
.collectible[data-art="zoomies"] img, .collectible[data-art="hiss"] img, .collectible[data-art="lasereyes"] img { animation-name: cat-twitch; animation-duration: 4s; }
.collectible[data-art="kneading"] img, .collectible[data-art="bellyup"] img, .collectible[data-art="mimic"] img { animation-name: fortune-sway; animation-duration: 4s; }
.collectible strong { font: 700 13px/1.1 var(--font-body); min-height: 29px; display: grid; place-items: center; padding: 3px 1px 0; }
.collectible small { font: 500 10px/1.2 var(--font-body); color: var(--muted); padding-bottom: 3px; }
.collectible:hover, .collectible:focus-visible { transform: translateY(-4px); }
.offer-price { display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 12px; margin-top: 8px; color: var(--lamp); font-weight: 700; }
.offer-price svg { width: 16px; height: 16px; }
.pack-offer { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 0; }
.pack-wrapper { width: 100%; border: 0; padding: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pack-wrapper img { width: 100%; height: 120px; object-fit: contain; mix-blend-mode: multiply; transition: transform .2s ease-out; }
.pack-wrapper:hover:not([aria-disabled="true"]) img { transform: translateY(-5px) rotate(-3deg); }
.pack-wrapper strong { font: 700 12px/1.2 var(--font-body); min-height: 22px; display: grid; place-items: center; }
.pack-wrapper small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.pack-wrapper[aria-disabled="true"] { cursor: help; }
.pack-offer.opened img { opacity: 1; }
.collection-row { border-top: 1px solid var(--line); display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; padding-top: 10px; flex: none; height: 120px; }
.collection-row > div > span { font-size: 10px; color: var(--muted); }
.collection-slots { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; align-items: start; }
.collection-slots .collectible { width: 100%; height: 72px; padding: 3px; }
.collection-slots .collectible strong { font-size: 10px; min-height: 16px; padding: 2px 0; }
.collection-slots .collectible small { display: none; }
.collection-slots .collectible-art img { object-fit: contain; }
.collection-empty { border: 1px dashed var(--line); border-radius: 8px; width: 100%; height: 72px; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.shop-feedback { min-height: 15px; font-size: 11px; flex: none; }
.shop-feedback.err { color: var(--danger); }
.shop-feedback.ok { color: #3c633e; }
.shop-tabs { display: flex; gap: 4px; }
.shop-tabs .btn { padding: 7px 14px; border-color: transparent; background: transparent; }
.shop-tabs .btn[aria-pressed="true"] { color: var(--lamp); background: #eee8dc; border-color: var(--line); }
.shop-tabs .btn[aria-disabled="true"] { opacity: 1; }
.buy-card, .open-pack, .take-card { width: 100%; min-height: 32px; font-size: 12px; }
.pack-reveal { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.pack-reveal header { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.pack-reveal h2 { margin: 0; font: 400 23px/1.1 var(--font-display); }
.pack-reveal header > span { color: var(--muted); font-size: 11px; }
.pack-reveal header .btn { margin-left: auto; font-size: 11px; }
.reveal-options { display: flex; flex: 1; justify-content: center; align-items: flex-start; gap: 28px; min-height: 0; }
.reveal-slot { width: 154px; display: flex; flex-direction: column; gap: 7px; }
.reveal-options .collectible { width: 100%; height: 164px; }
.owned-joker { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.owned-actions { display: flex; gap: 3px; visibility: hidden; }
.owned-joker:hover .owned-actions, .owned-joker:focus-within .owned-actions { visibility: visible; }
.owned-actions .btn { min-height: 28px; padding: 3px 5px; font-size: 10px; }
.owned-actions .game-icon { width: 13px; height: 13px; }
.owned-actions .move-left .game-icon { transform: rotate(180deg); }
.owned-actions .sell-card { flex: 1; white-space: nowrap; }
.row-score { flex: none; min-height: 17px; font-size: 11px; color: var(--muted); }
.row-score p { margin: 0; font-size: 11px; }
.deck-heading { color: var(--muted); font-size: 12px; }
.collectible, .collectible-art img, .deck-card, .pack-wrapper, .pack-wrapper img { filter: none; opacity: 1; }
/* A modest pigment reduction keeps the fantasy coats soft on the paper stock. */
.collectible-art img, .pack-wrapper img, .joker-thumb, .shop-transfer img { filter: saturate(.84); }
@media (hover: none) { .owned-actions { visibility: visible; } }
.deck-page { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 8px; }
.deck-page nav, .deck-tools { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex: none; }
.deck-page nav > span, .deck-tools small { color: var(--muted); font-size: 11px; }
.deck-tools .seg svg { width: 13px; height: 13px; vertical-align: -2px; }
.deck-tools strong { font-size: 13px; color: var(--lamp); }
.deck-scroll { overflow-y: auto; flex: 1; min-height: 0; scrollbar-color: #a49b88 #f0ebe2; scrollbar-width: thin; padding: 6px; }
.illustrated-deck { display: grid; grid-template-columns: repeat(13, 1fr); gap: 6px; }
.deck-card { position: relative; padding: 0; border: 1px solid #ccc2b0; background: #fff; border-radius: 5px; aspect-ratio: 63/88; min-width: 0; }
.deck-card img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 5px; }
.deck-card > span { position: absolute; left: 2px; top: 1px; background: #fff; display: flex; flex-direction: column; font: 700 11px/1.1 var(--font-body); padding: 1px; }
.deck-card > span svg { width: 11px; height: 11px; }
.deck-card.chosen { outline: 2px solid var(--lamp); outline-offset: 2px; }
.deck-card.missing { opacity: 1; border-style: dashed; }
.deck-card[aria-disabled="true"] { cursor: help; }
.deck-copies { position: absolute; bottom: 1px; right: 1px; background: var(--ink); color: white; border-radius: 3px; padding: 1px 3px; font-size: 10px; }
.modified-dot { position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #fff; background: var(--lamp); }
.target-summary { flex: none; display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--line); padding-top: 8px; }
.target-summary > div { flex: 1; }
.target-summary strong { font-size: 12px; }
.target-summary p, .target-summary small { font-size: 11px; margin: 3px 0 0; line-height: 1.3; }
.target-summary .btn { min-width: 115px; }
.level-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 12px; }
.level-cards .collectible { width: 100%; height: 195px; }
.level-cards p { font-size: 11px; text-align: center; margin: 7px 0; }
.game-icon { display: inline-block; vertical-align: middle; flex: none; }
@keyframes cat-breathe { 0%,65%,100% { transform: scale(1); } 80% { transform: scale(1.025,1.045) translateY(-1px); } }
@keyframes cat-twitch { 0%,70%,100% { transform: none; } 74%,82% { transform: translateX(-2px) rotate(-2deg); } 78%,86% { transform: translateX(2px) rotate(2deg); } }
@keyframes star-drift { 0%,100% { transform: translateY(2px) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes fortune-sway { 0%,70%,100% { transform: rotate(0); } 80% { transform: rotate(-3deg); } 90% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .collectible-art img { animation: none; } }
.reduce-motion .collectible-art img { animation: none; }
.game-icon { width: 20px; height: 20px; }
.act .game-icon, .sbtn .game-icon { width: 15px; height: 15px; margin-right: 3px; }
.sb .game-icon, .chip.lvl .game-icon { width: 12px; height: 12px; }
.faint .game-icon { width: 19px; height: 19px; }
.joker-thumb { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.jk > .joker-thumb { position: absolute; width: 30px; height: 36px; left: 3px; top: 4px; }
.ji { background: #faf4e7; }
.jk:not(.used) > .joker-thumb { animation: cat-breathe 6s ease-in-out infinite; }
.shop-transfer { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff7e5; padding: 5px; border: 1px solid #bfb29a; border-radius: 9px; box-shadow: 0 8px 16px #30312e26; }
.shop-transfer img { width: 100%; height: 100%; object-fit: contain; }
.deck-card[data-suit="yarn"], .deck-card[data-suit="paws"] { color: #bd2934; }
.deck-card[data-suit="fish"], .deck-card[data-suit="mice"] { color: #30312e; }

/* Scoring is a readable, left-to-right chain. Neighbouring cards stay clear. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.glyph { display:inline-flex; align-items:center; vertical-align:middle; }
.money .game-icon { width:18px; height:18px; margin-right:5px; }
.money small { display:flex; align-items:center; }
.score-meter { position:relative; }
.score-meter .lbl .game-icon { width:24px; height:24px; }
.score-meter .score-open { position:absolute; right:9px; top:9px; width:30px; height:30px; padding:4px; }
.score-rate { display:flex; align-items:center; gap:6px; }
.score-rate .game-icon { width:14px; height:14px; }
.meter .note { display:flex; align-items:center; gap:5px; margin-top:6px; }
.info > span { display:flex; align-items:center; gap:7px; }
.info .game-icon { width:18px; height:18px; }
.sbtns { grid-template-columns:repeat(4,1fr); }
.sbtns .sbtn { min-height:34px; }
.sbtns .game-icon { margin:0; width:18px; height:18px; }
.seat .row > span { display:inline-flex; align-items:center; gap:3px; }
.seat .row .game-icon { width:13px; height:13px; }
#mine { height:62px; grid-template-columns:1fr 250px; }
#handzone, #actions { top:410px; height:154px; }
.jrow { overflow:visible; justify-content:space-around; gap:8px; padding:3px 8px; }
.jrow .jk { flex:1; min-width:0; max-width:110px; height:54px; padding:0; background:#faf4e7; border-color:#bdb29e; }
.jrow .jk > .joker-thumb { width:100%; height:100%; left:0; top:0; animation:none; }
.jrow .jk.empty { background:transparent; border-style:dashed; }
.slot-number { position:absolute; bottom:2px; right:5px; font-size:10px; color:#746b59; }
.act .game-icon { width:22px; height:22px; margin:0; }
#hint .game-icon { width:17px; height:17px; }
.preview-repeat { display:inline-flex; align-items:center; gap:2px; margin-left:12px; }
.scoring #trick .lbl { visibility:hidden; }
.score-sequence { position:absolute; z-index:45; left:104px; right:104px; bottom:0; height:48px; display:grid; grid-template-columns:40px 58px minmax(58px,1fr) 9px minmax(60px,1fr) 9px minmax(75px,1.2fr) 28px; align-items:center; gap:6px; padding:4px 8px; background:#faf4e7; color:#30312e; border:1px solid #c9bca3; border-radius:8px; font-variant-numeric:tabular-nums; box-shadow:0 3px 0 #24372c24; }
.score-source { width:38px; height:38px; position:relative; display:grid; place-items:center; }
.score-source > img { width:100%; height:100%; object-fit:contain; }
.score-source > .cd { position:absolute!important; left:6px!important; top:1px!important; transform:scale(.36); transform-origin:top left; }
.score-source > .repeat-source { position:absolute; width:24px; height:27px; bottom:-2px; right:-4px; padding:1px; background:#faf4e7; border:1px solid #c9bca3; border-radius:3px; }
.score-source .activation { position:absolute; right:-8px; top:-8px; display:flex; align-items:center; color:#a3372a; background:#faf4e7; font-size:11px; font-weight:800; border-radius:3px; }
.activation .game-icon { width:12px; height:12px; }
.score-operation { display:flex; align-items:center; gap:2px; font-size:17px; color:#266887; }
.score-operation .game-icon { width:15px; height:15px; }
.score-operation.mult { color:#ac382e; }
.score-dial { display:flex; align-items:center; gap:4px; border-radius:4px; padding:5px; font-size:20px; line-height:26px; }
.score-dial.chips { background:#d7e8ec; color:#245a72; }
.score-dial.mult { background:#f1d8cc; color:#9c3027; }
.score-dial .game-icon { width:17px; height:17px; }
.score-dial b, .score-subtotal { min-width:0; font-size:clamp(15px,1.9em,22px); }
.score-subtotal { font-size:26px; text-align:right; color:#39362d; white-space:nowrap; }
.score-symbol { color:#82745c; font-size:16px; text-align:center; }
.score-skip { width:28px; height:32px; display:grid; place-items:center; padding:4px; border:0; border-radius:4px; color:#706552; background:transparent; }
.score-skip:hover, .score-skip:focus-visible { background:#e5dac3; color:#30312e; }
.score-skip .game-icon { width:19px; height:19px; }
.score-sequence.big-mult { border-color:#b74b37; }
.score-sequence.big-mult .score-subtotal { color:#ac382e; }
.score-sequence.resolved { border-color:#a98436; background:#fff6dc; }
.score-token { position:absolute; z-index:70; pointer-events:none; display:flex; align-items:center; justify-content:center; gap:3px; min-width:36px; padding:3px 5px; border:1px solid #b3c9cf; border-radius:4px; color:#245a72; background:#edf5f5; font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.score-token .game-icon { width:16px; height:16px; }
.score-token.is-mult { color:#9c3027; border-color:#d3a88f; background:#f9e8dc; }
.score-token.hand-gain, .score-token.bank-bonus { transform:translate(-50%,-50%); }
.score-active { outline:2px solid #b78128; outline-offset:2px; }
.award-parts, .award-total small, .award-name small, .end-row .n { display:flex; align-items:center; gap:5px; }
.award-parts .game-icon, .award-name .game-icon, .award-total .game-icon, .end-row .game-icon { width:16px; height:16px; }

/* Practice extends the same table: choose, score, replay. */
.ts-panel { gap:10px; }
.ts-practice { padding:8px; min-height:36px; }
.practice-label { font:400 28px/1.2 var(--font-display); padding:10px 4px; }
.practice-meter { position:relative; min-height:130px; }
.practice-meter .x { font-size:38px; overflow-wrap:anywhere; }
.practice-meter .score-open { position:absolute; right:8px; top:8px; width:30px; height:30px; padding:5px; margin:0; }
.practice-equation { font-size:12px; display:flex; gap:5px; align-items:center; }
.practice-setting { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 4px; border-bottom:1px solid var(--line); }
.practice-setting input[type="number"] { width:95px; padding:7px 8px; border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--ink); font:700 20px var(--font-body); caret-color:var(--lamp); font-variant-numeric:tabular-nums; }
.practice-setting input[type="checkbox"] { width:18px; height:18px; accent-color:var(--lamp); }
.final-setting { font-size:13px; }
.practice-fresh { display:flex; align-items:center; gap:7px; padding:8px 4px; color:var(--muted); font-size:11px; }
.practice-mode .sbtns { grid-template-columns:repeat(3,1fr); }
#opps.practice-bar { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.practice-bar > div { margin-right:auto; display:flex; flex-direction:column; gap:5px; }
.practice-bar b { font:400 25px/1 var(--font-display); }
.practice-bar > div span { color:var(--muted); font-size:12px; }
.practice-bar .game-icon { width:17px; height:17px; }
.practice-mode select, .practice-mode input[type="search"] { border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--ink); font:inherit; padding:8px; caret-color:var(--lamp); }
.practice-mode select:focus-visible, .practice-mode input:focus-visible { outline:2px solid var(--lamp); outline-offset:2px; }
.practice-presets select { width:165px; }
.practice-mode #actions { grid-template-rows:1.35fr 1fr 1fr; }
.practice-mode #actions .big { grid-column:span 2; }
.practice-mode #hand .cd { cursor:pointer; }
.practice-picking #handzone, .practice-picking #mine, .practice-picking #actions { visibility:hidden; }
.act.big .game-icon, .btn.gold .game-icon { stroke:currentColor; }
.practice-mode #hint { font-size:12px; }
.practice-mode #shop { gap:10px; }
.practice-mode #shop .sh-head h2 { font-size:23px; }
.practice-done { margin-left:auto; }
.practice-search, .practice-card-tools { display:flex; align-items:center; gap:10px; min-height:35px; flex:none; }
.practice-search input { width:240px; }
.practice-search select { width:130px; }
.practice-picker-error { font-size:12px; color:var(--danger); }
.practice-selection-status { font-size:12px; color:var(--danger); flex:none; }
.practice-selection-status:empty { display:none; }
.practice-card-tools .practice-picker-error { display:none; }
.row-score .game-icon { width:13px; height:13px; }
.shop-feedback > span { display:inline-flex; }
.shop-feedback > span .game-icon { width:14px; height:14px; }
.practice-choices { flex:1; min-height:0; overflow:auto; scrollbar-color:#bdb29e transparent; scrollbar-width:thin; padding:4px; }
.practice-card-grid { display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); gap:5px; align-content:start; }
.practice-card, .practice-joker { position:relative; padding:0; border:1px solid #c6bdac; border-radius:5px; background:#fffaf2; color:var(--ink); }
.practice-card { width:100%; aspect-ratio:5/7; }
.practice-card img { width:100%; height:100%; display:block; border-radius:4px; object-fit:contain; }
.practice-card.picked, .practice-joker.picked { outline:2px solid var(--lamp); outline-offset:0; border-color:var(--lamp); }
.practice-card i { position:absolute; right:-1px; bottom:-1px; background:var(--panel); border:1px solid var(--lamp); border-radius:3px; padding:1px; }
.practice-card i .game-icon { width:12px; height:12px; display:block; }
.practice-card:hover, .practice-joker:hover { border-color:var(--lamp); }
.practice-joker-grid { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; align-content:start; }
.practice-joker { height:112px; padding:12px 4px; }
.practice-joker > img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.practice-joker > .game-icon { position:absolute; top:3px; left:3px; width:13px; height:13px; }
.practice-selected { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; height:80px; flex:none; border-top:1px solid var(--line); padding-top:8px; }
.practice-owned { display:flex; align-items:center; gap:5px; min-width:0; }
.practice-owned > img { width:64px; height:70px; object-fit:contain; mix-blend-mode:multiply; }
.practice-owned > div { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.practice-owned .btn { padding:4px; width:25px; min-height:30px; font-size:20px; }
.practice-owned .btn .game-icon { width:13px; height:13px; }
.practice-empty { border:1px dashed var(--line); border-radius:5px; display:grid; place-items:center; height:70px; }
.practice-no-results { grid-column:1/-1; margin:20px 0; font-size:13px; }

/* The shop displays physical cards and sealed packs, with prices on the items. */
.shop-display { grid-template-columns:294px 1fr; align-items:center; }
.joker-shelf > div { gap:20px; }
.shop-offer, .pack-offer, .reveal-slot { position:relative; }
.shop-offer { width:118px; }
.collectible { width:118px; height:168px; padding:12px 4px; border-radius:7px; background:#fffcf5; border:1px solid #c4b89f; box-shadow:0 3px 2px #41382926; }
.collectible-art { background:transparent; border-radius:0; overflow:visible; }
.collectible-art img { animation:none!important; }
.collectible-index { position:absolute; left:4px; top:4px; z-index:1; line-height:1; }
.collectible-index .game-icon { width:12px; height:12px; }
.collectible-index.bottom { top:auto; left:auto; right:4px; bottom:4px; transform:rotate(180deg); }
.collectible[data-type="star"] { background:#eff0f5; }
.collectible[data-type="fortune"] { background:#eff2e9; }
.shop-offer .buy-card, .pack-offer .open-pack { position:absolute; z-index:3; right:-6px; top:-13px; width:auto; min-width:55px; min-height:29px; padding:4px 9px; border-radius:14px; background:var(--panel); display:flex; gap:4px; align-items:center; justify-content:center; font-size:14px; }
.pack-shelf > div { gap:24px; align-items:center; padding:0 8px; }
.pack-offer { flex:1; max-width:130px; }
.pack-wrapper { display:block; background:transparent; }
.booster { --foil:#d9bc8f; height:174px; position:relative; background:#f1e3c8; border-radius:1px; isolation:isolate; transform:rotate(-3deg); clip-path:polygon(0 0,4% 2%,8% 0,12% 2%,16% 0,20% 2%,24% 0,28% 2%,32% 0,36% 2%,40% 0,44% 2%,48% 0,52% 2%,56% 0,60% 2%,64% 0,68% 2%,72% 0,76% 2%,80% 0,84% 2%,88% 0,92% 2%,96% 0,100% 0,100% 100%,96% 98%,92% 100%,88% 98%,84% 100%,80% 98%,76% 100%,72% 98%,68% 100%,64% 98%,60% 100%,56% 98%,52% 100%,48% 98%,44% 100%,40% 98%,36% 100%,32% 98%,28% 100%,24% 98%,20% 100%,16% 98%,12% 100%,8% 98%,4% 100%,0 100%); }
.booster::before, .booster::after { content:""; position:absolute; z-index:2; left:0; right:0; height:14px; background:repeating-linear-gradient(90deg,var(--foil) 0 2px,#fff4d878 2px 3px,var(--foil) 3px 5px); border-block:1px solid #6c583b55; }
.booster::before { top:0; }
.booster::after { bottom:0; }
.booster-star { --foil:#a7a4ba; background:#d9dbe6; transform:rotate(3deg); }
.booster-fortune { --foil:#9fab8f; background:#dfe6d6; transform:rotate(-2deg); }
.pack-wrapper .booster img { width:100%; height:130px; position:absolute; top:23px; left:0; object-fit:contain; mix-blend-mode:multiply; transition:none; }
.pack-wrapper:hover .booster img { transform:none; }
.pack-wrapper:hover .booster, .pack-wrapper:focus-visible .booster { transform:translateY(-4px) rotate(0); }
.booster { transition:transform .18s ease-out; }
.booster-seal, .booster-mark { position:absolute; left:0; right:0; display:flex; justify-content:center; z-index:1; }
.booster-seal { top:18px; }
.booster-mark { bottom:17px; }
.booster-seal .game-icon, .booster-mark .game-icon { width:17px; height:17px; }
.collection-row { grid-template-columns:80px 1fr; gap:12px; height:135px; padding-top:8px; }
.collection-row > div:first-child { display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:12px; }
.collection-row > div:first-child .game-icon { width:16px; height:16px; }
.collection-slots { justify-items:center; }
.collection-slots .collectible, .collection-empty { width:57px; height:80px; padding:8px 2px; border-radius:4px; }
.collection-empty { background:transparent; }
.collection-empty .game-icon { width:15px; height:15px; }
.collection-slots .collectible-index .game-icon { width:8px; height:8px; }
.owned-joker { width:128px; align-items:center; }
.owned-actions { width:128px; }
.owned-actions .btn { min-height:26px; }
.reveal-options { align-items:center; gap:64px; }
.reveal-slot { width:132px; }
.reveal-options .collectible { height:188px; width:132px; }
.take-card { position:absolute; width:34px; min-height:30px; right:-10px; top:-10px; border-radius:50%; padding:4px; }
.shop-feedback { font-size:10px; }
.jrow .jk { flex:0 0 40px; max-width:40px; height:56px; }

/* Item faces are the action; their price is a non-interactive corner badge. */
button.collectible { font:inherit; text-align:center; }
button.pack-wrapper { position:relative; display:flex; flex-direction:column; align-items:stretch; padding:0; border:0; font:inherit; color:inherit; }
.booster { display:block; width:100%; }
.item-action { cursor:pointer; }
.item-action[aria-disabled="true"] { opacity:1; cursor:not-allowed; }
.item-price { position:absolute; z-index:3; right:-6px; top:-13px; min-width:55px; min-height:29px; padding:4px 9px; box-sizing:border-box; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:var(--panel); display:flex; gap:4px; align-items:center; justify-content:center; font-size:14px; font-weight:600; pointer-events:none; }
.item-price .game-icon { width:16px; height:16px; }
.reveal-slot .item-price { min-width:30px; min-height:30px; padding:4px; border-radius:50%; }
[data-reorder] { cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
[data-reorder] img { -webkit-user-drag:none; }
.joker-dragging, .joker-dragging * { cursor:grabbing!important; }
.joker-drag-origin { outline:1px dashed var(--lamp); outline-offset:3px; }
.joker-drag-origin > * { visibility:hidden; }
img.joker-drag-origin { opacity:1; outline-width:2px; }
.joker-drag-neighbor { transition:transform .14s ease-out; }
.joker-drag-ghost { position:absolute; z-index:80; pointer-events:none; transform-origin:center; border-radius:5px; box-shadow:0 7px 14px #30312e35; }
.joker-drag-ghost > * { box-sizing:border-box; object-fit:contain; }
.joker-drag-ghost.invalid-drop { outline:2px dashed var(--muted); outline-offset:3px; }
.joker-drop-marker { position:absolute; width:3px; background:var(--lamp); border-radius:2px; pointer-events:none; z-index:79; }
.joker-dragging .tip { display:none; }

/* Quiet round details; purchased joker slots expand the existing rows. */
.seat .cnt { min-width:2ch; text-align:right; }
#mine .jrow { justify-content:flex-start; gap:12px; overflow-x:auto; min-width:0; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
#mine .srow { min-width:0; overflow-y:auto; }
.shop-reroll { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.shop-reroll .game-icon { width:16px; height:16px; }
.collection-row { grid-template-columns:104px minmax(0,1fr); }
.collection-row > div:first-child { align-content:center; gap:10px; }
.collection-row > div:first-child > span { color:var(--ink); font-size:12px; }
.slot-buy { display:flex; align-items:center; justify-content:center; gap:3px; padding:6px 4px; width:104px; font-size:11px; white-space:nowrap; }
.slot-buy .game-icon { width:13px!important; height:13px!important; }
.collection-slots { grid-template-columns:repeat(var(--slots,5),minmax(104px,1fr)); overflow-x:auto; min-width:0; padding:6px 4px 8px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.owned-joker, .owned-actions { width:100%; max-width:128px; }
.pack-full .owned-actions { visibility:visible; }
.practice-selected { grid-template-columns:repeat(var(--slots,5),minmax(104px,1fr)); overflow-x:auto; min-width:0; height:90px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.joker-shelf { min-width:0; }
.joker-shelf > div { overflow-x:auto; justify-content:flex-start; padding:12px 8px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.shop-offer { flex:0 0 118px; }
.pack-shelf > div { justify-content:center; gap:40px; }
.offer-slot-buy { display:inline-flex; align-items:center; gap:3px; padding:7px 8px; font-size:12px; white-space:nowrap; }
.offer-slot-buy .game-icon { width:14px; height:14px; }

/* Touch table: spend the short viewport on cards and actions, not empty space. */
.action-caption { font-size:12px; margin-left:5px; }
.selection-count { display:inline-grid; place-items:center; min-width:23px; height:23px; margin-left:5px; border:1px solid currentColor; border-radius:50%; font-size:13px; }
.cd { transition-timing-function:cubic-bezier(.16,1,.3,1); }
button, [role="button"] { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
[data-reorder] { touch-action:none; }
.rotate h2 { font:400 32px var(--font-display); color:var(--lamp); margin:0 0 20px; }
.rotate .btn { min-height:48px; min-width:140px; }
.rotate .ph { animation-iteration-count:2; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
#stage.compact { height:500px; }
.compact #side { width:132px; height:476px; gap:8px; }
.compact .logo { gap:3px; }
.compact .logo b { font-size:28px; }
.compact .logo span { font-size:17px; }
.compact .me-card { padding:4px; gap:5px; }
.compact .me-card .por { width:36px; height:36px; }
.compact .money div { font-size:17px; }
.compact .meter .x { font-size:44px; }
.compact .meter { padding:8px; }
.compact .sbtns { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.compact .sbtns .sbtn { min-height:60px; padding:8px; }
.compact .sbtns .game-icon { width:22px; height:22px; margin:0; }
.compact #opps { left:156px; width:856px; height:68px; gap:8px; }
.compact .seat { grid-template-columns:40px 1fr; padding:5px 7px; gap:6px; }
.compact .seat .por { width:40px; height:40px; }
.compact .seat .nm { font-size:16px; }
.compact .seat .cnt { font-size:24px; }
.compact .seat .chips { min-height:16px; }
.compact #table { left:156px; top:88px; width:856px; height:210px; }
.compact #trick { left:164px; top:40px; }
.compact #trick .lbl { bottom:-12px; }
.compact #deck { top:50px; }
.compact #litter { top:42px; }
.compact #tray { top:122px; max-height:76px; overflow:auto; }
.compact #mine { left:156px; top:300px; width:648px; height:46px; }
.compact #mine .jrow { padding:2px 8px; }
.compact #mine .jk { height:42px; flex-basis:30px; }
.compact #handzone { left:156px; top:346px; height:142px; }
.compact #actions { left:816px; top:346px; width:196px; height:142px; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr; gap:8px; }
.compact #actions .act { font-size:18px; min-width:0; }
.compact #actions .big { grid-column:span 2; }
.compact #actions [data-act="pass"] { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.compact .action-caption { margin:0; font-size:14px; }
.compact #actions [data-act="sort"] { grid-column:auto!important; font-size:12px; }
.compact #actions .pounce { position:absolute; bottom:calc(100% + 8px); right:0; width:62px; height:52px; }
.compact #actions .pounce[aria-disabled="true"] { display:none; }
.compact #actions .game-icon { width:25px; height:25px; }
.compact #shop { left:156px; top:88px; width:856px; height:400px; padding:10px 14px; gap:6px; overflow-y:auto; }
.compact #shop .sh-head { min-height:54px; }
.compact #shop .sh-head .btn, .compact .shop-tabs button { min-height:50px; font-size:16px; }
.compact .shop-display { flex:1 0 192px; padding-top:10px; }
.compact .shop-offer .collectible { height:148px; width:106px; }
.compact .pack-wrapper { width:110px; }
.compact .collection-row { height:104px; padding-top:4px; }
.compact .collection-slots .collectible, .compact .collection-empty { height:58px; width:42px; }
.compact .owned-actions .btn { min-height:36px; }
.compact .shop-feedback { font-size:14px; min-height:20px; }
.compact .score-skip { width:50px; height:48px; }
.compact .score-sequence { right:90px; grid-template-columns:40px 58px minmax(58px,1fr) 9px minmax(60px,1fr) 9px minmax(75px,1.2fr) 50px; }
.compact .title-screen { padding-block:20px; }
.compact .ts-panel { gap:8px; }
.compact .ts-fan { height:200px; }
.compact .ts-logo b { font-size:80px; }
.compact .ts-foot .sbtn { min-height:48px; }
.compact .sheet-box .btn, .compact .optrow .seg button { min-height:50px; }
.compact.practice-mode #actions { grid-template-columns:1fr 1fr; grid-template-rows:1.2fr 1fr 1fr; }
.compact .practice-setting { flex-wrap:wrap; }
.compact.practice-mode #side [data-act="practice-exit"] { display:none; }
.compact .practice-bar > div span { display:none; }
.compact .practice-bar .btn { min-height:50px; }
.compact .ts-field input, .compact .ts-seg button { min-height:40px; }
.compact .ts-seg button { min-width:48px; }
.compact .ts-practice, .compact .ts-create, .compact .ts-join input, .compact .ts-join .btn { min-height:44px; }
@media (hover:none) {
  #hand .cd:hover:not(.sel) { --lift:0px; z-index:auto!important; }
  .collectible:hover, .pack-wrapper:hover { transform:none; }
}
@media (orientation:portrait) and (max-width:759px) {
  /* The rotation prompt stays readable even though the table behind it is scaled. */
  .rotate > div { transform:scale(calc(1 / var(--k))); }
  .rotate h2 { font-size:28px; }
  .rotate .ph { width:48px; height:76px; border-width:2px; }
}

/* One tall table: jokers above the trick, your hand below, opponents to the right. */
#stage.table-layout #side { width:132px; }
#stage.table-layout .logo { gap:3px; }
#stage.table-layout .logo b { font-size:28px; }
#stage.table-layout .logo span { font-size:17px; }
#stage.table-layout .me-card { padding:4px; gap:5px; }
#stage.table-layout .me-card .por { width:36px; height:36px; }
#stage.table-layout .meter .x { font-size:44px; }
#stage.table-layout .sbtns { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
#stage.table-layout .sbtns .sbtn { min-height:54px; }
#stage.table-layout #table { left:156px; top:calc(-1 * var(--table-bleed, 0px)); width:656px; height:calc(100% + 2 * var(--table-bleed, 0px)); }
#stage.table-layout .felt { border:0; border-radius:0; }
#stage.table-layout .info:empty { display:none; }
#stage.table-layout #opps:not(.practice-bar) { left:824px; top:12px; width:188px; height:calc(100% - 232px); display:flex; flex-direction:column; gap:12px; }
#stage.table-layout .seat { grid-template-columns:40px minmax(0,1fr); align-items:center; padding:10px 8px; gap:6px; min-height:84px; flex:1; max-height:120px; }
#stage.table-layout .seat .por { width:40px; height:40px; }
#stage.table-layout .seat .row { flex-wrap:wrap; gap:2px 6px; }
#stage.table-layout .seat .nm { font-size:15px; }
#stage.table-layout .seat .chips { flex-wrap:wrap; }
#stage.table-layout #mine { left:176px; top:calc(62px - var(--table-bleed, 0px)); width:616px; height:92px; display:flex; flex-direction:column; align-items:center; gap:4px; z-index:2; }
#stage.table-layout #mine .jrow { flex:none; width:100%; height:60px; justify-content:safe center; background:none; border:0; padding:2px 8px; }
#stage.table-layout #mine .jk { height:56px; flex:0 0 40px; }
#stage.table-layout #mine .srow { flex:none; max-width:100%; height:24px; background:none; border:0; justify-content:center; padding:0; color:var(--lamp-ink); }
#stage.table-layout #status { left:18px; right:96px; top:14px; display:flex; align-items:center; gap:12px; text-align:left; }
#hand-counter { position:absolute; top:14px; right:18px; display:flex; align-items:center; gap:5px; color:var(--lamp-ink); font-size:16px; }
#stage.table-layout #status .m { font-size:16px; }
#stage.table-layout #status .sb { border:0; background:none; color:#fffaf2; font-size:12px; }
.turn-clock { margin-left:auto; flex:none; font-size:16px; color:#fffaf2; font-variant-numeric:tabular-nums; }
.turn-clock.urgent { color:#fff; text-decoration:underline; text-underline-offset:4px; }
#stage.table-layout #trick { left:74px; top:calc(50% - 96px); }
#stage.table-layout #trick .lbl { bottom:-12px; }
.table-tools { position:relative; flex:none; height:110px; margin-top:4px; }
#deck { padding:0; border:0; background:none; border-radius:6px; }
#stage.table-layout #deck { left:0; right:auto; top:6px; bottom:auto; width:60px; height:82px; }
#stage.table-layout #deck .cd { --cw:48px; }
#stage.table-layout #deck .count { right:0; bottom:0; }
#stage.table-layout #litter { left:66px; right:auto; top:12px; width:66px; height:64px; }
#stage.table-layout #litter .box { left:0; top:0; width:66px; height:44px; }
#stage.table-layout #tray { right:0; top:82px; width:66px; max-height:28px; overflow:auto; }
#stage.table-layout #tray .cd { --cw:16px; }
#stage.table-layout .table-tools .count { background:var(--panel); color:var(--ink); }
#stage.table-layout .revbar { bottom:auto; top:142px; left:18px; transform:none; padding:3px 7px; }
#stage.table-layout #handzone { left:214px; top:auto; bottom:calc(12px - var(--table-bleed, 0px)); width:540px; height:154px; z-index:3; }
#stage.table-layout #hint { color:#fffaf2; }
#stage.table-layout #hint.err { background:var(--panel); color:var(--danger); border-radius:4px; padding:3px 6px; }
#stage.table-layout #actions { left:824px; top:auto; bottom:12px; width:188px; height:190px; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr); gap:8px; }
#stage.table-layout #actions .big { grid-column:span 2; }
#stage.table-layout #actions .pounce { position:static; width:auto; height:auto; }
#stage.table-layout #actions [data-act="sort"] { grid-column:auto!important; }
#stage.table-layout #actions:has(.pounce[aria-disabled="true"]) [data-act="sort"] { grid-column:span 2!important; }
#stage.table-layout #actions .pounce[aria-disabled="true"] { display:none; }
#stage.table-layout #actions [data-act="pass"] { display:flex; align-items:center; justify-content:center; flex-direction:row; gap:5px; }
#stage.table-layout .score-sequence { left:20px; right:20px; top:calc(50% + 34px); bottom:auto; }
#stage.table-layout.practice-mode #opps { left:824px; top:12px; width:188px; height:calc(100% - 232px); flex-direction:column; align-items:stretch; justify-content:flex-start; padding:8px 0; border:0; }
#stage.table-layout.practice-mode .practice-bar > div { margin:0 0 12px; }
#stage.table-layout.practice-mode .practice-bar b { font-size:24px; }
#stage.table-layout.practice-mode .practice-presets select { width:100%; }
#stage.table-layout.practice-mode .practice-bar .btn { min-height:48px; }
#stage.table-layout.practice-mode #shop { left:156px; top:12px; width:656px; height:calc(100% - 24px); }

/* Read-only shared deck: ownership and spent cards remain visible at a glance. */
.deck-view-box { width:940px; padding:14px 18px; scrollbar-width:thin; scrollbar-color:var(--line) var(--panel); }
.deck-view-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.deck-view-head h2 { margin:0; }
.deck-view-head small { font:16px var(--font-body); color:var(--muted); }
.deck-view-head .btn { min-height:48px; }
.deck-legend { display:flex; gap:20px; align-items:center; margin:8px 0 12px; font-size:14px; }
.deck-legend > span { display:flex; align-items:center; gap:5px; }
.deck-legend .in-hand { color:#285332; }
.deck-legend .played { color:#62665b; }
.deck-overview { display:grid; gap:8px; }
.deck-suit { display:grid; grid-template-columns:repeat(var(--deck-columns),minmax(0,1fr)); gap:6px; }
.deck-entry { position:relative; min-width:0; border-radius:6px; padding:4px; background:var(--card-line); }
.deck-entry .cd { position:relative; width:100%; height:auto; aspect-ratio:5/7; transform:none; }
.deck-entry.in-hand { background:#285332; }
.deck-entry.in-hand .cd-i { background:#d8ebd2; }
.deck-entry.in-hand .cd-image { mix-blend-mode:multiply; }
.deck-entry.played { background:#a1a39d; }
.deck-entry.played .cd { filter:grayscale(1); opacity:.43; }
.deck-state { position:absolute; right:1px; bottom:1px; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:#285332; color:#fff; }
.played .deck-state { background:#62665b; }
.deck-state .game-icon { width:14px; height:14px; }
.deck-entry .cd-index b { font-size:12px; }
.deck-entry .mk { width:12px; height:12px; }

/* A single quiet entrance to every table utility. */
#stage .settings-launcher { display:flex; justify-content:flex-start; }
#stage .settings-launcher .sbtn { width:54px; min-height:54px; padding:10px; border-color:transparent; background:transparent; }
#stage .settings-launcher .sbtn:hover { background:#ded9cd; }
#stage .settings-launcher .game-icon { width:28px; height:28px; margin:0; }
#stage.compact .settings-launcher .sbtn { width:64px; min-height:64px; }
.options-box { width:460px; padding:22px 26px; }
.options-box h2 { margin-bottom:18px; }
.settings-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:16px; margin-top:12px; border-top:1px solid var(--line); }
.settings-links .btn { display:flex; align-items:center; gap:10px; min-height:46px; text-align:left; background:transparent; border-color:transparent; }
.settings-links .btn:hover { background:#e9e4da; }
.settings-links .game-icon { width:24px; height:24px; }
.act.big .game-icon, .btn.gold .game-icon { filter:brightness(0) invert(1); }