:root {
  color-scheme: dark;
  --ink: #151819;
  --paper: #fff8e8;
  --cream: #f4e9cf;
  --yellow: #f1cf35;
  --lime: #b9dd46;
  --red: #b33a2d;
  --red-dark: #6e211c;
  --blue: #55a9ca;
  --line: rgba(255,255,255,.18);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; color: var(--paper); background: #101314; }
button, input, select { font: inherit; }
button { color: inherit; }
button:not(:disabled) { cursor: pointer; }
[hidden] { display: none !important; }
.orientation-lock { display:none; }

.app { min-height: 100vh; }
.topbar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(16,19,20,.94);
  backdrop-filter: blur(16px);
}

.wordmark { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; text-align: left; background: transparent; }
.wordmark-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--ink); background: var(--yellow); font-weight: 950; letter-spacing: -.08em; transform: rotate(-3deg); }
.wordmark strong, .wordmark small { display: block; }
.wordmark strong { font-size: .88rem; letter-spacing: -.02em; }
.wordmark small { margin-top: 3px; color: #9ea5a5; font-size: .56rem; font-weight: 800; letter-spacing: .14em; }
.room-badge { position: absolute; left: 50%; display: flex; align-items: center; gap: 9px; transform: translateX(-50%); }
.room-badge span { color: #8c9494; font-size: .58rem; font-weight: 900; letter-spacing: .14em; }
.room-badge strong { font-size: .9rem; letter-spacing: .15em; }
.room-badge i, .network-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.room-badge i.offline { background: #e26658; box-shadow: 0 0 12px #e26658; }
.top-actions { display: flex; gap: 8px; }
.top-button { padding: 8px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: #dce0df; background: rgba(255,255,255,.05); font-size: .72rem; font-weight: 800; }
.top-button:hover { background: rgba(255,255,255,.1); }

.lobby-screen {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 470px);
  align-items: center;
  gap: 7vw;
  padding: 112px max(6vw, 28px) 54px;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 50%, rgba(241,207,53,.10), transparent 28rem),
    linear-gradient(125deg, #111516 0%, #1b2020 62%, #151819 100%);
}
.lobby-screen::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.14; background-image: repeating-linear-gradient(105deg, transparent 0 18px, rgba(255,255,255,.05) 19px, transparent 20px); }
.lobby-hero, .lobby-panel { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 14px; color: var(--yellow); font-size: .66rem; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
.lobby-hero h1 { max-width: 730px; margin: 0; font-size: clamp(4.7rem, 9.2vw, 9rem); line-height: .79; letter-spacing: -.085em; text-transform: uppercase; }
.hero-copy { max-width: 590px; margin: 36px 0 0; color: #aeb4b2; font-size: 1rem; line-height: 1.65; }
.lobby-panel { padding: 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 23px; background: rgba(255,255,255,.055); box-shadow: 0 40px 100px rgba(0,0,0,.32); backdrop-filter: blur(20px); }
.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border-radius: 15px; background: rgba(0,0,0,.25); }
.mode-tab { min-height: 44px; border: 0; border-radius: 11px; color: #89908f; background: transparent; font-size: .78rem; font-weight: 900; }
.mode-tab.active { color: var(--ink); background: var(--yellow); }
.lobby-form { display: grid; grid-template-columns: 1fr 130px; gap: 13px; padding: 24px 20px 20px; }
#create-form { grid-template-columns:1fr 105px 105px; }
.lobby-form .primary-action { grid-column: 1 / -1; }
.field span { display: block; margin: 0 0 8px 2px; color: #929998; font-size: .6rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.field input, .field select { width: 100%; height: 50px; padding: 0 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; outline: none; color: var(--paper); background: rgba(10,12,12,.48); }
.field input:focus, .field select:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(241,207,53,.14); }
.primary-action { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border: 0; border-radius: 12px; color: var(--ink); background: var(--yellow); font-weight: 950; box-shadow: 0 6px 0 #947c17; }
.primary-action:hover { transform: translateY(-1px); box-shadow: 0 7px 0 #947c17; }
.primary-action:active { transform: translateY(4px); box-shadow: 0 2px 0 #947c17; }
.primary-action span { font-size: 1.2rem; }
.lobby-error { min-height: 18px; margin: 0 22px; color: #ff9385; font-size: .72rem; }
.network-status { display: flex; align-items: center; gap: 8px; padding: 12px 22px 16px; color: #8d9593; font-size: .68rem; }
.lobby-tools { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:0 8px 8px; }
.lobby-tools button { min-height:34px; border:1px solid rgba(255,255,255,.1); border-radius:9px; color:#adb3b1; background:rgba(255,255,255,.04); font-size:.6rem; font-weight:850; }
.account-dialog { width:min(520px,calc(100% - 24px)); }
.account-copy { margin:0; color:#aeb4b2; font-size:.78rem; line-height:1.55; }
.account-form { display:grid; gap:12px; padding:20px 24px 10px; }
.account-form label { display:grid; gap:6px; color:#929998; font-size:.58rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.account-form input { width:100%; height:44px; padding:0 12px; border:1px solid rgba(255,255,255,.13); border-radius:10px; outline:none; color:var(--paper); background:rgba(10,12,12,.48); }
.account-form input:focus { border-color:var(--yellow); box-shadow:0 0 0 3px rgba(241,207,53,.14); }
.account-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:4px; }
.account-actions .primary-action { min-height:44px; }
.account-secondary { min-height:42px; padding:0 14px; border:1px solid rgba(255,255,255,.16); border-radius:10px; color:#d7dfdc; background:rgba(255,255,255,.05); font-size:.7rem; font-weight:900; }
.account-secondary:hover { background:rgba(255,255,255,.1); }
.account-error { min-height:18px; margin:0 24px 14px; color:#ff9385; font-size:.7rem; }
.account-member { display:grid; gap:16px; padding:20px 24px 24px; }
.shop-dialog { width:min(680px,calc(100% - 24px)); }
.shop-dialog h2 span { display:inline-block; margin-left:8px; color:var(--yellow); font-size:.82rem; white-space:nowrap; }
.shop-status { margin:0; padding:0 24px 12px; color:#9da4a2; font-size:.72rem; }
.shop-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; max-height:min(58vh,520px); overflow:auto; padding:0 24px 24px; }
.shop-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; min-height:66px; padding:9px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.04); }
.shop-item-preview { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; color:var(--ink); background:var(--yellow); font-size:.64rem; font-weight:950; }
.shop-item-preview.dice { border:2px solid rgba(66,35,12,.35); background:#ead0a5; box-shadow:5px 5px 0 #bb8b52; }
.shop-item-copy { min-width:0; }
.shop-item-copy strong, .shop-item-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shop-item-copy strong { font-size:.72rem; }
.shop-item-copy small { margin-top:3px; color:#8f9694; font-size:.55rem; }
.shop-buy { min-height:32px; padding:0 8px; border:1px solid var(--yellow); border-radius:8px; color:var(--yellow); background:transparent; font-size:.55rem; font-weight:950; white-space:nowrap; }
.shop-buy:hover:not(:disabled) { color:var(--ink); background:var(--yellow); }
.shop-buy:disabled { border-color:rgba(255,255,255,.12); color:#737b79; opacity:.8; }
.lobby-die { position: absolute; right: -100px; bottom: -110px; width: 260px; height: 260px; transform: rotate(18deg); opacity: .15; }
.mini-face { overflow:hidden; width:100%; height:100%; border-radius:50px; }
.mini-face img { width:100%; height:100%; object-fit:cover; }

/* Lobby: the same hand-painted red table language as the live game. */
.lobby-screen { grid-template-columns:minmax(0,1fr) minmax(400px,520px); gap:clamp(34px,7vw,110px); padding:clamp(88px,10vh,122px) max(6vw,30px) 44px; background-color:#7e2822; background-image:linear-gradient(90deg,rgba(28,5,4,.7),rgba(81,20,16,.15) 52%,rgba(28,5,4,.58)),url("./assets/lobby-table-v1.png"); background-position:center; background-size:cover; }
.lobby-screen::before { opacity:.08; background-image:repeating-linear-gradient(90deg,transparent 0 76px,rgba(255,220,169,.12) 77px,transparent 79px); }
.lobby-hero { max-width:720px; padding-left:clamp(0px,2vw,32px); }
.lobby-mark { display:flex; align-items:center; gap:10px; width:max-content; margin-bottom:clamp(24px,5vh,52px); padding:7px 11px 7px 7px; border:1px solid rgba(255,246,221,.24); border-radius:14px; background:rgba(35,7,5,.42); box-shadow:0 10px 25px rgba(38,5,3,.18); }
.lobby-mark > span { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:var(--ink); background:var(--yellow); font-size:.8rem; font-weight:950; letter-spacing:-.08em; transform:rotate(-4deg); }
.lobby-mark b,.lobby-mark small { display:block; }
.lobby-mark b { font-size:.69rem; letter-spacing:.07em; }
.lobby-mark small { margin-top:3px; color:#d4b7a1; font-size:.46rem; font-weight:850; letter-spacing:.15em; }
.lobby-hero .eyebrow { color:#f4cf55; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.lobby-hero h1 { max-width:780px; color:#fff4df; font-size:clamp(4.1rem,8.8vw,8.4rem); line-height:.77; text-shadow:0 8px 0 rgba(56,12,9,.25),0 22px 48px rgba(37,6,4,.3); }
.lobby-hero h1 em { color:#f3ce3f; font-style:normal; }
.hero-copy { max-width:560px; margin:32px 0 0; color:#f0d5bd; text-shadow:0 2px 8px rgba(37,6,4,.35); }
.hero-copy strong { color:#f6d34b; }
.lobby-rules-strip { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.lobby-rules-strip > span { min-width:108px; display:grid; grid-template-columns:auto 1fr; column-gap:7px; align-items:center; padding:8px 10px; border:1px solid rgba(255,239,208,.2); border-radius:11px; background:rgba(38,8,6,.35); backdrop-filter:blur(7px); }
.lobby-rules-strip i { grid-row:span 2; width:23px; height:23px; display:grid; place-items:center; border-radius:7px; color:var(--ink); background:var(--yellow); font-size:.8rem; font-style:normal; font-weight:950; }
.lobby-rules-strip b { color:#fff1dc; font-size:.58rem; }
.lobby-rules-strip small { color:#d0aa94; font-size:.5rem; }
.lobby-panel { padding:12px; border:1px solid rgba(255,240,214,.28); border-radius:24px; background:rgba(35,7,5,.68); box-shadow:0 25px 90px rgba(28,3,2,.42),inset 0 1px rgba(255,255,255,.1); backdrop-filter:blur(18px); }
.lobby-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:13px 12px 17px; }
.lobby-panel-head .eyebrow { margin-bottom:7px; color:#e6bb42; }
.lobby-panel-head h2 { margin:0; color:#fff2dc; font-size:1.5rem; letter-spacing:-.05em; }
.lobby-stamp { display:grid; place-items:center; width:61px; height:61px; border:1px solid rgba(244,207,72,.65); border-radius:50%; color:#f1cc43; font-size:.46rem; font-weight:950; line-height:1.08; letter-spacing:.1em; text-align:center; transform:rotate(8deg); }
.mode-tabs { background:rgba(10,2,2,.32); }
.mode-tab { color:#c19b87; }
.mode-tab.active { color:var(--ink); background:#f2ce42; box-shadow:0 3px 0 #a37918; }
.field span { color:#c8a895; }
.field input,.field select { border-color:rgba(255,224,194,.2); background:rgba(16,4,4,.58); }
.network-status { color:#c4a394; }
.lobby-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:0 8px 13px; padding:10px; border-top:1px solid rgba(255,239,214,.12); border-bottom:1px solid rgba(255,239,214,.12); }
.lobby-steps span { display:grid; grid-template-columns:auto 1fr; column-gap:6px; align-items:center; }
.lobby-steps b { grid-row:span 2; color:#e9c43f; font-size:.55rem; }
.lobby-steps strong { color:#ffecd3; font-size:.58rem; }
.lobby-steps small { color:#b8907e; font-size:.46rem; }
.lobby-tools { grid-template-columns:repeat(5,1fr); padding:0 8px 5px; }
.lobby-tools button { color:#d4b3a0; border-color:rgba(255,222,194,.15); background:rgba(255,242,223,.06); }
.lobby-tools button:hover { color:#23100c; border-color:#f2ce42; background:#f2ce42; }

/* Shop item thumbnails use a generated material atlas, not placeholder letters. */
.shop-dialog { border-color:rgba(239,203,105,.3); background:#24100d; background-image:linear-gradient(rgba(31,8,5,.88),rgba(31,8,5,.94)),url("./assets/lobby-table-v1.png"); background-size:cover; }
.shop-dialog header { background:rgba(38,13,9,.84); }
.shop-status { color:#cba994; }
.shop-item { border-color:rgba(255,224,194,.15); background:rgba(255,239,214,.065); }
.shop-item:hover { border-color:rgba(241,207,53,.55); background:rgba(241,207,53,.1); transform:translateY(-1px); }
.shop-item-preview { position:relative; overflow:hidden; border:2px solid rgba(255,248,232,.48); box-shadow:4px 5px 0 rgba(20,3,2,.35); background-image:url("./assets/shop-materials-atlas-v1.png"); background-size:200% 200%; background-repeat:no-repeat; }
.shop-item-preview span { position:relative; z-index:1; display:grid; place-items:center; width:100%; height:100%; color:#fff8e8; font-size:.95rem; font-weight:950; text-shadow:0 2px 4px rgba(0,0,0,.55); }
.shop-item-preview.dice.item-wood,.shop-item-preview.avatar.item-chick,.shop-item-preview.frame.item-sunny { background-position:0 0; }
.shop-item-preview.dice.item-egg,.shop-item-preview.avatar.item-hen,.shop-item-preview.frame.item-royal { background-position:100% 0; }
.shop-item-preview.dice.item-robot,.shop-item-preview.avatar.item-ninja,.shop-item-preview.frame.item-legend { background-position:0 100%; }
.shop-item-preview.dice.item-disco,.shop-item-preview.avatar.item-alien,.shop-item-preview.title.item-trio_master { background-position:100% 100%; }
.shop-item-preview.dice.item-pirate { background-position:0 100%; filter:saturate(.82) sepia(.12); }
.shop-item-preview.avatar.item-rooster,.shop-item-preview.avatar.item-ceo,.shop-item-preview.avatar.item-cowboy,.shop-item-preview.avatar.item-zombie,.shop-item-preview.avatar.item-banana,.shop-item-preview.title { background-position:100% 0; }
.shop-item-preview.title { border-radius:50%; }
.shop-item-preview.dice,.shop-item-preview.avatar,.shop-item-preview.frame,.shop-item-preview.title { background-image:url("./assets/shop-materials-atlas-v1.png"); }
.shop-buy { border-color:#f0cd46; color:#f0cd46; }

.table-screen { height: 100vh; padding-top: 64px; background: #111; }
.game-table { position: relative; height: calc(100vh - 64px); min-height: 650px; overflow: hidden; isolation: isolate; background: #8e2d25; }
.wood-grain { position:absolute; inset:0; z-index:-3; background:
  repeating-linear-gradient(96deg, transparent 0 52px, rgba(40,8,5,.22) 53px, transparent 56px),
  repeating-linear-gradient(2deg, transparent 0 8px, rgba(255,205,154,.025) 9px, transparent 11px),
  linear-gradient(125deg, #9d3228, #7b241f 50%, #9f372a); }
.wood-grain::after { content:""; position:absolute; inset:0; opacity:.22; background: radial-gradient(ellipse at 20% 40%, transparent 0 16%, #3d0f0c 16.4%, transparent 17.2%), radial-gradient(ellipse at 80% 60%, transparent 0 20%, #3d0f0c 20.4%, transparent 21.2%); background-size: 340px 210px, 420px 270px; }
.table-vignette { position:absolute; inset:0; z-index:-2; pointer-events:none; box-shadow: inset 0 0 190px 35px rgba(23,5,4,.66); }
.game-table::after { content:""; position:absolute; inset: 14px; z-index:-1; border: 1px solid rgba(255,221,186,.12); border-radius: 20px; pointer-events:none; }

.player-seats { position: absolute; inset: 0; pointer-events: none; }
.player-seat { position:absolute; z-index:6; width:245px; padding:10px; border:2px solid var(--player-frame,rgba(255,255,255,.18)); border-radius:14px; color:var(--ink); background:rgba(255,248,232,.97); box-shadow:0 14px 30px rgba(37,5,3,.3); transition: transform .25s ease, box-shadow .25s ease; pointer-events:auto; }
.player-seat.active { box-shadow:0 0 0 4px var(--yellow), 0 18px 42px rgba(37,5,3,.44); }
.player-seat.you::after { content:"TU"; position:absolute; top:-9px; right:10px; padding:3px 7px; border-radius:6px; color:var(--ink); background:var(--yellow); font-size:.5rem; font-weight:950; letter-spacing:.12em; }
.player-seat.disconnected { opacity:.62; }
.player-seat.seat-top { top:22px; left:50%; transform:translateX(-50%); }
.player-seat.seat-bottom { bottom:62px; left:50%; transform:translateX(-50%); }
.player-seat.seat-left { top:50%; left:22px; transform:translateY(-50%); }
.player-seat.seat-right { top:50%; right:22px; transform:translateY(-50%); }
.seat-inner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; }
.seat-identity { min-width:0; }
.seat-avatar { width:42px; height:42px; display:grid; place-items:center; border:2px solid var(--ink); border-radius:10px; color:var(--paper); background:var(--ink); font-size:.78rem; font-weight:950; }
.seat-name { display:block; max-width:105px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }
.seat-title { display:block; max-width:112px; margin-top:2px; overflow:hidden; color:#806f54; font-size:.42rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.rank-tools { display:flex; align-items:center; gap:4px; }
.seat-rank { display:inline-block; margin-top:4px; padding:2px 6px; border-radius:999px; color:var(--paper); background:var(--red-dark); font-size:.48rem; font-weight:900; letter-spacing:.08em; line-height:1.25; text-transform:uppercase; }
.perk-info { width:18px; height:18px; margin-top:4px; padding:0; border:1px solid rgba(72,25,20,.25); border-radius:50%; color:var(--red-dark); background:transparent; font-size:.62rem; font-weight:950; line-height:1; }
.perk-charge { width:18px; height:18px; display:grid; place-items:center; margin-top:4px; border-radius:50%; color:#fff; background:#69716e; font-size:.58rem; font-weight:950; }
.perk-charge.state-ready { color:var(--ink); background:var(--lime); box-shadow:0 0 0 3px rgba(185,221,70,.2); }
.perk-charge.state-spent { opacity:.38; filter:grayscale(1); }
.perk-charge.state-passive { background:var(--red); }
.perk-charge.state-none { background:#b9b2a3; }
.seat-score { min-width:48px; padding:5px 7px; border-radius:9px; color:var(--paper); background:var(--red-dark); text-align:center; }
.seat-score span { display:block; font-size:1.25rem; font-weight:950; line-height:1; }
.seat-score small { display:block; margin-top:3px; color:rgba(255,248,232,.72); font-size:.44rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.seat-track { height:4px; margin-top:8px; overflow:hidden; border-radius:99px; background:#d6d0c1; }
.seat-track i { display:block; height:100%; background:var(--red); }
.seat-perk { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:7px; margin-top:7px; padding:5px 7px; border-radius:8px; background:rgba(110,33,28,.09); }
.seat-perk b { color:var(--red-dark); font-size:.43rem; font-weight:950; letter-spacing:.08em; white-space:nowrap; }
.seat-perk span { overflow:hidden; color:#5f5b50; font-size:.52rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.rank-progress { display:flex; align-items:center; gap:7px; margin-top:7px; }
.rank-progress > i { flex:1; height:5px; overflow:hidden; border-radius:99px; background:#d6d0c1; }
.rank-progress > i b { display:block; height:100%; border-radius:inherit; background:#b8940d; }
.rank-progress > span { max-width:120px; overflow:hidden; color:#6d665b; font-size:.46rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.seat-streak { position:absolute; display:grid; grid-template-columns:repeat(3,32px); gap:6px; }
.seat-streak i { position:relative; width:32px; height:32px; display:grid; place-items:center; border:1px dashed rgba(255,248,232,.52); border-radius:9px; color:rgba(255,248,232,.58); background:rgba(51,10,7,.30); box-shadow:0 5px 12px rgba(37,5,3,.14); font-style:normal; }
.seat-streak i span { font-size:.52rem; font-weight:950; }
.seat-streak i img { display:block; width:28px; height:28px; border-radius:7px; object-fit:cover; }
.seat-streak i.filled { border-style:solid; color:var(--ink); background:var(--paper); }
.seat-streak i.happy { background:var(--yellow); }
.seat-streak i.sad { color:#fff; background:#292d2e; }
.seat-streak i.bonus::after { content:"+"; position:absolute; top:-5px; right:-5px; width:13px; height:13px; display:grid; place-items:center; border-radius:50%; color:var(--ink); background:var(--lime); font-size:.48rem; font-weight:950; }
.seat-top .seat-streak,
.seat-bottom .seat-streak,
.seat-left .seat-streak,
.seat-right .seat-streak { top:calc(100% + 9px); bottom:auto; left:50%; right:auto; transform:translateX(-50%); }
.emote-bubble { position:absolute; z-index:12; left:50%; bottom:calc(100% + 12px); min-width:52px; max-width:150px; padding:10px 13px; border:2px solid var(--ink); border-radius:18px 18px 18px 4px; color:var(--ink); background:var(--yellow); box-shadow:0 10px 25px rgba(30,5,3,.3); font-size:1.25rem; font-weight:950; text-align:center; transform:translateX(-50%); animation:emote-pop 2.8s ease both; }
@keyframes emote-pop { 0%{opacity:0;transform:translate(-50%,12px) scale(.5)} 12%,78%{opacity:1;transform:translate(-50%,0) scale(1)} 100%{opacity:0;transform:translate(-50%,-16px) scale(.9)} }

.center-stage { position:absolute; z-index:4; top:50%; left:50%; width:min(760px, 72vw); display:flex; flex-direction:column; align-items:center; transform:translate(-50%,-50%); text-align:center; }
.close-room-button { position:absolute; z-index:15; top:-42px; left:50%; min-height:30px; padding:0 11px; border:1px solid rgba(255,255,255,.2); border-radius:8px; color:#ffd8ce; background:rgba(91,24,20,.86); font-size:.58rem; font-weight:900; transform:translateX(-50%); }
.close-room-button:hover { color:var(--paper); background:#7f2820; }
.leave-room-button { position:absolute; z-index:15; top:-42px; left:50%; min-height:30px; padding:0 11px; border:1px solid rgba(255,255,255,.18); border-radius:8px; color:#d7dfdc; background:rgba(28,39,38,.9); font-size:.58rem; font-weight:900; transform:translateX(-50%); }
.leave-room-button:hover { color:var(--paper); background:#30413e; }
.mode-chip { position:absolute; top:-10px; padding:4px 9px; border:1px solid rgba(255,255,255,.24); border-radius:999px; color:#d9dddd; background:rgba(20,18,18,.5); font-size:.48rem; font-weight:950; letter-spacing:.14em; }
.mode-chip.blitz { color:var(--ink); border-color:var(--yellow); background:var(--yellow); box-shadow:0 0 22px rgba(241,207,53,.24); }
.turn-label { display:none; }
.dice-arena { position:relative; width:min(680px, 70vw); height:340px; display:grid; place-items:center; margin-top:6px; perspective:1000px; }
.dice-shadow { position:absolute; left:50%; bottom:16px; width:135px; height:35px; border-radius:50%; background:rgba(31,5,3,.45); filter:blur(9px); transform:translateX(-50%); }
.dice-physics { position:absolute; inset:0; z-index:3; overflow:hidden; border-radius:24px; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.dice-physics canvas { display:block; width:100%!important; height:100%!important; }
.dice-arena.physics-active .dice-physics { opacity:1; }
.dice-arena.physics-active .dice-shadow { opacity:0; }
.dice-scene { position:relative; z-index:2; width:150px; height:150px; visibility:visible; opacity:1; perspective:900px; transform-style:preserve-3d; transition:opacity .16s ease, visibility .16s ease; }
.dice-fallback.hidden { visibility:hidden; opacity:0; }
.dice-fallback.landed { transform:translateY(22px) rotateX(-10deg) rotateY(11deg) rotateZ(-2deg) scale(.9); }
.dice-cube { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.86,.25,1); }
.die-face { position:absolute; inset:0; overflow:hidden; border:1px solid rgba(66,35,12,.35); border-radius:22px; background:#ead0a5; backface-visibility:hidden; box-shadow:inset 0 0 18px rgba(83,43,14,.15); }
.die-face img { display:block; width:100%; height:100%; object-fit:cover; }
.die-front { transform:rotateY(0deg) translateZ(75px); }
.die-back { transform:rotateY(180deg) translateZ(75px); }
.die-right { transform:rotateY(90deg) translateZ(75px); }
.die-left { transform:rotateY(-90deg) translateZ(75px); }
.die-top { transform:rotateX(90deg) translateZ(75px); }
.die-bottom { transform:rotateX(-90deg) translateZ(75px); }
.dice-cube.face-1 { transform:rotateX(0) rotateY(0); }
.dice-cube.face-2 { transform:rotateX(0) rotateY(-90deg); }
.dice-cube.face-3 { transform:rotateX(-90deg) rotateY(0); }
.dice-cube.face-4 { transform:rotateX(90deg) rotateY(0); }
.dice-cube.face-5 { transform:rotateX(0) rotateY(90deg); }
.dice-cube.face-6 { transform:rotateX(0) rotateY(180deg); }
.dice-arena::before { content:""; position:absolute; width:205px; height:82px; bottom:0; border:2px solid rgba(255,248,232,.12); border-radius:50%; opacity:0; transform:scale(.55); pointer-events:none; }
.dice-arena.throwing .dice-scene { animation:dice-flight 1.6s cubic-bezier(.18,.72,.16,1); }
.dice-cube.throwing { animation:dice-tumble 1.6s cubic-bezier(.17,.76,.18,1); }
@keyframes dice-flight {
  0% { transform:translate3d(0,150px,-160px) scale(.58); }
  24% { transform:translate3d(-78px,-65px,150px) scale(1.08); }
  52% { transform:translate3d(68px,-35px,105px) scale(1.02); }
  73% { transform:translate3d(-24px,15px,20px) scale(.94); }
  84% { transform:translate3d(10px,-13px,48px) scale(1.02); }
  100% { transform:translate3d(0,0,0) scale(1); }
}
@keyframes dice-tumble {
  0% { transform:rotateX(0deg) rotateY(0deg) rotateZ(-12deg); }
  24% { transform:rotateX(var(--tumble-x-1,310deg)) rotateY(var(--tumble-y-1,-420deg)) rotateZ(18deg); }
  58% { transform:rotateX(var(--tumble-x-2,690deg)) rotateY(var(--tumble-y-2,-790deg)) rotateZ(-10deg); }
  100% { transform:rotateX(var(--land-x,1080deg)) rotateY(var(--land-y,1440deg)) rotateZ(0deg); }
}
.dice-arena.throwing::before { animation:table-impact 1.6s ease-out; }
.dice-arena.throwing .dice-shadow { animation:shadow-hop 1.6s ease; }
@keyframes shadow-hop { 0%,100%{transform:translateX(-50%) scale(1);opacity:1} 24%,54%{transform:translateX(-50%) scale(.34);opacity:.18} 74%{transform:translateX(-50%) scale(1.12);opacity:.9} 86%{transform:translateX(-50%) scale(.72);opacity:.52} }
@keyframes table-impact { 0%,67%{opacity:0;transform:scale(.55)} 76%{opacity:.55;transform:scale(.72)} 100%{opacity:0;transform:scale(1.32)} }
.result-copy { min-height:34px; margin-top:-8px; }
.result-copy span { display:none; }
.result-copy strong { display:block; margin-top:3px; font-size:1.65rem; letter-spacing:-.04em; }
.result-copy strong:empty { display:none; }
.result-copy small { display:none; }
.action-row { display:flex; justify-content:center; gap:8px; margin-top:15px; }
.throw-button { min-height:46px; border:0; border-radius:11px; font-weight:950; box-shadow:0 5px 0 rgba(54,10,7,.65); }
.throw-button { min-width:190px; display:flex; justify-content:space-between; align-items:center; padding:0 16px; color:var(--ink); background:var(--yellow); }
.throw-button i { font-style:normal; font-size:1.15rem; }
.throw-button:disabled { opacity:.4; cursor:not-allowed; }
.transform-button { min-height:46px; display:flex; align-items:center; gap:9px; padding:0 15px; border:0; border-radius:11px; color:var(--paper); background:var(--red-dark); font-weight:950; box-shadow:0 5px 0 rgba(54,10,7,.65); }
.transform-button img { width:30px; height:30px; border-radius:8px; object-fit:cover; }
.transform-button:disabled { opacity:.4; cursor:not-allowed; }
.status-message { display:none; }
.emote-dock { position:absolute; z-index:14; top:16px; left:50%; transform:translateX(-50%); }
.emote-toggle { width:38px; height:38px; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:var(--paper); background:rgba(18,19,19,.72); box-shadow:0 8px 20px rgba(0,0,0,.22); font-size:1rem; }
.emote-panel { position:absolute; top:calc(100% + 7px); left:50%; width:270px; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:7px; border:1px solid rgba(255,255,255,.16); border-radius:13px; background:rgba(18,20,20,.95); box-shadow:0 18px 45px rgba(0,0,0,.35); transform:translateX(-50%); }
.emote-panel button { min-height:38px; padding:4px; border:0; border-radius:8px; color:var(--paper); background:rgba(255,255,255,.08); font-size:1rem; font-weight:950; }
.emote-panel button:last-child { grid-column:span 2; font-size:.62rem; }
.connection-banner { position:absolute; z-index:30; top:12px; right:12px; padding:8px 11px; border-radius:9px; color:var(--ink); background:var(--yellow); font-size:.58rem; font-weight:950; }
.effect-layer { position:absolute; z-index:25; inset:0; overflow:hidden; pointer-events:none; }
.fx-particle { position:absolute; left:50%; top:52%; width:10px; height:18px; border-radius:70% 20% 70% 20%; background:var(--paper); box-shadow:0 0 8px rgba(255,255,255,.42); animation:particle-burst 1.15s cubic-bezier(.15,.65,.2,1) var(--delay) both; }
.fx-spark { width:8px; height:8px; border-radius:50%; background:var(--yellow); }
.fx-grain { width:7px; height:12px; border-radius:60% 35%; background:#d5a849; }
@keyframes particle-burst { from{opacity:1;transform:translate(0,0) rotate(0)} to{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))} }
.player-seat.rank-up { animation:rank-panel 1.8s ease; }
.player-seat.rank-up::before { content:attr(data-rank-up); position:absolute; z-index:5; left:50%; bottom:calc(100% + 8px); padding:6px 10px; border-radius:999px; color:var(--ink); background:var(--yellow); font-size:.58rem; font-weight:950; transform:translateX(-50%); animation:rank-label 1.8s ease both; }
@keyframes rank-panel { 0%,100%{filter:none} 30%{filter:brightness(1.35);box-shadow:0 0 0 6px var(--yellow),0 0 45px rgba(241,207,53,.7)} }
@keyframes rank-label { 0%,100%{opacity:0;transform:translate(-50%,8px) scale(.7)} 18%,78%{opacity:1;transform:translate(-50%,0) scale(1)} }

.decorative-stack { position:absolute; z-index:1; display:flex; gap:4px; opacity:.5; }
.decorative-stack i { width:42px; height:66px; display:block; border:3px solid var(--paper); border-radius:7px; background:repeating-linear-gradient(90deg,var(--yellow) 0 13px,#ed6c4d 14px 27px,#6c55c1 28px 41px); box-shadow:0 6px 12px rgba(37,5,3,.3); }
.stack-left { left:9%; top:13%; transform:rotate(-13deg); }
.stack-right { right:8%; bottom:13%; transform:rotate(12deg); }
.waiting-room { position:absolute; z-index:20; inset:64px 0 0; display:grid; place-items:center; padding:22px; background:rgba(12,15,15,.72); backdrop-filter:blur(13px); }
.waiting-card { width:min(470px,100%); padding:30px; border:1px solid rgba(255,255,255,.14); border-radius:22px; text-align:center; background:#191d1d; box-shadow:0 30px 90px rgba(0,0,0,.45); }
.waiting-card h2 { margin:0; font-size:2.25rem; letter-spacing:-.055em; }
.code-display { margin:22px 0 12px; color:var(--yellow); font-size:3.4rem; font-weight:950; letter-spacing:.18em; line-height:1; }
.waiting-card > p:not(.eyebrow) { color:#9da4a2; font-size:.82rem; line-height:1.5; }
.invite-qr { display:grid; justify-items:center; gap:8px; margin:16px 0 4px; }
.invite-qr img { width:156px; height:156px; padding:8px; border-radius:12px; background:#fff; image-rendering:auto; }
.invite-qr span { max-width:100%; overflow-wrap:anywhere; color:#9da4a2; font-size:.58rem; line-height:1.35; }
.waiting-card .primary-action { width:100%; margin-top:18px; }
.waiting-players { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:20px 0 12px; }
.waiting-player { display:flex; align-items:center; gap:8px; padding:9px; border:1px solid rgba(255,255,255,.1); border-radius:10px; text-align:left; background:rgba(255,255,255,.04); font-size:.7rem; font-weight:800; }
.waiting-player i { width:27px; height:27px; display:grid; place-items:center; border-radius:7px; color:var(--ink); background:var(--cream); font-style:normal; font-size:.58rem; }
.start-match { width:100%; min-height:48px; border:1px solid var(--yellow); border-radius:11px; color:var(--yellow); background:transparent; font-weight:950; }
.start-match:hover:not(:disabled) { color:var(--ink); background:var(--yellow); }
.start-match:disabled { opacity:.35; }
.close-room-waiting { width:100%; min-height:40px; margin-top:8px; border:1px solid rgba(255,128,111,.55); border-radius:10px; color:#ffad9f; background:transparent; font-size:.7rem; font-weight:900; }
.close-room-waiting:hover { color:var(--paper); background:rgba(179,58,45,.28); }
.leave-room-waiting { width:100%; min-height:40px; margin-top:8px; border:1px solid rgba(255,255,255,.18); border-radius:10px; color:#c7cfcc; background:transparent; font-size:.7rem; font-weight:900; }
.leave-room-waiting:hover { color:var(--paper); background:rgba(255,255,255,.08); }
.waiting-card > small { display:block; margin-top:9px; color:#7f8785; font-size:.6rem; }

dialog { color:var(--paper); }
dialog::backdrop { background:rgba(6,8,8,.76); backdrop-filter:blur(7px); }
.rules-dialog, .winner-dialog, .perk-dialog { border:1px solid rgba(255,255,255,.12); border-radius:20px; background:#181c1c; box-shadow:0 30px 100px rgba(0,0,0,.5); }
.rules-dialog { width:min(720px,calc(100% - 24px)); padding:0; }
.rules-dialog header { display:flex; justify-content:space-between; align-items:flex-start; padding:24px 26px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.rules-dialog h2, .winner-dialog h2 { margin:0; font-size:2rem; letter-spacing:-.05em; }
.rules-dialog header button { width:38px; height:38px; border:1px solid rgba(255,255,255,.14); border-radius:50%; background:transparent; font-size:1.4rem; }
.rules-grid { display:grid; grid-template-columns:1fr 1fr; }
.rules-grid section { display:flex; gap:13px; padding:22px; border-right:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.rules-grid section > b { color:var(--yellow); font-size:.62rem; }
.rules-grid h3 { margin:0 0 6px; font-size:.78rem; text-transform:uppercase; }
.rules-grid p { margin:0; color:#959c9a; font-size:.72rem; line-height:1.5; }
.winner-dialog { width:min(420px,calc(100% - 24px)); padding:34px; text-align:center; }
.winner-star { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 18px; border-radius:18px; color:var(--ink); background:var(--yellow); font-size:1.7rem; }
.winner-dialog > p:not(.eyebrow) { color:#9ba19f; }
.winner-dialog .primary-action { width:100%; margin-top:22px; }
.winner-dialog.blitz { animation:winner-blitz .32s cubic-bezier(.2,.9,.25,1); }
@keyframes winner-blitz { from{opacity:0;transform:scale(.82)} to{opacity:1;transform:scale(1)} }
.rematch-config { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.rematch-config label, .customize-form > label { color:#8f9694; font-size:.55rem; font-weight:900; text-align:left; text-transform:uppercase; }
.rematch-config select, .customize-form select { width:100%; height:38px; margin-top:5px; padding:0 9px; border:1px solid rgba(255,255,255,.13); border-radius:9px; color:var(--paper); background:#101313; }
.rematch-status { min-height:18px; margin-top:11px; color:#aab0ae; font-size:.66rem; }
.perk-dialog { position:fixed; inset:50% auto auto 50%; width:min(390px,calc(100% - 24px)); max-height:calc(100svh - 24px); margin:0; padding:30px; overflow:auto; transform:translate(-50%,-50%); }
.perk-dialog .perk-close { position:absolute; top:12px; right:12px; width:34px; height:34px; padding:0; border:1px solid rgba(255,255,255,.14); border-radius:50%; background:transparent; font-size:1.2rem; }
.perk-dialog #perk-player { margin:0 42px 7px 0; color:var(--yellow); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.perk-dialog h2 { margin:0; font-size:2rem; letter-spacing:-.04em; }
.perk-dialog #perk-description { margin:14px 0 0; color:#aeb4b2; font-size:.82rem; line-height:1.6; }
.toast { position:fixed; z-index:100; left:50%; bottom:24px; max-width:min(420px,calc(100% - 24px)); padding:11px 15px; border-radius:10px; color:var(--ink); background:var(--paper); box-shadow:0 15px 45px rgba(0,0,0,.3); font-size:.72rem; font-weight:850; transform:translate(-50%,140%); transition:transform .25s ease; }
.toast.show { transform:translate(-50%,0); }
.hub-dialog { width:min(680px,calc(100% - 24px)); max-height:calc(100svh - 24px); padding:0; overflow:auto; border:1px solid rgba(255,255,255,.12); border-radius:20px; color:var(--paper); background:#181c1c; box-shadow:0 30px 100px rgba(0,0,0,.5); }
.hub-dialog header { position:sticky; z-index:3; top:0; display:flex; align-items:flex-start; justify-content:space-between; padding:22px 24px 17px; border-bottom:1px solid rgba(255,255,255,.1); background:#181c1c; }
.hub-dialog h2 { margin:0; font-size:1.8rem; letter-spacing:-.04em; }
.hub-dialog h2 span { color:#8d9693; font-size:.8rem; }
.feed-balance { display:block; margin-top:7px; color:var(--yellow); font-size:.68rem; font-weight:900; }
.dialog-close { width:36px; height:36px; padding:0; border:1px solid rgba(255,255,255,.14); border-radius:50%; background:transparent; font-size:1.3rem; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; padding:1px; background:rgba(255,255,255,.08); }
.stats-grid div { min-height:86px; display:flex; flex-direction:column; justify-content:space-between; padding:13px; background:#181c1c; }
.stats-grid span { color:#858d8b; font-size:.54rem; font-weight:850; text-transform:uppercase; }
.stats-grid strong { font-size:1.2rem; }
.cosmetic-preview { --preview-frame:#fff8e8; --dice-color:#fff3d2; position:relative; display:flex; align-items:center; gap:13px; margin:20px; padding:16px 76px 16px 16px; border:2px solid var(--preview-frame); border-radius:15px; background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); }
.cosmetic-preview::after { content:""; position:absolute; right:18px; width:38px; height:38px; border:2px solid rgba(0,0,0,.28); border-radius:10px; background:var(--dice-color); box-shadow:8px 8px 0 color-mix(in srgb,var(--dice-color),#000 25%); transform:rotate(-8deg); }
.cosmetic-preview i { width:54px; height:54px; display:grid; place-items:center; border-radius:14px; color:var(--ink); background:var(--yellow); font-style:normal; font-size:.78rem; font-weight:950; }
.customize-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 20px 22px; }
.customize-form fieldset { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 18px; padding:14px; border:1px solid rgba(255,255,255,.1); border-radius:12px; }
.customize-form legend { padding:0 7px; color:#8f9694; font-size:.58rem; font-weight:900; text-transform:uppercase; }
.customize-form fieldset label { display:flex; align-items:center; gap:8px; color:#adb4b2; font-size:.66rem; }
.customize-form input[type="range"] { flex:1; min-width:80px; }
.customize-form .primary-action { grid-column:1/-1; }
.achievement-list { display:grid; gap:7px; padding:16px; }
.achievement { display:grid; grid-template-columns:36px 1fr; gap:10px; padding:12px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(255,255,255,.035); }
.achievement > i { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#2d3231; font-style:normal; }
.achievement.unlocked { border-color:rgba(185,221,70,.4); }
.achievement.unlocked > i { color:var(--ink); background:var(--lime); }
.achievement.locked { opacity:.56; }
.achievement strong { font-size:.76rem; }
.achievement p { margin:3px 0; color:#9aa19f; font-size:.65rem; }
.achievement small { color:#d4b93d; font-size:.54rem; }

/* Home reset: quiet farm table, one clear title, centered controls. */
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
body:not(.in-game) .topbar { display:none; }
body:not(.in-game) .lobby-screen { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(24px,4vh,44px); padding:clamp(30px,5vh,64px) 24px; background-color:#76251f; background-image:linear-gradient(180deg,rgba(47,10,7,.34),rgba(47,10,7,.76)),url("./assets/lobby-table-v1.png"); background-position:center; background-size:cover; }
body:not(.in-game) .lobby-screen::before { opacity:.04; }
body:not(.in-game) .lobby-hero { width:100%; max-width:none; padding:0; text-align:center; }
body:not(.in-game) .lobby-hero h1 { margin:0; color:#fff3de; font-size:clamp(3.6rem,9vw,7.5rem); line-height:.9; letter-spacing:-.09em; text-transform:none; text-shadow:0 7px 0 rgba(56,12,9,.35),0 20px 40px rgba(35,5,3,.4); }
body:not(.in-game) .lobby-panel { width:min(610px,100%); padding:12px; border:1px solid rgba(255,232,201,.32); border-radius:22px; background:rgba(35,8,6,.76); box-shadow:0 26px 80px rgba(27,3,2,.44),inset 0 1px rgba(255,255,255,.1); }
body:not(.in-game) .lobby-panel-head, body:not(.in-game) .lobby-rules-strip, body:not(.in-game) .lobby-steps { display:none; }
body:not(.in-game) .mode-tabs { margin:0 0 5px; }
body:not(.in-game) .lobby-form { padding:22px 18px 14px; }
body:not(.in-game) .lobby-form input, body:not(.in-game) .lobby-form select { height:48px; border-radius:12px; border-color:rgba(255,226,190,.2); background:rgba(16,3,3,.62); }
body:not(.in-game) .lobby-form input::placeholder { color:#bd9a88; }
body:not(.in-game) .network-status { justify-content:center; padding:7px 0 12px; }
body:not(.in-game) .network-status i { width:8px; height:8px; }
body:not(.in-game) .lobby-tools { grid-template-columns:repeat(5,42px); justify-content:center; gap:8px; padding:2px 8px 7px; }
body:not(.in-game) .lobby-tools button { width:42px; height:38px; min-height:38px; display:grid; place-items:center; padding:0; border-radius:11px; color:#e3bfa6; border-color:rgba(255,226,190,.18); background:rgba(255,243,220,.07); font-size:1rem; line-height:1; }
body:not(.in-game) .lobby-tools button:hover { color:#2b100b; background:#f1ce42; }
body:not(.in-game) .lobby-tools button span { display:block; transform:translateY(-1px); }
body:not(.in-game) .primary-action { border-radius:12px; }
body:not(.in-game) .lobby-error { margin:0 20px; }

@media (max-width:650px) {
  body:not(.in-game) .lobby-screen { gap:22px; padding:28px 16px; }
  body:not(.in-game) .lobby-hero h1 { font-size:clamp(3.3rem,16vw,5rem); }
  body:not(.in-game) .lobby-panel { padding:9px; }
  body:not(.in-game) .lobby-form, body:not(.in-game) #create-form { padding:17px 10px 10px; }
  body:not(.in-game) .lobby-tools { grid-template-columns:repeat(5,38px); gap:7px; }
  body:not(.in-game) .lobby-tools button { width:38px; height:36px; min-height:36px; }
}

/* Modern farm-lobby pass: richer hierarchy, a real hero illustration and a useful action hub. */
body:not(.in-game) .lobby-screen { display:grid; grid-template-columns:minmax(0,1fr) minmax(500px,580px); align-content:center; justify-content:center; gap:clamp(44px,7vw,116px); width:100vw; max-width:none; min-height:100svh; margin:0; padding:clamp(34px,6vh,78px) clamp(28px,6vw,96px); background-image:linear-gradient(110deg,rgba(37,7,5,.84),rgba(71,16,12,.44) 52%,rgba(25,4,3,.8)),url("./assets/lobby-table-v1.png"); }
body:not(.in-game) .lobby-hero { align-self:center; text-align:left; }
body:not(.in-game) .lobby-hero h1 { color:#fff5e4; font-size:clamp(4.2rem,8.4vw,8.5rem); line-height:.8; letter-spacing:-.1em; text-shadow:0 9px 0 rgba(53,10,7,.3),0 25px 55px rgba(23,3,2,.46); }
body:not(.in-game) .lobby-hero h1 em { color:#f4cf3f; font-style:normal; }
.hero-kicker { display:flex; align-items:center; gap:10px; margin-bottom:21px; color:#f4cf3f; font-size:.62rem; font-weight:950; letter-spacing:.16em; }
.hero-kicker > span:last-child { color:#d9a996; font-size:.52rem; letter-spacing:.1em; }
.kicker-dot { width:8px; height:8px; border-radius:50%; background:#b8e151; box-shadow:0 0 16px #b8e151; }
.hero-lede { margin:24px 0 0; color:#f0cdb7; font-size:1.05rem; font-weight:650; letter-spacing:-.02em; }
.hero-feature-row { display:flex; gap:10px; margin-top:30px; }
.hero-feature-row span { display:grid; grid-template-columns:auto 1fr; column-gap:8px; min-width:112px; padding:9px 11px; border:1px solid rgba(255,230,199,.2); border-radius:11px; background:rgba(31,5,4,.32); backdrop-filter:blur(8px); }
.hero-feature-row b { grid-row:span 2; color:#efc842; font-size:.55rem; }
.hero-feature-row strong { color:#fff0da; font-size:.63rem; }
.hero-feature-row small { color:#c39380; font-size:.48rem; }
.lobby-mascot-card { position:relative; width:min(420px,70%); margin-top:32px; border:1px solid rgba(255,237,211,.25); border-radius:22px; background:rgba(255,245,224,.96); box-shadow:0 20px 45px rgba(29,4,2,.32); transform:rotate(-2deg); overflow:hidden; }
.lobby-mascot-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 38%,rgba(122,43,27,.12)); }
.lobby-mascot-card img { display:block; width:100%; aspect-ratio:1.55; object-fit:cover; object-position:center 45%; }
.mascot-tag { position:absolute; left:16px; bottom:14px; z-index:1; padding:7px 10px; border-radius:8px; color:#24100d; background:#f3d041; font-size:.5rem; font-weight:950; letter-spacing:.11em; }
body:not(.in-game) .lobby-panel { align-self:center; width:100%; padding:18px; border:1px solid rgba(255,235,208,.36); border-radius:25px; color:#21110d; background:rgba(255,248,232,.97); box-shadow:0 30px 90px rgba(24,2,1,.43),0 4px 0 rgba(83,24,15,.42); backdrop-filter:blur(12px); }
body:not(.in-game) .network-status { display:none; }
body:not(.in-game) .lobby-panel-head { display:flex; align-items:flex-start; justify-content:space-between; padding:2px 3px 17px; }
.panel-overline { display:block; margin-bottom:6px; color:#9b3c2c; font-size:.56rem; font-weight:950; letter-spacing:.15em; }
body:not(.in-game) .lobby-panel-head h2 { margin:0; color:#24110d; font-size:1.9rem; letter-spacing:-.06em; }
.online-pill { display:flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid #d8cbb2; border-radius:999px; color:#75685d; font-size:.5rem; font-weight:950; letter-spacing:.1em; }
.online-pill i { width:7px; height:7px; border-radius:50%; background:#73ad41; box-shadow:0 0 8px #73ad41; }
body:not(.in-game) .mode-tabs { padding:4px; border:1px solid #ded1bb; background:#efe4d1; }
body:not(.in-game) .mode-tab { color:#8f8275; }
body:not(.in-game) .mode-tab.active { color:#23100c; background:#f2cf3e; box-shadow:0 3px 0 #c09b24; }
body:not(.in-game) .lobby-form { gap:12px; padding:22px 4px 14px; }
body:not(.in-game) .field span { color:#796b5d; }
body:not(.in-game) .field input, body:not(.in-game) .field select { color:#25120d; border-color:#d8cbb6; background:#fffdf7; box-shadow:inset 0 1px rgba(73,26,16,.06); }
body:not(.in-game) .field input::placeholder { color:#aa9b8a; }
body:not(.in-game) .primary-action { color:#23100c; background:#f2cf3e; box-shadow:0 5px 0 #bd971b; }
body:not(.in-game) .network-status { justify-content:flex-start; margin:0 4px; padding:8px 0 14px; color:#8a7b6c; border-top:1px solid #e4d9c7; font-size:.58rem; }
body:not(.in-game) .network-status i { width:7px; height:7px; }
body:not(.in-game) .lobby-tools { position:fixed; z-index:60; top:22px; right:28px; grid-template-columns:repeat(5,1fr); justify-content:stretch; gap:8px; width:min(590px,calc(100vw - 56px)); padding:0; }
body:not(.in-game) .lobby-tools button { width:auto; height:68px; min-height:68px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:1fr 1fr; column-gap:7px; align-content:center; padding:9px 8px; border:1px solid #e0d4c1; border-radius:13px; color:#705f52; background:#fffdf7; text-align:left; }
body:not(.in-game) .lobby-tools button:hover { color:#2a110d; border-color:#d0ad2c; background:#fff7d8; transform:translateY(-2px); box-shadow:0 6px 14px rgba(83,38,20,.12); }
body:not(.in-game) .lobby-tools button span { grid-row:span 2; width:27px; height:27px; display:grid; place-items:center; border-radius:8px; color:#fff4df; background:#8d3025; font-size:.82rem; }
body:not(.in-game) .lobby-tools button b { align-self:end; font-size:.56rem; }
body:not(.in-game) .lobby-tools button small { align-self:start; color:#a08c7a; font-size:.45rem; }

@media (max-width:900px) {
  body:not(.in-game) .lobby-screen { grid-template-columns:1fr; gap:24px; width:100vw; max-width:none; margin:0; padding:28px 18px 36px; overflow:auto; }
  body:not(.in-game) .lobby-hero { text-align:center; }
  body:not(.in-game) .hero-kicker, body:not(.in-game) .hero-feature-row { justify-content:center; }
  body:not(.in-game) .lobby-mascot-card { width:min(360px,76%); margin:24px auto 0; }
  body:not(.in-game) .lobby-panel { width:100%; }
}

@media (max-width:560px) {
  body:not(.in-game) .lobby-screen { gap:18px; padding:20px 12px 28px; }
  body:not(.in-game) .lobby-hero h1 { font-size:clamp(3.6rem,17vw,5.6rem); }
  .hero-lede { margin-top:14px; font-size:.88rem; }
  .hero-feature-row { gap:5px; margin-top:18px; }
  .hero-feature-row span { min-width:0; padding:7px 8px; }
  .hero-feature-row small { font-size:.42rem; }
  .lobby-mascot-card { width:230px!important; margin-top:18px!important; }
  body:not(.in-game) .lobby-panel { padding:12px; border-radius:19px; }
  body:not(.in-game) .lobby-panel-head h2 { font-size:1.55rem; }
  body:not(.in-game) .lobby-form, body:not(.in-game) #create-form { grid-template-columns:1fr; padding:18px 0 12px; }
  body:not(.in-game) .lobby-tools { grid-template-columns:repeat(5,1fr); gap:4px; }
  body:not(.in-game) .lobby-tools { top:12px; right:12px; width:calc(100vw - 24px); }
  body:not(.in-game) .lobby-tools button { height:57px; min-height:57px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:5px 2px; text-align:center; }
  body:not(.in-game) .lobby-tools button span { width:23px; height:23px; font-size:.7rem; }
  body:not(.in-game) .lobby-tools button b { font-size:.45rem; }
  body:not(.in-game) .lobby-tools button small { display:none; }
}

/* Title-screen layout: the lobby becomes a centered game menu over the farm scene. */
body:not(.in-game) { overflow:hidden; background:#2b130b; }
body:not(.in-game) .lobby-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(18px,3vh,34px); width:100vw; min-height:100svh; padding:clamp(30px,7vh,76px) 20px 30px; background-image:linear-gradient(180deg,rgba(25,7,4,.18),rgba(32,8,4,.42) 58%,rgba(25,6,3,.68)),url("./assets/farm-title-screen-v1.png"); background-position:center; background-size:cover; }
body:not(.in-game) .lobby-screen::before { opacity:.05; }
body:not(.in-game) .lobby-hero { width:100%; max-width:760px; text-align:center; }
body:not(.in-game) .hero-kicker, body:not(.in-game) .hero-lede, body:not(.in-game) .hero-feature-row, body:not(.in-game) .lobby-mascot-card { display:none; }
body:not(.in-game) .lobby-hero h1 { margin:0; color:#fff7e6; font-size:clamp(4.6rem,10vw,8.8rem); line-height:.82; letter-spacing:-.1em; text-shadow:0 7px 0 rgba(75,24,10,.6),0 16px 35px rgba(37,6,1,.48); }
body:not(.in-game) .lobby-hero h1 em { color:#ffd83f; font-style:normal; }
body:not(.in-game) .lobby-panel { width:min(410px,calc(100vw - 36px)); padding:12px; border:2px solid rgba(255,229,157,.8); border-radius:18px; color:#fff2dc; background:rgba(57,18,9,.88); box-shadow:0 9px 0 rgba(87,27,8,.72),0 24px 70px rgba(32,5,1,.48),inset 0 0 0 1px rgba(105,41,13,.8); }
body:not(.in-game) .lobby-panel-head { display:none; }
body:not(.in-game) .mode-tabs { gap:4px; margin:0; padding:4px; border:1px solid rgba(255,215,123,.38); border-radius:12px; background:rgba(33,8,4,.65); }
body:not(.in-game) .mode-tab { min-height:42px; color:#d6ae85; font-size:.63rem; letter-spacing:.06em; text-transform:uppercase; }
body:not(.in-game) .mode-tab.active { color:#321108; background:#ffd43e; box-shadow:0 3px 0 #b6801a; }
body:not(.in-game) .lobby-form, body:not(.in-game) #create-form { grid-template-columns:1fr; gap:9px; padding:16px 4px 12px; }
body:not(.in-game) .field span { color:#e6bd8c; font-size:.51rem; }
body:not(.in-game) .field input, body:not(.in-game) .field select { height:42px; border:1px solid rgba(255,219,158,.3); border-radius:9px; color:#fff5e4; background:rgba(27,7,4,.76); }
body:not(.in-game) .field select option { color:#21100a; background:#fff5e4; }
body:not(.in-game) .field input::placeholder { color:#c89d7c; }
body:not(.in-game) .primary-action { min-height:46px; border-radius:10px; color:#2b1008; background:#ffd43e; box-shadow:0 4px 0 #a77716; }
body:not(.in-game) .lobby-error { margin:0 5px; color:#ffb79d; }
body:not(.in-game) .lobby-tools { top:20px; right:24px; display:flex; width:auto; gap:7px; padding:0; }
body:not(.in-game) .lobby-tools button { width:42px; height:42px; min-height:42px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,224,158,.55); border-radius:50%; color:#ffe6b4; background:rgba(46,13,7,.66); box-shadow:0 4px 12px rgba(32,6,2,.3); }
body:not(.in-game) .lobby-tools button span { width:auto; height:auto; display:block; color:#ffd43e; background:none; font-size:.98rem; }
body:not(.in-game) .lobby-tools button b, body:not(.in-game) .lobby-tools button small { display:none; }

@media (max-width:600px) {
  body:not(.in-game) .lobby-screen { gap:16px; padding:25px 14px 20px; }
  body:not(.in-game) .lobby-hero h1 { font-size:clamp(3.8rem,17vw,5.8rem); }
  body:not(.in-game) .lobby-panel { width:min(370px,calc(100vw - 26px)); }
  body:not(.in-game) .lobby-tools { top:12px; right:12px; gap:4px; }
  body:not(.in-game) .lobby-tools button { width:34px; height:34px; min-height:34px; }
}

/* iPhone landscape: use the dynamic viewport and keep controls out of the dice lane. */
@media (max-width:1100px) and (orientation:landscape) {
  html, body { width:100%; min-height:100%; background:#8e2d25; }
  body.in-game, body.in-game #app, body.in-game .table-screen, body.in-game .game-table { width:100%; height:100dvh; min-height:100dvh; max-height:none; }
  body.in-game { overflow:hidden; }
  body.in-game .table-screen { padding-top:0; overflow:hidden; }
  body.in-game .game-table { height:100dvh; padding-bottom:env(safe-area-inset-bottom); }
  body.in-game .close-room-button { top:max(10px,env(safe-area-inset-top)); right:calc(var(--mobile-edge,18px) + 4px); left:auto; transform:none; }
  body.in-game .leave-room-button { top:max(10px,env(safe-area-inset-top)); left:calc(var(--mobile-edge,18px) + 4px); transform:none; }
  body.in-game .mode-chip { top:max(13px,env(safe-area-inset-top)); }
  body.in-game .emote-dock { top:max(48px,calc(env(safe-area-inset-top) + 38px)); }
  body.in-game .center-stage { top:47%; }
}

/* Main title menu and nested play sheet. */
body:not(.in-game) .title-menu { display:grid; gap:10px; width:min(330px,calc(100vw - 44px)); margin:clamp(22px,4vh,38px) auto 0; }
body:not(.in-game) .title-menu button { position:relative; min-height:55px; display:grid; grid-template-columns:1fr auto; grid-template-rows:1fr 1fr; align-items:center; padding:9px 17px; border:2px solid #ffe29b; border-radius:10px; color:#2e1108; background:linear-gradient(180deg,#ffe05a,#efbd2b); box-shadow:0 5px 0 #9a5d16,0 13px 26px rgba(34,6,1,.28); text-align:left; transition:transform .18s ease,filter .18s ease; }
body:not(.in-game) .title-menu button:nth-child(2) { color:#fff1d4; border-color:#e5bf79; background:linear-gradient(180deg,#733720,#4b1d13); box-shadow:0 5px 0 #261009,0 13px 26px rgba(34,6,1,.28); }
body:not(.in-game) .title-menu button:nth-child(3) { color:#fff1d4; border-color:#e5bf79; background:linear-gradient(180deg,#5d2b1c,#3b170f); box-shadow:0 5px 0 #261009,0 13px 26px rgba(34,6,1,.28); }
body:not(.in-game) .title-menu button:hover { filter:brightness(1.08); transform:translateY(-2px); }
body:not(.in-game) .title-menu button:active { transform:translateY(3px); box-shadow:0 2px 0 #9a5d16; }
body:not(.in-game) .title-menu button span { font-size:.86rem; font-weight:950; letter-spacing:.15em; }
body:not(.in-game) .title-menu button small { color:inherit; opacity:.68; font-size:.47rem; font-weight:750; letter-spacing:.05em; }
body:not(.in-game) .title-menu button i { grid-row:span 2; display:grid; place-items:center; width:28px; height:28px; border:1px solid currentColor; border-radius:50%; font-size:.85rem; font-style:normal; }
body:not(.in-game) .lobby-panel.open { position:fixed; z-index:55; top:50%; left:50%; width:min(420px,calc(100vw - 32px)); max-height:none; overflow:visible; margin:0; transform:translate(-50%,-50%); animation:play-sheet-in .24s ease both; }
body:not(.in-game) .lobby-panel.open::before { display:none; }
body:not(.in-game) .lobby-panel-head { display:flex; align-items:flex-start; justify-content:space-between; padding:4px 4px 14px; }
body:not(.in-game) .lobby-panel-head h2 { margin:0; color:#fff2d7; font-size:1.5rem; letter-spacing:-.05em; }
.menu-close { width:30px; height:30px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,226,158,.5); border-radius:50%; color:#ffe6b5; background:transparent; font-size:1.2rem; }
.menu-close:hover { color:#291007; background:#ffd43e; }
@keyframes play-sheet-in { from { opacity:0; transform:translate(-50%,-46%) scale(.96); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
body:not(.in-game) .account-bubble { position:fixed; z-index:60; right:24px; bottom:22px; }
body:not(.in-game) .account-bubble > button:first-child { min-height:46px; display:flex; align-items:center; gap:9px; padding:6px 15px 6px 8px; border:1px solid rgba(255,226,158,.7); border-radius:999px; color:#fff0cf; background:rgba(51,17,8,.78); box-shadow:0 8px 20px rgba(31,5,2,.38); }
body:not(.in-game) .account-bubble > button:first-child span { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:#2d1007; background:#ffd43e; font-size:.9rem; }
body:not(.in-game) .account-bubble > button:first-child b { display:none; }
@media (max-width:600px) {
  body:not(.in-game) .title-menu { width:min(300px,calc(100vw - 40px)); margin-top:20px; }
  body:not(.in-game) .title-menu button { min-height:50px; }
  body:not(.in-game) .account-bubble { right:14px; bottom:14px; }
  body:not(.in-game) .account-bubble > button:first-child { min-height:40px; padding-right:11px; }
  body:not(.in-game) .account-bubble > button:first-child span { width:28px; height:28px; }
}

@media (max-width:1100px) {
  .topbar { display:none; }
  .table-screen { height:100svh; padding-top:0; }
  .game-table { height:100svh; min-height:0; }
  .waiting-room { inset:0; }
  .lobby-screen { grid-template-columns:1fr; align-content:center; gap:40px; overflow:auto; }
  .lobby-hero h1 { font-size:clamp(4.2rem,17vw,7rem); }
  .hero-copy { margin-top:24px; }
  .lobby-panel { width:min(500px,100%); }
  .player-seat { width:210px; }
  .player-seat.seat-left { left:8px; }
  .player-seat.seat-right { right:8px; }
  .center-stage { top:48%; width:min(60vw,calc(100vw - 310px)); }
  .dice-arena { width:100%; height:min(52svh,230px); margin:0; }
  .action-row { margin-top:6px; }
  .close-room-button { top:-38px; min-height:28px; }
  .leave-room-button { top:-38px; min-height:28px; }
  .decorative-stack { display:none; }
}

@media (max-width:650px) {
  body { overflow:auto; }
  .lobby-screen { min-height:100svh; padding:34px 18px; }
  .lobby-hero h1 { font-size:4.1rem; }
  .lobby-form, #create-form { grid-template-columns:1fr; padding:20px 14px 15px; }
  .lobby-form .primary-action { grid-column:auto; }
  .table-screen { height:100svh; min-height:0; padding-top:0; }
  .game-table { height:100svh; min-height:0; }
  .player-seat { width:178px; padding:7px; }
  .seat-inner { grid-template-columns:auto minmax(0,1fr) auto; gap:6px; }
  .seat-avatar { width:33px; height:33px; }
  .seat-score { min-width:41px; padding:4px 5px; }
  .seat-score span { font-size:1rem; }
  .seat-perk { grid-template-columns:1fr; gap:2px; }
  .seat-perk span { font-size:.46rem; }
  .player-seat.seat-top { top:12px; }
  .player-seat.seat-bottom { bottom:54px; }
  .player-seat.seat-left { top:29%; left:6px; }
  .player-seat.seat-right { top:29%; right:6px; }
  .center-stage { top:51%; width:96vw; }
  .dice-arena { width:calc(100vw - 24px); height:285px; }
  .dice-scene { width:138px; height:138px; }
  .die-front { transform:rotateY(0deg) translateZ(69px); }
  .die-back { transform:rotateY(180deg) translateZ(69px); }
  .die-right { transform:rotateY(90deg) translateZ(69px); }
  .die-left { transform:rotateY(-90deg) translateZ(69px); }
  .die-top { transform:rotateX(90deg) translateZ(69px); }
  .die-bottom { transform:rotateX(-90deg) translateZ(69px); }
  .waiting-room { inset:0; }
  .waiting-card { padding:24px 18px; }
  .code-display { font-size:2.7rem; }
  .rules-grid { grid-template-columns:1fr; }
}

@media (max-width:1100px) and (orientation:portrait) {
  body { overflow:hidden; }
  .app { visibility:visible; }
  .orientation-lock { display:none; }
  body.in-game .app { visibility:hidden; }
  body.in-game .orientation-lock { position:fixed; z-index:1000; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:28px; color:var(--paper); background:#111515; text-align:center; }
  .orientation-lock span { display:grid; place-items:center; width:74px; height:74px; margin-bottom:8px; border:2px solid var(--yellow); border-radius:22px; color:var(--yellow); font-size:2.5rem; }
  .orientation-lock strong { font-size:1.55rem; }
  .orientation-lock small { color:#9da4a2; font-size:.8rem; }
}

@media (max-width:1100px) and (orientation:landscape) and (max-height:600px) {
  body { overflow:hidden; }
  .game-table { --mobile-edge:clamp(14px,2.2vw,22px); }
  .lobby-screen { min-height:100svh; grid-template-columns:minmax(0,.8fr) minmax(300px,420px); gap:20px; padding:12px 24px; }
  .lobby-hero h1 { font-size:clamp(2.8rem,8vw,4.3rem); }
  .lobby-hero .eyebrow { margin-bottom:8px; }
  .hero-copy, .lobby-die { display:none; }
  .lobby-panel { padding:5px; border-radius:16px; }
  .mode-tabs { padding:3px; }
  .mode-tab { min-height:40px; font-size:.68rem; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .lobby-form { gap:8px; padding:10px 12px 8px; }
  .field span { margin-bottom:4px; font-size:.5rem; }
  .field input, .field select { height:38px; padding:0 10px; }
  .primary-action { min-height:44px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .network-status { padding:5px 14px 8px; }
  .lobby-error { min-height:12px; }
  .player-seat { --mobile-streak-gap:10px; width:clamp(142px,18vw,170px); padding:6px 8px; border-radius:11px; }
  .player-seat.seat-bottom { top:auto; right:var(--mobile-edge); bottom:var(--mobile-edge); left:auto; transform:none; }
  .player-seat.seat-top { top:var(--mobile-edge); left:var(--mobile-edge); transform:none; }
  .player-seat.seat-left { top:auto; bottom:var(--mobile-edge); left:var(--mobile-edge); transform:none; }
  .player-seat.seat-right { top:var(--mobile-edge); right:var(--mobile-edge); transform:none; }
  .seat-bottom .emote-bubble, .seat-right .emote-bubble { right:calc(100% + 8px); bottom:0; left:auto; transform:none; }
  .seat-top .emote-bubble, .seat-left .emote-bubble { bottom:0; left:calc(100% + 8px); transform:none; }
  .seat-name { font-size:.68rem; }
  .seat-rank { font-size:.4rem; }
  .seat-score { min-width:38px; padding:4px; }
  .seat-score span { font-size:.92rem; }
  .rank-progress { margin-top:4px; }
  .rank-progress > span { max-width:86px; font-size:.38rem; }
  .seat-streak { grid-template-columns:repeat(3,25px); gap:4px; }
  .seat-streak i { width:25px; height:25px; border-radius:7px; }
  .seat-streak i img { width:22px; height:22px; }
  .seat-top .seat-streak,
  .seat-bottom .seat-streak,
  .seat-left .seat-streak,
  .seat-right .seat-streak { top:calc(100% + var(--mobile-streak-gap)); }
  .seat-bottom .seat-streak,
  .seat-left .seat-streak { top:auto; bottom:calc(100% + var(--mobile-streak-gap)); }
  .center-stage { top:46%; width:min(60vw,calc(100vw - 310px)); }
  .dice-arena { width:100%; height:min(54svh,240px); margin:0; }
  .result-copy { min-height:26px; margin-top:-10px; }
  .result-copy strong { font-size:1.25rem; }
  .action-row { margin-top:4px; }
  .throw-button, .transform-button { min-height:38px; }
  .throw-button { min-width:170px; }
  .perk-dialog { max-height:calc(100svh - 20px); overflow:auto; padding:22px; }
  .hub-dialog { max-height:calc(100svh - 16px); }
  .hub-dialog header { padding:12px 16px 9px; }
  .hub-dialog h2 { font-size:1.3rem; }
  .stats-grid { grid-template-columns:repeat(4,1fr); }
  .stats-grid div { min-height:62px; padding:8px; }
  .lobby-tools { grid-template-columns:repeat(2,1fr); }
  .shop-list { grid-template-columns:1fr; max-height:52vh; padding:0 16px 16px; }
  .shop-status { padding:0 16px 10px; }
  .cosmetic-preview { margin:10px 16px; padding:9px; }
  .cosmetic-preview i { width:38px; height:38px; }
  .customize-form { gap:8px; padding:0 16px 14px; }
  .customize-form fieldset { padding:8px; }
  .achievement-list { grid-template-columns:1fr 1fr; gap:5px; padding:8px; }
  .achievement { padding:8px; }
  .waiting-room { padding:10px; }
  .waiting-card { width:min(430px,100%); max-height:calc(100svh - 20px); padding:14px 20px; overflow:auto; }
  .waiting-card h2 { font-size:1.55rem; }
  .code-display { margin:10px 0 6px; font-size:2.15rem; }
  .waiting-card > p:not(.eyebrow) { margin:6px 0; font-size:.68rem; }
  .waiting-players { margin:9px 0 7px; }
  .waiting-player { padding:6px; }
  .waiting-card .primary-action { margin-top:8px; }
  .close-room-waiting { min-height:36px; margin-top:6px; }
  .leave-room-waiting { min-height:36px; margin-top:6px; }
  .invite-qr { margin:8px 0 2px; gap:5px; }
  .invite-qr img { width:120px; height:120px; padding:6px; }
  .invite-qr span { font-size:.5rem; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:1ms!important; transition-duration:1ms!important; }
}