:root {
  --ink: #fff3df;
  --muted: #a8b8b2;
  --panel: rgba(19, 24, 22, 0.86);
  --line: rgba(255, 255, 255, 0.11);
  --amber: #ffae57;
  --orange: #f04c32;
  --mint: #63ead4;
  --display: "Russo One", sans-serif;
  --body: "Manrope", sans-serif;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  position: fixed;
  inset: 0;
  color: var(--ink);
  font-family: var(--body);
  background: radial-gradient(circle at 12% 8%, rgba(240,76,50,.15), transparent 31%), radial-gradient(circle at 90% 88%, rgba(47,218,205,.13), transparent 30%), linear-gradient(145deg, #223126, #111c19 52%, #070b0a);
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.ambient { position: fixed; width: 32vw; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .22; animation: drift 12s ease-in-out infinite alternate; }
.ambient-one { top: -14vw; left: -8vw; background: #ff7d3e; }
.ambient-two { right: -12vw; bottom: -16vw; background: #28d8c5; animation-delay: -5s; }
.app-shell { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; gap: 10px; width: 100%; height: 100dvh; padding: 10px; }
.glass { border: 1px solid var(--line); background: linear-gradient(150deg, rgba(255,255,255,.065), transparent 38%), var(--panel); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(22px) saturate(1.15); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 66px; padding: 10px 14px; border-radius: 22px; }
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand-mark { display: grid; place-content: center; gap: 4px; width: 48px; height: 48px; flex: 0 0 auto; border: 1px solid rgba(255,180,94,.35); border-radius: 16px; background: linear-gradient(145deg, rgba(255,177,89,.18), rgba(99,234,212,.06)); box-shadow: 0 0 24px rgba(255,128,61,.12); }
.brand-mark i { display: block; width: 23px; height: 3px; border-radius: 4px; background: var(--amber); box-shadow: 0 0 9px var(--orange); }
.brand-mark i:nth-child(2) { width: 16px; margin-left: 7px; background: var(--mint); box-shadow: 0 0 9px var(--mint); }
.eyebrow { margin: 0 0 4px; color: var(--amber); font-size: 9px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: .035em; }
h1 { font-size: clamp(24px, 2.7vw, 43px); line-height: 1; }
h2 { font-size: 19px; }
.scoreboard { display: flex; align-items: stretch; gap: 8px; }
.score { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 12px; min-width: 126px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 17px; background: rgba(255,255,255,.035); }
.score span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.score strong { grid-row: 1 / 3; grid-column: 2; font-family: var(--display); font-size: 25px; }
.clean-score strong { color: var(--mint); }
.dirty-score strong { color: #ff936b; }
.players-count { display: grid; place-content: center; min-width: 84px; padding: 8px 12px; color: var(--muted); border-left: 1px solid var(--line); font-size: 10px; text-align: center; }
.players-count b { display: block; color: var(--ink); font-family: var(--display); font-size: 18px; }
.game-layout { display: grid; grid-template-columns: minmax(218px,.72fr) minmax(440px,2fr) minmax(230px,.76fr); gap: 10px; min-height: 0; }
.side-panel, .stage-card { min-width: 0; min-height: 0; border-radius: 25px; overflow: hidden; }
.side-panel { display: flex; flex-direction: column; padding: 15px; }
.stage-card { display: grid; place-items: center; padding: 6px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.panel-close { display: none; border: 0; color: var(--ink); background: transparent; font-size: 26px; cursor: pointer; }
.tool-grid { display: grid; gap: 9px; }
.tool-card { position: relative; display: grid; grid-template-columns: 72px 1fr 22px; align-items: center; gap: 10px; min-height: 84px; padding: 7px 10px 7px 7px; overflow: hidden; color: var(--ink); text-align: left; border: 1px solid rgba(255,255,255,.08); border-radius: 19px; background: rgba(255,255,255,.035); cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.tool-card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 20% 50%, rgba(255,162,82,.18), transparent 55%); transition: opacity 180ms ease; }
.clean-tool::before { background: radial-gradient(circle at 20% 50%, rgba(75,234,211,.18), transparent 55%); }
.tool-card:hover { transform: translateY(-2px); }
.tool-card.active { border-color: rgba(255,166,86,.5); background: rgba(255,127,63,.08); }
.tool-card.active.clean-tool { border-color: rgba(99,234,212,.5); background: rgba(65,217,199,.07); }
.tool-card.active::before { opacity: 1; }
.tool-picture { position: relative; z-index: 1; width: 72px; height: 68px; background: url("assets/tomato-rag-sprite.png") 0 50% / 200% 100% no-repeat; filter: drop-shadow(0 7px 7px rgba(0,0,0,.32)); transition: transform 220ms cubic-bezier(.2,.8,.2,1.2); }
.tool-card:hover .tool-picture { transform: rotate(-4deg) scale(1.08); }
.tool-rag { background-position: 100% 50%; }
.tool-copy { position: relative; z-index: 1; display: grid; gap: 3px; }
.tool-copy strong { font-size: 14px; }
.tool-copy small { color: var(--muted); font-size: 10px; line-height: 1.3; }
.tool-check { position: relative; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; color: #122a27; border-radius: 50%; background: var(--amber); opacity: 0; transform: scale(.5); transition: 180ms ease; }
.clean-tool .tool-check { background: var(--mint); }
.tool-card.active .tool-check { opacity: 1; transform: scale(1); }
.vote-box { margin-top: 12px; padding: 12px; border-radius: 18px; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.055); }
.vote-state { display: flex; align-items: center; gap: 7px; color: #ffce8c; font-size: 11px; font-weight: 800; }
.vote-state span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.vote-state.done-clean { color: var(--mint); }
.vote-state.done-dirty { color: #ff936b; }
.vote-box p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.grime-block { margin-top: auto; padding-top: 14px; }
.grime-heading { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.grime-heading strong { color: var(--ink); }
.grime-track { height: 7px; margin-top: 8px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.07); }
.grime-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#bb6b30,#ff7a45); box-shadow: 0 0 14px rgba(255,109,56,.5); transition: width 600ms cubic-bezier(.2,.8,.2,1); }
.grime-block p { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.mini-stats div { padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.035); }
.mini-stats span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.mini-stats strong { display: block; margin-top: 3px; font-family: var(--display); font-size: 17px; }
.poster-stage { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 20px; background: radial-gradient(circle at 50% 45%, #17231e, #061015 72%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); touch-action: manipulation; user-select: none; }
.poster-scene, .poster-target, .effect-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster-scene { object-fit: contain; filter: saturate(1.03) contrast(1.025); animation: scene-in 900ms cubic-bezier(.2,.75,.2,1) both; }
.custom-poster { position: absolute; z-index: 1; left: 28.8%; top: 16%; width: 49.9%; height: 58.5%; object-fit: cover; border-radius: 3px; opacity: .96; mix-blend-mode: multiply; pointer-events: none; }
.custom-poster.missing { display: none; }
.ad-plate { position: absolute; z-index: 4; right: 2.8%; top: 75.5%; width: min(26vw, 260px); min-width: 150px; aspect-ratio: 3 / 1; display: grid; place-items: center; padding: 7px; border: 1px solid rgba(255,226,170,.48); border-radius: 8px; background: linear-gradient(145deg, rgba(54,36,18,.85), rgba(12,18,15,.86)); box-shadow: 0 16px 36px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.12); transform: rotate(-1.5deg); pointer-events: none; overflow: hidden; }
.ad-plate::before { content: ""; position: absolute; inset: 3px; border: 1px dashed rgba(255,255,255,.18); border-radius: 5px; }
.ad-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ad-plate img.missing { display: none; }
.ad-placeholder { position: relative; z-index: 2; display: grid; gap: 4px; text-align: center; text-shadow: 0 2px 6px rgba(0,0,0,.44); }
.ad-placeholder strong { color: #ffe0a8; font-family: var(--display); font-size: clamp(10px, 1.15vw, 15px); line-height: 1.1; letter-spacing: 0; }
.ad-placeholder span { color: #bde9e0; font-size: clamp(7px, .82vw, 10px); font-weight: 800; }
.ad-plate:has(img:not(.missing)) .ad-placeholder { display: none; }
.ad-plate.has-ad-image .ad-placeholder { display: none; }
.table-radio { position: absolute; z-index: 6; display: grid; place-items: center; transform: rotate(.8deg); pointer-events: auto; }
.radio-toggle { position: relative; width: 100%; height: 100%; min-width: 82px; min-height: 52px; border: 1px solid rgba(255,218,154,.42); border-radius: 11px 11px 8px 8px; color: #2b1309; cursor: pointer; background: linear-gradient(160deg,#f2bc67 0%,#b86433 46%,#45261c 100%); box-shadow: 0 14px 24px rgba(0,0,0,.36), inset 0 2px rgba(255,255,255,.24); overflow: hidden; transition: transform 160ms ease, filter 160ms ease; }
.radio-toggle:hover { transform: translateY(-2px); filter: brightness(1.08); }
.radio-toggle::before { content: ""; position: absolute; left: 10%; right: 10%; top: -10%; height: 18%; border: 2px solid rgba(255,214,151,.72); border-bottom: 0; border-radius: 20px 20px 0 0; }
.radio-speaker { position: absolute; left: 10%; top: 30%; width: 38%; height: 46%; border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(26,16,12,.72) 0 3px, rgba(255,224,173,.18) 3px 6px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.26); }
.radio-dial { position: absolute; right: 13%; top: 34%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 32%,#fff1bf,#f0a741 45%,#5a2b1a 72%); box-shadow: 0 0 0 3px rgba(29,16,10,.35), inset 0 -3px rgba(0,0,0,.22); }
.radio-light { position: absolute; right: 12%; top: 17%; width: 8%; aspect-ratio: 1; border-radius: 50%; background: #43231a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.32); }
.radio-note { position: absolute; left: 55%; top: 18%; color: #2c1710; font-family: var(--display); font-size: clamp(8px, .9vw, 13px); line-height: 1; text-shadow: 0 1px rgba(255,255,255,.18); }
.radio-toggle.playing .radio-light { background: #65f1d8; box-shadow: 0 0 10px #65f1d8, 0 0 20px rgba(101,241,216,.45); animation: pulse 1s ease-in-out infinite; }
.radio-toggle.playing .radio-dial { animation: radio-spin 2.5s linear infinite; }
.radio-toggle.missing-audio { filter: grayscale(.35); }
.radio-toggle.awaiting-click .radio-light { background: #ffcf78; box-shadow: 0 0 10px rgba(255,207,120,.55); }
.effect-canvas { z-index: 2; pointer-events: none; }
.poster-target { z-index: 3; border: 0; padding: 0; background: transparent; cursor: none; }
.neon-sign { position: absolute; z-index: 4; top: 7.2%; left: 50%; width: 54%; transform: translateX(-50%); text-align: center; pointer-events: none; }
.neon-sign span { display: inline-block; color: #ffd59d; font-family: var(--display); font-size: clamp(12px,1.65vw,25px); letter-spacing: .08em; text-shadow: 0 0 4px #fff,0 0 12px #ff9b54,0 0 28px #ff6539; animation: flicker 5.6s infinite; }
.cursor-tool { position: absolute; z-index: 5; width: 52px; height: 52px; pointer-events: none; opacity: 0; background: url("assets/tomato-rag-sprite.png") 0 50% / 200% 100% no-repeat; filter: drop-shadow(0 8px 8px rgba(0,0,0,.35)); transform: translate(-50%,-50%) rotate(-8deg); transition: opacity 120ms ease; }
.poster-stage:hover .cursor-tool { opacity: .95; }
.cursor-tool.rag { background-position: 100% 50%; }
.throw-hint { position: absolute; z-index: 4; left: 50%; bottom: 14px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); padding: 8px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 30px; color: #fff4de; background: rgba(5,15,19,.72); backdrop-filter: blur(12px); transform: translateX(-50%); font-size: 10px; white-space: nowrap; pointer-events: none; transition: 200ms ease; }
.throw-hint i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); animation: pulse 1.5s ease-in-out infinite; }
.throw-hint.hidden { opacity: 0; transform: translate(-50%,8px); }
.connection-state { position: absolute; z-index: 4; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 5px; padding: 6px 8px; color: #a9c3c4; border-radius: 12px; background: rgba(5,15,19,.65); font-size: 8px; pointer-events: none; }
.connection-state i { width: 6px; height: 6px; border-radius: 50%; background: #ff6f57; }
.connection-state.online i { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.social-panel { gap: 0; }
.chat-messages { display: flex; flex-direction: column; gap: 7px; min-height: 90px; flex: 1 1 50%; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.chat-empty { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 11px; text-align: center; }
.chat-message { padding: 8px 10px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.045); animation: message-in 260ms ease both; }
.chat-message header { display: flex; justify-content: space-between; gap: 8px; }
.chat-message strong { color: #ffd39e; font-size: 10px; }
.chat-message time { color: #68888d; font-size: 8px; }
.chat-message p { margin: 3px 0 0; color: #c5d5d5; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.chat-form { display: grid; gap: 6px; margin-top: 9px; }
.chat-form input { width: 100%; min-width: 0; padding: 9px 10px; color: var(--ink); border: 1px solid rgba(255,255,255,.085); outline: none; border-radius: 13px; background: rgba(0,0,0,.18); font-size: 10px; transition: border-color 160ms ease; }
.chat-form input:focus { border-color: rgba(99,234,212,.45); }
.chat-form input::placeholder { color: #6f8d91; }
.message-row { display: grid; grid-template-columns: 1fr 38px; gap: 6px; }
.message-row button { border: 0; border-radius: 13px; color: #102522; background: linear-gradient(145deg,#7af3df,#43cdbd); cursor: pointer; font-weight: 800; box-shadow: 0 8px 18px rgba(45,209,189,.16); transition: transform 160ms ease; }
.message-row button:hover { transform: translateY(-2px); }
.activity-title { display: flex; align-items: center; gap: 9px; margin: 12px 0 7px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.activity-title i { flex: 1; height: 1px; background: var(--line); }
.feed-list { display: grid; gap: 6px; max-height: 29%; overflow-y: auto; }
.feed-item { position: relative; padding: 7px 8px 7px 19px; border-radius: 12px; background: rgba(255,255,255,.026); }
.feed-item::before { content: ""; position: absolute; left: 8px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 7px var(--orange); }
.feed-item strong { display: block; font-size: 9px; }
.feed-item p { margin: 2px 0 0; color: var(--muted); font-size: 8px; line-height: 1.3; }
.mobile-nav { display: none; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 22px; max-width: min(420px,calc(100% - 28px)); padding: 11px 16px; color: var(--ink); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(6,22,28,.94); box-shadow: var(--shadow); transform: translate(-50%,20px); opacity: 0; pointer-events: none; transition: 220ms ease; font-size: 11px; text-align: center; }
.toast.show { transform: translate(-50%,0); opacity: 1; }
.share-dock { position: fixed; z-index: 28; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-auto-flow: column; gap: 7px; padding: 7px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: linear-gradient(150deg, rgba(255,255,255,.08), transparent 42%), rgba(8,18,16,.82); box-shadow: 0 18px 42px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(18px) saturate(1.12); }
.share-button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: #fff8e7; text-decoration: none; background: rgba(255,255,255,.06); cursor: pointer; font-size: 11px; font-weight: 900; line-height: 1; box-shadow: inset 0 1px rgba(255,255,255,.1); transition: transform 160ms ease, filter 160ms ease, border-color 160ms ease; }
.share-button:hover { transform: translateY(-2px); filter: brightness(1.08); border-color: rgba(255,255,255,.24); }
.share-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.share-native { background: linear-gradient(145deg,#ffbd69,#f04c32); color: #2a110a; }
.share-telegram { background: linear-gradient(145deg,#35b9ff,#1176c9); }
.share-vk { background: linear-gradient(145deg,#66a8ff,#315fba); }
.share-whatsapp { background: linear-gradient(145deg,#5df0a1,#159b5a); }
.share-x { background: linear-gradient(145deg,#3d4548,#0c1112); }
.share-native.copy-mode span::before { content: "#"; }
.share-native.copy-mode span { font-size: 0; }
.share-native.copy-mode span::before { font-size: 15px; }
.name-dialog { width: min(360px, calc(100vw - 28px)); padding: 0; color: var(--ink); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: linear-gradient(150deg, rgba(255,255,255,.075), transparent 40%), rgba(16,24,21,.96); box-shadow: var(--shadow); }
.name-dialog::backdrop { background: rgba(3,8,7,.62); backdrop-filter: blur(5px); }
.name-dialog form { display: grid; gap: 10px; padding: 18px; }
.name-dialog h2 { font-size: 22px; }
.name-dialog input { width: 100%; padding: 12px 13px; color: var(--ink); border: 1px solid rgba(255,255,255,.12); border-radius: 15px; outline: none; background: rgba(0,0,0,.22); }
.name-dialog input:focus { border-color: rgba(255,174,87,.52); }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dialog-actions button { min-height: 42px; border: 0; border-radius: 14px; color: var(--ink); background: rgba(255,255,255,.08); cursor: pointer; font-weight: 800; }
.dialog-actions button[type="submit"] { color: #2a110a; background: linear-gradient(145deg,#ffbe67,#f04c32); box-shadow: 0 12px 25px rgba(240,76,50,.2); }
@keyframes flicker { 0%,14%,17%,43%,46%,100% { opacity: 1; filter: brightness(1); } 15% { opacity: .25; } 16% { opacity: .8; } 44% { opacity: .42; } 45% { opacity: .95; } }
@keyframes pulse { 50% { transform: scale(.72); opacity: .5; } }
@keyframes drift { to { transform: translate(6vw,3vh) scale(1.12); } }
@keyframes scene-in { from { opacity: 0; transform: scale(1.025); } }
@keyframes message-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes radio-spin { to { transform: rotate(360deg); } }
@media (max-width: 1180px) {
  .game-layout { grid-template-columns: 200px minmax(360px,1fr) 205px; }
  .side-panel { padding: 12px; }
  .tool-card { grid-template-columns: 58px 1fr 20px; min-height: 72px; }
  .tool-picture { width: 58px; height: 56px; }
  .tool-copy small { display: none; }
}
@media (max-width: 900px), (max-height: 650px) {
  .app-shell { grid-template-rows: auto auto 1fr; gap: 8px; padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  .topbar { min-height: 58px; padding: 8px 10px; border-radius: 19px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .eyebrow { font-size: 7px; }
  h1 { font-size: clamp(19px,5vw,30px); }
  .score { min-width: 88px; padding: 6px 8px; }
  .score span { font-size: 8px; }
  .score strong { font-size: 20px; }
  .players-count { display: none; }
  .mobile-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 5px; border-radius: 16px; }
  .mobile-nav button { padding: 6px 10px; color: var(--ink); border: 1px solid transparent; border-radius: 11px; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
  .mobile-nav button.active { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.07); }
  .mobile-nav span { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 4px; padding: 0 4px; color: #102522; border-radius: 9px; background: var(--mint); font-size: 8px; }
  .game-layout { position: relative; grid-template-columns: 1fr; }
  .stage-card { padding: 5px; border-radius: 20px; }
  .poster-stage { border-radius: 16px; }
  .ad-plate { min-width: 116px; padding: 5px; border-radius: 7px; }
  .radio-toggle { min-width: 66px; min-height: 42px; border-radius: 9px 9px 7px 7px; }
  .ad-placeholder strong { font-size: clamp(8px, 2vw, 12px); }
  .ad-placeholder span { font-size: clamp(6px, 1.5vw, 8px); }
  .side-panel { position: absolute; z-index: 10; inset: 0; max-width: 420px; margin: auto; padding: 16px; border-radius: 20px; opacity: 0; pointer-events: none; transform: translateY(12px) scale(.98); transition: 190ms ease; }
  .side-panel.panel-open { opacity: 1; pointer-events: auto; transform: none; }
  .panel-close { display: block; }
  .tool-card { grid-template-columns: 76px 1fr 22px; min-height: 88px; }
  .tool-picture { width: 76px; height: 72px; }
  .tool-copy small { display: block; }
  .chat-message p { font-size: 11px; }
  .chat-form input { font-size: 12px; }
}
@media (max-width: 560px) {
  .brand { gap: 8px; }
  .brand-mark { display: none; }
  .topbar { gap: 7px; }
  .scoreboard { gap: 4px; }
  .score { min-width: 68px; padding: 5px 7px; gap: 2px 6px; border-radius: 12px; }
  .score span { max-width: 44px; overflow: hidden; text-overflow: ellipsis; }
  .score strong { font-size: 17px; }
  .neon-sign { top: 8%; width: 58%; }
  .neon-sign span { font-size: clamp(8px,3vw,14px); }
  .connection-state { display: none; }
  .throw-hint { bottom: 8px; padding: 6px 9px; font-size: 8px; }
  .cursor-tool { display: none; }
  .share-dock { right: 8px; bottom: 8px; gap: 5px; padding: 5px; border-radius: 15px; }
  .share-button { width: 32px; height: 32px; border-radius: 10px; font-size: 9px; }
  .ad-plate { min-width: 0; }
  .ad-placeholder strong { font-size: 8px; }
  .ad-placeholder span { font-size: 6px; }
  .radio-toggle { min-width: 52px; min-height: 34px; border-radius: 7px; }
  .radio-note { font-size: 6px; }
}
@media (min-aspect-ratio: 17/9) {
  .game-layout { grid-template-columns: minmax(230px,.68fr) minmax(560px,2.2fr) minmax(230px,.68fr); }
  .stage-card { max-width: 1440px; justify-self: center; width: 100%; }
}
@media (max-aspect-ratio: 3/4) and (max-width: 700px) {
  .topbar { align-items: stretch; flex-direction: column; }
  .scoreboard { width: 100%; }
  .score { flex: 1 1 0; }
  .stage-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }