/* PEEPER — the black-tile table: deep felt, brass and gold, goblins around it. */
:root{
  --bg-hi:#294238;--bg:#15261f;--bg-lo:#0b1511;
  --felt-hi:#2f6d54;--felt:#1e4f3e;--felt-lo:#12342a;--wood:#24180e;
  --gold:#d6bc7b;--gold-hi:#f4e2a8;--gold-deep:#9a7a3a;--on-gold:#2a2110;
  --cream:#efece1;--cream-2:#c9c3b0;--glass:rgba(9,21,16,.84);--glass-line:rgba(214,188,123,.38);
  --paper:#f6f0e1;--paper-2:#ebe3cd;--ink:#1d2a23;--ink-2:#4a554d;--muted:#857d6a;--line:#dccfae;
  --mine:#d4483e;--mine-deep:#8c2a23;--return:#3aae94;--return-deep:#226e5d;--declare:#a07ad1;--declare-deep:#5d4189;
  --gain:#2c8f5b;--loss:#c23b31;
  --serif:"Noto Serif KR","Song Myung",Georgia,serif;
  --font:Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;color:var(--cream);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(ellipse at 50% 0,var(--bg-hi),var(--bg) 55%,var(--bg-lo) 100%) fixed}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M20 14l1.6 5.2 5.4.2-4.3 3.2 1.6 5.2-4.3-3.1-4.3 3.1 1.6-5.2-4.3-3.2 5.4-.2z' fill='%23d6bc7b'/%3E%3Ccircle cx='66' cy='60' r='1.6' fill='%23d6bc7b'/%3E%3Ccircle cx='40' cy='76' r='1' fill='%23d6bc7b'/%3E%3C/svg%3E")}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
button:disabled{cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a{color:inherit}
img{display:block;max-width:100%}
/* The app box is the layout container; phones held upright get the table turned 90°. */
#app{container:app / size;height:100dvh;overflow-x:hidden;overflow-y:auto}
@media (orientation:portrait) and (max-width:600px) and (pointer:coarse){
  #app[data-playing=true]{position:fixed;top:0;left:100vw;width:100dvh;height:100vw;transform:rotate(90deg);transform-origin:0 0;overflow:hidden}
}
.boot-note{padding:60px 20px;text-align:center;color:var(--gold);font-family:var(--serif);font-size:18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Frame */
.app-wrap{min-height:100%;display:flex;flex-direction:column}
.app-wrap[data-playing=true]{height:100%;overflow:hidden}
.app-wrap[data-playing=true] .status-footer{display:none}
.game{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;max-width:1200px;margin:0 auto}
.bar{display:flex;align-items:center;gap:10px;padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
.brand{font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:.16em;color:var(--gold)}
.bar-meta{font-size:12.5px;color:var(--cream-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bar-left{display:flex;align-items:center;gap:8px;min-width:0}
.bar-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.round-pill{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid var(--glass-line);color:var(--gold);white-space:nowrap}
.text-button{font-size:13.5px;font-weight:700;color:var(--cream-2);padding:7px 10px;border-radius:10px}
.text-button:hover{color:var(--gold)}
.chip{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-line);color:var(--gold);font-size:15px;font-weight:800}
.chip:active{transform:translateY(1px)}
.status-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));font-size:12px;color:var(--cream-2)}
.footer-links{display:flex;gap:14px}
.link-button{font-size:12px;color:var(--cream-2);text-decoration:underline;text-underline-offset:3px}
.network-status:before,.connection-dot{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#5fd08f;margin-right:6px;vertical-align:1px}
.network-status.retrying:before,.network-status.connecting:before{background:var(--gold);animation:blink 1s infinite}
.toast{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);max-width:min(92cqw,440px);padding:10px 16px;border-radius:12px;background:var(--paper);color:var(--ink);font-size:13.5px;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.45);z-index:40;text-align:center}
.toast:empty{display:none}
.app-wrap[data-playing=true] .toast{top:auto;bottom:calc(var(--rack-h,110px) + env(safe-area-inset-bottom));z-index:25}

/* Tiles: black, glossy, heavy. --tw sets the width; everything scales from it. */
.tile{--tw:44px;position:relative;display:inline-grid;place-items:center;width:var(--tw);height:calc(var(--tw) * 1.36);border-radius:calc(var(--tw) * .17);
  background:linear-gradient(165deg,#3a3b3f 0%,#1c1d20 45%,#0e0f11 100%);color:#f3efe4;font-family:var(--serif);font-weight:900;font-size:calc(var(--tw) * .54);line-height:1;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.6),0 calc(var(--tw) * .07) 0 #030303,0 calc(var(--tw) * .16) calc(var(--tw) * .26) rgba(0,0,0,.45);user-select:none}
.tile:after{content:"";position:absolute;left:10%;right:10%;bottom:9%;height:2px;border-radius:2px;background:rgba(255,255,255,.08)}
.tile.x{color:var(--gold);text-shadow:0 0 12px rgba(214,188,123,.45)}
.tile.red{color:#e8574b;text-shadow:0 0 12px rgba(232,87,75,.4)}
.tile-assigned{position:absolute;top:calc(var(--tw) * .06);right:calc(var(--tw) * .1);font-family:var(--font);font-weight:800;font-size:calc(var(--tw) * .22);color:var(--gold-hi)}

/* Game header: brand, the turn status pill, and chips. */
.game-bar{gap:8px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top))}
.game-bar .brand{font-size:16px}
.turn-banner{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto;max-width:520px;padding:6px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);color:var(--cream);white-space:nowrap;overflow:hidden;transition:background .2s,color .2s}
.turn-banner-label{font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--gold)}
.turn-banner-name{font-family:var(--serif);font-weight:900;font-size:18px;line-height:1.25}
.turn-banner-note{font-size:12px;color:var(--cream-2);overflow:hidden;text-overflow:ellipsis}
.turn-banner-dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--seat-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--seat-color) 30%,transparent);animation:pulse 1.4s ease-in-out infinite}
.turn-banner[data-tone=own]{background:linear-gradient(var(--gold-hi),var(--gold));border-color:var(--gold-hi);color:var(--on-gold);box-shadow:0 0 26px rgba(214,188,123,.55)}
.turn-banner[data-tone=own] .turn-banner-label,.turn-banner[data-tone=own] .turn-banner-note{color:var(--on-gold);opacity:.75}
.turn-banner[data-tone=mine]{background:var(--mine);border-color:#f08a80}
.turn-banner[data-tone=return]{background:var(--return-deep);border-color:var(--return)}
.turn-banner[data-tone=declare]{background:var(--declare-deep);border-color:var(--declare)}
.turn-banner[data-tone=mine] *,.turn-banner[data-tone=return] *,.turn-banner[data-tone=declare] *{color:#fff!important}
/* Countdown in the top bar */
.banner-clock{display:flex;align-items:center;gap:8px;flex:none;margin-left:4px}
.banner-clock .track{display:block;flex:none;width:clamp(70px,16cqw,170px);height:7px;border-radius:4px;background:rgba(255,255,255,.28);overflow:hidden}
.banner-clock .fill{display:block;height:100%;background:#fff;transform-origin:left center}
.banner-clock .seconds{min-width:40px;text-align:right;font-family:var(--serif);font-weight:900;font-size:16px}
.turn-banner:has(.banner-clock){animation:none}
@container app (max-width:520px){.turn-banner:has(.banner-clock) .turn-banner-note,.turn-banner:has(.banner-clock) .turn-banner-label{display:none}}

/* The table */
.board{position:relative;flex:1;min-height:0;--av:clamp(42px,11.5cqmin,78px)}
.board.shake{animation:shake .5s var(--shake-delay,0ms) both}
.table{position:absolute;inset:12% 4.5% 5% 4.5%;border-radius:clamp(30px,8cqmin,80px);
  background:radial-gradient(110% 95% at 50% 42%,var(--felt-hi) 0%,var(--felt) 52%,var(--felt-lo) 100%);
  box-shadow:inset 0 0 50px rgba(0,0,0,.45),0 0 0 clamp(8px,1.8cqmin,14px) var(--wood),0 0 0 calc(clamp(8px,1.8cqmin,14px) + 1.5px) rgba(214,188,123,.55),0 22px 44px rgba(0,0,0,.55)}
.table:before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Ccircle cx='1' cy='1' r='.7' fill='black'/%3E%3C/svg%3E")}
.table:after{content:"";position:absolute;inset:clamp(10px,2.2cqmin,18px);border-radius:inherit;border:1px solid rgba(214,188,123,.22)}
.table-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--serif);font-weight:900;font-size:clamp(28px,8cqmin,74px);letter-spacing:.24em;color:rgba(214,188,123,.07);white-space:nowrap}

/* Seats */
.seats{position:absolute;inset:0;pointer-events:none}
.seat{position:absolute;left:calc(var(--lx) * 1%);top:calc(var(--ly) * 1%);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:2;pointer-events:auto;transition:filter .25s}
.seat-frame{position:relative;width:var(--av);height:var(--av);border-radius:24%;
  background:#0d1a14;box-shadow:0 0 0 2px var(--gold),0 0 0 4px #0b1611,0 0 0 5px rgba(214,188,123,.35),0 8px 18px rgba(0,0,0,.55);transition:transform .2s,box-shadow .2s}
.seat-avatar{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.seat-count{position:absolute;top:calc(var(--av) * -.14);right:calc(var(--av) * -.2);min-width:calc(var(--av) * .4);height:calc(var(--av) * .52);padding:0 3px;border-radius:5px;display:grid;place-items:center;
  background:linear-gradient(165deg,#3a3b3f,#121315);color:#f3efe4;font-family:var(--serif);font-weight:900;font-size:calc(var(--av) * .28);box-shadow:0 0 0 1px rgba(214,188,123,.6),0 3px 0 #000;transform:rotate(7deg)}
.seat-ai{position:absolute;right:-4px;bottom:-4px;padding:0 4px;border-radius:5px;background:var(--glass);border:1px solid var(--glass-line);color:var(--gold);font-size:9.5px;font-weight:900;letter-spacing:.04em}
.seat-badge{position:absolute;bottom:calc(var(--av) * -.12);left:calc(var(--av) * -.2);padding:1px 6px;border-radius:999px;background:var(--declare-deep);border:1px solid var(--declare);color:#fff;font-size:11px;font-weight:800}
.seat-plate{margin-top:8px;display:flex;align-items:center;gap:6px;max-width:calc(var(--av) * 2.6);padding:2px 9px 3px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);color:var(--cream);font-size:12px;font-weight:700;white-space:nowrap}
.seat-name{overflow:hidden;text-overflow:ellipsis}
.seat .money{font-size:11px;color:var(--gold);font-weight:800}
.seat .coin{width:8px;height:8px}
.seat-tag{margin-top:5px;font-size:11.5px;font-weight:800;line-height:1;padding:4px 9px;border-radius:999px;white-space:nowrap;background:rgba(239,236,225,.9);color:var(--ink)}
.seat-tag:empty{display:none}
.seat-tag.special{background:var(--declare-deep);color:#fff}
.seat.own .seat-plate{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

/* My own seat lies sideways to stay clear of the hand and the side seats. */
.seat.own{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:calc(var(--av) * .3 + 8px);align-items:center;justify-items:start;transform:translate(0,-50%)}
.seat.own .seat-frame{grid-row:1/3}
.seat.own .seat-plate{margin-top:0;align-self:end}
.seat.own .seat-tag{margin-top:5px;align-self:start}

/* Whose turn: golden frame, bobbing arrow, gold pill. */
.seat[data-state=turn]{z-index:4}
.seat[data-state=turn] .seat-frame{transform:scale(1.12);box-shadow:0 0 0 3px var(--gold-hi),0 0 0 5px #0b1611,0 0 0 7px var(--gold),0 0 32px 10px rgba(214,188,123,.6);animation:turnGlow 1.3s ease-in-out infinite}
.seat[data-state=turn] .seat-frame:before{content:"";position:absolute;left:50%;top:calc(var(--av) * -.44);margin-left:-8px;border:8px solid transparent;border-top:10px solid var(--gold);filter:drop-shadow(0 0 6px rgba(214,188,123,.8));animation:bob .8s ease-in-out infinite}
.seat[data-state=turn] .seat-tag{background:linear-gradient(var(--gold-hi),var(--gold));color:var(--on-gold);font-size:12.5px;box-shadow:0 0 14px rgba(214,188,123,.55)}
.seat[data-state=next] .seat-tag{background:transparent;color:var(--gold);border:1px solid var(--glass-line)}
.seat[data-state=passed] .seat-frame{filter:saturate(.45) brightness(.75)}
.seat[data-state=observer],.seat[data-observer=true]{filter:grayscale(1) opacity(.45)}

/* Passing and deciding show as speech bubbles beside the frame. */
.seat[data-state=passed] .seat-tag,.seat[data-state=declaring] .seat-tag{position:absolute;top:calc(var(--av) * .04);left:calc(50% + var(--av) * .64);margin:0;padding:6px 11px;border-radius:12px;background:var(--paper);color:var(--ink);font-family:var(--serif);font-weight:900;font-size:15px;box-shadow:0 4px 10px rgba(0,0,0,.4);animation:bubble .3s cubic-bezier(.2,.9,.3,1.4) both}
.seat[data-state=passed] .seat-tag:before,.seat[data-state=declaring] .seat-tag:before{content:"";position:absolute;left:-7px;top:11px;border:7px solid transparent;border-right-color:var(--paper);border-left:0}
.seat[data-state=declaring] .seat-tag{background:var(--declare-deep);color:#fff}
.seat[data-state=declaring] .seat-tag:before{border-right-color:var(--declare-deep)}
.seat[data-lside=right][data-state=passed] .seat-tag,.seat[data-lside=right][data-state=declaring] .seat-tag{left:auto;right:calc(50% + var(--av) * .64)}
.seat[data-lside=right][data-state=passed] .seat-tag:before,.seat[data-lside=right][data-state=declaring] .seat-tag:before{left:auto;right:-7px;border-right:0;border-left:7px solid var(--paper)}
.seat[data-lside=right][data-state=declaring] .seat-tag:before{border-left-color:var(--declare-deep)}
.seat.own[data-state=passed] .seat-tag,.seat.own[data-state=declaring] .seat-tag{left:0!important;right:auto!important;top:auto;bottom:calc(100% + 10px)}
.seat.own[data-state=passed] .seat-tag:before,.seat.own[data-state=declaring] .seat-tag:before{left:18px!important;right:auto!important;top:100%;border:7px solid transparent!important;border-bottom:0!important;border-top-color:var(--paper)!important}
.seat.own[data-state=declaring] .seat-tag:before{border-top-color:var(--declare-deep)!important}

/* Turn clock: a ring around the face of whoever is on turn, seconds in the corner. */
.seat-timer{position:absolute;inset:-7px;border-radius:30%;padding:4px;z-index:2;pointer-events:none;
  background:conic-gradient(var(--gold-hi) calc(var(--left,1) * 360deg),rgba(239,236,225,.16) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.seat-timer[data-urgent=true]{background:conic-gradient(#ff7a6e calc(var(--left,1) * 360deg),rgba(239,236,225,.16) 0)}
.seat-timer-sec{position:absolute;top:calc(var(--av) * -.2);left:calc(var(--av) * -.2);z-index:3;min-width:22px;height:22px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(var(--gold-hi),var(--gold));color:var(--on-gold);font-family:var(--serif);font-weight:900;font-size:12.5px;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.seat-timer[data-urgent=true]+.seat-timer-sec{background:#ff6b5e;color:#fff;animation:blink .5s infinite}
.seat-frame:has(.seat-timer){box-shadow:0 0 0 2px #0b1611,0 0 30px 8px rgba(214,188,123,.5)}

/* X counter for beginners, bottom left of the table. */
.x-counter{position:absolute;left:1.2%;bottom:1.5%;z-index:5;display:flex;align-items:center;gap:7px;padding:4px 11px 4px 5px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);font-size:12px;color:var(--cream-2);white-space:nowrap}
.x-counter b{font-family:var(--serif);font-weight:900;font-size:14px;color:var(--gold-hi)}
.x-counter small{font-size:11px;color:var(--cream-2)}
.x-counter.in-rack{display:none;position:static}
.x-mark{display:grid;place-items:center;width:22px;height:28px;border-radius:5px;background:linear-gradient(165deg,#3a3b3f,#121315);color:var(--gold);font-family:var(--serif);font-weight:900;font-size:15px;box-shadow:0 2px 0 #000}

/* Middle of the table */
.center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);--sx:var(--lx,50);--sy:var(--ly,50);width:min(62%,600px);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;z-index:1}
.overline{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--gold)}
.center-title{font-family:var(--serif);font-weight:900;font-size:clamp(19px,4cqmin,30px);color:var(--cream)}
.center-note{font-size:13px;color:var(--cream-2)}
.center-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:100%}
.center-tiles .tile{--tw:clamp(32px,8.5cqmin,60px)}
.center-tiles.many .tile{--tw:clamp(26px,6cqmin,44px)}
.center.enter .center-tiles .tile{animation:slam .42s cubic-bezier(.2,.9,.3,1.25) var(--enter-delay,0ms) both}
.center.enter .center-tiles .tile:nth-child(2){animation-delay:calc(var(--enter-delay,0ms) + 25ms)}
.center.enter .center-tiles .tile:nth-child(3){animation-delay:calc(var(--enter-delay,0ms) + 50ms)}
.center.enter .center-tiles .tile:nth-child(n+4){animation-delay:calc(var(--enter-delay,0ms) + 70ms)}
.trick-by,.reaction-result-label{display:flex;align-items:center;gap:6px;padding:3px 11px 4px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);font-size:12.5px;color:var(--cream-2)}
.trick-by b,.reaction-result-label b{color:var(--cream);font-weight:800}
.trick-dot{width:9px;height:9px;border-radius:50%;background:var(--seat-color)}
.trick-label{font-size:12.5px;font-weight:800;padding:4px 12px;border-radius:999px;background:rgba(239,236,225,.92);color:var(--felt-lo)}
.center.reaction-result.mine .reaction-result-label{background:var(--mine);border-color:#f08a80}
.center.reaction-result.return .reaction-result-label{background:var(--return-deep);border-color:var(--return)}
.reaction-result .reaction-result-label,.reaction-result .reaction-result-label b{color:#fff}
.trick-prev{font-size:11.5px;color:var(--cream-2);opacity:.85;padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.18)}
.reaction-followup{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--gold)}

/* One-shot effects: gilded serif lettering. */
.fx-layer{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:20}
.fx{--stroke:#0b1a13;grid-area:1/1;font-family:var(--serif);font-weight:900;font-size:clamp(32px,8cqmin,74px);color:var(--cream);white-space:nowrap;letter-spacing:.02em;animation:pop 1.3s cubic-bezier(.2,.9,.3,1.3) both;
  text-shadow:2px 2px 0 var(--stroke),-2px 2px 0 var(--stroke),2px -2px 0 var(--stroke),-2px -2px 0 var(--stroke),0 2px 0 var(--stroke),0 -2px 0 var(--stroke),2px 0 0 var(--stroke),-2px 0 0 var(--stroke),0 0 26px rgba(214,188,123,.7),0 6px 0 rgba(0,0,0,.35)}
.fx.combo{position:absolute;left:50%;top:72%;translate:-50% -50%;font-size:clamp(22px,5.4cqmin,44px);color:var(--gold-hi);animation-name:rise}
.fx.bomb{--stroke:#5c140f;color:var(--gold-hi);font-size:clamp(48px,13cqmin,120px)}
.fx.steal.mine{--stroke:var(--mine-deep)}
.fx.steal.return{--stroke:var(--return-deep)}
.fx.allpass{position:relative;color:var(--gold-hi);font-size:clamp(34px,9cqmin,82px)}
.fx.allpass:before{content:"";position:absolute;left:-40cqw;right:-40cqw;top:50%;height:66%;transform:translateY(-50%);z-index:-1;background:linear-gradient(90deg,transparent,rgba(8,20,15,.86) 25%,rgba(8,20,15,.86) 75%,transparent);border-top:1px solid rgba(214,188,123,.45);border-bottom:1px solid rgba(214,188,123,.45)}
.fx.stamp{--stroke:var(--declare-deep);transform:rotate(-5deg)}
.fx.myturn{color:var(--gold-hi);font-size:clamp(34px,9cqmin,80px)}

/* Controls */
.dock{position:absolute;right:1.5%;bottom:2%;z-index:6;width:clamp(250px,34%,400px);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"status actions" "extra extra";align-items:center;gap:6px 10px;padding:10px 10px 10px 14px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 14px 30px rgba(0,0,0,.45);backdrop-filter:blur(6px)}
.dock>[role=status]{grid-area:status;min-width:0}
.dock>.actions{grid-area:actions}
.dock>.hint,.dock>.interpretation,.dock>.reaction-clock{grid-area:extra}
.dock:has(.actions:empty){width:auto;max-width:clamp(200px,34%,360px);padding:8px 14px;box-shadow:none}
.phase-label{font-family:var(--serif);font-weight:900;font-size:16px;line-height:1.25;color:var(--cream)}
.caption{font-size:12px;color:var(--cream-2)}
.actions{display:flex;gap:8px}
.actions:empty{display:none}
.action{min-height:48px;padding:0 18px;border-radius:14px;white-space:nowrap;font-size:16px;font-weight:800;background:linear-gradient(#264a3c,#183328);color:var(--cream);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 0 #07110c,0 8px 14px rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s}
.action:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #07110c}
.action.main{background:linear-gradient(var(--gold-hi),var(--gold) 55%,#c7a862);color:var(--on-gold);border-color:var(--gold-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 var(--gold-deep),0 8px 16px rgba(0,0,0,.35)}
.action.main:active:not(:disabled){box-shadow:0 1px 0 var(--gold-deep)}
.action:disabled{filter:grayscale(.9) brightness(.7);opacity:.6}
.board[data-my-turn=true] .action.main:not(:disabled){animation:ready 1.2s ease-in-out infinite}
.hint{justify-self:start;font-size:13px;font-weight:800;color:var(--gold);padding:2px 0;text-decoration:underline;text-underline-offset:3px}
.interpretation{justify-self:stretch;height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--glass-line);background:#0f2019;color:var(--cream);font-weight:700}
.reaction-clock{display:flex;align-items:center;gap:10px}
.track{flex:1;height:7px;border-radius:4px;background:rgba(239,236,225,.15);overflow:hidden}
.fill{height:100%;border-radius:4px;background:var(--gold);transform-origin:left center;will-change:transform}
.seconds{min-width:46px;text-align:right;font-family:var(--serif);font-weight:900;font-size:15px;font-variant-numeric:tabular-nums}
.dock.reaction-opportunity{border-color:var(--mine);box-shadow:0 0 0 2px var(--mine),0 0 34px 8px rgba(212,72,62,.55),0 14px 30px rgba(0,0,0,.45);animation:alarm .9s ease-in-out infinite}
.dock.reaction-opportunity .phase-label{color:#ff9a90}
.dock.reaction-opportunity .fill{background:var(--mine)}
.dock.reaction-opportunity .action.main{background:linear-gradient(#ec6a5f,var(--mine));color:#fff;border-color:#f08a80;box-shadow:0 4px 0 var(--mine-deep),0 8px 16px rgba(0,0,0,.35)}
.dock.reaction-opportunity.return{border-color:var(--return);box-shadow:0 0 0 2px var(--return),0 0 34px 8px rgba(58,174,148,.5),0 14px 30px rgba(0,0,0,.45)}
.dock.reaction-opportunity.return .phase-label{color:#7fe0c8}
.dock.reaction-opportunity.return .fill{background:var(--return)}
.dock.reaction-opportunity.return .action.main{background:linear-gradient(#5fcbb1,var(--return));border-color:#7fe0c8;box-shadow:0 4px 0 var(--return-deep)}
.deadline-warning{position:absolute;top:-12px;right:14px;font-size:11.5px;font-weight:900;padding:3px 9px;border-radius:999px;background:var(--mine);color:#fff;opacity:0}
.reaction-opportunity[data-urgent=true] .deadline-warning{opacity:1;animation:blink .5s infinite}
.reaction-opportunity[data-urgent=true] .seconds{color:#ff9a90}

/* My hand: big tiles that overlap when they must, instead of shrinking. */
.rack{position:relative;padding:14px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(6,14,10,0),rgba(6,14,10,.72) 38%);transition:background .2s}
.rack[data-active=true]{background:linear-gradient(180deg,rgba(214,188,123,0),rgba(214,188,123,.16) 40%,rgba(214,188,123,.24));box-shadow:inset 0 2px 0 rgba(214,188,123,.55)}
.rack-head{display:none;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 8px;font-size:12.5px;color:var(--cream-2)}
.rack-head b{color:var(--cream)}
.rack-turn{font-size:12.5px;font-weight:900;color:var(--on-gold);background:linear-gradient(var(--gold-hi),var(--gold));padding:3px 10px;border-radius:999px}
.rack-turn.react{background:var(--mine);color:#fff}
/* Tiles overlap at most a quarter, so every number stays readable. */
.rack{--rack-tile:min(clamp(40px,17cqh,78px),calc((100cqw - 28px) / var(--n,10) / .76))}
.hand{--tw:var(--rack-tile);display:grid;grid-template-columns:repeat(var(--n),min(calc(var(--tw) + 6px),calc((100cqw - 28px) / var(--n))));justify-content:center;justify-items:center}
.hand-tile{position:relative;border-radius:10px;transition:transform .15s}
.hand-tile .tile{--tw:inherit}
.hand-tile[aria-pressed=true]{transform:translateY(-16px);z-index:3}
.hand-tile[aria-pressed=true] .tile{box-shadow:0 0 0 2px var(--gold-hi),0 0 22px 6px rgba(214,188,123,.6),0 4px 0 #030303}
.hand-tile[data-react=true]{z-index:2}
.hand-tile[data-react=true] .tile{box-shadow:0 0 0 2px #ff9a90,0 0 18px 5px rgba(212,72,62,.6),0 4px 0 #030303;animation:lift .8s ease-in-out infinite alternate}
.hand-tile:disabled .tile{filter:brightness(.85)}
.rack[data-active=true] .hand-tile:disabled .tile{filter:none}
.hand-tile:not(:disabled):hover{transform:translateY(-5px)}
.hand-tile[aria-pressed=true]:not(:disabled):hover{transform:translateY(-16px)}

/* Portrait phones: seats on the long sides, controls above the hand. */
@container app (orientation:portrait){
  .x-counter.on-table{display:none}
  .x-counter.in-rack{display:flex}
  .game-bar{flex-wrap:wrap}
  .game-bar .turn-banner{order:3;flex-basis:100%;max-width:none;padding:7px 14px}
  .board{--av:clamp(44px,13.5cqw,66px)}
  .table{inset:5% 3.5% 21% 3.5%;border-radius:clamp(28px,10cqw,60px)}
  .seat{left:calc(var(--px) * 1%);top:calc(var(--py) * 1%)}
  .center{top:42%;width:58%;--sx:var(--px,50);--sy:var(--py,50)}
  .center-tiles{gap:5px}
  .center-tiles .tile{--tw:clamp(28px,9cqw,48px)}
  .center-tiles.many .tile{--tw:clamp(22px,6.6cqw,36px)}
  .dock{left:8px;right:8px;bottom:6px;width:auto}
  .dock:has(.actions:empty){left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 16px)}
  .rack{padding-top:10px}
  .rack-head{display:flex}
  .hand{--tw:min(clamp(40px,15cqw,62px),calc((100cqw - 20px) / var(--cols,8) / .8));grid-template-columns:repeat(var(--cols),min(calc(var(--tw) + 6px),calc((100cqw - 20px) / var(--cols))));row-gap:8px}
  .seat[data-lside=right][data-state=passed] .seat-tag,.seat[data-lside=right][data-state=declaring] .seat-tag{left:calc(50% + var(--av) * .64);right:auto}
  .seat[data-lside=right][data-state=passed] .seat-tag:before,.seat[data-lside=right][data-state=declaring] .seat-tag:before{right:auto;left:-7px;border-left:0;border-right:7px solid var(--paper)}
  .seat[data-pside=right][data-state=passed] .seat-tag,.seat[data-pside=right][data-state=declaring] .seat-tag{left:auto;right:calc(50% + var(--av) * .64)}
  .seat[data-pside=right][data-state=passed] .seat-tag:before,.seat[data-pside=right][data-state=declaring] .seat-tag:before{left:auto;right:-7px;border-right:0;border-left:7px solid var(--paper)}
  .seat[data-state=declaring] .seat-tag:before{border-right-color:var(--declare-deep)!important;border-left-color:var(--declare-deep)!important}
}
/* Short landscape phones: the hand runs off the bottom edge like a real rack. */
@container app (orientation:landscape) and (max-height:500px){
  /* Short landscape home: brand on the left, choices on the right, no scrolling. */
  .game .welcome{display:grid;grid-template-columns:1fr minmax(280px,380px);column-gap:6cqw;align-content:center;justify-items:center;padding:12px 4cqw}
  .game .welcome>*{grid-column:1}
  .game .welcome .home-options{grid-column:2;grid-row:1 / span 8;align-self:center;margin:0}
  .game .welcome .welcome-foot{grid-column:2;grid-row:9;margin-top:10px}
  .game .welcome-wordmark{font-size:clamp(30px,8cqh,48px);margin:2px 0 8px}
  .game .welcome-goblin{width:62px;height:62px;margin:4px 0}
  .game .welcome-art{margin-bottom:8px}
  .game .welcome-art .tile{--tw:38px}
  .game .welcome h1{font-size:21px}
  .game .welcome-description{font-size:13px}
  .game .lobby{max-width:none;padding:4px 4cqw 12px}
  .game .lobby-seats{grid-template-columns:repeat(3,1fr)}
  .veil{padding:8px}
  .veil .panel{padding:14px 16px 0;max-height:calc(100cqh - 16px)}
  .veil .panel h1{font-size:21px;margin:0 0 4px}
  .veil .result-panel .result-kicker{display:none}
  .veil .result-panel h1{font-size:22px}
  .veil .result-banner{margin-bottom:6px;padding:4px 10px;font-size:12px}
  .veil .settlement{font-size:13px;margin:0 0 6px}
  .veil .settlement td{padding:5px 4px}
  .veil .panel p{font-size:12.5px;margin-bottom:6px}
  /* The main buttons stay in view while the sheet scrolls. */
  .veil .result-actions{position:sticky;bottom:0;margin:8px -16px 0;padding:8px 16px 12px;background:linear-gradient(rgba(246,240,225,0),var(--paper) 30%)}
  .veil .panel>.wide-action:last-child,.veil .panel .setup-note:last-child,.veil .panel .text-button:last-child{margin-bottom:14px}
  /* Menu in two columns so it fits a short landscape screen without scrolling. */
  .veil .menu-panel{max-width:700px;display:grid;grid-template-columns:1fr 1.25fr;column-gap:18px;align-items:start;padding-bottom:14px}
  .veil .menu-panel>.panel-top{grid-column:1 / -1}
  .veil .menu-panel>*{grid-column:1}
  .veil .menu-panel>.menu-group.settings{grid-column:2;grid-row:2 / span 5;margin-top:0}
  .veil .menu-row{min-height:42px}
  .game-bar{padding-top:6px;padding-bottom:4px}
  .chip{width:32px;height:32px;border-radius:10px;font-size:13px}
  .turn-banner{padding:4px 14px}
  .turn-banner-name{font-size:15px}
  .turn-banner-label{display:none}
  .seat-plate{margin-top:6px;font-size:11px;padding:1px 7px 2px}
  .seat-tag{margin-top:3px;font-size:10.5px;padding:3px 7px}
  .dock{padding:7px 8px 7px 12px;border-radius:15px}
  .action{min-height:40px;font-size:15px;padding:0 14px}
  .phase-label{font-size:14px}
  .rack{padding-top:16px;padding-bottom:0;height:calc(var(--rack-tile) * 1.36 * .84 + 16px);overflow:hidden}
}
/* Very short landscape (small phones with browser bars): everything tighter, the
   controls tucked into the corner so they never cover the table. */
@container app (orientation:landscape) and (max-height:380px){
  .board{--av:34px}
  .game-bar{padding:4px 10px}
  .chip{width:30px;height:30px;font-size:12px}
  .turn-banner{padding:3px 12px}
  .turn-banner-name{font-size:14px}
  .turn-banner-note{font-size:11px}
  .table{inset:14% 3.5% 4% 3.5%}
  .seat-plate{margin-top:5px;font-size:10px;padding:1px 6px;gap:4px}
  .seat .money{font-size:9.5px}
  .seat-tag{font-size:9.5px;padding:2px 6px}
  .seat-count{font-size:11px}
  .center{left:44%;width:min(52%,440px);gap:5px}
  .center-tiles .tile{--tw:clamp(24px,8cqmin,40px)}
  .center-tiles.many .tile{--tw:clamp(20px,6cqmin,32px)}
  .trick-by,.trick-label{font-size:11px;padding:2px 9px}
  .dock{right:1%;bottom:2%;width:auto;max-width:44%;grid-template-columns:auto auto;padding:5px 6px 5px 10px;gap:2px 8px;border-radius:13px}
  .dock .caption{display:none}
  .dock .phase-label{font-size:12.5px}
  .action{min-height:36px;font-size:14px;padding:0 12px;border-radius:11px}
  .hint{font-size:11px}
  .rack{padding-top:10px;height:calc(var(--rack-tile) * 1.36 * .76 + 10px)}
  .rack{--rack-tile:min(clamp(36px,16cqh,60px),calc((100cqw - 28px) / var(--n,10) / .76))}
}

/* Welcome */
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 22px 32px;gap:4px}
.welcome-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.24em;color:var(--gold)}
.welcome-goblin{width:96px;height:96px;margin:12px 0 2px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--gold),0 0 0 6px #0b1611,0 0 0 7px rgba(214,188,123,.4),0 0 40px rgba(214,188,123,.35)}
.welcome-goblin img{width:100%;height:100%;object-fit:cover}
.welcome-wordmark{font-family:var(--serif);font-weight:900;font-size:clamp(42px,12cqw,68px);letter-spacing:.2em;padding-left:.2em;color:var(--gold);margin:6px 0 14px;text-shadow:0 0 30px rgba(214,188,123,.35)}
.welcome-art{display:flex;gap:12px;margin-bottom:20px}
.welcome-art .tile{--tw:54px}
.welcome-art .tile:nth-child(1){transform:rotate(-8deg) translateY(6px)}
.welcome-art .tile:nth-child(3){transform:rotate(8deg) translateY(6px)}
.welcome h1{margin:0;font-family:var(--serif);font-weight:900;font-size:27px;color:var(--cream)}
.welcome-description,.welcome p{margin:6px 0 0;color:var(--cream-2);font-size:14.5px}
.home-options{width:100%;max-width:400px;display:grid;gap:12px;margin-top:24px}
.mode-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:15px 16px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);color:var(--cream);text-align:left;box-shadow:0 10px 24px rgba(0,0,0,.35);transition:transform .1s}
.mode-card:active{transform:translateY(2px)}
.mode-card strong{display:block;font-family:var(--serif);font-weight:900;font-size:18px}
.mode-card small{display:block;font-size:12.5px;color:var(--cream-2)}
.mode-card.featured{background:linear-gradient(var(--gold-hi),var(--gold) 60%,#c7a862);border-color:var(--gold-hi);color:var(--on-gold);box-shadow:0 4px 0 var(--gold-deep),0 12px 26px rgba(0,0,0,.35)}
.mode-card.featured small{color:rgba(42,33,16,.75)}
.mode-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(239,236,225,.08);border:1px solid var(--glass-line);font-family:var(--serif);font-weight:900;font-size:19px;color:var(--gold)}
.featured .mode-icon{background:var(--on-gold);color:var(--gold-hi);border-color:transparent}
.mode-arrow{font-size:19px;color:var(--gold)}
.featured .mode-arrow{color:var(--on-gold)}
.welcome-foot{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:12.5px;color:var(--cream-2)}
.welcome-foot i{font-style:normal;color:var(--gold)}
.connecting h1{font-size:23px}

/* Lobby */
.lobby{display:flex;flex-direction:column;gap:14px;width:100%;max-width:560px;margin:0 auto;padding:6px 16px 20px}
.lobby-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.lobby .panel-label{color:var(--gold)}
.lobby h1{margin:2px 0;font-family:var(--serif);font-weight:900;font-size:26px}
.lobby-heading p{margin:0;color:var(--cream-2);font-size:13.5px}
.lobby-count{font-size:14px;color:var(--cream-2);white-space:nowrap}
.lobby-count b{font-family:var(--serif);font-weight:900;font-size:30px;color:var(--gold)}
.invite-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 12px 26px rgba(0,0,0,.4)}
.invite-strip span{display:block;font-size:12px;font-weight:800;color:var(--muted)}
.invite-strip strong{font-family:var(--serif);font-weight:900;font-size:32px;letter-spacing:.14em}
.invite-actions{display:flex;gap:8px}
.invite-actions .action{min-height:40px;font-size:14px;padding:0 14px}
.lobby-seats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lobby-seat{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);min-width:0}
.lobby-seat.empty{background:transparent;border-style:dashed;color:var(--cream-2)}
.avatar{position:relative;flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:24%;overflow:visible;background:#0d1a14;box-shadow:0 0 0 1.5px var(--gold);font-weight:800;color:var(--gold)}
.avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.avatar-ai{position:absolute;right:-5px;bottom:-5px;padding:0 4px;border-radius:5px;background:var(--glass);border:1px solid var(--glass-line);color:var(--gold);font-size:9px;font-weight:900;font-style:normal}
.avatar.empty-avatar{background:transparent;box-shadow:none;border:1.5px dashed var(--glass-line)}
.member-info{min-width:0}
.lobby-seat b{display:block;font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobby-seat small{display:block;font-size:12px;color:var(--cream-2)}
.self-label{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:999px;background:var(--gold);color:var(--on-gold);vertical-align:2px}
.remove-member{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:8px;color:var(--cream-2);font-size:17px}
.lobby-bottom{display:flex;flex-direction:column;gap:10px}
.lobby-meta{display:flex;gap:14px;font-size:12.5px;color:var(--cream-2)}
.lobby .money{color:var(--gold)}
.lobby-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lobby-buttons .action.main{grid-column:1/-1;min-height:54px;font-family:var(--serif);font-weight:900;font-size:19px}
.lobby-note,.waiting-note{margin:6px 0 0;line-height:1.6;font-size:12.5px;color:var(--cream-2);text-align:center}
.panel .waiting-note{margin:14px 0 0;color:var(--muted);font-size:12.5px;text-align:center}
.manual-copy{flex-basis:100%}
.manual-copy input{width:100%;height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:#fff}

/* Dialogs: warm paper, like a score sheet. */
.veil{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(4,10,7,.62);backdrop-filter:blur(3px)}
.panel{width:100%;max-width:440px;max-height:calc(100cqh - 32px);overflow:auto;padding:22px 20px 20px;border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 26px 60px rgba(0,0,0,.55);animation:panelIn .25s cubic-bezier(.2,.9,.3,1.2) both}
.panel h1{margin:4px 0 6px;font-family:var(--serif);font-weight:900;font-size:25px}
.panel h2{margin:4px 0 8px;font-family:var(--serif);font-weight:900;font-size:21px}
.panel p{margin:0 0 12px;color:var(--ink-2);font-size:14px}
.panel-label{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--gold-deep)}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.close{width:36px;height:36px;border-radius:10px;font-size:22px;color:var(--muted)}
.close:hover{background:var(--paper-2)}
.field{display:grid;gap:6px;margin:12px 0 0;font-size:13px;font-weight:800;color:var(--ink-2)}
.field input,.field select{width:100%;min-width:0;height:50px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fffdf7;font-size:16px;font-weight:700;color:var(--ink)}
.field input:focus{border-color:var(--gold-deep);outline:none;box-shadow:0 0 0 3px rgba(214,188,123,.35)}
.field input.code-input{font-family:var(--serif);font-weight:900;font-size:24px;letter-spacing:.2em;text-transform:uppercase}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:12px;background:var(--paper-2)}
.segmented button{height:42px;border-radius:9px;font-weight:800;color:var(--ink-2)}
.segmented button[aria-pressed=true]{background:var(--ink);color:var(--gold-hi)}
.setup-money{display:flex;align-items:center;height:50px;padding:0 14px;border-radius:12px;background:var(--paper-2);font-weight:800}
.setup-rules{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--paper-2);font-size:13px;line-height:1.7;color:var(--ink-2)}
.setup-rules span{display:inline-block;min-width:46px;font-weight:900;color:var(--ink)}
.wide-action{width:100%;min-height:54px;margin-top:16px;border-radius:14px;font-family:var(--serif);font-weight:900;font-size:18px;background:linear-gradient(#24443a,#14302a);color:var(--gold-hi);box-shadow:0 4px 0 #07110c,0 8px 16px rgba(0,0,0,.2)}
.wide-action:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #07110c}
.wide-action:disabled{opacity:.5}
.panel .text-button{display:block;margin:14px auto 0;color:var(--muted)}
.setup-note,.panel .setup-note{margin:20px 0 0;line-height:1.65;font-size:12px;color:var(--muted);text-align:center}
.dialog-error{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#f8e0dc;color:var(--mine-deep);font-size:13px;font-weight:800}
.rules ul{margin:10px 0 12px;padding-left:18px;color:var(--ink-2);font-size:13.5px}
.rules li{margin:6px 0}
.rules small{font-size:12px;color:var(--muted);line-height:1.6}
.money{display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
.coin{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff4c4,var(--gold) 55%,var(--gold-deep));box-shadow:0 1px 0 rgba(0,0,0,.3)}

/* ESC / ☰ menu */
.menu-panel{max-width:400px}
.menu-panel h2{margin-top:6px}
.menu-resume{margin-top:4px}
.menu-group{margin-top:14px;border-radius:14px;background:var(--paper-2);overflow:hidden}
.menu-title{padding:10px 14px 2px;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--gold-deep)}
.menu-row{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 14px;text-align:left;font-size:14.5px;font-weight:700;color:var(--ink);border-top:1px solid var(--line)}
.menu-title+.menu-row,.menu-group>.menu-row:first-child{border-top:0}
button.menu-row:hover{background:rgba(0,0,0,.035)}
.menu-icon{width:22px;text-align:center;font-size:16px}
.menu-label{flex:1}
.menu-value{flex:none;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--line);color:var(--ink-2)}
.menu-value[data-on=true]{background:var(--ink);color:var(--gold-hi)}
.menu-arrow{color:var(--muted);font-size:20px;line-height:1}
.menu-seconds{display:flex;gap:4px}
.menu-seconds button{min-width:46px;height:34px;border-radius:9px;font-weight:800;font-size:13px;color:var(--ink-2);background:#fffdf7;border:1px solid var(--line)}
.menu-seconds button[aria-pressed=true]{background:var(--ink);color:var(--gold-hi);border-color:var(--ink)}
.menu-group.exit .menu-row{color:var(--mine-deep)}
.panel .menu-hint{margin:18px 0 0;font-size:11.5px;color:var(--muted);text-align:center}

/* Result */
.result-kicker{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;font-weight:800;color:var(--muted)}
.result-emblem{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--gold-hi)}
.result-emblem svg{width:18px;height:21px}
.result-panel h1{margin-top:6px;font-size:30px}
.result-banner{display:inline-block;margin:0 0 12px;padding:6px 12px;border-radius:10px;background:var(--paper-2);font-size:13px;font-weight:800;color:var(--ink-2)}
.settlement{width:100%;border-collapse:collapse;margin:4px 0 12px;font-size:14px}
.settlement th{font-size:11.5px;font-weight:800;color:var(--muted);text-align:left;padding:6px 4px;border-bottom:1.5px solid var(--line)}
.settlement td{padding:9px 4px;border-bottom:1px solid var(--line);font-weight:700}
.settlement th:nth-child(n+2),.settlement td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.settlement td:last-child{font-family:var(--serif);font-weight:900;font-size:16px}
.gain{color:var(--gain)}
.loss{color:var(--loss)}
.muted{color:var(--muted)}
.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.result-actions>.action:only-child{grid-column:1/-1}
.panel .action{min-height:52px}
.panel .action:not(.main){background:linear-gradient(#24443a,#14302a);color:var(--cream)}
.hand-details{margin:8px 0 0;padding:10px 12px;border-radius:12px;background:var(--paper-2);font-size:13px;color:var(--ink-2)}
.hand-details>div+div{margin-top:3px}
.transfer{display:flex;align-items:center;gap:9px;padding:3px 0}
.transfer-faces{display:flex;align-items:center;gap:3px;flex:none}
.transfer-face{display:block;width:26px;height:26px;border-radius:7px;overflow:hidden;background:#0d1a14;box-shadow:0 0 0 1px var(--gold)}
.transfer-face img{width:100%;height:100%;object-fit:cover}
.transfer-arrow{font-size:11px;color:var(--muted)}
.banker{display:flex;align-items:center;gap:10px;padding-bottom:9px;margin-bottom:6px;border-bottom:1px dashed var(--line);font-size:12.5px}
.banker .transfer-face{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2px var(--gold),0 0 12px rgba(214,188,123,.5)}
.banker b{font-family:var(--serif);font-weight:900;margin-right:4px;color:var(--ink)}
.hand-details summary{cursor:pointer;font-weight:800;color:var(--ink)}
.mini-line{margin-top:8px;font-size:12.5px;line-height:1.6}
.mini-line b{color:var(--ink)}
.lobby-return{margin-top:14px}
.panel .result-lobby-note{text-align:center;font-size:12px;line-height:1.6;color:var(--muted);margin:8px 0 0}

@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--seat-color) 8%,transparent)}}
@keyframes turnGlow{50%{box-shadow:0 0 0 3px var(--gold-hi),0 0 0 5px #0b1611,0 0 0 7px var(--gold),0 0 46px 16px rgba(214,188,123,.8)}}
@keyframes bob{50%{transform:translateY(-5px)}}
@keyframes bubble{from{transform:scale(.4);opacity:0}}
@keyframes ready{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 var(--gold-deep),0 0 24px 6px rgba(214,188,123,.7)}}
@keyframes alarm{50%{box-shadow:0 0 0 2px var(--mine),0 0 48px 14px rgba(212,72,62,.7),0 14px 30px rgba(0,0,0,.45)}}
@keyframes lift{to{transform:translateY(-4px)}}
@keyframes panelIn{from{transform:translateY(16px) scale(.97);opacity:0}}
@keyframes blink{50%{opacity:.35}}
@keyframes slam{
  0%{transform:translate(calc((var(--sx) - 50) * .9cqw),calc((var(--sy) - 50) * .6cqh)) scale(.55) rotate(-14deg);opacity:0}
  55%{opacity:1}
  80%{transform:translate(0,0) scale(1.08) rotate(0)}
  100%{transform:none}
}
@keyframes pop{0%{transform:scale(.3);opacity:0}16%{transform:scale(1.15);opacity:1}28%{transform:scale(1)}78%{transform:scale(1);opacity:1}100%{transform:scale(1.05) translateY(-14px);opacity:0}}
@keyframes rise{0%{transform:translateY(16px) scale(.7);opacity:0}18%{transform:none;opacity:1}75%{opacity:1}100%{transform:translateY(-18px);opacity:0}}
@keyframes shake{10%,50%,90%{transform:translate(-6px,2px)}30%,70%{transform:translate(6px,-2px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

/* Quick reactions: a speech bubble beside the goblin who sent it. */
.emote-bubble{position:absolute;z-index:7;bottom:calc(100% - var(--av) * .1);left:calc(50% + var(--av) * .3);padding:6px 11px 7px;border-radius:14px 14px 14px 3px;background:#fffdf7;color:var(--ink);font-family:var(--serif);font-weight:900;font-size:15px;line-height:1.1;white-space:nowrap;box-shadow:0 0 0 2px var(--gold),0 8px 18px rgba(0,0,0,.5);pointer-events:none;transform-origin:0 100%;
  animation:emoteIn .35s cubic-bezier(.2,.9,.3,1.4) var(--emote-age,0ms) both,emoteOut .4s ease-in calc(2800ms + var(--emote-age,0ms)) forwards}
.seat[data-lside=right] .emote-bubble{left:auto;right:calc(50% + var(--av) * .3);border-radius:14px 14px 3px 14px;transform-origin:100% 100%}
.seat.own .emote-bubble{left:calc(var(--av) * .95);right:auto;bottom:calc(100% + 2px);border-radius:14px 14px 14px 3px;transform-origin:0 100%}
/* Top-row goblins speak to their left, clear of the status bar and their pass tag. */
.seat[data-ltop=true] .emote-bubble{bottom:auto;top:calc(var(--av) * .06);left:auto;right:calc(50% + var(--av) * .62);border-radius:14px 3px 14px 14px;transform-origin:100% 0}
.emote-chip[aria-expanded=true]{background:var(--gold);color:var(--on-gold)}
.emote-tray{position:absolute;top:4px;right:10px;z-index:26;display:grid;grid-template-columns:repeat(4,auto);gap:6px;padding:8px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 14px 30px rgba(0,0,0,.5);animation:panelIn .2s ease-out both}
.emote-option{min-width:58px;height:42px;padding:0 10px;border-radius:12px;background:rgba(239,236,225,.08);border:1px solid rgba(214,188,123,.22);color:var(--cream);font-weight:800;font-size:14px;white-space:nowrap}
.emote-option:hover{border-color:var(--gold)}
.emote-option:active{transform:scale(.95);background:var(--gold);color:var(--on-gold)}

/* Opened inside a chat app: the way out to Chrome/Safari. */
.in-app-note{display:grid;gap:8px;width:100%;max-width:460px;margin:0 auto 12px;padding:12px 14px;border-radius:14px;background:var(--paper);color:var(--ink);text-align:left;font-size:13px;line-height:1.5;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.in-app-note b{font-weight:900}
.in-app-note small{color:var(--muted);font-size:12px}
.in-app-note .action{min-height:44px;font-size:15px}
.panel .in-app-note{margin:8px 0 6px;background:var(--paper-2);box-shadow:none}

/* Lobby: the host's clocks and tonight's standings. */
.invite-actions{flex-wrap:wrap}
.lobby-extras{display:grid;gap:10px}
.lobby-settings{display:grid;gap:8px;padding:12px 14px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line)}
.lobby-setting{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:800;color:var(--cream-2)}
.lobby-setting b{color:var(--gold-hi);font-size:14px}
.segmented.mini{background:rgba(239,236,225,.07);padding:3px;border-radius:10px;gap:3px}
.segmented.mini button{height:32px;min-width:44px;padding:0 8px;border-radius:8px;font-size:13px;color:var(--cream-2)}
.segmented.mini button[aria-pressed=true]{background:var(--gold);color:var(--on-gold)}
.tonight{padding:12px 14px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);color:var(--cream)}
.tonight-title{font-family:var(--serif);font-weight:900;font-size:15px;color:var(--gold)}
.tonight-title small{margin-left:4px;font-family:var(--font);font-size:11.5px;font-weight:700;color:var(--cream-2)}
.tonight ol{list-style:none;margin:6px 0 0;padding:0}
.tonight li{display:grid;grid-template-columns:26px minmax(0,1fr) auto 44px;align-items:center;gap:8px;padding:5px 0;font-size:13.5px;border-top:1px solid rgba(214,188,123,.15)}
.tonight li:first-child{border-top:0}
.tonight-rank{text-align:center;font-weight:900;font-size:14px}
.tonight-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tonight li.me .tonight-name{color:var(--gold-hi)}
.tonight li.me .tonight-name:after{content:" · 나";font-size:11px;color:var(--cream-2)}
.tonight-meta{font-size:12px;color:var(--cream-2);white-space:nowrap}
.tonight-money{text-align:right;font-family:var(--serif);font-weight:900;font-variant-numeric:tabular-nums}
.tonight .gain{color:#7fd6a8}
.tonight .loss{color:#ff9a90}
.panel .tonight{margin:8px 0 10px;background:var(--paper-2);border:0;color:var(--ink)}
.panel .tonight-title{color:var(--gold-deep)}
.panel .tonight-title small,.panel .tonight-meta,.panel .tonight li.me .tonight-name:after{color:var(--muted)}
.panel .tonight li{border-top-color:var(--line)}
.panel .tonight li.me .tonight-name{color:var(--ink)}
.panel .tonight .gain{color:var(--gain)}
.panel .tonight .loss{color:var(--loss)}
.menu-panel .tonight{margin-top:14px}

/* Invite QR: big enough to scan across the table. */
.qr-panel{max-width:360px;text-align:center}
.qr-box{display:grid;place-items:center;width:min(240px,62cqmin);aspect-ratio:1;margin:10px auto 8px;padding:8px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.qr-box svg{display:block;width:100%;height:100%}
.qr-loading{font-size:13px;color:var(--muted)}
.qr-code{margin:2px 0 4px;font-family:var(--serif);font-weight:900;font-size:28px;letter-spacing:.18em;padding-left:.18em;color:var(--ink)}
.qr-panel .result-actions{margin-bottom:2px}

@container app (min-width:720px){
  .game .lobby-extras:has(.tonight){grid-template-columns:1fr 1fr;align-items:start}
}
@container app (orientation:portrait){
  .seat[data-lside=right]:not(.own) .emote-bubble{left:calc(50% + var(--av) * .3);right:auto;border-radius:14px 14px 14px 3px;transform-origin:0 100%}
  .seat[data-pside=right]:not(.own) .emote-bubble{left:auto;right:calc(50% + var(--av) * .3);border-radius:14px 14px 3px 14px;transform-origin:100% 100%}
  .seat[data-ltop=true]:not(.own) .emote-bubble{top:auto;bottom:calc(100% - var(--av) * .1)}
  .seat[data-ptop=true]:not(.own) .emote-bubble{bottom:auto;top:calc(var(--av) * .06);left:auto;right:calc(50% + var(--av) * .62);border-radius:14px 3px 14px 14px;transform-origin:100% 0}
}
@container app (orientation:landscape) and (max-height:500px){
  .game .lobby-extras{grid-template-columns:1fr 1fr;align-items:start}
  .game .lobby-extras:not(:has(.tonight)){grid-template-columns:1fr}
  .veil .qr-panel{max-width:560px;display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center;text-align:left;padding-bottom:14px}
  .veil .qr-panel>.panel-top{grid-column:1 / -1}
  .veil .qr-panel .qr-box{grid-row:2 / span 4;width:min(220px,64cqh);margin:4px 0}
  .veil .qr-panel .result-actions{position:static;margin:6px 0 0;padding:0;background:none}
  .emote-tray{top:2px;padding:6px;gap:5px}
  .emote-option{min-width:50px;height:36px;font-size:13px}
  .emote-bubble{font-size:13px;padding:5px 9px 6px}
}
@keyframes emoteIn{0%{transform:scale(.3) translateY(6px);opacity:0}70%{transform:scale(1.1);opacity:1}100%{transform:none;opacity:1}}
@keyframes emoteOut{to{transform:translateY(-8px);opacity:0}}

/* Goblin picker: twelve faces, mine ringed in gold. */
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:2px}
.avatar-choice{position:relative;aspect-ratio:1;border-radius:24%;overflow:hidden;background:#0d1a14;box-shadow:0 0 0 1.5px var(--line);transition:transform .12s}
.avatar-choice img{width:100%;height:100%;object-fit:cover}
.avatar-choice:not(:disabled):hover{transform:translateY(-2px)}
.avatar-choice[aria-checked=true]{box-shadow:0 0 0 2.5px var(--paper),0 0 0 5px var(--gold-deep),0 6px 14px rgba(0,0,0,.25);transform:scale(1.06)}
.avatar-choice:disabled{opacity:.42;cursor:default}
.avatar-choice i{position:absolute;left:0;right:0;bottom:0;padding:1px 2px;font-size:9.5px;font-style:normal;font-weight:800;color:#fff;background:rgba(0,0,0,.62);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar-panel{max-width:460px}
.avatar-button{cursor:pointer;padding:0}
.avatar-button:not(:disabled):active{transform:scale(.96)}
.avatar-edit{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);padding:0 5px;border-radius:5px;background:var(--gold);color:var(--on-gold);font-size:9px;font-weight:900;font-style:normal;line-height:15px;white-space:nowrap}
@container app (max-width:380px){.avatar-grid{gap:6px}}

/* Who is here: a dropped phone greys its goblin; the menu lists everyone with switches. */
.seat[data-away=true] .seat-frame{filter:grayscale(.85) brightness(.7)}
.seat-away{position:absolute;left:50%;bottom:calc(var(--av) * -.1);transform:translateX(-50%);z-index:3;padding:0 6px;border-radius:999px;background:#5d5d5d;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:10px;font-weight:900;line-height:16px;white-space:nowrap}
.menu-group.people{padding-bottom:4px}
.person-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px;border-top:1px solid var(--line)}
.menu-title+.person-row{border-top:0}
.person-face{flex:none;width:34px;height:34px;border-radius:24%;overflow:hidden;background:#0d1a14;box-shadow:0 0 0 1.5px var(--gold)}
.person-face img{width:100%;height:100%;object-fit:cover}
.person-info{flex:1 1 110px;min-width:110px}
.person-info b{display:block;font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-info b i{font-style:normal;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:999px;background:var(--ink);color:var(--gold-hi);vertical-align:1px}
.person-info small{display:block;font-size:11.5px;font-weight:700;color:var(--gain);white-space:nowrap}
.person-info small[data-state=away]{color:var(--loss)}
.person-info small[data-state=pilot]{color:var(--gold-deep)}
.person-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-left:auto}
.mini-action{min-height:32px;padding:0 10px;border-radius:9px;font-size:12px;font-weight:800;color:var(--ink);background:#fffdf7;border:1px solid var(--line);white-space:nowrap}
.mini-action:hover:not(:disabled){border-color:var(--gold-deep)}
.mini-action:disabled{opacity:.5}
.mini-link{padding:0;font-size:11.5px;font-weight:800;color:var(--gold);text-decoration:underline;text-underline-offset:2px}