:root {
  --cw: 84px; --ar: 0.714; --ch: calc(var(--cw) / var(--ar)); --hand-h: calc(var(--ch) * 1.15 + 16px); --pw: 64px;
  --side: clamp(230px, 21vw, 310px);
  --bg: #090c10; --panel: #161c23; --panel2: #1e262f; --line: #2a3541; --line2: #3d4b5b;
  --text: #e9eef3; --muted: #8997a6; --accent: #5aa9ff; --gold: #e6b655; --warn: #f2b84b; --good: #5cc28a;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #3d4b5b transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { display: grid; grid-template-rows: 46px minmax(0, 1fr); background: var(--bg); color: var(--text);
  font: 14px/1.4 "Segoe UI", system-ui, sans-serif; overflow: hidden; user-select: none; }
.muted { color: var(--muted); }
.warn { color: var(--warn); }
.ok { color: var(--good); }

button, select, input, textarea { font: inherit; color: var(--text); background: #232c36; border: 1px solid var(--line2); border-radius: 7px; padding: 4px 11px; }
button, select { background: linear-gradient(#2b3642, #222b35); box-shadow: inset 0 1px 0 #ffffff12, 0 1px 2px #0006; }
button { cursor: pointer; transition: filter .12s, background .12s; } button:hover:not(:disabled) { filter: brightness(1.2); }
button:active:not(:disabled) { filter: brightness(.92); }
button:disabled, select:disabled { opacity: .4; cursor: default; }
button.primary { background: linear-gradient(#3d8be0, #2a68b3); border-color: #5aa0ea; color: #fff; font-weight: 600; }
button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); padding: 2px 6px; }
button.link { background: none; border: 0; box-shadow: none; color: var(--accent); padding: 0 4px; text-decoration: underline; cursor: pointer; }
input, textarea { user-select: text; background: #10151b; }
input:focus-visible, textarea:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

#bar { display: flex; align-items: center; gap: 0; padding: 0 12px; background: #10151b; border-bottom: 1px solid #1c242d; white-space: nowrap; overflow: hidden; position: relative; z-index: 10; }
#bar .group { display: flex; align-items: center; gap: 6px; padding: 0 12px; }
#bar button:not(.primary), #bar select { background: transparent; border-color: transparent; box-shadow: none; }
#bar button:not(.primary):hover:not(:disabled), #bar select:hover:not(:disabled) { background: #ffffff12; filter: none; }
#bar .spacer { flex: 1; }
#bar #help { margin-right: 14px; }
.brand { font-size: 15px; letter-spacing: .02em; padding-right: 14px; display: flex; align-items: center; gap: 9px; }
.brand::before { content: ''; width: 13px; height: 18px; border-radius: 2.5px; background: linear-gradient(135deg, #f3d07c, #b9862e); box-shadow: 4px 2px 0 -1px #5aa9ff, 0 0 0 1px #0008; transform: rotate(-8deg); }
.support { color: #ff8fb1; text-decoration: none; } .support:hover { text-decoration: underline; }

#app { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); min-height: 0; }
#table { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 0; min-width: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 50%, #131920, #090c10); }

/* A seat: player panel, battlefield, piles (and the hand below or above). */
.seat { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.seat.opp { flex: 1 1 0; } .seat.me { flex: 1.3 1 0; }
.seat-body { flex: 1; display: flex; gap: 6px; min-height: 0; }
.zone.hand { flex: none; }
.mains { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.pp, .piles { flex: none; background: #141a21; border: 1px solid transparent; border-radius: 12px; }
.pp { width: 148px; display: flex; flex-direction: column; gap: 8px; padding: 9px 8px; overflow-x: hidden; overflow-y: auto; transition: border-color .2s, box-shadow .2s; }
.seat.active .pp { border-color: #e6b65599; box-shadow: inset 0 0 26px #e6b6551f; }
.pid { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 16px; color: #fff; text-shadow: 0 1px 2px #0009;
  background: radial-gradient(circle at 35% 30%, #5b8fc4, #25476b); border: 2px solid #0b0f14; box-shadow: 0 0 0 1px #6f8aa8; }
.seat.me .avatar { background: radial-gradient(circle at 35% 30%, #5fb087, #1f5a3f); box-shadow: 0 0 0 1px #6fa88a; }
.seat.active .avatar { box-shadow: 0 0 0 2px var(--gold), 0 0 10px #e6b65599; }
.pname { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pname small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.seat.active .pname small { color: var(--gold); }

.pctrs { display: flex; flex-direction: column; gap: 2px; }
.pctr { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 2px 8px; border-radius: 7px; transition: background .12s; }
.pctr.mine { cursor: pointer; } .pctr.mine:hover { background: #ffffff0f; } .pctr.mine:active { background: #ffffff1c; }
.pctr em { font-style: normal; color: var(--muted); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pctr strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.pctr.zero strong { color: var(--muted); font-weight: 400; }
.pctr.big { flex-direction: column; align-items: center; gap: 0; padding: 6px 4px 8px; border-radius: 12px; margin-bottom: 2px; }
.pctr.big em { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; }
.pctr.big strong { font-size: 52px; font-weight: 700; line-height: 1; color: #f1f7f3; text-shadow: 0 2px 10px #000c; }
.pctr.big[data-level="mid"] strong { color: #ffd166; }
.pctr.big[data-level="low"] strong { color: #ff6b6b; }
.addctr { font-size: 11.5px; align-self: center; opacity: 0; transition: opacity .15s; }
.pp:hover .addctr, .addctr:focus-visible { opacity: 1; }
.stats { margin-top: auto; display: flex; flex-direction: column; gap: 3px; }
.stat { display: flex; justify-content: space-between; font-size: 12px; padding: 1px 8px; }
.stat em { font-style: normal; color: var(--muted); } .stat b { font-variant-numeric: tabular-nums; }

.piles { display: flex; gap: 12px; padding: 8px 12px 8px 10px; overflow-x: hidden; overflow-y: auto; }
.pcol { display: flex; flex-direction: column; gap: 8px; width: var(--pw); }
.pcol:empty { display: none; }
.piles > .pile { width: var(--pw); }

/* Battlefield */
.zone.free { flex: 1; position: relative; display: flex; flex-direction: column; container-type: size; --rh: calc((100cqh - 8px) / var(--rows, 3)); min-height: 0; border-radius: 12px;
  background: radial-gradient(ellipse 90% 120% at 50% 100%, #2a5f47, #183a2a 55%, #0e2319); box-shadow: inset 0 0 70px #0009; }
.seat.opp .zone.free { background: radial-gradient(ellipse 90% 120% at 50% 0%, #2c5372, #183247 55%, #0e1f2d); }
.zlabel { position: absolute; top: 5px; left: 10px; font-size: 10px; color: #ffffff38; pointer-events: none; text-transform: uppercase; letter-spacing: .14em; }
.zone.over { outline: 2px solid var(--gold); outline-offset: -2px; box-shadow: inset 0 0 30px #e6b65533; }
.rubber { position: absolute; border: 1px solid var(--gold); background: #e6b65526; pointer-events: none; z-index: 50; border-radius: 2px; }
.rowline { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; gap: 6px; border-radius: 6px; margin: 0 4px; }
.rowline.hot { background: #ffffff12; }

.zsize { position: absolute; top: 4px; right: 10px; z-index: 6; display: flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #ffffff80; opacity: 0; transition: opacity .15s; }
.zone.free:hover > .zsize, .piles:hover .zsize, .zsize:focus-within { opacity: 1; }
.zsize input { width: 84px; padding: 0; height: 14px; accent-color: var(--gold); background: none; border: 0; }
.piles .zsize { position: static; margin-top: auto; flex-direction: column; align-items: stretch; gap: 2px; }
.piles .zsize input { width: 100%; }

/* Hand */
.splitter { flex: none; height: 8px; margin: -4px 0; cursor: row-resize; position: relative; z-index: 4; }
.splitter::after { content: ''; position: absolute; left: 42%; right: 42%; top: 3px; height: 3px; border-radius: 2px; background: #ffffff26; }
.splitter:hover::after { background: var(--gold); }
.zone.hand { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 0; padding: 4px 12px; overflow: visible; border-radius: 12px; background: #141a21; }
.zone.hand:not(.opp) { height: var(--hand-h); }
.zone.hand.opp { height: calc(var(--ch) * 0.5 + 10px); gap: 0; background: none; }

/* Turn and phase strip */
.band { display: flex; align-items: center; gap: 14px; padding: 5px 10px; flex-wrap: wrap; background: none; }
.band-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.turn { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.turn::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.phases { display: flex; gap: 2px; padding: 3px; border-radius: 16px; background: #141a21; }
.phase { padding: 2px 12px; background: transparent; border-color: transparent; box-shadow: none; border-radius: 12px; color: var(--muted); font-size: 13px; }
.phase:hover:not(.on) { color: var(--text); background: #ffffff10; }
.phase.on { background: linear-gradient(#f3cf7c, #cf9a35); border-color: #f7dc9a; color: #2a1c02; font-weight: 700; box-shadow: 0 0 12px #e6b65566, inset 0 1px 0 #fff6; }
.zone.row { position: relative; display: flex; gap: 4px; align-items: center; min-height: calc(var(--ch) * .5 + 16px); min-width: 110px; flex: 1; background: #141a21; border-radius: 10px; padding: 14px 8px 4px; }

.welcome { margin: auto; max-width: 460px; text-align: left; padding: 26px 30px; background: linear-gradient(180deg, #1d252e, #141a21); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 60px #000a, inset 0 1px 0 #ffffff0d; }
.welcome h1 { margin: 0 0 8px; font-size: 26px; } .welcome li { margin: 8px 0; } .welcome p { color: var(--muted); }
.fanart { height: 74px; position: relative; margin-bottom: 14px; }
.fanart i { position: absolute; left: 50%; bottom: 0; width: 46px; height: 64px; margin-left: -23px; border-radius: 4px; border: 2px solid #c9d3e6; transform-origin: 50% 130%; box-shadow: 0 3px 8px #000a;
  background: repeating-linear-gradient(45deg, #2a3f6b 0 5px, #233559 5px 10px); }
.fanart i:nth-child(1) { transform: rotate(-16deg); } .fanart i:nth-child(3) { transform: rotate(16deg); }
.fanart i:nth-child(2) { background: linear-gradient(135deg, #f3d07c, #b9862e); border-color: #fff3cf; }
#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #10151bf2; border: 1px solid var(--line2); padding: 8px 18px; border-radius: 20px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 3000; max-width: 70vw; box-shadow: 0 8px 24px #000a; }
#toast.show { opacity: 1; }