@font-face { font-family: 'Game'; src: url(../assets/fonts/lilita-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF; font-display: block; }
@font-face { font-family: 'Game'; src: url(../assets/fonts/lilita-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF; font-display: block; }
@font-face { font-family: 'Game'; src: url(../assets/fonts/rubik-cyr.woff2) format('woff2'); font-weight: 400 900; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: block; }
@font-face { font-family: 'Game'; src: url(../assets/fonts/rubik-cyr-ext.woff2) format('woff2'); font-weight: 400 900; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F; font-display: block; }
@font-face { font-family: 'Body'; src: url(../assets/fonts/rubik-latin.woff2) format('woff2'); font-weight: 400 900; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Body'; src: url(../assets/fonts/rubik-cyr.woff2) format('woff2'); font-weight: 400 900; unicode-range: U+0400-045F; }

:root {
  --dp: calc(100vmin / 375);
  --bg-blue-1: #2F6BE8; --bg-blue-2: #1C46B4; --panel-blue: #3C86E9; --panel-blue-hi: #5AA2F2; --panel-border: #1F3F9E;
  --well: rgba(26, 34, 64, 0.85); --nav-dark: #353C4E; --nav-dark-lo: #222838; --bar-top: #0E1220;
  --yellow-1: #FFDB5C; --yellow-2: #E7A92F; --yellow-lip: #B07A12;
  --blue-1: #5A95FF; --blue-2: #3A6EF5; --blue-lip: #2448B8;
  --orange: #F28C28; --red: #E93423; --red-lip: #A11B10; --green: #58D34A; --green-lip: #2E8A24; --purple: #7B3FE0;
  --ink: #10162B;
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg-blue-2); color: #fff; font-family: 'Game', 'Rubik', system-ui, sans-serif; font-weight: 900; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#ui { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#ui > * { pointer-events: auto; }

.t { color: #fff; -webkit-text-stroke: calc(2.4 * var(--dp)) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(2.4 * var(--dp)) 0 var(--ink); letter-spacing: 0.02em; }
.t-y { color: #FFD43B; }
.upper { text-transform: uppercase; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--dp)); cursor: pointer; border: calc(2 * var(--dp)) solid var(--ink); border-radius: calc(8 * var(--dp)); padding: calc(6 * var(--dp)) calc(14 * var(--dp)); text-transform: uppercase; font-size: calc(15 * var(--dp)); background: linear-gradient(var(--blue-1), var(--blue-2)); box-shadow: inset 0 calc(3 * var(--dp)) 0 rgba(255,255,255,.4), 0 calc(5 * var(--dp)) 0 var(--blue-lip), 0 calc(7 * var(--dp)) calc(5 * var(--dp)) rgba(0,0,0,.35); transition: transform 60ms, box-shadow 60ms; outline: none; }
.btn > span, .btn > b { color: #fff; -webkit-text-stroke: calc(2 * var(--dp)) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(2 * var(--dp)) 0 var(--ink); }
.btn:active, .btn.pressed { transform: translateY(calc(4 * var(--dp))); box-shadow: inset 0 calc(3 * var(--dp)) 0 rgba(255,255,255,.4), 0 calc(1 * var(--dp)) 0 var(--blue-lip); }
.btn.yellow { background: linear-gradient(var(--yellow-1), var(--yellow-2)); box-shadow: inset 0 calc(3 * var(--dp)) 0 rgba(255,255,255,.5), 0 calc(6 * var(--dp)) 0 var(--yellow-lip), 0 calc(8 * var(--dp)) calc(6 * var(--dp)) rgba(0,0,0,.35); }
.btn.yellow:active { box-shadow: inset 0 calc(3 * var(--dp)) 0 rgba(255,255,255,.5), 0 calc(1 * var(--dp)) 0 var(--yellow-lip); }
.btn.red { background: linear-gradient(#FF6150, var(--red)); box-shadow: inset 0 calc(3 * var(--dp)) 0 rgba(255,255,255,.35), 0 calc(5 * var(--dp)) 0 var(--red-lip), 0 calc(7 * var(--dp)) calc(5 * var(--dp)) rgba(0,0,0,.35); }
.btn.red:active { box-shadow: inset 0 calc(3 * var(--dp)) 0 rgba(255,255,255,.35), 0 calc(1 * var(--dp)) 0 var(--red-lip); }
.btn.green { background: linear-gradient(#7BE86C, var(--green)); box-shadow: inset 0 calc(3 * var(--dp)) 0 rgba(255,255,255,.4), 0 calc(5 * var(--dp)) 0 var(--green-lip), 0 calc(7 * var(--dp)) calc(5 * var(--dp)) rgba(0,0,0,.35); }
.btn.green:active { box-shadow: inset 0 calc(3 * var(--dp)) 0 rgba(255,255,255,.4), 0 calc(1 * var(--dp)) 0 var(--green-lip); }
.btn.dark { background: linear-gradient(#454D63, var(--nav-dark)); box-shadow: inset 0 calc(2 * var(--dp)) 0 rgba(255,255,255,.15), 0 calc(5 * var(--dp)) 0 var(--nav-dark-lo), 0 calc(7 * var(--dp)) calc(5 * var(--dp)) rgba(0,0,0,.35); }
.btn.dark:active { box-shadow: inset 0 calc(2 * var(--dp)) 0 rgba(255,255,255,.15), 0 calc(1 * var(--dp)) 0 var(--nav-dark-lo); }
.btn.off { filter: grayscale(1) brightness(0.8); pointer-events: none; }

.screen { position: absolute; inset: 0; display: none; }
.screen.on { display: block; animation: scrIn 180ms ease-out; }
@keyframes scrIn { from { opacity: 0; transform: translateX(calc(12 * var(--dp))); } to { opacity: 1; transform: none; } }
.bluebg { background: radial-gradient(ellipse at 50% 40%, var(--bg-blue-1), var(--bg-blue-2) 75%); }
.bluebg::before { content: ''; position: absolute; inset: -50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23fff' fill-opacity='0.07'%3E%3Cpath d='M30 20h22v10H30zM28 32h26c0 10-5 16-13 16s-13-6-13-16zM36 48h10v8H36z'/%3E%3Ccircle cx='90' cy='86' r='10'/%3E%3Ccircle cx='82' cy='76' r='4'/%3E%3Ccircle cx='98' cy='76' r='4'/%3E%3C/g%3E%3C/svg%3E"); background-size: calc(90 * var(--dp)); transform: rotate(-12deg); pointer-events: none; }

.topbar { position: absolute; left: 0; right: 0; top: 0; height: calc(48 * var(--dp)); display: flex; align-items: center; gap: calc(10 * var(--dp)); padding: 0 calc(12 * var(--dp) + var(--safe-r)) 0 calc(12 * var(--dp) + var(--safe-l)); background: linear-gradient(rgba(14,18,32,.92), rgba(14,18,32,.6)); z-index: 3; }
.topbar .grow { flex: 1; }
.chip { display: flex; align-items: center; gap: calc(6 * var(--dp)); height: calc(30 * var(--dp)); padding: 0 calc(10 * var(--dp)) 0 calc(4 * var(--dp)); border-radius: calc(8 * var(--dp)); background: var(--well); border: calc(2 * var(--dp)) solid rgba(0,0,0,.4); font-size: calc(15 * var(--dp)); cursor: pointer; }
.chip .ic { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); border-radius: calc(6 * var(--dp)); display: grid; place-items: center; font-size: calc(15 * var(--dp)); }
.chip .plus { margin-left: calc(4 * var(--dp)); width: calc(20 * var(--dp)); height: calc(20 * var(--dp)); border-radius: calc(5 * var(--dp)); background: linear-gradient(#7BE86C, var(--green)); border: calc(1.5 * var(--dp)) solid var(--ink); display: grid; place-items: center; font-size: calc(14 * var(--dp)); }
.coin { display: inline-block; width: 1.25em; height: 1.25em; background: url("../assets/icons/coin.webp") center / contain no-repeat; vertical-align: -0.25em; }
.cup { display: inline-block; font-style: normal; }
.profile { display: flex; align-items: center; gap: calc(8 * var(--dp)); cursor: pointer; }
.avatar { width: calc(34 * var(--dp)); height: calc(34 * var(--dp)); border-radius: calc(7 * var(--dp)); border: calc(2 * var(--dp)) solid #fff; background: linear-gradient(#FFB7C4, #E86A86); display: grid; place-items: center; font-size: calc(20 * var(--dp)); box-shadow: 0 calc(3 * var(--dp)) 0 var(--ink); }
.nick-box { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; }
.nick-box .n { font-size: calc(16 * var(--dp)); }
.nick-box .s { font-size: calc(11.5 * var(--dp)); color: #D6E6FF; font-family: 'Body', sans-serif; font-weight: 800; }
.pencil { font-size: calc(12 * var(--dp)); opacity: .9; }

#home .side { position: absolute; left: calc(16 * var(--dp) + var(--safe-l)); top: calc(60 * var(--dp)); display: flex; flex-direction: column; gap: calc(12 * var(--dp)); }
.navbtn { width: calc(138 * var(--dp)); height: calc(46 * var(--dp)); justify-content: flex-start; padding-left: calc(46 * var(--dp)); font-size: calc(14 * var(--dp)); transform: skewX(-8deg); border-radius: calc(6 * var(--dp)); }
.navbtn:active { transform: skewX(-8deg) translateY(calc(4 * var(--dp))); }
.navbtn > span:not(.nic) { display: inline-block; transform: skewX(8deg); }
.navbtn .nic { position: absolute; left: calc(5 * var(--dp)); top: 50%; transform: translateY(-50%) skewX(8deg) rotate(-6deg); width: calc(34 * var(--dp)); height: calc(34 * var(--dp)); border-radius: calc(8 * var(--dp)); display: grid; place-items: center; font-size: calc(20 * var(--dp)); border: calc(2 * var(--dp)) solid var(--ink); }
.nic.shop { background: linear-gradient(#FFE07A, #F2A72E); }
.nic.garage { background: linear-gradient(#8FE3FF, #3AA8E8); }
.nic.prof { background: linear-gradient(#D9A6FF, #8E4FE0); }
.badge { position: absolute; right: calc(2 * var(--dp)); top: calc(-6 * var(--dp)); background: var(--red); border: calc(1.5 * var(--dp)) solid var(--ink); border-radius: calc(5 * var(--dp)); font-size: calc(10 * var(--dp)); padding: 0 calc(4 * var(--dp)); animation: wob 2.6s infinite; }
@keyframes wob { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }

.playwrap { position: absolute; right: calc(16 * var(--dp) + var(--safe-r)); bottom: calc(18 * var(--dp)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(10 * var(--dp)); }
.mode { display: flex; align-items: center; gap: calc(8 * var(--dp)); background: linear-gradient(#4C5672, #353C4E); border: calc(2 * var(--dp)) solid var(--ink); border-radius: calc(8 * var(--dp)); padding: calc(5 * var(--dp)) calc(14 * var(--dp)); transform: skewX(-8deg); margin-right: calc(3 * var(--dp)); box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.35); }
.mode > * { transform: skewX(8deg); }
.mode .mi { font-size: calc(22 * var(--dp)); }
.mode .mt { font-size: calc(14 * var(--dp)); line-height: 1; }
.mode .ms { font-size: calc(10 * var(--dp)); color: #B9C6E8; font-family: 'Body'; font-weight: 800; }
#playBtn { min-width: calc(190 * var(--dp)); height: calc(64 * var(--dp)); padding: 0 calc(22 * var(--dp)); font-size: calc(28 * var(--dp)); white-space: nowrap; animation: breathe 2.4s ease-in-out infinite; }
#playBtn .shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; -webkit-text-stroke: 0; text-shadow: none; }
#playBtn .shine::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: shine 3.2s infinite; }
@keyframes breathe { 50% { scale: 1.03; } }
@keyframes shine { 0%, 70% { left: -40%; } 100% { left: 130%; } }

.ride { position: absolute; left: 50%; bottom: calc(14 * var(--dp)); transform: translateX(-50%); display: flex; gap: calc(6 * var(--dp)); align-items: center; }
.ribbon { background: #fff; color: var(--ink); padding: calc(3 * var(--dp)) calc(16 * var(--dp)); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); font-size: calc(15 * var(--dp)); text-transform: uppercase; }
.ribbon.blue { background: #8FD0FF; }
.ribbon small { font-family: 'Body'; font-weight: 800; font-size: calc(10 * var(--dp)); opacity: .7; margin-right: calc(4 * var(--dp)); }

.backbtn { width: calc(58 * var(--dp)); height: calc(38 * var(--dp)); font-size: calc(20 * var(--dp)); padding: 0; transform: skewX(-8deg); }
.backbtn:active { transform: skewX(-8deg) translateY(calc(4 * var(--dp))); }
.backbtn > span { display: inline-block; transform: skewX(8deg); }
.title { font-size: calc(22 * var(--dp)); text-transform: uppercase; }
.tabs { position: absolute; top: calc(54 * var(--dp)); left: 50%; transform: translateX(-50%); display: flex; gap: calc(4 * var(--dp)); z-index: 3; }
.tab { padding: calc(5 * var(--dp)) calc(22 * var(--dp)); font-size: calc(15 * var(--dp)); background: var(--nav-dark); border: calc(2 * var(--dp)) solid var(--ink); transform: skewX(-10deg); border-radius: calc(4 * var(--dp)); cursor: pointer; text-transform: uppercase; box-shadow: 0 calc(3 * var(--dp)) 0 rgba(0,0,0,.35); }
.tab > span { display: inline-block; transform: skewX(10deg); }
.tab.on { background: linear-gradient(#FFB55A, var(--orange)); }

.cards { position: absolute; top: calc(92 * var(--dp)); bottom: calc(10 * var(--dp)); left: 0; right: 0; display: flex; gap: calc(14 * var(--dp)); padding: calc(6 * var(--dp)) calc(20 * var(--dp) + var(--safe-r)) calc(14 * var(--dp)) calc(20 * var(--dp) + var(--safe-l)); overflow-x: auto; overflow-y: hidden; align-items: center; scrollbar-width: none; touch-action: pan-x; }
.cards::-webkit-scrollbar { display: none; }
.card { flex: 0 0 auto; width: calc(132 * var(--dp)); height: calc(196 * var(--dp)); position: relative; border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(8 * var(--dp)); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; box-shadow: 0 calc(5 * var(--dp)) 0 rgba(0,0,0,.35); transition: transform 120ms; }
.card:active { transform: scale(0.97); }
.card.car { background: linear-gradient(#7FD7FF, #2F8FE0); }
.card.animal { background: linear-gradient(#B9F07A, #4CB33A); }
.card.locked { filter: saturate(0.25) brightness(0.75); }
.card.sel { border-color: #FFD43B; box-shadow: 0 0 0 calc(3 * var(--dp)) #FFD43B, 0 calc(5 * var(--dp)) 0 rgba(0,0,0,.35); }
.card .img { flex: 1; display: grid; place-items: center; position: relative; }
.card .img img { width: 96%; margin-top: calc(-14 * var(--dp)); filter: drop-shadow(0 calc(4 * var(--dp)) 0 rgba(0,0,0,.25)); }
.card .name { position: absolute; left: calc(8 * var(--dp)); top: calc(6 * var(--dp)); font-size: calc(15 * var(--dp)); text-transform: uppercase; }
.card .abil { position: absolute; left: calc(6 * var(--dp)); right: calc(6 * var(--dp)); bottom: calc(4 * var(--dp)); font-family: 'Body'; font-weight: 800; font-size: calc(9.5 * var(--dp)); color: #fff; background: rgba(0,0,0,.35); border-radius: calc(5 * var(--dp)); padding: calc(2 * var(--dp)) calc(5 * var(--dp)); line-height: 1.15; }
.card .floor { height: calc(40 * var(--dp)); background: rgba(14,18,32,.85); display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--dp)); font-size: calc(16 * var(--dp)); }
.card .floor .btn { padding: calc(3 * var(--dp)) calc(12 * var(--dp)); font-size: calc(14 * var(--dp)); }
.card .flag { position: absolute; right: calc(-26 * var(--dp)); top: calc(12 * var(--dp)); background: var(--red); padding: calc(1 * var(--dp)) calc(28 * var(--dp)); transform: rotate(35deg); font-size: calc(10 * var(--dp)); border-top: calc(1.5 * var(--dp)) solid var(--ink); border-bottom: calc(1.5 * var(--dp)) solid var(--ink); }
.stats { display: flex; gap: calc(2 * var(--dp)); margin-top: calc(2 * var(--dp)); }

.overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(5, 10, 30, 0.55); z-index: 10; }
.overlay.on { display: flex; }
.panel { position: relative; max-width: calc(100vw - 48 * var(--dp)); background: var(--panel-blue); border: calc(3 * var(--dp)) solid var(--panel-border); border-radius: calc(8 * var(--dp)); box-shadow: 0 calc(6 * var(--dp)) 0 rgba(0,0,0,.35); min-width: calc(260 * var(--dp)); padding: 0 calc(18 * var(--dp)) calc(18 * var(--dp)); animation: pop 240ms cubic-bezier(.2, 1.4, .4, 1); text-align: center; }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.panel .ph { margin: 0 calc(-18 * var(--dp)) calc(14 * var(--dp)); background: var(--panel-blue-hi); padding: calc(8 * var(--dp)); font-size: calc(18 * var(--dp)); border-bottom: calc(3 * var(--dp)) solid var(--panel-border); border-radius: calc(5 * var(--dp)) calc(5 * var(--dp)) 0 0; text-transform: uppercase; }
.panel .x { position: absolute; right: calc(-10 * var(--dp)); top: calc(-10 * var(--dp)); width: calc(40 * var(--dp)); height: calc(40 * var(--dp)); padding: 0; font-size: calc(18 * var(--dp)); }
.panel p { font-family: 'Body'; font-weight: 800; font-size: calc(12 * var(--dp)); margin: 0 0 calc(12 * var(--dp)); color: #E6F0FF; }
.input { width: calc(240 * var(--dp)); height: calc(44 * var(--dp)); border-radius: calc(7 * var(--dp)); border: calc(2.5 * var(--dp)) solid var(--ink); background: #fff; color: var(--ink); caret-color: var(--orange); font: 900 calc(19 * var(--dp)) 'Game', 'Rubik', sans-serif; text-align: center; outline: none; margin-bottom: calc(14 * var(--dp)); user-select: text; -webkit-user-select: text; }
.err { color: #FFD2CC; font-family: 'Body'; font-weight: 800; font-size: calc(11 * var(--dp)); min-height: calc(14 * var(--dp)); margin-top: calc(-8 * var(--dp)); margin-bottom: calc(8 * var(--dp)); }

.spinner { width: calc(54 * var(--dp)); height: calc(54 * var(--dp)); margin: calc(2 * var(--dp)) auto calc(10 * var(--dp)); position: relative; }
.spinner i { position: absolute; inset: 0; border-radius: 50%; border: calc(6 * var(--dp)) solid rgba(255,255,255,.2); border-top-color: #FFD43B; border-right-color: #FFD43B; animation: spin 0.9s linear infinite; }
.spinner b { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(22 * var(--dp)); animation: bob 0.9s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(calc(-3 * var(--dp))); } }
.qcount { font-size: calc(30 * var(--dp)); margin-bottom: calc(4 * var(--dp)); }
.slots { display: flex; justify-content: center; gap: calc(6 * var(--dp)); margin-bottom: calc(10 * var(--dp)); }
.slots i { width: calc(26 * var(--dp)); height: calc(26 * var(--dp)); border-radius: calc(6 * var(--dp)); background: var(--well); border: calc(2 * var(--dp)) solid var(--ink); display: grid; place-items: center; font-style: normal; font-size: calc(14 * var(--dp)); }
.slots i.on { background: linear-gradient(#7BE86C, var(--green)); animation: pop 240ms; }
.qsub { font-family: 'Body'; font-weight: 800; font-size: calc(12 * var(--dp)); color: #E6F0FF; margin-bottom: calc(12 * var(--dp)); min-height: calc(16 * var(--dp)); }

#loading { background: radial-gradient(ellipse at 50% 40%, var(--bg-blue-1), var(--bg-blue-2) 75%); flex-direction: column; gap: calc(12 * var(--dp)); }
.vs { display: flex; gap: calc(10 * var(--dp)); align-items: center; justify-content: center; flex-wrap: wrap; max-width: 90vw; }
.vs .pl { background: #726672; border: calc(2 * var(--dp)) solid var(--ink); padding: calc(4 * var(--dp)) calc(16 * var(--dp)); transform: skewX(-8deg); font-size: calc(15 * var(--dp)); box-shadow: 0 calc(3 * var(--dp)) 0 rgba(0,0,0,.35); animation: slideIn 400ms backwards; }
.vs .pl > span { display: inline-block; transform: skewX(8deg); }
.vs .pl small { font-family: 'Body'; font-weight: 800; font-size: .7em; color: #E6F0FF; -webkit-text-stroke: 0; text-shadow: none; margin-left: calc(4 * var(--dp)); }
.vs .pl.me { background: var(--orange); }
@keyframes slideIn { from { translate: calc(-30 * var(--dp)) 0; opacity: 0; } }
.bigt { font-size: calc(40 * var(--dp)); font-style: italic; transform: skewX(-8deg); }
.bar { width: calc(300 * var(--dp)); height: calc(24 * var(--dp)); border-radius: calc(6 * var(--dp)); background: #4A1C10; border: calc(2.5 * var(--dp)) solid var(--ink); overflow: hidden; position: relative; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#FFB55A, var(--orange)); transition: width 200ms; }
.bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(13 * var(--dp)); }

#hud { display: none; }
#hud.on { display: block; }
#hud .lb { position: absolute; left: calc(10 * var(--dp) + var(--safe-l)); top: calc(10 * var(--dp)); width: calc(170 * var(--dp)); pointer-events: none; }
.lbrow { position: absolute; left: 0; top: 0; display: flex; white-space: nowrap; overflow: hidden; align-items: center; gap: calc(6 * var(--dp)); height: calc(22 * var(--dp)); padding-right: calc(10 * var(--dp)); background: rgba(114, 102, 114, 0.85); clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); min-width: calc(160 * var(--dp)); font-size: calc(13 * var(--dp)); transition: transform 280ms cubic-bezier(.3, 1.35, .5, 1); }
.lbrow.me { background: rgba(242, 140, 40, 0.92); }
.lbrow .pn { position: relative; z-index: 1; width: calc(24 * var(--dp)); height: 100%; display: grid; place-items: center; background: rgba(14,18,32,.7); }
.lbrow .pn.g { color: #FFD43B; }
.lbrow .gap { margin-left: auto; font-family: 'Body'; font-weight: 800; font-size: calc(10 * var(--dp)); opacity: .9; }
.lbrow.off { opacity: .5; }
.lbrow .nm, .lbrow .au, .lbrow .gap { position: relative; z-index: 1; }
.lbrow .au { font-size: calc(10 * var(--dp)); color: #E9D7FF; }
.lbrow.me .pn { background: var(--orange); }
.lbrow.tiered { overflow: visible; clip-path: polygon(0 -300%, 100% -300%, 100% 0, 94% 100%, 0 100%); }
.lbrow .ly { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lbrow .fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.ly.bg-gold { background: linear-gradient(90deg, #3B2A12, #7A5418); box-shadow: inset 0 calc(-2.5 * var(--dp)) 0 #FFD43B; }
.ly.bg-teal { background: linear-gradient(90deg, #0E6C86, #1FB3C9); box-shadow: inset 0 calc(-3 * var(--dp)) 0 rgba(0, 0, 0, .25), inset 0 calc(2 * var(--dp)) 0 rgba(255, 255, 255, .3); }
.ly.bg-violet { background: linear-gradient(90deg, #1F237E, #4B3FE0 70%, #7A5CFF); }
.ly.bg-purple { background: linear-gradient(90deg, #3A1590, #B02FD6 60%, #E255F0); }
.ly.bg-ember { background: linear-gradient(90deg, #2A0602, #7A1806 55%, #C2410C); background-size: 200% 100%; animation: lyEmber 1.6s ease-in-out infinite alternate; }
.ly.bg-fire { background: linear-gradient(0deg, #FFD43B 0%, #FF7A1A 35%, #D4200F 70%, #5A0A06 100%); background-size: 100% 220%; animation: lyFire .5s ease-in-out infinite alternate; }
.ly.bg-plasma { background: linear-gradient(0deg, #E6FDFF 0%, #5EE6FF 30%, #2F6BE8 65%, #0B1150 100%); background-size: 100% 220%; animation: lyFire .45s ease-in-out infinite alternate; }
.ly.bg-rb, .ly.bg-rb-fast { background: linear-gradient(90deg, #FF6150, #FF9F43, #FFD43B, #7BE86C, #5EE6FF, #8A6CFF, #E255F0, #FF6150); background-size: 300% 100%; animation: lyRainbow 2.6s linear infinite; }
.ly.bg-rb-fast { animation-duration: .9s; }
.ly.shine, .ly.shine-fast { background: linear-gradient(105deg, transparent 35%, rgba(255, 246, 190, .75) 48%, transparent 60%); background-size: 300% 100%; animation: lyShine 2.6s ease-in-out infinite; }
.ly.shine-fast { background-image: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .95) 45%, transparent 60%); animation-duration: 1.1s; animation-timing-function: linear; }
.ly.stripes { opacity: .35; background: repeating-linear-gradient(-60deg, rgba(255, 255, 255, .5) 0 calc(4 * var(--dp)), transparent calc(4 * var(--dp)) calc(12 * var(--dp))); background-size: calc(24 * var(--dp)) 100%; animation: lyStripes .8s linear infinite; }
.ly.twinkle { background-image: radial-gradient(circle, #fff 0 1.2px, transparent 1.6px), radial-gradient(circle, #FFE27A 0 1px, transparent 1.5px); background-size: calc(23 * var(--dp)) calc(13 * var(--dp)), calc(31 * var(--dp)) calc(17 * var(--dp)); animation: lySpark 1.1s linear infinite, lyTwinkle .55s steps(2) infinite; }
.ly.flame, .ly.flame-b { background: radial-gradient(ellipse at 20% 120%, #FFE27A 0, transparent 45%), radial-gradient(ellipse at 55% 130%, #FFF 0, transparent 35%), radial-gradient(ellipse at 85% 120%, #FFD43B 0, transparent 45%); background-size: 60% 100%; animation: lyFlame .35s linear infinite; mix-blend-mode: screen; }
.ly.flame-b { background-image: radial-gradient(ellipse at 20% 120%, #BFF6FF 0, transparent 45%), radial-gradient(ellipse at 55% 130%, #FFF 0, transparent 35%), radial-gradient(ellipse at 85% 120%, #5EE6FF 0, transparent 45%); }
.ly.heat { background: #fff; mix-blend-mode: overlay; opacity: 0; animation: lyHeat .18s steps(2) infinite; }
.ly.glow-v { animation: lyGlowV 1.2s ease-in-out infinite alternate; }
.ly.glow-p { animation: lyGlowP 1.2s ease-in-out infinite alternate; }
.ly.glow-p2 { animation: lyGlowP2 .7s ease-in-out infinite alternate; }
.ly.glow-f { box-shadow: inset 0 0 calc(12 * var(--dp)) #FFB347; }
.ly.glow-i { box-shadow: inset 0 0 calc(12 * var(--dp)) #BFF6FF; }
.ly.glow-w { animation: lyGlowW .7s ease-in-out infinite alternate; }
.ly.frame { box-shadow: inset 0 0 0 calc(2.5 * var(--dp)) #FFD43B; }
.ly.flash { background: #fff; opacity: 0; animation: lyFlash 2.2s linear infinite; }
@keyframes lyEmber { to { background-position: 100% 0; filter: brightness(1.25); } }
@keyframes lyFire { to { background-position: 0 100%; } }
@keyframes lyRainbow { to { background-position: 150% 0; } }
@keyframes lyShine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes lyStripes { to { background-position: calc(24 * var(--dp)) 0; } }
@keyframes lySpark { to { background-position: calc(-23 * var(--dp)) calc(-13 * var(--dp)), calc(31 * var(--dp)) calc(-17 * var(--dp)); } }
@keyframes lyTwinkle { 50% { opacity: .35; } }
@keyframes lyFlame { to { background-position: 60% -40%; } }
@keyframes lyHeat { 50% { opacity: .18; } }
@keyframes lyGlowV { from { box-shadow: inset 0 0 calc(4 * var(--dp)) rgba(170, 160, 255, .3); } to { box-shadow: inset 0 0 calc(12 * var(--dp)) rgba(200, 190, 255, .9); } }
@keyframes lyGlowP { from { box-shadow: inset 0 0 calc(6 * var(--dp)) rgba(255, 220, 255, .4); } to { box-shadow: inset 0 0 calc(14 * var(--dp)) rgba(255, 220, 255, .95); } }
@keyframes lyGlowP2 { from { box-shadow: inset 0 0 calc(8 * var(--dp)) rgba(255, 200, 255, .6); } to { box-shadow: inset 0 0 calc(18 * var(--dp)) #fff; } }
@keyframes lyGlowW { from { box-shadow: inset 0 0 calc(6 * var(--dp)) rgba(255, 255, 255, .5); } to { box-shadow: inset 0 0 calc(16 * var(--dp)) #fff; } }
@keyframes lyFlash { 0%, 90%, 100% { opacity: 0; } 92% { opacity: .75; } 95% { opacity: .1; } 97% { opacity: .55; } }

.lbrow.nk-gold .nm { color: #FFD43B; }
.lbrow.nk-sun .nm { color: #FFE27A; }
.lbrow.nk-pink .nm { color: #fff; text-shadow: 0 calc(2.4 * var(--dp)) 0 var(--ink), 0 0 calc(8 * var(--dp)) #FFB8FF; }
.lbrow.nk-fire .nm { color: #FFF4C2; animation: nkFire .3s ease-in-out infinite alternate; }
.lbrow.nk-ice .nm { color: #E6FDFF; text-shadow: 0 calc(2.4 * var(--dp)) 0 var(--ink), 0 0 calc(10 * var(--dp)) #5EE6FF; }
.lbrow.nk-white .nm { color: #fff; text-shadow: 0 calc(2.4 * var(--dp)) 0 var(--ink), 0 0 calc(10 * var(--dp)) #fff; }
@keyframes nkFire { from { text-shadow: 0 calc(2.4 * var(--dp)) 0 var(--ink), 0 0 calc(6 * var(--dp)) #FF7A1A; } to { text-shadow: 0 calc(2.4 * var(--dp)) 0 var(--ink), 0 0 calc(14 * var(--dp)) #FFD43B, 0 calc(-4 * var(--dp)) calc(10 * var(--dp)) #FF3B00; } }
.lbrow.au-gold .au { color: #FFD43B; }
.lbrow.au-pill .au { padding: 0 calc(4 * var(--dp)); border-radius: calc(5 * var(--dp)); background: rgba(10, 14, 30, .45); color: #fff; }
.lbrow.au-gp .au { padding: 0 calc(5 * var(--dp)); border-radius: calc(5 * var(--dp)); background: linear-gradient(#FFF0A0, #E7A92F); color: #fff; animation: auPulse .5s ease-in-out infinite alternate; }
@keyframes auPulse { to { scale: 1.15; box-shadow: 0 0 calc(10 * var(--dp)) #FFD43B; } }
.lbrow.pn-p .pn { background: linear-gradient(#5A1FB0, #24094F); color: #FFB8FF; }
.lbrow.pn-f .pn { background: linear-gradient(#7A1206, #2A0502); color: #FFD43B; }
.lbrow.pn-i .pn { background: linear-gradient(#1B3FA8, #0B1150); color: #BFF6FF; }
.lbrow.pn-rb .pn { background: rgba(14, 18, 32, .8); animation: rbText 1.2s linear infinite; }
.lbrow.pn-gold .pn { background: linear-gradient(#FFF6C0, #FFD43B 45%, #D99A00); color: #fff; }
.lbrow.me.tiered { background: rgba(178, 82, 14, 0.95); }
.lbrow.me.tiered .pn { box-shadow: inset calc(3 * var(--dp)) 0 0 var(--orange); }
.lbrow.crown .nm::before { content: ''; width: 1.15em; height: 1.15em; vertical-align: -0.2em; background: url('../assets/icons/ui_crown.webp') center / contain no-repeat; display: inline-block; margin-right: calc(3 * var(--dp)); animation: crownBob .6s ease-in-out infinite alternate; }
@keyframes crownBob { from { transform: translateY(0) rotate(-12deg); } to { transform: translateY(calc(-3 * var(--dp))) rotate(12deg) scale(1.15); } }
.lbrow.breath { animation: rowBreath 1s ease-in-out infinite; }
.lbrow.god { animation: rowBreath .8s ease-in-out infinite, rowGod .5s ease-in-out infinite alternate; }
@keyframes rowBreath { 50% { scale: 1.05; } }
@keyframes rowGod { from { filter: brightness(1) saturate(1.1); } to { filter: brightness(1.35) saturate(1.5); } }

.lbrow .fx i { position: absolute; left: var(--x); bottom: calc(3 * var(--dp)); width: var(--w); height: var(--w); opacity: 0; animation: fxRise var(--s) linear var(--d) infinite; will-change: transform, opacity; }
.lbrow .fx i.st { background: var(--c); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation-name: fxStar; filter: drop-shadow(0 0 calc(3 * var(--dp)) var(--c)); }
.lbrow .fx i.fl, .lbrow .fx i.fb { bottom: calc(4 * var(--dp)); height: calc(var(--w) * 1.7); border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(ellipse at 50% 72%, #FFF8D0 0, #FFD43B 28%, #FF7A1A 55%, rgba(212, 32, 15, 0) 74%); animation-name: fxFlame; mix-blend-mode: screen; }
.lbrow .fx i.fb { background: radial-gradient(ellipse at 50% 72%, #FFFFFF 0, #BFF6FF 28%, #3EA8FF 55%, rgba(35, 71, 217, 0) 74%); }
.lbrow .fx i.em { background: #FFC15A; border-radius: 50%; box-shadow: 0 0 calc(4 * var(--dp)) #FF6A00; }
.lbrow .fx i.rb { background: hsl(var(--h) 100% 68%); border-radius: 50%; box-shadow: 0 0 calc(6 * var(--dp)) hsl(var(--h) 100% 60%); }
.lbrow .fx i.cf { width: calc(var(--w) * .55); background: hsl(var(--h) 95% 62%); animation-name: fxConf; }
.lbrow .fx i.bz { left: 50%; bottom: 50%; background: var(--c); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: fxBurst 700ms cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes fxRise { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 60% { opacity: .8; } 100% { transform: translate(var(--dx), calc(-40 * var(--dp))) scale(.3); opacity: 0; } }
@keyframes fxStar { 0% { transform: translate(0, 0) scale(.2) rotate(0); opacity: 0; } 20% { transform: translate(0, calc(-8 * var(--dp))) scale(1.25) rotate(90deg); opacity: 1; } 100% { transform: translate(var(--dx), calc(-42 * var(--dp))) scale(.2) rotate(300deg); opacity: 0; } }
@keyframes fxFlame { 0% { transform: translate(0, 0) scale(1, 1); opacity: .95; } 45% { transform: translate(calc(var(--dx) * .3), calc(-7 * var(--dp))) scale(.85, 1.15); opacity: .9; } 100% { transform: translate(calc(var(--dx) * .6), calc(-17 * var(--dp))) scale(.2, .5); opacity: 0; } }
@keyframes fxConf { 0% { transform: translate(0, 0) rotate(0) rotateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--dx), calc(-44 * var(--dp))) rotate(600deg) rotateY(720deg); opacity: 0; } }
@keyframes fxBurst { 0% { transform: translate(-50%, 50%) rotate(var(--a)) translateX(0) scale(1.4); opacity: 1; } 100% { transform: translate(-50%, 50%) rotate(var(--a)) translateX(calc(70 * var(--dp))) scale(.2); opacity: 0; } }
.lbrow.lvl { animation: rowLvl 700ms cubic-bezier(.2, 1.6, .4, 1) !important; }
@keyframes rowLvl { 0% { scale: 1; filter: brightness(3); } 35% { scale: 1.18; filter: brightness(2); } 100% { scale: 1; filter: none; } }
.lbrow.lvl .nm { animation: lbLvl 600ms cubic-bezier(.2, 1.6, .4, 1); display: inline-block; }
@keyframes lbLvl { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-4deg); filter: brightness(2); } 100% { transform: scale(1); } }
#tricks { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); width: calc(320 * var(--dp)); display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--dp)); pointer-events: none; z-index: 3; }
.tricks .tb { position: relative; width: calc(180 * var(--dp)); height: calc(64 * var(--dp)); display: grid; place-items: center; transform: rotate(var(--r, 0deg)); animation: tbIn 380ms cubic-bezier(.2, 1.7, .4, 1) backwards; filter: drop-shadow(0 calc(4 * var(--dp)) 0 rgba(0,0,0,.35)); }
.tricks .tb.big { width: calc(215 * var(--dp)); height: calc(78 * var(--dp)); }
.tricks .tb.wide { width: calc(240 * var(--dp)); height: calc(74 * var(--dp)); }
.tricks .tb.wide i { bottom: calc(9 * var(--dp)); }
.tricks .tb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tricks .tb b { position: relative; font-size: calc(16 * var(--dp)); text-transform: uppercase; font-style: italic; transform: skewX(-8deg); white-space: nowrap; -webkit-text-stroke: calc(3.4 * var(--dp)) var(--ink); text-shadow: 0 calc(3 * var(--dp)) 0 var(--ink); margin-top: calc(-6 * var(--dp)); }
.tricks .tb.big b { font-size: calc(20 * var(--dp)); color: #FFF7B0; }
.tricks .tb i { position: absolute; bottom: calc(7 * var(--dp)); font-style: normal; text-transform: uppercase; font-size: calc(11 * var(--dp)); color: #FFE27A; }
.tricks .tb.out { animation: tbOut 320ms ease-in forwards; }
.tricks .tb.aura { width: auto; height: auto; padding: calc(6 * var(--dp)) calc(18 * var(--dp)) calc(18 * var(--dp)); filter: none; }
.tricks .tb.aura b { font-size: calc(40 * var(--dp)); color: #F3E2FF; text-shadow: 0 calc(3 * var(--dp)) 0 var(--ink), 0 0 calc(16 * var(--dp)) #C084FC, 0 0 calc(32 * var(--dp)) #8A3CFF; animation: auraGlow .5s ease-in-out infinite alternate; }
.tricks .tb.aura b span { color: #fff; }
.tricks .tb.aura i { bottom: 0; font-size: calc(14 * var(--dp)); color: #7BE86C; }
.tricks .tb.aura.l-perfect i { color: #FFD43B; }
.tricks .tb.aura.l-rough i { color: #FFB0A0; }
@keyframes tbIn { 0% { transform: rotate(var(--r, 0deg)) scale(0); opacity: 0; filter: brightness(2.5); } 70% { transform: rotate(var(--r, 0deg)) scale(1.15); opacity: 1; } 100% { transform: rotate(var(--r, 0deg)) scale(1); } }
@keyframes tbOut { to { transform: rotate(var(--r, 0deg)) translateY(calc(-40 * var(--dp))) scale(.6); opacity: 0; } }
@keyframes auraGlow { to { text-shadow: 0 calc(3 * var(--dp)) 0 var(--ink), 0 0 calc(22 * var(--dp)) #E0B8FF, 0 0 calc(44 * var(--dp)) #A855FF; } }
.laura { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); font-size: calc(14 * var(--dp)); color: #E9D0FF; text-shadow: 0 calc(2 * var(--dp)) 0 var(--ink), 0 0 calc(10 * var(--dp)) #A855FF; animation: lauraUp 1.6s ease-out forwards; }
@keyframes lauraUp { 0% { transform: translate(-50%, calc(8 * var(--dp))) scale(.5); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.2); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, calc(-26 * var(--dp))) scale(1); opacity: 0; } }
#hud .place { position: absolute; left: 50%; top: calc(6 * var(--dp)); transform: translateX(-50%); font-size: calc(34 * var(--dp)); pointer-events: none; text-align: center; line-height: 1; }
#hud .place small { font-size: calc(16 * var(--dp)); }
#hud .place .tm { display: block; font-size: calc(12 * var(--dp)); margin-top: calc(2 * var(--dp)); }
#hud .prog { position: absolute; left: 50%; top: calc(64 * var(--dp)); transform: translateX(-50%); width: calc(200 * var(--dp)); height: calc(8 * var(--dp)); border-radius: calc(4 * var(--dp)); background: var(--well); border: calc(1.5 * var(--dp)) solid var(--ink); pointer-events: none; }
#hud .prog i { position: absolute; top: 50%; width: calc(10 * var(--dp)); height: calc(10 * var(--dp)); border-radius: 50%; transform: translate(-50%, -50%); background: #fff; border: calc(1.5 * var(--dp)) solid var(--ink); }
#hud .prog i.me { background: #FFD43B; z-index: 2; width: calc(13 * var(--dp)); height: calc(13 * var(--dp)); }
#hud .prog::after { content: ''; position: absolute; right: calc(-22 * var(--dp)); top: 50%; transform: translateY(-50%); width: calc(18 * var(--dp)); height: calc(18 * var(--dp)); background: url('../assets/icons/ui_flag.webp') center / contain no-repeat; }
#hud .topr { position: absolute; right: calc(10 * var(--dp) + var(--safe-r)); top: calc(10 * var(--dp)); display: flex; gap: calc(8 * var(--dp)); align-items: center; }
#hud .exit { width: calc(46 * var(--dp)); height: calc(40 * var(--dp)); padding: 0; font-size: calc(14 * var(--dp)); }
#hud .ping { font-family: 'Body'; font-weight: 800; font-size: calc(10 * var(--dp)); color: #fff; text-shadow: 0 1px 0 #000; }
#hud .speed { position: absolute; right: calc(160 * var(--dp) + var(--safe-r)); bottom: calc(14 * var(--dp)); font-size: calc(26 * var(--dp)); pointer-events: none; text-align: right; line-height: 0.9; }
#hud .speed small { display: block; font-size: calc(10 * var(--dp)); }
#count { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: calc(110 * var(--dp)); pointer-events: none; display: none; }
#count.go { color: #7BE86C; font-size: calc(72 * var(--dp)); white-space: nowrap; }
#count.anim { animation: cnt 0.9s ease-out forwards; }
@keyframes cnt { 0% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(0.92); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } }
#banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font-size: calc(44 * var(--dp)); font-style: italic; pointer-events: none; display: none; white-space: nowrap; }
#banner.on { display: block; animation: pop 400ms cubic-bezier(.2, 1.4, .4, 1); }

.pedals { position: absolute; left: 0; bottom: 0; width: 34%; height: 58%; touch-action: none; z-index: 2; }
.pedal { position: absolute; bottom: calc(16 * var(--dp)); transform-origin: 50% 100%; transform: perspective(calc(300 * var(--dp))) rotateX(0deg); transition: transform 70ms ease-out, filter 70ms; filter: drop-shadow(0 calc(5 * var(--dp)) 0 rgba(0,0,0,.45)); }
.pedal i { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.pedal b { position: absolute; left: calc(-10 * var(--dp)); right: calc(-10 * var(--dp)); top: calc(-18 * var(--dp)); text-align: center; font-size: calc(11 * var(--dp)); text-transform: uppercase; pointer-events: none; }
.pedal.gas b { color: #9BF08A; }
.pedal.brake b { color: #FF9A8C; }
.pedal.brake { left: calc(16 * var(--dp) + var(--safe-l)); width: calc(84 * var(--dp)); height: calc(78 * var(--dp)); }
.pedal.gas { left: calc(112 * var(--dp) + var(--safe-l)); width: calc(64 * var(--dp)); height: calc(126 * var(--dp)); }
.pedal.brake i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 78'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e9edf2'/%3E%3Cstop offset='.5' stop-color='%23aeb5bf'/%3E%3Cstop offset='1' stop-color='%23767d88'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='.3' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='3' y='3' width='78' height='66' rx='12' fill='%2310162B'/%3E%3Crect x='6' y='6' width='72' height='60' rx='9' fill='url(%23g)'/%3E%3Cg fill='%23555c68'%3E%3Crect x='14' y='15' width='56' height='5' rx='2.5'/%3E%3Crect x='14' y='26' width='56' height='5' rx='2.5'/%3E%3Crect x='14' y='37' width='56' height='5' rx='2.5'/%3E%3Crect x='14' y='48' width='56' height='5' rx='2.5'/%3E%3C/g%3E%3Cg fill='%23f4f6f9' opacity='.7'%3E%3Crect x='14' y='20' width='56' height='1.5'/%3E%3Crect x='14' y='31' width='56' height='1.5'/%3E%3Crect x='14' y='42' width='56' height='1.5'/%3E%3Crect x='14' y='53' width='56' height='1.5'/%3E%3C/g%3E%3Crect x='6' y='6' width='72' height='60' rx='9' fill='url(%23s)'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23596070'/%3E%3Ccircle cx='72' cy='12' r='2.2' fill='%23596070'/%3E%3Ccircle cx='12' cy='60' r='2.2' fill='%23596070'/%3E%3Ccircle cx='72' cy='60' r='2.2' fill='%23596070'/%3E%3Crect x='34' y='69' width='16' height='8' rx='2' fill='%2310162B'/%3E%3C/svg%3E"); }
.pedal.gas i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 126'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23eef1f5'/%3E%3Cstop offset='.55' stop-color='%23aab1bc'/%3E%3Cstop offset='1' stop-color='%236f7682'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='.35' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='3' y='3' width='58' height='114' rx='12' fill='%2310162B'/%3E%3Crect x='6' y='6' width='52' height='108' rx='9' fill='url(%23g)'/%3E%3Cg fill='%23555c68'%3E%3Crect x='14' y='14' width='36' height='5' rx='2.5'/%3E%3Crect x='14' y='26' width='36' height='5' rx='2.5'/%3E%3Crect x='14' y='38' width='36' height='5' rx='2.5'/%3E%3Crect x='14' y='50' width='36' height='5' rx='2.5'/%3E%3Crect x='14' y='62' width='36' height='5' rx='2.5'/%3E%3Crect x='14' y='74' width='36' height='5' rx='2.5'/%3E%3Crect x='14' y='86' width='36' height='5' rx='2.5'/%3E%3Crect x='14' y='98' width='36' height='5' rx='2.5'/%3E%3C/g%3E%3Cg fill='%23f4f6f9' opacity='.7'%3E%3Crect x='14' y='19' width='36' height='1.5'/%3E%3Crect x='14' y='31' width='36' height='1.5'/%3E%3Crect x='14' y='43' width='36' height='1.5'/%3E%3Crect x='14' y='55' width='36' height='1.5'/%3E%3Crect x='14' y='67' width='36' height='1.5'/%3E%3Crect x='14' y='79' width='36' height='1.5'/%3E%3Crect x='14' y='91' width='36' height='1.5'/%3E%3Crect x='14' y='103' width='36' height='1.5'/%3E%3C/g%3E%3Crect x='6' y='6' width='52' height='108' rx='9' fill='url(%23s)'/%3E%3Crect x='24' y='117' width='16' height='8' rx='2' fill='%2310162B'/%3E%3C/svg%3E"); }
.pedal.down { transform: perspective(calc(300 * var(--dp))) rotateX(34deg) translateY(calc(3 * var(--dp))); filter: brightness(0.82) drop-shadow(0 calc(1 * var(--dp)) 0 rgba(0,0,0,.45)); }
.joyzone { position: absolute; right: 0; bottom: 0; width: 50%; height: 70%; touch-action: none; }
.joy { position: absolute; width: calc(160 * var(--dp)); height: calc(160 * var(--dp)); border-radius: 50%; background: rgba(255,255,255,.14); border: calc(3 * var(--dp)) solid rgba(255,255,255,.45); transform: translate(-50%, -50%); pointer-events: none; transition: opacity 120ms; }
.joy::before, .joy::after { content: '◀'; position: absolute; top: 50%; transform: translateY(-50%); left: calc(10 * var(--dp)); font-size: calc(20 * var(--dp)); color: rgba(255,255,255,.6); }
.joy::after { content: '▶'; left: auto; right: calc(10 * var(--dp)); }
.joy b { position: absolute; left: 50%; top: 50%; width: calc(70 * var(--dp)); height: calc(70 * var(--dp)); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #C9D6F0); border: calc(3 * var(--dp)) solid var(--ink); transform: translate(-50%, -50%); }
.joy.idle { opacity: 0.55; }

#results { background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(5, 10, 30, .55)); display: none; }
#results.on { display: block; }
#results .rtop { position: absolute; left: 0; right: 0; top: calc(8 * var(--dp)); display: flex; justify-content: center; pointer-events: none; animation: pop 450ms cubic-bezier(.2, 1.4, .4, 1) backwards; }
#results .rbot { position: absolute; left: calc(12 * var(--dp) + var(--safe-l)); right: calc(12 * var(--dp) + var(--safe-r)); bottom: calc(10 * var(--dp)); display: flex; align-items: flex-end; justify-content: space-between; gap: calc(10 * var(--dp)); animation: slideUp 400ms 300ms cubic-bezier(.2, 1.3, .4, 1) backwards; }
@keyframes slideUp { from { transform: translateY(calc(80 * var(--dp))); opacity: 0; } }
.rme { display: flex; align-items: center; gap: calc(8 * var(--dp)); background: var(--well); border: calc(2 * var(--dp)) solid var(--ink); border-radius: calc(10 * var(--dp)); padding: calc(6 * var(--dp)) calc(10 * var(--dp)); font-size: calc(15 * var(--dp)); box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.35); }
.rme .pl { font-size: calc(26 * var(--dp)); color: #FFD43B; }
.rme .cell { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.rme .cell small { font-family: 'Body'; font-weight: 800; font-size: calc(9 * var(--dp)); opacity: .8; -webkit-text-stroke: 0; text-shadow: none; text-transform: uppercase; }
.rme .rc { background: rgba(14,18,32,.55); border-radius: calc(6 * var(--dp)); padding: calc(3 * var(--dp)) calc(8 * var(--dp)); white-space: nowrap; }
.rme .au { color: #E9D0FF; text-shadow: 0 calc(2 * var(--dp)) 0 var(--ink), 0 0 calc(10 * var(--dp)) #A855FF; }
.rleft { display: flex; flex-direction: column; align-items: flex-start; gap: calc(5 * var(--dp)); min-width: 0; }
.rrest { display: flex; gap: calc(4 * var(--dp)); min-width: 0; }
.rrest:empty { display: none; }
.rrest .rr { display: flex; align-items: center; gap: calc(5 * var(--dp)); background: rgba(114, 102, 114, .9); clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); padding-right: calc(12 * var(--dp)); height: calc(20 * var(--dp)); font-size: calc(11 * var(--dp)); white-space: nowrap; max-width: calc(130 * var(--dp)); overflow: hidden; }
.rrest .rr.me { background: var(--orange); }
.rrest .rr b { width: calc(22 * var(--dp)); height: 100%; display: grid; place-items: center; background: rgba(14,18,32,.7); font-weight: inherit; }
.rrest .rr small { font-family: 'Body'; font-weight: 800; font-size: calc(9 * var(--dp)); -webkit-text-stroke: 0; text-shadow: none; opacity: .9; }
.pcards { position: absolute; inset: 0; pointer-events: none; }
.pcard { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--dp)); will-change: transform; animation: pcIn 500ms cubic-bezier(.2, 1.5, .4, 1) backwards; }
.pcard .medal { font-size: calc(30 * var(--dp)); line-height: 1; filter: drop-shadow(0 calc(3 * var(--dp)) 0 rgba(0,0,0,.4)); }
.pcard.p1 .medal { font-size: calc(38 * var(--dp)); animation: medalBob 1s ease-in-out infinite alternate; }
.pcard .lbrow { position: relative; transform: none; min-width: calc(100 * var(--dp)); height: calc(24 * var(--dp)); font-size: calc(13.5 * var(--dp)); }
.pcard .tm { font-family: 'Body'; font-weight: 800; font-size: calc(11 * var(--dp)); color: #fff; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
@keyframes pcIn { from { opacity: 0; translate: 0 calc(-30 * var(--dp)); scale: .6; } }
@keyframes medalBob { to { transform: translateY(calc(-4 * var(--dp))) rotate(8deg); } }
#fade { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 30; }
#fade.go { animation: fadeFlash 700ms ease-in-out; }
@keyframes fadeFlash { 0% { opacity: 0; } 45%, 55% { opacity: 1; } 100% { opacity: 0; } }
#results .bigt { font-size: calc(46 * var(--dp)); }
.rays { position: absolute; inset: -50%; background: repeating-conic-gradient(rgba(255,255,255,.08) 0 10deg, transparent 10deg 20deg); animation: spin 30s linear infinite; pointer-events: none; z-index: -1; }

.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.label { position: absolute; left: 0; top: 0; font-size: calc(13 * var(--dp)); white-space: nowrap; will-change: transform; }
.label.me { color: #FFD43B; }

#toast { position: absolute; left: 50%; top: calc(98 * var(--dp)); max-width: 80vw; text-align: center; transform: translateX(-50%); background: rgba(14,18,32,.9); border: calc(2 * var(--dp)) solid #000; border-radius: calc(8 * var(--dp)); padding: calc(6 * var(--dp)) calc(14 * var(--dp)); font-size: calc(14 * var(--dp)); display: none; z-index: 20; pointer-events: none; }
#toast.on { display: block; animation: pop 220ms; }
#netstat { position: absolute; left: 50%; bottom: calc(6 * var(--dp)); transform: translateX(-50%); font-family: 'Body'; font-size: calc(10 * var(--dp)); font-weight: 800; color: #FFD2CC; z-index: 30; pointer-events: none; }
.version { position: fixed; left: calc(8 * var(--dp) + var(--safe-l)); bottom: calc(3 * var(--dp)); font: 700 calc(9 * var(--dp)) ui-monospace, monospace; opacity: 0.6; z-index: 40; pointer-events: none; }
.version.is-dev { color: #FFD23F; opacity: 1; }

#rotate { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; flex-direction: column; gap: calc(14 * var(--dp)); background: radial-gradient(ellipse at 50% 40%, var(--bg-blue-1), var(--bg-blue-2) 75%); text-align: center; font-size: calc(22 * var(--dp)); }
#rotate .ph { font-size: calc(60 * var(--dp)); animation: rot 2s ease-in-out infinite; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { #rotate { display: flex; } }
#backdrop { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
body.in-match #backdrop { display: none; }
body.in-match .version { left: auto; right: calc(8 * var(--dp) + var(--safe-r)); }
#gl { z-index: 1; }
[hidden] { display: none !important; }
#hud.done .pedals, #hud.done .joyzone, #hud.done .speed { display: none; }

#camzone { position: absolute; inset: 0; touch-action: none; z-index: 0; }
#hud .joyzone { z-index: 2; }
#hud .lb, #hud .place, #hud .prog, #hud .topr, #hud .speed { z-index: 3; }

.gauge { position: absolute; left: calc(192 * var(--dp) + var(--safe-l)); bottom: calc(12 * var(--dp)); width: calc(112 * var(--dp)); height: calc(112 * var(--dp)); pointer-events: none; z-index: 3; }
.gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gauge .gface { filter: drop-shadow(0 calc(4 * var(--dp)) 0 rgba(0,0,0,.4)); }
.gauge .gneedle { will-change: transform; transform-origin: 50% 50%; transform: rotate(-125deg); }
.gauge .gnum { position: absolute; left: 0; right: 0; top: 60%; text-align: center; font-size: calc(22 * var(--dp)); line-height: 1; }
.gauge .gunit { position: absolute; left: 0; right: 0; top: 80%; text-align: center; font-size: calc(8 * var(--dp)); line-height: 1; color: #9FC3FF; -webkit-text-stroke: 0; text-shadow: none; }
#hud.done .gauge, #hud.done .lb, #hud.done .place, #hud.done .prog, #hud.done .topr { display: none; }
#results .bigt.lose { color: #FF6150; }

.btn.blue { background: linear-gradient(var(--blue-1), var(--blue-2)); }
.nic svg, .slot svg, .pick svg, .case svg, .revealbox svg, .cprog svg { width: 100%; height: 100%; display: block; }
.gi { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 calc(2 * var(--dp)) 0 rgba(0,0,0,.35)); }
.cprog { display: flex; gap: calc(6 * var(--dp)); margin-left: calc(14 * var(--dp)); }
.cprog .cp { display: flex; align-items: center; gap: calc(5 * var(--dp)); background: rgba(14,18,32,.75); border: calc(2 * var(--dp)) solid var(--ink); border-radius: calc(8 * var(--dp)); padding: calc(3 * var(--dp)) calc(8 * var(--dp)) calc(3 * var(--dp)) calc(3 * var(--dp)); cursor: pointer; }
.cprog .cp i { width: calc(26 * var(--dp)); height: calc(26 * var(--dp)); }
.cprog .cp .bar2 { width: calc(52 * var(--dp)); height: calc(9 * var(--dp)); background: var(--well); border-radius: calc(4 * var(--dp)); overflow: hidden; border: calc(1.5 * var(--dp)) solid #000; }
.cprog .cp .bar2 b { display: block; height: 100%; background: linear-gradient(#7BE86C, var(--green)); }
.cprog .cp span { font-size: calc(11 * var(--dp)); white-space: nowrap; }
.caserow { position: absolute; top: calc(70 * var(--dp)); left: 0; right: 0; display: flex; justify-content: center; gap: calc(30 * var(--dp)); }
.case { width: calc(190 * var(--dp)); background: linear-gradient(#5AA2F2, #2F6BE8); border: calc(3 * var(--dp)) solid var(--ink); border-radius: calc(10 * var(--dp)); padding: calc(10 * var(--dp)); display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--dp)); box-shadow: 0 calc(6 * var(--dp)) 0 rgba(0,0,0,.35); position: relative; }
.case.super { background: linear-gradient(#B97BFF, #6A2FD0); }
.case .cimg { width: calc(110 * var(--dp)); height: calc(110 * var(--dp)); animation: bob 1.6s ease-in-out infinite; }
.case .cname { font-size: calc(17 * var(--dp)); text-transform: uppercase; }
.case .ccount { position: absolute; right: calc(-10 * var(--dp)); top: calc(-10 * var(--dp)); background: var(--red); border: calc(2 * var(--dp)) solid var(--ink); border-radius: calc(8 * var(--dp)); min-width: calc(30 * var(--dp)); height: calc(30 * var(--dp)); display: grid; place-items: center; font-size: calc(16 * var(--dp)); }
.case .ccount.zero { background: #5B6378; }
.case .cdrop { font-family: 'Body'; font-weight: 800; font-size: calc(10 * var(--dp)); color: #E6F0FF; text-align: center; line-height: 1.3; }
.case .btn { width: 100%; height: calc(40 * var(--dp)); font-size: calc(17 * var(--dp)); }
.case .need { width: 100%; text-align: center; font-size: calc(12 * var(--dp)); }
.case .need .bar2 { height: calc(12 * var(--dp)); background: var(--well); border-radius: calc(6 * var(--dp)); border: calc(2 * var(--dp)) solid #000; overflow: hidden; margin-top: calc(3 * var(--dp)); }
.case .need .bar2 b { display: block; height: 100%; background: linear-gradient(#7BE86C, var(--green)); }
.casehint { position: absolute; bottom: calc(14 * var(--dp)); left: 0; right: 0; text-align: center; font-family: 'Body'; font-weight: 800; font-size: calc(11 * var(--dp)); color: #DCE8FF; }
.carlist { position: absolute; left: calc(10 * var(--dp) + var(--safe-l)); top: calc(56 * var(--dp)); bottom: calc(10 * var(--dp)); width: calc(120 * var(--dp)); display: flex; flex-direction: column; gap: calc(8 * var(--dp)); overflow-y: auto; scrollbar-width: none; }
.carlist::-webkit-scrollbar { display: none; }
.carcard { position: relative; flex: 0 0 auto; height: calc(84 * var(--dp)); border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(8 * var(--dp)); background: linear-gradient(#7FD7FF, #2F8FE0); cursor: pointer; overflow: hidden; box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.35); }
.carcard.sel { border-color: #FFD43B; box-shadow: 0 0 0 calc(3 * var(--dp)) #FFD43B; }
.carcard.locked { filter: saturate(0.2) brightness(0.6); cursor: default; }
.carcard img { position: absolute; left: 50%; top: 46%; width: 92%; transform: translate(-50%, -50%); }
.carcard .nm { position: absolute; left: calc(6 * var(--dp)); bottom: calc(3 * var(--dp)); font-size: calc(12 * var(--dp)); text-transform: uppercase; }
.carcard .lk { position: absolute; right: calc(6 * var(--dp)); top: calc(4 * var(--dp)); font-size: calc(16 * var(--dp)); background: var(--well); border-radius: calc(6 * var(--dp)); padding: calc(2 * var(--dp)) calc(4 * var(--dp)); }
.carcard .nm { z-index: 1; }
.loadout { position: absolute; right: calc(10 * var(--dp) + var(--safe-r)); top: calc(56 * var(--dp)); bottom: calc(10 * var(--dp)); width: calc(236 * var(--dp)); background: rgba(16, 26, 70, 0.78); border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(10 * var(--dp)); padding: calc(8 * var(--dp)); display: flex; flex-direction: column; gap: calc(5 * var(--dp)); }
.loadout .lh { font-size: calc(17 * var(--dp)); line-height: 1.1; text-transform: uppercase; text-align: center; }
.slotrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(4 * var(--dp)); }
.slot { position: relative; aspect-ratio: 1; border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(8 * var(--dp)); background: var(--well); cursor: pointer; display: grid; place-items: center; box-shadow: 0 calc(3 * var(--dp)) 0 rgba(0,0,0,.4); transition: transform 80ms; }
.slot:active { transform: scale(.94); }
.slot.empty::after { content: '+'; font-size: calc(26 * var(--dp)); color: rgba(255,255,255,.5); }
.slot .si { width: 80%; height: 80%; }
.slot img.si { object-fit: contain; }
.slot .sl { position: absolute; left: 0; right: 0; bottom: calc(-15 * var(--dp)); text-align: center; font-size: calc(9 * var(--dp)); text-transform: uppercase; white-space: nowrap; }
.slot .tier, .pick .tier { position: absolute; right: calc(-4 * var(--dp)); top: calc(-6 * var(--dp)); min-width: calc(20 * var(--dp)); height: calc(18 * var(--dp)); border-radius: calc(5 * var(--dp)); border: calc(1.5 * var(--dp)) solid var(--ink); display: grid; place-items: center; font-size: calc(11 * var(--dp)); padding: 0 calc(3 * var(--dp)); }
.slot.animal { background: linear-gradient(#B9F07A, #4CB33A); }
.statlist { margin-top: calc(4 * var(--dp)); display: flex; flex-direction: column; gap: calc(2 * var(--dp)); flex: 0 0 auto; }
.statrow { display: grid; grid-template-columns: calc(80 * var(--dp)) 1fr calc(34 * var(--dp)); align-items: center; gap: calc(6 * var(--dp)); font-size: calc(11 * var(--dp)); }
.statrow .sb { height: calc(11 * var(--dp)); background: var(--well); border-radius: calc(4 * var(--dp)); border: calc(1.5 * var(--dp)) solid #000; overflow: hidden; display: flex; }
.statrow .sb b { height: 100%; background: linear-gradient(#8FD0FF, #3A8BFF); }
.statrow .sb i { height: 100%; background: linear-gradient(#9BF08A, #44C93A); }
.statrow .sv { text-align: right; font-family: 'Body'; font-weight: 800; }
.abilbox { flex: 0 1 auto; min-height: calc(28 * var(--dp)); overflow-y: auto; scrollbar-width: none; margin-top: calc(13 * var(--dp)); font-family: 'Body'; font-weight: 800; font-size: calc(10 * var(--dp)); line-height: 1.2; color: #DFF5C8; background: rgba(76,179,58,.25); border-radius: calc(6 * var(--dp)); padding: calc(3 * var(--dp)) calc(6 * var(--dp)); }
.panel.wide { width: min(86vw, calc(560 * var(--dp))); max-height: 86vh; display: flex; flex-direction: column; }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(84 * var(--dp)), 1fr)); gap: calc(10 * var(--dp)); overflow-y: auto; padding: calc(14 * var(--dp)) calc(6 * var(--dp)) calc(8 * var(--dp)); max-height: 62vh; }
.pick { position: relative; border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(8 * var(--dp)); background: var(--well); padding: calc(6 * var(--dp)); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--dp)); box-shadow: 0 calc(3 * var(--dp)) 0 rgba(0,0,0,.4); }
.pick.on { border-color: #FFD43B; box-shadow: 0 0 0 calc(2.5 * var(--dp)) #FFD43B; }
.pick .pi2 { width: calc(56 * var(--dp)); height: calc(56 * var(--dp)); }
.pick img.pi2 { object-fit: contain; }
.pick .pn2 { font-size: calc(10 * var(--dp)); text-transform: uppercase; text-align: center; line-height: 1.1; }
.pick .ps { font-family: 'Body'; font-weight: 800; font-size: calc(10 * var(--dp)); color: #B9C6E8; text-align: center; }
.pick .cnt { position: absolute; left: calc(-4 * var(--dp)); top: calc(-6 * var(--dp)); background: #10162B; border-radius: calc(5 * var(--dp)); padding: 0 calc(4 * var(--dp)); font-size: calc(11 * var(--dp)); }
.pick .btn { padding: calc(2 * var(--dp)) calc(6 * var(--dp)); font-size: calc(10 * var(--dp)); }
.pick.remove { background: linear-gradient(#454D63, var(--nav-dark)); justify-content: center; }
.pick.remove .pn2 { font-size: calc(13 * var(--dp)); color: #FF9A8C; }
.pick.locked { background: rgba(26,34,64,.6); }
.empty-note { grid-column: 1 / -1; text-align: center; font-family: 'Body'; font-weight: 800; color: #DCE8FF; font-size: calc(12 * var(--dp)); padding: calc(10 * var(--dp)); }
#reveal { flex-direction: column; gap: calc(16 * var(--dp)); background: rgba(10, 16, 50, 0.95); overflow: hidden; }
.revealbox { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--dp)); }
.revealbox .rv-img { width: calc(150 * var(--dp)); height: calc(150 * var(--dp)); animation: revealPop 700ms cubic-bezier(.2, 1.5, .4, 1) backwards; filter: drop-shadow(0 calc(6 * var(--dp)) 0 rgba(0,0,0,.35)); }
.revealbox img.rv-img { object-fit: contain; }
.revealbox .rv-title { font-size: calc(30 * var(--dp)); font-style: italic; transform: skewX(-8deg); }
.revealbox .rv-sub { font-size: calc(16 * var(--dp)); }
.revealbox .shake { animation: caseShake 900ms ease-in-out; }
@keyframes revealPop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes caseShake { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-12deg) scale(1.05); } 40% { transform: rotate(12deg) scale(1.1); } 60% { transform: rotate(-14deg) scale(1.15); } 80% { transform: rotate(14deg) scale(1.2); } }

.abilbox::-webkit-scrollbar { display: none; }
.whgo { margin-top: auto; height: calc(36 * var(--dp)); flex: 0 0 auto; font-size: calc(14 * var(--dp)); padding: 0 calc(12 * var(--dp)) 0 calc(6 * var(--dp)); }
.whgo .tbi { width: calc(26 * var(--dp)); height: calc(26 * var(--dp)); -webkit-text-stroke: 0; text-shadow: none; }
.nic.store { background: linear-gradient(#FFB08A, #E8603A); }
#warehouse { touch-action: none; }
.whtabs { position: absolute; top: calc(50 * var(--dp)); left: calc(10 * var(--dp) + var(--safe-l)); right: calc(214 * var(--dp) + var(--safe-r)); display: flex; gap: calc(4 * var(--dp)); z-index: 3; overflow-x: auto; scrollbar-width: none; padding: calc(4 * var(--dp)) calc(6 * var(--dp)) calc(6 * var(--dp)); }
.whtabs::-webkit-scrollbar { display: none; }
.whtabs .tab { flex: 0 0 auto; white-space: nowrap; }
.whtabs .tab { padding: calc(4 * var(--dp)) calc(16 * var(--dp)); font-size: calc(13 * var(--dp)); }
.whtabs .tab small { font-family: 'Body'; font-weight: 800; font-size: calc(11 * var(--dp)); color: #FFE08A; -webkit-text-stroke: 0; text-shadow: none; margin-left: calc(2 * var(--dp)); }
.whgrid { position: absolute; top: calc(92 * var(--dp)); bottom: 0; left: calc(10 * var(--dp) + var(--safe-l)); right: calc(214 * var(--dp) + var(--safe-r)); display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(92 * var(--dp)), 1fr)); grid-auto-rows: calc(112 * var(--dp)); gap: calc(12 * var(--dp)); align-content: start; overflow-y: auto; padding: calc(14 * var(--dp)) calc(6 * var(--dp)) calc(16 * var(--dp)); scrollbar-width: none; touch-action: none; }
.whgrid::-webkit-scrollbar { display: none; }
.part { position: relative; border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(9 * var(--dp)); background: var(--tc); background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tc) 55%, #fff), var(--tc) 70%); box-shadow: inset 0 calc(3 * var(--dp)) 0 rgba(255,255,255,.35), 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.4); cursor: grab; display: flex; flex-direction: column; overflow: hidden; touch-action: none; transition: transform 120ms, opacity 120ms, filter 120ms; }
.part .pimg { flex: 1; min-height: 0; padding: calc(6 * var(--dp)) calc(8 * var(--dp)) 0; pointer-events: none; }
.part .pfloor { height: calc(30 * var(--dp)); background: rgba(14,18,32,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; pointer-events: none; }
.part .pfloor .t { font-size: calc(11 * var(--dp)); text-transform: uppercase; -webkit-text-stroke-width: calc(1.6 * var(--dp)); text-shadow: 0 calc(1.6 * var(--dp)) 0 var(--ink); }
.part .pfloor small { font-family: 'Body'; font-weight: 800; font-size: calc(8.5 * var(--dp)); color: var(--tc); margin-top: calc(2 * var(--dp)); }
.part .lvl { position: absolute; left: calc(4 * var(--dp)); top: calc(4 * var(--dp)); min-width: calc(20 * var(--dp)); height: calc(20 * var(--dp)); border-radius: calc(6 * var(--dp)); background: var(--well); border: calc(1.5 * var(--dp)) solid var(--ink); color: var(--tc); display: grid; place-items: center; font-size: calc(12 * var(--dp)); pointer-events: none; }
.part .on { position: absolute; right: 0; top: calc(5 * var(--dp)); max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--ink); padding: calc(1 * var(--dp)) calc(5 * var(--dp)); border-radius: calc(5 * var(--dp)) 0 0 calc(5 * var(--dp)); font-size: calc(8.5 * var(--dp)); text-transform: uppercase; -webkit-text-stroke: 0; text-shadow: none; pointer-events: none; }
.part.lifted { opacity: .3; transform: scale(.94); }
#warehouse.dragging .drop-no { filter: grayscale(.85) brightness(.6); }
#warehouse.dragging .drop-ok { animation: wiggle 700ms ease-in-out infinite; box-shadow: 0 0 0 calc(3 * var(--dp)) #7BE86C, 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.4); }
#warehouse.dragging .drop-hot { transform: scale(1.1); box-shadow: 0 0 0 calc(4 * var(--dp)) #FFD43B, 0 0 calc(18 * var(--dp)) #FFD43B; animation: none; z-index: 2; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }
.whghost { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 50; display: none; }
.whghost.on { display: block; }
.whghost .part { width: 100%; height: 100%; box-shadow: 0 calc(12 * var(--dp)) calc(14 * var(--dp)) rgba(0,0,0,.45); }
.part.boom, .slot.boom { animation: boom 600ms cubic-bezier(.2, 1.6, .4, 1); z-index: 2; }
@keyframes boom { 0% { transform: scale(.6); filter: brightness(2.2); } 60% { transform: scale(1.15); filter: brightness(1.4); } 100% { transform: scale(1); filter: none; } }
.whside { position: absolute; right: calc(10 * var(--dp) + var(--safe-r)); top: calc(56 * var(--dp)); bottom: calc(12 * var(--dp)); width: calc(196 * var(--dp)); background: rgba(16, 26, 70, 0.8); border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(10 * var(--dp)); padding: calc(10 * var(--dp)); display: flex; flex-direction: column; gap: calc(10 * var(--dp)); }
.whcar { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.whcar .sm { font-family: 'Body'; font-weight: 800; font-size: calc(10 * var(--dp)); color: #9FC3FF; text-transform: uppercase; }
.whcar .t { font-size: calc(17 * var(--dp)); text-transform: uppercase; }
.whslots { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(5 * var(--dp)); padding-bottom: calc(14 * var(--dp)); }
.whhint { flex: 1; font-family: 'Body'; font-weight: 800; font-size: calc(11.5 * var(--dp)); line-height: 1.35; color: #E6F0FF; background: var(--well); border-radius: calc(7 * var(--dp)); padding: calc(7 * var(--dp)) calc(8 * var(--dp)); }
.whhint span { color: #9FC3FF; }
.whall { height: calc(40 * var(--dp)); font-size: calc(14 * var(--dp)); flex: 0 0 auto; }

.skew { transform: skewX(-8deg); }
.skew > * { transform: skewX(8deg); }

.askrow { display: flex; gap: calc(12 * var(--dp)); justify-content: center; }
.askrow .btn { min-width: calc(120 * var(--dp)); height: calc(44 * var(--dp)); }
.statrow > .t, .loadout .lh, .cprog .cp span { text-transform: uppercase; }
.phead { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--dp)); margin-bottom: calc(12 * var(--dp)); }
.avatar.big { width: calc(46 * var(--dp)); height: calc(46 * var(--dp)); font-size: calc(28 * var(--dp)); }
.pnick { font-size: calc(22 * var(--dp)); }
.pgrid { display: grid; grid-template-columns: repeat(3, calc(96 * var(--dp))); gap: calc(10 * var(--dp)); justify-content: center; }
.pcell > .t { font-size: calc(11 * var(--dp)); color: #FFD43B; text-transform: uppercase; margin-bottom: calc(3 * var(--dp)); }
.pcell .pv { background: var(--well); border: calc(2 * var(--dp)) solid rgba(0,0,0,.4); border-radius: calc(8 * var(--dp)); height: calc(32 * var(--dp)); display: grid; place-items: center; font-size: calc(16 * var(--dp)); }
.pid { margin-top: calc(12 * var(--dp)); font-family: 'Body'; font-weight: 800; font-size: calc(11 * var(--dp)); color: #fff; opacity: .85; }
.rvhead { font-size: calc(26 * var(--dp)); font-style: italic; transform: skewX(-8deg); text-transform: uppercase; }
#reveal { background: radial-gradient(ellipse at 50% 45%, #2C3FA8, #0A1032 75%); }
@media (max-aspect-ratio: 16/10) {
  #homeProg { position: absolute; right: calc(16 * var(--dp) + var(--safe-r)); top: calc(60 * var(--dp)); margin: 0; }
  .ride { left: calc(16 * var(--dp) + var(--safe-l)); transform: none; }
}
#devMenu .panel { width: min(calc(340 * var(--dp)), calc(100vw - 48 * var(--dp))); }
.devlist { display: flex; flex-direction: column; gap: calc(8 * var(--dp)); }
.devlist .btn { height: calc(46 * var(--dp)); font-size: calc(17 * var(--dp)); }
.devlist p { margin: 0 0 calc(8 * var(--dp)); }

.newb { position: absolute; left: 50%; top: calc(-9 * var(--dp)); transform: translateX(-50%); z-index: 3; background: linear-gradient(#FF6150, var(--red)); border: calc(1.5 * var(--dp)) solid var(--ink); border-radius: calc(5 * var(--dp)); padding: 0 calc(7 * var(--dp)); font-size: calc(10 * var(--dp)); line-height: calc(16 * var(--dp)); text-transform: uppercase; white-space: nowrap; -webkit-text-stroke-width: calc(1.5 * var(--dp)); text-shadow: 0 calc(1.5 * var(--dp)) 0 var(--ink); box-shadow: 0 calc(2 * var(--dp)) 0 var(--red-lip); pointer-events: none; animation: newPulse 1s ease-in-out infinite; }
@keyframes newPulse { 0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 calc(2 * var(--dp)) 0 var(--red-lip), 0 0 0 0 rgba(255,97,80,.7); } 50% { transform: translateX(-50%) scale(1.14); box-shadow: 0 calc(2 * var(--dp)) 0 var(--red-lip), 0 0 0 calc(6 * var(--dp)) rgba(255,97,80,0); } }
.part, .pick { overflow: visible; }
.part > .pfloor { border-radius: 0 0 calc(6 * var(--dp)) calc(6 * var(--dp)); }
.fusefx { position: fixed; transform: translate(-50%, -50%); z-index: 61; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, rgba(255,230,140,.85) 30%, rgba(255,212,59,0) 62%); animation: fuseFlash 650ms ease-out forwards; }
.fusefx i { position: absolute; left: 50%; top: 50%; width: calc(8 * var(--dp)); height: calc(8 * var(--dp)); margin: calc(-4 * var(--dp)); border-radius: 50%; background: #FFE27A; box-shadow: 0 0 calc(6 * var(--dp)) #FFD43B; animation: spark 650ms ease-out forwards; }
@keyframes fuseFlash { 0% { transform: translate(-50%, -50%) scale(.1); opacity: 1; } 60% { opacity: .9; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes spark { 0% { transform: rotate(var(--a)) translateX(0) scale(1.2); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(calc(110 * var(--dp))) scale(.3); opacity: 0; } }
.part.born { animation: born 700ms cubic-bezier(.2, 1.6, .4, 1); z-index: 2; }
@keyframes born { 0% { transform: scale(0) rotate(-20deg); filter: brightness(3); } 55% { transform: scale(1.18) rotate(4deg); filter: brightness(1.6); } 100% { transform: scale(1) rotate(0); filter: none; } }
#warehouse.on ~ #toast { top: auto; bottom: calc(18 * var(--dp)); left: calc((100% - 214 * var(--dp)) / 2); }
.bluebg::before { animation: bgDrift 9s linear infinite; will-change: background-position; }
@keyframes bgDrift { from { background-position: 0 0; } to { background-position: calc(90 * var(--dp)) calc(90 * var(--dp)); } }
@media (prefers-reduced-motion: reduce) { .bluebg::before { animation: none; } }
.carcard.sel { border: calc(3.5 * var(--dp)) solid #FFD43B; box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.35); }
.pick.on { border: calc(3 * var(--dp)) solid #FFD43B; box-shadow: 0 calc(3 * var(--dp)) 0 rgba(0,0,0,.4); }
.card.sel { border-color: #FFD43B; box-shadow: 0 calc(5 * var(--dp)) 0 rgba(0,0,0,.35); }

#queue { background: radial-gradient(ellipse at 50% 45%, var(--bg-blue-1), var(--bg-blue-2) 75%); flex-direction: column; justify-content: center; gap: calc(14 * var(--dp)); overflow: hidden; z-index: 12; }
#queue.on { display: flex; animation: scrIn 200ms ease-out; }
#queue .rays { inset: -60%; z-index: 0; opacity: .7; }
#queue > *:not(.rays) { position: relative; z-index: 1; }
.qmode { position: absolute !important; left: calc(14 * var(--dp) + var(--safe-l)); top: calc(12 * var(--dp)); display: flex; align-items: center; gap: calc(8 * var(--dp)); background: linear-gradient(#4C5672, #353C4E); border: calc(2 * var(--dp)) solid var(--ink); border-radius: calc(8 * var(--dp)); padding: calc(5 * var(--dp)) calc(14 * var(--dp)); transform: skewX(-8deg); box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.35); }
.qmode > * { transform: skewX(8deg); }
.qmode .mi { font-size: calc(20 * var(--dp)); }
.qmode .mt { font-size: calc(14 * var(--dp)); text-transform: uppercase; line-height: 1; }
.qmode .ms { font-family: 'Body'; font-weight: 800; font-size: calc(10 * var(--dp)); color: #B9C6E8; }
.qtime { position: absolute !important; right: calc(14 * var(--dp) + var(--safe-r)); top: calc(14 * var(--dp)); display: flex; align-items: center; gap: calc(6 * var(--dp)); height: calc(32 * var(--dp)); padding: 0 calc(12 * var(--dp)) 0 calc(6 * var(--dp)); background: var(--well); border: calc(2 * var(--dp)) solid rgba(0,0,0,.4); border-radius: calc(8 * var(--dp)); font-size: calc(17 * var(--dp)); font-variant-numeric: tabular-nums; }
.qtime .ic { font-size: calc(16 * var(--dp)); }
.qtitle { font-size: calc(34 * var(--dp)); font-style: italic; transform: skewX(-8deg); text-transform: uppercase; white-space: nowrap; }
#queue:not(.go) .qtitle::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
#queue.go .qtitle { color: #7BE86C; animation: pop 300ms cubic-bezier(.2, 1.4, .4, 1); }
.qslots { display: flex; gap: calc(10 * var(--dp)); justify-content: center; padding: 0 calc(16 * var(--dp)); max-width: 100vw; }
.qs { position: relative; width: calc(92 * var(--dp)); height: calc(124 * var(--dp)); border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(9 * var(--dp)); background: rgba(14, 18, 32, .55); box-shadow: inset 0 0 0 calc(2 * var(--dp)) rgba(255,255,255,.08), 0 calc(5 * var(--dp)) 0 rgba(0,0,0,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--dp)); padding: calc(6 * var(--dp)); text-align: center; animation: slotIn 380ms cubic-bezier(.2, 1.4, .4, 1) backwards; }
@keyframes slotIn { from { transform: translateY(calc(30 * var(--dp))) scale(.7); opacity: 0; } }
.qs .qav { width: calc(52 * var(--dp)); height: calc(52 * var(--dp)); border-radius: calc(9 * var(--dp)); border: calc(2.5 * var(--dp)) solid var(--ink); background: linear-gradient(#5A6280, #353C4E); display: grid; place-items: center; font-size: calc(30 * var(--dp)); box-shadow: 0 calc(3 * var(--dp)) 0 rgba(0,0,0,.35); }
.qs .qav.q { background: var(--well); color: rgba(255,255,255,.35); font-size: calc(28 * var(--dp)); animation: qpulse 1.4s ease-in-out infinite; }
.qs.need .qav.q { color: rgba(255,255,255,.6); }
@keyframes qpulse { 50% { transform: scale(1.08); box-shadow: 0 0 calc(14 * var(--dp)) rgba(255,255,255,.25); } }
.qs .qn { font-size: calc(11 * var(--dp)); letter-spacing: 0; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs .qc { font-family: 'Body'; font-weight: 800; font-size: calc(9.5 * var(--dp)); color: #E6F0FF; line-height: 1.1; }
.qs.me { background: linear-gradient(#FFB55A, var(--orange)); }
.qs.me .qav { background: linear-gradient(#FFB7C4, #E86A86); border-color: #fff; }
.qs.on { background: linear-gradient(#7BE86C, #3FA834); }
.qs.on .qav { background: linear-gradient(#4C5672, #353C4E); }
.qs .qtag, .qs .qok { position: absolute; top: calc(-10 * var(--dp)); left: 50%; transform: translateX(-50%); background: var(--ink); border-radius: calc(5 * var(--dp)); padding: 0 calc(8 * var(--dp)); font-size: calc(11 * var(--dp)); line-height: calc(18 * var(--dp)); text-transform: uppercase; }
.qs .qok { background: var(--green); border: calc(1.5 * var(--dp)) solid var(--ink); }
.qs.need:not(.on):not(.me) { border-style: dashed; }
.qstatus { display: flex; align-items: center; gap: calc(10 * var(--dp)); background: var(--well); border: calc(2 * var(--dp)) solid rgba(0,0,0,.4); border-radius: calc(8 * var(--dp)); padding: calc(4 * var(--dp)) calc(14 * var(--dp)); }
.qstatus .t { font-size: calc(18 * var(--dp)); font-variant-numeric: tabular-nums; }
.qstatus .qsub { font-family: 'Body'; font-weight: 800; font-size: calc(13 * var(--dp)); color: #E6F0FF; margin: 0; min-height: 0; }
#queue.go .qstatus { background: rgba(46, 138, 36, .85); }
.qtip { font-family: 'Body'; font-weight: 800; font-size: calc(12 * var(--dp)); color: #E6F0FF; max-width: min(90vw, calc(460 * var(--dp))); text-align: center; display: flex; align-items: center; gap: calc(8 * var(--dp)); }
.qtip .t { font-family: 'Game'; font-weight: 900; font-size: calc(11 * var(--dp)); text-transform: uppercase; color: #FFD43B; background: var(--ink); border-radius: calc(4 * var(--dp)); padding: 0 calc(6 * var(--dp)); flex: 0 0 auto; -webkit-text-stroke: 0; text-shadow: none; }
.qtip.in { animation: tipIn 400ms ease-out; }
@keyframes tipIn { from { opacity: 0; transform: translateY(calc(6 * var(--dp))); } }
.qcancel { min-width: calc(170 * var(--dp)); height: calc(48 * var(--dp)); font-size: calc(18 * var(--dp)); margin-top: calc(4 * var(--dp)); }
@media (max-height: 420px) { .qs { width: calc(84 * var(--dp)); height: calc(112 * var(--dp)); } #queue { gap: calc(10 * var(--dp)); } }

.avatar { --fr: #fff; border-color: var(--fr); }
.avatar.rb { animation: rbBorder 3s linear infinite; }
[data-rb] { animation: rbText 3s linear infinite; }
@keyframes rbText { 0% { color: #FF6150; } 17% { color: #FF9F43; } 33% { color: #FFD43B; } 50% { color: #7BE86C; } 67% { color: #5EE6FF; } 83% { color: #C084FC; } 100% { color: #FF6150; } }
@keyframes rbBorder { 0% { border-color: #FF6150; } 17% { border-color: #FF9F43; } 33% { border-color: #FFD43B; } 50% { border-color: #7BE86C; } 67% { border-color: #5EE6FF; } 83% { border-color: #C084FC; } 100% { border-color: #FF6150; } }
.avatar.huge { width: calc(96 * var(--dp)); height: calc(96 * var(--dp)); font-size: calc(58 * var(--dp)); border-width: calc(4 * var(--dp)); border-radius: calc(16 * var(--dp)); box-shadow: 0 calc(5 * var(--dp)) 0 var(--ink); }
.qs .avatar.qav { border-width: calc(3 * var(--dp)); background: linear-gradient(#FFB7C4, #E86A86); }
#editProfile { margin-top: calc(14 * var(--dp)); height: calc(42 * var(--dp)); padding: 0 calc(20 * var(--dp)); }
.cbody { display: flex; gap: calc(16 * var(--dp)); min-height: 0; }
.cprev { flex: 0 0 calc(200 * var(--dp)); display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--dp)); background: rgba(16, 26, 70, .45); border: calc(2 * var(--dp)) solid var(--panel-border); border-radius: calc(10 * var(--dp)); padding: calc(14 * var(--dp)) calc(10 * var(--dp)); }
.cprev .avatar { background: linear-gradient(#FFB7C4, #E86A86); display: grid; place-items: center; }
.cnick { font-size: calc(20 * var(--dp)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cprev .input { width: 100%; height: calc(38 * var(--dp)); font-size: calc(16 * var(--dp)); margin: 0; }
.cprev .err { margin: calc(-4 * var(--dp)) 0 0; min-height: calc(12 * var(--dp)); }
#cSave { width: 100%; height: calc(46 * var(--dp)); font-size: calc(18 * var(--dp)); margin-top: auto; }
.cside { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(10 * var(--dp)); }
.ctabs { display: flex; gap: calc(4 * var(--dp)); justify-content: center; padding-top: calc(2 * var(--dp)); }
.ctabs .tab { padding: calc(4 * var(--dp)) calc(14 * var(--dp)); font-size: calc(13 * var(--dp)); }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(50 * var(--dp)), 1fr)); gap: calc(8 * var(--dp)); overflow-y: auto; padding: calc(6 * var(--dp)) calc(4 * var(--dp)); scrollbar-width: none; max-height: calc(100vh - 150 * var(--dp)); }
.cgrid::-webkit-scrollbar { display: none; }
.citem { position: relative; aspect-ratio: 1; border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(9 * var(--dp)); background: var(--well); display: grid; place-items: center; cursor: pointer; box-shadow: 0 calc(3 * var(--dp)) 0 rgba(0,0,0,.4); transition: transform 80ms; }
.citem:active { transform: scale(.92); }
.citem .ce { font-size: calc(28 * var(--dp)); line-height: 1; }
.citem.on { border: calc(3 * var(--dp)) solid #FFD43B; }
.citem.locked .ce { filter: grayscale(1) brightness(.55); }
.citem .clk { position: absolute; right: calc(-5 * var(--dp)); bottom: calc(-5 * var(--dp)); font-size: calc(13 * var(--dp)); background: var(--ink); border-radius: calc(5 * var(--dp)); padding: calc(1 * var(--dp)) calc(2 * var(--dp)); }
.citem.sw { background: var(--c); box-shadow: inset 0 calc(3 * var(--dp)) 0 rgba(255,255,255,.35), inset 0 calc(-4 * var(--dp)) 0 rgba(0,0,0,.2), 0 calc(3 * var(--dp)) 0 rgba(0,0,0,.4); }
.citem.sw.rb { background: conic-gradient(#FF6150, #FF9F43, #FFD43B, #7BE86C, #5EE6FF, #C084FC, #FF6150); }
.citem.sw.on::after { content: '✓'; color: #fff; font-size: calc(22 * var(--dp)); -webkit-text-stroke: calc(2 * var(--dp)) var(--ink); paint-order: stroke fill; }
.citem.sw.locked { filter: saturate(.4) brightness(.7); }
.cgrid.icon { grid-template-columns: repeat(auto-fill, minmax(calc(52 * var(--dp)), 1fr)); }
.cgrid.name, .cgrid.frame { grid-template-columns: repeat(auto-fill, minmax(calc(56 * var(--dp)), 1fr)); }
.label[data-rb] { animation: rbText 3s linear infinite; }
.vs .pl .avatar { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; font-size: .85em; vertical-align: middle; margin-right: calc(6 * var(--dp)); border-width: calc(2 * var(--dp)); border-radius: calc(5 * var(--dp)); box-shadow: none; -webkit-text-stroke: 0; text-shadow: none; background: linear-gradient(#FFB7C4, #E86A86); }
.vs .pl > .avatar { transform: skewX(8deg); }
.qs.me .avatar.qav { border-color: var(--fr); }
.qs.me .avatar.qav.rb { animation: rbBorder 3s linear infinite; }

#flipTap { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: calc(6 * var(--dp)); pointer-events: none; z-index: 4; }
#flipTap.on { display: flex; animation: pop 260ms cubic-bezier(.2, 1.4, .4, 1); }
#flipTap .ft { font-size: calc(46 * var(--dp)); font-style: italic; text-transform: uppercase; color: #FFD43B; white-space: nowrap; animation: tapPulse 0.32s ease-in-out infinite alternate; }
@keyframes tapPulse { from { transform: skewX(-8deg) scale(1); } to { transform: skewX(-8deg) scale(1.12) rotate(-2deg); } }
#flipTap.cold .ft { color: #FF8A7A; }
#flipTap .fs { font-size: calc(12 * var(--dp)); text-transform: uppercase; }
#hud.flipped .joy, #hud.flipped .pedal { opacity: .35; }

.abil { position: absolute; right: calc(24 * var(--dp) + var(--safe-r)); bottom: calc(168 * var(--dp)); width: calc(72 * var(--dp)); height: calc(72 * var(--dp)); border-radius: 50%; z-index: 3; touch-action: none; display: none; transition: transform 80ms ease-out; --p: 1; --c1: #FFE27A; --c2: #E89B1C; }
.abil.on { display: block; }
.abil .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#FFD43B calc(var(--p) * 1turn), rgba(14,18,32,.7) 0); border: calc(3 * var(--dp)) solid var(--ink); box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.45); }
.abil .ic { position: absolute; inset: calc(9 * var(--dp)); border-radius: 50%; display: grid; place-items: center; font-size: calc(32 * var(--dp)); line-height: 1; background: radial-gradient(circle at 38% 30%, var(--c1), var(--c2)); border: calc(3 * var(--dp)) solid var(--ink); box-shadow: inset 0 calc(-5 * var(--dp)) 0 rgba(0,0,0,.25), inset 0 calc(3 * var(--dp)) 0 rgba(255,255,255,.45); transition: filter 120ms; }
.abil .cd { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(28 * var(--dp)); pointer-events: none; }
.abil .nm { position: absolute; left: 50%; bottom: calc(100% + 2 * var(--dp)); transform: translateX(-50%); font-size: calc(11 * var(--dp)); text-transform: uppercase; white-space: nowrap; color: #FFE27A; pointer-events: none; }
.abil.cold .ic { filter: grayscale(.85) brightness(.55); }
.abil.notgt .ic { filter: grayscale(.5) brightness(.75); }
.abil.ready:not(.notgt) .ring { animation: abReady 1.1s ease-in-out infinite; }
.abil.flash .ic { animation: pop 260ms; }
.abil.press { transform: scale(.88); }
.abil.passive { width: calc(60 * var(--dp)); height: calc(60 * var(--dp)); pointer-events: none; }
.abil.passive .ic { inset: calc(6 * var(--dp)); font-size: calc(24 * var(--dp)); }
@keyframes abReady { 0%, 100% { box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.45), 0 0 0 0 rgba(255,212,59,.0); } 50% { box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.45), 0 0 0 calc(6 * var(--dp)) rgba(255,212,59,.45); } }
#hud.done .abil, #hud.flipped .abil { display: none; }
#milkfx { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0) 48%, rgba(250,248,238,.55) 70%, rgba(250,248,238,.95) 100%); }
.abil.passive .ring { background: radial-gradient(circle, #6FB4FF, #2A6FE0); box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.45), 0 0 calc(14 * var(--dp)) rgba(80,160,255,.9); animation: abPassive 1.6s ease-in-out infinite; }
.abil.passive .nm { color: #9FD0FF; }
@keyframes abPassive { 0%, 100% { box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.45), 0 0 calc(8 * var(--dp)) rgba(80,160,255,.6); } 50% { box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.45), 0 0 calc(22 * var(--dp)) rgba(110,185,255,1); } }
.abil .ic img { width: 72%; height: 72%; object-fit: contain; pointer-events: none; }
.abil.jet { bottom: calc(256 * var(--dp)); --c1: #FFB46A; --c2: #E0461E; }
.abil.jet .ring { background: conic-gradient(#FF8A2E calc(var(--p) * 1turn), rgba(14,18,32,.7) 0); }
.abil.jet.burn .ring { background: conic-gradient(#FFE27A calc(var(--p) * 1turn), #E0461E 0); animation: jetBurn 0.18s linear infinite; }
.abil.jet.burn .ic { filter: brightness(1.25) saturate(1.3); }
.abil.jet .nm { color: #FFB46A; }
@keyframes jetBurn { 0%, 100% { box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.45), 0 0 calc(10 * var(--dp)) rgba(255,140,40,.8); } 50% { box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.45), 0 0 calc(20 * var(--dp)) rgba(255,200,80,1); } }

.zoodrag { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.zoodrag:active { cursor: grabbing; }
.zcount { gap: calc(6 * var(--dp)); padding: 0 calc(10 * var(--dp)); cursor: default; }
.zcount .t:first-child { font-size: calc(11 * var(--dp)); color: #C9D8FF; }
.zarrow { position: absolute; top: 46%; width: calc(48 * var(--dp)); height: calc(64 * var(--dp)); padding: 0; font-size: calc(24 * var(--dp)); transform: translateY(-50%) skewX(-8deg); z-index: 2; }
.zarrow:active { transform: translateY(calc(-50% + 4 * var(--dp))) skewX(-8deg); }
.zarrow.l { left: calc(14 * var(--dp) + var(--safe-l)); }
.zarrow.r { right: calc(14 * var(--dp) + var(--safe-r)); }
.zooinfo { position: absolute; left: 50%; bottom: calc(12 * var(--dp)); transform: translateX(-50%); width: calc(330 * var(--dp)); display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--dp)); pointer-events: none; z-index: 2; }
.zooinfo.pop { animation: zpop 220ms cubic-bezier(.3,1.6,.5,1); }
@keyframes zpop { from { transform: translateX(-50%) scale(.9); opacity: .4; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.zname { font-size: calc(20 * var(--dp)); padding: calc(3 * var(--dp)) calc(26 * var(--dp)); }
.zooinfo.locked .zname { background: #8A8F9C; }
.zab { width: 100%; display: flex; align-items: center; gap: calc(10 * var(--dp)); background: rgba(16, 26, 70, 0.86); border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(10 * var(--dp)); padding: calc(7 * var(--dp)) calc(10 * var(--dp)); box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.35); }
.zic { flex: none; width: calc(46 * var(--dp)); height: calc(46 * var(--dp)); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #8B6A4A, #5A3F28); border: calc(3 * var(--dp)) solid var(--yellow-1); box-shadow: 0 0 0 calc(2 * var(--dp)) var(--ink), 0 calc(3 * var(--dp)) 0 calc(2 * var(--dp)) var(--ink); font-size: calc(24 * var(--dp)); }
.zic.passive { background: radial-gradient(circle, #6FB4FF, #2A6FE0); border-color: #CFE6FF; }
.zic img { width: 74%; height: 74%; object-fit: contain; }
.zooinfo.locked .zic { background: #1A1F2E; border-color: #545B6E; color: #8A8F9C; }
.ztx { flex: 1; min-width: 0; }
.zan { font-size: calc(16 * var(--dp)); text-transform: uppercase; line-height: 1.1; }
.zdesc { font-family: 'Body', sans-serif; font-weight: 800; font-size: calc(11.5 * var(--dp)); color: #D6E6FF; line-height: 1.25; margin-top: calc(2 * var(--dp)); }
.zooinfo.locked .zan { color: #8A8F9C; font-size: calc(22 * var(--dp)); letter-spacing: .15em; }
.zcd { flex: none; background: var(--well); border: calc(2 * var(--dp)) solid rgba(0,0,0,.45); border-radius: calc(6 * var(--dp)); padding: calc(4 * var(--dp)) calc(8 * var(--dp)); font-size: calc(13 * var(--dp)); color: #fff; -webkit-text-stroke: calc(1.6 * var(--dp)) var(--ink); paint-order: stroke fill; text-align: center; line-height: 1.1; }
.zcd small { display: block; font-size: calc(8.5 * var(--dp)); color: #9FB3E0; -webkit-text-stroke: 0; font-family: 'Body'; font-weight: 800; text-transform: uppercase; }
.zcd:empty { display: none; }
.zpick { position: absolute; right: calc(16 * var(--dp) + var(--safe-r)); bottom: calc(18 * var(--dp)); min-width: calc(150 * var(--dp)); height: calc(56 * var(--dp)); font-size: calc(22 * var(--dp)); z-index: 2; }
.zpick.cur { background: linear-gradient(#454D63, var(--nav-dark)); box-shadow: inset 0 calc(2 * var(--dp)) 0 rgba(255,255,255,.15), 0 calc(5 * var(--dp)) 0 var(--nav-dark-lo); pointer-events: none; }
.zpick.lock { background: linear-gradient(#A3A8B4, #8A8F9C); box-shadow: inset 0 calc(2 * var(--dp)) 0 rgba(255,255,255,.25), 0 calc(5 * var(--dp)) 0 #5D6270; font-size: calc(17 * var(--dp)); }

#hud.intro > :not(#introCard):not(#count):not(#camzone):not(#labels) { visibility: hidden; }
#introCard { position: absolute; left: 0; top: 0; display: none; flex-direction: column; align-items: center; gap: calc(5 * var(--dp)); pointer-events: none; z-index: 5; will-change: transform; }
#introCard.on { display: flex; }
#introCard .nm { font-size: calc(20 * var(--dp)); white-space: nowrap; display: flex; align-items: center; gap: calc(6 * var(--dp)); }
#introCard .nm .avatar { width: calc(26 * var(--dp)); height: calc(26 * var(--dp)); font-size: calc(15 * var(--dp)); }
#introCard .mods { display: flex; gap: calc(6 * var(--dp)); background: var(--well); border: calc(2 * var(--dp)) solid var(--ink); border-radius: calc(8 * var(--dp)); padding: calc(6 * var(--dp)); box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.35); }
#introCard .md { position: relative; width: calc(58 * var(--dp)); display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--dp)); background: linear-gradient(#4C5672, #353C4E); border: calc(2 * var(--dp)) solid var(--ink); border-radius: calc(6 * var(--dp)); padding: calc(4 * var(--dp)) calc(2 * var(--dp)) calc(3 * var(--dp)); border-bottom-color: var(--tc, #9AA4B5); border-bottom-width: calc(4 * var(--dp)); }
#introCard .md .gi { width: calc(36 * var(--dp)); height: calc(36 * var(--dp)); }
#introCard .md.stock .gi { filter: grayscale(1) brightness(.7); opacity: .6; }
#introCard .md .lv { position: absolute; right: calc(-5 * var(--dp)); top: calc(-7 * var(--dp)); min-width: calc(20 * var(--dp)); height: calc(18 * var(--dp)); border-radius: calc(5 * var(--dp)); border: calc(1.5 * var(--dp)) solid var(--ink); display: grid; place-items: center; font-size: calc(11 * var(--dp)); padding: 0 calc(3 * var(--dp)); background: var(--tc, #9AA4B5); }
#introCard .md .tn { font-size: calc(8.5 * var(--dp)); text-transform: uppercase; white-space: nowrap; color: var(--tc, #C9D2E6); }
#introCard .md .sn { font-size: calc(9 * var(--dp)); text-transform: uppercase; }
#introCard.pop > * { animation: pop 260ms cubic-bezier(.2, 1.4, .4, 1); }
#light { position: absolute; left: 50%; top: calc(84 * var(--dp)); transform: translateX(-50%); display: none; flex-direction: row; gap: calc(6 * var(--dp)); padding: calc(8 * var(--dp)) calc(8 * var(--dp)); background: linear-gradient(#2A3044, #161B2C); border: calc(3 * var(--dp)) solid var(--ink); border-radius: calc(14 * var(--dp)); box-shadow: inset 0 calc(2 * var(--dp)) 0 rgba(255,255,255,.12), 0 calc(6 * var(--dp)) 0 rgba(0,0,0,.4); pointer-events: none; z-index: 5; }
#light.on { display: flex; animation: lightIn 300ms cubic-bezier(.2, 1.4, .4, 1); }
#light.off { animation: lightOut 400ms ease-in forwards; display: flex; }
#light i { width: calc(36 * var(--dp)); height: calc(36 * var(--dp)); border-radius: 50%; border: calc(3 * var(--dp)) solid var(--ink); background: #3A3F52; box-shadow: inset 0 calc(-4 * var(--dp)) 0 rgba(0,0,0,.35); transition: background 80ms, box-shadow 80ms; }
#light i.lit.r { background: radial-gradient(circle at 40% 35%, #FFB3A8, #FF3B2B 55%, #B81E12); box-shadow: 0 0 calc(18 * var(--dp)) #FF3B2B, inset 0 calc(-4 * var(--dp)) 0 rgba(0,0,0,.25); }
#light i.lit.y { background: radial-gradient(circle at 40% 35%, #FFF3B0, #FFD43B 55%, #D99A00); box-shadow: 0 0 calc(18 * var(--dp)) #FFD43B, inset 0 calc(-4 * var(--dp)) 0 rgba(0,0,0,.25); }
#light i.lit.g { background: radial-gradient(circle at 40% 35%, #D4FFC8, #58D34A 55%, #2E9A22); box-shadow: 0 0 calc(22 * var(--dp)) #58D34A, inset 0 calc(-4 * var(--dp)) 0 rgba(0,0,0,.25); }
@keyframes lightIn { from { transform: translateX(-50%) translateY(calc(-60 * var(--dp))); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes lightOut { to { transform: translateX(-50%) translateY(calc(-60 * var(--dp))); opacity: 0; } }

#spec { display: none; }
#hud.spec #spec { display: block; }
#hud.spec .pedals, #hud.spec .joyzone, #hud.spec .abil, #hud.spec .gauge, #hud.spec #flipTap { display: none; }
#hud.done #spec { display: none; }
#spec .sarr { position: absolute; top: 50%; width: calc(64 * var(--dp)); height: calc(78 * var(--dp)); padding: 0; font-size: calc(46 * var(--dp)); line-height: 1; z-index: 4; animation: sarrIn 350ms cubic-bezier(.2, 1.4, .4, 1) backwards; }
#spec .sarr span { display: block; margin-top: calc(-8 * var(--dp)); }
#spec .sarr.l { left: calc(12 * var(--dp) + var(--safe-l)); transform: translateY(-50%) skewX(-6deg); }
#spec .sarr.r { right: calc(12 * var(--dp) + var(--safe-r)); transform: translateY(-50%) skewX(-6deg); }
#spec .sarr.l:active { transform: translateY(calc(-50% + 4 * var(--dp))) skewX(-6deg); }
#spec .sarr.r:active { transform: translateY(calc(-50% + 4 * var(--dp))) skewX(-6deg); }
@keyframes sarrIn { from { opacity: 0; scale: .5; } }
#spec .sbar { position: absolute; left: 50%; bottom: calc(14 * var(--dp)); transform: translateX(-50%); display: flex; align-items: center; gap: calc(10 * var(--dp)); z-index: 4; }
#spec .smode { height: calc(52 * var(--dp)); min-width: calc(110 * var(--dp)); font-size: calc(17 * var(--dp)); }
#hud.cine #spec .sarr { display: none; }
#spec .sbox { position: relative; transform: skewX(-6deg); display: flex; flex-direction: column; align-items: center; background: var(--well); border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(10 * var(--dp)); padding: calc(5 * var(--dp)) calc(22 * var(--dp)) calc(6 * var(--dp)); box-shadow: 0 calc(4 * var(--dp)) 0 rgba(0,0,0,.35); pointer-events: none; min-width: calc(190 * var(--dp)); }
#spec .sbox > * { transform: skewX(6deg); }
#spec .sh { font-size: calc(11 * var(--dp)); color: #9BD7FF; text-transform: uppercase; }
#spec .sn { font-size: calc(22 * var(--dp)); white-space: nowrap; max-width: calc(330 * var(--dp)); overflow: hidden; text-overflow: ellipsis; }
#hud.cine #spec .sn { font-size: calc(17 * var(--dp)); }
#hud.cine #spec .sh { color: #FFD43B; }
#spec .sn.pop { animation: pop 300ms cubic-bezier(.2, 1.5, .4, 1); }
#spec .si { font-family: 'Body'; font-weight: 800; font-size: calc(11 * var(--dp)); color: #E6F0FF; white-space: nowrap; }
.lbrow.watch .pn { box-shadow: inset 0 0 0 calc(2.5 * var(--dp)) #9BD7FF; color: #9BD7FF; }
.lbrow.watch .nm::after { content: ''; display: inline-block; width: 1.1em; height: 1.1em; margin-left: 0.25em; vertical-align: -0.2em; background: url('../assets/icons/ui_eye.webp') center / contain no-repeat; }
#cinefade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 200ms linear; z-index: 3; }
#cinefade.on { opacity: 1; }

.mailbtn { width: calc(40 * var(--dp)); height: calc(34 * var(--dp)); padding: 0; font-size: calc(18 * var(--dp)); transform: skewX(-8deg); }
.mailbtn:active { transform: skewX(-8deg) translateY(calc(4 * var(--dp))); }
.mailbtn > span { display: inline-block; transform: skewX(8deg); -webkit-text-stroke: 0; text-shadow: none; }
.mailbtn .badge { right: calc(-6 * var(--dp)); top: calc(-8 * var(--dp)); transform: skewX(8deg); }
.panel.mailp { width: min(calc(640 * var(--dp)), calc(100vw - 48 * var(--dp))); height: calc(100vh - 36 * var(--dp)); display: flex; flex-direction: column; }
.mcols { flex: 1; min-height: 0; display: flex; gap: calc(10 * var(--dp)); }
.mlist { width: calc(200 * var(--dp)); flex: 0 0 auto; overflow-y: auto; display: flex; flex-direction: column; gap: calc(6 * var(--dp)); padding: calc(2 * var(--dp)) calc(4 * var(--dp)) calc(6 * var(--dp)) 0; touch-action: pan-y; }
.mlist::-webkit-scrollbar, .mbody::-webkit-scrollbar { display: none; }
.mempty { font-size: calc(14 * var(--dp)); opacity: .8; padding: calc(10 * var(--dp)); }
.mitem { position: relative; display: flex; align-items: center; gap: calc(8 * var(--dp)); min-height: calc(50 * var(--dp)); padding: calc(5 * var(--dp)) calc(8 * var(--dp)); background: var(--well); border: calc(2 * var(--dp)) solid var(--ink); border-radius: calc(7 * var(--dp)); cursor: pointer; }
.mitem.sel { background: linear-gradient(#FFE07A, #F2A72E); }
.mitem.new::before { content: ''; position: absolute; left: calc(-4 * var(--dp)); top: calc(-4 * var(--dp)); width: calc(12 * var(--dp)); height: calc(12 * var(--dp)); border-radius: 50%; background: var(--red); border: calc(1.5 * var(--dp)) solid var(--ink); }
.mic { font-size: calc(22 * var(--dp)); line-height: 1; }
.mic.big { font-size: calc(34 * var(--dp)); }
.mtx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mtx b { font-size: calc(13 * var(--dp)); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mtx small { font-family: 'Body'; font-weight: 800; font-size: calc(10 * var(--dp)); color: #C9D6F0; }
.mitem.sel .mtx small { color: #5A3A08; }
.mgift { font-size: calc(18 * var(--dp)); animation: wob 2.4s infinite; }
.mview { text-align: left; flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--well); border: calc(2 * var(--dp)) solid var(--ink); border-radius: calc(8 * var(--dp)); padding: calc(10 * var(--dp)) calc(12 * var(--dp)); }
.mhead { display: flex; align-items: center; gap: calc(10 * var(--dp)); padding-bottom: calc(8 * var(--dp)); border-bottom: calc(2 * var(--dp)) solid rgba(255,255,255,.12); }
.mtitle { font-size: calc(18 * var(--dp)); line-height: 1.1; }
.mfrom { font-family: 'Body'; font-weight: 800; font-size: calc(10.5 * var(--dp)); color: #C9D6F0; margin-top: calc(2 * var(--dp)); }
.mbody { flex: 1; min-height: 0; overflow-y: auto; padding: calc(8 * var(--dp)) 0; touch-action: pan-y; }
.mtext { font-family: 'Body'; font-weight: 700; font-size: calc(13 * var(--dp)); line-height: 1.35; color: #EEF4FF; margin: 0 0 calc(8 * var(--dp)); }
.mimg { display: block; max-width: 100%; max-height: calc(160 * var(--dp)); margin: 0 auto calc(8 * var(--dp)); border-radius: calc(6 * var(--dp)); border: calc(2 * var(--dp)) solid var(--ink); image-rendering: pixelated; }
.mlink { height: calc(36 * var(--dp)); padding: 0 calc(16 * var(--dp)); font-size: calc(14 * var(--dp)); margin-bottom: calc(10 * var(--dp)); }
.mpoll { display: flex; flex-direction: column; gap: calc(8 * var(--dp)); margin: calc(4 * var(--dp)) 0 calc(12 * var(--dp)); }
.mq { font-size: calc(14 * var(--dp)); }
.mopt { min-height: calc(36 * var(--dp)); font-size: calc(13 * var(--dp)); justify-content: flex-start; padding: 0 calc(12 * var(--dp)); }
.mopt.voted { pointer-events: none; }
.mopt.voted.dark { opacity: .6; }
.mthanks { font-family: 'Body'; font-weight: 800; font-size: calc(11 * var(--dp)); color: #B8F05A; }
.mrh { font-size: calc(14 * var(--dp)); text-transform: uppercase; margin: calc(6 * var(--dp)) 0; color: #FFD43B; }
.mrew { display: flex; flex-wrap: wrap; gap: calc(8 * var(--dp)); }
.mrew.done { filter: grayscale(.7) brightness(.8); }
.rcard { width: calc(78 * var(--dp)); height: calc(86 * var(--dp)); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(4 * var(--dp)); background: linear-gradient(#5AA2F2, #2F6BE8); border: calc(2 * var(--dp)) solid var(--ink); border-radius: calc(7 * var(--dp)); box-shadow: 0 calc(3 * var(--dp)) 0 rgba(0,0,0,.35); }
.rcard.tier { background: linear-gradient(color-mix(in srgb, var(--tc) 55%, #fff), var(--tc)); }
.rcard .rimg { width: calc(52 * var(--dp)); height: calc(52 * var(--dp)); display: grid; place-items: center; object-fit: contain; }
.rcard .rimg svg, .rcard .rimg img, .rvcell .rv-img svg, .rvcell div.rv-img img { width: 100%; height: 100%; object-fit: contain; }
.rcard b { font-size: calc(11 * var(--dp)); text-align: center; line-height: 1.05; }
.emo { font-size: calc(40 * var(--dp)); line-height: 1; }
.rvcell .emo { font-size: calc(110 * var(--dp)); }
.swatch { display: block; width: 80%; height: 80%; border-radius: 50%; border: calc(3 * var(--dp)) solid var(--ink); }
.swatch.rb { background: conic-gradient(#FF6150, #FFD43B, #7BE86C, #5EE6FF, #7FB2FF, #C084FC, #FF6150); }
.mfoot { display: flex; justify-content: center; padding-top: calc(6 * var(--dp)); }
.mclaim { min-width: calc(170 * var(--dp)); height: calc(48 * var(--dp)); font-size: calc(20 * var(--dp)); animation: breathe 2.4s ease-in-out infinite; }
.mdel { height: calc(34 * var(--dp)); padding: 0 calc(18 * var(--dp)); font-size: calc(13 * var(--dp)); }
.rvgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(18 * var(--dp)); max-width: calc(100vw - 60 * var(--dp)); }
.rvcell { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--dp)); width: calc(150 * var(--dp)); }
.rvgrid:not(.one) .rv-img { width: calc(100 * var(--dp)); height: calc(100 * var(--dp)); }
.rvgrid:not(.one) .rv-title { font-size: calc(20 * var(--dp)); text-align: center; }
.rvgrid:not(.one) .emo { font-size: calc(76 * var(--dp)); }
.rvcell div.rv-img { display: grid; place-items: center; }
.rvgrid.many { gap: calc(8 * var(--dp)) calc(14 * var(--dp)); max-width: calc(560 * var(--dp)); }
.rvgrid.many .rvcell { width: calc(112 * var(--dp)); gap: calc(2 * var(--dp)); }
.rvgrid.many .rv-img { width: calc(62 * var(--dp)); height: calc(62 * var(--dp)); }
.rvgrid.many .rv-title { font-size: calc(15 * var(--dp)); }
.rvgrid.many .rv-sub { font-size: calc(11 * var(--dp)); text-align: center; }
.rvgrid.many .emo { font-size: calc(50 * var(--dp)); }
.sett { font-size: calc(16 * var(--dp)); text-transform: uppercase; text-align: left; margin-bottom: calc(8 * var(--dp)); }
.gfxrow { display: flex; gap: calc(10 * var(--dp)); margin-bottom: calc(12 * var(--dp)); }
.gfx { flex: 1; min-height: calc(76 * var(--dp)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--dp)); background: var(--well); border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(9 * var(--dp)); box-shadow: 0 calc(3 * var(--dp)) 0 rgba(0,0,0,.4); cursor: pointer; transition: transform 80ms; }
.gfx:active { transform: scale(.94); }
.gfx.on { background: linear-gradient(#FFB55A, var(--orange)); border-color: #FFD43B; }
.gfx .gfi { font-size: calc(26 * var(--dp)); line-height: 1; }
.gfx .gn { font-size: calc(15 * var(--dp)); text-transform: uppercase; }
.gfx-low .lbrow, .gfx-low .lbrow * { animation: none !important; }
.gfx-low .lbrow .fx { display: none; }
.setbody, #custom .cbody { position: absolute; top: calc(60 * var(--dp)); bottom: calc(14 * var(--dp)); left: calc(14 * var(--dp) + var(--safe-l)); right: calc(14 * var(--dp) + var(--safe-r)); }
.setbody { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--dp)); align-items: start; }
.setsec { background: var(--panel-blue); border: calc(3 * var(--dp)) solid var(--panel-border); border-radius: calc(8 * var(--dp)); box-shadow: 0 calc(6 * var(--dp)) 0 rgba(0,0,0,.35); padding: calc(12 * var(--dp)) calc(14 * var(--dp)) calc(14 * var(--dp)); animation: pop 240ms cubic-bezier(.2, 1.4, .4, 1) backwards; }
.setsec + .setsec { animation-delay: 60ms; }
.setnote { font-family: 'Body'; font-weight: 800; font-size: calc(12 * var(--dp)); line-height: 1.35; margin: 0 0 calc(12 * var(--dp)); color: #E6F0FF; }
.acc .accrow { display: flex; align-items: center; gap: calc(10 * var(--dp)); background: var(--well); border: calc(2.5 * var(--dp)) solid var(--ink); border-radius: calc(9 * var(--dp)); padding: calc(8 * var(--dp)) calc(12 * var(--dp)); margin-bottom: calc(10 * var(--dp)); }
.acc .acci { font-size: calc(26 * var(--dp)); line-height: 1; }
.acc .acct { display: flex; flex-direction: column; min-width: 0; }
.acc .acct b { font-size: calc(17 * var(--dp)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc .acct small { font-family: 'Body'; font-weight: 800; font-size: calc(11 * var(--dp)); color: #9FC3FF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accbtns { display: flex; justify-content: center; }
.accout { height: calc(44 * var(--dp)); min-width: calc(160 * var(--dp)); font-size: calc(17 * var(--dp)); }
.gslot { display: flex; justify-content: center; min-height: calc(48 * var(--dp)); width: 100%; }
.gbtn { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--dp)); width: 100%; max-width: calc(300 * var(--dp)); height: calc(48 * var(--dp)); background: #fff; color: #1F1F1F; border: calc(2 * var(--dp)) solid var(--ink); border-radius: calc(8 * var(--dp)); box-shadow: 0 calc(5 * var(--dp)) 0 #9AA4B5, 0 calc(7 * var(--dp)) calc(5 * var(--dp)) rgba(0,0,0,.35); font: 800 calc(16 * var(--dp)) 'Body', 'Rubik', sans-serif; cursor: pointer; transition: transform 60ms, box-shadow 60ms; }
.gbtn:active { transform: translateY(calc(4 * var(--dp))); box-shadow: 0 calc(1 * var(--dp)) 0 #9AA4B5; }
.gbtn:disabled { opacity: .6; }
.gbtn .glogo { width: calc(22 * var(--dp)); height: calc(22 * var(--dp)); flex: none; }
.gisbox { display: flex; justify-content: center; }
#custom .cbody { display: flex; gap: calc(14 * var(--dp)); }
#custom .cprev { flex: 0 0 calc(220 * var(--dp)); background: var(--panel-blue); border: calc(3 * var(--dp)) solid var(--panel-border); box-shadow: 0 calc(6 * var(--dp)) 0 rgba(0,0,0,.35); }
#custom .cside { background: var(--panel-blue); border: calc(3 * var(--dp)) solid var(--panel-border); border-radius: calc(8 * var(--dp)); box-shadow: 0 calc(6 * var(--dp)) 0 rgba(0,0,0,.35); padding: calc(10 * var(--dp)); min-height: 0; }
#custom .cgrid { flex: 1; max-height: none; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(calc(58 * var(--dp)), 1fr)); align-content: start; }
#login { display: none; place-items: center; }
#login.on { display: grid; }
#login .rays { z-index: 0; opacity: .7; }
.lgbox { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; width: min(calc(420 * var(--dp)), calc(100vw - 32 * var(--dp))); animation: pop 300ms cubic-bezier(.2, 1.4, .4, 1); }
.lglogo { font-size: calc(46 * var(--dp)); line-height: 1; text-transform: uppercase; transform: rotate(-3deg); -webkit-text-stroke-width: calc(4 * var(--dp)); text-shadow: 0 calc(5 * var(--dp)) 0 var(--ink); }
.lgsub { font-size: calc(15 * var(--dp)); margin: calc(10 * var(--dp)) 0 calc(22 * var(--dp)); text-transform: uppercase; }
.lgbtns { display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--dp)); width: calc(300 * var(--dp)); }
.lgguest { width: 100%; height: calc(52 * var(--dp)); font-size: calc(19 * var(--dp)); }
#loginErr { margin: calc(12 * var(--dp)) 0 0; }
.lgnote { font-family: 'Body'; font-weight: 800; font-size: calc(12 * var(--dp)); line-height: 1.35; color: #CFE0FF; max-width: calc(360 * var(--dp)); margin: calc(4 * var(--dp)) 0 0; }
.ui { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.24em; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.chip .ic .ui, .navbtn .nic .ui, .mailbtn .ui { width: 82%; height: 82%; vertical-align: middle; }
.mode .mi .ui, .qmode .mi .ui { width: 1.35em; height: 1.35em; }
#rotate .ph .ui { width: 1.4em; height: 1.4em; }
.gfx .gfi .ui { width: 1.25em; height: 1.25em; }
.acc .acci .ui { width: 1.1em; height: 1.1em; }
.carcard .lk .ui { width: 1em; height: 1em; vertical-align: -0.15em; }