@charset "UTF-8";
@font-face { font-family:"Cafe WenKai"; src:url('assets/fonts/cafe-wenkai.woff2?v=6') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Cafe WenKai Tile"; src:url('assets/fonts/cafe-wenkai-tile.woff2?v=1') format('woff2'); font-weight:400 700; font-style:normal; font-display:block; }
:root {
  /* Defaults are autumn; main.ts applies the current theme's palette (cat-blocks content/themes.ts). */
  --bg:#1d2f27; --text:#f6f1e0; --muted:#c9d3b6; --line:#4f6646; --topbar:#192b26ee; --panel:#1f3a2ef0; --scrim:#13231cb3;
  --choice:#22402f; --choice-line:#7f9a5c; --select:#d4e595; --select-ink:#2f3a12;
  --accent:#d4e595; --accent-ink:#2f3a12; --highlight:#f0b267; --link:#d4e595;
  --button:#34503a; --button-ink:#f6f1e0; --button-line:#7f9a5c; --strong:#d4e595; --strong-ink:#2f3a12;
  --board:#2c3a2a; --grid:#3c4b39; --frame:#a8743f; --frame-outer:#6b4a26; --scene-bg:#1d2f27;
  --scene-image:none; --scene-fallback:linear-gradient(180deg,#22343a,#5a3d22);
  --p1:#e9a25a; --p2:#d4793f; --p3:#e8c46a;
  /* Dialogs, bubbles and stamps stay on paper in every theme; the felt is always dark. */
  --paper:#faf1de; --ink:#253c31;
  --felt-ink:#f6f1e0; --felt-muted:#c9d3b6; --felt-panel:#14231cd9;
  --tile-face:#fffbf0; --tile-face-low:#f1e7cf; --tile-back:#7f9a2a; --tile-back-low:#5f7a18;
  --avatar-bg:#5c7412;
  color-scheme:dark; color:var(--text); background:var(--bg);
  font-family:"PingFang TC","Microsoft JhengHei",sans-serif; font-synthesis:none;
}
* { box-sizing:border-box; scrollbar-color:#a1af8b var(--bg); }
body { margin:0; min-width:320px; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { font:inherit; cursor:pointer; color:inherit; border:0; background:none; padding:0; }
button:disabled { cursor:default; opacity:.55; }
a { color:inherit; text-underline-offset:5px; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--highlight); outline-offset:4px; }
::selection { color:var(--accent-ink); background:var(--accent); }
[hidden] { display:none!important; }
.symbols,.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
h1,h2,p { margin:0; }
h1,h2 { font-family:"Cafe WenKai",serif; text-wrap:balance; font-weight:500; }
button:hover:not(:disabled) { filter:brightness(1.06); }

/* ---------- top bar (same as the block game) ---------- */
.topbar { max-width:1280px; margin:auto; padding:14px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); min-height:72px; background:var(--topbar); }
.shop-link { display:flex; gap:8px; align-items:center; font-size:14px; text-decoration:none; min-height:44px; }
.shop-link svg { width:19px; }
.wordmark { font-family:"Cafe WenKai",serif; font-size:21px; }
.wordmark span { font-size:15px; color:var(--muted); }
.top-actions { display:flex; align-items:center; gap:4px; }
.quiet { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px; border-radius:8px; font-size:14px; text-decoration:none; }
.quiet svg { width:20px; height:20px; }
.primary,.outline { border-radius:12px; min-height:52px; padding:12px 22px; font-size:18px; font-weight:600; display:inline-flex; justify-content:center; align-items:center; gap:14px; }
.primary { background:var(--accent); color:var(--accent-ink); box-shadow:0 6px 16px #091c1726; }
.outline { border:1px solid var(--line); font-size:16px; }

/* ---------- lobby ---------- */
.lobby { max-width:1180px; margin:auto; padding:36px 30px 28px; }
.welcome { display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; }
.welcome h1 { font-size:clamp(38px,4.8vw,58px); line-height:1.2; letter-spacing:.015em; }
.subtitle { margin-top:14px; font-size:18px; color:var(--highlight); }
.invitation { white-space:pre-line; margin-top:14px; font-size:15px; line-height:1.8; color:var(--muted); }
.welcome-actions { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.record { margin-top:14px; font-size:13px; color:var(--muted); min-height:1em; }
.table-scene { min-height:440px; position:relative; isolation:isolate; overflow:hidden; border-radius:180px 180px 18px 18px; background:var(--scene-image) center/cover no-repeat,var(--scene-fallback) var(--scene-bg); box-shadow:0 18px 38px #0a201744; border:2px solid var(--frame); }
.table-scene::after { content:''; position:absolute; left:6%; right:6%; bottom:-30px; height:120px; border-radius:50%; background:radial-gradient(ellipse,#3b5a3c 0,#2c3a2a 60%,#0000 72%); z-index:0; }
.scene-cats { position:absolute; inset:0; z-index:1; }
.scene-cats img { position:absolute; width:44%; height:auto; bottom:4%; filter:drop-shadow(0 10px 14px #0006); transition:transform .4s; }
.scene-cats img[data-seat="0"] { left:-2%; }
.scene-cats img[data-seat="1"] { left:28%; width:40%; bottom:14%; z-index:-1; }
.scene-cats img[data-seat="2"] { right:-2%; }
.speech { position:absolute; left:22px; top:96px; padding:12px 16px; border-radius:16px 16px 16px 3px; background:var(--paper); color:var(--ink); font-family:"Kaiti TC","STKaiti",serif; font-size:17px; z-index:3; box-shadow:0 8px 22px #10271e40; max-width:260px; }
.scene-caption { position:absolute; right:18px; bottom:16px; z-index:3; font-size:13px; padding:6px 12px; border-radius:999px; background:#0d1f19a6; color:#f6f1e0; }
.ambient { position:absolute; inset:0; z-index:2; pointer-events:none; }
.ambient i { position:absolute; top:-20px; width:10px; height:14px; border-radius:60% 0; background:var(--p1); opacity:.8; animation:drift 9s linear infinite; }
.ambient i:nth-child(2) { left:18%; animation-delay:-2s; background:var(--p2); }
.ambient i:nth-child(3) { left:36%; animation-delay:-5s; }
.ambient i:nth-child(4) { left:57%; animation-delay:-1s; background:var(--p3); }
.ambient i:nth-child(5) { left:74%; animation-delay:-6.5s; background:var(--p2); }
.ambient i:nth-child(6) { left:90%; animation-delay:-3.5s; }
[data-particle="snow"] .ambient i { border-radius:50%; width:8px; height:8px; }
[data-particle="glow"] .ambient i { border-radius:50%; width:7px; height:7px; box-shadow:0 0 10px var(--p1); }
[data-particle="petal"] .ambient i { border-radius:60% 0 60% 0; }
@keyframes drift { to { transform:translate(-40px,480px) rotate(320deg); } }
[data-motion="off"] .ambient { display:none; }

.section-heading { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin:44px 0 16px; }
.section-heading h2 { font-size:25px; }
.section-heading span { font-size:14px; color:var(--muted); line-height:1.6; }
.you-card { display:flex; gap:20px; align-items:flex-start; padding:20px; border-radius:18px; background:var(--choice); border:1px solid var(--choice-line); }
.you-fields { flex:1; display:grid; gap:12px; }
.name-field { display:grid; gap:8px; font-size:14px; color:var(--muted); max-width:340px; }
.name-field input { font:inherit; font-size:18px; color:var(--text); background:transparent; border:1px solid var(--choice-line); border-radius:10px; padding:10px 14px; min-height:48px; }
.icon-choice { display:flex; gap:10px; flex-wrap:wrap; }
.icon-option { border-radius:50%; padding:3px; border:2px solid transparent; }
.icon-option[aria-checked="true"] { border-color:var(--highlight); }
.login-note { font-size:14px; line-height:1.7; color:var(--muted); }
.login-note a { color:var(--link); }
.member-name { display:flex; align-items:baseline; gap:10px; }
.member-name strong { font-size:22px; font-weight:600; }
.member-name span { font-size:12px; padding:2px 8px; border-radius:999px; background:var(--select); color:var(--select-ink); }

.cat-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cat-choice { position:relative; text-align:left; display:grid; grid-template-rows:auto 1fr; border-radius:18px; background:var(--choice); border:1px solid var(--choice-line); overflow:hidden; transition:transform .2s, background .2s; }
.cat-choice .portrait-frame { display:block; aspect-ratio:1.15; overflow:hidden; background:radial-gradient(circle at 50% 70%,#ffffff1a,#0000 70%); }
.cat-choice img { width:100%; height:118%; object-fit:cover; object-position:50% 6%; display:block; }
.cat-text { padding:12px 14px 16px; display:grid; gap:6px; align-content:start; }
.cat-text strong { font-size:21px; font-weight:600; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.cat-text strong small { font-size:12px; font-weight:400; color:var(--muted); }
.manner { font-size:14px; line-height:1.65; color:var(--muted); }
.skill { font-size:12px; color:var(--muted); }
.skill b { color:var(--highlight); letter-spacing:.12em; font-weight:400; }
.seat-tag { position:absolute; top:10px; left:10px; font-size:13px; padding:4px 10px; border-radius:999px; background:#0d1f19b3; color:#f6f1e0; }
.cat-choice[aria-pressed="true"] { background:var(--select); color:var(--select-ink); border-color:var(--select); }
.cat-choice[aria-pressed="true"] .manner,.cat-choice[aria-pressed="true"] .skill,.cat-choice[aria-pressed="true"] strong small { color:#3e4a25; }
.cat-choice[aria-pressed="true"] .skill b { color:#8a4a1c; }
.cat-choice[aria-pressed="true"] .seat-tag { background:var(--accent-ink); color:var(--select); font-weight:600; }
.cat-choice[aria-pressed="false"] img { filter:saturate(.7) brightness(.85); }
.seat-note { margin-top:14px; font-size:15px; color:var(--highlight); min-height:1.6em; }
.lobby-footnote { margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; line-height:1.9; color:var(--muted); text-align:center; }

/* ---------- avatars ---------- */
.avatar { --size:52px; width:var(--size); height:var(--size); border-radius:50%; flex:none; display:inline-grid; place-items:center; overflow:hidden; background:var(--avatar-bg); box-shadow:0 0 0 3px var(--cat,#d4e595), 0 4px 10px #0004; }
.avatar.big { --size:84px; }
.avatar.tiny { --size:28px; box-shadow:0 0 0 2px var(--cat,#d4e595); vertical-align:middle; margin-right:8px; }
.avatar.cat { background-repeat:no-repeat; background-color:#e7dfc8; }
.avatar.icon svg { width:70%; height:70%; stroke:none; }
.avatar.icon[data-icon="0"] { background:#6b4a2b; }
.avatar.icon[data-icon="1"] { background:#5c7412; }
.avatar.icon[data-icon="2"] { background:#2b6f8f; }
.avatar.icon[data-icon="3"] { background:#8e5a7a; }
.avatar.photo img { width:100%; height:100%; object-fit:cover; }

/* ---------- tiles ---------- */
.tile { --tw:32px; --th:43px; position:relative; display:inline-block; flex:none; width:var(--tw); height:var(--th); border-radius:calc(var(--tw) * .14); background:linear-gradient(170deg,var(--tile-face) 55%,var(--tile-face-low)); box-shadow:0 calc(var(--th) * .07) 0 var(--tile-back), 0 calc(var(--th) * .07 + 2px) calc(var(--th) * .1) #0006; margin-bottom:calc(var(--th) * .07); }
.tile svg { width:100%; height:100%; display:block; stroke:none; }
.tile-glyph { font-family:"Cafe WenKai Tile","Kaiti TC","STKaiti","DFKai-SB","BiauKai",serif; font-weight:500; }
.tile.back { background:linear-gradient(170deg,var(--tile-back) 40%,var(--tile-back-low)); box-shadow:0 calc(var(--th) * .07) 0 var(--tile-face-low), 0 calc(var(--th) * .07 + 2px) calc(var(--th) * .1) #0006; }
.tile.hand-face { --tw:60px; --th:80px; }
.tile.meld-tile { --tw:44px; --th:59px; }
.tile.small { --tw:30px; --th:40px; }
.tile.pond { --tw:32px; --th:43px; }
.tile.mini { --tw:22px; --th:29px; border-radius:3px; }
.tile.banner-tile { --tw:54px; --th:72px; }
.tile.taken { filter:brightness(.9) sepia(.15); }
.tile.hu { box-shadow:0 0 0 3px #f2b84b, 0 calc(var(--th) * .07) 0 var(--tile-back); }

/* ---------- the table ---------- */
body.at-table { overflow:hidden; }
body.at-table .topbar { display:none; }
.table { position:fixed; inset:0; overflow:hidden; background:var(--scene-image) center/cover no-repeat,var(--scene-fallback) var(--scene-bg); }
.table::before { content:''; position:absolute; inset:0; background:#0b1a14b3; backdrop-filter:blur(3px); }
.stage { position:absolute; left:0; top:0; height:720px; width:1280px; transform-origin:0 0; color:var(--felt-ink);
  border-radius:28px; border:10px solid var(--frame); box-shadow:inset 0 0 0 3px var(--frame-outer), 0 20px 60px #0008;
  background:radial-gradient(ellipse 70% 62% at 50% 46%, color-mix(in srgb, var(--board) 82%, #ffffff 10%), var(--board) 72%, color-mix(in srgb, var(--board) 80%, #000 20%)); }
.fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:15; }
/* The felt is dark in every season, so the table keeps one warm highlight that reads on it (6.5:1). */
.stage { --highlight:#f0b267; }

.compass { position:absolute; left:calc(var(--w) / 2 - 76px); top:240px; width:132px; height:132px; border-radius:24px; display:grid; place-content:center; text-align:center; background:#0e1c16cc; border:2px solid #ffffff1f; }
.compass-wind { font-size:13px; color:var(--felt-muted); }
.compass-left { font-size:40px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; }
.compass-label { font-size:12px; color:var(--felt-muted); }
.compass i { position:absolute; background:#ffffff1c; border-radius:3px; transition:background .2s; }
.compass i[data-seat="bottom"] { left:22px; right:22px; bottom:6px; height:6px; }
.compass i[data-seat="top"] { left:22px; right:22px; top:6px; height:6px; }
.compass i[data-seat="left"] { top:22px; bottom:22px; left:6px; width:6px; }
.compass i[data-seat="right"] { top:22px; bottom:22px; right:6px; width:6px; }
.compass i.on { background:var(--highlight); box-shadow:0 0 12px var(--highlight); }

.river { position:absolute; display:flex; flex-wrap:wrap; gap:2px; align-content:flex-start; }
/* A cross around the compass (center x = --w / 2, y = 306): top and bottom rivers are 8 tiles wide,
   the side rivers 5 columns and sit just outside them, so no two ever overlap. */
.river[data-seat="bottom"] { left:calc(var(--w) / 2 - 136px); top:380px; width:274px; }
.river[data-seat="top"] { left:calc(var(--w) / 2 - 136px); top:88px; width:274px; height:144px; flex-wrap:wrap-reverse; }
.river[data-seat="left"] { left:calc(var(--w) / 2 - 316px); top:210px; width:172px; }
.river[data-seat="right"] { left:calc(var(--w) / 2 + 144px); top:210px; width:172px; }
.river.crowded .tile { --tw:27px; --th:36px; }
.river .tile.last { box-shadow:0 0 0 2px var(--highlight), 0 calc(var(--th) * .07) 0 var(--tile-back); }
.river .tile.claimable { animation:claim 1s ease-in-out infinite; z-index:2; }
@keyframes claim { 50% { transform:translateY(-5px) scale(1.12); box-shadow:0 0 0 3px var(--highlight), 0 0 18px var(--highlight); } }

.seat { position:absolute; display:flex; gap:10px; }
.who { position:relative; display:flex; align-items:center; gap:10px; padding:6px 14px 6px 6px; border-radius:999px; background:var(--felt-panel); border:1px solid #ffffff1f; min-width:150px; transition:box-shadow .25s; }
.who-text { display:grid; gap:2px; }
.who-text strong { font-size:17px; font-weight:600; white-space:nowrap; max-width:9em; overflow:hidden; text-overflow:ellipsis; }
.who-meta { display:flex; align-items:center; gap:6px; font-size:13px; }
.wind { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#f6f1e0; color:#24433b; font-size:13px; font-weight:700; }
.dealer { padding:1px 7px; border-radius:999px; background:#c9445a; color:#fff; font-size:12px; font-weight:600; }
.dealer small { font-size:10px; margin-left:2px; }
.fish { display:inline-flex; align-items:center; gap:2px; color:var(--felt-muted); font-variant-numeric:tabular-nums; }
.fish svg { width:15px; height:15px; }
.seat.turn .who { box-shadow:0 0 0 3px var(--highlight), 0 0 22px color-mix(in srgb, var(--highlight) 60%, transparent); }
.flowers { display:flex; gap:2px; align-items:center; }
.concealed,.melds { display:flex; gap:2px; }
.melds { gap:8px; }
.meld { display:inline-flex; gap:1px; }

.seat[data-seat="top"] { top:14px; left:50%; transform:translateX(-50%); align-items:center; width:max-content; }
.seat[data-seat="top"] .concealed.revealed { flex-wrap:nowrap; }
.seat[data-seat="top"] .tile.back { --tw:26px; --th:34px; }
.seat[data-seat="top"] .tile.side-face { --tw:26px; --th:35px; }
.seat[data-seat="left"],.seat[data-seat="right"] { top:66px; bottom:196px; width:220px; display:grid; grid-template-rows:auto auto 1fr; grid-template-columns:auto 1fr; gap:10px; align-content:start; }
.seat[data-seat="left"] { left:18px; }
.seat[data-seat="right"] { right:18px; }
.seat[data-seat="left"] .who,.seat[data-seat="right"] .who { grid-column:1 / -1; }
.seat[data-seat="left"] .flowers,.seat[data-seat="right"] .flowers { grid-column:1 / -1; min-height:31px; flex-wrap:wrap; }
.seat[data-seat="left"] .concealed,.seat[data-seat="right"] .concealed { flex-direction:column; gap:0; }
.seat[data-seat="left"] .tile.back,.seat[data-seat="right"] .tile.back { --tw:36px; --th:18px; border-radius:4px; margin-bottom:2px; }
.seat[data-seat="left"] .tile.back svg,.seat[data-seat="right"] .tile.back svg { display:none; }
.concealed.revealed { flex-wrap:wrap; max-height:420px; column-gap:2px; }
.seat[data-seat="left"] .concealed.revealed,.seat[data-seat="right"] .concealed.revealed { flex-direction:column; width:56px; }
.tile.side-face { --tw:26px; --th:35px; }
.seat[data-seat="left"] .melds,.seat[data-seat="right"] .melds { flex-direction:column; gap:6px; }
.seat[data-seat="right"] { justify-items:end; }
.seat[data-seat="right"] .who { justify-self:end; }
.seat[data-seat="right"] .concealed { grid-column:2; grid-row:3; justify-self:end; }
.seat[data-seat="right"] .melds { grid-column:1; grid-row:3; align-items:flex-end; }
.seat[data-seat="right"] .flowers { justify-content:flex-end; }
.seat.mine { left:18px; bottom:118px; align-items:center; }

.bottom-row { position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; align-items:flex-end; gap:20px; }
.mine-melds { gap:10px; }
.hand { display:flex; gap:2px; align-items:flex-end; }
.hand-tile { display:block; border-radius:9px; transition:transform .14s ease-out; padding:0; }
.hand-tile.drawn { margin-left:16px; }
.hand.active .hand-tile { cursor:pointer; }
.hand.active .hand-tile:hover { transform:translateY(-6px); }
.hand-tile.selected { transform:translateY(-20px)!important; }
.hand-tile.selected .tile { box-shadow:0 0 0 3px var(--highlight), 0 calc(var(--th) * .07) 0 var(--tile-back), 0 10px 18px #0007; }
.hand:not(.active) .hand-tile { cursor:default; }
.hand-tile:focus-visible { outline:3px solid var(--highlight); outline-offset:3px; }

.actions { position:absolute; left:50%; bottom:112px; transform:translate(-50%,12px); display:flex; gap:12px; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:12; }
.actions.open { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.action { position:relative; min-width:92px; min-height:92px; padding:8px 14px; border-radius:20px; display:grid; place-items:center; gap:4px; background:var(--paper); color:var(--ink); box-shadow:0 6px 0 #0004, 0 10px 24px #0006; border:3px solid #fff8; }
.action strong { font-family:"Cafe WenKai",serif; font-size:42px; line-height:1; font-weight:700; }
.action small { font-size:13px; color:#58654f; }
.action-tiles { display:flex; gap:1px; }
.action[data-kind="hu"] { background:#f2b84b; min-width:120px; border-color:#fff3c4; }
.action[data-kind="gang"] { background:#f0b267; }
.action[data-kind="peng"] { background:#d4e595; }
.action[data-kind="chi"] { background:#bfe0d8; }
.action[data-kind="pass"] { background:#e7e2d3; min-width:80px; }
.action kbd { position:absolute; top:5px; right:7px; font-size:11px; color:#58654f; font-family:inherit; }
.actions[data-urgent="hu"] .action[data-kind="hu"] { animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { transform:scale(1.07); box-shadow:0 6px 0 #0004, 0 0 30px #f2b84b; } }
.action:active { transform:translateY(3px); }

.hint { position:absolute; right:24px; bottom:118px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:340px; font-size:14px; color:var(--felt-ink); }
.hint:empty { display:none; }
.hint>span:first-child { margin-right:2px; }
.hint .hint-plain { color:var(--felt-muted); }
.wait { display:inline-flex; flex-direction:column; align-items:center; font-size:11px; color:var(--felt-muted); }

.stamp { position:absolute; left:calc(100% + 10px); top:50%; width:104px; height:104px; margin-top:-52px; border-radius:50%; display:grid; place-items:center; pointer-events:none; z-index:20;
  font-family:"Cafe WenKai",serif; font-weight:700; font-size:50px; color:var(--cat-ink); background:var(--paper); border:5px solid var(--cat); box-shadow:0 8px 24px #0007; opacity:0; transform:scale(.4); }
.stamp[data-kind="flower"] { width:76px; height:76px; margin-top:-38px; font-size:22px; }
.stamp[data-kind="hu"] { background:#f2b84b; color:#5b2a0e; border-color:#fff3c4; font-size:44px; width:124px; height:124px; margin-top:-62px; }
.seat { --cat-ink:color-mix(in oklab, var(--cat) 55%, #1b1b1b); }
.stamp.show { animation:stamp 1.5s cubic-bezier(.2,1.4,.4,1) forwards; }
.stamp[data-kind="hu"].show { animation-duration:2.6s; }
@keyframes stamp { 0% { opacity:0; transform:scale(1.8) rotate(-18deg); } 14% { opacity:1; transform:scale(1) rotate(-8deg); } 82% { opacity:1; transform:scale(1) rotate(-8deg); } 100% { opacity:0; transform:scale(.9) rotate(-8deg); } }
.seat[data-seat="left"] .stamp,.seat[data-seat="right"] .stamp { top:20px; margin-top:0; }
.seat[data-seat="right"] .stamp { left:auto; right:calc(100% + 10px); }
.seat[data-seat="top"] .stamp { left:50%; top:calc(100% + 10px); margin:0 0 0 -52px; }
.seat[data-seat="left"] .bubble,.seat[data-seat="right"] .bubble { top:118px; }
.bubble { position:absolute; left:8px; top:calc(100% + 10px); z-index:21; max-width:240px; width:max-content; padding:10px 14px; border-radius:4px 16px 16px 16px; background:var(--paper); color:var(--ink); font-family:"Kaiti TC","STKaiti",serif; font-size:17px; line-height:1.5; box-shadow:0 8px 20px #0006; opacity:0; transform:translateY(-6px); transition:opacity .2s, transform .2s; pointer-events:none; }
.bubble.show { opacity:1; transform:none; }
.seat[data-seat="right"] .bubble { left:auto; right:8px; border-radius:16px 4px 16px 16px; }
.seat.mine .bubble { top:auto; bottom:calc(100% + 10px); border-radius:16px 16px 16px 4px; }

.banner { position:absolute; left:calc(var(--w) / 2 - 10px); top:306px; transform:translate(-50%,-50%) scale(.8); display:flex; align-items:center; gap:16px; padding:14px 30px; border-radius:22px; background:var(--paper); color:var(--ink); border:4px solid var(--cat); box-shadow:0 16px 40px #0008; z-index:25; opacity:0; pointer-events:none; transition:opacity .18s, transform .25s cubic-bezier(.2,1.4,.4,1); white-space:nowrap; }
.banner.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.banner { --cat-ink:color-mix(in oklab, var(--cat) 55%, #1b1b1b); }
.banner strong { font-family:"Cafe WenKai",serif; font-size:70px; line-height:1; font-weight:700; color:var(--cat-ink); }
.banner-name { font-size:32px; font-weight:700; }
.banner .avatar { --size:64px; }
.banner[data-kind="dealer"] .banner-name { font-size:20px; font-weight:600; }
.banner[data-kind="dealer"] strong,.banner[data-kind="drawn"] strong { font-size:40px; color:var(--ink); }
.banner[data-kind="dealer"] { flex-direction:column; gap:6px; }
.banner[data-kind="hu"] { background:#f2b84b; border-color:#fff3c4; }
.banner[data-kind="hu"] strong { font-size:96px; color:#5b2a0e; }
.banner[data-kind="review"] { background:none; border:0; box-shadow:none; top:auto; bottom:96px; transform:translate(-50%,0); pointer-events:auto; }
.banner[data-kind="review"].show { transform:translate(-50%,0); }

.table-tools { position:absolute; top:14px; left:18px; display:flex; gap:8px; z-index:14; }
.tool { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:6px 14px; border-radius:999px; background:var(--felt-panel); border:1px solid #ffffff24; color:var(--felt-ink); font-size:14px; }
.tool svg { width:18px; height:18px; }

/* Phones held sideways scale the stage to about half: grow what a thumb or eye has to hit. */
.stage.compact .tile.hand-face { --tw:68px; --th:90px; }
.stage.compact .bottom-row { bottom:12px; }
.stage.compact .actions { bottom:124px; }
.stage.compact .seat.mine,.stage.compact .hint { bottom:128px; }
.stage.compact .action { min-width:108px; min-height:108px; }
.stage.compact .action strong { font-size:50px; }
.stage.compact .avatar { --size:62px; }
.stage.compact .who-text strong { font-size:25px; }
.stage.compact .who-meta { font-size:20px; gap:8px; }
.stage.compact .wind { width:30px; height:30px; font-size:18px; }
.stage.compact .dealer { font-size:17px; }
.stage.compact .fish svg { width:22px; height:22px; }
.stage.compact .hint { font-size:22px; }
.stage.compact .bubble { font-size:24px; max-width:300px; }
.stage.compact .table-tools { top:10px; }
.stage.compact .tool { min-height:54px; padding:6px 20px; font-size:21px; }
.stage.compact .seat[data-seat="left"],.stage.compact .seat[data-seat="right"] { top:76px; }
.stage.compact .tool svg { width:26px; height:26px; }
.stage.compact .review-back { min-height:84px; font-size:26px; padding:14px 34px; }

/* ---------- landscape only ---------- */
.rotate-note { display:none; position:fixed; inset:0; z-index:50; place-content:center; justify-items:center; gap:22px; padding:30px; text-align:center; background:var(--bg); color:var(--text); }
body.rotate .rotate-note { display:grid; }
.rotate-note p { font-size:15px; line-height:1.8; color:var(--muted); max-width:320px; }
.rotate-note strong { display:block; font-family:"Cafe WenKai",serif; font-size:26px; font-weight:500; color:var(--text); margin-bottom:8px; }
.rotate-phone { width:62px; height:104px; border:4px solid var(--text); border-radius:14px; position:relative; animation:turn 2.4s ease-in-out infinite; }
.rotate-phone::after { content:''; position:absolute; left:50%; bottom:6px; width:14px; height:4px; margin-left:-7px; border-radius:2px; background:var(--text); }
@keyframes turn { 0%,25% { transform:rotate(0); } 55%,100% { transform:rotate(-90deg); } }

/* ---------- notices and dialogs ---------- */
.storage-notice { position:fixed; pointer-events:none; top:8px; left:15px; right:15px; max-width:600px; margin:auto; padding:14px 18px; border-radius:10px; background:var(--paper); color:var(--ink); font-size:14px; z-index:60; box-shadow:0 8px 24px #0003; }
dialog { color:var(--ink); background:var(--paper); width:min(560px,calc(100% - 28px)); border:0; border-radius:20px; box-shadow:0 24px 80px #0005; padding:0; max-height:88dvh; overflow-y:auto; color-scheme:light; }
dialog::backdrop { background:#0b211cc4; }
.dialog-content { padding:26px 28px; }
dialog h2 { font-size:28px; margin:0 0 16px; }
dialog h3 { font-size:17px; margin:18px 0 6px; font-weight:600; }
dialog p { line-height:1.8; font-size:16px; margin-bottom:12px; }
dialog .muted { font-size:13px; color:#58654f; }
dialog ul { padding-left:22px; line-height:1.85; margin:0 0 12px; }
.dialog-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.dialog-actions button { flex:1; white-space:nowrap; }
.dialog-actions .outline { color:var(--ink); border-color:#a7b094; }
.dialog-actions .primary { background:#536d36; color:white; font-size:16px; }
.call-list { list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
.call-list b { display:inline-grid; place-items:center; min-width:42px; margin-right:8px; padding:0 6px; border-radius:8px; background:#e6dcc1; font-family:"Cafe WenKai",serif; font-size:17px; }
.result-hand { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin:4px 0 14px; padding:12px; border-radius:12px; background:#2c3a2a; }
.tai-list { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.tai-list li { padding:4px 10px; border-radius:999px; background:#ece3cb; font-size:14px; }
.tai-list li b { margin-left:6px; color:#8a4a1c; }
.tai-list li.aside { background:none; border:1px dashed #b9ae8e; }
.tai-list li small { margin-left:6px; color:#58654f; font-size:12px; }
.tai-total { font-size:17px; }
.tai-total strong { font-size:26px; color:#8a4a1c; }
.cat-word { font-family:"Kaiti TC","STKaiti",serif; font-size:17px; padding:10px 14px; border-left:3px solid #c4672a; background:#f1e6cc; border-radius:0 12px 12px 0; }
.fish-table { width:100%; border-collapse:collapse; margin:6px 0 12px; font-variant-numeric:tabular-nums; }
.fish-table th { text-align:left; font-weight:500; padding:7px 0; }
.fish-table td { text-align:right; padding:7px 0 7px 12px; color:#58654f; }
.fish-table tr+tr { border-top:1px solid #e0d6bb; }
.fish-table thead th,.fish-table thead td { font-size:12px; color:#58654f; padding-bottom:2px; }
.fish-table tr.won th { font-weight:700; }
.fish-table td.up { color:#3f7a2a; font-weight:700; }
.fish-table td.down { color:#b8432f; }
.rank { display:inline-grid; place-items:center; width:22px; height:22px; margin-right:8px; border-radius:50%; background:#e6dcc1; font-size:12px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:64px; border-bottom:1px solid #d5d8bc; padding:10px 0; }
.setting-row span { font-size:16px; }
.setting-row small { display:block; font-size:12px; color:#58654f; margin-top:4px; line-height:1.5; }
.setting-row input { width:24px; height:24px; accent-color:#536d36; flex:none; }
.volume-setting { display:flex; justify-content:space-between; margin-top:18px; }
#setting-volume { width:100%; accent-color:#536d36; }
.call-test { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.call-test .outline { color:var(--ink); border-color:#a7b094; min-height:44px; padding:6px; font-family:"Cafe WenKai",serif; font-size:18px; }
.call-cats { display:flex; gap:14px; flex-wrap:wrap; margin:10px 0 4px; font-size:14px; }
.call-cats label { display:flex; align-items:center; gap:4px; min-height:36px; }
.call-cats input { accent-color:#536d36; }
.review-back { font-size:16px; }
.noscript { padding:40px; text-align:center; }

[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
[data-motion="off"] .stamp.show { animation:none; opacity:1; transform:rotate(-8deg); }
[data-motion="off"] .river .tile.claimable { animation:none; transform:translateY(-5px) scale(1.12); box-shadow:0 0 0 3px var(--highlight), 0 0 18px var(--highlight); }

@media (max-width:860px) {
  .welcome { grid-template-columns:1fr; gap:24px; }
  .table-scene { min-height:320px; order:-1; }
  .cat-picker { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .topbar { padding:10px 14px; min-height:60px; }
  .wordmark,.top-actions .quiet span { display:none; }
  .lobby { padding:20px 16px 24px; }
  .welcome h1 { font-size:36px; }
  .subtitle { font-size:16px; }
  .welcome-actions .primary { width:100%; }
  .you-card { flex-direction:column; align-items:center; text-align:left; }
  .you-fields { width:100%; }
  .name-field { max-width:none; }
  .cat-picker { gap:10px; }
  .cat-text { padding:10px 11px 13px; }
  .cat-text strong { font-size:18px; }
  .manner { font-size:13px; }
  .speech { font-size:15px; left:14px; top:70px; max-width:200px; }
  .call-test { grid-template-columns:repeat(4,1fr); }
}