/* SOLE SURVIVOR: adult thriller look. Real photographs, graded dark and cold; silhouettes with rim light;
   one red for danger and one amber for coins. Mobile first; on a desktop it sits in a phone-sized column. */

:root {
  --red: #e11d2e;
  --red-dark: #9f1222;
  --amber: #f5a524;
  --gold: #fde68a;
  --ink: #050507;
  --panel: rgba(12, 12, 15, .86);
  --line: rgba(255, 255, 255, .14);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --ice: #d6ecff;
  --display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --body: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; } /* the hidden attribute always wins over a display style */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#app { position: fixed; inset: 0; display: flex; justify-content: center; background: #000; }
.screen { position: relative; width: 100%; max-width: 480px; height: 100%; overflow: hidden; background: var(--ink); isolation: isolate; }
.screen.enter { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- shared pieces ---------- */
.photo { position: absolute; inset: 0; background-position: center; background-size: cover; z-index: -3; }
.grade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  radial-gradient(120% 80% at 50% 45%, transparent 35%, rgba(0, 0, 0, .8) 100%),
  linear-gradient(180deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .15) 26%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .55) 75%, rgba(0, 0, 0, .96) 100%); }
.grain { position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -5%); } 100% { transform: translate(0, 0); } }

.brand { font-family: var(--display); letter-spacing: 3px; line-height: .9; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.brand b { color: var(--red); font-weight: 400; }
.eyebrow { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #d4d4d8; font-weight: 700; }
.muted { color: var(--muted); }
.tiny { font-size: 11px; }

.btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 58px; width: 100%; border-radius: 14px;
  font-family: var(--display); font-size: 26px; letter-spacing: 2px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(15, 15, 18, .78);
  transition: transform .12s ease, filter .12s ease, opacity .2s; }
.btn:active { transform: scale(.97); }
.btn.red { background: linear-gradient(180deg, #ef4444, #b91c1c); border-color: transparent; box-shadow: 0 10px 30px rgba(225, 29, 46, .4); }
.btn.amber { background: linear-gradient(180deg, #fbbf24, #d97706); color: #111; border-color: transparent; box-shadow: 0 10px 30px rgba(245, 165, 36, .3); }
.btn.ghost { background: transparent; }
.btn.small { height: 44px; font-size: 20px; border-radius: 12px; }
.btn[disabled] { opacity: .4; pointer-events: none; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; backdrop-filter: blur(6px); }
.badge { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--red); display: grid; place-items: center;
  font-family: var(--display); font-size: 20px; letter-spacing: 1px; background: rgba(0, 0, 0, .55); box-shadow: 0 0 18px rgba(225, 29, 46, .5); }
.coins { padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(245, 165, 36, .55); font-weight: 800; font-size: 14px; color: var(--gold); white-space: nowrap; }
.coins.bump { animation: bump .5s ease; }
@keyframes bump { 30% { transform: scale(1.25); box-shadow: 0 0 20px rgba(245, 165, 36, .7); } }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .1); border: 1px solid var(--line); }
.topbar .mute, .hud-top .mute { position: static; width: 36px; height: 36px; font-size: 15px; }
.mute { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .5); border: 1px solid var(--line); font-size: 17px; z-index: 30; }

/* ---------- title ---------- */
.title { display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 22px 26px; }
.title .photo { filter: saturate(.55) contrast(1.15) brightness(.62); animation: slowZoom 30s ease-in-out infinite alternate; }
@keyframes slowZoom { from { transform: scale(1.02); } to { transform: scale(1.14) translateY(-1.5%); } }
.title .tint { position: absolute; inset: 0; z-index: -2; background: linear-gradient(0deg, rgba(225, 29, 46, .2), transparent 45%); mix-blend-mode: screen; }
.title .fog { position: absolute; left: -30%; right: -30%; top: 30%; height: 30%; z-index: -2; background: radial-gradient(50% 50% at 50% 50%, rgba(220, 225, 230, .18), transparent 70%); filter: blur(8px); animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.title .age18 { position: absolute; top: 16px; left: 16px; font-weight: 800; font-size: 12px; letter-spacing: .12em; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .4); }
.title .walker { position: absolute; left: 50%; top: 41.5%; width: 16px; height: 42px; transform: translateX(-50%); opacity: .95; animation: walkAway 9s linear infinite; }
@keyframes walkAway { 0% { transform: translate(-50%, 0) scale(1); opacity: 0; } 8% { opacity: .95; } 85% { opacity: .9; } 100% { transform: translate(-50%, -18px) scale(.55); opacity: 0; } }
.title h1 { font-family: var(--display); font-weight: 400; font-size: clamp(64px, 19vw, 92px); line-height: .84; letter-spacing: 2px; text-shadow: 0 4px 30px rgba(0, 0, 0, .9); }
.title h1 b { display: block; color: var(--red); font-weight: 400; text-shadow: 0 0 30px rgba(225, 29, 46, .55), 0 4px 30px rgba(0, 0, 0, .9); }
.title .tag { margin: 12px 0 22px; font-size: 16px; font-weight: 600; color: #e4e4e7; letter-spacing: .02em; }
.title .tag em { font-style: normal; color: var(--red); }
.title .small-print { margin-top: 14px; display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: rgba(255, 255, 255, .55); }

/* ---------- forms (age, name) ---------- */
.form { display: flex; flex-direction: column; padding: 26px 22px; gap: 18px; }
.form .photo { filter: saturate(.4) brightness(.35) blur(2px); transform: scale(1.06); }
.form h2 { font-family: var(--display); font-weight: 400; font-size: 44px; letter-spacing: 1px; line-height: .95; }
.form p { font-size: 14px; line-height: 1.5; color: #d4d4d8; }
.field label { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.dob { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px; }
.input, .dob select { width: 100%; height: 54px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .55); padding: 0 14px; font-size: 17px; appearance: none; }
.dob select { background-image: linear-gradient(45deg, transparent 50%, #a1a1aa 50%), linear-gradient(135deg, #a1a1aa 50%, transparent 50%); background-position: calc(100% - 18px) 24px, calc(100% - 13px) 24px; background-size: 5px 5px; background-repeat: no-repeat; }
.dob select option { background: #111; }
.error { min-height: 18px; font-size: 13px; color: #fca5a5; font-weight: 600; }
.spacer { flex: 1; }
.numpick { display: flex; align-items: center; gap: 14px; }
.numpick .jersey { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--red); font-family: var(--display); font-size: 40px; background: rgba(0, 0, 0, .6); box-shadow: 0 0 30px rgba(225, 29, 46, .45); }
.blocked { text-align: center; justify-content: center; align-items: center; }
.blocked .big { font-size: 64px; }

/* ---------- lobby ---------- */
.lobby { display: flex; flex-direction: column; padding: 14px 16px 18px; gap: 14px; overflow-y: auto; }
.lobby .photo { filter: saturate(.5) brightness(.42); position: fixed; max-width: 480px; margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; }
.topbar .brand { font-size: 28px; }
.me { display: flex; align-items: center; gap: 8px; }
.hero-play { padding: 18px; border-radius: 18px; background: linear-gradient(160deg, rgba(225, 29, 46, .22), rgba(10, 10, 12, .88) 55%); border: 1px solid rgba(225, 29, 46, .45); }
.hero-play h3 { font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: 1px; line-height: 1; }
.hero-play p { margin: 6px 0 14px; font-size: 13px; color: #d4d4d8; line-height: 1.45; }
.seats { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 6px 0 14px; }
.seats i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); display: grid; place-items: center; font-style: normal; font-size: 10px; }
.seats i.you { background: var(--red); border-color: transparent; font-weight: 800; }
.seats i.bot::after { content: '🤖'; font-size: 10px; }
.rounds-list { display: flex; flex-direction: column; gap: 8px; }
.rounds-list li { list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.rounds-list .thumb { width: 52px; height: 52px; border-radius: 10px; background-size: cover; background-position: center; flex: none; filter: saturate(.6) brightness(.85); }
.rounds-list b { display: block; font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: 1px; }
.rounds-list span { font-size: 12px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.stats div { padding: 10px 4px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.stats b { display: block; font-family: var(--display); font-size: 28px; font-weight: 400; }
.stats span { font-size: 11px; color: var(--muted); }
.toast { position: absolute; left: 16px; right: 16px; top: 70px; z-index: 50; padding: 12px 14px; border-radius: 12px; background: rgba(20, 16, 6, .95); border: 1px solid rgba(245, 165, 36, .6); color: var(--gold); font-weight: 700; font-size: 14px; animation: drop .4s ease both; }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.foot-note { text-align: center; font-size: 11px; color: rgba(255, 255, 255, .45); line-height: 1.6; }
.foot-note a { color: inherit; }

/* ---------- match HUD ---------- */
.match { background: #03060a; }
.hud-top { position: absolute; top: 0; left: 0; right: 0; padding: 12px 14px 0; display: flex; justify-content: space-between; align-items: center; z-index: 20; }
.hud-top .brand { font-size: 24px; }
.hud-round { position: absolute; top: 62px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-end; z-index: 20; pointer-events: none; }
.hud-round .eyebrow { font-size: 10px; letter-spacing: .16em; white-space: nowrap; }
.hud-round .name { font-family: var(--display); font-size: 34px; letter-spacing: 1px; line-height: .95; text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
.timer { font-family: var(--display); font-size: 54px; line-height: .9; color: var(--red); text-shadow: 0 0 22px rgba(225, 29, 46, .85); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
.timer.calm { color: #e4e4e7; text-shadow: 0 0 16px rgba(255, 255, 255, .25); }
.timer.panic { animation: pulse .5s ease infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }
.hud-alive { position: absolute; top: 140px; left: 14px; display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .08em; z-index: 20; text-shadow: 0 1px 6px #000; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); }
.feed { position: absolute; top: 162px; left: 14px; right: 110px; display: flex; flex-direction: column; gap: 4px; z-index: 20; pointer-events: none; }
.feed div { font-size: 12px; padding: 4px 8px; background: rgba(0, 0, 0, .62); border-left: 3px solid var(--red); width: max-content; max-width: 100%; animation: feedIn .3s ease both; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed div.good { border-left-color: #22c55e; }
.feed div.gold { border-left-color: var(--amber); }
.feed div.chat { border-left-color: #60a5fa; }
.feed div.fade { opacity: 0; transition: opacity .6s; }
@keyframes feedIn { from { transform: translateX(-10px); opacity: 0; } }

.prompt { position: absolute; left: 14px; right: 14px; top: 232px; z-index: 25; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid rgba(245, 165, 36, .65); display: flex; align-items: center; gap: 10px; box-shadow: 0 0 30px rgba(245, 165, 36, .25); font-size: 13px; animation: drop .25s ease both; }
.prompt b { color: var(--amber); }
.prompt .go { margin-left: auto; padding: 10px 12px; border-radius: 10px; background: var(--amber); color: #111; font-weight: 800; font-size: 13px; white-space: nowrap; }
.prompt .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--amber); border-radius: 0 0 12px 12px; transform-origin: left; }

.dock { position: absolute; left: 14px; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 25; display: flex; flex-direction: column; gap: 10px; }
.status { align-self: center; text-align: center; font-size: 13px; color: #e4e4e7; line-height: 1.4; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .66); border: 1px solid var(--line); backdrop-filter: blur(4px); }
.status:empty { display: none; }
.status b { color: #fff; }
.lr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lr .btn { height: 68px; font-size: 30px; }
.lr .btn.side { background: linear-gradient(180deg, rgba(214, 236, 255, .22), rgba(120, 170, 220, .12)); border-color: rgba(214, 236, 255, .55); box-shadow: 0 0 24px rgba(160, 210, 255, .25), inset 0 0 18px rgba(214, 236, 255, .15); }
.ring { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ring i { display: block; height: 100%; background: var(--red); transform-origin: left; }

.overlay { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center; padding: 22px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); animation: fadeIn .3s ease both; }
.overlay.clear { background: transparent; backdrop-filter: none; pointer-events: none; }
.overlay h2 { font-family: var(--display); font-weight: 400; font-size: 54px; line-height: .9; letter-spacing: 1px; }
.overlay h2 b { color: var(--red); font-weight: 400; }
.rules { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; color: #e4e4e7; }
.rules li { list-style: none; padding-left: 26px; position: relative; }
.rules li::before { content: attr(data-i); position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--red); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.banner { position: absolute; left: 0; right: 0; top: 38%; z-index: 45; text-align: center; pointer-events: none; animation: banner 2.2s ease both; }
.banner .big { font-family: var(--display); font-size: 64px; letter-spacing: 2px; line-height: .9; text-shadow: 0 4px 30px #000; }
.banner .sub { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #e4e4e7; text-shadow: 0 2px 10px #000; }
.banner.red .big { color: var(--red); text-shadow: 0 0 30px rgba(225, 29, 46, .7), 0 4px 30px #000; }
.banner.gold .big { color: var(--gold); }
@keyframes banner { 0% { opacity: 0; transform: scale(1.3); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.96); } }
.flash { position: absolute; inset: 0; z-index: 44; pointer-events: none; background: radial-gradient(circle at 50% 60%, rgba(225, 29, 46, .0), rgba(225, 29, 46, .45)); animation: flash .7s ease both; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* line picker (Ice Bridge) */
.picker { position: absolute; left: 14px; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 30; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); animation: drop .3s ease both; }
.picker h4 { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: 1px; display: flex; justify-content: space-between; align-items: baseline; }
.picker h4 span { font-family: var(--body); font-size: 12px; color: var(--muted); letter-spacing: 0; }
.picker .ends { display: flex; justify-content: space-between; font-size: 11px; margin: 8px 0 6px; color: var(--muted); }
.picker .ends b { color: var(--amber); }
.spots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.spot { height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); font-weight: 800; font-size: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.spot small { font-size: 9px; font-weight: 600; color: var(--muted); }
.spot.taken { background: rgba(0, 0, 0, .55); border-color: transparent; color: #71717a; pointer-events: none; }
.spot.mine { background: var(--red); border-color: transparent; color: #fff; pointer-events: none; }
.spot.mine small { color: #fee2e2; }
.spot.front { box-shadow: inset 0 -3px 0 rgba(225, 29, 46, .7); }
.spot.back { box-shadow: inset 0 -3px 0 rgba(96, 165, 250, .6); }

/* ---------- results ---------- */
.results { display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; gap: 14px; }
.results .photo { filter: saturate(.4) brightness(.4); }
.results h2 { font-family: var(--display); font-weight: 400; font-size: 64px; line-height: .86; letter-spacing: 1px; }
.results h2.won { color: var(--gold); text-shadow: 0 0 30px rgba(245, 165, 36, .5); }
.results h2.lost { color: var(--red); text-shadow: 0 0 30px rgba(225, 29, 46, .5); }
.results .place { font-size: 15px; color: #e4e4e7; }
.results .rows { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.results .rows div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.results .rows div b { color: var(--gold); }
.results .owe { font-size: 13px; color: #e4e4e7; line-height: 1.5; }
.results .actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }

/* ---------- THE ICE BRIDGE scene ---------- */
.ice-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.ice-scene .photo { filter: saturate(.6) contrast(1.12) brightness(.42) hue-rotate(-8deg); transform: scale(1.1); }
.ice-scene .cold { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(5, 12, 22, .9) 0%, rgba(10, 30, 55, .35) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .6) 100%); pointer-events: none; }
.ice-scene .spot-light { position: absolute; left: 10%; right: 10%; top: -10%; height: 80%; z-index: 1; pointer-events: none; background: radial-gradient(50% 60% at 50% 30%, rgba(200, 225, 255, .12), transparent 70%); }
.ice-scene .mist { position: absolute; left: -20%; right: -20%; top: 18%; height: 22%; z-index: 3; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(200, 220, 240, .2), transparent 72%); filter: blur(6px); animation: drift 16s ease-in-out infinite alternate; }
.ice-scene .vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .45) 18%, transparent 34%, transparent 70%, rgba(0, 0, 0, .85) 100%), radial-gradient(140% 90% at 50% 55%, transparent 50%, rgba(0, 0, 0, .7) 100%); }

.stage { position: absolute; inset: 0; z-index: 2; perspective: 760px; perspective-origin: 50% 0%; }
.world { position: absolute; left: 50%; top: 60%; width: 0; height: 0; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.45, 0, .2, 1); }
.world > * { position: absolute; }

.plat { border-radius: 18px; background:
  radial-gradient(60% 50% at 40% 40%, rgba(255, 255, 255, .5), transparent 70%),
  linear-gradient(160deg, rgba(225, 240, 255, .78), rgba(150, 190, 225, .55));
  box-shadow: 0 16px 0 rgba(70, 110, 150, .55), 0 0 40px rgba(170, 210, 255, .25), inset 0 0 30px rgba(255, 255, 255, .5); }
.beam { background: linear-gradient(90deg, #0a0d12, #273241 50%, #0a0d12); box-shadow: 0 0 6px rgba(0, 0, 0, .6); }
.cross { background: #121821; }
.panel { width: 92px; height: 92px; border-radius: 6px; transition: opacity .4s, background .4s, box-shadow .4s, filter .4s;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 38%, transparent 46%),
    linear-gradient(160deg, rgba(230, 245, 255, .62), rgba(140, 185, 225, .34));
  border: 1px solid rgba(240, 250, 255, .85);
  box-shadow: 0 9px 0 rgba(80, 125, 170, .5), inset 0 0 18px rgba(255, 255, 255, .45), 0 0 14px rgba(160, 210, 255, .25); }
.panel.next { border: 2px solid #fff; cursor: pointer; animation: candidate .9s ease-in-out infinite alternate;
  box-shadow: 0 9px 0 rgba(80, 125, 170, .5), inset 0 0 24px rgba(255, 255, 255, .6), 0 0 26px rgba(190, 225, 255, .7); }
@keyframes candidate { from { filter: brightness(1); } to { filter: brightness(1.35); box-shadow: 0 9px 0 rgba(80, 125, 170, .5), inset 0 0 30px rgba(255, 255, 255, .8), 0 0 46px rgba(200, 230, 255, 1); } }
.panel.holds { background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 38%, transparent 46%),
    linear-gradient(160deg, rgba(240, 250, 255, .85), rgba(170, 210, 240, .55));
  box-shadow: 0 9px 0 rgba(80, 125, 170, .55), inset 0 0 20px rgba(255, 255, 255, .7), 0 0 26px rgba(200, 235, 255, .55); }
.panel.weak { filter: saturate(.5) brightness(.75); background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92'%3E%3Cpath d='M46 46 L20 8 M46 46 L80 18 M46 46 L88 60 M46 46 L58 90 M46 46 L6 70 M30 22 L14 30 M66 32 L70 10 M68 54 L84 78' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") center / cover,
    linear-gradient(160deg, rgba(200, 220, 240, .45), rgba(110, 140, 170, .3)); }
.panel.broken { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' fill='%23bfe0ff' fill-opacity='.38' d='M0 0H92V92H0Z M14 10 L30 19 L45 7 L60 17 L81 11 L73 31 L85 46 L75 62 L82 81 L62 73 L46 85 L30 75 L11 82 L18 62 L7 46 L17 30Z'/%3E%3Cpath fill='none' stroke='%23e8f6ff' stroke-opacity='.9' stroke-width='1.4' d='M14 10 L30 19 L45 7 L60 17 L81 11 L73 31 L85 46 L75 62 L82 81 L62 73 L46 85 L30 75 L11 82 L18 62 L7 46 L17 30Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  border-color: transparent; box-shadow: none; filter: none; }
.ripple { width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(220, 240, 255, .8); animation: ripple 1.2s ease-out both; pointer-events: none; }
@keyframes ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.shard { width: 14px; height: 10px; background: rgba(230, 245, 255, .9); clip-path: polygon(0 0, 100% 30%, 40% 100%); transform-style: preserve-3d; animation: shard 1s ease-in both; pointer-events: none; }
@keyframes shard { to { transform: var(--to); opacity: 0; } }

.fig { left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, .1, .3, 1), opacity .6s; will-change: transform; }
.fig .shadow { position: absolute; left: -20px; top: -9px; width: 40px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 10, 20, .65), transparent); }
.fig .stand { position: absolute; left: -22px; bottom: 0; width: 44px; height: 118px; transform-origin: 50% 100%; transform: rotateX(-62deg); transform-style: preserve-3d; }
.fig svg.body { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.2px rgba(220, 240, 255, .95)) drop-shadow(0 0 6px rgba(150, 200, 255, .5)); }
.fig.warm svg.body { filter: drop-shadow(0 0 1.3px rgba(255, 190, 130, .95)) drop-shadow(0 0 6px rgba(249, 115, 22, .55)); }
.fig .tag { position: absolute; left: 50%; bottom: 100%; margin-bottom: 6px; transform: translateX(-50%); font: 800 11px var(--body); letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .7); white-space: nowrap; }
.fig .tag.bot { color: #a1a1aa; }
.fig.you .tag { background: var(--red); color: #fff; }
.fig.small .stand { width: 30px; height: 80px; left: -15px; }
.fig.falling { transition: transform 1s cubic-bezier(.55, 0, 1, .45), opacity 1s ease-in; }
.fig.falling .stand { animation: flail .25s ease-in-out infinite alternate; }
@keyframes flail { from { transform: rotateX(-62deg) rotateZ(-12deg); } to { transform: rotateX(-62deg) rotateZ(12deg); } }
.fig.hanging .stand { clip-path: inset(0 0 50% 0); }
.fig.hanging .shadow { display: none; }
.fig .rope-line { position: absolute; left: 50%; bottom: 62%; width: 3px; height: 900px; margin-left: -1.5px; background: repeating-linear-gradient(180deg, #d6b37a 0 6px, #8a6a3a 6px 9px); transform-origin: bottom; animation: ropeDown .35s ease-out both; box-shadow: 0 0 6px rgba(245, 165, 36, .5); }
@keyframes ropeDown { from { transform: scaleY(0); } }
.fig.gone { opacity: 0; }
.safety { height: 2px; background: linear-gradient(90deg, transparent, rgba(245, 165, 36, .9), transparent); }

.tap-zone { position: absolute; z-index: 6; border-radius: 12px; }

/* ---------- PEBBLE HUNT scene ---------- */
.pebble-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.pebble-scene .photo { filter: saturate(.75) contrast(1.1) brightness(.5); transform: scale(1.04); }
.pebble-scene .dusk { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(70% 55% at 50% 52%, rgba(255, 170, 90, .12), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .2) 26%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, .8) 100%); }
.pvignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(130% 85% at 50% 52%, transparent 55%, rgba(0, 0, 0, .75) 100%); }
.pgrid { position: absolute; left: 12px; right: 12px; top: 214px; bottom: 132px; z-index: 2; display: grid; gap: 6px; transition: opacity .3s, filter .3s; }
.pgrid.locked { pointer-events: none; }
.pgrid.locked:not(.finished) { filter: brightness(.7); }
.pgrid.cool .pcell:not(.dug) { opacity: .62; }
.pgrid.finished { filter: saturate(.6) brightness(.75); }
.pcell { position: relative; border-radius: 50%; border: 1px dashed rgba(255, 228, 196, .32); display: grid; place-items: center; transition: transform .12s, opacity .2s, box-shadow .3s;
  background: radial-gradient(closest-side, rgba(255, 210, 150, .12), rgba(0, 0, 0, .14) 70%, transparent 100%); }
.pcell:active, .pcell.press { transform: scale(.88); }
.pcell.dug { border: 0; background: radial-gradient(closest-side, #0e0804 0 52%, #2e1c10 70%, rgba(46, 28, 16, 0) 100%); }
.pcell.fresh { animation: digPop .5s ease-out; }
@keyframes digPop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.pcell.hot { box-shadow: 0 0 0 2px rgba(239, 68, 68, .95), 0 0 18px 4px rgba(249, 115, 22, .65); }
.pcell.warm { box-shadow: 0 0 0 2px rgba(245, 165, 36, .9), 0 0 12px 2px rgba(245, 165, 36, .4); }
.pcell.cold { box-shadow: 0 0 0 2px rgba(96, 165, 250, .75); }
.pcell .clue { font: 800 9px var(--body); letter-spacing: .08em; padding: 2px 4px; border-radius: 4px; background: rgba(0, 0, 0, .55); }
.pcell.hot .clue { color: #fca5a5; }
.pcell.warm .clue { color: #fde68a; }
.pcell.cold .clue { color: #bfdbfe; }
.pcell.gem { box-shadow: 0 0 0 2px rgba(253, 230, 138, .95), 0 0 22px 6px rgba(253, 230, 138, .45); }
.stone { width: 62%; height: 46%; border-radius: 48% 52% 45% 55% / 55% 50% 50% 45%; background:
  linear-gradient(100deg, transparent 38%, #d61f2c 39%, #b91c1c 55%, transparent 56%),
  radial-gradient(70% 70% at 35% 30%, #b8b4ad, #77736c 60%, #4b4843); box-shadow: inset -3px -4px 6px rgba(0, 0, 0, .45), 0 3px 6px rgba(0, 0, 0, .6); }
.pips { display: inline-flex; gap: 4px; vertical-align: -1px; margin-left: 6px; }
.pips i { width: 14px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.pips i.on { background: linear-gradient(100deg, #8a857e 38%, #d61f2c 39%, #b91c1c 55%, #8a857e 56%); box-shadow: 0 0 8px rgba(253, 230, 138, .6); }

/* ---------- MUSICAL CHAIRS scene ---------- */
.chairs-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #0a0604; }
.chairs-scene .photo { bottom: 45%; filter: saturate(.5) sepia(.35) brightness(.32) contrast(1.1) blur(1.5px); transform: scale(1.15); }
.hall-grade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .25) 22%, rgba(20, 8, 2, .55) 50%, #0a0604 56%, #0a0604 100%); }
.beam-light { position: absolute; left: 50%; top: -5%; width: 120%; height: 95%; transform: translateX(-50%); z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(28% 70% at 50% 0%, rgba(255, 214, 160, .2), transparent 70%), conic-gradient(from 168deg at 50% 0%, transparent 0deg, rgba(255, 210, 150, .1) 10deg, rgba(255, 210, 150, .1) 14deg, transparent 24deg); }
.cstage { perspective: 700px; perspective-origin: 50% 10%; }
.cworld { top: 58%; transition: none; }
.floor { position: absolute; left: -230px; top: -215px; width: 460px; height: 430px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .38), rgba(120, 66, 28, .3) 55%, rgba(40, 20, 8, 0) 100%),
    repeating-linear-gradient(90deg, rgba(60, 32, 14, .9) 0 28px, rgba(48, 25, 10, .9) 28px 30px); }
.chair, .chairs-scene .fig { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.chair .stand { position: absolute; left: -19px; bottom: 0; width: 38px; height: 61px; transform-origin: 50% 100%; transform: rotateX(-58deg); }
.chair svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.2px rgba(255, 190, 130, .9)) drop-shadow(0 0 5px rgba(249, 115, 22, .35)); }
.chairs-scene .fig .stand { transform: rotateX(-58deg); width: 40px; height: 108px; left: -20px; }
.chairs-scene .fig.seated .stand { clip-path: inset(0 0 42% 0); }
.chairs-scene .fig.seated .shadow { display: none; }
.chairs-scene .fig.loser .tag { background: var(--red); color: #fff; }
.chairs-scene .fig.loser svg.body { filter: drop-shadow(0 0 2px rgba(255, 80, 80, 1)) drop-shadow(0 0 10px rgba(225, 29, 46, .8)); }

/* SIT button */
.sit { width: 132px; height: 132px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; align-content: center; font-family: var(--display); font-size: 40px; letter-spacing: 2px;
  background: radial-gradient(circle at 50% 35%, #3f3f46, #18181b); border: 2px solid rgba(255, 255, 255, .25); color: #a1a1aa; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); transition: transform .08s; touch-action: manipulation; }
.sit:active { transform: scale(.94); }
.sit.go { color: #fff; background: radial-gradient(circle at 50% 35%, #f87171, #b91c1c); border-color: transparent; box-shadow: 0 0 0 8px rgba(225, 29, 46, .25), 0 0 60px rgba(225, 29, 46, .7); animation: sitPulse .5s ease infinite alternate; }
@keyframes sitPulse { to { box-shadow: 0 0 0 16px rgba(225, 29, 46, .12), 0 0 80px rgba(225, 29, 46, .9); } }
.sit.done { color: var(--gold); background: radial-gradient(circle at 50% 35%, #44403c, #1c1917); border-color: rgba(245, 165, 36, .6); font-size: 26px; }
.sit small { display: block; font-family: var(--body); font-size: 12px; letter-spacing: 0; font-weight: 700; margin-top: -2px; }

/* ---------- BREATHER ---------- */
.breather { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; gap: 10px; padding: 16px 14px calc(14px + env(safe-area-inset-bottom)); background: rgba(5, 5, 7, .82); backdrop-filter: blur(6px); animation: fadeIn .3s ease both; }
.breather .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.breather h2 { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: .9; letter-spacing: 1px; }
.breather .bt { font-family: var(--display); font-size: 46px; line-height: .9; color: #e4e4e7; font-variant-numeric: tabular-nums; }
.breather .about { font-size: 13px; color: #d4d4d8; line-height: 1.45; }
.people { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.people::-webkit-scrollbar { display: none; }
.person { flex: none; padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); white-space: nowrap; }
.person.me { background: var(--red); border-color: transparent; }
.person.sel { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(245, 165, 36, .4); color: var(--gold); }
.chatlog { flex: 1; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.chatlog p { font-size: 13px; line-height: 1.35; max-width: 88%; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, .08); align-self: flex-start; overflow-wrap: anywhere; }
.chatlog p b { display: block; font-size: 10px; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.chatlog p.mine { align-self: flex-end; background: rgba(225, 29, 46, .28); }
.chatlog p.sys { align-self: center; background: transparent; color: var(--gold); font-size: 12px; font-weight: 700; text-align: center; }
.chatlog .empty { margin: auto; color: var(--muted); font-size: 12px; text-align: center; }
.quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.quick button { flex: none; padding: 8px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .1); border: 1px solid var(--line); white-space: nowrap; }
.say { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.say .input { height: 46px; font-size: 15px; }
.say .btn { height: 46px; width: auto; padding: 0 16px; font-size: 20px; }
.acts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acts2 .btn { height: 52px; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; }
.owes { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* ---------- live play ---------- */
.pact { display: flex; gap: 6px; }
.pact[hidden] { display: none; }
.pact .chip { cursor: pointer; }
.netpill { position: absolute; top: 112px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; background: rgba(245, 165, 36, .92); color: #111; animation: pulse .6s ease infinite alternate; }
.find { display: flex; flex-direction: column; padding: 26px 22px calc(22px + env(safe-area-inset-bottom)); gap: 12px; }
.find .photo { filter: saturate(.5) brightness(.4); }
.find h2 { font-family: var(--display); font-weight: 400; font-size: 54px; line-height: .9; letter-spacing: 1px; }
.find-count { font-size: 17px; font-weight: 700; }
.find-timer { font-family: var(--display); font-size: 34px; letter-spacing: 1px; color: var(--gold); min-height: 36px; }
.find-note { font-size: 13px; color: #d4d4d8; line-height: 1.5; }
.seats.live { grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 6px 0; }
.seats.live i { font-size: 11px; }
.seats.live i.human { background: rgba(225, 29, 46, .35); border-color: rgba(225, 29, 46, .7); animation: bump .5s ease; }
.seats.live i.human::after { content: '👤'; font-size: 13px; }

/* =================== STAGE 2 ROUNDS =================== */

/* ---------- DRUM STOP ---------- */
.drum-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #070a08; }
.drum-scene .photo { filter: saturate(.6) contrast(1.1) brightness(.55); transform: scale(1.5); transform-origin: 50% 62%; }
.hill-grade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .15) 25%, rgba(10, 20, 10, .2) 60%, rgba(0, 0, 0, .8) 100%); }
.drum-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.trail { fill: none; stroke: rgba(214, 196, 160, .42); stroke-width: 12; stroke-linecap: round; }
.trail-glow { fill: none; stroke: rgba(255, 220, 160, .12); stroke-width: 30; stroke-linecap: round; filter: blur(6px); }
.drummer use { filter: drop-shadow(0 0 1.4px rgba(255, 190, 130, .95)) drop-shadow(0 0 6px rgba(249, 115, 22, .5)); }
.tdrum { fill: #3a2210; stroke: #120a04; stroke-width: 1.5; }
.tdrum-cords { fill: none; stroke: #d6b37a; stroke-width: .8; opacity: .8; }
.drum-scene.beat .bob { animation: drumBob .38s ease-in-out infinite alternate; }
@keyframes drumBob { to { transform: translateY(3px); } }
.eye { fill: #111; transition: fill .15s; }
.drum-scene.silence .eye { fill: #ff2d3d; filter: drop-shadow(0 0 3px #ff2d3d); }
.pole { stroke: #1a120a; stroke-width: 2; }
.flag { fill: #e11d2e; }
.freeze-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .12s; background: radial-gradient(120% 90% at 50% 40%, rgba(225, 29, 46, 0) 40%, rgba(225, 29, 46, .38) 100%); }
.drum-scene.silence .freeze-tint { opacity: 1; }
.climber { transition: transform .14s linear; }
.climber use { filter: drop-shadow(0 0 1.2px rgba(220, 240, 255, .9)) drop-shadow(0 0 5px rgba(150, 200, 255, .45)); }
.climber.you use { filter: drop-shadow(0 0 1.4px rgba(255, 220, 200, 1)) drop-shadow(0 0 8px rgba(225, 29, 46, .8)); }
.climber.caught { transition: transform .6s cubic-bezier(.3, .7, .3, 1); }
.climber.caught use { filter: drop-shadow(0 0 3px rgba(255, 60, 60, 1)) drop-shadow(0 0 10px rgba(225, 29, 46, .9)); }
.climber.top use { filter: drop-shadow(0 0 2px rgba(253, 230, 138, 1)) drop-shadow(0 0 8px rgba(245, 165, 36, .7)); }
.climber.gone { opacity: 0; transition: opacity .7s; }
.ctag { font: 800 11px var(--body); fill: #fff; }
.ctag-bg { fill: rgba(0, 0, 0, .7); }
.climber.you .ctag-bg { fill: var(--red); }
.hold { width: 100%; height: 86px; border-radius: 22px; font-family: var(--display); font-size: 34px; letter-spacing: 2px; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, #22c55e, #15803d); box-shadow: 0 10px 30px rgba(34, 197, 94, .35); border: 0; transition: transform .08s, filter .15s; }
.hold.down { transform: scale(.97); filter: brightness(1.15); }
.hold.freeze { background: linear-gradient(180deg, #ef4444, #991b1b); box-shadow: 0 10px 30px rgba(225, 29, 46, .5); }
.hold.stunned { background: #3f3f46; box-shadow: none; color: #a1a1aa; }
.hold small { display: block; font-family: var(--body); font-size: 12px; letter-spacing: 0; font-weight: 700; opacity: .85; }
.meter { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-bottom: 8px; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #fde68a); transform-origin: left; transition: transform .15s linear; }

/* ---------- ROPE BRIDGE ---------- */
.rb-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #0b0d0a; }
.rb-sway { position: absolute; inset: -4%; transform-origin: 50% 100%; }
.rb-sway .photo { filter: saturate(.6) contrast(1.12) brightness(.55); }
.rb-grade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .1) 28%, rgba(0, 0, 0, .05) 60%, rgba(0, 0, 0, .75) 100%); }
.rb-gap { position: absolute; left: 35%; right: 35%; top: 49%; height: 6%; background: radial-gradient(80% 120% at 50% 100%, #000 40%, rgba(0, 0, 0, .7)); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); box-shadow: 0 0 30px rgba(0, 0, 0, .8); }
.rb-gap i { position: absolute; top: -10%; width: 22%; height: 120%; background: linear-gradient(180deg, #6b4423, #3b240f); clip-path: polygon(0 20%, 100% 0, 80% 100%, 10% 85%); }
.rb-gap i.l { left: -6%; transform: rotate(-8deg); }
.rb-gap i.r { right: -6%; transform: rotate(10deg) scaleX(-1); }
.rb-gap.next { animation: gapIn .5s ease-out; }
@keyframes gapIn { from { transform: translateY(-30px) scale(.7); opacity: 0; } }
.rb-me { position: absolute; left: 50%; bottom: 24%; width: 70px; height: 186px; margin-left: -35px; overflow: visible; filter: drop-shadow(0 0 1.4px rgba(255, 220, 200, 1)) drop-shadow(0 0 8px rgba(225, 29, 46, .7)); transition: transform .5s, opacity .5s; }
.rb-me.jump { animation: rbJump .65s ease-in-out; }
@keyframes rbJump { 0% { transform: none; } 45% { transform: translateY(-120px) scale(.78); } 100% { transform: translateY(-150px) scale(.6); opacity: .2; } }
.rb-me.fall, .rb-me.hang { transform: translateY(-120px) scale(.7); clip-path: inset(0 0 55% 0); animation: flailX .25s ease-in-out infinite alternate; }
@keyframes flailX { from { rotate: -8deg; } to { rotate: 8deg; } }
.rb-me.pulled { animation: rbPull .8s ease-out; }
@keyframes rbPull { from { transform: translateY(-80px) scale(.75); } }
.rb-me.gone { opacity: 0; transform: translateY(80px) scale(.5); }
.rb-scene.across .rb-me { opacity: 0; }
.timing { position: relative; height: 34px; border-radius: 10px; background: rgba(0, 0, 0, .65); border: 1px solid rgba(255, 255, 255, .25); overflow: hidden; margin-bottom: 10px; }
.timing .zone { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(34, 197, 94, .75), rgba(21, 128, 61, .75)); box-shadow: inset 0 0 0 1px rgba(187, 247, 208, .7); }
.timing .needle { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 10px #fff; border-radius: 2px; }
.jumpbtn { width: 100%; height: 76px; border-radius: 18px; font-family: var(--display); font-size: 34px; letter-spacing: 3px; color: #fff; border: 0; background: linear-gradient(180deg, #ef4444, #b91c1c); box-shadow: 0 10px 30px rgba(225, 29, 46, .45); touch-action: manipulation; }
.jumpbtn:active { transform: scale(.97); }
.jumpbtn[disabled] { opacity: .45; }

/* ---------- BRANCH WALK ---------- */
.br-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #050806; }
.br-scene .photo { filter: saturate(.55) contrast(1.15) brightness(.45) hue-rotate(-10deg); background-position: 50% 0%; transform: scale(1.6); transform-origin: 50% 0%; }
.br-grade { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .1) 65%, rgba(0, 0, 0, .85) 100%); }
.br-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.limb { cursor: pointer; transform-box: fill-box; transform-origin: 0% 50%; }
.limb .wood { fill: none; stroke: #23150b; stroke-width: 24; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(255, 210, 160, .75)); }
.limb .bark { fill: none; stroke: rgba(255, 214, 170, .22); stroke-width: 5; stroke-linecap: round; }
.limb .leaf { fill: #0e1d0f; stroke: rgba(160, 220, 140, .25); stroke-width: 1; }
.limb .lbl { font: 800 13px var(--body); fill: rgba(255, 240, 220, .85); }
.trunk { fill: #0b0705; }
.trunk.far { fill: rgba(20, 14, 10, .7); }
.limb .hit { fill: transparent; }
.br-svg:not(.locked) .limb .wood { filter: drop-shadow(0 0 2px rgba(255, 230, 190, .95)) drop-shadow(0 0 8px rgba(255, 210, 150, .4)); }
.limb.creak { animation: creak var(--creak, 300ms) steps(6) 1; }
@keyframes creak { 0% { transform: rotate(0); } 20% { transform: rotate(3.4deg) translateY(3px); } 45% { transform: rotate(-2.6deg); } 70% { transform: rotate(2deg) translateY(2px); } 100% { transform: rotate(0); } }
.limb.snapped { animation: snapDown .7s ease-in forwards; }
@keyframes snapDown { to { transform: rotate(28deg) translateY(120px); opacity: 0; } }
.perch { fill: none; stroke: #23150b; stroke-width: 22; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(255, 210, 160, .6)); }
.br-me { filter: drop-shadow(0 0 1.4px rgba(255, 220, 200, 1)) drop-shadow(0 0 8px rgba(225, 29, 46, .7)); transition: transform .6s, opacity .6s; transform-box: fill-box; transform-origin: 50% 100%; }
.br-me.hop { animation: brHop .7s ease-in-out; }
@keyframes brHop { 45% { transform: translateY(-150px) scale(.7); } 100% { transform: translateY(-240px) scale(.4); opacity: 0; } }
.br-me.fall { transform: translateY(260px) rotate(30deg); opacity: 0; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trio .btn { height: 60px; font-size: 24px; }

/* ---------- ROOM RUN ---------- */
.rm-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #050404; }
.rm-hall { position: absolute; inset: 0; transform-origin: 50% 48%; }
.rm-hall .photo { filter: saturate(.8) contrast(1.15) brightness(.6); }
.rm-grade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .1) 62%, rgba(0, 0, 0, .85) 100%); }
.rm-hall.rush { animation: rush 1.1s cubic-bezier(.5, 0, .7, 1); }
@keyframes rush { 0% { transform: scale(1); filter: none; } 70% { transform: scale(2.4); filter: blur(3px) brightness(1.6); } 71% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.door { position: absolute; display: grid; place-items: center; border: 2px solid rgba(255, 220, 190, .55); background: linear-gradient(180deg, rgba(60, 40, 28, .92), rgba(28, 18, 12, .95)); box-shadow: 0 0 18px rgba(255, 190, 140, .25), inset 0 0 18px rgba(0, 0, 0, .7); transition: transform .4s, box-shadow .3s; transform-origin: left center; }
.door .num { font-family: var(--display); font-size: 26px; color: rgba(255, 230, 200, .9); }
.door .knob { position: absolute; right: 12%; top: 52%; width: 6px; height: 6px; border-radius: 50%; background: #d6b37a; }
.door .mark { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; }
.door.d0 { left: 7%; top: 36%; width: 17%; height: 30%; transform: perspective(500px) rotateY(38deg); }
.door.d1 { left: 41.5%; top: 45%; width: 17%; height: 20%; }
.door.d2 { right: 7%; top: 36%; width: 17%; height: 30%; transform: perspective(500px) rotateY(-38deg); transform-origin: right center; }
.rm-hall:not(.locked) .door { cursor: pointer; animation: doorGlow 1.2s ease-in-out infinite alternate; }
@keyframes doorGlow { to { box-shadow: 0 0 28px rgba(255, 200, 150, .55), inset 0 0 18px rgba(0, 0, 0, .7); } }
.door.bad { border-color: rgba(239, 68, 68, .9); filter: brightness(.6); }
.door.bad .mark::after { content: '✕'; color: #ef4444; font-weight: 900; text-shadow: 0 0 10px #ef4444; }
.door.good { border-color: rgba(134, 239, 172, .95); box-shadow: 0 0 26px rgba(34, 197, 94, .6); }
.door.good .mark::after { content: '✓'; color: #86efac; font-weight: 900; text-shadow: 0 0 12px #22c55e; }
.door.open.d1 { background: radial-gradient(circle, rgba(255, 210, 150, .9), rgba(120, 60, 30, .8)); }
.rm-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(225, 29, 46, .15), rgba(225, 29, 46, .6)); }
.rm-flash.on { animation: flash .9s ease both; }
.rm-label { position: absolute; left: 0; right: 0; top: 70%; z-index: 4; text-align: center; font-family: var(--display); font-size: 30px; letter-spacing: 2px; text-shadow: 0 2px 14px #000; pointer-events: none; }
.rm-scene.dead .rm-label { color: var(--red); }
.rm-scene.safe .rm-label { color: var(--gold); }
.rm-scene.safe .rm-hall { filter: sepia(.4) brightness(1.1); }

/* ---------- FINAL DUEL ---------- */
.du-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #020203; }
.du-scene .photo { filter: grayscale(.3) contrast(1.2) brightness(.65); }
.du-grade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .05) 70%, rgba(0, 0, 0, .9) 100%); }
.du-light { position: absolute; left: 20%; right: 20%; top: 50%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 245, 220, .38), rgba(255, 245, 220, 0)); pointer-events: none; }
.du-scene.tense .du-light { animation: flicker 1.6s steps(8) infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 40% { opacity: .75; } 45% { opacity: 1; } 70% { opacity: .85; } }
.du-ring { position: absolute; left: 0; right: 0; top: 37%; height: 26%; }
.du-fig { position: absolute; bottom: 0; width: 70px; margin-left: -35px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .25s ease-out, opacity .6s; }
.du-body { width: 70px; height: 186px; overflow: visible; filter: drop-shadow(0 0 1.4px rgba(255, 240, 220, 1)) drop-shadow(0 0 7px rgba(255, 220, 180, .45)); }
.du-fig.you .du-body { filter: drop-shadow(0 0 1.4px rgba(255, 220, 200, 1)) drop-shadow(0 0 9px rgba(225, 29, 46, .8)); }
.du-fig.flip .du-body { transform: scaleX(-1); }
.du-fig.lunge { transform: translateX(34px); }
.du-fig.flip.lunge { transform: translateX(-34px); }
.du-fig.foul .du-body { filter: drop-shadow(0 0 3px rgba(255, 60, 60, 1)) grayscale(1); }
.du-fig.won .du-tag { background: var(--gold); color: #111; }
.du-fig.gone { opacity: .25; }
.du-tag { font: 800 11px var(--body); padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .7); white-space: nowrap; }
.du-tag.you { background: var(--red); }
.du-pips { display: flex; gap: 5px; }
.du-pips i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(253, 230, 138, .7); }
.du-pips i.on { background: radial-gradient(circle at 35% 35%, #fff7c2, #f5a524 60%, #b45309); border-color: #fde68a; box-shadow: 0 0 10px rgba(245, 165, 36, .8); }
.du-coin { position: absolute; left: 50%; top: 52%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 35% 35%, #fff7c2, #f5a524 55%, #92400e); box-shadow: 0 0 24px rgba(253, 230, 138, .9); }
.du-coin.drop { animation: coinDrop .45s cubic-bezier(.5, 0, .9, .6) forwards; }
@keyframes coinDrop { from { opacity: 1; transform: translateY(-340px) rotateY(0); } to { opacity: 1; transform: translateY(0) rotateY(720deg); } }
.du-coin.taken { opacity: 0 !important; transition: opacity .25s; }
.grab { width: 140px; height: 140px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; align-content: center; font-family: var(--display); font-size: 40px; letter-spacing: 2px; color: #a1a1aa; border: 2px solid rgba(255, 255, 255, .25); background: radial-gradient(circle at 50% 35%, #3f3f46, #18181b); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); touch-action: manipulation; }
.grab.go { color: #111; background: radial-gradient(circle at 50% 35%, #fff7c2, #f5a524 60%, #b45309); border-color: transparent; box-shadow: 0 0 0 10px rgba(245, 165, 36, .25), 0 0 70px rgba(245, 165, 36, .8); animation: sitPulse .45s ease infinite alternate; }
.grab.done { color: var(--gold); font-size: 24px; }
.grab small { display: block; font-family: var(--body); font-size: 12px; letter-spacing: 0; font-weight: 700; }

/* =================== STAGE 3 ROUNDS =================== */

/* ---------- LAST BULLET ---------- */
.lb-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #020203; --near: 0; }
.lb-scene .photo { filter: grayscale(.35) contrast(1.2) brightness(.6); }
.lb-fog { position: absolute; left: -20%; right: -20%; top: 30%; height: 35%; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(200, 200, 210, .14), transparent 70%); filter: blur(8px); animation: drift 12s ease-in-out infinite alternate; }
.lb-monster { position: absolute; left: 50%; top: 23%; width: 200px; height: 236px; margin-left: -100px; transform-origin: 50% 100%; transform: scale(calc(.55 + var(--near) * .1)) translateY(calc(var(--near) * 6px)); transition: transform 1s cubic-bezier(.3, .1, .3, 1); }
.mon { width: 100%; height: 100%; overflow: visible; animation: breathe 2.4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes breathe { to { transform: scaleY(1.025) translateY(-2px); } }
.mon-body { fill: #07040a; filter: drop-shadow(0 0 2px rgba(255, 150, 90, .55)) drop-shadow(0 0 16px rgba(225, 29, 46, .25)); }
.mon-eye { fill: #ffef9a; filter: drop-shadow(0 0 4px #ffcf40) drop-shadow(0 0 10px #ff6a00); animation: blinkEye 4.5s steps(1) infinite; }
@keyframes blinkEye { 0%, 92% { opacity: 1; } 94% { opacity: 0; } 97% { opacity: 1; } }
.lb-scene.hit .lb-monster { animation: recoil .5s ease-out; }
@keyframes recoil { 30% { filter: brightness(2.5) drop-shadow(0 0 20px #fff); translate: 0 -10px; } }
.lb-scene.down .lb-monster { transform: scale(calc(.55 + var(--near) * .1)) rotate(-24deg) translateY(120px); opacity: 0; transition: transform 1.4s ease-in, opacity 1.4s ease-in; }
.lb-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 70%, rgba(255, 240, 200, .9), rgba(255, 180, 80, .3) 40%, transparent 70%); }
.lb-flash.on { animation: muzzle .45s ease-out both; }
@keyframes muzzle { 0% { opacity: 1; } 100% { opacity: 0; } }
.lb-crowd { position: absolute; left: 0; right: 0; bottom: 30%; height: 20%; z-index: 3; }
.lb-fig { position: absolute; bottom: 0; width: 64px; margin-left: -32px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: opacity .6s; }
.lb-body { width: 64px; height: 170px; overflow: visible; filter: drop-shadow(0 0 1.4px rgba(255, 240, 220, 1)) drop-shadow(0 0 7px rgba(255, 220, 180, .45)); }
.lb-fig.you .lb-body { filter: drop-shadow(0 0 1.4px rgba(255, 220, 200, 1)) drop-shadow(0 0 9px rgba(225, 29, 46, .8)); }
.lb-fig.fired .lb-body { animation: kick .3s ease-out; }
@keyframes kick { 30% { transform: translateY(6px) scaleY(.97); } }
.lb-fig.gone { opacity: .25; }
.lb-chip { min-height: 22px; font: 800 11px var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #a1a1aa; }
.lb-chip:empty { visibility: hidden; }
.lb-chip.ok { color: #d4d4d8; }
.lb-chip.click { color: #e4e4e7; background: rgba(63, 63, 70, .85); }
.lb-chip.bang { color: #111; background: var(--gold); box-shadow: 0 0 18px rgba(253, 230, 138, .9); font-size: 14px; }
.cyl-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cylinder { width: 150px; height: 150px; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7)); }
.cyl { fill: #3a3c42; stroke: #9ca3af; stroke-width: 1.5; }
.cyl-pin { fill: #1f2126; stroke: #6b7280; }
.ch-hole { fill: #0a0b0d; stroke: #6b7280; stroke-width: 1; }
.ch-bullet { fill: #d6a54a; opacity: 0; stroke: #8a6420; }
.ch-primer { fill: #b8862e; opacity: 0; }
.ch.full .ch-bullet, .ch.full .ch-primer { opacity: 1; }
.cylinder.loading .ch { cursor: pointer; }
.cylinder.loading .ch-hole { stroke: #fde68a; stroke-width: 2; animation: holePulse .9s ease-in-out infinite alternate; }
@keyframes holePulse { to { stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(253, 230, 138, .8)); } }
.drum-rot { transform-box: fill-box; transform-origin: center; }
.cylinder.spinning .drum-rot { animation: cylSpin 1.45s cubic-bezier(.1, .55, .2, 1) forwards; }
@keyframes cylSpin { to { transform: rotate(var(--end, 720deg)); } }
.cylinder.shut { opacity: .45; transform: scale(.82); transition: opacity .4s, transform .4s; }
.spinbtn { width: 180px; height: 52px; font-size: 26px; }
.firebtn { width: 100%; height: 78px; border-radius: 18px; font-family: var(--display); font-size: 38px; letter-spacing: 4px; color: #fff; border: 0; background: linear-gradient(180deg, #ef4444, #991b1b); box-shadow: 0 10px 30px rgba(225, 29, 46, .5); touch-action: manipulation; }
.firebtn:active { transform: scale(.97); }
.firebtn[disabled] { opacity: .45; }

/* ---------- CRACKING LAKE ---------- */
.ck-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #03060a; }
.ck-scene .photo { filter: saturate(.55) contrast(1.1) brightness(.45) hue-rotate(-8deg); transform: scale(1.12); }
.ck-stage { position: absolute; inset: 0; perspective: 760px; perspective-origin: 50% 10%; z-index: 2; }
.ck-sheet { position: absolute; left: 50%; top: 64%; width: 0; height: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
.ck-sheet > * { position: absolute; }
.ck-tile { border-radius: 8px; transition: background .25s, opacity .4s, box-shadow .25s;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .4) 38%, transparent 46%), linear-gradient(160deg, rgba(225, 242, 255, .6), rgba(140, 185, 225, .32));
  border: 1px solid rgba(235, 248, 255, .7); box-shadow: 0 6px 0 rgba(80, 125, 170, .45), inset 0 0 14px rgba(255, 255, 255, .35); }
.ck-tile.crack { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 66'%3E%3Cpath d='M33 33 L12 6 M33 33 L58 12 M33 33 L62 44 M33 33 L40 64 M33 33 L4 50 M22 18 L9 22 M48 24 L52 6' stroke='%23ffffff' stroke-opacity='.85' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") center / cover, linear-gradient(160deg, rgba(200, 220, 240, .45), rgba(110, 140, 170, .3)); animation: shiver .18s linear infinite alternate; }
@keyframes shiver { to { transform: translateX(1px); } }
.ck-tile.gone { background: radial-gradient(70% 70% at 50% 50%, rgba(0, 6, 14, .9), rgba(10, 30, 50, .7)); border-color: rgba(200, 230, 255, .2); box-shadow: inset 0 0 14px rgba(0, 0, 0, .9); animation: none; }
.ck-tile.can { cursor: pointer; border: 2px solid #fff; box-shadow: 0 6px 0 rgba(80, 125, 170, .45), 0 0 18px rgba(200, 230, 255, .8); }
.ck-tile.can.crack { border-color: #fca5a5; }
.ck-shore, .ck-bank { border-radius: 14px; background: linear-gradient(180deg, rgba(240, 248, 255, .85), rgba(190, 215, 235, .7)); box-shadow: 0 8px 0 rgba(90, 120, 150, .5); display: grid; place-items: center; }
.ck-shore span { font: 800 13px var(--body); letter-spacing: .2em; color: #0f172a; }
.ck-shore.can { cursor: pointer; box-shadow: 0 8px 0 rgba(90, 120, 150, .5), 0 0 22px rgba(253, 230, 138, .9); }
.ck-fig { left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.3, .1, .3, 1), opacity .7s; }
.ck-fig .shadow { position: absolute; left: -14px; top: -6px; width: 28px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 10, 20, .6), transparent); }
.ck-fig .stand { position: absolute; left: -15px; bottom: 0; width: 30px; height: 80px; transform-origin: 50% 100%; transform: rotateX(-50deg); }
.ck-fig svg.body { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.2px rgba(220, 240, 255, .9)) drop-shadow(0 0 5px rgba(150, 200, 255, .45)); }
.ck-fig.you svg.body { filter: drop-shadow(0 0 1.4px rgba(255, 220, 200, 1)) drop-shadow(0 0 8px rgba(225, 29, 46, .8)); }
.ck-fig .tag { position: absolute; left: 50%; bottom: 100%; margin-bottom: 4px; transform: translateX(-50%); font: 800 10px var(--body); padding: 2px 6px; border-radius: 5px; background: var(--red); white-space: nowrap; }
.ck-fig.sink { opacity: 0; transition: opacity .8s; }
.ck-fig.sink .stand { clip-path: inset(0 0 60% 0); }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pad .btn { height: 54px; font-size: 26px; }
.pad .blank { visibility: hidden; }

/* ---------- FLOOR IS LAVA ---------- */
.lv-scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #0b0201; }
.lv-scene .photo { filter: saturate(1.1) contrast(1.15) brightness(.7); transform: scale(1.15); }
.lv-heat { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 50% 55%, rgba(255, 90, 20, .1), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .2) 24%, rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, .8) 100%); animation: heat 3s ease-in-out infinite alternate; }
@keyframes heat { to { filter: brightness(1.2); } }
.lv-field { position: absolute; left: 0; right: 0; top: 18%; bottom: 22%; z-index: 2; }
.lv-rock { position: absolute; width: calc(92px * var(--k, 1)); height: calc(70px * var(--k, 1)); margin: calc(-35px * var(--k, 1)) 0 0 calc(-46px * var(--k, 1)); border: 0; background: none; display: block; transition: transform .5s, opacity .5s; }
.lv-rock .stone { position: absolute; inset: 0; border-radius: 48% 52% 46% 54% / 56% 50% 50% 44%; background: radial-gradient(70% 60% at 40% 30%, #4b4642, #24201d 60%, #0f0c0a); box-shadow: 0 10px 0 #120d0a, 0 0 0 2px rgba(255, 140, 60, .25), 0 0 22px rgba(255, 90, 20, .45); }
.lv-rock.can { cursor: pointer; }
.lv-rock.can .stone { box-shadow: 0 10px 0 #120d0a, 0 0 0 2px rgba(255, 255, 255, .7), 0 0 22px rgba(255, 220, 160, .6); }
.lv-rock.mine .stone { box-shadow: 0 10px 0 #120d0a, 0 0 0 3px var(--red), 0 0 22px rgba(225, 29, 46, .6); }
.lv-rock.glow .stone { background: radial-gradient(70% 60% at 40% 30%, #ffb15a, #e2440f 55%, #6b1003); animation: glowHot .3s ease-in-out infinite alternate; }
@keyframes glowHot { to { filter: brightness(1.35); box-shadow: 0 10px 0 #4a0c03, 0 0 40px rgba(255, 120, 30, 1); } }
.lv-rock.sunk { transform: translateY(18px) scale(.6); opacity: 0; }
.lv-rock.full:not(.mine) .lv-count { color: #fca5a5; }
.lv-people { position: absolute; left: 50%; bottom: 46%; transform: translateX(-50%); display: flex; gap: 0; }
.lv-p svg { width: 22px; height: 58px; overflow: visible; filter: drop-shadow(0 0 1.2px rgba(255, 200, 150, .9)) drop-shadow(0 0 5px rgba(255, 120, 40, .5)); }
.lv-p.you svg { filter: drop-shadow(0 0 1.4px rgba(255, 230, 220, 1)) drop-shadow(0 0 8px rgba(225, 29, 46, .9)); }
.lv-count { position: absolute; left: 50%; top: 100%; margin-top: 6px; transform: translateX(-50%); font: 800 11px var(--body); color: #fde68a; background: rgba(0, 0, 0, .65); padding: 2px 7px; border-radius: 999px; }