:root {
  --bg: #0b0a10; --ink: #f6f1ec; --muted: #b9afb4; --line: rgba(255,255,255,.12);
  --red: #e8303f; --red2: #c0202e; --rose: #ff6b7a; --gold: #ffcf5a; --gold2: #f0a21f; --green: #2fbf71; --green2: #1f9a58; --blue: #2f6fe8; --blue2: #1f4fb8; --teal: #39e2c8;
  --glass: rgba(16, 14, 24, .62); --glass2: rgba(22, 18, 32, .82);
  --shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --display: 'Unbounded', 'Manrope', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #050408; color: var(--ink); font: 500 15px/1.4 var(--font); overflow: hidden; overscroll-behavior: none; }
#app { position: relative; width: 100%; height: 100%; max-width: 560px; margin: 0 auto; background: var(--bg); overflow: hidden; overflow: clip; }
button { font: inherit; color: inherit; }
a { color: var(--rose); }
h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: .2px; margin: 0; }

/* ---------- stage background behind every screen ---------- */
#bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
#bg img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; object-position: center 40%; filter: blur(14px) brightness(.5) saturate(1.1); }
#bg i { position: absolute; inset: 0; background: radial-gradient(90% 60% at 50% 25%, rgba(232,48,63,.18), rgba(0,0,0,0) 70%), linear-gradient(180deg, rgba(11,10,16,.55) 0%, rgba(11,10,16,.78) 45%, rgba(11,10,16,.94) 100%); }

/* ---------- title ---------- */
.screen { position: absolute; inset: 0; z-index: 50; background: #140a10; display: flex; flex-direction: column; justify-content: space-between; transition: opacity .6s, transform .6s; overflow: hidden; }
.screen.gone { opacity: 0; transform: scale(1.05); pointer-events: none; }
#splash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.ttop { position: relative; padding: calc(44px + env(safe-area-inset-top)) 24px 0; text-align: center; background: linear-gradient(180deg, rgba(20,8,14,.75), rgba(20,8,14,0)); }
.eyebrow { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #ffd9a8; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.ttop h1 { font-family: var(--display); font-weight: 900; font-size: 54px; line-height: .96; margin: 0; letter-spacing: -.5px; color: #fff; text-shadow: 0 3px 0 #a3202c, 0 7px 0 #6a1018, 0 16px 30px rgba(0,0,0,.55); }
.ttop h1 span { display: block; }
.ttop h1 .accent { font-size: 64px; color: #ffe08a; text-shadow: 0 3px 0 #d0801c, 0 7px 0 #8f5410, 0 16px 30px rgba(0,0,0,.55); }
.tag { color: #fff; margin: 12px 0 0; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 4px 14px rgba(0,0,0,.5); font-size: 14px; letter-spacing: .3px; }
.tcontent { position: relative; width: 100%; padding: 90px 26px calc(22px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(14,8,12,0) 0%, rgba(14,8,12,.8) 45%, #0e080c 100%); text-align: center; }
.tstatus { color: #a08a8e; font-size: 12px; margin: 10px 0 0; min-height: 16px; }
.mbr { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 800; color: #e9dcdc; letter-spacing: .4px; }
.mbr img { height: 34px; width: auto; }

/* ---------- buttons ---------- */
.btn { position: relative; background: linear-gradient(180deg, #ff6a6a, var(--red) 48%, var(--red2)); border: 0; border-radius: 18px; padding: 12px 18px; font-weight: 800; color: #fff; cursor: pointer; white-space: nowrap; letter-spacing: .2px; text-shadow: 0 1px 1px rgba(80,0,10,.4);
  box-shadow: 0 5px 0 #8a1420, 0 10px 24px rgba(232,48,63,.35), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .08s, box-shadow .08s; overflow: hidden; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a1420, 0 4px 12px rgba(232,48,63,.3), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.big { width: 100%; padding: 15px; font-size: 17px; margin-top: 10px; }
.btn.play { background: linear-gradient(180deg, #ffe680, #ffcf3a 50%, #ffb21e); color: #4a2f08; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0; text-shadow: 0 1px 0 rgba(255,255,255,.6); box-shadow: 0 6px 0 #cf8a0c, 0 14px 30px rgba(190,120,0,.4), inset 0 1px 0 rgba(255,255,255,.8); padding: 16px; }
.btn.play:active { transform: translateY(3px); box-shadow: 0 3px 0 #cf8a0c, 0 6px 14px rgba(190,120,0,.35), inset 0 1px 0 rgba(255,255,255,.8); }
.btn .shine { position: absolute; top: -40%; left: -60%; width: 40%; height: 180%; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0)); transform: rotate(12deg); animation: shine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 140%; } }
.btn.soft { background: linear-gradient(180deg, #3a3348, #2a2438); color: #fff; box-shadow: 0 4px 0 #14101c, 0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); text-shadow: none; }
.btn.gold { background: linear-gradient(180deg, #ffe07a, var(--gold) 50%, var(--gold2)); color: #4a2f08; text-shadow: 0 1px 0 rgba(255,255,255,.5); box-shadow: 0 5px 0 #b57a0c, 0 10px 22px rgba(240,162,31,.3), inset 0 1px 0 rgba(255,255,255,.7); }
.btn.green { background: linear-gradient(180deg, #6ee89a, var(--green) 50%, var(--green2)); box-shadow: 0 5px 0 #146b3c, 0 10px 22px rgba(47,191,113,.3), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.off, .btn:disabled { opacity: .45; cursor: default; }
.btn.round { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; padding: 14px 26px; border-radius: 999px; }
.btn.round .ic { width: 22px; height: 22px; }
.btn.round.on { background: linear-gradient(180deg, #4a4058, #2a2438); color: #fff; box-shadow: 0 5px 0 #14101c, 0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15); text-shadow: none; }
.lnk { background: none; border: 0; color: #ffd9a8; font-weight: 800; font-size: 13px; cursor: pointer; padding: 4px 8px 4px 0; white-space: nowrap; }

/* ---------- pages, pills, icons ---------- */
.page { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 14px 0; }
.page.on { display: flex; }
.top { display: flex; align-items: center; gap: 8px; min-height: 44px; z-index: 2; }
.top h2 { font-size: 20px; flex: 1; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.ptitle { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.ptitle b { font-family: var(--display); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptitle small { color: var(--muted); font-size: 12px; font-weight: 800; }
.pill { color: var(--ink); background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14); border-radius: 999px; padding: 5px 13px 5px 9px; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; min-height: 38px; cursor: pointer; }
.pill.gear, .pill.back { padding: 0; width: 40px; justify-content: center; font-size: 22px; }
.pill.back { font-size: 30px; line-height: 1; padding-bottom: 4px; }
.pill.small { font-size: 12px; min-height: 32px; padding: 3px 12px; }
.pill.gems { color: #bfffee; position: relative; }
.pill.gems em { font-style: normal; background: var(--green); color: #052; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.pill.crown { color: #a79a9a; padding: 5px 11px 5px 8px; }
.pill.crown.on { color: #4a2f08; background: linear-gradient(180deg, #ffe07a, var(--gold2)); border-color: #ffe7a0; }
.streakpill { color: #ffb08a; }
.ic { width: 20px; height: 20px; display: inline-block; background: center / contain no-repeat; flex: none; }
.ic.star { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8z' fill='%23ffcf5a'/%3E%3C/svg%3E"); }
.ic.fire { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 5 5 5 11a5 5 0 0 1-10 0c0-2 1-3 1-3s0 2 2 2c0-3-1-5 2-10z' fill='%23ff7a45'/%3E%3Cpath d='M12 12c1 2 2 3 2 4.5a2 2 0 0 1-4 0c0-1.5 1-2 2-4.5z' fill='%23ffd166'/%3E%3C/svg%3E"); }
.ic.gem { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9z' fill='%2339e2c8'/%3E%3Cpath d='M6 3l6 6 6-6M2 9h20M12 9l-4 13M12 9l4 13' stroke='%23106a5c' stroke-width='1.2' fill='none' opacity='.8'/%3E%3Cpath d='M6 3l6 6 6-6z' fill='%23bffff3'/%3E%3C/svg%3E"); }
.ic.crown { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8l4.5 4L12 5l4.5 7L21 8l-2 11H5z' fill='%23ffcf5a' stroke='%23b57a0c' stroke-width='1'/%3E%3C/svg%3E"); }
.ic.heart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z' fill='%23ff4d6d'/%3E%3C/svg%3E"); }
.ic.heart.off { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z' fill='%233a3348'/%3E%3C/svg%3E"); }
.ic.swords { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4l9 9M20 4l-9 9M4 20l4-4M20 20l-4-4' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M13 13l3 3M11 13l-3 3' stroke='%23ffcf5a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic.home { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5L12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z' fill='%23fff'/%3E%3C/svg%3E"); }
.ic.mic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8.5' y='2' width='7' height='12' rx='3.5' fill='%23fff'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12 17.5V21M8.5 21h7' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic.trophy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v6a5 5 0 0 1-10 0z' fill='%23fff'/%3E%3Cpath d='M7 5H4v2a4 4 0 0 0 3 3.9M17 5h3v2a4 4 0 0 1-3 3.9' stroke='%23fff' stroke-width='2' fill='none'/%3E%3Cpath d='M12 14v4M8 21h8M9 18h6' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic.menu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic.playic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4l13 8-13 8z' fill='%234a2f08'/%3E%3C/svg%3E"); }
.btn.round.on .ic.playic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='14' rx='3' fill='%23fff'/%3E%3C/svg%3E"); }
.ic.search { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' stroke='%23b9afb4' stroke-width='2.4' fill='none'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%23b9afb4' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic.lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10' width='14' height='11' rx='3' fill='%23ffcf5a'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' stroke='%23ffcf5a' stroke-width='2.4' fill='none'/%3E%3C/svg%3E"); }
.ic.half { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23fff'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='%235fd0ff'/%3E%3C/svg%3E"); }
.ic.clock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23fff' stroke-width='2.4' fill='none'/%3E%3Cpath d='M12 7v5l3 2' stroke='%23ffcf5a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic.skipic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l9 7-9 7z' fill='%23fff'/%3E%3Crect x='16' y='5' width='3' height='14' rx='1' fill='%23fff'/%3E%3C/svg%3E"); }
.ic.bulb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z' fill='%23ffcf5a'/%3E%3Cpath d='M9 20h6' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.scroll { flex: 1; overflow-y: auto; padding: 6px 0 calc(100px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.homescroll { margin: 0 -4px; padding-left: 4px; padding-right: 4px; }
.credit { color: #8d8290; font-size: 11px; line-height: 1.45; margin: 18px 4px 0; font-weight: 600; }

/* ---------- home HUD ---------- */
.hud { display: flex; align-items: center; gap: 8px; min-height: 48px; z-index: 2; }
.me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.ava { position: relative; width: 46px; height: 46px; flex: none; }
.ava svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ava .t { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 3; }
.ava .p { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100.5; stroke-dashoffset: 100.5; transition: stroke-dashoffset .6s; }
.ava b { position: absolute; inset: 5px; border-radius: 50%; background: linear-gradient(180deg, #ff6a6a, var(--red2)); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.who { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.who b { font-family: var(--display); font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.who small { color: #ffd9a8; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.gemsv { font-variant-numeric: tabular-nums; }

/* ---------- home: daily hero, modes, tiles ---------- */
.hero { position: relative; width: 100%; text-align: left; border: 1px solid rgba(255,140,150,.4); border-radius: 24px; padding: 16px 16px 14px; margin-top: 10px; color: #fff; cursor: pointer; overflow: hidden;
  background: linear-gradient(120deg, #7a1a2c 0%, #3a1020 55%, #1c1020 100%); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.18); }
.hero::before { content: ''; position: absolute; right: -40px; top: -30px; width: 190px; height: 190px; border-radius: 50%; background: url('../assets/img/vinyl.webp?v=202611021617') center / contain no-repeat; opacity: .55; animation: spin 14s linear infinite; }
.hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(255,107,122,.35), rgba(0,0,0,0) 60%); pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero small { display: block; color: #ffd9a8; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.hero b { display: block; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.05; margin-top: 4px; max-width: 70%; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero p { margin: 8px 0 0; color: #f2dfe3; font-size: 13px; font-weight: 700; max-width: 72%; }
.hero .row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hero .go { flex: none; white-space: nowrap; background: linear-gradient(180deg, #ffe680, #ffcf3a 50%, #ffb21e); color: #4a2f08; padding: 10px 18px; border-radius: 14px; font-weight: 800; font-family: var(--display); font-size: 14px; box-shadow: 0 4px 0 #cf8a0c, 0 8px 16px rgba(190,120,0,.35), inset 0 1px 0 rgba(255,255,255,.8); }
.hero .stat { flex: none; white-space: nowrap; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 7px 11px; font-size: 12px; font-weight: 800; color: #ffe39c; display: inline-flex; align-items: center; gap: 5px; }
.hero .stat .ic { width: 15px; height: 15px; }
.modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 10px; }
.mode { position: relative; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 14px 10px 12px; min-height: 108px; justify-content: flex-end; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; cursor: pointer; color: #fff; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .1s; }
.mode:active { transform: scale(.97); }
.mode .ic { width: 26px; height: 26px; margin-bottom: 4px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.mode b { font-family: var(--display); font-weight: 700; font-size: 14px; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.mode small { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85); line-height: 1.25; text-shadow: 0 1px 4px rgba(0,0,0,.8); max-width: 62%; }
.mode.open { background: linear-gradient(90deg, rgba(150,22,38,.96) 0%, rgba(90,16,32,.7) 45%, rgba(40,8,16,.15) 100%), url('../assets/img/mode_open.webp?v=202611021617') center right / cover no-repeat #5a1020; }
.mode.surv { background: linear-gradient(90deg, rgba(24,52,140,.96) 0%, rgba(20,26,72,.7) 45%, rgba(10,12,40,.15) 100%), url('../assets/img/mode_surv.webp?v=202611021617') center right / cover no-repeat #141a48; }
.mode.chal { background: linear-gradient(90deg, rgba(140,92,10,.96) 0%, rgba(74,47,8,.7) 45%, rgba(40,24,4,.15) 100%), url('../assets/img/mode_chal.webp?v=202611021617') center right / cover no-repeat #4a2f08; }
.mode.party { background: linear-gradient(90deg, rgba(100,30,170,.96) 0%, rgba(42,15,74,.7) 45%, rgba(20,8,40,.15) 100%), url('../assets/img/mode_party.webp?v=202611021617') center right / cover no-repeat #2a0f4a; }
.ic.party { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21l5-14 9 9z' fill='%23ffcf5a'/%3E%3Cpath d='M11 4l1 2M16 3l-1 3M20 8l-3 1M19 13l-2-1' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='9' r='1.6' fill='%23ff6b7a'/%3E%3C/svg%3E"); }
.ic.drink { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12l-1.5 16a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2z' fill='%23ffcf5a'/%3E%3Cpath d='M6.6 9h10.8' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }
/* party: pass-the-phone overlay, drink prompt, standings */
.pass { position: absolute; inset: 0; z-index: 30; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; background: radial-gradient(80% 60% at 50% 30%, rgba(138,43,226,.55), rgba(138,43,226,0) 70%), #0e0a16; }
.pass.on { display: flex; animation: rise2 .35s cubic-bezier(.2,.9,.3,1.2); }
.pass small { color: #e9d6ff; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.pass h2 { font-size: 40px; font-weight: 900; line-height: 1; margin: 8px 0 6px; text-shadow: 0 4px 0 #4a1a7a, 0 14px 30px rgba(0,0,0,.6); }
.pass p { margin: 0 0 18px; color: #e5dbe0; font-weight: 700; }
.pass .btn.big { max-width: 320px; }
.pass .mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.pass .mini span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 800; }
.pass .mini span.lead { color: #ffe39c; border-color: rgba(255,207,90,.5); }
.drink { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: linear-gradient(135deg, rgba(255,207,90,.22), rgba(232,48,63,.22)); border: 1px solid rgba(255,207,90,.5); border-radius: 16px; padding: 10px 12px; font-weight: 800; font-size: 14px; animation: rise2 .4s .2s both; }
.drink .ic { width: 30px; height: 30px; }
.drink small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.pchip { display: inline-flex; align-items: center; gap: 6px; background: rgba(138,43,226,.3); border: 1px solid rgba(190,120,255,.5); border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 800; color: #f0e0ff; }
.standing { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); margin-top: 6px; font-weight: 800; }
.standing .rk { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; background: rgba(255,255,255,.1); flex: none; }
.standing:nth-child(1) { background: linear-gradient(135deg, rgba(255,207,90,.25), rgba(255,207,90,.08)); border-color: rgba(255,207,90,.6); }
.standing:nth-child(1) .rk { background: linear-gradient(180deg, #ffe07a, var(--gold2)); color: #4a2f08; }
.standing:nth-child(2) .rk { background: linear-gradient(180deg, #e8e8f0, #a8a8b8); color: #222; }
.standing:nth-child(3) .rk { background: linear-gradient(180deg, #e0a070, #9a5a30); }
.standing span { flex: 1; min-width: 0; } .standing span small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.standing b { font-family: var(--display); font-weight: 700; color: #ffe39c; }
.plist { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.plist .pr { display: flex; gap: 6px; align-items: center; }
.plist .pr .field { flex: 1; }
.plist .pr .x { width: 40px; height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; font-weight: 800; font-size: 18px; cursor: pointer; }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 10px; }
.rules button { background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.12); border-radius: 14px; padding: 10px 6px; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rules button b { font-size: 13px; } .rules button small { font-size: 10px; color: var(--muted); font-weight: 700; text-align: center; line-height: 1.2; }
.rules button.on { border-color: var(--gold); background: rgba(255,207,90,.12); }
.rules button.on.adult { border-color: var(--red); background: rgba(232,48,63,.14); }
.rules button.on.family { border-color: var(--green); background: rgba(47,191,113,.14); }
.selrow { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 800; font-size: 14px; }
.selrow select { flex: 1; background: #17131f; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 10px; font: 700 14px var(--font); }
.selrow .seg2 { display: flex; gap: 4px; } .selrow .seg2 button { width: 38px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; font-weight: 800; cursor: pointer; } .selrow .seg2 button.on { background: var(--red); border-color: var(--red); }
.sech { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 20px 2px 10px; padding-right: 4px; }
.sech h2 { font-size: 19px; }
.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { position: relative; text-align: left; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 0; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; overflow: hidden; color: #fff; background: hsl(var(--h) 45% 18%); box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14); transition: transform .1s; }
.tile:active { transform: scale(.97); }
.tile .mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tile .mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .mosaic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,16,.05) 20%, rgba(11,10,16,.55) 55%, rgba(11,10,16,.96) 100%); }
.tile .tb { position: relative; padding: 10px 12px 11px; }
.tile b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.1; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.tile small { display: block; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.8); margin-top: 2px; }
.tile span { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #ffe39c; margin-top: 6px; background: rgba(0,0,0,.45); padding: 3px 8px; border-radius: 99px; }
.tile .lk { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.6); border: 1px solid rgba(255,207,90,.5); display: flex; align-items: center; justify-content: center; z-index: 1; }
.tile .lk .ic { width: 16px; height: 16px; }
.tile.locked .mosaic img { filter: grayscale(.5) brightness(.7); }
.peek { margin-top: 14px; background: var(--glass2); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 12px 14px; box-shadow: var(--shadow); }
.peek h3 { font-size: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.peek h3 .lnk { font-size: 12px; }

/* ---------- leaderboard rows ---------- */
.rows { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.row { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-weight: 700; font-size: 14px; color: #fff; text-decoration: none; text-align: left; width: 100%; }
.row .rk { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 12px; flex: none; }
.row:nth-child(1) .rk { background: linear-gradient(180deg, #ffe07a, var(--gold2)); color: #4a2f08; }
.row:nth-child(2) .rk { background: linear-gradient(180deg, #e8e8f0, #a8a8b8); color: #222; }
.row:nth-child(3) .rk { background: linear-gradient(180deg, #e0a070, #9a5a30); color: #fff; }
.row .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.row .nm .ic { width: 16px; height: 16px; }
.row .nm.vip { color: #ffe39c; }
.row .mt { color: var(--muted); font-size: 11px; font-weight: 700; }
.row .sc { font-family: var(--display); font-weight: 700; font-size: 14px; color: #ffe39c; font-variant-numeric: tabular-nums; }
.row.me { border-color: rgba(255,207,90,.6); background: rgba(255,207,90,.12); }
.row.empty { justify-content: center; color: var(--muted); font-size: 13px; }
.tabs { display: flex; gap: 6px; margin-top: 8px; background: rgba(255,255,255,.06); border-radius: 14px; padding: 4px; }
.tabs button { flex: 1; background: none; border: 0; border-radius: 11px; padding: 9px 0; font-weight: 800; font-size: 13px; color: var(--muted); cursor: pointer; }
.tabs button.on { background: linear-gradient(180deg, #ff6a6a, var(--red) 48%, var(--red2)); color: #fff; box-shadow: 0 3px 0 #8a1420; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; min-height: 0; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 99px; padding: 6px 12px; font-weight: 800; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.chips button.on { color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); }
.rankline { margin-top: 10px; display: flex; gap: 8px; }
.rankline .stat { flex: 1; background: var(--glass2); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; line-height: 1.15; }
.rankline .stat b { font-family: var(--display); font-weight: 700; font-size: 17px; color: #ffe39c; }
.rankline .stat small { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }

/* ---------- deck (vinyl + eq) ---------- */
.deck { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0 6px; }
.vinyl { position: relative; width: 180px; height: 180px; display: block; }
.vinyl.small { width: 118px; height: 118px; }
.vinyl .disc { position: absolute; inset: 0; border-radius: 50%; background: url('../assets/img/vinyl.webp?v=202611021617') center / 100% 100% no-repeat; box-shadow: 0 18px 40px rgba(0,0,0,.6); animation: spin 2.4s linear infinite paused; }
.vinyl.spin .disc { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
.vinyl .label { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; background: #e8303f; box-shadow: 0 0 0 2px #ffcf5a, 0 0 0 5px #1a1420; }
.vinyl .label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vinyl .eq { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: flex; gap: 4px; align-items: flex-end; height: 22px; opacity: 0; transition: opacity .3s; }
.vinyl.spin .eq { opacity: 1; }
.eq i { width: 5px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #ffe07a, var(--gold2)); animation: eq .55s ease-in-out infinite alternate; box-shadow: 0 0 8px rgba(255,207,90,.6); }
.eq i:nth-child(2) { animation-delay: .12s; } .eq i:nth-child(3) { animation-delay: .24s; } .eq i:nth-child(4) { animation-delay: .06s; } .eq i:nth-child(5) { animation-delay: .3s; } .eq i:nth-child(6) { animation-delay: .18s; } .eq i:nth-child(7) { animation-delay: .4s; }
@keyframes eq { from { height: 5px; } to { height: 22px; } }
/* vinyl skins (bought with gems) */
[data-skin="gold"] .vinyl .disc, .vinyl[data-skin="gold"] .disc { filter: sepia(1) saturate(2.2) hue-rotate(-10deg) brightness(1.1); }
[data-skin="neon"] .vinyl .disc, .vinyl[data-skin="neon"] .disc { filter: hue-rotate(110deg) saturate(2.4) brightness(1.1); box-shadow: 0 0 30px rgba(57,226,200,.6), 0 18px 40px rgba(0,0,0,.6); }
[data-skin="fire"] .vinyl .disc, .vinyl[data-skin="fire"] .disc { filter: hue-rotate(-20deg) saturate(2) contrast(1.1); box-shadow: 0 0 34px rgba(255,120,40,.7), 0 18px 40px rgba(0,0,0,.6); }
[data-skin="ice"] .vinyl .disc, .vinyl[data-skin="ice"] .disc { filter: hue-rotate(190deg) saturate(1.6) brightness(1.15); box-shadow: 0 0 30px rgba(95,208,255,.6), 0 18px 40px rgba(0,0,0,.6); }
[data-skin="classic"] .vinyl .disc { filter: none; }
[data-skin="gold"] .hero::before { filter: sepia(1) saturate(2.2) hue-rotate(-10deg) brightness(1.1); }
[data-skin="neon"] .hero::before { filter: hue-rotate(110deg) saturate(2.4) brightness(1.1); }
[data-skin="fire"] .hero::before { filter: hue-rotate(-20deg) saturate(2) contrast(1.1); }
[data-skin="ice"] .hero::before { filter: hue-rotate(190deg) saturate(1.6) brightness(1.15); }
.skin em { display: block; font-style: normal; font-size: 10px; color: #ffe39c; font-weight: 800; line-height: 1.2; margin: 2px 0 4px; min-height: 24px; }
.skin { width: 112px; }

/* ---------- daily ---------- */
.seg { display: flex; gap: 3px; width: 100%; max-width: 360px; height: 10px; }
.seg i { display: block; height: 100%; background: rgba(255,255,255,.08); border-radius: 6px; overflow: hidden; position: relative; }
.seg i.open { background: rgba(255,207,90,.22); box-shadow: inset 0 0 0 1px rgba(255,207,90,.35); }
.seg i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffe07a, var(--gold2)); }
.dctl { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.clen { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.dhint .btn { font-size: 13px; padding: 9px 14px; display: inline-flex; align-items: center; gap: 6px; }
.dhint .btn .cost { background: rgba(57,226,200,.16); border: 1px solid rgba(57,226,200,.4); color: #bfffee; border-radius: 99px; padding: 1px 8px; font-size: 11px; }
.dhint .rev { display: inline-block; background: rgba(255,207,90,.14); border: 1px solid rgba(255,207,90,.4); border-radius: 12px; padding: 7px 14px; font-weight: 800; font-size: 13px; color: #ffe39c; }
.guesses { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.g { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-weight: 700; font-size: 14px; }
.g span { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: rgba(255,255,255,.1); color: var(--muted); flex: none; }
.g em { font-style: normal; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g em small { color: #8d8290; font-weight: 700; }
.g.cur { border-color: rgba(255,207,90,.5); box-shadow: 0 0 0 1px rgba(255,207,90,.25); }
.g.cur span { background: var(--gold); color: #4a2f08; }
.g.bad { background: rgba(232,48,63,.14); border-color: rgba(232,48,63,.4); } .g.bad em { color: #ffb3ba; } .g.bad span { background: var(--red); color: #fff; }
.g.skip em { color: #8d8290; }
.g.ok { background: rgba(47,191,113,.16); border-color: rgba(47,191,113,.5); } .g.ok em { color: #c8ffd7; } .g.ok span { background: var(--green); color: #053816; }
.inputwrap { margin-top: 12px; position: relative; }
.field { display: flex; align-items: center; gap: 8px; background: #17131f; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 0 12px; box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }
.field input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: 700 16px var(--font); padding: 13px 0; }
.field input::placeholder { color: #6f6675; }
.sug { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 300px; overflow-y: auto; }
.sug .s { display: flex; align-items: center; gap: 10px; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 7px 10px; cursor: pointer; color: #fff; }
.sug .s:active { background: rgba(255,255,255,.14); }
.sug .s.none { color: var(--muted); font-size: 13px; font-weight: 700; justify-content: center; }
.sug .s span { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.sug .s b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug .s small { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex: none; background: #2a2438; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.art.none { display: inline-block; }
.drow { display: flex; gap: 10px; margin-top: 10px; }
.drow .btn { flex: 1; }
.reveal { display: none; margin-top: 12px; }
.reveal.on { display: block; animation: rise2 .4s cubic-bezier(.2,.9,.3,1.2); }
@keyframes rise2 { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.rv { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--glass2); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow); }
.rv.ok { border-color: rgba(47,191,113,.6); } .rv.bad { border-color: rgba(232,48,63,.6); }
.rv .art { width: 72px; height: 72px; border-radius: 14px; }
.rt { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; gap: 2px; }
.rt small { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.rv.ok .rt small { color: #6ee89a; } .rv.bad .rt small { color: var(--rose); }
.rt b { font-family: var(--display); font-weight: 700; font-size: 15px; }
.rt span { color: #e5dbe0; font-size: 13px; font-weight: 700; }
.rt .am { font-size: 12px; font-weight: 800; color: #ffb3ba; margin-top: 4px; text-decoration: none; }
.next { color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; margin: 12px 0 0; }
.share { background: #17131f; border-radius: 12px; padding: 12px; font: 700 14px/1.5 var(--font); white-space: pre-wrap; color: #fff; }
.boardbox { margin-top: 14px; }
.boardbox h3 { font-size: 14px; margin: 0 2px 4px; }

/* ---------- round ---------- */
.rhud { display: flex; align-items: center; gap: 8px; min-height: 48px; z-index: 2; }
.rmid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rmid small { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dots { display: flex; gap: 4px; min-height: 9px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); transition: transform .2s; }
.dots i.ok { background: var(--green); box-shadow: 0 0 6px rgba(47,191,113,.7); } .dots i.bad { background: var(--red); } .dots i.cur { background: #fff; transform: scale(1.25); }
.rscore { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; min-width: 70px; }
.rscore b { font-family: var(--display); font-weight: 900; font-size: 24px; color: #ffe08a; text-shadow: 0 2px 0 #8f5410, 0 6px 16px rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.rscore b.pop { animation: pop2 .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop2 { 0% { transform: scale(1.35); color: #fff; } 100% { transform: none; } }
.combo { font-size: 11px; font-weight: 800; color: #ff9a6e; letter-spacing: .5px; min-height: 13px; display: flex; align-items: center; gap: 3px; }
.combo.x2 { color: #ffb347; } .combo.x3 { color: #ff6b3d; text-shadow: 0 0 10px rgba(255,107,61,.8); }
.combo .ic { width: 13px; height: 13px; }
.rbody { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.rbody .deck { flex: none; }
#rreveal.on ~ .powers, #rreveal.on + .powers { display: none; }
.lives { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 2px; }
.lives .ic { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.lives .ic.on { animation: beat 1.1s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.12); } }
.timer { position: relative; width: 176px; height: 176px; display: flex; align-items: center; justify-content: center; }
.timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.timer .trk { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 7; }
.timer .arc { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; transition: stroke .3s; filter: drop-shadow(0 0 6px rgba(255,207,90,.6)); }
.timer.hot .arc { stroke: var(--red); filter: drop-shadow(0 0 6px rgba(232,48,63,.7)); }
.timer b { position: absolute; right: -2px; bottom: 8px; font-family: var(--display); font-weight: 800; font-size: 20px; background: #17131f; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; min-width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.timer.hot b { color: var(--rose); animation: beat .5s ease-in-out infinite; }
.timer.blocked { cursor: pointer; }
.timer.blocked .vinyl::after { content: ''; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,207,90,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l11 7-11 7z' fill='%234a2f08'/%3E%3C/svg%3E") center / 26px no-repeat; box-shadow: 0 6px 16px rgba(0,0,0,.5); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.12); } }
.rhint { margin: 0; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase; min-height: 16px; }
.float { position: absolute; left: 0; right: 0; top: 30px; pointer-events: none; text-align: center; z-index: 3; }
.float span { display: inline-block; font-family: var(--display); font-weight: 900; font-size: 30px; color: #ffe08a; text-shadow: 0 3px 0 #8f5410, 0 8px 20px rgba(0,0,0,.6); animation: floatup 1.1s ease-out forwards; }
.float span.bad { color: var(--rose); text-shadow: 0 3px 0 #6a1018, 0 8px 20px rgba(0,0,0,.6); }
.float span.x2 { color: #ffb347; } .float span.x3 { color: #ff6b3d; }
@keyframes floatup { 0% { transform: translateY(20px) scale(.6); opacity: 0; } 20% { transform: translateY(0) scale(1.15); opacity: 1; } 100% { transform: translateY(-60px) scale(1); opacity: 0; } }
.choices { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 9px; margin-top: 8px; flex: 1; min-height: 0; max-height: 46vh; }
.choice { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; gap: 2px; padding: 12px 12px 12px 14px; min-height: 92px; height: 100%; border-radius: 20px; border: 0; cursor: pointer; color: #fff; line-height: 1.15; overflow: hidden; transition: transform .08s, filter .2s, opacity .3s; }
.choice::before { content: ''; position: absolute; left: 12px; bottom: 9px; width: 12px; height: 12px; opacity: .6; z-index: 2; }
.choice .bg { position: absolute; right: 0; top: 0; bottom: 0; width: 62%; background: center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); opacity: .95; }
.choice .tx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; max-width: 72%; padding-bottom: 14px; }
.choice .tx b, .choice .tx small { text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 4px 14px rgba(0,0,0,.6); }
.choice.c-gold .tx b, .choice.c-gold .tx small { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 4px 14px rgba(0,0,0,.6); }
.choice.c-red { background: linear-gradient(180deg, #ff6a6a, var(--red) 45%, var(--red2)); box-shadow: 0 6px 0 #8a1420, 0 12px 24px rgba(232,48,63,.3), inset 0 1px 0 rgba(255,255,255,.35); }
.choice.c-red::before { background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.choice.c-blue { background: linear-gradient(180deg, #6f9bff, var(--blue) 45%, var(--blue2)); box-shadow: 0 6px 0 #122f70, 0 12px 24px rgba(47,111,232,.3), inset 0 1px 0 rgba(255,255,255,.35); }
.choice.c-blue::before { background: #fff; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.choice.c-gold { background: linear-gradient(180deg, #ffe07a, var(--gold2) 45%, #c47c10); color: #3a2306; text-shadow: 0 1px 0 rgba(255,255,255,.35); box-shadow: 0 6px 0 #7a4e08, 0 12px 24px rgba(240,162,31,.3), inset 0 1px 0 rgba(255,255,255,.6); }
.choice.c-gold::before { background: #3a2306; border-radius: 50%; }
.choice.c-green { background: linear-gradient(180deg, #6ee89a, var(--green) 45%, var(--green2)); box-shadow: 0 6px 0 #0f5a33, 0 12px 24px rgba(47,191,113,.3), inset 0 1px 0 rgba(255,255,255,.35); }
.choice.c-green::before { background: #fff; border-radius: 3px; }
.choice:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.choice:disabled { cursor: default; }
.choice b { font-size: 15px; font-weight: 800; }
.choice small { font-size: 12px; font-weight: 700; opacity: .85; }
.choice.ok { outline: 3px solid #fff; outline-offset: -3px; animation: win .5s cubic-bezier(.34,1.56,.64,1); }
.choice.bad { filter: saturate(.3) brightness(.6); animation: shake .4s; }
.choice.dim { filter: saturate(.2) brightness(.45); }
.choice.removed { opacity: .18; filter: grayscale(1); pointer-events: none; transform: scale(.94); }
@keyframes win { 0% { transform: scale(.96); } 50% { transform: scale(1.04); } 100% { transform: none; } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.powers { display: flex; gap: 8px; margin-top: 10px; }
.pw { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--glass2); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 8px 6px 7px; cursor: pointer; color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.pw .ic { width: 22px; height: 22px; }
.pw .cost { display: inline-flex; align-items: center; gap: 3px; background: rgba(57,226,200,.16); border: 1px solid rgba(57,226,200,.4); color: #bfffee; border-radius: 99px; padding: 1px 7px; font-size: 10px; }
.pw .cost .ic { width: 11px; height: 11px; }
.pw .cost.free { background: rgba(255,207,90,.18); border-color: rgba(255,207,90,.5); color: #ffe39c; }
.pw:disabled { opacity: .4; cursor: default; }
#rreveal .btn.big { margin-top: 10px; }
.autonext { height: 4px; background: rgba(255,255,255,.12); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.autonext i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffe07a, var(--gold2)); transition: width 2.6s linear; }
.deadbox { text-align: center; padding: 14px 0 0; }
.deadbox h3 { font-size: 20px; }
.deadbox p { color: #e5dbe0; margin: 6px 0 4px; font-size: 14px; }
.deadbox .btn.big { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- results ---------- */
.resultcard { position: relative; text-align: center; padding: 10px 14px 16px; border-radius: 24px; background: linear-gradient(180deg, rgba(90,20,36,.75), rgba(28,22,40,.9)); border: 1px solid rgba(255,120,130,.35); box-shadow: var(--shadow); margin-top: 6px; overflow: hidden; }
.cup { width: 140px; height: 140px; object-fit: contain; display: block; margin: -4px auto 0; filter: drop-shadow(0 12px 20px rgba(0,0,0,.6)); animation: bounce .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes bounce { 0% { transform: scale(.6) translateY(20px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.stars { display: flex; justify-content: center; gap: 6px; margin: 2px 0 6px; }
.st { width: 34px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8z' fill='%23463a52'/%3E%3C/svg%3E") center / contain no-repeat; }
.st.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2l-6.1 3.4 1.4-6.8L2.2 9.1l6.9-.8z' fill='%23ffcf5a' stroke='%23b57a0c' stroke-width='.8'/%3E%3C/svg%3E"); animation: pop .5s calc(var(--i) * .15s) cubic-bezier(.34,1.56,.64,1) both; filter: drop-shadow(0 0 8px rgba(255,207,90,.6)); }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.score { display: block; font-family: var(--display); font-weight: 900; font-size: 46px; line-height: 1; color: #ffe08a; text-shadow: 0 3px 0 #8f5410, 0 10px 24px rgba(0,0,0,.5); }
.resultcard > small { display: block; color: #e9dfe3; font-weight: 800; font-size: 13px; margin-top: 8px; }
.gemsline { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: rgba(57,226,200,.14); border: 1px solid rgba(57,226,200,.45); color: #bfffee; border-radius: 99px; padding: 6px 14px; font-weight: 800; font-size: 13px; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 12px; background: rgba(0,0,0,.3); border-radius: 16px; padding: 10px; }
.vs div { display: flex; flex-direction: column; line-height: 1.1; }
.vs b { font-family: var(--display); font-weight: 800; font-size: 20px; color: #fff; } .vs small { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.vs .win b { color: #6ee89a; } .vs em { font-style: normal; font-family: var(--display); font-weight: 800; color: #ffcf5a; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.badge { display: flex; flex-direction: column; text-align: left; gap: 1px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 8px 12px; min-width: 46%; flex: 1; opacity: .5; }
.badge.on, .resultcard .badge { opacity: 1; border-color: rgba(255,207,90,.5); background: linear-gradient(180deg, rgba(255,207,90,.18), rgba(255,207,90,.06)); }
.badge b { font-size: 13px; font-weight: 800; color: #ffe39c; } .badge small { font-size: 11px; color: var(--muted); font-weight: 700; }
.answers { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ans { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.ans.ok { border-color: rgba(47,191,113,.45); } .ans.bad { border-color: rgba(232,48,63,.45); }
.ans span { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.ans b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ans small { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ans em { font-style: normal; font-weight: 800; font-size: 13px; color: #6ee89a; } .ans.bad em { color: var(--rose); }
.dock { display: flex; gap: 8px; padding: 10px 0 calc(16px + env(safe-area-inset-bottom)); }
.dock .btn { flex: 1; padding: 13px 10px; }

/* ---------- stats, shop ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.tilestat { background: var(--glass2); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 12px 8px; text-align: center; }
.tilestat b { display: block; font-family: var(--display); font-weight: 700; font-size: 18px; color: #ffe39c; }
.tilestat small { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
#statsbody h3, #shopbody h3 { font-size: 15px; margin: 20px 2px 8px; }
.vipcard { position: relative; background: linear-gradient(135deg, #ffe07a, #f0a21f 60%, #c47c10); color: #3a2306; border-radius: 22px; padding: 16px; margin-top: 8px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.7); overflow: hidden; }
.vipcard::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 70%); }
.vipcard h3 { font-size: 20px; display: flex; align-items: center; gap: 8px; }
.vipcard h3 .ic { width: 26px; height: 26px; }
.vipcard ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.vipcard .on { margin-top: 8px; font-weight: 800; font-size: 13px; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px; }
.packs.two { grid-template-columns: repeat(2, 1fr); }
.pack { position: relative; background: var(--glass2); border: 2px solid rgba(255,255,255,.12); border-radius: 18px; padding: 16px 6px 12px; text-align: center; cursor: pointer; color: #fff; font: inherit; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.pack.tagged { border-color: var(--gold); }
.pack em { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, #ffe07a, var(--gold2)); color: #4a2f08; font-style: normal; font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.pack .ic { width: 40px; height: 40px; margin-bottom: 4px; }
.pack b { display: block; font-size: 15px; font-family: var(--display); font-weight: 700; }
.pack small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.pack .price { display: inline-block; margin-top: 8px; background: linear-gradient(180deg, #6ee89a, var(--green) 50%, var(--green2)); color: #fff; font-weight: 900; padding: 6px 12px; border-radius: 10px; font-size: 13px; box-shadow: 0 3px 0 #0f5a33; }
.unlockrow { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 8px 10px; margin-top: 6px; }
.unlockrow .mini { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; flex: none; background: #2a2438; }
.unlockrow .mini img { width: 100%; height: 100%; object-fit: cover; }
.unlockrow span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.unlockrow b { font-size: 14px; } .unlockrow small { color: var(--muted); font-size: 12px; font-weight: 700; }
.unlockrow .btn { padding: 9px 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.unlockrow .btn .ic { width: 14px; height: 14px; }
.skins { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; }
.skins::-webkit-scrollbar { display: none; }
.skin { flex: none; width: 96px; background: var(--glass2); border: 2px solid rgba(255,255,255,.12); border-radius: 16px; padding: 10px 6px 8px; text-align: center; cursor: pointer; color: #fff; font: inherit; }
.skin.on { border-color: var(--gold); }
.skin .vinyl { width: 58px; height: 58px; margin: 0 auto 6px; }
.skin .vinyl .disc { box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.skin b { display: block; font-size: 12px; font-weight: 800; }
.skin small { display: inline-flex; align-items: center; gap: 3px; color: #bfffee; font-size: 11px; font-weight: 800; }
.skin small .ic { width: 11px; height: 11px; }
.bests { display: flex; flex-direction: column; gap: 5px; }
.brow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,.05); border-radius: 12px; font-weight: 700; font-size: 14px; }
.brow span { flex: 1; } .brow b { color: #ffe39c; }
.brow .disc { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, hsl(var(--h) 80% 55%) 0 25%, #15121a 27% 100%); }

/* ---------- nav ---------- */
#nav { position: absolute; left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; display: flex; background: var(--glass2); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 6px; box-shadow: var(--shadow); }
#nav.hide { display: none; }
#nav button { flex: 1; background: none; border: 0; border-radius: 16px; padding: 7px 0 5px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 800; color: var(--muted); cursor: pointer; }
#nav button.on { color: #fff; background: rgba(255,255,255,.1); }
#nav button .ic { opacity: .65; } #nav button.on .ic { opacity: 1; }

/* ---------- sheet, modal, toasts, confetti ---------- */
.sheet { position: absolute; inset: 0; z-index: 60; background: rgba(0,0,0,.55); display: none; align-items: flex-end; }
.sheet.on { display: flex; }
.sbox { width: 100%; max-height: 88%; overflow-y: auto; background: #171320; border-radius: 26px 26px 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.6); animation: up .3s cubic-bezier(.2,.9,.3,1.1); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); margin: 0 auto 10px; }
.sbox h3 { font-size: 18px; margin: 4px 0 10px; }
.mrow { display: flex; align-items: center; width: 100%; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 13px 14px; font-weight: 800; font-size: 15px; color: #fff; margin-top: 6px; cursor: pointer; text-decoration: none; }
.mrow.tog i { margin-left: auto; width: 44px; height: 26px; border-radius: 13px; background: #3a3348; position: relative; transition: background .2s; }
.mrow.tog i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; }
.mrow.tog.on i { background: var(--green); } .mrow.tog.on i::after { left: 21px; }
.modelist { display: flex; flex-direction: column; gap: 2px; }
#modal { position: absolute; inset: 0; z-index: 70; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; padding: 20px; }
#modal.on { display: flex; }
.mbox { width: 100%; max-width: 400px; max-height: 90%; overflow-y: auto; background: #171320; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 20px; box-shadow: var(--shadow); animation: rise2 .3s cubic-bezier(.2,.9,.3,1.2); }
.mbox h3 { font-size: 20px; margin-bottom: 8px; }
.mbox p { margin: 0 0 10px; color: #e5dbe0; font-size: 14px; line-height: 1.5; }
.mbox .btn { width: 100%; margin-top: 8px; }
.mbox .btn.big { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mbox .mbr { margin: 6px 0 10px; }
.mbox .field { margin: 6px 0 4px; }
.mbox .drow .btn { margin-top: 0; }
#toasts { position: absolute; left: 0; right: 0; top: calc(60px + env(safe-area-inset-top)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { background: rgba(23,19,32,.95); border: 1px solid rgba(255,255,255,.16); color: #fff; padding: 9px 16px; border-radius: 999px; font-weight: 800; font-size: 13px; box-shadow: var(--shadow); opacity: 0; transform: translateY(-10px); transition: opacity .25s, transform .25s; display: flex; align-items: center; gap: 6px; }
.toast.on { opacity: 1; transform: none; }
.toast.gem { border-color: rgba(57,226,200,.5); color: #bfffee; }
#confetti { position: absolute; inset: 0; z-index: 65; pointer-events: none; overflow: hidden; }
#confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall 2s linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .6; } }
@media (min-height: 780px) { .vinyl { width: 200px; height: 200px; } .choice { min-height: 104px; } .timer { width: 196px; height: 196px; } .vinyl.small { width: 132px; height: 132px; } }
@media (max-height: 680px) { .timer { width: 150px; height: 150px; } .vinyl.small { width: 100px; height: 100px; } .choice { min-height: 78px; } }
.pack .per { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 700; }
.subnote { margin: 10px 4px 0; color: #9d929f; font-size: 11px; line-height: 1.45; font-weight: 600; }
.subnote a { color: #ffd9a8; font-weight: 800; text-decoration: none; }