:root {
  color-scheme: dark;
  --visual-viewport-height: 100dvh;
  --visual-viewport-top: 0px;
  --ink: #151819;
  --paper: #fff8e8;
  --cream: #f4e9cf;
  --yellow: #f1cf35;
  --lime: #b9dd46;
  --red: #b33a2d;
  --red-dark: #6e211c;
  --blue: #55a9ca;
  --line: rgba(255,255,255,.18);
  /* Brand-yellow variants that had drifted into near-duplicate hardcoded hex
     across the file (styles.css audit). Same exact values as before, just
     named per the UI surface that uses them — not merged into one shade,
     since unifying them is a visual-design decision out of scope here. */
  --yellow-single: #f4cd3e; /* Cock Fight / single-player accent text and CTAs */
  --yellow-shop: #f4cf43;   /* Shop dialog accents (balance, buttons) */
  --yellow-primary: #ffd43e; /* Lobby primary actions, account icon */
  --yellow-tab: #f2ce42;    /* Mode-tab active state */
  --ink-shop: #2c160e;      /* Recurring dark "wood/parchment" ink used in the shop dialog */
  --bg-overlay: #111515;    /* .orientation-lock background, repeated identically across breakpoints */
  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; }
/* Scroll lock applied by dialog-manager.js while one or more <dialog> elements are open (nesting-safe via counter). */
body.dialog-open { overflow: hidden; overscroll-behavior: none; }
button, input, select { font: inherit; }
button { color: inherit; }
button:not(:disabled) { cursor: pointer; }
[hidden] { display: none !important; }
.orientation-lock { display:none; }

.intro-splash { position:fixed; z-index:5000; inset:0; display:grid; place-items:center; background:#000; transition:opacity .5s ease; }
.intro-splash.intro-hide { opacity:0; pointer-events:none; }
.intro-feather {
  position:absolute; width:34px; height:34px; opacity:0; transform-origin:50% 50%;
  animation:
    intro-feather-fall 2.8s linear .1s forwards,
    intro-feather-settle .55s ease 2.9s forwards,
    intro-feather-gone .3s ease 3.55s forwards;
}
.intro-chicken { position:absolute; width:72px; height:auto; opacity:0; transform:scale(.55); animation: intro-chicken-in .5s cubic-bezier(.25,.85,.3,1.35) 3.65s forwards; }
@keyframes intro-feather-fall {
  0%   { transform: translate(0,-50vh) rotate(0deg) scaleX(1); opacity:0; }
  4%   { opacity:1; }
  11%  { transform: translate(38px,-42.6vh) rotate(25deg) scaleX(.6); }
  18%  { transform: translate(75px,-39vh) rotate(50deg) scaleX(.25); }
  27%  { transform: translate(30px,-34.5vh) rotate(22deg) scaleX(.6); }
  36%  { transform: translate(-15px,-30vh) rotate(-5deg) scaleX(1); }
  43%  { transform: translate(-40px,-25vh) rotate(-25deg) scaleX(.6); }
  50%  { transform: translate(-65px,-20vh) rotate(-45deg) scaleX(.3); }
  59%  { transform: translate(-30px,-15.5vh) rotate(-20deg) scaleX(.6); }
  68%  { transform: translate(5px,-11vh) rotate(5deg) scaleX(1); }
  75%  { transform: translate(16px,-7.5vh) rotate(12deg) scaleX(.75); }
  82%  { transform: translate(28px,-4vh) rotate(20deg) scaleX(.6); }
  88%  { transform: translate(12px,-2.4vh) rotate(8deg) scaleX(.78); }
  94%  { transform: translate(-4px,-.8vh) rotate(-4deg) scaleX(.95); }
  100% { transform: translate(0,0) rotate(0deg) scaleX(1); opacity:1; }
}
@keyframes intro-feather-settle {
  0%   { transform: translate(0,0) rotate(0deg) scale(1,1); }
  30%  { transform: translate(0,.5px) rotate(3deg) scale(1,.92); }
  60%  { transform: translate(0,0) rotate(-1.5deg) scale(1,1.02); }
  100% { transform: translate(0,0) rotate(0deg) scale(1,1); }
}
@keyframes intro-feather-gone {
  0%   { opacity:1; transform:scale(1) rotate(0deg); }
  100% { opacity:0; transform:scale(.4) rotate(12deg); }
}
@keyframes intro-chicken-in { to { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce) {
  .intro-splash { 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); }
.top-button.has-notice { position:relative; border-color:rgba(232,84,63,.6); }
.top-button.has-notice::after { content:""; position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#e8543f; box-shadow:0 0 6px rgba(232,84,63,.7); }

.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; }

/* Friends dialog: reuses .hub-dialog/.account-form/.account-secondary/
   .primary-action wholesale (see above) - only the pieces with no existing
   equivalent (search result card, request/friend rows, presence dot, the
   notification badge on the bubble button) get new rules here. */
.friends-dialog { width:min(560px,calc(100% - 24px)); }
.friends-search-form { padding:20px 24px 4px; }
.friends-search-result { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 24px 0; padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:rgba(255,255,255,.04); }
.friends-search-result .friends-row-actions { display:flex; align-items:center; gap:8px; }
.friends-section { padding:16px 24px; border-top:1px solid rgba(255,255,255,.08); }
.friends-section:first-of-type { border-top:0; }
.friends-section h3 { margin:0 0 10px; color:#9da4a2; font-size:.62rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.friends-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.friends-row { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.03); }
.friends-name { flex:1; min-width:0; overflow:hidden; color:var(--paper); font-size:.76rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.friends-row-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.friends-row-actions .primary-action, .friends-row-actions .account-secondary { padding:0 12px; font-size:.62rem; }
.friends-row-actions .primary-action span { font-size:.9rem; }
.friends-status-label { color:#8d9694; font-size:.62rem; font-weight:800; white-space:nowrap; }
.friends-status { flex-shrink:0; width:9px; height:9px; border-radius:50%; background:#6b7472; }
.friends-status.online { background:var(--lime); box-shadow:0 0 10px var(--lime); }
.friends-status.offline { background:#7a827f; }
.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; overscroll-behavior:contain; 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.webp"); 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:var(--yellow-tab); 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:var(--yellow-tab); background:var(--yellow-tab); }

/* 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.webp"); 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.webp"); 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:var(--paper); 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.webp"); }
.shop-buy { border-color:#f0cd46; color:#f0cd46; }

/* Full-screen shop: Bancarella del Pollaio */
.shop-dialog { position:fixed; inset:0; width:100dvw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; overflow:hidden; border:0; border-radius:0; color:var(--ink-shop); background:#8b4b2a url("./assets/shop/scene/shop-stall-v1.webp") center/cover no-repeat; }
.shop-dialog::backdrop { background:rgba(24,7,3,.72); }
.shop-topbar { position:relative; z-index:2; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(12px,2vw,28px); min-height:72px; padding:12px max(18px,env(safe-area-inset-left)) 12px max(18px,env(safe-area-inset-right)); color:#fff5df; background:rgba(38,14,8,.88); border-bottom:1px solid rgba(255,237,202,.24); box-shadow:0 10px 26px rgba(38,10,4,.3); }
.shop-back { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,243,215,.45); border-radius:50%; color:#fff4d8; background:rgba(255,255,255,.08); font-size:1.25rem; }
.shop-back:hover { background:var(--yellow-shop); color:#2b140d; }
.shop-sign .eyebrow { margin:0; color:#f7cf49; font-size:.58rem; letter-spacing:.16em; }
.shop-sign h2 { margin:2px 0 0; color:#fff5df; font-family:Georgia,serif; font-size:clamp(1.35rem,3vw,2rem); line-height:1; }
.shop-top-actions { display:flex; align-items:center; gap:12px; }
.shop-balance { display:grid; grid-template-columns:auto auto; column-gap:7px; align-items:center; min-width:100px; padding:7px 11px; border:1px solid rgba(255,239,199,.28); border-radius:12px; background:rgba(255,255,255,.1); }
.shop-balance .feed-icon { grid-row:span 2; width:25px; height:25px; display:grid; place-items:center; border-radius:7px; color:var(--ink-shop); background:var(--yellow-shop); }
.shop-balance .feed-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.shop-balance strong { font-size:1rem; line-height:1; }
.shop-balance small { color:#e5cbaa; font-size:.5rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.shop-help { min-height:38px; padding:0 13px; border:1px solid rgba(255,239,199,.32); border-radius:10px; color:#fff2d6; background:rgba(255,255,255,.08); font-size:.62rem; font-weight:900; }
.shop-help:hover { color:var(--ink-shop); background:var(--yellow-shop); }
.shop-status { position:relative; z-index:1; margin:0; padding:10px clamp(18px,4vw,48px); color:#fff0d1; background:rgba(43,14,7,.62); font-size:.66rem; }
.shop-layout { display:grid; grid-template-columns:minmax(300px,38%) minmax(0,62%); height:calc(100dvh - 113px); min-height:0; }
.shop-preview-panel { display:flex; flex-direction:column; justify-content:center; gap:14px; min-width:0; padding:clamp(16px,4vw,50px); color:#fff5e2; background:linear-gradient(90deg,rgba(42,13,7,.82),rgba(42,13,7,.62)); border-right:1px solid rgba(255,238,198,.22); }
.shop-counter-art { position:relative; width:min(100%,360px); margin:0 auto; padding:18px; border-radius:18px; background:rgba(241,220,174,.94); box-shadow:0 17px 0 rgba(55,18,8,.28),0 22px 45px rgba(29,5,2,.35); }
.shop-preview-media { display:grid; place-items:center; min-height:220px; overflow:hidden; border-radius:12px; background:radial-gradient(circle at 50% 30%,#fff7dc,#dca86c 85%); }
.shop-preview-media img { width:100%; height:100%; max-height:260px; object-fit:contain; mix-blend-mode:multiply; filter:drop-shadow(0 11px 8px rgba(63,21,8,.25)); }
.shop-preview-stamp { position:absolute; top:10px; right:10px; padding:5px 8px; border:1px solid rgba(87,40,14,.3); border-radius:999px; color:#653316; background:#f3cf46; font-size:.48rem; font-weight:950; letter-spacing:.1em; }
.shop-preview-copy { max-width:420px; width:100%; margin:0 auto; }
.shop-rarity { display:inline-block; margin-bottom:6px; padding:4px 8px; border-radius:999px; color:#3b1a0d; background:#e9b44d; font-size:.5rem; font-weight:950; letter-spacing:.11em; text-transform:uppercase; }
.shop-preview-copy h2 { margin:0; color:var(--paper); font-family:Georgia,serif; font-size:clamp(1.3rem,3vw,2.1rem); }
.shop-preview-copy p { margin:7px 0 13px; color:#edd6b7; font-size:.7rem; line-height:1.45; }
.shop-preview-meta { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid rgba(255,240,208,.2); border-bottom:1px solid rgba(255,240,208,.2); font-size:.62rem; }
.shop-preview-meta strong { color:#f5d34e; }
.shop-preview-meta span { color:#f1dcc0; text-align:right; }
.shop-primary-action,.shop-equip-action { width:100%; min-height:42px; margin-top:10px; padding:0 13px; border-radius:10px; font-size:.68rem; font-weight:950; }
.shop-primary-action { border:0; color:var(--ink-shop); background:var(--yellow-shop); box-shadow:0 4px 0 #9c6a1b; }
.shop-primary-action:disabled { color:#705539; background:#ddc48c; box-shadow:none; opacity:.8; }
.shop-equip-action { border:1px solid var(--yellow-shop); color:var(--yellow-shop); background:transparent; }
.shop-catalog-panel { display:grid; grid-template-rows:auto 1fr auto; min-width:0; min-height:0; padding:clamp(14px,3vw,32px); background:rgba(245,225,184,.9); }
.shop-category-tabs { display:flex; gap:8px; min-width:0; overflow-x:auto; padding:0 0 12px; scrollbar-width:none; }
.shop-category-tabs::-webkit-scrollbar { display:none; }
.shop-category-tab { flex:0 0 auto; min-height:34px; padding:0 12px; border:1px solid rgba(76,40,18,.24); border-radius:999px; color:#68462d; background:rgba(255,250,232,.72); font-size:.6rem; font-weight:950; white-space:nowrap; }
.shop-category-tab span { margin-left:4px; color:#a16b33; font-size:.52rem; }
.shop-category-tab.active { color:#fff7e6; background:#74351f; border-color:#74351f; box-shadow:0 3px 0 #4c2114; }
.shop-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:10px; min-height:0; padding:0; overflow:hidden; }
.shop-item { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; min-width:0; min-height:82px; padding:9px; border:1px solid rgba(86,44,17,.23); border-radius:12px; color:#402316; background:rgba(255,250,235,.86); box-shadow:0 5px 0 rgba(115,68,30,.12); text-align:left; }
.shop-item:hover,.shop-item.selected { border-color:#cd9a3d; background:#fff7dc; transform:translateY(-1px); }
.shop-item.selected { box-shadow:0 0 0 2px #e8b83e inset,0 5px 0 rgba(115,68,30,.12); }
.shop-item-art { width:64px; height:64px; display:grid; place-items:center; overflow:hidden; border-radius:9px; background:#e8c17f; }
.shop-item-art img { width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.shop-item-art img { display:block; opacity:1; visibility:visible; -webkit-transform:translateZ(0); transform:translateZ(0); }
.shop-item-copy { min-width:0; }
.shop-item-copy strong,.shop-item-copy small,.shop-item-copy em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shop-item-copy strong { color:#452517; font-size:.66rem; }
.shop-item-copy small { margin-top:4px; color:#9a6030; font-size:.5rem; font-weight:900; text-transform:uppercase; }
.shop-item-copy em { margin-top:6px; color:#b27628; font-size:.55rem; font-style:normal; font-weight:950; }
.shop-item-state { color:#7a9c45; font-size:.8rem; font-weight:950; }
.shop-pagination { display:flex; align-items:center; justify-content:center; gap:12px; padding-top:13px; }
.shop-pagination button { width:32px; height:30px; border:1px solid rgba(86,44,17,.25); border-radius:8px; color:#6b4128; background:#fff8e7; font-weight:950; }
.shop-pagination button:disabled { opacity:.35; }
.shop-pagination span { color:#785035; font-size:.58rem; font-weight:950; }
.shop-help-dialog { width:min(420px,calc(100% - 28px)); padding:28px; border:1px solid #d4a249; border-radius:18px; color:#412316; background:#fff4d7; box-shadow:0 20px 80px rgba(31,8,3,.5); }
.shop-help-dialog::backdrop { background:rgba(22,7,3,.65); }
.shop-help-dialog .dialog-close { float:right; width:30px; height:30px; border:1px solid rgba(65,35,19,.25); border-radius:50%; color:#412316; background:transparent; font-size:1rem; }
.shop-help-dialog h2 { margin:.3rem 0 .7rem; font-family:Georgia,serif; }
.shop-help-dialog p:not(.eyebrow) { color:#78523a; font-size:.75rem; line-height:1.5; }
.shop-help-dialog li { margin:8px 0; color:#55301d; font-size:.7rem; }

@media (max-width:1100px) and (orientation:landscape) {
  .shop-topbar { min-height:58px; padding-top:8px; padding-bottom:8px; }
  .shop-layout { height:calc(100dvh - 94px); grid-template-columns:minmax(235px,38%) minmax(0,62%); }
  .shop-preview-panel { gap:8px; padding:12px 18px; }
  .shop-counter-art { width:min(100%,230px); padding:10px; }
  .shop-preview-media { min-height:128px; }
  .shop-preview-media img { max-height:145px; }
  .shop-preview-copy h2 { font-size:1.25rem; }
  .shop-preview-copy p { margin:4px 0 7px; font-size:.6rem; }
  .shop-preview-meta { padding:6px 0; font-size:.55rem; }
  .shop-primary-action,.shop-equip-action { min-height:34px; margin-top:6px; font-size:.58rem; }
  .shop-catalog-panel { padding:10px 14px; }
  .shop-list { gap:7px; }
  .shop-item { min-height:64px; padding:6px; }
  .shop-item-art { width:50px; height:50px; }
  .shop-item-copy strong { font-size:.58rem; }
  .shop-item-copy small,.shop-item-copy em { font-size:.45rem; }
  .shop-pagination { padding-top:7px; }
}

@media (max-width:760px) and (orientation:landscape) {
  .shop-sign .eyebrow { display:none; }
  .shop-sign h2 { font-size:1.2rem; }
  .shop-top-actions { gap:6px; }
  .shop-balance { min-width:74px; padding:5px 7px; }
  .shop-balance .feed-icon { width:20px; height:20px; }
  .shop-help { min-height:32px; padding:0 8px; font-size:.52rem; }
  .shop-status { padding:6px 14px; font-size:.53rem; }
  .shop-layout { grid-template-columns:minmax(190px,38%) minmax(0,62%); }
  .shop-preview-panel { padding:8px 10px; }
  .shop-counter-art { width:170px; }
  .shop-preview-media { min-height:92px; }
  .shop-preview-media img { max-height:105px; }
  .shop-preview-copy h2 { font-size:1rem; }
  .shop-preview-copy p { display:none; }
  .shop-item-art { width:42px; height:42px; }
  .shop-item { gap:5px; min-height:54px; }
  .shop-item-copy strong { font-size:.5rem; }
  .shop-item-copy small,.shop-item-copy em { margin-top:2px; font-size:.4rem; }
}

/* Shop previews use the same playable renderer and profile primitives as the table. */
.shop-preview-dice { width:100%; height:220px; min-height:0; overflow:hidden; }
.shop-preview-dice canvas { display:block; width:100%; height:100%; }
.shop-preview-static { min-height:220px; display:grid; place-items:center; align-content:center; gap:10px; color:#4a2415; text-align:center; }
.shop-preview-static[hidden] { display:none; }
.shop-static-avatar { width:100px; height:100px; display:grid; place-items:center; border:4px solid #4a2415; border-radius:28px; color:var(--paper); background:#2f1711; font-size:1.9rem; font-weight:950; box-shadow:0 9px 0 rgba(74,36,21,.2); }
.shop-static-frame { position:relative; width:132px; height:132px; display:grid; place-items:center; }
.shop-static-frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.shop-static-frame b { position:relative; z-index:1; color:var(--paper); font-size:1.2rem; text-shadow:0 2px 3px #28120c; }
.shop-static-title { width:112px; height:72px; display:grid; place-items:center; border:3px solid #a46d34; border-radius:14px; color:var(--paper); background:#6f321f; font-size:1.5rem; font-weight:950; box-shadow:0 9px 0 rgba(74,36,21,.2); }
.shop-preview-static strong { color:#6f321f; font-size:.62rem; letter-spacing:.04em; }
.shop-mini-die { width:42px; height:42px; display:grid; place-items:center; border:2px solid rgba(37,15,8,.4); border-radius:11px; color:#28120c; background:var(--shop-die-colors,#fff3d2); box-shadow:5px 5px 0 color-mix(in srgb,var(--shop-die-colors,#fff3d2),#000 24%); transform:rotate(-7deg); }
.shop-mini-die b { font-size:1rem; filter:grayscale(.2); }
.shop-mini-avatar { width:42px; height:42px; display:grid; place-items:center; border:2px solid #2f1711; border-radius:12px; color:var(--paper); background:#2f1711; font-size:.75rem; font-weight:950; }
.shop-mini-frame { position:relative; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:var(--paper); background:transparent; }
.shop-mini-frame img { position:absolute; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px); object-fit:contain; }
.shop-mini-frame b { position:relative; z-index:1; width:22px; height:22px; display:grid; place-items:center; border-radius:7px; color:var(--paper); background:#2f1711; font-size:.48rem; text-shadow:0 1px 2px #28120c; }
.shop-mini-title { width:42px; height:30px; display:grid; place-items:center; border:2px solid #a46d34; border-radius:7px; color:var(--paper); background:#6f321f; font-size:.8rem; font-weight:950; }
.shop-item-art { overflow:visible; background:transparent; }
.seat-avatar-wrap { position:relative; flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; }
.seat-frame-art { position:absolute; z-index:2; inset:-12px; width:calc(100% + 24px); height:calc(100% + 24px); object-fit:contain; pointer-events:none; }
.seat-avatar-wrap .seat-avatar { position:relative; z-index:1; }
.single-player-avatar-wrap { position:relative; width:26px; height:26px; display:grid; place-items:center; flex:0 0 26px; }
.single-player-frame-art { position:absolute; z-index:2; inset:-8px; width:calc(100% + 16px); height:calc(100% + 16px); object-fit:contain; pointer-events:none; }
.single-player-avatar-wrap > i { position:relative; z-index:1; }
@media (max-width:1100px) and (orientation:landscape) {
  .shop-preview-dice,.shop-preview-static { height:128px; min-height:128px; }
  .shop-static-avatar { width:64px; height:64px; border-radius:18px; font-size:1.2rem; }
  .shop-static-frame { width:88px; height:88px; }
  .shop-static-title { width:80px; height:52px; }
}
@media (max-width:760px) and (orientation:landscape) {
  .shop-preview-dice,.shop-preview-static { height:92px; min-height:92px; }
  .shop-static-avatar { width:54px; height:54px; border-radius:15px; font-size:1rem; }
  .shop-static-frame { width:62px; height:62px; border-width:7px; border-radius:15px; }
  .shop-static-title { width:68px; height:44px; font-size:1rem; }
  .shop-mini-die,.shop-mini-avatar,.shop-mini-frame { width:34px; height:34px; }
}

.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-row { display:flex; align-items:center; min-width:0; gap:5px; }
.turn-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#aaa79c; box-shadow:none; }
.player-seat.active .turn-dot { background:var(--yellow); box-shadow:0 0 0 3px rgba(244,205,62,.18), 0 0 10px rgba(244,205,62,.9); }
.player-seat.active .seat-name { color:var(--yellow); }
.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%); }
.mobile-round-tools { display:flex; align-items:center; justify-content:center; gap:8px; min-height:30px; margin-top:8px; }
.mobile-round-tools .close-room-button,
.mobile-round-tools .leave-room-button { position:static; transform:none; }
.mobile-round-tools .emote-dock { position:static; transform:none; }
.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; }
.game-log-toggle { display:none; z-index:33; top:12px; left:12px; width:34px; height:34px; 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; }
body.multiplayer-v2 .game-log-toggle:not([hidden]) { position:absolute; display:grid; place-items:center; }
.game-log-panel { position:absolute; z-index:33; top:52px; left:12px; width:min(280px,72vw); max-height:min(46vh,320px); display:flex; flex-direction:column; gap:6px; padding:9px; 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); }
.game-log-panel[hidden] { display:none; }
.game-log-panel header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.game-log-panel header span { color:#d8dedd; font-size:.62rem; font-weight:950; letter-spacing:.06em; text-transform:uppercase; }
.game-log-panel header button { width:24px; height:24px; padding:0; border:0; border-radius:50%; color:var(--paper); background:rgba(255,255,255,.08); font-size:.9rem; line-height:1; }
.game-log-list { display:flex; flex-direction:column; gap:5px; margin:0; padding:0; list-style:none; overflow-y:auto; overscroll-behavior:contain; }
.game-log-list li { padding:5px 7px; border-radius:8px; background:rgba(255,255,255,.05); color:#c7cfcc; font-size:.64rem; line-height:1.3; }
.game-log-list li.log-perk { color:var(--yellow); }
.game-log-list li.log-disrespect { color:#ff9d8c; }
.game-log-list li.log-win { color:#8be08b; font-weight:900; }
.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)} }

/* Cock Master tax (Fase D): red pulse + "-1" badge on the seat that pays
   the tax, gold pulse + "+1" badge on the COCKMASTER seat that collects it.
   Same rank-panel/rank-label animation shapes as .player-seat.rank-up above. */
.v2-seat.seat-tax-out { animation:tax-out-pulse 1.2s ease; }
.v2-seat.seat-tax-out::before { content:"-1"; position:absolute; z-index:5; left:50%; bottom:calc(100% + 8px); padding:6px 10px; border-radius:999px; color:#fff3ea; background:#c0392b; font-size:.58rem; font-weight:950; transform:translateX(-50%); animation:rank-label 1.2s ease both; }
.v2-seat.seat-tax-in { animation:tax-in-pulse 1.2s ease; }
.v2-seat.seat-tax-in::before { content:"+1"; 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.2s ease both; }
@keyframes tax-out-pulse { 0%,100%{filter:none} 30%{filter:brightness(1.25);box-shadow:0 0 0 6px #c0392b,0 0 40px rgba(192,57,43,.65)} }
@keyframes tax-in-pulse { 0%,100%{filter:none} 30%{filter:brightness(1.3);box-shadow:0 0 0 6px var(--yellow),0 0 40px rgba(241,207,53,.6)} }

/* Dispetti Selettivi (Fase E): valid on-field targets for a targeted
   Dispetto get a pulsing outline instead of any popup/menu — the seats
   already visible on the table ARE the targeting UI. Seats are already
   well past the 44×44px touch target minimum, no sizing change needed. */
.v2-seat.targetable { outline:3px dashed #e0432b; outline-offset:2px; cursor:pointer; animation:targetable-pulse 1.1s ease-in-out infinite; }
@keyframes targetable-pulse { 0%,100%{outline-color:#e0432b} 50%{outline-color:#f7c948} }

.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 { overscroll-behavior:contain; 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:clamp(1.3rem,5vw,2rem); letter-spacing:-.04em; overflow-wrap:break-word; }
.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:var(--paper); --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-avatar-preview { position:relative; flex:0 0 70px; width:70px; height:70px; display:grid; place-items:center; }
.cosmetic-avatar-preview > img { position:absolute; z-index:2; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.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 { position:relative; z-index:1; width:52px; height:52px; display:grid; place-items:center; border-radius:14px; color:var(--ink); background:var(--yellow); font-style:normal; font-size:.78rem; font-weight:950; }
.cosmetic-preview strong { min-width:0; line-height:1.25; overflow-wrap:anywhere; }
.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.webp"); 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.webp"); }
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%; }
}

/* Shop responsive overrides (must remain last so the shop never inherits the old hub grid). */
.shop-dialog { position:fixed; inset:0; width:100dvw; max-width:none; height:100dvh; max-height:none; margin:0; overflow:hidden; }
.shop-list { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); max-height:none; padding:0; overflow:hidden; }
@media (max-width:1100px) {
  .shop-dialog { width:100dvw; height:100dvh; }
  .shop-layout { height:calc(100dvh - 94px); }
  .shop-list { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); max-height:none; padding:0; overflow:hidden; }
}
@media (max-width:760px) and (orientation:landscape) {
  .shop-list { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
  .shop-item { min-height:54px; }
}

/* Shop collection pass: real art, compact cards and genuinely responsive controls. */
.shop-dialog,
.shop-dialog * { box-sizing:border-box; }
.shop-dialog { overscroll-behavior:none; }
.shop-topbar { min-height:64px; padding-block:9px; }
.shop-status { padding-block:7px; }
.shop-layout { height:calc(100dvh - 94px); grid-template-columns:minmax(270px,34%) minmax(0,1fr); }
.shop-preview-panel { gap:10px; padding:clamp(10px,2.2vw,30px); }
.shop-counter-art { width:min(100%,310px); padding:12px; }
.shop-preview-media,
.shop-preview-dice,
.shop-preview-static { min-height:180px; height:180px; }
.shop-preview-copy { max-width:360px; }
.shop-preview-copy p { margin:5px 0 9px; }
.shop-category-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; overflow:visible; padding-bottom:10px; }
.shop-category-tab { min-width:0; min-height:32px; padding:0 5px; overflow:hidden; text-overflow:ellipsis; }
.shop-list { gap:8px; }
.shop-item { min-height:72px; padding:7px; }
.shop-item-art { width:56px; height:56px; overflow:visible; }
.shop-item-copy strong { font-size:.62rem; }

.shop-mini-die,
.shop-mini-avatar,
.shop-mini-frame,
.shop-mini-title { width:56px; height:56px; border:0; border-radius:10px; background:transparent; box-shadow:none; transform:none; overflow:visible; }
.shop-mini-die img { width:100%; height:100%; display:block; object-fit:cover; border-radius:10px; mix-blend-mode:multiply; }
.shop-mini-avatar { overflow:hidden; border:2px solid rgba(74,36,21,.45); border-radius:15px; background:#fff0c6; }
.shop-mini-avatar img { width:100%; height:100%; display:block; object-fit:contain; mix-blend-mode:normal; }
.shop-mini-frame img { position:absolute; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px); display:block; object-fit:contain; mix-blend-mode:normal; }
.shop-mini-frame b { display:none; }
.shop-mini-title { height:42px; overflow:hidden; border:2px solid #a46d34; background:#6f321f; }
.shop-mini-title img { width:100%; height:100%; display:block; object-fit:cover; mix-blend-mode:normal; }

.shop-static-avatar { overflow:hidden; border:4px solid #4a2415; background:#fff0c6; }
.shop-static-avatar img { width:100%; height:100%; display:block; object-fit:contain; mix-blend-mode:normal; }
.shop-static-frame { isolation:isolate; }
.shop-frame-avatar { position:absolute; z-index:0; inset:21%; display:block; overflow:hidden; border-radius:32%; background:#fff0c6; }
.shop-frame-avatar img { position:static; width:100%; height:100%; display:block; object-fit:cover; mix-blend-mode:normal; }
.shop-static-frame .shop-frame-art { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:contain; mix-blend-mode:normal; }
.shop-static-title { overflow:hidden; }
.shop-static-title img { width:100%; height:100%; display:block; object-fit:cover; mix-blend-mode:normal; }
.shop-empty { grid-column:1/-1; align-self:center; margin:auto; padding:16px; color:#775034; font-size:.66rem; font-weight:900; text-align:center; }
.seat-avatar,
.waiting-player i,
.single-player-cosmetic i,
.cosmetic-preview i { overflow:hidden; }
.seat-avatar-art,
.waiting-avatar-art,
.single-player-avatar-art,
.cosmetic-avatar-art { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; }

@media (max-width:1100px) and (orientation:landscape) {
  .shop-topbar { min-height:52px; padding:5px max(10px,env(safe-area-inset-left)); }
  .shop-back { width:34px; height:34px; }
  .shop-sign .eyebrow { display:none; }
  .shop-sign h2 { font-size:1.12rem; }
  .shop-balance { min-width:72px; padding:4px 7px; }
  .shop-balance .feed-icon { width:20px; height:20px; }
  .shop-help { min-height:32px; padding:0 8px; font-size:.5rem; }
  .shop-status { display:none; }
  .shop-layout { height:calc(100dvh - 52px); grid-template-columns:minmax(200px,34%) minmax(0,1fr); }
  .shop-preview-panel { gap:5px; padding:6px 9px; }
  .shop-counter-art { width:min(100%,170px); padding:7px; border-radius:12px; }
  .shop-preview-media,
  .shop-preview-dice,
  .shop-preview-static { min-height:92px; height:92px; }
  .shop-preview-copy { max-width:260px; }
  .shop-rarity { margin-bottom:3px; padding:3px 6px; font-size:.42rem; }
  .shop-preview-copy h2 { font-size:.96rem; line-height:1.05; }
  .shop-preview-copy p { display:none; }
  .shop-preview-meta { gap:5px; padding:4px 0; font-size:.49rem; }
  .shop-primary-action,
  .shop-equip-action { min-height:30px; margin-top:4px; padding:0 7px; font-size:.5rem; }
  .shop-catalog-panel { padding:6px 8px; }
  .shop-category-tabs { gap:4px; padding-bottom:5px; }
  .shop-category-tab { min-height:28px; padding:0 3px; border-radius:8px; font-size:.46rem; }
  .shop-category-tab span { margin-left:2px; font-size:.4rem; }
  .shop-list { gap:5px; }
  .shop-item { min-height:0; padding:5px; gap:5px; }
  .shop-item-art,
  .shop-mini-die,
  .shop-mini-avatar,
  .shop-mini-frame { width:42px; height:42px; }
  .shop-mini-title { width:42px; height:30px; }
  .shop-item-copy strong { font-size:.5rem; }
  .shop-item-copy small,
  .shop-item-copy em { margin-top:2px; font-size:.4rem; }
  .shop-item-state { font-size:.64rem; }
  .shop-pagination { gap:8px; padding-top:5px; }
  .shop-pagination button { width:28px; height:25px; }
  .shop-pagination span { font-size:.48rem; }
}

@media (max-width:700px) and (orientation:portrait) {
  body:not(.in-game) .app { visibility:visible; }
  body:not(.in-game) .orientation-lock { display:none; }
  body.in-game .app { visibility:hidden; }
  body.in-game .orientation-lock { display:flex; }
  .shop-topbar { min-height:56px; padding:7px 10px; }
  .shop-back { width:36px; height:36px; }
  .shop-sign .eyebrow { display:none; }
  .shop-sign h2 { font-size:1.15rem; }
  .shop-top-actions { gap:5px; }
  .shop-balance { min-width:0; padding:4px 6px; }
  .shop-balance .feed-icon { width:20px; height:20px; }
  .shop-balance small { display:none; }
  .shop-help { min-height:32px; padding:0 7px; font-size:.5rem; }
  .shop-status { display:none; }
  .shop-layout { height:calc(100dvh - 56px); grid-template-columns:1fr; grid-template-rows:minmax(190px,34%) minmax(0,1fr); }
  .shop-preview-panel { display:grid; grid-template-columns:124px minmax(0,1fr); align-items:center; gap:9px; padding:8px; border-right:0; border-bottom:1px solid rgba(255,238,198,.22); }
  .shop-counter-art { width:124px; padding:7px; border-radius:12px; }
  .shop-preview-media,
  .shop-preview-dice,
  .shop-preview-static { min-height:108px; height:108px; }
  .shop-preview-copy { min-width:0; }
  .shop-rarity { margin-bottom:3px; padding:3px 6px; font-size:.42rem; }
  .shop-preview-copy h2 { overflow:hidden; font-size:.94rem; line-height:1.08; text-overflow:ellipsis; white-space:nowrap; }
  .shop-preview-copy p { display:none; }
  .shop-preview-meta { gap:4px; padding:5px 0; font-size:.48rem; }
  .shop-primary-action,
  .shop-equip-action { min-height:32px; margin-top:4px; padding:0 7px; font-size:.5rem; }
  .shop-catalog-panel { min-height:0; padding:7px; }
  .shop-category-tabs { gap:3px; padding-bottom:6px; }
  .shop-category-tab { min-height:30px; padding:0 2px; border-radius:7px; font-size:.43rem; }
  .shop-category-tab span { margin-left:1px; font-size:.37rem; }
  .shop-list { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:minmax(74px,1fr); gap:6px; overflow-x:hidden; overflow-y:auto; padding:0 1px 2px; }
  .shop-item { min-height:74px; padding:5px; gap:5px; }
  .shop-item-art,
  .shop-mini-die,
  .shop-mini-avatar,
  .shop-mini-frame { width:43px; height:43px; }
  .shop-mini-title { width:43px; height:31px; }
  .shop-item-copy strong { font-size:.51rem; }
  .shop-item-copy small,
  .shop-item-copy em { margin-top:2px; font-size:.4rem; }
  .shop-item-state { font-size:.64rem; }
  .shop-pagination { gap:8px; padding-top:5px; }
  .shop-pagination button { width:30px; height:28px; }
}

/* Gameplay refresh — reference viewport: iPhone 16 landscape (852 × 393). */
.game-table::after { display:none; } /* Decorative border was the white dash at the bottom edge. */

body:not(.in-game) .lobby-hero { width:100%; max-width:560px; margin-inline:auto; text-align:center; }
body:not(.in-game) .lobby-hero h1 { width:100%; margin-inline:auto; text-align:center; }
body:not(.in-game) .lobby-hero > .utility-bubbles {
  width:min(330px,100%);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:12px auto 0;
}
body:not(.in-game) .lobby-hero > .utility-bubbles .utility-bubble {
  width:100%;
  height:auto;
  min-width:0;
  min-height:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:6px 3px;
  border:1px solid rgba(255,226,158,.72);
  border-radius:12px;
  color:#fff0cf;
  background:rgba(51,17,8,.9);
  box-shadow:0 7px 16px rgba(31,5,2,.34);
}
body:not(.in-game) .lobby-hero > .utility-bubbles .utility-icon { width:20px; height:20px; }
body:not(.in-game) .lobby-hero > .utility-bubbles span { min-width:0; font-size:.52rem; font-weight:900; overflow-wrap:anywhere; }
body:not(.in-game) .account-bubble { right:max(12px,env(safe-area-inset-right))!important; bottom:max(12px,env(safe-area-inset-bottom))!important; }

.single-player-screen,.single-duel-view,.single-duel-grid,.single-arena,.single-contender-card { min-width:0; }
body.single-duel-open .single-player-screen { height:100svh; min-height:100svh; overflow:hidden; padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left)); }
body.single-duel-open .single-duel-view { width:100%; max-width:none; height:100%; display:flex; flex-direction:column; }
body.single-duel-open .single-duel-head { flex:0 0 28px; margin:0 0 5px; }
body.single-duel-open .single-duel-grid {
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(150px,20vw) minmax(0,1fr) minmax(150px,20vw);
  grid-template-areas:"player arena boss";
  gap:8px;
}
.single-player-card { grid-area:player; }
.single-arena { grid-area:arena; }
.single-boss-card { grid-area:boss; }
.single-contender-card {
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:8px;
  overflow:hidden;
  border:1px solid rgba(255,234,191,.3);
  border-radius:14px;
  background:rgba(47,12,12,.82);
  box-shadow:0 10px 24px rgba(20,3,3,.24);
  text-align:center;
}
.single-contender-card h2 { max-width:100%; margin:2px 0 5px; font-size:1.05rem; line-height:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.single-contender-card .eyebrow { margin:0; font-size:.46rem; }
.single-player-card .single-player-cosmetic { width:76px; height:76px; margin:2px auto 4px; padding:0; border:0; background:transparent; }
.single-player-card .single-player-avatar-wrap { width:76px; height:76px; }
.single-player-card .single-player-avatar-wrap > i { width:64px; height:64px; }
.single-player-card .single-player-frame-art { inset:-9px; width:calc(100% + 18px); height:calc(100% + 18px); }
.single-boss-card img { width:100%; height:82px; margin:0 0 3px; object-fit:contain; filter:drop-shadow(0 6px 8px rgba(16,3,3,.3)); }
.single-boss-card > p:not(.eyebrow):not(.single-side-last-roll) { display:none; }
.single-side-score { display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; }
.single-side-score span { color:var(--yellow-single); font-size:.45rem; font-weight:950; letter-spacing:.1em; }
.single-side-score strong { min-width:0; color:#fff5dc; font-size:.58rem; white-space:nowrap; }
.single-contender-card .single-perk { width:100%; max-height:56px; margin:6px 0 0; padding:5px 6px; overflow:hidden; text-align:left; }
.single-contender-card .single-perk span { font-size:.43rem; }
.single-contender-card .single-perk strong { display:block; font-size:.52rem; line-height:1.16; }
body.single-duel-open .single-arena { width:100%; height:100%; min-height:0; justify-content:center; padding:5px; border-radius:14px; }
.single-turn-banner { min-height:18px; margin:0; color:var(--yellow-single); font-size:.66rem; font-weight:900; }
.single-result-above { min-height:20px; margin:0; color:#fff2bf; font-size:.82rem; font-weight:950; }
body.single-duel-open .single-dice-arena { flex:1; width:100%; height:auto; min-height:130px; max-height:none; }
body.single-duel-open .single-dice-arena .dice-physics { min-height:100%; }
.single-score-delta { min-height:17px; margin:0; color:#a8ed58; font-size:.65rem; font-weight:950; }
.single-streak-indicator { top:50%; max-width:42%; overflow:hidden; text-overflow:ellipsis; }
.single-streak-indicator.left { left:3px; }
.single-streak-indicator.right { right:3px; }
.pollo-pop { animation:pollo-message-pop .82s cubic-bezier(.2,.9,.25,1.25) both; }
@keyframes pollo-message-pop { 0%{opacity:0;transform:scale(.45)} 42%{opacity:1;transform:scale(1.18)} 67%{transform:scale(.94)} 100%{opacity:1;transform:scale(1)} }

.game-event-overlay {
  position:fixed;
  z-index:1200;
  inset:0;
  width:100%;
  height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  place-items:center;
  padding:12px 18px max(14px,env(safe-area-inset-bottom));
  border:0;
  color:#fff7e3;
  background:rgba(26,7,5,.88);
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.game-event-overlay[hidden] { display:none; }
.game-event-overlay > small { color:#e7c69f; font-size:.6rem; font-weight:850; }
.game-event-content { width:min(520px,100%); display:grid; place-items:center; }
.event-book { position:relative; width:min(430px,70vw); height:min(260px,66vh); display:grid; grid-template-columns:1fr 1fr; perspective:1000px; filter:drop-shadow(0 20px 24px rgba(0,0,0,.42)); }
.event-book-cover,.event-book-page { border:3px solid #2a1710; background:#f2d5a2; }
.event-book-cover { display:grid; place-items:center; border-radius:18px 4px 4px 18px; transform-origin:right center; animation:book-open 1s cubic-bezier(.2,.8,.2,1) both; }
.event-book-cover img { width:82%; height:82%; object-fit:cover; border-radius:10px; }
.event-book-page { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px; border-left:0; border-radius:4px 18px 18px 4px; color:#2b1710; background:repeating-linear-gradient(0deg,#f6dfb6 0 24px,#e3bf84 25px); animation:page-flip .24s 4 alternate; }
.event-book-page b { font-size:1.2rem; }
.event-book-page em { font-size:.7rem; font-style:normal; line-height:1.3; }
@keyframes book-open { from{transform:rotateY(-92deg)} to{transform:rotateY(0)} }
@keyframes page-flip { to{transform:rotateY(-8deg) skewY(1deg)} }
.event-child { display:grid; grid-template-columns:auto auto; align-items:center; gap:14px; animation:event-pop 1.8s cubic-bezier(.2,.85,.2,1) both; }
.event-child img { width:min(250px,40vw); max-height:68vh; border:4px solid #2a1710; border-radius:20px; object-fit:cover; box-shadow:0 18px 44px rgba(0,0,0,.4); }
.event-child b { font-size:clamp(1.4rem,5vw,2.5rem); }
.event-study { color:var(--yellow-single); font-size:clamp(2.3rem,9vw,6rem); font-weight:950; letter-spacing:-.06em; text-align:center; text-shadow:0 6px 0 #6e241c,0 18px 40px rgba(0,0,0,.45); animation:study-pop 2s cubic-bezier(.2,.85,.2,1) both; }
@keyframes event-pop { 0%{opacity:0;transform:scale(.35) rotate(-6deg)} 30%{opacity:1;transform:scale(1.08) rotate(2deg)} 72%{transform:scale(1)} 100%{opacity:1;transform:scale(1)} }
@keyframes study-pop { 0%{opacity:0;transform:scale(.25) rotate(-4deg)} 25%{opacity:1;transform:scale(1.12) rotate(1deg)} 72%{opacity:1;transform:scale(1)} 100%{opacity:1;transform:scale(1)} }

.center-stage .result-copy { order:1; min-height:34px; margin:0 0 -6px; }
.center-stage .dice-arena { order:2; }
.center-stage .result-detail { order:3; min-height:18px; display:block; color:#b9eb62; font-size:.7rem; font-weight:950; }
.center-stage .mobile-round-tools { order:4; }
.center-stage .action-row { order:5; }
.center-stage .status-message { order:6; }
.center-stage .result-copy strong { color:#fff4dc; font-size:1.15rem; }
.seat-book-perk { display:block; max-width:112px; margin-top:3px; overflow:hidden; color:#8b4a21; font-size:.45rem; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }

.dice-arena,.single-dice-arena,#single-dice-click-target { -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; user-select:none; touch-action:manipulation; }
.dice-arena:focus,.single-dice-arena:focus { outline:none; }
.dice-arena:focus-visible,.single-dice-arena:focus-visible { outline:3px solid #fff3a5; outline-offset:3px; border-radius:18px; }
.perk-info,.boss-info-button {
  flex:0 0 auto!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  aspect-ratio:1/1!important;
  display:inline-grid!important;
  place-items:center!important;
  padding:0!important;
  border-radius:50%!important;
  line-height:1!important;
}

@media (max-width:1100px) and (orientation:landscape) {
  body:not(.in-game) .lobby-screen { width:100%; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left)); overflow:hidden; }
  body:not(.in-game) .lobby-hero { width:min(100%,560px); max-width:560px; text-align:center; }
  body:not(.in-game) .lobby-hero h1 { font-size:clamp(2.2rem,12vh,4.2rem); }
  body:not(.in-game) .title-menu { width:min(330px,100%); margin:10px auto 0; gap:6px; }
  body:not(.in-game) .title-menu button { height:44px; min-height:44px; }
  body:not(.in-game) .lobby-hero > .utility-bubbles { margin-top:10px; }
}

@media (min-width:1101px) {
  body.single-duel-open .single-player-screen { padding:18px; }
  body.single-duel-open .single-duel-grid { grid-template-columns:minmax(220px,300px) minmax(0,1fr) minmax(220px,300px); gap:18px; }
  .single-contender-card { padding:18px; }
  .single-player-card .single-player-cosmetic,.single-player-card .single-player-avatar-wrap { width:155px; height:155px; }
  .single-player-card .single-player-avatar-wrap > i { width:130px; height:130px; }
  .single-boss-card img { height:min(34vh,280px); }
  .single-boss-card > p:not(.eyebrow):not(.single-side-last-roll) { display:block; }
  .single-contender-card h2 { font-size:1.8rem; }
  .single-contender-card .single-perk { max-height:none; padding:10px; }
  .single-contender-card .single-perk strong { font-size:.75rem; }
}

/* Landscape is the required mobile orientation, including the title screen. */
@media (max-width:1100px) and (orientation:portrait) {
  body .app { visibility:hidden!important; }
  body .orientation-lock { position:fixed; z-index:2000; inset:0; display:flex!important; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:28px; color:var(--paper); background:var(--bg-overlay); text-align:center; }
}

/* Boss Fight corrections: symmetric spacing, exact score dots and separated perks. */
body.single-duel-open .single-duel-head { justify-content:flex-start; gap:10px; }
body.single-duel-open .single-duel-head #single-duel-round { margin-right:auto; }
.single-autoplay {
  min-height:26px;
  padding:4px 9px;
  border:1px solid rgba(168,237,88,.48);
  border-radius:999px;
  color:#d9fca4;
  background:rgba(25,58,20,.35);
  font:inherit;
  font-size:.56rem;
  font-weight:950;
  letter-spacing:.08em;
}
.single-autoplay.active { color:#30100b; background:#a8ed58; box-shadow:0 0 14px rgba(168,237,88,.28); }
.single-contender-card { gap:4px; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.single-contender-card.active { border-color:rgba(244,205,62,.75); background:rgba(66,18,15,.94); box-shadow:0 0 0 2px rgba(244,205,62,.12),0 10px 24px rgba(20,3,3,.28); }
.single-contender-card h2 { min-height:17px; margin:0 0 2px; }
.single-side-score { width:100%; min-height:27px; margin-top:2px; padding:5px 6px; border-radius:8px; background:rgba(0,0,0,.18); }
.single-side-score strong { color:#fff4c9; font-size:.72rem; letter-spacing:.12em; }
.single-contender-card .single-perk { width:100%; min-height:0; max-height:none; flex:1; align-content:start; margin:2px 0 0; padding:5px 7px; overflow:auto; overscroll-behavior:contain; border-left:0; border-radius:8px; }
.single-contender-card .single-perk-heading { display:block; padding-bottom:3px; color:var(--yellow-single); font-size:.43rem; letter-spacing:.13em; }
.single-perk-list { display:grid; min-width:0; }
.single-perk-item { min-width:0; display:grid; gap:1px; padding:4px 0; border-top:1px solid rgba(244,205,62,.22); }
.single-perk-item b,.single-perk-item small { min-width:0; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.single-perk-item b { color:#fff1c8; font-size:.49rem; }
.single-perk-item small { color:#dcb998; font-size:.43rem; line-height:1.2; }
.single-perk-item.empty small { color:#bda58f; font-style:italic; }

/* Pre-duel perk choice (one-shot, non-Uovo bosses only): reuses the same
   card/typography language as .single-perk-item/.single-contender-card
   above instead of inventing a new visual pattern. */
.single-perk-choice { display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; padding:12px; }
.single-perk-choice[hidden] { display:none; }
.single-perk-choice-head { text-align:center; color:#f6d78b; }
.single-perk-choice-head h2 { margin:2px 0; font-size:1.3rem; }
.single-perk-choice-head small { color:#dcb998; }
.single-perk-choice-options { width:100%; max-width:900px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.single-perk-choice-card {
  flex:1 1 200px;
  min-width:160px;
  min-height:44px;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  padding:12px 14px;
  border:1px solid rgba(255,234,191,.32);
  border-radius:14px;
  background:rgba(47,12,12,.86);
  color:#fff1c8;
  text-align:left;
  cursor:pointer;
  font:inherit;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.single-perk-choice-card .single-perk-choice-icon { font-size:1.4rem; line-height:1; }
.single-perk-choice-card b { font-size:.85rem; color:#fff1c8; }
.single-perk-choice-card small { color:#dcb998; font-size:.7rem; line-height:1.3; }
.single-perk-choice-card:hover,.single-perk-choice-card:focus-visible { border-color:var(--yellow-single); background:rgba(244,205,62,.12); outline:none; }
.single-perk-choice-card:active { transform:translateY(2px); }
body.single-duel-open .single-perk-choice { flex:1; min-height:0; padding:6px; gap:6px; }
body.single-duel-open .single-perk-choice-head h2 { font-size:1rem; }
body.single-duel-open .single-perk-choice-head small { font-size:.6rem; }
body.single-duel-open .single-perk-choice-options { flex:1; min-height:0; align-content:center; overflow-y:auto; overscroll-behavior:contain; }
body.single-duel-open .single-perk-choice-card { min-width:88px; padding:8px 9px; }
body.single-duel-open .single-perk-choice-card b { font-size:.68rem; }
body.single-duel-open .single-perk-choice-card small { font-size:.58rem; }

@media (max-width:1100px) and (orientation:landscape) {
  body.single-duel-open .single-duel-grid { gap:10px; grid-template-columns:minmax(155px,20vw) minmax(0,1fr) minmax(155px,20vw); }
  body.single-duel-open .single-contender-card { padding:8px 9px; }
  body.single-duel-open .single-duel-difficulty { max-width:32%; }
  body.single-duel-open .single-perk-choice-options { flex-wrap:nowrap; }
  body.single-duel-open .single-perk-choice-card { flex:1 1 0; min-width:88px; }
}

@media (max-width:380px) and (orientation:portrait) {
  .shop-sign { display:none; }
  .shop-category-tab span { display:none; }
  .shop-preview-panel { grid-template-columns:108px minmax(0,1fr); }
  .shop-counter-art { width:108px; }
  .shop-preview-media,
  .shop-preview-dice,
  .shop-preview-static { min-height:94px; height:94px; }
}

.single-player-cosmetic { display:flex; align-items:center; gap:8px; width:max-content; max-width:100%; margin:0 auto 6px; padding:5px 9px 5px 5px; border:2px solid var(--cosmetic-frame,var(--paper)); border-radius:999px; color:#fff4de; background:rgba(34,8,6,.5); }
.single-player-cosmetic i { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; color:#2f120b; background:var(--yellow-shop); font-size:.58rem; font-style:normal; font-weight:950; }
.single-player-cosmetic strong,.single-player-cosmetic small { display:block; text-align:left; }
.single-player-cosmetic strong { font-size:.58rem; }
.single-player-cosmetic small { margin-top:2px; color:#d8b99a; font-size:.42rem; }
@media (max-width:1100px) and (orientation:landscape) {
  .single-player-cosmetic { margin-bottom:3px; padding:3px 7px 3px 3px; }
  .single-player-cosmetic i { width:22px; height:22px; }
}

@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.webp"); 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:var(--yellow-primary); 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:var(--yellow-primary); 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:var(--yellow-primary); 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:nth-child(2) { color:#2e1108; border-color:#ffe29b; background:linear-gradient(180deg,#ffe05a,#efbd2b); box-shadow:0 5px 0 #9a5d16,0 13px 26px rgba(34,6,1,.28); }
body:not(.in-game) .title-menu button:nth-child(n+3) { 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: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) .title-menu button { grid-template-rows:1fr; }
body:not(.in-game) .title-menu button span { align-self:center; }
body:not(.in-game) .title-menu button small { display:none; }
body:not(.in-game) .title-menu button i { grid-row:auto; align-self:center; justify-self:end; }
body:not(.in-game) .title-menu button .menu-icon { grid-row:auto; align-self:center; justify-self:end; width:29px; height:29px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
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:var(--yellow-primary); }
@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; display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
body:not(.in-game) .utility-bubbles { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
body:not(.in-game) .utility-bubble { width:42px; height:42px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,226,158,.72); border-radius:50%; color:#fff0cf; background:rgba(51,17,8,.9); box-shadow:0 7px 16px rgba(31,5,2,.34); cursor:pointer; transition:transform .18s ease, filter .18s ease, background .18s ease; }
body:not(.in-game) .utility-bubble:hover { transform:translateY(-2px); filter:brightness(1.12); background:#733720; }
body:not(.in-game) .utility-bubble .utility-icon { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body:not(.in-game) .account-bubble #account-button { 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); cursor:pointer; }
body:not(.in-game) .account-bubble #account-button .account-icon { width:32px; height:32px; display:block; padding:7px; border-radius:50%; color:#2d1007; background:var(--yellow-primary); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
body:not(.in-game) .account-bubble #account-button b { display:none; }
body:not(.in-game) .account-bubble #friends-button { position:relative; min-height:46px; min-width:46px; display:flex; align-items:center; justify-content:center; padding:6px; border:1px solid rgba(255,226,158,.7); border-radius:50%; color:#fff0cf; background:rgba(51,17,8,.78); box-shadow:0 8px 20px rgba(31,5,2,.38); cursor:pointer; }
body:not(.in-game) .account-bubble #friends-button .friends-icon { width:32px; height:32px; display:block; padding:7px; border-radius:50%; color:#2d1007; background:var(--yellow-primary); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.friends-badge { position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 4px; display:flex; align-items:center; justify-content:center; border-radius:999px; color:#2d1007; background:#e8543f; font-size:.6rem; font-weight:950; box-shadow:0 2px 6px rgba(0,0,0,.35); }
@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) .utility-bubble { width:36px; height:36px; }
  body:not(.in-game) .account-bubble #account-button { min-height:40px; padding-right:11px; }
  body:not(.in-game) .account-bubble #account-button .account-icon { width:28px; height:28px; padding:6px; }
  body:not(.in-game) .account-bubble #friends-button { min-height:40px; min-width:40px; }
  body:not(.in-game) .account-bubble #friends-button .friends-icon { width:28px; height:28px; padding:6px; }
}

@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; overscroll-behavior-y:contain; }
  .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:var(--bg-overlay); 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 { gap:10px; margin:10px 16px; padding:9px 68px 9px 9px; }
  .cosmetic-avatar-preview { flex-basis:58px; width:58px; height:58px; }
  .cosmetic-preview i { width:42px; height:42px; border-radius:11px; }
  .cosmetic-preview::after { right:16px; }
  .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; }
}

/* Keep room controls in the table corner on every viewport. */
@media (min-width:1101px) {
  body.in-game .mobile-round-tools { min-height:0; margin:0; }
  body.in-game .center-stage .close-room-button,
  body.in-game .center-stage .leave-room-button { position:fixed; z-index:40; top:14px; right:180px; left:auto; transform:none; }
  body.in-game .center-stage .emote-dock { position:fixed; z-index:40; top:76px; left:50%; transform:translateX(-50%); }
}

/* Final iOS landscape overrides (kept last so legacy media rules cannot undo them). */
@media (max-width:1100px) and (orientation:landscape) {
  html, body { width:100%; height: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:100svh; max-height:none; }
  body.in-game { overflow:hidden; }
  body.in-game .table-screen { padding:0; overflow:hidden; }
  body.in-game .game-table { height:100dvh; min-height:100svh; padding-bottom:env(safe-area-inset-bottom); }
  body.in-game .player-seat { width:clamp(190px,22vw,250px); padding:9px 11px; }
  body.in-game .seat-avatar { width:42px; height:42px; }
  body.in-game .seat-score { min-width:50px; }
  body.in-game .seat-score span { font-size:1.15rem; }
  body.in-game .center-stage .close-room-button { position:fixed; z-index:40; top:max(10px,env(safe-area-inset-top)); right:18px; left:auto; transform:none; }
  body.in-game .center-stage .leave-room-button { position:fixed; z-index:40; top:max(10px,env(safe-area-inset-top)); right:18px; left:auto; transform:none; }
  body.in-game .mode-chip { top:10px; }
  body.in-game .emote-dock { top:max(52px,calc(env(safe-area-inset-top) + 38px)); }
  body.in-game .center-stage { top:48%; }
  body.in-game .center-stage { z-index:8; width:min(680px,calc(100vw - 250px)); }
  body.in-game .dice-arena { width:min(560px,100%); height:260px; overflow:visible; margin-top:4px; }
  body.in-game .dice-physics { z-index:10; min-width:220px; min-height:220px; opacity:1; overflow:visible; }
  body.in-game .dice-physics canvas { display:block; min-width:220px; min-height:220px; }
}

@media (max-width:1100px) and (orientation:landscape) {
  body.in-game .mobile-round-tools { position:static; display:flex; align-items:center; justify-content:center; gap:8px; min-height:30px; margin-top:8px; }
  body.in-game .mobile-round-tools .close-room-button,
  body.in-game .mobile-round-tools .leave-room-button { position:static!important; top:auto!important; right:auto!important; left:auto!important; transform:none!important; }
  body.in-game .mobile-round-tools .emote-dock { position:static!important; top:auto!important; left:auto!important; transform:none!important; }
}

/* Control placement final pass: desktop top bar, mobile score toolbar. */
@media (min-width:1101px) {
  body.in-game .center-stage .close-room-button,
  body.in-game .center-stage .leave-room-button { position:fixed!important; z-index:60; top:14px!important; right:180px!important; left:auto!important; transform:none!important; }
  body.in-game .center-stage .emote-dock { position:fixed!important; z-index:60; top:12px!important; right:300px!important; left:auto!important; transform:none!important; }
}
@media (max-width:1100px) and (orientation:landscape) {
  body.in-game .mobile-round-tools .emote-dock { position:relative!important; top:auto!important; left:auto!important; transform:none!important; }
  body.in-game .mobile-round-tools .emote-panel { top:auto!important; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); }
}

/* Some desktop browsers report a narrow CSS width when zoomed or scaled. Use
   the landscape height to distinguish them from the short iPhone viewport. */
@media (orientation:landscape) and (min-height:601px) {
  body.in-game .mobile-round-tools { min-height:0; margin:0; }
  body.in-game .mobile-round-tools .close-room-button,
  body.in-game .mobile-round-tools .leave-room-button { position:fixed!important; z-index:60; top:14px!important; right:180px!important; left:auto!important; transform:none!important; }
  body.in-game .mobile-round-tools .emote-dock { position:fixed!important; z-index:60; top:12px!important; right:300px!important; left:auto!important; transform:none!important; }
}

/* The Immortal Cock single-player mode */
.single-player-screen { min-height:100dvh; padding:clamp(22px,4vw,58px); color:#fff8e9; background:radial-gradient(circle at 50% 15%,rgba(244,205,67,.15),transparent 38%),linear-gradient(135deg,#5f1715,#9a3026 55%,#43100f); overflow:auto; }
.single-heading { max-width:1220px; margin:0 auto 18px; display:flex; align-items:flex-end; gap:22px; }
.single-heading h2 { margin:2px 0 4px; font-size:clamp(2rem,4vw,4.5rem); letter-spacing:-.06em; }
.single-heading p { margin:0; color:#efcba9; }
.single-back { border:1px solid rgba(255,244,210,.45); border-radius:999px; background:rgba(54,13,13,.5); color:#fff8e9; padding:12px 16px; font-weight:800; cursor:pointer; }
.single-difficulty { margin-left:auto; display:grid; gap:6px; color:#f6d78b; font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; }
.single-difficulty select { border:1px solid rgba(255,255,255,.28); border-radius:10px; background:#3e1212; color:#fff5dd; padding:11px 14px; font:inherit; text-transform:none; letter-spacing:normal; }
.single-progress-strip { max-width:1220px; margin:0 auto 20px; display:flex; justify-content:space-between; color:#f5d56c; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; }
.single-progress-strip span:last-child { color:#a8ed58; }
.single-ladder-list { max-width:1220px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.single-boss-tile { min-height:190px; display:grid; grid-template-columns:100px 1fr; gap:14px; align-items:center; position:relative; overflow:hidden; padding:14px; border:1px solid rgba(255,236,193,.28); border-radius:18px; background:linear-gradient(145deg,rgba(84,25,22,.95),rgba(45,11,12,.96)); box-shadow:0 12px 24px rgba(22,4,4,.25); }
.single-boss-tile.locked { opacity:.52; filter:saturate(.35); }
.single-boss-tile img { width:100px; height:125px; object-fit:contain; border-radius:12px; background:#f8e8ca; }
.single-boss-tile h3 { margin:3px 0 5px; font-size:1.5rem; }
.single-boss-tile p { min-height:38px; margin:0 0 9px; color:#eac7a7; font-size:.78rem; line-height:1.35; }
.single-boss-tile small { color:#cfa98b; font-size:.68rem; }
.single-boss-tile button { position:absolute; right:12px; bottom:12px; border:0; border-radius:9px; padding:8px 10px; background:var(--yellow-single); color:#35100c; font-weight:900; cursor:pointer; }
.single-boss-tile button:disabled { background:#4a2824; color:#c3a896; cursor:not-allowed; }
.single-boss-tile button span { margin-left:8px; }
.single-duel-view { max-width:1220px; margin:0 auto; }
.single-duel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; color:#f6d78b; font-size:.78rem; font-weight:900; letter-spacing:.13em; }
.single-duel-difficulty { color:#a8ed58; }
.single-duel-grid { display:grid; grid-template-columns:minmax(250px,330px) minmax(0,1fr); gap:28px; align-items:stretch; }
.single-boss-card { padding:20px; border:1px solid rgba(255,234,191,.32); border-radius:22px; background:rgba(47,12,12,.86); box-shadow:0 18px 40px rgba(20,3,3,.3); }
.single-boss-card img { display:block; width:100%; height:235px; object-fit:contain; border-radius:16px; background:#f7e6c8; margin-bottom:14px; }
.single-boss-card h2 { margin:3px 0 8px; font-size:2rem; }
.single-boss-card > p:not(.eyebrow) { color:#e7c5a6; line-height:1.45; }
.single-perk { margin-top:18px; padding:11px 12px; border-left:3px solid var(--yellow-single); background:rgba(244,205,62,.1); display:grid; gap:4px; }
.single-perk span { color:var(--yellow-single); font-size:.62rem; letter-spacing:.16em; font-weight:900; }
.single-perk strong { font-size:.83rem; }
.single-arena { min-height:580px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px; border:1px solid rgba(255,234,191,.22); border-radius:22px; background:radial-gradient(circle at 50% 45%,rgba(255,219,108,.1),transparent 42%),rgba(68,17,16,.52); }
.single-trio-row { width:min(560px,100%); display:flex; justify-content:space-between; color:#edc7a3; text-transform:uppercase; font-size:.7rem; letter-spacing:.14em; }
.single-trio-row div { display:grid; gap:7px; text-align:center; }
.single-trio-row strong { color:#fff5dc; font-size:1.1rem; letter-spacing:.14em; }
.single-turn-side { min-width:74px; padding:5px 8px; border:1px solid transparent; border-radius:10px; transition:color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.single-turn-label { display:flex; align-items:center; justify-content:center; gap:6px; color:#dcb998; font-size:.68rem; font-weight:900; letter-spacing:.14em; }
.single-turn-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#928277; box-shadow:none; }
.single-turn-side.active { color:var(--yellow); border-color:rgba(244,205,62,.45); background:rgba(244,205,62,.1); box-shadow:0 0 16px rgba(244,205,62,.16); }
.single-turn-side.active .single-turn-label, .single-turn-side.active strong { color:var(--yellow); }
.single-turn-side.active .single-turn-dot { background:var(--yellow); box-shadow:0 0 0 3px rgba(244,205,62,.16), 0 0 10px rgba(244,205,62,.9); }
.single-dice-arena { width:min(560px,100%); height:310px; position:relative; display:grid; place-items:center; overflow:visible; }
.single-dice-arena .dice-physics { width:100%; height:100%; min-height:260px; opacity:1; position:absolute; inset:0; overflow:visible; border-radius:0; pointer-events:none; }
.single-dice-arena .dice-physics canvas { display:block; width:100%!important; height:100%!important; min-width:0; min-height:0; }
.single-dice-arena .dice-shadow { position:absolute; width:170px; height:32px; bottom:34px; border-radius:50%; background:rgba(19,2,2,.42); filter:blur(12px); }
.single-result { min-height:24px; color:#f7dfb5; text-align:center; }
.single-roll-button { width:min(300px,100%); margin-top:10px; }
.single-status { min-height:20px; margin-top:12px; color:#e1bca3; }
.single-result-dialog { max-width:470px; border:1px solid rgba(255,236,193,.36); border-radius:20px; padding:32px; color:#fff6e2; background:#32100f; box-shadow:0 24px 80px rgba(0,0,0,.55); text-align:center; }
.single-result-dialog::backdrop { background:rgba(12,3,3,.72); backdrop-filter:blur(7px); }
.single-result-dialog h2 { margin:4px 0 8px; font-size:2.5rem; }
.single-result-dialog p:not(.eyebrow) { color:#e5c5a5; }
.single-result-actions { display:grid; gap:9px; margin-top:22px; }
@media (max-width:900px) {
  .single-player-screen { padding:16px; }
  .single-heading { align-items:flex-start; flex-wrap:wrap; }
  .single-difficulty { width:100%; margin-left:0; }
  .single-ladder-list { grid-template-columns:1fr 1fr; }
  .single-duel-grid { grid-template-columns:220px 1fr; gap:12px; }
  .single-boss-card img { height:150px; }
  .single-arena { min-height:calc(100dvh - 100px); }
}
@media (max-width:620px) {
  .single-heading h2 { font-size:2rem; }
  .single-ladder-list { grid-template-columns:1fr; }
  .single-boss-tile { min-height:155px; }
  .single-duel-grid { grid-template-columns:1fr; }
  .single-boss-card { display:grid; grid-template-columns:90px 1fr; gap:10px; padding:12px; }
  .single-boss-card img { grid-row:span 3; width:90px; height:105px; margin:0; }
  .single-boss-card .single-perk { grid-column:1 / -1; margin-top:4px; }
  .single-arena { min-height:420px; }
  .single-dice-arena { height:220px; }
}

/* Albo d'Oro — full-screen achievement hall */
.achievement-hall { position:fixed; inset:0; width:100dvw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; overflow:hidden; border:0; color:#fff3d2; background:#2a140d; }
.achievement-hall::backdrop,.achievement-celebration::backdrop { background:#130905; }
.achievement-hall-main { box-sizing:border-box; width:100%; min-height:100dvh; height:100dvh; display:grid; grid-template-rows:52px 48px minmax(0,1fr); padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow:hidden; background:linear-gradient(rgba(32,13,7,.24),rgba(32,13,7,.5)),url('/assets/achievements/scene/golden-coop-hall-852.webp') center/cover no-repeat; background:linear-gradient(rgba(32,13,7,.24),rgba(32,13,7,.5)),image-set(url('/assets/achievements/scene/golden-coop-hall-852.webp') 1x,url('/assets/achievements/scene/golden-coop-hall-1704.webp') 2x) center/cover no-repeat; }
.achievement-topbar { position:sticky; z-index:10; top:0; min-width:0; display:grid; grid-template-columns:auto minmax(145px,1fr) auto minmax(180px,auto) 44px; align-items:center; gap:8px; padding:4px 10px; border-bottom:2px solid rgba(248,204,91,.35); background:linear-gradient(180deg,rgba(42,17,9,.97),rgba(77,33,18,.94)); box-shadow:0 5px 18px rgba(22,7,2,.42); }
.achievement-back,.achievement-info-button { min-width:44px; min-height:44px; border:2px solid #d9a841; color:#fff2c5; background:#673219; box-shadow:inset 0 0 0 2px #32170d; font-weight:900; }
.achievement-back { padding:0 12px; border-radius:10px; }
.achievement-info-button { box-sizing:border-box; width:44px; min-width:44px; max-width:44px; height:44px; min-height:44px; max-height:44px; aspect-ratio:1; display:grid; place-items:center; align-self:center; justify-self:end; padding:0; border-radius:50%; font-size:1rem; line-height:1; appearance:none; -webkit-appearance:none; }
.achievement-title-sign { min-width:0; text-align:center; line-height:1; }
.achievement-title-sign span { display:block; color:#e5ba59; font-size:9px; font-weight:900; letter-spacing:.18em; }
.achievement-title-sign h1 { overflow:hidden; margin:2px 0 0; color:#fff3ce; font-family:Georgia,serif; font-size:clamp(18px,3.2vw,28px); line-height:.95; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 2px #4b210f; }
.achievement-total { min-width:68px; display:flex; align-items:baseline; justify-content:center; gap:5px; padding:6px 9px; border:1px solid #b77d2e; border-radius:8px; background:#3c1e12; }
.achievement-total strong { color:#ffe07b; font-size:14px; }.achievement-total span { color:#d9c6a3; font-size:11px; }
.achievement-guest-note { margin:0; padding:5px 8px; border-left:3px solid #e4ad3a; color:#ffe7a2; background:rgba(80,34,14,.72); font-size:11px; font-weight:750; line-height:1.2; }
.achievement-categories { min-width:0; display:flex; align-items:center; gap:3px; padding:2px 8px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scrollbar-width:none; background:rgba(36,14,7,.68); }
.achievement-categories::-webkit-scrollbar { display:none; }
.achievement-categories button { position:relative; flex:1 0 88px; min-width:88px; min-height:44px; padding:4px 8px; overflow:hidden; border:0; color:#fff2d0; background-image:linear-gradient(rgba(35,14,7,.05),rgba(35,14,7,.12)),var(--plaque); background-position:center; background-size:100% 100%; font-size:10px; font-weight:950; text-shadow:0 1px 2px #210b04; }
.achievement-categories button[aria-pressed="true"] { color:#fff7b2; filter:brightness(1.2); transform:translateY(-1px); }
.achievement-categories button:focus-visible,.achievement-medal-card:focus-visible,.achievement-reward button:focus-visible,.achievement-back:focus-visible,.achievement-info-button:focus-visible { outline:3px solid #fff08c; outline-offset:-3px; }
.achievement-hall-layout { min-width:0; min-height:0; display:grid; grid-template-columns:minmax(270px,38%) minmax(0,62%); overflow:hidden; }
.achievement-detail { min-width:0; min-height:0; display:grid; grid-template-columns:104px minmax(0,1fr); align-content:start; gap:8px; padding:8px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; border-right:4px solid rgba(62,27,13,.72); color:#2e160c; background:linear-gradient(115deg,rgba(250,220,159,.96),rgba(215,157,74,.94)); box-shadow:inset -10px 0 24px rgba(62,25,8,.2); }
.achievement-hero { position:sticky; top:0; min-height:120px; display:grid; place-items:center; align-self:start; padding-bottom:22px; }
.achievement-hero-medal { width:104px; height:104px; object-fit:contain; filter:drop-shadow(0 7px 5px rgba(47,18,5,.35)); }
.achievement-hero.is-active .achievement-hero-medal { filter:grayscale(.72) sepia(.18) drop-shadow(0 5px 4px rgba(47,18,5,.3)); }
.achievement-rarity { position:absolute; bottom:0; max-width:100%; padding:4px 8px; border:2px solid #4a2413; border-radius:5px; color:#fff3c7; background:#7b3e20; font-size:9px; font-weight:950; text-transform:uppercase; }
.rarity-raro { background:#245c70; }.rarity-epico { background:#71387d; }.rarity-leggendario { color:#3a1707; background:#efbc43; }
.achievement-secret-lock { position:absolute; width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 3px 2px #35170a); }
.achievement-detail-copy { min-width:0; padding-right:2px; }
.achievement-detail-copy h2 { margin:1px 0 3px; font-family:Georgia,serif; font-size:18px; line-height:1; }
.achievement-state { margin:0; color:#78401f; font-size:9px; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }
.achievement-story { margin:0 0 6px; font-size:12px; font-weight:720; line-height:1.25; }
.achievement-detail dl { display:grid; gap:4px; margin:0; }.achievement-detail dl div { padding:5px 6px; border-left:3px solid #9b582b; background:rgba(255,245,207,.48); }.achievement-detail dt { color:#754321; font-size:9px; font-weight:950; text-transform:uppercase; }.achievement-detail dd { margin:1px 0 0; font-size:11px; line-height:1.22; }
.achievement-progress-row { display:flex; justify-content:space-between; margin-top:6px; font-size:11px; font-weight:950; }
.achievement-progressbar { position:relative; height:17px; margin:2px 0; overflow:hidden; border:3px solid #40200f; border-radius:8px; background:#5a2d17 url('/assets/achievements/progress/wood-track.webp') center/100% 100%; }
.achievement-progressbar i { display:block; width:var(--achievement-progress); height:100%; border-right:2px solid #fff0a2; background:#d9aa34 url('/assets/achievements/progress/wood-fill.webp') left/auto 100%; transition:width .35s ease; }
.achievement-missing { margin:4px 0 7px; color:#603014; font-size:11px; font-weight:850; }
.achievement-detail-copy h3 { margin:4px 0; color:#5a2b13; font-size:10px; text-transform:uppercase; }
.achievement-rewards { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.achievement-reward { min-width:0; min-height:46px; display:grid; grid-template-columns:38px minmax(70px,1fr) auto auto; align-items:center; gap:4px; padding:3px 4px; border:1px solid rgba(81,38,15,.28); border-radius:7px; background:rgba(255,244,210,.58); }
.achievement-reward.locked img { filter:grayscale(.85); }.achievement-reward img { width:36px; height:36px; object-fit:contain; }.achievement-reward span { min-width:0; }.achievement-reward strong,.achievement-reward small { display:block; overflow-wrap:break-word; white-space:normal; }.achievement-reward strong { font-size:10px; line-height:1.15; }.achievement-reward small { color:#6b4126; font-size:8px; }.achievement-reward button { min-width:44px; min-height:40px; padding:3px 6px; border:1px solid #7d4724; border-radius:5px; color:#fff4d5; background:#6e351b; font-size:8px; font-weight:900; }.achievement-reward button:disabled { color:#67442d; background:#c4a77c; }
.achievement-board { position:relative; min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:4px; padding:6px 12px 8px; overflow:hidden; background:rgba(92,47,21,.12); }
.next-achievement { min-width:0; min-height:42px; display:flex; align-items:center; gap:7px; padding:4px 36px 4px 8px; border:2px solid #71401d; border-radius:7px; color:#3e1c0d; background:linear-gradient(90deg,rgba(245,205,126,.94),rgba(210,145,58,.93)); box-shadow:0 3px 8px rgba(40,13,4,.26); }
.next-achievement img { width:36px; height:36px; object-fit:contain; }.next-achievement span { min-width:0; }.next-achievement small,.next-achievement strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.next-achievement small { font-size:8px; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }.next-achievement strong { font-size:11px; }
.achievement-medal-grid { min-width:0; min-height:0; display:grid; grid-template-rows:repeat(2,minmax(0,1fr)); grid-auto-flow:column; grid-auto-columns:31%; align-content:stretch; gap:5px; padding:2px 20px 4px 1px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-color:#d19b41 rgba(62,27,11,.45); scrollbar-width:thin; }
.achievement-medal-grid.single-result { grid-template-rows:minmax(0,1fr); grid-auto-columns:min(50%,220px); }
.achievement-medal-grid.cock-fight-grid { grid-template:repeat(2,minmax(0,1fr))/repeat(3,minmax(0,1fr)); grid-auto-flow:row; grid-auto-columns:auto; padding-right:1px; overflow:hidden; scroll-snap-type:none; }
.achievement-medal-card { min-width:0; min-height:0; display:grid; grid-template-columns:54px minmax(0,1fr); grid-template-rows:1fr 1fr; align-items:center; gap:0 5px; padding:3px 5px; scroll-snap-align:start; border:2px solid #5f2f18; border-radius:8px; color:#3b1b0d; background:linear-gradient(145deg,rgba(250,222,164,.95),rgba(195,125,52,.94)); box-shadow:inset 0 0 0 2px rgba(255,237,180,.35),0 2px 5px rgba(39,12,3,.25); text-align:left; }
.achievement-medal-card[aria-pressed="true"] { border-color:#fff08a; box-shadow:0 0 0 2px #7a2d16,0 0 14px rgba(255,217,83,.65); }
.medal-art { position:relative; grid-row:1/3; width:54px; height:54px; display:grid; place-items:center; }.medal-art > img:first-child { width:54px; height:54px; object-fit:contain; }.achievement-medal-card.locked .medal-art > img:first-child { filter:grayscale(.86) sepia(.12); }.medal-state { position:absolute; right:-3px; bottom:-3px; width:22px; height:22px; object-fit:contain; }
.boss-lock { position:absolute; right:-2px; bottom:-2px; width:21px; height:21px; display:grid; place-items:center; border:1px solid #d8aa51; border-radius:50%; background:#4e2816; font-size:11px; }
.achievement-medal-card strong { align-self:end; overflow:hidden; font-family:Georgia,serif; font-size:10px; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }.achievement-medal-card small { align-self:start; overflow:hidden; color:#673a21; font-size:8px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.achievement-scroll-cue { position:absolute; z-index:4; right:7px; top:57px; padding:3px 5px; border-radius:8px; color:#fff0b0; background:rgba(55,21,8,.75); font-size:8px; font-weight:900; pointer-events:none; }
#achievement-list.cock-fight-grid + .achievement-scroll-cue { display:none; }
.achievement-empty { grid-column:1/-1; display:grid; place-items:center; text-align:center; }.achievement-empty img { width:min(180px,75%); max-height:100px; object-fit:cover; border-radius:10px; }.achievement-empty h2 { margin:4px 0; }.board-empty { min-width:240px; color:#fff0ca; }
.cock-fight-shelf { min-width:0; min-height:82px; display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2fr) auto; align-items:center; gap:7px; padding:5px 7px; border:2px solid #6a3418; border-radius:8px; color:#fff0cb; background:rgba(55,22,10,.9); }.cock-fight-shelf h3,.cock-fight-shelf p { margin:1px 0; }.cock-fight-shelf h3 { font-size:11px; }.cock-fight-shelf p { color:#d9bb93; font-size:8px; }.cock-difficulty-tabs { min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }.cock-difficulty-tabs button { min-height:44px; padding:4px 6px; border:2px solid #9c6b31; border-radius:7px; color:#f7dca3; background:#522817; font-size:8px; font-weight:950; }.cock-difficulty-tabs button[aria-pressed="true"] { border-color:#ffe376; color:#3b180b; background:#e4b454; box-shadow:0 0 8px rgba(255,219,103,.42); }.cock-difficulty-tabs button:disabled { color:#8e755a; border-color:#59402a; background:#2e1b12; }.cock-ladder-link { min-width:70px; min-height:44px; padding:4px 7px; border:2px solid #d7a63f; border-radius:7px; color:#fff2c3; background:#80351c; font-size:8px; font-weight:950; }.cock-detail-link { margin-top:6px; }.achievement-hero.is-locked .achievement-hero-medal { filter:grayscale(1) brightness(.65); }
.achievement-subdialog { width:min(520px,calc(100% - 28px)); max-height:calc(100dvh - 24px); padding:22px; overflow:auto; border:3px solid #b67b31; border-radius:14px; color:#fff0ce; background:#4c2413; box-shadow:0 18px 60px #160803; }.achievement-subdialog h2 { margin:2px 0 9px; font-family:Georgia,serif; }.achievement-subdialog p { font-size:13px; line-height:1.45; }.reward-preview-dialog #achievement-reward-preview { display:grid; grid-template-columns:150px 1fr; gap:8px 16px; align-items:center; }.reward-preview-dialog img { grid-row:1/5; width:150px; height:150px; object-fit:contain; }.reward-preview-dialog button { min-height:44px; }
.achievement-celebration { position:fixed; inset:0; width:100dvw; max-width:none; height:100dvh; max-height:none; margin:0; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow:hidden; border:0; color:#fff4d0; background:radial-gradient(circle at 50% 40%,rgba(239,187,55,.38),transparent 45%),rgba(28,8,4,.96); }
.celebration-particles { position:absolute; inset:0; background:url('/assets/achievements/fx/celebration-particles.webp') center/520px auto repeat; animation:achievement-particles 6s linear infinite; opacity:.52; pointer-events:none; }
.celebration-card { position:relative; width:min(740px,calc(100% - 24px)); max-height:calc(100dvh - 20px); box-sizing:border-box; display:grid; grid-template-columns:180px minmax(0,1fr); grid-template-rows:auto auto auto 1fr auto; gap:3px 14px; margin:auto; padding:12px 16px; overflow:auto; border:4px solid #e2b346; border-radius:18px; background:linear-gradient(135deg,#6e2b18,#2d120b); box-shadow:0 0 55px rgba(255,199,64,.36); }.celebration-card .eyebrow { grid-column:2; }.celebration-medal { grid-row:1/6; width:180px; height:180px; align-self:center; object-fit:contain; filter:drop-shadow(0 0 18px rgba(255,218,92,.55)); animation:achievement-medal-in .7s cubic-bezier(.2,.9,.2,1); }.celebration-stamp { justify-self:start; padding:4px 8px; border:4px double #ffd66d; color:#ffd66d; font-size:10px; font-weight:1000; letter-spacing:.12em; transform:rotate(-3deg); animation:achievement-stamp .55s .35s both; }.celebration-card h2 { margin:2px 0; font-family:Georgia,serif; font-size:26px; }.celebration-card > p:not(.eyebrow) { margin:0; color:#e6c6a3; font-size:12px; }.celebration-card ul { display:flex; gap:5px; margin:4px 0; padding:0; overflow-x:auto; list-style:none; }.celebration-card li { flex:0 0 86px; display:grid; justify-items:center; padding:4px; border:1px solid #b77b35; border-radius:7px; background:rgba(255,237,190,.08); font-size:8px; text-align:center; }.celebration-card li img { width:42px; height:42px; object-fit:contain; }.celebration-actions { display:flex; gap:7px; }.celebration-actions button { min-width:120px; min-height:44px; border:2px solid #edc05b; border-radius:8px; color:#3b1609; background:#f0c65e; font-weight:950; }
@keyframes achievement-particles { to { background-position:80px 256px; } } @keyframes achievement-medal-in { from { opacity:0; transform:scale(.55) rotate(-8deg); } } @keyframes achievement-stamp { from { opacity:0; transform:scale(2) rotate(-10deg); } }
@media (max-width:760px) and (orientation:landscape) {
  .achievement-hall-main { grid-template-rows:48px 46px minmax(0,1fr); }
  .achievement-topbar { grid-template-columns:44px minmax(125px,1fr) auto minmax(150px,auto) 44px; padding-inline:6px; gap:4px; }.achievement-back { width:44px; padding:0; font-size:0; }.achievement-back::first-letter { font-size:16px; }.achievement-back span { display:none; }.achievement-title-sign span { font-size:7px; }.achievement-guest-note { font-size:9px; }.achievement-categories { padding-inline:4px; }.achievement-categories button { flex-basis:82px; min-width:82px; }
  .achievement-hall-layout { grid-template-columns:minmax(260px,40%) minmax(0,60%); }.achievement-detail { grid-template-columns:88px minmax(0,1fr); padding:6px; }.achievement-hero-medal { width:88px; height:88px; }.achievement-detail-copy h2 { font-size:16px; }.achievement-story { font-size:11px; }.achievement-detail dl dd { font-size:10px; }.achievement-board { padding-inline:7px; }.achievement-medal-grid { grid-auto-columns:32%; }.achievement-medal-card { grid-template-columns:46px minmax(0,1fr); }.medal-art,.medal-art > img:first-child { width:46px; height:46px; }.cock-fight-shelf { grid-template-columns:130px minmax(0,1fr) auto; }
}
@media (min-width:1000px) and (orientation:landscape) { .achievement-hall-layout { grid-template-columns:minmax(340px,36%) minmax(0,64%); }.achievement-detail { grid-template-columns:150px minmax(0,1fr); padding:16px; }.achievement-hero-medal { width:145px; height:145px; }.achievement-medal-grid { grid-auto-columns:24%; } }
@media (prefers-reduced-motion:reduce) {
  .celebration-particles { display:none; }.celebration-medal,.celebration-stamp,.achievement-progressbar i { animation:none!important; transition:none!important; }.achievement-categories button[aria-pressed="true"] { transform:none; }
}
.reduced-effects .celebration-particles { display:none; }.reduced-effects .celebration-medal,.reduced-effects .celebration-stamp { animation:none; }

/* Mobile-first foundation: compact screens are the default interaction model. */
@media (max-width:1100px) {
  html, body { min-width:320px; width:100%; min-height:100%; }
  body { overflow:auto; overscroll-behavior-y:contain; -webkit-text-size-adjust:100%; }
  .app { min-height:100svh; }
  .topbar { display:none; }
  .lobby-screen { min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px; padding:calc(22px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); overflow:auto; }
  .lobby-hero { width:100%; max-width:520px; padding:0; text-align:center; }
  .lobby-hero h1 { font-size:clamp(3.2rem,14vw,5.8rem); line-height:.84; }
  .hero-copy, .lobby-rules-strip, .lobby-die { display:none; }
  .title-menu { width:min(360px,100%); margin:18px auto 0; gap:9px; }
  body:not(.in-game) .title-menu button { min-height:54px; padding:9px 15px; touch-action:manipulation; }
  .lobby-panel.open { width:min(430px,calc(100vw - 24px)); max-height:calc(100svh - 24px); overflow:auto; overscroll-behavior:contain; }
  .lobby-panel-head { padding:10px 8px 13px; }
  .lobby-form, #create-form { grid-template-columns:1fr; gap:10px; padding:14px 10px 12px; }
  .lobby-form .primary-action { grid-column:auto; width:100%; }
  .field input, .field select { min-height:48px; height:48px; }
  .mode-tab, .primary-action, .account-secondary, .shop-buy { min-height:44px; touch-action:manipulation; }
  .account-bubble { right:calc(12px + env(safe-area-inset-right))!important; bottom:calc(12px + env(safe-area-inset-bottom))!important; }
  .table-screen { height:100svh; min-height:100svh; padding:0; }
  .game-table { height:100svh; min-height:100svh; }
  .single-player-screen { min-height:100svh; padding:calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); overflow:auto; }
  .single-heading { width:100%; max-width:620px; margin-bottom:14px; gap:12px; }
  .single-heading h2 { font-size:clamp(1.8rem,8vw,3.2rem); }
  .single-heading p { font-size:.78rem; }
  .single-heading .single-back { flex:0 0 auto; padding:10px 12px; }
  .single-difficulty { width:100%; margin-left:0; }
  .single-difficulty select { width:100%; min-height:44px; }
  .single-progress-strip { width:100%; max-width:620px; margin-bottom:12px; font-size:.62rem; }
  .single-ladder-list { width:100%; max-width:620px; grid-template-columns:1fr; gap:10px; }
  .single-boss-tile { min-height:145px; grid-template-columns:82px minmax(0,1fr); gap:10px; padding:10px; }
  .single-boss-tile img { width:82px; height:108px; }
  .single-boss-tile h3 { font-size:1.25rem; }
  .single-boss-tile p { min-height:0; margin-bottom:5px; font-size:.7rem; }
  .single-boss-tile button { min-height:40px; right:10px; bottom:10px; }
  .single-duel-view { width:100%; }
  .single-duel-head { margin-bottom:10px; font-size:.62rem; }
  .single-duel-grid { width:100%; grid-template-columns:1fr; gap:10px; }
  .single-boss-card { padding:10px; border-radius:16px; display:grid; grid-template-columns:76px minmax(0,1fr); gap:8px 10px; }
  .single-boss-card img { grid-row:span 3; width:76px; height:92px; margin:0; }
  .single-boss-card h2 { font-size:1.35rem; margin:0; }
  .single-boss-card > p:not(.eyebrow) { margin:0; font-size:.68rem; line-height:1.25; }
  .single-perk { grid-column:1/-1; margin:0; padding:8px 10px; }
  .single-perk strong { font-size:.7rem; }
  .single-arena { width:100%; min-height:390px; padding:10px; border-radius:16px; }
  .single-dice-arena { width:100%; height:210px; min-height:210px; }
  .single-dice-arena .dice-physics { min-height:210px; }
  .single-trio-row { font-size:.62rem; }
  .single-result { font-size:.78rem; }
  .single-roll-button { min-height:48px; }
}

@media (max-width:1100px) and (orientation:landscape) {
  body:not(.in-game) .lobby-screen { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,420px); align-content:center; gap:18px; padding:12px 24px; }
  body:not(.in-game) .lobby-hero { text-align:left; }
  body:not(.in-game) .lobby-hero h1 { font-size:clamp(2.7rem,8vw,4.8rem); }
  body:not(.in-game) .title-menu { margin-left:0; }
  .single-player-screen { padding:10px 14px; }
  .single-heading { align-items:center; flex-wrap:nowrap; }
  .single-heading h2 { font-size:clamp(1.5rem,4.5vw,2.6rem); }
  .single-heading p { font-size:.65rem; }
  .single-difficulty { width:auto; min-width:145px; }
  .single-duel-grid { grid-template-columns:190px minmax(0,1fr); gap:12px; }
  .single-boss-card { display:block; padding:10px; }
  .single-boss-card img { width:100%; height:112px; margin-bottom:7px; }
  .single-boss-card h2 { font-size:1.2rem; }
  .single-boss-card > p:not(.eyebrow) { font-size:.62rem; }
  .single-perk { margin-top:8px; }
  .single-arena { min-height:calc(100svh - 76px); }
  .single-dice-arena { height:190px; min-height:190px; }
  .single-dice-arena .dice-physics { min-height:190px; }
}

@media (max-width:1100px) and (orientation:portrait) {
  body .app { visibility:hidden; }
  body .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:var(--bg-overlay); text-align:center; }
}

/* Final mobile interaction pass: portrait is never a playable state. */
@media (max-width:1100px) and (orientation:landscape) {
  /* The title screen must fit short landscape phones (SE/mini included). */
  body:not(.in-game) .lobby-screen {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:clamp(8px,2vh,18px);
    min-height:100dvh;
    padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));
    overflow:hidden;
  }
  body:not(.in-game) .lobby-hero { width:min(100%,520px); max-width:520px; padding:0; }
  body:not(.in-game) .lobby-hero h1 { font-size:clamp(2.1rem,11vh,5rem); line-height:.8; }
  body:not(.in-game) .title-menu {
    width:min(330px,calc(100vw - 32px));
    margin:clamp(7px,2vh,15px) auto 0;
    gap:clamp(4px,1.35vh,9px);
    transform:none;
  }
  body:not(.in-game) .title-menu button {
    height:clamp(38px,11.5vh,56px);
    min-height:0;
    padding:5px 12px;
  }
  body:not(.in-game) .title-menu button span { font-size:clamp(.66rem,2.2vh,.86rem); }
  body:not(.in-game) .title-menu button small { font-size:clamp(.38rem,1.2vh,.47rem); }
  body:not(.in-game) .title-menu button i { width:clamp(22px,6vh,28px); height:clamp(22px,6vh,28px); }
}

.single-boss-tile img, .single-boss-card img { background:transparent; mix-blend-mode:normal; filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(0 10px 14px rgba(16,3,3,.28)); }
.single-boss-tile-actions { position:absolute; right:12px; bottom:12px; display:flex; align-items:center; gap:6px; }
.single-boss-tile-actions button { position:static; }
.boss-info-button { width:30px; height:30px; padding:0!important; border:1px solid rgba(255,236,193,.48)!important; border-radius:50%!important; color:#fff4d5!important; background:rgba(255,255,255,.1)!important; box-shadow:none!important; }
.single-boss-tile { min-height:232px; overflow:visible; }
.single-boss-tile-copy { min-width:0; padding-bottom:30px; }
.single-boss-tile-copy .single-reward { display:block; margin-top:8px; color:var(--yellow-single); font-size:.68rem; line-height:1.25; }
.single-objectives { display:grid; gap:2px; margin:7px 0 0; padding-left:16px; color:#d8b59b; font-size:.64rem; line-height:1.25; }
.single-difficulty-copy { display:block; margin-top:6px; color:#d8b59b; font-size:.72rem; letter-spacing:normal; }
.single-engine-badge { display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:5px 12px; border-radius:999px; border:1px solid rgba(244,205,62,.4); background:rgba(244,205,62,.14); color:var(--yellow-single); font-size:.64rem; font-weight:800; letter-spacing:.02em; text-transform:none; cursor:help; }
.single-last-rolls { width:min(560px,100%); display:flex; justify-content:space-between; gap:12px; margin:12px 0 4px; color:#dcb998; font-size:.68rem; }
.single-last-rolls span { max-width:48%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.single-combat-log { width:min(560px,100%); max-height:126px; overflow:auto; overscroll-behavior:contain; display:grid; gap:3px; margin:12px 0 0; padding:8px 10px 8px 26px; border:1px solid rgba(255,234,191,.12); border-radius:10px; color:#dcb998; background:rgba(0,0,0,.15); font-size:.64rem; line-height:1.35; }
.single-combat-log li::marker { color:var(--yellow-single); }
.single-combat-log .log-trio { color:#fff2c4; }
.single-result-summary { display:grid; gap:5px; margin:15px 0 0; padding-left:18px; color:#e5c5a5; text-align:left; font-size:.82rem; }
.single-result-summary li::marker { color:var(--yellow-single); }
.single-result-medal { display:inline-block; margin:14px 0 0; padding:6px 14px; border-radius:999px; border:1px solid rgba(244,205,62,.4); background:rgba(244,205,62,.14); color:var(--yellow-single); font-size:.72rem; font-weight:800; letter-spacing:.02em; }
.single-result-objectives { display:grid; gap:5px; margin:12px 0 0; padding-left:18px; color:#e5c5a5; text-align:left; font-size:.78rem; }
.single-result-objectives li::marker { color:var(--yellow-single); }
.single-boss-tile .single-objectives { max-height:54px; overflow:hidden; }
.single-tutorial { position:fixed; z-index:80; left:50%; top:50%; width:min(520px,calc(100vw - 28px)); transform:translate(-50%,-50%); padding:24px; border:1px solid rgba(255,236,193,.48); border-radius:18px; color:#fff7e4; background:linear-gradient(145deg,#531913,#2c0b0a); box-shadow:0 24px 80px rgba(0,0,0,.58); }
.single-tutorial h2 { margin:2px 0 14px; font-size:1.7rem; }
.single-tutorial-grid { display:grid; gap:8px; margin-bottom:18px; color:#edc8a4; font-size:.8rem; line-height:1.35; }
.single-tutorial-grid span { display:flex; gap:9px; align-items:flex-start; }
.single-tutorial-grid b { flex:0 0 24px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#3a130c; background:var(--yellow-single); }
@media (max-width:620px) {
  .single-boss-tile { min-height:205px; }
  .single-objectives { font-size:.58rem; }
  .single-last-rolls { font-size:.58rem; }
  .single-combat-log { max-height:100px; font-size:.58rem; }
}
@media (max-width:1100px) {
  .single-back, .single-boss-tile button, .boss-info-button, .single-roll-button, .single-tutorial button { min-height:44px; }
  .single-back, .single-boss-tile button, .boss-info-button, .single-roll-button, .single-tutorial button { touch-action:manipulation; }
  .single-boss-tile p, .single-boss-tile small, .single-objectives, .single-combat-log { font-size:12px; }
  .single-difficulty-copy { font-size:12px; }
  .single-engine-badge { font-size:11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}
body.reduced-effects *, body.reduced-effects *::before, body.reduced-effects *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
button:focus-visible, select:focus-visible, input:focus-visible, dialog:focus-visible, [tabindex]:focus-visible { outline:3px solid #fff3a5; outline-offset:3px; }
.single-boss-info-dialog { width:min(420px,calc(100vw - 28px)); border:1px solid rgba(255,236,193,.4); border-radius:20px; padding:28px; color:#fff6e2; background:#35100f; box-shadow:0 24px 80px rgba(0,0,0,.6); }
.single-boss-info-dialog::backdrop { background:rgba(10,2,2,.72); backdrop-filter:blur(7px); }
.single-boss-info-dialog .dialog-close { position:absolute; top:12px; right:12px; }
.dice-arena.can-roll, .single-dice-arena.can-roll { cursor:pointer; }
.single-dice-arena.can-roll .dice-physics { filter:drop-shadow(0 0 18px rgba(244,205,62,.25)); }
.single-status { display:block; }
@media (max-width:1100px) {
  body:not(.in-game) .lobby-panel.open { top:12px; max-height:calc(100svh - 24px); overflow-y:auto; overscroll-behavior:contain; transform:translateX(-50%); animation:none!important; }

  /* Follow Safari's visual viewport while the software keyboard is visible. */
  body.keyboard-open { min-height:0; height:var(--visual-viewport-height); overflow:hidden; overscroll-behavior:none; }
  body.keyboard-open:not(.in-game) .app { position:fixed; top:var(--visual-viewport-top); right:0; left:0; height:var(--visual-viewport-height); min-height:0; overflow:hidden; }
  body.keyboard-open:not(.in-game) .lobby-screen { width:100%; height:var(--visual-viewport-height); min-height:0; padding:0; overflow:hidden; }
  body.keyboard-open:not(.in-game) .lobby-panel.open { top:calc(var(--visual-viewport-top) + 8px); max-height:calc(var(--visual-viewport-height) - 16px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  body.keyboard-open:not(.in-game) .account-bubble { display:none; }
}
.single-boss-info-dialog h2 { margin:3px 0 10px; font-size:2rem; }
.single-boss-info-dialog p:not(.eyebrow) { color:#f0cfab; line-height:1.45; }
.single-boss-info-dialog small { color:#d7af8d; line-height:1.4; }
.single-streak-indicator { position:absolute; z-index:3; top:50%; transform:translateY(-50%); padding:7px 9px; border:1px solid rgba(255,240,190,.55); border-radius:999px; color:#35100c; background:#f6d33e; box-shadow:0 5px 14px rgba(22,4,4,.3); font-size:.58rem; font-weight:950; letter-spacing:.08em; white-space:nowrap; pointer-events:none; }
.single-streak-indicator.left { left:6px; }
.single-streak-indicator.right { right:6px; }
.dice-arena, .single-dice-arena { cursor:pointer; touch-action:manipulation; }
.single-arena.trio-pop, .center-stage.trio-pop { animation:trio-pop .65s cubic-bezier(.2,.8,.2,1); }
@keyframes trio-pop { 0% { transform:scale(1); filter:brightness(1); } 38% { transform:scale(1.045); filter:brightness(1.25) saturate(1.2); } 100% { transform:scale(1); filter:brightness(1); } }

/* Immortal Cock is a scrollable screen even though the lobby uses a locked canvas. */
body.single-player-open { overflow:hidden auto; }
body.single-player-open .single-player-screen {
  height:100dvh;
  min-height:100dvh;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}

@media (max-width:1100px) and (orientation:landscape) {
  body.single-duel-open { overflow:hidden; }
  body.single-duel-open .single-player-screen { overflow:hidden; padding-top:8px; padding-bottom:8px; }
  body.single-duel-open .single-duel-view { height:100%; display:flex; flex-direction:column; }
  body.single-duel-open .single-duel-head { flex:0 0 28px; margin-bottom:6px; }
  body.single-duel-open .single-duel-grid { flex:1; min-height:0; grid-template-columns:minmax(160px,28vw) minmax(0,1fr); gap:10px; }
  body.single-duel-open .single-boss-card { min-height:0; height:100%; overflow:hidden; padding:8px; }
  body.single-duel-open .single-boss-card img { height:78px; margin-bottom:4px; }
  body.single-duel-open .single-boss-card h2 { font-size:1.05rem; }
  body.single-duel-open .single-boss-card > p:not(.eyebrow) { line-height:1.15; }
  body.single-duel-open .single-perk { margin-top:6px; padding:6px 8px; }
  body.single-duel-open .single-arena { min-height:0; height:100%; padding:8px; }
  body.single-duel-open .single-last-rolls { margin:6px 0 2px; }
  body.single-duel-open .single-dice-arena { height:150px; min-height:150px; }
  body.single-duel-open .single-dice-arena .dice-physics { min-height:150px; }
  body.single-duel-open .single-result { min-height:18px; margin:6px 0; }
}

/* Final shop overrides: keep the catalog compact on every landscape mobile viewport. */
.shop-dialog { position:fixed; inset:0; width:100dvw; max-width:none; height:100dvh; max-height:none; margin:0; overflow:hidden; }
.shop-counter-art { padding:0; border-radius:0; background:transparent; box-shadow:none; }
.shop-preview-media { min-height:200px; height:200px; overflow:visible; border-radius:0; background:transparent; }
.shop-preview-media img { mix-blend-mode:normal; filter:drop-shadow(0 10px 9px rgba(32,8,3,.32)); }
.shop-preview-stamp { top:0; right:0; }
.shop-preview-dice,.shop-preview-static { min-height:200px; height:200px; }
.shop-static-avatar { width:130px; height:130px; }
.shop-static-frame { width:170px; height:170px; }
.shop-static-title { width:128px; height:76px; }
.shop-catalog-panel { display:block; min-width:0; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.shop-category-tabs { position:sticky; z-index:5; top:0; padding-top:5px; background:transparent; box-shadow:none; }
.shop-list { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:82px; align-content:start; max-height:none; padding:0 0 14px; overflow:visible; }
@media (max-width:1100px) {
  .shop-dialog { width:100dvw; height:100dvh; }
  .shop-layout { height:calc(100dvh - 94px); }
  .shop-category-tab { min-height:42px; font-size:.54rem; }
  .shop-category-tab span { font-size:.44rem; }
  .shop-primary-action,.shop-equip-action { min-height:42px; font-size:.56rem; }
  .shop-help { min-height:40px; }
  .shop-list { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:82px; align-content:start; max-height:none; padding:0 0 12px; overflow:visible; }
  .shop-item { min-height:82px; padding:6px; }
  .shop-item-art,.shop-mini-die,.shop-mini-avatar,.shop-mini-frame { width:48px; height:48px; }
  .shop-mini-title { width:48px; height:34px; }
  .shop-item-copy strong { font-size:.56rem; }
  .shop-item-copy small,.shop-item-copy em { font-size:.44rem; }
}
@media (max-width:760px) and (orientation:landscape) {
  .shop-list { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:80px; }
  .shop-item { min-height:80px; }
}
@media (max-width:1100px) and (orientation:landscape) {
  .shop-topbar { min-height:56px; }
  .shop-back { width:40px; height:40px; }
  .shop-balance { min-height:40px; }
  .shop-layout { height:calc(100dvh - 56px); grid-template-columns:minmax(200px,34%) minmax(0,1fr); }
  .shop-counter-art { width:min(100%,190px); }
  .shop-preview-media,.shop-preview-dice,.shop-preview-static { min-height:132px; height:132px; }
  .shop-static-avatar { width:112px; height:112px; border-radius:25px; }
  .shop-static-frame { width:128px; height:128px; }
  .shop-static-title { width:112px; height:66px; }
}
@media (max-width:700px) and (orientation:portrait) {
  body:not(.in-game) .app { visibility:visible; }
  body:not(.in-game) .orientation-lock { display:none; }
  .shop-topbar { min-height:60px; }
  .shop-back { width:42px; height:42px; }
  .shop-layout { height:calc(100dvh - 60px); grid-template-columns:1fr; grid-template-rows:minmax(220px,38%) minmax(0,1fr); }
  .shop-preview-panel { grid-template-columns:154px minmax(0,1fr); }
  .shop-counter-art { width:154px; }
  .shop-preview-media,.shop-preview-dice,.shop-preview-static { min-height:148px; height:148px; }
  .shop-static-avatar { width:126px; height:126px; border-radius:28px; }
  .shop-static-frame { width:144px; height:144px; }
  .shop-static-title { width:122px; height:70px; }
  .shop-category-tab { min-height:44px; font-size:.5rem; }
  .shop-list { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:84px; align-content:start; overflow:visible; }
  .shop-item { min-height:84px; }
  .shop-item-art,.shop-mini-die,.shop-mini-avatar,.shop-mini-frame { width:50px; height:50px; }
  .shop-mini-title { width:50px; height:36px; }
}

/* Final precedence overrides for the required landscape layout. */
.toast:not(.show) { visibility:hidden; opacity:0; }
.toast.show { visibility:visible; opacity:1; }
@media (max-width:1100px) and (orientation:landscape) {
  body.single-duel-open .single-duel-grid {
    grid-template-columns:minmax(150px,20vw) minmax(0,1fr) minmax(150px,20vw);
    grid-template-areas:"player arena boss";
    gap:8px;
  }
  body.single-duel-open .single-player-card { grid-area:player; width:auto; }
  body.single-duel-open .single-arena { grid-area:arena; width:auto; }
  body.single-duel-open .single-boss-card { grid-area:boss; width:auto; }
  body.single-duel-open .single-duel-head > * { min-width:0; }
  body.single-duel-open .single-duel-head .single-back { flex:0 0 auto; }
  body.single-duel-open .single-duel-difficulty { max-width:38%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width:1100px) and (orientation:portrait) {
  body .app { visibility:hidden!important; }
  body .orientation-lock { position:fixed; z-index:2000; inset:0; display:flex!important; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:28px; color:var(--paper); background:var(--bg-overlay); text-align:center; }
}

/* Boss Fight must win over the legacy rules above. */
body.single-duel-open .single-duel-head { justify-content:flex-start; gap:10px; }
body.single-duel-open .single-duel-head #single-duel-round { margin-right:auto; }
body.single-duel-open .single-contender-card .single-perk { min-height:0; max-height:none; flex:1; margin:2px 0 0; padding:5px 7px; overflow:auto; overscroll-behavior:contain; border-left:0; }
@media (max-width:1100px) and (orientation:landscape) {
  body.single-duel-open .single-duel-grid { gap:10px; grid-template-columns:minmax(155px,20vw) minmax(0,1fr) minmax(155px,20vw); }
  body.single-duel-open .single-duel-difficulty { max-width:32%; }
}

button.single-perk-item {
  position:relative;
  width:100%;
  padding-right:22px;
  color:inherit;
  background:transparent;
  border-right:0;
  border-bottom:0;
  border-left:0;
  text-align:left;
  cursor:pointer;
}
button.single-perk-item:hover,button.single-perk-item:focus-visible { background:rgba(244,205,62,.1); }
button.single-perk-item i { position:absolute; top:50%; right:3px; width:15px; height:15px; display:grid; place-items:center; transform:translateY(-50%); border:1px solid rgba(244,205,62,.5); border-radius:50%; color:var(--yellow-single); font-size:.46rem; font-style:normal; font-weight:950; }
.single-contender-card { position:relative; isolation:isolate; --perk-flash:var(--yellow-single); }
.single-player-card { --perk-flash:#a8ed58; }
.single-perk-toast { position:absolute; z-index:5; top:7px; left:50%; max-width:calc(100% - 18px); padding:4px 8px; overflow:hidden; border:1px solid color-mix(in srgb,var(--perk-flash) 78%,white); border-radius:999px; color:#201006; background:color-mix(in srgb,var(--perk-flash) 86%,white); box-shadow:0 4px 12px rgba(15,3,2,.22); font-size:.48rem; font-weight:1000; letter-spacing:.08em; line-height:1; text-overflow:ellipsis; white-space:nowrap; opacity:0; pointer-events:none; transform:translate(-50%,-4px) scale(.96); }
.single-contender-card.perk-activated { animation:single-perk-card-pulse .78s ease-out; }
.single-contender-card.perk-activated .single-perk { animation:single-perk-panel-pulse .78s ease-out; }
.single-contender-card.perk-activated .single-perk-toast { animation:single-perk-toast .9s ease-out both; }
@keyframes single-perk-card-pulse { 0%,100% { box-shadow:0 10px 24px rgba(20,3,3,.24); } 38% { border-color:var(--perk-flash); box-shadow:0 0 0 2px color-mix(in srgb,var(--perk-flash) 30%,transparent),0 8px 24px rgba(20,3,3,.3); } }
@keyframes single-perk-panel-pulse { 35% { background:color-mix(in srgb,var(--perk-flash) 18%,rgba(0,0,0,.2)); } }
@keyframes single-perk-toast { 0% { opacity:0; transform:translate(-50%,-4px) scale(.96); } 18%,72% { opacity:.96; transform:translate(-50%,0) scale(1); } 100% { opacity:0; transform:translate(-50%,2px) scale(.99); } }
@media (prefers-reduced-motion:reduce) { .single-contender-card.perk-activated,.single-contender-card.perk-activated .single-perk { animation:none!important; }.single-contender-card.perk-activated .single-perk-toast { opacity:.96; transform:translate(-50%,0); animation:none!important; } }
.single-difficulty select option:disabled { color:#8d8274; }
@media (max-width:1100px) and (orientation:landscape) {
  .single-ladder-view .single-difficulty { margin-left:auto!important; margin-right:-12px; }
}

/* Achievement rewards: one stable, compressible layout for desktop and mobile — columns shrink instead of overflowing the card. */
.achievement-reward { overflow:hidden; grid-template-columns:minmax(26px,40px) minmax(0,1fr) minmax(48px,76px); grid-template-rows:repeat(2,minmax(0,1fr)); min-height:58px; align-items:center; padding:4px 5px; }
.achievement-reward > .achievement-reward-art { grid-column:1; grid-row:1/3; width:100%; max-width:40px; aspect-ratio:1; box-sizing:border-box; display:grid; place-items:center; object-fit:contain; object-position:center; }
.achievement-reward > .achievement-reward-feed { border-radius:8px; background:rgba(217,170,52,.18); font-size:23px; line-height:1; }
.achievement-reward > .achievement-reward-art.shop-static-title { border-width:2px; border-radius:8px; font-size:.8rem; box-shadow:none; }
.achievement-reward > span:not(.achievement-reward-art) { grid-column:2; grid-row:1/3; align-self:center; min-width:0; overflow:hidden; }
.achievement-reward > button { grid-column:3; grid-row:1; min-width:0; width:100%; max-width:76px; min-height:26px; height:26px; padding:2px 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.achievement-reward > button:only-of-type { grid-row:1/3; }
.achievement-reward > button + button { grid-column:3; grid-row:2; min-height:26px; height:26px; }
.achievement-reward.locked > .achievement-reward-art:not(.achievement-reward-feed) { filter:grayscale(.85); }
@media (max-width:760px) and (orientation:landscape) {
  .achievement-reward { grid-template-columns:minmax(24px,32px) minmax(0,1fr) minmax(40px,60px); min-height:50px; }
  .achievement-reward > .achievement-reward-art { max-width:32px; }
  .achievement-reward > button { max-width:60px; }
}
.reward-preview-dialog #achievement-reward-preview .reward-preview-feed-icon { grid-row:1/5; width:150px; height:150px; display:grid; place-items:center; border-radius:18px; background:linear-gradient(145deg,#f7e2a0,#d39a35); font-size:76px; }
.reward-preview-dialog #achievement-reward-preview .shop-static-title { grid-row:1/5; width:150px; height:110px; font-size:2.2rem; }

.achievement-unlock-popup { position:fixed; z-index:1000; left:50%; bottom:calc(14px + env(safe-area-inset-bottom)); width:min(360px,calc(100% - 24px)); padding:9px 12px; border:1px solid #d9d9d9; border-radius:12px; color:#242424; background:#fff; box-shadow:0 8px 28px rgba(0,0,0,.24); pointer-events:none; transform:translate(-50%,12px); animation:achievement-unlock-in .28s ease-out both; }
.achievement-unlock-popup > div { display:flex; align-items:center; gap:10px; }
.achievement-unlock-icon { width:46px; height:46px; flex:0 0 46px; object-fit:contain; }
.achievement-unlock-popup small,.achievement-unlock-popup strong { display:block; }
.achievement-unlock-popup small { color:#777; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.achievement-unlock-popup strong { margin-top:2px; font-size:15px; }
@keyframes achievement-unlock-in { from { opacity:0; transform:translate(-50%,12px); } to { opacity:1; transform:translate(-50%,0); } }
@media (prefers-reduced-motion:reduce) { .achievement-unlock-popup { animation:none; transform:translateX(-50%); } }

/* Multiplayer V2: one scoped mobile-first foundation. */
body.multiplayer-v2 { width:100%; height:100dvh; min-height:0; overflow:hidden; background:#3b1711; }
body.multiplayer-v2 .app { width:100%; height:100dvh; min-height:0; visibility:visible!important; }
body.multiplayer-v2 .orientation-lock { display:none!important; }
body.multiplayer-v2 > .app > .topbar { display:none; }
body.multiplayer-v2 .table-screen,
body.multiplayer-v2 .game-table { width:100%; height:100dvh; min-height:0; padding:0; overflow:hidden; }
body.multiplayer-v2 .game-table { display:grid; grid-template:minmax(0,64px) minmax(0,1fr) minmax(0,112px) minmax(0,64px)/minmax(0,1fr); isolation:isolate; background:radial-gradient(circle at 50% 44%,rgba(203,78,47,.3),transparent 32%),linear-gradient(135deg,#7f251f,#a8382d 52%,#5a1818); }
body.multiplayer-v2 .game-table::after { display:block; inset:8px; border-color:rgba(255,219,151,.18); border-radius:16px; }
body.multiplayer-v2 .decorative-stack { display:none; }

body.multiplayer-v2 .player-seats { position:relative; z-index:7; inset:auto; grid-column:1; grid-row:1/5; min-width:0; min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:64px minmax(0,1fr) 112px 64px; gap:0 6px; padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left)); pointer-events:none; }
body.multiplayer-v2 .v2-opponent-strip { min-width:0; grid-column:1/-1; grid-row:1; display:flex; justify-content:center; gap:6px; overflow-x:auto; overflow-y:hidden; pointer-events:auto; scrollbar-width:none; }
body.multiplayer-v2 .v2-opponent-strip::-webkit-scrollbar { display:none; }
body.multiplayer-v2 .v2-seat { position:relative; inset:auto; width:auto; min-width:0; height:auto; margin:0; transform:none; pointer-events:auto; cursor:pointer; }
body.multiplayer-v2 .v2-seat.opponent { flex:1 1 0; display:grid; grid-template-columns:34px minmax(0,1fr) auto; grid-template-rows:34px 18px; gap:0 5px; align-self:start; min-width:0; min-height:56px; padding:5px 7px; border:1px solid rgba(75,33,22,.8); border-radius:10px; color:#38180f; background:linear-gradient(#fff0c5,#ddbd78); box-shadow:0 3px 0 rgba(46,13,10,.45); }
body.multiplayer-v2 .v2-seat.you { grid-column:1/-1; grid-row:3; width:min(580px,calc(100% - 16px)); height:100px; display:grid; grid-template-columns:52px minmax(0,1fr) auto; grid-template-rows:45px 38px; gap:1px 8px; align-self:end; justify-self:center; padding:8px 12px; border:2px solid #4a2117; border-radius:14px 14px 0 0; color:#34160e; background:linear-gradient(110deg,#fff1c5,#d9b369); box-shadow:0 -5px 18px rgba(47,10,7,.32),inset 0 0 0 2px rgba(255,248,216,.4); }
body.multiplayer-v2 .v2-seat.active { outline:3px solid #f5d03e; outline-offset:-2px; box-shadow:0 0 0 2px rgba(83,31,12,.85),0 0 22px rgba(245,208,62,.52); }
body.multiplayer-v2 .v2-seat.disconnected { opacity:.55; filter:grayscale(.65); }
body.multiplayer-v2 .v2-seat:focus-visible { outline:3px solid #fff4a5; outline-offset:2px; }
body.multiplayer-v2 .v2-seat .seat-avatar-wrap { position:relative; inset:auto; width:34px; height:34px; grid-row:1; grid-column:1; }
body.multiplayer-v2 .v2-seat.you .seat-avatar-wrap { width:52px; height:52px; grid-row:1/3; }
body.multiplayer-v2 .v2-seat .seat-avatar { width:100%; height:100%; display:grid; place-items:center; overflow:hidden; border:2px solid var(--player-frame,#744); border-radius:50%; background:#fff2c8; font-size:10px; }
body.multiplayer-v2 .v2-seat .seat-avatar-art { width:100%; height:100%; object-fit:cover; }
body.multiplayer-v2 .v2-seat .seat-frame-art { position:absolute; z-index:2; inset:-10%; width:120%; height:120%; object-fit:contain; pointer-events:none; }
body.multiplayer-v2 .v2-seat .seat-identity { min-width:0; display:flex; flex-direction:column; justify-content:center; }
body.multiplayer-v2 .v2-seat .seat-name { max-width:100%; overflow:hidden; color:#34170f; font-size:14px; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
body.multiplayer-v2 .v2-seat.opponent .seat-name { font-size:12px; }
body.multiplayer-v2 .v2-seat .seat-rank { align-self:flex-start; margin-top:2px; padding:1px 5px; border-radius:999px; color:#fff3c7; background:#792820; font-size:10px; font-weight:900; line-height:1.35; }
body.multiplayer-v2 .seat-powers { margin-top:2px; overflow:hidden; color:#76502d; font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
body.multiplayer-v2 .v2-seat .seat-score { min-width:52px; min-height:52px; display:grid; align-self:center; align-content:center; justify-items:center; padding:4px 6px; color:#fff5d7; background:#7a211c; font-family:Georgia,serif; line-height:1; text-align:center; text-shadow:0 1px 1px #42100d; }
body.multiplayer-v2 .v2-seat .seat-score span { color:#fff5d7; font-size:28px; font-weight:1000; }
body.multiplayer-v2 .v2-seat .seat-score small { margin-top:2px; color:#f2c96f; font-family:Inter,ui-sans-serif,sans-serif; font-size:8px; letter-spacing:.12em; }
body.multiplayer-v2 .v2-seat.opponent .seat-score { min-width:42px; min-height:42px; }
body.multiplayer-v2 .v2-seat.opponent .seat-score span { font-size:22px; }
body.multiplayer-v2 .v2-meters { grid-column:2/4; display:flex; align-items:center; gap:5px; min-width:0; overflow:hidden; }
body.multiplayer-v2 .v2-seat.you .v2-meters { grid-column:2/4; }
body.multiplayer-v2 .v2-meters > span { min-width:0; display:flex; align-items:center; gap:2px; color:#4c2816; font-size:12px; font-weight:950; white-space:nowrap; }
body.multiplayer-v2 .v2-seat.opponent .v2-meters > span { font-size:10px; }
body.multiplayer-v2 .v2-meters img { width:18px; height:18px; flex:0 0 18px; object-fit:contain; }
body.multiplayer-v2 .v2-seat.opponent .v2-meters img { width:14px; height:14px; flex-basis:14px; }
body.multiplayer-v2 .meter-chickens i { width:7px; height:7px; display:block; border:1px solid #704523; border-radius:50%; background:#f8edc4; }
body.multiplayer-v2 .meter-chickens i.happy { background:#f2c63d; }
body.multiplayer-v2 .meter-chickens i.sad { background:#798994; }

body.multiplayer-v2 .center-stage { position:relative; z-index:8; inset:auto; grid-column:1; grid-row:2/4; width:100%; min-width:0; min-height:0; display:grid; grid-template-rows:22px minmax(150px,1fr) 42px 22px; align-items:center; justify-items:center; padding:4px 12px 108px; transform:none; pointer-events:none; }
body.multiplayer-v2 .center-stage .mode-chip { position:static; align-self:start; min-height:22px; }
body.multiplayer-v2 .center-stage .dice-arena { order:initial; width:min(420px,80vw); height:100%; min-height:150px; max-height:330px; margin:0; overflow:visible; pointer-events:auto; }
body.multiplayer-v2 .center-stage .dice-physics { min-width:160px; min-height:160px; overflow:visible; border-radius:0; }
body.multiplayer-v2 .center-stage .result-copy { order:initial; min-height:40px; display:grid; align-content:center; margin:0; }
body.multiplayer-v2 .center-stage .result-copy strong { max-width:90vw; overflow:hidden; color:#fff5d6; font-size:clamp(17px,4vw,26px); text-overflow:ellipsis; white-space:nowrap; text-shadow:0 2px #501714; }
body.multiplayer-v2 .center-stage .result-detail { order:initial; min-height:20px; color:#d7f17b; font-size:14px; font-weight:950; }
body.multiplayer-v2 .center-stage .status-message { position:fixed; z-index:25; left:50%; bottom:calc(68px + env(safe-area-inset-bottom)); width:min(560px,90vw); margin:0; color:#fff1c9; font-size:12px; transform:translateX(-50%); }
body.multiplayer-v2 .mobile-round-tools { position:static; order:initial; pointer-events:auto; }
body.multiplayer-v2 .mobile-round-tools .close-room-button,
body.multiplayer-v2 .mobile-round-tools .leave-room-button { position:fixed!important; z-index:40; top:auto!important; right:auto!important; bottom:calc(10px + env(safe-area-inset-bottom))!important; left:max(8px,env(safe-area-inset-left))!important; width:44px; min-width:44px; height:44px; padding:0; overflow:hidden; color:transparent; transform:none!important; }
body.multiplayer-v2 .mobile-round-tools .close-room-button::after,
body.multiplayer-v2 .mobile-round-tools .leave-room-button::after { content:"×"; position:absolute; inset:0; display:grid; place-items:center; color:#fff1cd; font-size:24px; }
body.multiplayer-v2 .emote-dock { position:fixed!important; z-index:41; top:auto!important; right:max(8px,env(safe-area-inset-right))!important; bottom:calc(10px + env(safe-area-inset-bottom))!important; left:auto!important; transform:none!important; }
body.multiplayer-v2 .emote-toggle { width:44px; height:44px; }
body.multiplayer-v2 .emote-panel { right:0; bottom:50px; left:auto; }
body.multiplayer-v2 .emote-panel:not([hidden]) { position:fixed!important; z-index:75; top:70px!important; right:8px!important; bottom:auto!important; left:auto!important; width:196px; display:grid!important; grid-template-columns:repeat(4,44px); gap:3px; padding:6px; border:2px solid #74401f; border-radius:12px; background:#fff0c4; box-shadow:0 10px 24px rgba(35,8,5,.42); transform:none!important; }
body.multiplayer-v2 .emote-panel button { min-width:44px; width:44px; min-height:44px; height:44px; }
body.multiplayer-v2 .emote-panel button:last-child { grid-column:auto; font-size:8px; }
body.multiplayer-v2 .action-row { position:fixed; z-index:30; right:0; bottom:0; left:0; height:calc(64px + env(safe-area-inset-bottom)); display:grid; place-items:center; margin:0; padding:6px max(68px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(68px,env(safe-area-inset-left)); background:linear-gradient(#4b2015,#27100d); border-top:2px solid #bb7a35; pointer-events:auto; }
body.multiplayer-v2 .roll-button { width:min(360px,100%); min-height:50px; display:flex; align-items:center; justify-content:center; gap:9px; border:2px solid #5a280d; border-radius:12px; color:#3b190d; background:linear-gradient(#ffe374,#e9aa31); box-shadow:0 3px 0 #6c3518; font-size:16px; font-weight:1000; }
body.multiplayer-v2 .roll-button small { font-size:11px; opacity:.72; }
body.multiplayer-v2 .roll-button:disabled { color:#d8c8a5; background:#66523a; box-shadow:none; }
body.multiplayer-v2 .transform-button { position:absolute; right:max(8px,env(safe-area-inset-right)); bottom:calc(70px + env(safe-area-inset-bottom)); min-width:150px; min-height:48px; }

body.multiplayer-v2 .turn-choice-sheet { position:fixed; z-index:70; right:8px; bottom:calc(70px + env(safe-area-inset-bottom)); left:8px; width:min(620px,calc(100% - 16px)); max-height:calc(100dvh - 40px); margin:auto; padding:12px; overflow-y:auto; overscroll-behavior:contain; border:2px solid #5c2a18; border-radius:16px; color:#39170d; background:linear-gradient(120deg,#fff0c0,#dbaf65); box-shadow:0 12px 34px rgba(28,6,4,.5); pointer-events:auto; }
body.multiplayer-v2 .turn-choice-sheet[hidden] { display:none; }
body.multiplayer-v2 .turn-choice-sheet > div:first-child { display:flex; align-items:baseline; gap:8px; }
body.multiplayer-v2 .turn-choice-sheet h2 { flex:1; margin:0; font-family:Georgia,serif; font-size:18px; }
body.multiplayer-v2 .turn-choice-sheet .eyebrow { margin:0; color:#9b3a27; font-size:10px; }
body.multiplayer-v2 .turn-choice-sheet > div:first-child small { font-size:12px; font-weight:900; }
body.multiplayer-v2 .turn-choice-options { display:grid; grid-template-columns:repeat(2,minmax(120px,1fr)); gap:8px; margin-top:8px; }
body.multiplayer-v2 .turn-choice-options button { min-width:0; min-height:54px; display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 10px; border:2px solid #78361d; border-radius:10px; color:#3c190e; background:#fff5d6; text-align:left; }
body.multiplayer-v2 .turn-choice-options img { width:34px; height:34px; flex:0 0 34px; }
body.multiplayer-v2 .turn-choice-options strong,
body.multiplayer-v2 .turn-choice-options small { display:block; overflow-wrap:break-word; }
body.multiplayer-v2 .turn-choice-options strong { font-size:13px; }
body.multiplayer-v2 .turn-choice-options small { margin-top:2px; color:#745138; font-size:11px; }

body.multiplayer-v2 .waiting-room { position:fixed; z-index:80; inset:0; display:block; padding:0; overflow:hidden; background:linear-gradient(rgba(57,20,11,.82),rgba(38,12,8,.92)),url("./assets/lobby-table-v1.png") center/cover; backdrop-filter:none; }
body.multiplayer-v2 .waiting-room[hidden] { display:none; }
body.multiplayer-v2 .waiting-shell { width:100%; height:100dvh; min-height:0; display:grid; grid-template-rows:48px minmax(0,1fr) calc(60px + env(safe-area-inset-bottom)); color:#fff0cb; }
body.multiplayer-v2 .waiting-appbar { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left)); border-bottom:1px solid rgba(255,226,170,.24); background:rgba(43,13,8,.9); }
body.multiplayer-v2 .waiting-appbar button { width:44px; height:44px; padding:0; border:0; color:#fff0c9; background:transparent; font-size:23px; }
body.multiplayer-v2 .waiting-appbar > div { min-width:0; display:flex; align-items:center; justify-content:center; gap:7px; }
body.multiplayer-v2 .waiting-appbar small { font-size:9px; letter-spacing:.14em; }
body.multiplayer-v2 .waiting-appbar strong { color:#f5cf4c; font-family:Georgia,serif; font-size:19px; letter-spacing:.12em; }
body.multiplayer-v2 .waiting-appbar span { display:flex; align-items:center; gap:4px; font-size:10px; }
body.multiplayer-v2 .waiting-appbar span i { width:7px; height:7px; border-radius:50%; background:#9ed454; box-shadow:0 0 8px #9ed454; }
body.multiplayer-v2 .waiting-grid { min-width:0; min-height:0; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:10px; padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left)); overflow:hidden; }
body.multiplayer-v2 .waiting-invite,
body.multiplayer-v2 .waiting-roster { min-width:0; min-height:0; border:2px solid #6c341c; border-radius:14px; color:#3b1b11; background:linear-gradient(110deg,rgba(255,241,197,.98),rgba(216,173,99,.98)); box-shadow:0 8px 20px rgba(29,6,4,.32); }
body.multiplayer-v2 .waiting-invite { display:grid; grid-template-columns:minmax(0,1fr) 96px; grid-template-rows:1fr auto; gap:5px 12px; align-items:center; padding:10px 12px; }
body.multiplayer-v2 .waiting-invite h2,
body.multiplayer-v2 .waiting-roster h2 { margin:2px 0; font-family:Georgia,serif; font-size:clamp(18px,3vw,25px); line-height:1; }
body.multiplayer-v2 .waiting-invite p { margin:3px 0; color:#6e472f; font-size:12px; }
body.multiplayer-v2 .invite-qr { grid-column:2; grid-row:1/3; width:96px; height:96px; display:grid; place-items:center; padding:4px; border:2px solid #6b351e; border-radius:9px; background:#fff; }
body.multiplayer-v2 .invite-qr img { width:88px; height:88px; }
body.multiplayer-v2 .invite-actions { display:flex; gap:7px; }
body.multiplayer-v2 .invite-actions button { min-width:0; min-height:44px; flex:1; padding:5px 9px; border:2px solid #6b3019; border-radius:8px; color:#3d1a0e; background:#f8d25e; font-size:12px; font-weight:950; }
body.multiplayer-v2 .invite-actions button.has-notice { position:relative; border-color:#e8543f; }
body.multiplayer-v2 .invite-actions button.has-notice::after { content:""; position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#e8543f; box-shadow:0 0 6px rgba(232,84,63,.7); }
body.multiplayer-v2 .waiting-roster { display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:8px 10px; }
body.multiplayer-v2 .waiting-roster-head { display:flex; align-items:flex-end; gap:8px; }
body.multiplayer-v2 .waiting-roster-head > div { flex:1; }
body.multiplayer-v2 .waiting-roster-head small { color:#79513a; font-size:10px; }
/* Overrides the base .waiting-players 2-column grid (1fr 1fr): splitting the
   roster into two columns halves the width available to each card, and the
   name column was already the squeezed leftover after avatar+badge+status
   (measured: ~42px available for a 13-char name needing ~93px). A single
   column gives every name the full roster width; the list already scrolls
   (overflow:auto above) if more players don't fit vertically. */
body.multiplayer-v2 .waiting-players { min-height:0; display:grid; grid-template-columns:1fr; align-content:start; gap:3px; margin:5px 0; overflow:auto; overscroll-behavior:contain; }
body.multiplayer-v2 .waiting-player { min-height:44px; display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; align-items:center; gap:6px; padding:3px 6px; border:1px solid rgba(103,52,27,.32); border-radius:8px; background:rgba(255,249,224,.58); }
body.multiplayer-v2 .waiting-player > i { width:32px; height:32px; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:#fff1c9; }
body.multiplayer-v2 .waiting-player img { width:100%; height:100%; object-fit:cover; }
body.multiplayer-v2 .waiting-player strong { min-width:0; overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
body.multiplayer-v2 .waiting-badge { padding:2px 5px; border-radius:99px; color:#fff0ce; background:#7a2920; font-size:8px; font-weight:950; }
body.multiplayer-v2 .waiting-badge.ready { color:#294313; background:#add85d; }
body.multiplayer-v2 .waiting-player small { min-width:56px; font-size:9px; font-weight:850; }
body.multiplayer-v2 .waiting-player small::before { content:""; width:6px; height:6px; display:inline-block; margin-right:4px; border-radius:50%; background:#94cb4b; }
body.multiplayer-v2 .waiting-player small.offline::before { background:#a04a3b; }
body.multiplayer-v2 .waiting-settings { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
body.multiplayer-v2 .waiting-settings label { display:grid; gap:2px; color:#70442a; font-size:10px; font-weight:900; }
body.multiplayer-v2 .waiting-settings select { width:100%; min-height:44px; border:2px solid #754124; border-radius:8px; color:#35150d; background:#fff4d1; font-size:13px; font-weight:900; }
body.multiplayer-v2 .waiting-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:6px max(12px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); border-top:2px solid #9b5b2b; background:rgba(49,17,10,.96); }
body.multiplayer-v2 .waiting-actions button { min-height:48px; padding:7px 16px; border:2px solid #e7b63c; border-radius:10px; color:#fff0c9; background:#67261d; font-size:13px; font-weight:950; }
body.multiplayer-v2 .waiting-actions .start-match { width:min(360px,55vw); color:#3a170b; background:linear-gradient(#ffe270,#e6aa31); }
body.multiplayer-v2 .waiting-actions .start-match:disabled { color:#c8b99b; background:#5c4d3c; border-color:#77654c; }

body.multiplayer-v2 .perk-dialog { top:auto; right:0; bottom:0; left:0; width:min(620px,100%); max-height:min(72dvh,520px); margin:auto; padding:24px max(18px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); border-radius:18px 18px 0 0; transform:none; }
body.multiplayer-v2 button:focus-visible,
body.multiplayer-v2 select:focus-visible { outline:3px solid #fff3a1; outline-offset:2px; }

@media (max-width:700px) and (orientation:portrait) {
  body.multiplayer-v2 .waiting-shell { grid-template-rows:48px minmax(0,1fr) calc(64px + env(safe-area-inset-bottom)); }
  body.multiplayer-v2 .waiting-grid { grid-template-columns:1fr; grid-template-rows:auto minmax(210px,1fr); overflow:auto; padding-bottom:10px; }
  body.multiplayer-v2 .waiting-invite { min-height:150px; }
  body.multiplayer-v2 .waiting-roster { min-height:230px; }
  body.multiplayer-v2 .player-seats { grid-template-rows:64px minmax(0,1fr) 112px 64px; gap:0 3px; }
  body.multiplayer-v2 .v2-seat.opponent { grid-template-columns:28px minmax(0,1fr) auto; padding:5px 4px; }
  body.multiplayer-v2 .v2-seat.opponent .seat-avatar-wrap { width:28px; height:28px; }
  body.multiplayer-v2 .v2-seat.opponent .seat-rank { max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.multiplayer-v2 .v2-seat.opponent .v2-meters { gap:3px; }
  body.multiplayer-v2 .v2-seat.opponent .v2-meters img { display:none; }
  body.multiplayer-v2 .center-stage { grid-row:2/4; padding-bottom:108px; }
  body.multiplayer-v2 .center-stage .dice-arena { width:min(360px,94vw); max-height:380px; }
  body.multiplayer-v2 .emote-panel:not([hidden]) { top:70px!important; right:auto!important; left:50%!important; width:min(382px,calc(100vw - 4px)); grid-template-columns:repeat(8,44px); justify-content:center; gap:2px; padding:4px; transform:translateX(-50%)!important; }
}

@media (max-width:1100px) and (orientation:landscape) {
  body.multiplayer-v2 .waiting-grid { grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
  body.multiplayer-v2 .center-stage { grid-template-rows:20px minmax(120px,1fr) 34px 18px; padding-bottom:102px; }
  body.multiplayer-v2 .center-stage .dice-arena { width:min(440px,58vw); min-height:120px; max-height:250px; }
  body.multiplayer-v2 .v2-seat.you { width:min(530px,65vw); }
}

@media (min-width:1101px) {
  body.multiplayer-v2 .waiting-grid { width:min(980px,100%); justify-self:center; padding-top:28px; padding-bottom:28px; }
  body.multiplayer-v2 .waiting-actions { justify-content:center; }
  body.multiplayer-v2 .player-seats { padding-right:24px; padding-left:24px; }
  body.multiplayer-v2 .v2-seat.opponent { max-width:340px; width:100%; justify-self:center; }
}

/* V2 battle layout: explicit header, battle zone and footer. */
body.multiplayer-v2 .game-table {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
}

body.multiplayer-v2 .game-rules {
  position:relative;
  z-index:20;
  inset:auto;
  grid-column:1;
  grid-row:1;
  justify-self:center;
  width:fit-content;
  max-width:calc(100vw - max(24px,env(safe-area-inset-left)) - max(24px,env(safe-area-inset-right)));
  min-height:30px;
  margin:calc(5px + env(safe-area-inset-top)) auto 3px;
  padding:6px clamp(10px,2.2vw,18px);
  overflow-x:auto;
  overflow-y:hidden;
  color:#fff4d1;
  border:1px solid rgba(255,232,184,.52);
  border-radius:999px;
  background:rgba(54,20,15,.86);
  font-size:clamp(9px,1.45vw,13px);
  font-weight:950;
  letter-spacing:.07em;
  line-height:1;
  text-overflow:clip;
  white-space:nowrap;
  scrollbar-width:none;
  pointer-events:auto;
}
body.multiplayer-v2 .game-rules::-webkit-scrollbar { display:none; }

body.multiplayer-v2 .battle-layout {
  position:relative;
  z-index:5;
  grid-column:1;
  grid-row:2;
  min-width:0;
  min-height:0;
  display:grid;
  overflow:hidden;
}
body.multiplayer-v2 .battle-layout .decorative-stack { display:none; }
body.multiplayer-v2 .player-seats {
  position:static;
  z-index:auto;
  inset:auto;
  min-width:0;
  min-height:0;
  display:contents;
  padding:0;
  pointer-events:none;
}

body.multiplayer-v2 .v2-opponent-strip {
  min-width:0;
  min-height:0;
  display:flex;
  gap:6px;
  padding:2px;
  overflow:auto hidden;
  pointer-events:auto;
  scrollbar-width:none;
}
body.multiplayer-v2 .v2-opponent-strip::-webkit-scrollbar { display:none; }

body.multiplayer-v2 .v2-seat.you,
body.multiplayer-v2 .v2-seat.opponent {
  position:relative;
  inset:auto;
  min-width:0;
  min-height:76px;
  height:76px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 50px;
  grid-template-rows:44px 20px;
  column-gap:8px;
  row-gap:0;
  align-self:center;
  margin:0;
  padding:4px 7px;
  border:2px solid #4a2117;
  border-radius:13px;
  color:#34160e;
  background:linear-gradient(110deg,#fff1c5,#d9b369);
  box-shadow:0 4px 0 rgba(46,13,10,.42),inset 0 0 0 1px rgba(255,248,216,.45);
  transform:none;
  pointer-events:auto;
}
body.multiplayer-v2 .v2-seat.you { width:100%; }
body.multiplayer-v2 .v2-seat.opponent { width:100%; max-width:none; flex:0 0 auto; }
body.multiplayer-v2 .v2-seat.you::after { top:-6px; right:8px; }
body.multiplayer-v2 .v2-seat .seat-avatar-wrap,
body.multiplayer-v2 .v2-seat.you .seat-avatar-wrap,
body.multiplayer-v2 .v2-seat.opponent .seat-avatar-wrap {
  width:42px;
  height:42px;
  grid-column:1;
  grid-row:1;
  align-self:center;
}
body.multiplayer-v2 .v2-seat .seat-identity {
  grid-column:2;
  grid-row:1;
  min-width:0;
  align-self:center;
}
body.multiplayer-v2 .v2-seat .seat-name,
body.multiplayer-v2 .v2-seat.opponent .seat-name {
  max-width:100%;
  overflow:hidden;
  font-size:clamp(12px,1.8vw,15px);
  line-height:1.05;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.multiplayer-v2 .v2-seat .seat-rank {
  max-width:100%;
  margin-top:2px;
  overflow:hidden;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.multiplayer-v2 .seat-powers { display:none; }
body.multiplayer-v2 .v2-seat .seat-score,
body.multiplayer-v2 .v2-seat.opponent .seat-score {
  grid-column:3;
  grid-row:1;
  align-self:center;
  min-width:44px;
  width:44px;
  min-height:44px;
  height:44px;
  padding:4px;
}
body.multiplayer-v2 .v2-seat .seat-score span,
body.multiplayer-v2 .v2-seat.opponent .seat-score span { font-size:26px; }
body.multiplayer-v2 .v2-seat .v2-meters,
body.multiplayer-v2 .v2-seat.you .v2-meters,
body.multiplayer-v2 .v2-seat.opponent .v2-meters {
  grid-column:1/4;
  grid-row:2;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  overflow:hidden;
}
body.multiplayer-v2 .v2-seat .v2-meters > span,
body.multiplayer-v2 .v2-seat.opponent .v2-meters > span { gap:1px; font-size:10px; }
body.multiplayer-v2 .v2-seat .v2-meters img,
body.multiplayer-v2 .v2-seat.opponent .v2-meters img { width:14px; height:14px; flex:0 0 14px; }
body.multiplayer-v2 .v2-seat .meter-chickens i { width:6px; height:6px; flex:0 0 6px; }

body.multiplayer-v2 .center-stage {
  position:relative;
  z-index:8;
  inset:auto;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:center;
  align-items:center;
  justify-items:center;
  gap:3px;
  padding:0;
  overflow:hidden;
  text-align:center;
  transform:none;
  pointer-events:none;
}
body.multiplayer-v2 .center-stage .dice-arena {
  width:var(--v2-dice-size);
  height:var(--v2-dice-size);
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  align-self:center;
  margin:0;
  overflow:hidden;
  pointer-events:auto;
}
body.multiplayer-v2 .center-stage .dice-physics {
  inset:0;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border-radius:18px;
}
body.multiplayer-v2 .center-stage .dice-physics canvas {
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
body.multiplayer-v2 .center-stage .result-copy {
  min-height:0;
  display:block;
  margin:3px 0 0;
}
body.multiplayer-v2 .center-stage .result-copy strong {
  max-width:min(94vw,520px);
  margin:0;
  overflow:hidden;
  font-size:clamp(18px,4.5vw,28px);
  line-height:1.05;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.multiplayer-v2 .center-stage .result-detail {
  min-height:17px;
  margin:0;
  font-size:clamp(12px,3.2vw,16px);
  line-height:1.1;
}

body.multiplayer-v2 .game-footer {
  position:relative;
  z-index:32;
  grid-column:1;
  grid-row:3;
  min-width:0;
  min-height:calc(62px + env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:52px minmax(0,360px) 52px;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  border-top:2px solid #bb7a35;
  background:linear-gradient(#4b2015,#27100d);
}
body.multiplayer-v2 .mobile-round-tools {
  position:static;
  min-width:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  margin:0;
  pointer-events:auto;
}
body.multiplayer-v2 .mobile-round-tools .close-room-button,
body.multiplayer-v2 .mobile-round-tools .leave-room-button {
  position:relative!important;
  inset:auto!important;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  overflow:hidden;
  color:transparent;
  transform:none!important;
}
body.multiplayer-v2 .action-row {
  position:static;
  inset:auto;
  width:100%;
  height:auto;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  justify-self:center;
  gap:6px;
  margin:0;
  padding:0;
  border:0;
  background:none;
  pointer-events:auto;
}
body.multiplayer-v2 .roll-button {
  width:100%;
  min-width:0;
  min-height:46px;
  padding:5px 12px;
  font-size:clamp(13px,2.5vw,16px);
}
body.multiplayer-v2 .roll-button small { font-size:10px; }
body.multiplayer-v2 .transform-button {
  position:static;
  inset:auto;
  min-width:0;
  min-height:44px;
  transform:none;
}
body.multiplayer-v2 .action-row .status-message {
  position:static;
  grid-column:1/-1;
  width:auto;
  margin:0;
  color:#fff1c9;
  font-size:10px;
  line-height:1;
  transform:none;
}
body.multiplayer-v2 .action-row .status-message:empty { display:none; }
body.multiplayer-v2 .action-row .status-message:not(:empty) { display:block; }
body.multiplayer-v2 .emote-dock {
  position:relative!important;
  z-index:41;
  inset:auto!important;
  justify-self:end;
  transform:none!important;
}
body.multiplayer-v2 .emote-toggle { width:44px; height:44px; }
body.multiplayer-v2 .emote-panel:not([hidden]) {
  position:absolute!important;
  z-index:75;
  top:auto!important;
  right:0!important;
  bottom:calc(100% + 8px)!important;
  left:auto!important;
  width:196px;
  transform:none!important;
}
body.multiplayer-v2 .turn-choice-sheet { bottom:calc(70px + env(safe-area-inset-bottom)); }

@media (orientation:portrait) {
  body.multiplayer-v2 { --v2-dice-size:clamp(178px,58vw,236px); }
  body.multiplayer-v2 .battle-layout {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"opponents" "arena" "local";
    gap:4px;
    padding:0 max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left));
  }
  body.multiplayer-v2 .v2-opponent-strip {
    grid-area:opponents;
    justify-content:center;
    align-items:center;
    scroll-snap-type:x mandatory;
  }
  body.multiplayer-v2 .v2-opponent-strip[data-count="1"] .v2-seat.opponent { width:min(100%,360px); }
  body.multiplayer-v2 .v2-opponent-strip[data-count="2"],
  body.multiplayer-v2 .v2-opponent-strip[data-count="3"] { justify-content:flex-start; }
  body.multiplayer-v2 .v2-opponent-strip[data-count="2"] .v2-seat.opponent,
  body.multiplayer-v2 .v2-opponent-strip[data-count="3"] .v2-seat.opponent { width:min(230px,62vw); scroll-snap-align:start; }
  body.multiplayer-v2 .v2-seat.you {
    grid-area:local;
    width:min(100%,430px);
    justify-self:center;
  }
  body.multiplayer-v2 .center-stage { grid-area:arena; }
  body.multiplayer-v2 .center-stage .result-copy strong { max-width:92vw; }
  body.multiplayer-v2 .game-footer { grid-template-columns:48px minmax(0,1fr) 48px; }
}

@media (orientation:landscape) {
  body.multiplayer-v2 { --v2-dice-size:clamp(138px,42vh,190px); }
  body.multiplayer-v2 .battle-layout {
    grid-template-columns:clamp(205px,27vw,255px) minmax(180px,1fr) clamp(205px,27vw,255px);
    grid-template-rows:minmax(0,1fr);
    grid-template-areas:"local arena opponents";
    align-items:center;
    gap:clamp(8px,2vw,24px);
    padding:2px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));
  }
  body.multiplayer-v2 .v2-seat.you {
    position:relative;
    top:auto;
    left:auto;
    grid-area:local;
    width:100%;
    height:76px;
    align-self:center;
    transform:none;
    grid-template-columns:36px minmax(0,1fr) 38px;
    column-gap:6px;
    padding:4px 6px;
  }
  /* Same rationale as the opponent seat above: the shared base rule sizes
     avatar/score for a wider layout than this narrow "local" column
     actually has, truncating the name. */
  body.multiplayer-v2 .v2-seat.you .seat-avatar-wrap { width:36px; height:36px; }
  body.multiplayer-v2 .v2-seat.you .seat-score { min-width:38px; width:38px; min-height:38px; height:38px; padding:2px; }
  body.multiplayer-v2 .v2-seat.you .seat-score span { font-size:18px; }
  body.multiplayer-v2 .v2-seat.you .seat-name { font-size:clamp(11px,1.6vw,13px); }
  body.multiplayer-v2 .v2-opponent-strip {
    position:static;
    inset:auto;
    grid-area:opponents;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    overflow:hidden auto;
  }
  body.multiplayer-v2 .v2-opponent-strip .v2-seat.opponent { width:100%; min-height:76px; height:76px; max-height:none; flex:0 0 76px; grid-template-columns:36px minmax(0,1fr) 38px; column-gap:6px; padding:4px 6px; }
  /* The shared .v2-seat.you/.opponent rule sizes the avatar/score for the
     roomier "you" seat (44px/44px). In this narrow opponents column that
     leaves too little room for the name (measured: ~75px available for a
     13-char name needing ~99px, truncating it) — shrink just the opponent
     avatar/score badges here to give the name column real breathing room. */
  body.multiplayer-v2 .v2-opponent-strip .v2-seat.opponent .seat-avatar-wrap { width:36px; height:36px; }
  body.multiplayer-v2 .v2-opponent-strip .v2-seat.opponent .seat-score { min-width:38px; width:38px; min-height:38px; height:38px; padding:2px; }
  body.multiplayer-v2 .v2-opponent-strip .v2-seat.opponent .seat-score span { font-size:18px; }
  body.multiplayer-v2 .v2-opponent-strip .v2-seat.opponent .seat-name { font-size:clamp(11px,1.6vw,13px); }
  body.multiplayer-v2 .center-stage { grid-area:arena; }
  body.multiplayer-v2 .center-stage .result-copy strong { max-width:100%; font-size:clamp(17px,3.2vw,25px); }
  body.multiplayer-v2 .center-stage .result-detail { font-size:clamp(11px,2vw,14px); }
  body.multiplayer-v2 .game-footer { grid-template-columns:48px minmax(220px,320px) 48px; justify-content:space-between; }
}

@media (max-height:500px) and (orientation:landscape) {
  body.multiplayer-v2 { --v2-dice-size:clamp(124px,38vh,154px); }
  body.multiplayer-v2 .game-rules { min-height:28px; margin-top:calc(3px + env(safe-area-inset-top)); padding-block:5px; }
  body.multiplayer-v2 .battle-layout { grid-template-columns:clamp(184px,25vw,230px) minmax(170px,1fr) clamp(184px,25vw,230px); gap:clamp(6px,1.4vw,14px); }
  body.multiplayer-v2 .v2-seat.you,
  body.multiplayer-v2 .v2-seat.opponent,
  body.multiplayer-v2 .v2-opponent-strip .v2-seat.opponent { min-height:76px; height:76px; flex-basis:76px; }
  body.multiplayer-v2 .game-footer { min-height:calc(58px + env(safe-area-inset-bottom)); padding-top:4px; padding-bottom:calc(4px + env(safe-area-inset-bottom)); }
  body.multiplayer-v2 .roll-button { min-height:44px; }
}

/* Multiplayer menus: fixed exits, contained scrolling and persistent choices. */
body.multiplayer-v2 dialog { overscroll-behavior:contain; }
body.multiplayer-v2 .rules-dialog,
body.multiplayer-v2 .winner-dialog,
body.multiplayer-v2 .perk-dialog {
  max-width:calc(100dvw - 16px);
  max-height:calc(100dvh - 16px);
  overflow:hidden;
}
body.multiplayer-v2 .rules-dialog[open] {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
body.multiplayer-v2 .rules-dialog header {
  position:relative;
  z-index:2;
  flex:0 0 auto;
  background:#181c1c;
}
body.multiplayer-v2 .rules-grid {
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
}

body.multiplayer-v2 .winner-dialog[open] {
  width:min(430px,calc(100dvw - 16px));
  display:grid;
  gap:14px;
  padding:22px;
  overflow:hidden;
}
body.multiplayer-v2 .winner-heading > p { margin:8px 0 0; }
body.multiplayer-v2 .winner-star { margin-bottom:12px; }
body.multiplayer-v2 .winner-dialog.defeat .winner-star { color:#fff1d2; background:#7a211c; }
body.multiplayer-v2 .winner-controls { min-width:0; }
body.multiplayer-v2 .rematch-config { margin-top:0; }
body.multiplayer-v2 .winner-actions { display:grid; gap:8px; }
body.multiplayer-v2 .winner-dialog .winner-actions button { width:100%; min-height:44px; margin:0; }
body.multiplayer-v2 .winner-exit {
  border:1px solid rgba(255,255,255,.24);
  border-radius:10px;
  color:#fff0d0;
  background:#6f251f;
  font-size:13px;
  font-weight:950;
}

body.multiplayer-v2 .perk-dialog[open] {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  padding:0;
  overflow:hidden;
}
body.multiplayer-v2 .perk-dialog-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:20px max(18px,env(safe-area-inset-right)) 14px max(18px,env(safe-area-inset-left));
  border-bottom:1px solid rgba(255,255,255,.1);
  background:#181c1c;
}
body.multiplayer-v2 .perk-dialog-head > div { min-width:0; }
body.multiplayer-v2 .perk-dialog .perk-close {
  position:static;
  flex:0 0 38px;
  width:38px;
  height:38px;
}
body.multiplayer-v2 .perk-dialog #perk-player { margin-right:0; }
body.multiplayer-v2 .perk-dialog-body {
  min-height:0;
  padding:0 max(18px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  overflow:auto;
  overscroll-behavior:contain;
}

body.multiplayer-v2 .turn-choice-sheet {
  max-height:calc(100dvh - 82px - env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
}
body.multiplayer-v2 .turn-choice-sheet.required-choice {
  border-color:#b88616;
  box-shadow:0 0 0 3px rgba(245,207,76,.3),0 12px 34px rgba(28,6,4,.55);
}

body.multiplayer-v2 .waiting-players {
  grid-auto-rows:minmax(32px,44px);
  overflow:hidden;
  overscroll-behavior:none;
}
body.multiplayer-v2 .waiting-player { min-height:32px; height:100%; }

@media (max-width:700px) and (orientation:portrait) {
  body.multiplayer-v2 .waiting-grid {
    grid-template-rows:minmax(140px,.8fr) minmax(210px,1.2fr);
    overflow:hidden;
  }
}

@media (max-height:500px) and (orientation:landscape) {
  body.multiplayer-v2 .waiting-player > i { width:27px; height:27px; }
  body.multiplayer-v2 .waiting-settings select { min-height:36px; }
  body.multiplayer-v2 .winner-dialog[open] {
    width:min(620px,calc(100dvw - 16px));
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    align-items:center;
    gap:18px;
    padding:16px 18px;
  }
  body.multiplayer-v2 .winner-star { width:48px; height:48px; margin-bottom:8px; }
  body.multiplayer-v2 .winner-dialog h2 { font-size:1.55rem; }
  body.multiplayer-v2 .winner-heading > p { margin-top:5px; }
  body.multiplayer-v2 .rematch-status { min-height:15px; margin-top:6px; }
}

/* ==========================================================================
   Round Boss (multiplayer epilogue) — server.js startBossRound /
   online-client.js renderBossRound/renderSeats/bossRoundCardElement. This is
   a STATE of the existing multiplayer table (room.status === "boss-round"),
   not a separate screen: the normal HUD keeps running (.player-seats,
   #mode-chip, .dice-arena + #dice-physics with the SAME PolloDiceRenderer
   instance normal rolls use, .result-copy, #turn-choice-sheet,
   .action-row/#roll-button).

   Layout: BOSS ALONE on the right ("opponents" grid-area, .v2-opponent-strip
   — holds only the boss card), ALL attackers (viewer included) on the left
   in a NEW .v2-local-strip that reuses .v2-opponent-strip's proven
   multi-item flex/scroll behavior but overrides grid-area back to "local"
   (where the single "you" seat normally lives) — see renderSeats. Riding
   the SAME proven, count-aware flex layout (rather than independently
   guessing a fixed screen position) avoids the overlap bugs of two earlier
   attempts. The boss-player's own seat is hidden entirely from the roster
   (renderSeats filters them out — they're not "a player" anymore, they ARE
   the boss). Every attacker seat is styled as the normal SMALL multiplayer
   ".v2-seat.opponent" card (with score swapped for that attacker's own
   individual trio dots, .seat-boss-round-trios, since the fight is
   INDIVIDUAL — server.js duelsByAttacker: one independent duel per
   attacker, not a shared "team" pool) — while the boss's own card is
   deliberately LARGE and detailed instead, explicitly modeled on
   single-player's own .single-boss-card (big portrait, perks listed below
   with effect text via the same renderPerkList/.single-perk-item markup
   single-player already uses for this). Still just a card inside the
   existing multiplayer table, not a reuse of the single-player screen. */
.v2-opponent-strip.v2-local-strip { grid-area: local !important; }

.boss-round-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  overflow: hidden auto;
  overscroll-behavior: contain;
  text-align: center;
  color: #fff0d1;
  background: linear-gradient(160deg,#5a1f18,#2a0d09);
  border: 1px solid rgba(255,234,191,.3);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(20,3,3,.24);
}
.boss-round-card .eyebrow { margin: 0; padding: 1px 8px; border-radius: 999px; background: #792820; color: #fff3c7; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.boss-round-card h2 { max-width: 100%; margin: 4px 0 2px; overflow: hidden; font-family: Georgia,serif; font-size: clamp(15px,2.4vw,20px); text-overflow: ellipsis; white-space: nowrap; }
.boss-round-card-image { width: 100%; height: min(30vh,180px); margin: 2px 0; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.boss-round-card-controller { display: block; overflow: hidden; color: #dcb998; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.boss-round-card-trios { margin: 6px 0; color: var(--yellow); font-size: clamp(15px,2.6vw,20px); letter-spacing: .1em; }
.boss-round-card-perks { width: 100%; min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; text-align: left; }

/* Boss perk-choice options reuse #turn-choice-sheet/.turn-choice-options
   verbatim (see renderBossPerkChoiceSheet) — the only addition is a disabled
   state for bystanders (only the current attacker may choose) and a bit of
   icon sizing since these buttons use an emoji glyph instead of an <img>. */
.turn-choice-options button:disabled { opacity: .55; cursor: not-allowed; }
.boss-perk-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; font-size: 22px; line-height: 1; }

/* Individual trio-dot readout swapped in for .seat-score on each attacker's
   own (small, normal-multiplayer-styled) seat during a boss round — same
   slot/sizing as the normal points readout, just dots instead of a number
   so it reads as "progress toward the boss", not a score. */
.seat-boss-round-trios span { font-size: .78em; letter-spacing: .04em; }
.seat-boss-round-trios small { color: var(--yellow); }

@media (orientation:landscape) {
  .v2-opponent-strip.v2-local-strip { flex-direction: column; }
}


/* Boss Rush intro (online-client.js playBossRushIntro) — plays once right
   when checkFastWinner transitions a room to "boss-round". Two beats: a
   title card ("BOSS RUSH", .phase-title), then a slot-machine style reveal
   cycling through candidate boss portraits before landing on the real one
   (.phase-reveal, then .landed for the final settle/pulse). Full-screen like
   #game-event-overlay, but auto-advancing (not click-to-dismiss) since it's
   a short automatic sequence, not player-paced content. */
.boss-rush-intro {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 12px;
  color: #fff7e3;
  background: rgba(12,4,3,.94);
  backdrop-filter: blur(8px);
  text-align: center;
}
.boss-rush-intro[hidden] { display: none; }
.boss-rush-intro-title {
  display: none;
  margin: 0;
  font-family: Georgia,serif;
  font-size: clamp(34px,9vw,64px);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(232,84,63,.65), 0 6px 0 #2a0d09;
  animation: boss-rush-title-in .5s cubic-bezier(.2,.9,.2,1);
}
.boss-rush-intro.phase-title .boss-rush-intro-title { display: block; }
.boss-rush-reveal {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.boss-rush-intro.phase-reveal .boss-rush-reveal { display: flex; }
.boss-rush-reveal img {
  width: min(38vh,220px);
  height: min(38vh,220px);
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.55));
  animation: boss-rush-cycle .09s linear;
}
.boss-rush-reveal strong {
  font-family: Georgia,serif;
  font-size: clamp(20px,4vw,30px);
  letter-spacing: .04em;
  text-shadow: 0 2px #2a0d09;
}
.boss-rush-intro.landed .boss-rush-reveal img {
  animation: boss-rush-land .5s cubic-bezier(.2,.9,.2,1);
  filter: drop-shadow(0 0 34px rgba(244,205,62,.75)) drop-shadow(0 14px 22px rgba(0,0,0,.55));
}
.boss-rush-intro.landed .boss-rush-reveal strong { color: var(--yellow); }
@keyframes boss-rush-title-in { from { opacity: 0; transform: scale(.7) rotate(-4deg); } }
@keyframes boss-rush-cycle { from { opacity: .4; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes boss-rush-land { 0% { transform: scale(.85); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .boss-rush-intro-title,
  .boss-rush-reveal img { animation: none; }
}