:root {
  --red: #ff3b30;
  --yellow: #ffd60a;
  --ink: #0b0d12;
  --panel: rgba(12, 14, 20, 0.86);
  --line: rgba(255, 255, 255, 0.12);
  --display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --ui: 'Inter', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff; font-family: var(--ui); user-select: none; -webkit-user-select: none; }
#app canvas { display: block; }
.hidden { display: none !important; }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-bottom-width: 2px; font: 700 11px var(--ui); color: #fff; text-align: center; }

/* ---------- screen effects ---------- */
.fxl { position: fixed; inset: 0; pointer-events: none; opacity: 0; }
#storm { background: radial-gradient(ellipse at center, rgba(120,40,200,0.05) 30%, rgba(110,30,190,0.55) 100%); transition: opacity .4s; }
#speed { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0deg 3deg, rgba(255,255,255,0.09) 3.4deg 3.8deg); -webkit-mask-image: radial-gradient(circle at center, transparent 32%, #000 75%); mask-image: radial-gradient(circle at center, transparent 32%, #000 75%); transition: opacity .15s; }
#lowhp { background: radial-gradient(ellipse at center, transparent 45%, rgba(200,0,20,0.75) 100%); }
#hurt { background: radial-gradient(ellipse at center, rgba(255,0,0,0.1) 25%, rgba(255,0,30,0.7) 100%); transition: opacity .25s ease-out; }
#flash { background: #fff; }
#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

.tag { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; will-change: transform; }
.tag .n { font: 700 13px var(--ui); text-shadow: 0 1px 3px #000, 0 0 2px #000; color: #fff; }
.tag.human .n { color: #7df9ff; }
.tag .h { width: 70px; height: 6px; margin: 3px auto 0; background: rgba(0,0,0,.6); border: 1px solid rgba(0,0,0,.8); border-radius: 3px; overflow: hidden; }
.tag .h i { display: block; height: 100%; background: #2ee07f; transition: width .15s; }

.dmg { position: absolute; left: 0; top: 0; font: 400 calc(30px * var(--s, 1)) var(--display); color: #fff; letter-spacing: 1px; -webkit-text-stroke: 1.5px #000; text-shadow: 0 3px 0 rgba(0,0,0,.5); will-change: transform, opacity; white-space: nowrap; }
.dmg.mine { color: #ffe45c; }
.dmg.crit { color: #ff5a1f; font-size: calc(38px * var(--s, 1)); }
.dmg.onme { color: #ff4d5e; }
.dmg.blk { color: #9fd8ff; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#topbar { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; }
.chip { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font: 400 24px var(--display); letter-spacing: 1px; }
.chip em { font-style: normal; font-size: 15px; opacity: .7; }
.chip span { font-size: 16px; }
#zoneinfo b { font-weight: 400; color: #c9a6ff; } #zoneinfo b.red { color: #ff5ce1; } #zoneinfo span { margin-left: 6px; }
#warmup { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); padding: 8px 18px; background: rgba(0,120,160,.55); border: 1px solid rgba(125,249,255,.5); border-radius: 999px; font: 400 22px var(--display); letter-spacing: 2px; color: #dffcff; }
#warmup b { color: var(--yellow); font-weight: 400; }
#mmwrap { position: absolute; top: 16px; right: 16px; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,.3); box-shadow: 0 6px 24px rgba(0,0,0,.5); background: #111; pointer-events: auto; cursor: pointer; }
#minimap { display: block; width: 100%; height: 100%; }
#mmN { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font: 800 10px var(--ui); color: #fff; text-shadow: 0 1px 2px #000; pointer-events: none; }
/* full map (O / L2 + touchpad / tap the minimap) */
#bigmap { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(4,6,10,.62); z-index: 40; pointer-events: auto; }
#bigmap canvas { width: min(86vh, 92vw); height: min(86vh, 92vw); border-radius: 14px; border: 2px solid rgba(255,255,255,.3); box-shadow: 0 10px 40px rgba(0,0,0,.6); background: #111; }
#bmhint { font: 700 13px var(--ui); color: rgba(255,255,255,.8); letter-spacing: .04em; }
#killfeed { position: absolute; top: 176px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kf { padding: 4px 10px; background: rgba(0,0,0,.55); border-radius: 6px; font: 600 13px var(--ui); transition: opacity 1s; }
.kf.mine { background: rgba(255,59,48,.55); }
.kf.fade { opacity: 0; }
.kf span { margin: 0 4px; }
.kf i { opacity: .7; }

#announce { position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 0; pointer-events: none; }
#announce.show { animation: ann .35s cubic-bezier(.2, 1.6, .4, 1) forwards; }
#announce .t { font: 400 64px var(--display); letter-spacing: 3px; -webkit-text-stroke: 2px rgba(0,0,0,.6); text-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 30px rgba(255,255,255,.25); white-space: nowrap; }
#announce.big .t { font-size: 120px; }
#announce .s { font: 700 16px var(--ui); letter-spacing: 1px; opacity: .9; text-shadow: 0 2px 4px #000; margin-top: -4px; }
@keyframes ann { from { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

#combo { position: absolute; right: 7%; top: 52%; text-align: right; opacity: 0; transform-origin: right center; }
#combo.show { opacity: 1; transition: opacity .3s; }
#combo.pop { animation: pop .18s ease-out; }
#combo b { display: block; font: 400 96px/0.9 var(--display); -webkit-text-stroke: 2px #000; text-shadow: 0 5px 0 rgba(0,0,0,.4); }
#combo span { font: 400 26px var(--display); letter-spacing: 3px; text-shadow: 0 2px 4px #000; }
@keyframes pop { 0% { transform: scale(1.5) rotate(-4deg); } 100% { transform: scale(1) rotate(0); } }

#crosshair { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); }
#crosshair i { position: absolute; inset: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.6); }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; }
#hitmarker::before, #hitmarker::after { content: ''; position: absolute; background: #fff; box-shadow: 0 0 3px #000; }
#hitmarker::before { left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); -webkit-mask: linear-gradient(#000 35%, transparent 35% 65%, #000 65%); mask: linear-gradient(#000 35%, transparent 35% 65%, #000 65%); }
#hitmarker::after { top: 50%; left: 0; right: 0; height: 3px; transform: translateY(-50%); -webkit-mask: linear-gradient(90deg, #000 35%, transparent 35% 65%, #000 65%); mask: linear-gradient(90deg, #000 35%, transparent 35% 65%, #000 65%); }
#hitmarker.show { opacity: 1; }
#hitmarker.crit::before, #hitmarker.crit::after { background: #ff5a1f; }
#prompt { position: absolute; left: 50%; top: calc(50% + 46px); transform: translateX(-50%); font: 600 15px var(--ui); text-shadow: 0 1px 4px #000; white-space: nowrap; }
#prompt kbd { margin-right: 4px; }
#charge { position: absolute; left: 50%; top: calc(50% + 28px); width: 120px; height: 6px; transform: translateX(-50%); background: rgba(0,0,0,.5); border-radius: 3px; overflow: hidden; opacity: 0; }
#charge.show { opacity: 1; }
#charge i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd60a, #ff3b30); }
#toast { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font: 400 30px var(--display); letter-spacing: 2px; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.6); opacity: 0; white-space: nowrap; }
#toast.show { animation: toast 1.6s ease-out forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 12% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -14px); } }
#buffs { position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%); display: flex; gap: 6px; }
.buff { position: relative; width: 38px; height: 38px; display: grid; place-items: center; font-size: 20px; background: var(--panel); border: 2px solid var(--c); border-radius: 9px; box-shadow: 0 0 12px var(--c); }
.buff span { position: absolute; bottom: -8px; right: -6px; font: 800 11px var(--ui); background: #000; padding: 0 4px; border-radius: 4px; }
.buff.gear { box-shadow: none; opacity: .85; border-width: 1px; }

#bottom { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 14px; }
#held { width: 150px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
#held b { display: block; font: 400 22px var(--display); letter-spacing: 1px; }
#held small { font: 600 10px var(--ui); opacity: .6; }
#bars { width: 380px; display: flex; flex-direction: column; gap: 6px; }
.bar { position: relative; height: 26px; background: rgba(0,0,0,.6); border: 2px solid rgba(255,255,255,.2); border-radius: 8px; overflow: hidden; transform: skewX(-12deg); }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width .12s; }
.bar .armor { position: absolute; left: 0; top: 0; height: 6px; width: 0; background: #6fb8ff; box-shadow: 0 0 8px #6fb8ff; transition: width .12s; }
.bar span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) skewX(12deg); font: 400 20px var(--display); letter-spacing: 1px; text-shadow: 0 1px 2px #000; }
.bar.thin { height: 10px; }
#stbar .fill { background: linear-gradient(90deg, #ffd60a, #fff3a0); }
#stbar.low .fill { background: #ff8a3d; animation: blink .3s infinite alternate; }
@keyframes blink { to { opacity: .4; } }
#quick { display: flex; gap: 5px; }
.slot { position: relative; width: 44px; height: 50px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; display: grid; place-items: center; }
.slot .k { position: absolute; top: 2px; left: 5px; font: 800 10px var(--ui); opacity: .6; }
.slot .ic { font-size: 20px; }
.slot .n { position: absolute; bottom: 1px; right: 5px; font: 800 12px var(--ui); }
.slot.empty { opacity: .35; }
#wallet { position: absolute; left: 16px; bottom: 90px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
#money { font: 400 38px/1 var(--display); color: #7dff9a; text-shadow: 0 2px 0 #000; letter-spacing: 1px; }
#xp { font: 400 26px/1 var(--display); color: var(--yellow); text-shadow: 0 2px 0 #000; letter-spacing: 1px; }
#upready { font: 800 12px var(--ui); color: #000; background: var(--yellow); padding: 3px 8px; border-radius: 6px; opacity: 0; transform: scale(.9); transition: all .2s; }
#upready.show { opacity: 1; transform: scale(1); animation: glow 1s infinite alternate; }
#upready kbd { background: #000; color: var(--yellow); border-color: #000; }
@keyframes glow { to { box-shadow: 0 0 16px var(--yellow); } }
#statsbox { display: flex; gap: 4px; margin-top: 2px; }
#statsbox span { font: 400 16px var(--display); background: var(--panel); border-bottom: 2px solid var(--c); padding: 2px 6px; border-radius: 5px; letter-spacing: 1px; }
#statsbox b { font-weight: 400; color: var(--c); margin-right: 3px; }
#keys { position: absolute; right: 16px; bottom: 84px; font: 600 11px var(--ui); opacity: .75; display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 46vw; gap: 5px; align-items: center; }

/* ---------- driving dashboard (client/drive/dash.js) ---------- */
#dash { position: absolute; right: 16px; bottom: 92px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(30,34,46,.93), rgba(7,8,12,.93) 72%); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.55), inset 0 0 22px rgba(0,0,0,.65); }
#dash-tach { position: absolute; inset: 0; width: 100%; height: 100%; }
#dash .dspd { position: absolute; left: 0; right: 0; top: 27%; text-align: center; line-height: .86; }
#dash .dspd b { display: block; font: 400 58px var(--display); letter-spacing: 1px; text-shadow: 0 0 14px rgba(125,249,255,.22); }
#dash .dspd i { font: 700 9px var(--ui); font-style: normal; letter-spacing: 1.5px; opacity: .55; }
#dash-gear { position: absolute; left: 50%; top: 77%; transform: translateX(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.35); border-radius: 7px; background: rgba(0,0,0,.5); font: 400 25px/1 var(--display); padding-top: 2px; }
#dash-gear.rev { border-color: rgba(255,255,255,.85); box-shadow: 0 0 8px rgba(255,255,255,.35); }
#dash-gear.lim { color: var(--red); border-color: var(--red); animation: dashlim .11s steps(2) infinite; }
@keyframes dashlim { 50% { opacity: .2; } }
#dash .dl { position: absolute; top: 80%; display: flex; gap: 5px; align-items: center; }
#dash .dl.l { right: calc(50% + 21px); } #dash .dl.r { left: calc(50% + 21px); }
#dash .dl span { font: 800 9px var(--ui); letter-spacing: .5px; color: #fff; opacity: .15; transition: opacity .08s; }
#dash .dl span.on { opacity: 1; }
#dash-p.on { color: var(--red); text-shadow: 0 0 6px var(--red); }
#dash-brake { font-size: 7px !important; letter-spacing: 1px !important; }
#dash-brake.on { color: #ff5a4f; text-shadow: 0 0 6px var(--red); }
#dash-esc.on { color: #ffb020; text-shadow: 0 0 6px #ffb020; }
#dash-shift.on { color: #7df9ff; text-shadow: 0 0 6px #7df9ff; }
/* the pedals: brake / throttle bars left of the dial (how far the trigger is down, or the key's ramp) */
#dash-pedals { position: absolute; left: -16px; bottom: 22px; height: 64px; display: flex; gap: 3px; }
#dash-pedals i { width: 5px; height: 100%; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; display: flex; align-items: flex-end; }
#dash-pedals i::after { content: ''; width: 100%; height: var(--v, 0%); border-radius: 3px; background: #4cd964; }
#dash-pedals #dash-brk::after { background: #ff5a4f; }
body.touch #dash-pedals { left: -12px; bottom: 12px; height: 40px; }
body.driving #keys { display: none; } /* the fight keys don't apply behind the wheel */
/* phones: the thumbs own the bottom corners and the car sits in the lower middle: up top, right of the health bar's
   centre line (clear of the held-item label, the buffs and the kill feed) */
body.touch #dash { right: auto; bottom: auto; left: calc(50% + 64px); top: calc(74px + var(--st)); width: 112px; height: 112px; }
body.touch #dash .dspd b { font-size: 34px; }
body.touch #dash .dspd i { font-size: 7px; }
body.touch #dash-gear { width: 22px; height: 22px; font-size: 18px; border-radius: 5px; }
body.touch #dash .dl { gap: 3px; } body.touch #dash .dl.l { right: calc(50% + 15px); } body.touch #dash .dl.r { left: calc(50% + 15px); }
body.touch #dash .dl span { font-size: 7px; }

/* ---------- menu ---------- */
#menu { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, rgba(20,5,5,.25), rgba(0,0,0,.8)); }
.menu-inner { width: min(760px, 94vw); text-align: center; }
.logo { font: 400 clamp(90px, 16vw, 170px)/0.85 var(--display); letter-spacing: 6px; color: #fff; text-shadow: 0 8px 0 #7a0c07, 0 0 60px rgba(255,59,48,.45); transform: skewX(-8deg); }
.logo span { color: var(--red); }
.tagline { font: 600 15px var(--ui); opacity: .85; margin: 14px 0 26px; letter-spacing: .3px; }
.join { display: flex; gap: 10px; justify-content: center; }
#name { width: 300px; padding: 14px 16px; font: 700 18px var(--ui); color: #fff; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.2); border-radius: 12px; outline: none; }
#name:focus { border-color: var(--yellow); }
#play { padding: 0 38px; font: 400 32px var(--display); letter-spacing: 3px; color: #000; background: var(--yellow); border: 0; border-radius: 12px; cursor: pointer; box-shadow: 0 6px 0 #a88a00; transition: transform .08s; }
#play:hover { transform: translateY(-2px); } #play:active { transform: translateY(3px); box-shadow: 0 3px 0 #a88a00; }
#play:disabled { opacity: .5; cursor: wait; }
#phone { margin-top: 14px; font: 600 13px var(--ui); color: #7df9ff; }
#phone b { color: #fff; user-select: text; -webkit-user-select: text; }
#status { margin: 16px 0 22px; font: 600 14px var(--ui); color: #cfd6e0; min-height: 20px; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 22px; text-align: left; padding: 18px 22px; background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 14px; font: 500 13px var(--ui); }
.controls kbd { margin-right: 6px; }
.tips { margin-top: 14px; font: 500 12.5px/1.5 var(--ui); opacity: .7; }

/* ---------- panels ---------- */
.panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(880px, 94vw); max-height: 86vh; overflow: auto; padding: 18px 20px; background: rgba(10,12,18,.94); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: panelIn .18s ease-out; }
@keyframes panelIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
.ph { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ph h2 { margin: 0; font: 400 42px var(--display); letter-spacing: 3px; flex: 1; }
.ph .money { font: 400 34px var(--display); color: #7dff9a; letter-spacing: 1px; }
.ph .money.xp { color: var(--yellow); }
.ph .x { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: #fff; font-size: 18px; cursor: pointer; }
#shop-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
#shop-tabs button { flex: 1; padding: 10px; font: 400 22px var(--display); letter-spacing: 2px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
#shop-tabs button.on { background: var(--red); border-color: var(--red); }
#shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.card { position: relative; text-align: left; padding: 12px; min-height: 150px; color: #fff; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; font-family: var(--ui); transition: transform .08s, border-color .1s, background .1s; }
.card:hover { transform: translateY(-2px); border-color: var(--yellow); background: rgba(255,214,10,.08); }
.card:active { transform: scale(.97); }
.card.cant { opacity: .45; }
.card .ic { width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px; border-radius: 12px; background: color-mix(in srgb, var(--c) 30%, transparent); border: 1px solid var(--c); margin-bottom: 8px; }
.card .nm { font: 400 22px var(--display); letter-spacing: 1px; }
.card .ds { font: 500 12px/1.35 var(--ui); opacity: .75; margin: 2px 0 26px; }
.card .pr { position: absolute; left: 12px; bottom: 10px; font: 400 24px var(--display); color: #7dff9a; letter-spacing: 1px; }
.card .own { position: absolute; right: 12px; bottom: 12px; font: 800 11px var(--ui); color: var(--yellow); }
.pf { margin-top: 12px; font: 500 12px var(--ui); opacity: .6; text-align: center; }
.uprow { display: grid; grid-template-columns: 30px 150px 1fr 120px; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; padding: 12px; margin-bottom: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; }
.uprow .key { grid-row: span 2; font: 800 14px var(--ui); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.12); }
.uprow .nm { font: 400 28px var(--display); letter-spacing: 1px; }
.uprow .pips { display: flex; gap: 4px; }
.uprow .pips i { flex: 1; height: 12px; border-radius: 3px; background: rgba(255,255,255,.1); transform: skewX(-15deg); }
.uprow .pips i.on { background: var(--c); box-shadow: 0 0 8px var(--c); }
.uprow .ds { grid-column: 2 / 4; font: 500 12px var(--ui); opacity: .7; }
.uprow .plus { grid-row: 1 / 3; grid-column: 4; height: 48px; font: 400 22px var(--display); letter-spacing: 1px; color: #000; background: var(--yellow); border: 0; border-radius: 10px; cursor: pointer; }
.uprow .plus span { font-size: 16px; }
.uprow .plus:disabled { background: rgba(255,255,255,.12); color: rgba(255,255,255,.4); cursor: default; }

#score { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 92vw); max-height: 76vh; overflow: auto; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; pointer-events: none; }
#score h3 { margin: 0 0 10px; font: 400 30px var(--display); letter-spacing: 2px; }
.sr { display: grid; grid-template-columns: 1fr 70px 70px; padding: 5px 8px; border-radius: 6px; font: 600 13px var(--ui); }
.sr:nth-child(odd) { background: rgba(255,255,255,.04); }
.sr.dead { opacity: .4; }
.sr.me { background: rgba(255,214,10,.2); }
.sr i { font-style: normal; font-size: 10px; opacity: .6; }

#pause { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); }
#pause .box { width: 360px; padding: 22px; background: rgba(12,14,20,.95); border: 1px solid var(--line); border-radius: 16px; }
#pause h2 { margin: 0; font: 400 46px var(--display); letter-spacing: 3px; }
#pause p { margin: 0 0 16px; opacity: .6; font-size: 13px; }
#pause label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0; font: 600 13px var(--ui); }
#pause input[type=range] { width: 150px; accent-color: var(--yellow); }
#pause select { background: #222; color: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
#resume { width: 100%; margin-top: 12px; padding: 12px; font: 400 28px var(--display); letter-spacing: 2px; background: var(--yellow); border: 0; border-radius: 10px; cursor: pointer; }

#death { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); text-align: center; padding: 18px 30px; background: rgba(20,4,4,.8); border: 1px solid rgba(255,59,48,.5); border-radius: 16px; animation: panelInB .3s ease-out; }
@keyframes panelInB { from { opacity: 0; transform: translate(-50%, 20px); } }
#death .place { font: 400 72px/0.9 var(--display); color: var(--red); }
#death .title { font: 400 38px var(--display); letter-spacing: 4px; }
#death .by { font: 600 14px var(--ui); opacity: .85; }
#death .row { display: flex; gap: 22px; justify-content: center; margin: 10px 0; font: 600 13px var(--ui); }
#death .row b { color: var(--yellow); }
#death .hint { font: 500 11px var(--ui); opacity: .6; }
#death button { margin-top: 10px; padding: 8px 18px; font: 400 20px var(--display); letter-spacing: 2px; background: #fff; border: 0; border-radius: 8px; cursor: pointer; }

#death .btns, #end .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#death button.ghost, #end button.ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.4); }
#end .btns { margin-top: 14px; pointer-events: auto; }
#end button { padding: 8px 18px; font: 400 20px var(--display); letter-spacing: 2px; border-radius: 8px; cursor: pointer; }
#end { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(0,0,0,.2), rgba(0,0,0,.75)); pointer-events: none; animation: fadeIn .5s; }
@keyframes fadeIn { from { opacity: 0; } }
#end .crown { font-size: 90px; animation: pop .5s; }
#end .title { font: 400 clamp(60px, 10vw, 130px)/0.9 var(--display); letter-spacing: 4px; text-shadow: 0 8px 0 rgba(0,0,0,.4); }
#end .title.win { color: var(--yellow); text-shadow: 0 8px 0 #8a6d00, 0 0 60px rgba(255,214,10,.6); }
#end .sub { font: 600 18px var(--ui); margin-top: 8px; }
#end .sub b { color: var(--yellow); }
#end .hint { margin-top: 18px; font: 500 13px var(--ui); opacity: .6; }

@media (max-width: 900px) {
  #bars { width: 260px; } #held { display: none; } #keys { display: none; }
  #announce .t { font-size: 44px; } #announce.big .t { font-size: 80px; }
}

/* =====================================================================
   TOUCH / PHONE LAYOUT (body.touch) — landscape first
   ===================================================================== */
:root { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); }
body.touch { touch-action: none; -webkit-touch-callout: none; overscroll-behavior: none; }
body:not(.touch) .touch-only { display: none !important; }
body.touch .desk-only { display: none !important; }

/* stacking: touch zones under the HUD (HUD lets touches through except tappable bits) */
#tags { z-index: 5; }
#touch { position: fixed; inset: 0; z-index: 10; display: none; touch-action: none; }
#hud { z-index: 20; }
#death, #end { z-index: 30; }
.panel, #score { z-index: 40; }
#pause { z-index: 50; }
#menu { z-index: 60; }
#rotate { z-index: 70; }
body.touch.ingame #touch { display: block; }

.tz { position: absolute; top: 0; bottom: 0; touch-action: none; }
#tz-left { left: 0; width: 42%; }
#tz-right { left: 42%; right: 0; }

#stick { position: absolute; width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: radial-gradient(circle, rgba(255,255,255,.08), rgba(0,0,0,.25)); pointer-events: none; }
#stick.idle { left: calc(96px + var(--sl)); top: auto; bottom: 34px; margin: 0 0 0 -62px; opacity: .45; }
#stick .knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 2px 10px rgba(0,0,0,.4); }
#stick.sprint { border-color: var(--yellow); }
#stick.sprint .knob { background: var(--yellow); box-shadow: 0 0 18px var(--yellow); }

.tbtn { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: rgba(15,17,24,.5); border: 2px solid rgba(255,255,255,.35); color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .06s, background .06s, opacity .15s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tbtn .i { font-size: 24px; line-height: 1; }
.tbtn .l { font: 400 11px var(--display); letter-spacing: 1px; margin-top: 1px; opacity: .9; }
.tbtn.on { background: rgba(255,214,10,.55); border-color: var(--yellow); transform: scale(.92); }
.tbtn.hide { opacity: 0; pointer-events: none; }
#t-punch { width: 88px; height: 88px; right: calc(18px + var(--sr)); bottom: 20px; border-color: rgba(255,59,48,.8); background: rgba(120,20,15,.45); }
#t-punch .i { font-size: 34px; }
#t-kick { width: 66px; height: 66px; right: calc(122px + var(--sr)); bottom: 14px; }
#t-jump { width: 62px; height: 62px; right: calc(30px + var(--sr)); bottom: 124px; }
#t-dodge { width: 54px; height: 54px; right: calc(108px + var(--sr)); bottom: 100px; }
#t-block { width: 56px; height: 56px; right: calc(200px + var(--sr)); bottom: 20px; }
#t-grab { width: 52px; height: 52px; right: calc(186px + var(--sr)); bottom: 94px; border-color: rgba(125,249,255,.7); }
#t-throw { width: 52px; height: 52px; right: calc(186px + var(--sr)); bottom: 160px; border-color: rgba(255,160,40,.8); }
#t-throw.charging { background: rgba(255,120,20,.6); }
.tbtn.mini { width: 40px; height: 40px; border-radius: 11px; top: calc(52px + var(--st)); }
.tbtn.mini .i { font-size: 19px; }
#t-market { left: calc(10px + var(--sl)); }
#t-up { left: calc(56px + var(--sl)); }
#t-menu { left: calc(102px + var(--sl)); }

#rotate { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(5,6,10,.94); text-align: center; }
#rotate .ico { font-size: 64px; animation: rot 1.6s ease-in-out infinite; }
#rotate b { font: 400 34px var(--display); letter-spacing: 2px; }
#rotate span { font: 500 13px var(--ui); opacity: .7; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { body.touch.ingame #rotate { display: flex; } }

/* HUD re-layout: thumbs own the bottom corners */
body.touch #topbar { top: calc(8px + var(--st)); left: calc(10px + var(--sl)); gap: 5px; }
body.touch .chip { padding: 3px 8px; font-size: 17px; border-radius: 8px; gap: 4px; }
body.touch .chip em { font-size: 11px; }
body.touch .chip span { font-size: 12px; }
body.touch #mmwrap { top: calc(8px + var(--st)); right: calc(10px + var(--sr)); width: 92px; height: 92px; }
body.touch #minimap { width: 100%; height: 100%; }
body.touch #killfeed { top: calc(106px + var(--st)); right: calc(10px + var(--sr)); gap: 2px; }
body.touch .kf { font-size: 10px; padding: 2px 6px; }
body.touch .kf:nth-child(n+4) { display: none; }
body.touch #bottom { display: contents; }
body.touch #bars { position: absolute; top: calc(8px + var(--st)); left: 50%; transform: translateX(-50%); width: min(34vw, 300px); gap: 4px; }
body.touch .bar { height: 20px; border-width: 1.5px; }
body.touch .bar span { font-size: 15px; right: 8px; }
body.touch .bar.thin { height: 7px; }
body.touch #held { position: absolute; top: calc(44px + var(--st)); left: 50%; transform: translateX(-50%); width: auto; padding: 2px 10px; border-radius: 7px; text-align: center; }
body.touch #held b { font-size: 14px; }
body.touch #held small { display: block; font-size: 9px; }
body.touch #held small:empty { display: none; }
body.touch #quick { position: absolute; left: 50%; bottom: calc(10px + var(--sb)); transform: translateX(-50%); gap: 4px; }
body.touch .slot { width: 40px; height: 42px; pointer-events: auto; }
body.touch .slot .ic { font-size: 17px; }
body.touch #wallet { left: calc(12px + var(--sl)); top: calc(100px + var(--st)); bottom: auto; }
body.touch #money { font-size: 26px; }
body.touch #xp { font-size: 18px; }
body.touch #upready { pointer-events: auto; font-size: 11px; padding: 5px 9px; }
body.touch #upready kbd { display: none; }
body.touch #statsbox { display: none; }
body.touch #keys { display: none; }
body.touch #buffs { top: calc(96px + var(--st)); bottom: auto; }
body.touch .buff { width: 30px; height: 30px; font-size: 15px; }
body.touch #warmup { top: calc(80px + var(--st)); font-size: 14px; padding: 4px 12px; }
body.touch #announce { top: 30%; }
body.touch #announce .t { font-size: 40px; }
body.touch #announce.big .t { font-size: 70px; }
body.touch #announce .s { font-size: 12px; }
body.touch #combo { right: 30%; top: 26%; }
body.touch #combo b { font-size: 54px; }
body.touch #combo span { font-size: 15px; }
body.touch #prompt { top: calc(50% + 30px); font-size: 13px; }
body.touch #toast { font-size: 22px; top: 58%; }
body.touch .dmg { font-size: calc(22px * var(--s, 1)); }
body.touch .tag .n { font-size: 11px; }
body.touch .tag .h { width: 54px; height: 5px; }

/* panels & overlays on a small screen */
body.touch .panel { width: calc(100vw - 20px - var(--sl) - var(--sr)); max-height: calc(100vh - 16px); padding: 10px 12px; border-radius: 14px; }
body.touch .ph { margin-bottom: 6px; }
body.touch .ph h2 { font-size: 28px; }
body.touch .ph .money { font-size: 24px; }
body.touch #shop-tabs button { padding: 6px; font-size: 17px; }
body.touch #shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
body.touch .card { min-height: 108px; padding: 8px; }
body.touch .card .ic { width: 32px; height: 32px; font-size: 17px; margin-bottom: 4px; }
body.touch .card .nm { font-size: 17px; }
body.touch .card .ds { font-size: 10.5px; margin-bottom: 20px; }
body.touch .card .pr { font-size: 19px; bottom: 6px; }
body.touch .uprow { grid-template-columns: 0 104px 1fr 84px; gap: 1px 8px; padding: 7px 9px; margin-bottom: 5px; }
body.touch .uprow .key { display: none; }
body.touch .uprow .nm { font-size: 20px; }
body.touch .uprow .ds { font-size: 10.5px; }
body.touch .uprow .plus { height: 40px; font-size: 18px; }
body.touch .pf { display: none; }
body.touch #pause .box { width: min(360px, 92vw); max-height: 94vh; overflow: auto; padding: 14px 16px; }
body.touch #pause h2 { font-size: 34px; }
body.touch #death { bottom: auto; top: 50%; transform: translate(-50%, -50%); padding: 12px 22px; animation: none; }
body.touch #death .place { font-size: 50px; }
body.touch #death .title { font-size: 28px; }
body.touch #end .crown { font-size: 60px; }
body.touch #end .title { font-size: 58px; }

/* menu fits a landscape phone */
body.touch #menu { overflow-y: auto; align-items: start; padding: calc(10px + var(--st)) calc(12px + var(--sr)) 14px calc(12px + var(--sl)); }
body.touch .menu-inner { margin: auto; }
body.touch .logo { font-size: clamp(54px, 11vw, 110px); }
body.touch .tagline { font-size: 12px; margin: 6px 0 12px; }
body.touch #name { width: 200px; padding: 10px 12px; font-size: 16px; }
body.touch #play { font-size: 26px; padding: 0 26px; }
body.touch #status { margin: 8px 0 10px; font-size: 12px; }
body.touch .controls { font-size: 11.5px; gap: 4px 14px; padding: 10px 14px; }
body.touch .tips { font-size: 11px; }
@media (max-height: 420px) { body.touch .tips { display: none; } }

/* lock-on marker + shop hotkey badges (keyboard play) */
#lockmark { position: absolute; left: 0; top: 0; display: none; pointer-events: none; will-change: transform; }
#lockmark span { display: block; font-size: 30px; color: #ff3b30; text-shadow: 0 0 8px #ff3b30, 0 0 2px #000; animation: lockpulse .6s ease-in-out infinite alternate; }
@keyframes lockpulse { from { transform: scale(0.85); } to { transform: scale(1.15); } }
.card .kn { position: absolute; top: 10px; right: 10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: rgba(255,255,255,.14); font: 800 11px/20px var(--ui); text-align: center; }
.card .kn:empty { display: none; }
body.touch .card .kn { display: none; }
#pause input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--yellow); }
.tips b { color: var(--yellow); }

/* difficulty picker */
#diffpick { margin: 0 auto 16px; width: min(560px, 94vw); }
#diffpick .dl { font: 800 11px var(--ui); letter-spacing: 3px; opacity: .6; margin-bottom: 6px; }
#diffpick .dbtns { display: flex; gap: 6px; }
#diffpick button { flex: 1; padding: 9px 0; font: 400 22px var(--display); letter-spacing: 2px; color: #fff; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.18); border-radius: 10px; cursor: pointer; transition: transform .08s, background .1s; }
#diffpick button:hover { transform: translateY(-1px); }
#diffpick button.on { color: #000; background: var(--c); border-color: var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
#diffpick .dd { min-height: 18px; margin-top: 7px; font: 600 12.5px var(--ui); color: #d6dbe4; }
#diffchip { font-size: 16px; color: var(--c, #fff); border-color: color-mix(in srgb, var(--c, #fff) 55%, transparent); }
#diffchip:empty { display: none; }
body.touch #diffpick { margin-bottom: 8px; }
body.touch #diffpick button { padding: 5px 0; font-size: 17px; }
body.touch #diffpick .dd { font-size: 11px; margin-top: 4px; }
body.touch #diffchip { font-size: 13px; }

/* physical stats readout + heavy object prompts */
#statread { display: flex; gap: 4px; flex-wrap: wrap; max-width: 300px; }
#statread span { font: 700 11px var(--ui); background: var(--panel); border: 1px solid var(--line); padding: 3px 7px; border-radius: 6px; }
body.touch #statread { max-width: 170px; }
body.touch #statread span { font-size: 9.5px; padding: 2px 5px; }
#prompt .heavy { color: #ff8a8a; }
#prompt small { opacity: .65; font-weight: 600; margin-left: 4px; }
#held b i { font-style: normal; font-size: 13px; opacity: .6; letter-spacing: 0; }
.uprow { grid-template-rows: auto auto auto; }
.uprow .nx { grid-column: 2 / 4; font: 600 11.5px var(--ui); color: #e8ecf2; }
.uprow .nx b { color: var(--yellow); }
.uprow .nx em { font-style: normal; margin-left: 6px; color: #ffb3b3; }
.uprow .nx em.ok { color: #7dff9a; }
.uprow .key, .uprow .plus { grid-row: 1 / 4; }
body.touch .uprow .nx { font-size: 10px; }

/* bot count picker */
#botpick { margin: 0 auto 16px; width: min(560px, 94vw); }
#botpick .dl { font: 800 11px var(--ui); letter-spacing: 3px; opacity: .85; margin-bottom: 4px; }
#botpick .dl b { color: var(--yellow); font-size: 14px; letter-spacing: 1px; margin-left: 6px; }
#botpick input { width: 100%; accent-color: var(--red); }
#botpick .dd { min-height: 16px; font: 600 12px var(--ui); color: #d6dbe4; }
#pause .optv { margin-left: auto; margin-right: 8px; color: var(--yellow); font-weight: 800; }
body.touch #botpick { margin-bottom: 6px; }
body.touch #botpick .dd { font-size: 10.5px; }

/* elimination tally */
#tally { position: absolute; top: 60px; left: 16px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 46vw; }
.tc { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; font: 600 12px var(--ui); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; white-space: nowrap; }
.tc b { font: 400 16px var(--display); letter-spacing: 1px; color: #fff; }
.tc.out b { color: #ff6b6b; }
.tc.you { border-color: rgba(255,214,10,.5); }
.tc.you b { color: var(--yellow); }
.tallyrow { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 10px; }
.tallyrow.end { justify-content: center; margin-top: 16px; pointer-events: none; }
#death .tallyrow { justify-content: center; margin: 8px 0 4px; }
.sh { font: 800 10px var(--ui); letter-spacing: 3px; opacity: .6; margin: 4px 0 6px; }
#score .sr { grid-template-columns: 28px 1fr 40px 60px 60px; }
#score .sr .lvl { font-weight: 800; color: #ffd60a; opacity: .85; }
#score .rk { opacity: .5; font-weight: 800; }
.kf b.bot { color: #d6dbe4; font-weight: 600; }
.kf b.hum { color: #7df9ff; }
.kf b.you { color: var(--yellow); }
.topk { margin-top: 12px; text-align: center; }
.topk .tk { font: 600 15px var(--ui); margin: 3px 0; }
.topk .tk b { color: var(--yellow); margin-left: 6px; }
.topk .tk.me { color: var(--yellow); }
body.touch #tally { top: calc(64px + var(--st)); left: 50%; transform: translateX(-50%); max-width: 60vw; justify-content: center; }
body.touch .tc { font-size: 9px; padding: 1px 5px; }
body.touch .tc b { font-size: 12px; }
#t-score { left: calc(148px + var(--sl)); }

#score .sr.gap { opacity: .5; justify-content: center; display: block; text-align: center; }

/* controls / key rebinding */
button.ghost { padding: 8px 14px; font: 400 18px var(--display); letter-spacing: 2px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); border-radius: 10px; cursor: pointer; }
button.ghost:hover { background: rgba(255,255,255,.16); }
#btn-keys { margin-top: 10px; }
#pause-keys, #pause-clips { width: 100%; margin-top: 12px; }
#pause-clips { margin-top: 8px; }
#panel-keys { z-index: 65; width: min(720px, 94vw); }
#panel-keys .ph .ghost { font-size: 15px; }
#keybind-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
#keybind-list .kg { grid-column: 1 / -1; font: 800 11px var(--ui); letter-spacing: 3px; color: var(--yellow); margin: 10px 0 2px; }
#keybind-list .kb { display: grid; grid-template-columns: 1fr 76px 76px; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
#keybind-list .kl { font: 600 13px var(--ui); }
.kbtn { height: 30px; font: 800 12px var(--ui); color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-bottom-width: 3px; border-radius: 7px; cursor: pointer; }
.kbtn:hover { border-color: var(--yellow); }
.kbtn.empty { color: rgba(255,255,255,.35); border-style: dashed; }
.kbtn.wait { background: var(--yellow); color: #000; animation: blink .4s infinite alternate; }
@media (max-width: 700px) { #keybind-list { grid-template-columns: 1fr; } }

/* vitals monitor */
#vitals { position: absolute; left: 16px; top: 34%; width: 228px; padding: 9px 10px 8px; background: rgba(6,12,10,.78); border: 1px solid rgba(46,224,127,.35); border-radius: 12px; box-shadow: 0 0 18px rgba(46,224,127,.12); font-family: var(--ui); }
#vitals .vh { display: flex; align-items: center; gap: 6px; font: 800 11px var(--ui); letter-spacing: 2px; color: #9ff5c8; margin-bottom: 4px; }
#vitals .vh kbd { margin-left: auto; }
#vitals .vs { font: 800 9px var(--ui); letter-spacing: 1px; padding: 1px 6px; border-radius: 4px; background: rgba(46,224,127,.18); color: #2ee07f; }
#vitals .heart { color: #ff3b5c; font-size: 14px; display: inline-block; }
#vitals .heart.beat { animation: beat .25s ease-out; }
@keyframes beat { 0% { transform: scale(1.45); } 100% { transform: scale(1); } }
#vitals .vr { display: flex; align-items: baseline; gap: 5px; padding: 1px 0; font-size: 10.5px; color: #b9c9c1; }
#vitals .vr span { flex: 1; letter-spacing: 1px; font-weight: 700; font-size: 9.5px; }
#vitals .vr b { font: 400 18px var(--display); letter-spacing: 1px; color: #e8fff2; }
#vitals .vr i { font-style: normal; font-size: 10px; opacity: .7; min-width: 34px; }
#vitals .vr i.warn { color: #ff6b6b; opacity: 1; font-weight: 800; }
#vitals .vr.big b { font-size: 30px; color: #2ee07f; }
#vitals canvas { display: block; width: 208px; height: 46px; margin: 2px 0 4px; background: rgba(0,0,0,.35); border-radius: 6px; }
body.touch #vitals { left: auto; right: calc(10px + var(--sr)); top: calc(176px + var(--st)); width: 150px; padding: 5px 7px; }
body.touch #vitals .vr:not(.big) { display: none; }
body.touch #vitals .vr:nth-of-type(3) { display: flex; }
body.touch #vitals canvas { width: 136px; height: 30px; }
body.touch #vitals .vr.big b { font-size: 20px; }
body.touch #vitals .vh kbd { display: none; }
#t-vitals { left: calc(194px + var(--sl)); }

/* uncapped stats: level number, tier bar, MAX button */
.uprow .nm .lv { font: 800 12px var(--ui); font-style: normal; color: #fff; opacity: .8; margin-left: 6px; letter-spacing: 1px; }
.uprow .pips { position: relative; }
.uprow .pips i.prev:not(.on) { background: color-mix(in srgb, var(--pc) 35%, rgba(255,255,255,.08)); }
.uprow .pips .tier { position: absolute; right: 0; top: -15px; font: 800 9px var(--ui); letter-spacing: 2px; text-decoration: none; color: var(--yellow); }
.uprow .btns { grid-row: 1 / 4; grid-column: 4; display: flex; flex-direction: column; gap: 4px; }
.uprow .btns .plus { grid-row: auto; grid-column: auto; height: 40px; }
.uprow .maxb { height: 24px; font: 800 11px var(--ui); letter-spacing: 2px; color: #000; background: #ff9f1a; border: 0; border-radius: 7px; cursor: pointer; }
.uprow .maxb:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.35); cursor: default; }
body.touch .uprow .btns .plus { height: 32px; }

/* bystanders recording you on their phones */
#filming { border-color: rgba(255, 77, 109, .55); }
#filming .rec { color: #ff3b5c; animation: recblink 1s steps(2, start) infinite; }
#filming em { color: #ff9aae; }
@keyframes recblink { to { visibility: hidden; } }

/* lives */
#livespick { margin: 0 auto 16px; width: min(560px, 94vw); }
#livespick .dl { font: 800 11px var(--ui); letter-spacing: 3px; opacity: .85; margin-bottom: 6px; }
#livespick #livesh { letter-spacing: 1px; margin-left: 6px; font-size: 13px; }
#livespick .dbtns { display: flex; gap: 6px; }
#livespick button { flex: 1; padding: 7px 0; font: 400 20px var(--display); color: #fff; background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.18); border-radius: 10px; cursor: pointer; }
#livespick button.on { color: #000; background: #ff4d6d; border-color: #ff4d6d; box-shadow: 0 0 16px rgba(255, 77, 109, .55); }
#livespick .dd { min-height: 16px; margin-top: 6px; font: 600 12.5px var(--ui); color: #d6dbe4; }
body.touch #livespick { margin-bottom: 8px; } body.touch #livespick button { padding: 4px 0; font-size: 16px; }
#lives { font-size: 15px; letter-spacing: 2px; margin-bottom: 3px; text-shadow: 0 1px 3px rgba(0,0,0,.6); min-height: 18px; }
#lives .gone { filter: grayscale(1) brightness(.45); }
#respawn { position: fixed; left: 50%; top: 34%; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 30; }
#respawn .t { font: 400 64px var(--display); letter-spacing: 3px; color: #ff3b5c; text-shadow: 0 4px 0 rgba(0,0,0,.35); }
#respawn .h { font-size: 30px; letter-spacing: 6px; margin: 4px 0; }
#respawn .h .gone { filter: grayscale(1) brightness(.4); }
#respawn .s { font: 700 17px var(--ui); color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.7); }
#respawn .s b { color: #ffd60a; font-size: 22px; }
body.touch #respawn .t { font-size: 40px; }
.kf em.lv { font-style: normal; font-size: 11px; opacity: .85; margin-left: 4px; }
#lives span, #respawn .h span { color: #ff3b5c; }

/* ---- phones: compact panels & HUD (a landscape phone is only ~390 px tall) ---- */
body.touch .ph { margin-bottom: 4px; }
body.touch .ph h2 { font-size: 22px; }
body.touch .ph .money { font-size: 19px; }
body.touch .ph .x { width: 30px; height: 30px; font-size: 15px; }
/* upgrades: one tight row per stat -> all five fit without scrolling */
body.touch #panel-up { padding: 8px 10px; }
body.touch .uprow { grid-template-columns: 78px 1fr auto; grid-template-rows: auto auto; gap: 1px 8px; padding: 4px 8px; margin-bottom: 4px; border-radius: 9px; }
body.touch .uprow .key, body.touch .uprow .ds { display: none; }
body.touch .uprow .nm { grid-column: 1; grid-row: 1 / 3; font-size: 16px; line-height: 1.05; }
body.touch .uprow .nm .lv { display: block; margin: 2px 0 0; font-size: 9.5px; }
body.touch .uprow .pips { grid-column: 2; grid-row: 1; gap: 3px; }
body.touch .uprow .pips i { height: 7px; }
body.touch .uprow .pips .tier { top: -10px; font-size: 7.5px; letter-spacing: 1px; }
body.touch .uprow .nx { grid-column: 2; grid-row: 2; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.touch .uprow .btns { grid-column: 3; grid-row: 1 / 3; flex-direction: row; align-items: center; gap: 4px; }
body.touch .uprow .btns .plus { height: 32px; padding: 0 9px; font-size: 15px; }
body.touch .uprow .btns .plus span { font-size: 12px; }
body.touch .uprow .maxb { height: 32px; padding: 0 7px; font-size: 9.5px; letter-spacing: 1px; }
/* marketplace: smaller cards, more per row */
body.touch #panel-shop { padding: 8px 10px; }
body.touch #shop-tabs { margin-bottom: 5px; }
body.touch #shop-tabs button { padding: 4px; font-size: 14px; }
body.touch #shop-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 5px; }
body.touch .card { min-height: 86px; padding: 6px 7px; border-radius: 9px; }
body.touch .card .ic { width: 26px; height: 26px; font-size: 14px; margin-bottom: 2px; }
body.touch .card .nm { font-size: 14px; }
body.touch .card .ds { font-size: 9.5px; line-height: 1.25; margin-bottom: 16px; }
body.touch .card .pr { font-size: 15px; bottom: 5px; }
/* vitals: a small heart-rate chip under the minimap, clear of the action buttons */
body.touch #vitals { top: calc(124px + var(--st)); right: calc(10px + var(--sr)); left: auto; width: auto; padding: 3px 7px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 6px; border-radius: 9px; }
body.touch #vitals.hidden { display: none; }
body.touch #vitals .vh, body.touch #vitals .vr { display: none !important; }
body.touch #vitals .vr.big { display: flex !important; align-items: baseline; gap: 3px; }
body.touch #vitals .vr.big span { display: none; }
body.touch #vitals .vr.big b { font-size: 17px; }
body.touch #vitals .vr.big i { font-size: 9px; }
body.touch #vitals canvas { width: 62px; height: 22px; margin: 0; }
/* top bar: hearts sit left of the health bar, the difficulty chip was under the bar anyway */
body.touch #diffchip { display: none; }
body.touch #lives { position: absolute; left: 0; top: 100%; margin: 3px 0 0; font-size: 11px; letter-spacing: 1px; white-space: nowrap; min-height: 0; }
body.touch #filming { padding: 2px 6px; }
/* phones: the start menu has to fit a ~390 px tall landscape screen with PLAY visible */
@media (max-height: 520px) {
  body.touch .logo { font-size: clamp(34px, 7vw, 62px); line-height: 1; margin-bottom: 8px; }
  body.touch .tagline { display: none; }
  body.touch #diffpick, body.touch #botpick, body.touch #livespick { margin-bottom: 6px; }
  body.touch #diffpick .dl, body.touch #botpick .dl, body.touch #livespick .dl { font-size: 9.5px; margin-bottom: 3px; }
  body.touch #diffpick button { padding: 3px 0; font-size: 15px; border-radius: 8px; }
  body.touch #diffpick .dd, body.touch #botpick .dd, body.touch #livespick .dd { font-size: 9.5px; margin-top: 2px; min-height: 0; }
  body.touch #livespick button { padding: 2px 0; font-size: 14px; border-radius: 8px; }
  body.touch #name { padding: 7px 10px; font-size: 15px; }
  body.touch #play { font-size: 22px; padding: 0 22px; }
  body.touch .join { margin-top: 4px; }
}

/* mute */
#menu-mute { position: absolute; top: calc(14px + var(--st, 0px)); right: calc(14px + var(--sr, 0px)); z-index: 5; width: 44px; height: 44px; padding: 0; font-size: 20px; border-radius: 12px; }
#menu-lang { position: absolute; top: calc(14px + var(--st, 0px)); left: calc(14px + var(--sl, 0px)); z-index: 5; height: 44px; max-width: 46vw; padding: 0 10px; font: 600 14px var(--ui); color: #fff; background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
#menu-lang option { background: #1a1d24; color: #fff; }
#mutechip { color: #ffb3b3; }
#t-mute { left: calc(240px + var(--sl)); }

/* ---------- levels & skills ---------- */
/* level badge under the XP counter: LV n, bar to the next level, unspent skill points (tap / click = skills panel) */
#xprow { display: flex; align-items: center; gap: 8px; }
#lvl { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 6px; background: var(--panel); border: 1px solid rgba(255,214,10,.35); border-radius: 8px; pointer-events: auto; cursor: pointer; }
#lvl b { font: 400 20px/1 var(--display); letter-spacing: 1px; color: var(--yellow); }
#lvl .lb { display: block; width: 72px; height: 5px; background: rgba(255,255,255,.14); border-radius: 3px; overflow: hidden; }
#lvl .lb u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd60a, #ff9f1a); transition: width .25s; }
#lvl .sp { font: 800 11px var(--ui); color: #e2d6ff; white-space: nowrap; }
#lvl .sp:empty { display: none; }
#lvl .sp kbd { font-size: 9.5px; padding: 0 4px; min-width: 0; }
#lvl.ready { border-color: #8f6bff; animation: spglow 1s infinite alternate; }
@keyframes spglow { to { box-shadow: 0 0 14px #8f6bff; } }
.tag .n .lv { font: 800 9.5px var(--ui); font-style: normal; color: var(--yellow); background: rgba(0,0,0,.55); padding: 0 4px; border-radius: 4px; margin-right: 4px; vertical-align: 1px; }
.tag .n .lv:empty { display: none; }

/* desktop skill bar, right of the potions */
#skillbar { display: grid; grid-template-columns: repeat(4, 42px); grid-auto-rows: 40px; gap: 4px; padding-left: 9px; border-left: 1px solid var(--line); }
@media (min-width: 1440px) { #skillbar { grid-template-columns: repeat(8, 44px); grid-auto-rows: 50px; gap: 5px; } }
@media (max-width: 1439px) { body:not(.touch) #keys { bottom: 110px; } } /* clear of the two-row skill bar */
@media (min-width: 901px) and (max-width: 1100px) { body:not(.touch) #bars { width: 300px; } body:not(.touch) #held { width: 124px; } }
.sslot { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); border-bottom: 2px solid var(--c, rgba(255,255,255,.25)); border-radius: 9px; overflow: hidden; pointer-events: auto; cursor: pointer; }
.sslot .k { position: absolute; top: 2px; left: 5px; font: 800 10px var(--ui); opacity: .75; z-index: 2; }
.sslot .ic { font-size: 22px; }
.sslot.empty { opacity: .45; }
.sslot.empty .ic { font-size: 15px; opacity: .5; }
.sslot .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0,0,0,.72) calc(var(--cd, 0) * 360deg), transparent 0); pointer-events: none; }
.sslot.cool .ic { filter: grayscale(.75) brightness(.7); }
.sslot .t { position: absolute; inset: 0; display: grid; place-items: center; font: 400 20px var(--display); letter-spacing: 1px; text-shadow: 0 1px 3px #000; z-index: 2; pointer-events: none; }
.sslot .t:empty { display: none; }

/* skills panel: the Robocraft-style TECH TREE (client/ui/skilltree.js). A header bar (title, level + XP bar, free
   skill points), the hex board and the detail card beside it */
#panel-sk { width: min(1500px, 98vw); height: min(940px, 95vh); max-height: none; display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 12px; background: #141619; border-color: #3b4047; }
#panel-sk .ph { flex: 0 0 auto; margin: 0; padding: 7px 10px 7px 18px; gap: 18px; background: linear-gradient(180deg, #2d3137, #202327); border-bottom: 2px solid #464b52; box-shadow: 0 3px 12px rgba(0,0,0,.55); position: relative; z-index: 2; }
#panel-sk .ph h2 { flex: 0 0 auto; font: 400 36px/1 var(--display); letter-spacing: 5px; color: #f3f5f8; text-shadow: 0 2px 0 #000; }
#panel-sk .lvinfo { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.12); }
#sk-lv { font: 400 27px/1 var(--display); letter-spacing: 1.5px; color: var(--yellow); white-space: nowrap; }
#sk-xpbar { display: block; flex: 0 1 280px; min-width: 50px; height: 6px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.14); border-radius: 3px; overflow: hidden; }
#sk-xpbar u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd60a, #ff9f1a); box-shadow: 0 0 8px rgba(255,200,40,.6); }
#sk-xptxt { font: 700 11px var(--ui); opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel-sk .ph #sk-sp { display: flex; align-items: center; gap: 8px; padding: 4px 12px 3px; border-radius: 6px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.14); color: #aeb6c0; font: inherit; }
#sk-sp b { font: 400 31px/1 var(--display); color: #fff; letter-spacing: 1px; }
#sk-sp span { font: 400 15px/1.05 var(--display); letter-spacing: 1.5px; max-width: 92px; }
#sk-sp.has { border-color: #7dff9a; animation: sppulse .8s infinite alternate; }
#sk-sp.has b { color: #7dff9a; }
@keyframes sppulse { to { box-shadow: 0 0 14px rgba(125,255,154,.55); } }
#panel-sk .ph .x { border-radius: 6px; }
#panel-sk .pf { flex: 0 0 auto; margin: 0; padding: 5px 10px 7px; border-top: 1px solid rgba(255,255,255,.07); }
#panel-sk .pf kbd { min-width: 0; padding: 0 4px; font-size: 10px; }
.tt-wrap { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 292px; }
/* the board: dark charcoal, a faint hex grid that pans / zooms with the tiles */
.tt-vp { position: relative; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; background: radial-gradient(ellipse at 50% 46%, #26292d 0%, #1b1d20 55%, #111214 100%); }
.tt-vp.grab { cursor: grabbing; }
.tt-grid { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat; }
.tt-grid.glide { transition: background-position .2s ease-out, background-size .2s ease-out; }
.tt-board { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.tt-board.glide { transition: transform .2s ease-out; }
/* under the tiles: each family's cells tinted in its colour, the prerequisite connectors across the gaps */
.tt-links { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.tt-halos polygon { fill: color-mix(in srgb, var(--fc) 16%, transparent); }
.tt-ln { stroke: rgba(0,0,0,.6); stroke-width: 9; stroke-linecap: round; }
.tt-ln.met { stroke: var(--fc); filter: drop-shadow(0 0 4px var(--fc)); }
.tt-ln.hl { stroke: rgba(255,255,255,.45); }
.tt-ln.met.hl { stroke: color-mix(in srgb, var(--fc) 55%, #fff); }
/* family labels and the tier legend */
.tt-fam { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--fc); cursor: pointer; }
.tt-fam i { font-style: normal; font-size: 17px; line-height: 1; filter: drop-shadow(0 0 5px var(--fc)); }
.tt-fam b { font: 400 23px/1 var(--display); letter-spacing: 2.5px; text-shadow: 0 0 12px color-mix(in srgb, var(--fc) 60%, transparent), 0 2px 0 #000; }
.tt-fam em { font: 800 10px/1 var(--ui); font-style: normal; color: #d3d9e0; padding: 3px 5px; border-radius: 4px; background: rgba(0,0,0,.5); }
.tt-legend { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.06); pointer-events: none; }
.tt-legend div { display: flex; align-items: center; gap: 9px; font: 400 17px/1 var(--display); letter-spacing: 1.5px; color: #c4cad2; white-space: nowrap; }
.tt-legend svg { flex: 0 0 auto; width: 26px; height: 22.6px; }
.tt-legend polygon { fill: var(--tc); stroke: color-mix(in srgb, var(--tc) 50%, #000); stroke-width: .14; }
/* a tile: the hexagon (it alone takes the pointer, so neighbours never steal clicks), a white icon, the name and the status */
.tt-tile { position: absolute; padding: 0; margin: 0; border: 0; background: none; color: #fff; pointer-events: none; font-family: var(--display); outline: none; transition: transform .12s ease-out, filter .2s; -webkit-tap-highlight-color: transparent; }
.tt-tile .hx, .tt-info .iic .hx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tt-tile .hb, .tt-info .iic .hb { fill: var(--tc); stroke: var(--tcd); stroke-width: .07; }
.tt-tile .hb { pointer-events: all; cursor: pointer; }
.tt-tile .hg, .tt-info .iic .hg { fill: url(#tt-gloss); pointer-events: none; }
.tt-tile .hi, .tt-info .iic .hi { fill: none; stroke: rgba(255,255,255,.24); stroke-width: .028; pointer-events: none; }
.tt-tile.pas .hi { stroke: rgba(255,255,255,.5); stroke-dasharray: .1 .07; }
.tt-tile .ic { position: absolute; left: 32%; width: 36%; top: 5%; height: 36%; display: grid; place-items: center; pointer-events: none; }
.tt-tile .ic svg, .tt-info .ic svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1.5px 0 rgba(0,0,0,.45)) drop-shadow(0 0 2px rgba(0,0,0,.25)); }
.ic svg > * { fill: url(#tt-icg); }
.ic svg .s { fill: none; stroke: url(#tt-icg); stroke-linecap: round; stroke-linejoin: round; }
.ic svg .k { fill: none; stroke: var(--tcd); stroke-linecap: round; stroke-linejoin: round; }
.ic svg .kf { fill: var(--tcd); }
.ic .emo { font-style: normal; font-size: 26px; line-height: 1; filter: grayscale(1) brightness(1.8) drop-shadow(0 1.5px 0 rgba(0,0,0,.45)); }
.tt-tile .nm { position: absolute; left: 3%; right: 3%; top: 41.5%; display: flex; flex-direction: column; align-items: center; line-height: .92; letter-spacing: .5px; white-space: nowrap; pointer-events: none;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 1.6px 0 #000, 0 0 5px rgba(0,0,0,.55); }
.tt-tile .nm b { font-weight: 400; }
.tt-tile .ss { position: absolute; left: 50%; top: 77%; transform: translateX(-50%); padding: 1px 3px 0; border-radius: 3px; font: 400 9.6px/1.15 var(--display); letter-spacing: .6px; white-space: nowrap; pointer-events: none; color: rgba(255,255,255,.85);
  text-shadow: -1px -1px 0 rgba(0,0,0,.8), 1px -1px 0 rgba(0,0,0,.8), -1px 1px 0 rgba(0,0,0,.8), 1px 1px 0 rgba(0,0,0,.8); }
.tt-tile.st-learned .ss { color: #e9fff0; }
.tt-tile.over .ss { color: #ffd2a6; }
.tt-tile.max .ss { color: #ffe066; }
.tt-tile.st-level .ss { color: var(--yellow); }
.tt-tile.st-req .ss { font-size: 12px; top: 75%; text-shadow: none; }
.tt-tile.can:not(.st-learned) .ss { padding: 1px 4px 0; background: #fff; color: #111; text-shadow: none; animation: ttpulse .9s ease-in-out infinite alternate; }
.tt-tile.can:not(.st-learned) .hb { animation: tthb 1s ease-in-out infinite alternate; }
@keyframes ttpulse { from { box-shadow: 0 0 2px rgba(255,255,255,.4); } to { box-shadow: 0 0 12px #fff; } }
@keyframes tthb { from { stroke: var(--tcd); } to { stroke: #fff; } }
.tt-tile .slt { position: absolute; left: 10%; top: 23%; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 4px; background: #fff; color: #000; font: 900 10px/15px var(--ui); text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
.tt-tile .slt:empty { display: none; }
.tt-tile .pl { position: absolute; right: 10%; top: 23%; width: 15px; height: 15px; border-radius: 50%; background: #7dff9a; color: #053; font: 900 13px/15px var(--ui); text-align: center; display: none; box-shadow: 0 0 7px #7dff9a; pointer-events: none; }
.tt-tile.st-learned.can .pl { display: block; }
/* locked: dimmed and greyed (prerequisites missing more than level too low); ready but no point to spend: a bit dim */
.tt-tile.st-req { filter: grayscale(.95) brightness(.42); }
.tt-tile.st-level { filter: grayscale(.7) brightness(.6); }
.tt-tile.st-ready:not(.can) { filter: grayscale(.3) brightness(.8); }
.tt-tile:hover, .tt-tile.hov { filter: brightness(1.12); transform: scale(1.05); z-index: 3; }
.tt-tile.st-req:hover, .tt-tile.st-req.hov { filter: grayscale(.85) brightness(.62); }
.tt-tile.st-level:hover, .tt-tile.st-level.hov { filter: grayscale(.5) brightness(.8); }
.tt-tile.st-ready:not(.can):hover, .tt-tile.st-ready:not(.can).hov { filter: grayscale(.15) brightness(.95); }
.tt-tile.sel { transform: scale(1.06); z-index: 4; }
.tt-tile.flash { animation: ttflash .45s ease-out; }
@keyframes ttflash { 0% { transform: scale(1.3); filter: brightness(2.2); } }
.tt-tile.nope { animation: ttnope .3s; }
@keyframes ttnope { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
/* the controller's focus on a tile (gamepad.js .pad-focus): it stays in place, the selection cursor shows it */
.tt-tile.pad-focus { position: absolute; outline: none !important; box-shadow: none !important; }
/* the selection cursor */
.tt-cur { position: absolute; left: -999px; top: -999px; display: none; pointer-events: none; z-index: 5; transition: left .14s ease-out, top .14s ease-out; }
.tt-cur.on { display: block; }
.tt-cur svg { width: 100%; height: 100%; overflow: visible; animation: ttcur .8s ease-in-out infinite alternate; }
.tt-cur polygon { fill: none; stroke: #fff; stroke-width: .055; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px rgba(255,255,255,.6)); }
@keyframes ttcur { from { opacity: .7; } to { opacity: 1; } }
/* zoomed far out: just the icons (and bigger family labels) */
.tt-vp.far .tt-tile .nm, .tt-vp.far .tt-tile .ss { display: none; }
.tt-vp.far .tt-tile .ic { left: 22%; width: 56%; top: 16%; height: 66%; }
.tt-vp.far .tt-fam b { font-size: 34px; }
.tt-vp.far .tt-fam em { font-size: 15px; }
.tt-zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 6; }
.tt-zoom button { width: 32px; height: 32px; border-radius: 6px; border: 1px solid #4a4f57; background: rgba(32,35,39,.92); color: #fff; font: 700 17px var(--ui); cursor: pointer; }
.tt-zoom button:hover { border-color: var(--yellow); }
/* the detail card */
.tt-info { --c: #fff; position: relative; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 9px; border-left: 2px solid #33373d; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 17%, #1c1e22), #17191c 42%); }
.tt-shut { display: none; }
.tt-info .ih { display: flex; gap: 11px; align-items: center; }
.tt-info .iic { position: relative; flex: 0 0 62px; height: 53.7px; }
.tt-info .iic .ic { position: absolute; left: 26%; top: 17%; width: 48%; height: 66%; display: grid; place-items: center; }
.tt-info .iht { min-width: 0; }
.tt-info .inm { display: block; font: 400 27px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; }
.tt-info .isub { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: 4px; font: 800 10px var(--ui); letter-spacing: .5px; }
.tt-info .ibr { color: var(--fc); }
.tt-info .itr { font-style: normal; padding: 1px 6px; border-radius: 4px; background: var(--tc); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.55); }
.tt-info .itg, .tt-info .iel { font-style: normal; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.1); color: #cfd6e0; }
.tt-info .itg.p { color: #7dffb2; }
.tt-info .irk { display: flex; align-items: center; gap: 9px; font: 400 15px/1 var(--display); letter-spacing: 1px; color: #c9d0d8; }
.tt-info .irk span { white-space: nowrap; }
.tt-info .irk i { flex: 1; height: 5px; border-radius: 3px; background: rgba(0,0,0,.55); overflow: hidden; }
.tt-info .irk u { display: block; height: 100%; width: 0; background: var(--tc); }
.tt-info .irk.own span { color: #9dffb0; }
.tt-info .irk.x u { background: linear-gradient(90deg, var(--tc), #ff7a2a); }
.tt-info .ids { font: 500 12.5px/1.4 var(--ui); opacity: .82; }
.tt-info .inx { font: 600 12px/1.55 var(--ui); color: #e8ecf2; padding: 7px 9px; border-radius: 7px; background: rgba(0,0,0,.32); }
.tt-info .inx b { color: var(--yellow); }
.tt-info .inx b.x { color: #ff7a2a; text-shadow: 0 0 6px rgba(255,106,19,.7); }
.tt-info .inx .free { color: #7dffb2; font-weight: 800; font-style: normal; }
.tt-info .inx .new { color: #ff9f1a; font-weight: 800; font-style: normal; }
.tt-info .inx em { font-style: normal; font-weight: 800; font-size: 9px; opacity: .6; margin-right: 2px; }
.tt-info .irq { display: flex; flex-direction: column; gap: 2px; font: 600 12px var(--ui); }
.tt-info .irq:empty { display: none; }
.tt-info .irq em { font: 800 9px var(--ui); font-style: normal; letter-spacing: 2px; opacity: .55; }
.tt-info .irq .ok { color: #7dffb2; }
.tt-info .irq .no { color: #ff8a8a; }
.tt-info .ibt { display: flex; flex-direction: column; gap: 4px; }
.tt-info .ilrn { height: 40px; font: 400 22px var(--display); letter-spacing: 2px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000)); border: 1px solid color-mix(in srgb, var(--c) 50%, #000); border-radius: 6px; cursor: pointer; }
.tt-info .ilrn:disabled { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.45); text-shadow: none; cursor: default; }
.tt-info .iwhy { font: 600 11px var(--ui); opacity: .65; text-align: center; }
.tt-info .iwhy.no { color: #ff9a9a; opacity: .9; }
.tt-info .islh { font: 800 9px var(--ui); letter-spacing: 2px; opacity: .55; margin-bottom: 3px; }
.tt-info .isb { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.tt-info .sb { position: relative; height: 36px; padding: 0; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); border-radius: 6px; cursor: pointer; font-family: var(--ui); }
.tt-info .sb b { position: absolute; left: 3px; top: 1px; font: 800 10px var(--ui); opacity: .8; }
.tt-info .sb i { font-style: normal; font-size: 15px; line-height: 36px; }
.tt-info .sb:hover:not(:disabled) { border-color: var(--c); }
.tt-info .sb.in { background: #fff; color: #000; border-color: #fff; }
.tt-info .sb:disabled { opacity: .35; cursor: default; }
.tt-info .isl.off .islh { color: #ff9a9a; opacity: .8; }
/* short laptop screens: a slimmer header and footer */
@media (max-height: 760px) { #panel-sk .ph { padding-top: 5px; padding-bottom: 5px; } #panel-sk .ph h2 { font-size: 31px; } #sk-sp b { font-size: 27px; } #panel-sk .pf { padding: 3px 10px 5px; } }
/* narrow desktop windows: the card becomes a bottom sheet like on phones */
@media (max-width: 760px) { body:not(.touch) .tt-wrap { grid-template-columns: minmax(0, 1fr); } body:not(.touch) .tt-info { position: absolute; left: 6px; right: 6px; bottom: 6px; max-height: 48%; border: 1px solid #33373d; border-radius: 10px; z-index: 7; } body:not(.touch) #panel-sk .ph h2 { font-size: 26px; letter-spacing: 3px; } body:not(.touch) #sk-xptxt { display: none; } }

/* phones: 8 skill buttons in two columns left of BLOCK (above the potions), a ✨ mini button for the panel */
.tbtn.skb { width: 44px; height: 44px; right: calc(266px + var(--sr)); overflow: hidden; border-color: color-mix(in srgb, var(--c, #fff) 75%, transparent); }
.tbtn.skb .i { position: relative; z-index: 1; font-size: 21px; }
.tbtn.skb .cd { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(0,0,0,.7) calc(var(--cd, 0) * 360deg), transparent 0); pointer-events: none; }
.tbtn.skb.cool .i { filter: grayscale(.8) brightness(.7); }
.tbtn.skb .t { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font: 400 19px var(--display); text-shadow: 0 1px 3px #000, 0 0 2px #000; pointer-events: none; }
.tbtn.skb .t:empty { display: none; }
#t-sk1, #t-sk5 { bottom: 58px; } #t-sk2, #t-sk6 { bottom: 108px; } #t-sk3, #t-sk7 { bottom: 158px; } #t-sk4, #t-sk8 { bottom: 208px; }
#t-sk5, #t-sk6, #t-sk7, #t-sk8 { right: calc(316px + var(--sr)); } /* slots 5-8: a second column, still clear of the potions and the stick */
#t-skills { left: calc(286px + var(--sl)); }
#t-skills.ready { border-color: #b89cff; animation: spglow 1s infinite alternate; }
body.touch #skillbar { display: none; }
body.touch #combo { right: calc(372px + var(--sr)); } /* stays left of the two skill columns */
body.touch #xprow { gap: 6px; }
body.touch #lvl { padding: 1px 6px 1px 5px; gap: 4px; border-radius: 6px; }
body.touch #lvl b { font-size: 14px; }
body.touch #lvl .lb { width: 44px; height: 4px; }
body.touch #lvl .sp { font-size: 9.5px; }
body.touch .tag .n .lv { font-size: 8px; padding: 0 3px; margin-right: 3px; }
/* skills panel on a ~390 px tall landscape phone: the board fills the panel, the detail card is a bottom sheet */
body.touch #panel-sk { padding: 0; height: calc(100vh - 12px - var(--st, 0px) - var(--sb, 0px)); }
body.touch #panel-sk .ph { padding: 4px 6px 4px 10px; gap: 8px; }
body.touch #panel-sk .ph h2 { font-size: 22px; letter-spacing: 2.5px; }
body.touch #panel-sk .lvinfo { gap: 6px; padding-left: 8px; }
body.touch #sk-lv { font-size: 19px; }
body.touch #sk-xpbar { flex-basis: 70px; height: 5px; }
body.touch #sk-xptxt { font-size: 9px; }
body.touch #panel-sk .ph #sk-sp { padding: 2px 8px; gap: 5px; }
body.touch #sk-sp b { font-size: 21px; }
body.touch #sk-sp span { font-size: 11px; max-width: 64px; }
body.touch #panel-sk .ph .x { width: 32px; height: 32px; }
body.touch .tt-wrap { grid-template-columns: minmax(0, 1fr); }
body.touch .tt-zoom button { width: 36px; height: 36px; }
body.touch .tt-info { position: absolute; left: 4px; right: 4px; bottom: 4px; max-height: 62%; padding: 7px 9px 8px; gap: 5px; z-index: 7; border: 1px solid #3a3f46; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, #17191c), #141619 60%); box-shadow: 0 -10px 30px rgba(0,0,0,.6);
  transform: translateY(calc(100% + 10px)); transition: transform .18s ease-out; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
body.touch .tt-wrap.sheet .tt-info { transform: none; }
body.touch .tt-shut { display: block; position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: #fff; font-size: 13px; z-index: 1; }
body.touch .tt-info .ih { grid-column: 1; }
body.touch .tt-info .iic { flex-basis: 40px; height: 34.6px; }
body.touch .tt-info .inm { font-size: 19px; }
body.touch .tt-info .isub { font-size: 8.5px; margin-top: 1px; gap: 2px 4px; }
body.touch .tt-info .irk { grid-column: 1; font-size: 12px; }
body.touch .tt-info .ids { grid-column: 1; font-size: 10px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.touch .tt-info .inx { grid-column: 2; grid-row: 1 / 3; margin-right: 32px; font-size: 10px; line-height: 1.4; padding: 4px 6px; }
body.touch .tt-info .irq { grid-column: 1; font-size: 10px; flex-direction: row; flex-wrap: wrap; gap: 0 8px; }
body.touch .tt-info .ibt { grid-column: 2; grid-row: 3 / 5; gap: 2px; }
body.touch .tt-info .ilrn { height: 32px; font-size: 17px; }
body.touch .tt-info .iwhy { font-size: 9.5px; }
body.touch .tt-info .isl { grid-column: 2; }
body.touch .tt-info .islh { display: none; }
body.touch .tt-info .sb { height: 30px; }
body.touch .tt-info .sb i { line-height: 30px; font-size: 13px; }
/* portrait phones: one column in the sheet */
@media (orientation: portrait) { body.touch .tt-info { grid-template-columns: minmax(0, 1fr); max-height: 70%; } body.touch .tt-info > * { grid-column: 1 !important; grid-row: auto !important; } body.touch .tt-info .inx { margin-right: 0; } body.touch #sk-xptxt { display: none; } body.touch #panel-sk .ph h2 { font-size: 19px; letter-spacing: 1.5px; } }

/* game controller: focus highlight for menu navigation + the controller layout list */
.pad-focus { outline: 3px solid #ffd60a !important; outline-offset: 2px; box-shadow: 0 0 16px rgba(255, 214, 10, .65) !important; position: relative; z-index: 2; }
.padhelp { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; font: 600 12.5px var(--ui); text-align: left; }
.padhelp .ph2 { grid-column: 1 / -1; font: 800 11px var(--ui); letter-spacing: 3px; opacity: .75; margin-bottom: 4px; }
.padhelp kbd { min-width: 0; white-space: nowrap; }
#pad-help:empty { display: none; }

/* TREX: the chicken curse counter and the Giant T-Rex boss bar */
#chickchip b { color: #ffe9a8; }
#chickchip.pop { animation: pop .35s ease-out; }
#chickchip.cursed { border-color: rgba(255, 59, 48, .75); animation: cursed .8s ease-in-out infinite alternate; }
#chickchip.cursed b, #chickchip.cursed em { color: #ff6a5a; }
@keyframes cursed { from { box-shadow: 0 0 0 rgba(255, 40, 30, 0); } to { box-shadow: 0 0 18px rgba(255, 40, 30, .8); background: rgba(95, 12, 10, .8); } }
#bossbar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(560px, 38vw); text-align: center; pointer-events: none; z-index: 2; }
#bossbar .bn { font: 400 24px var(--display); letter-spacing: 3px; color: #ffd8c8; text-shadow: 0 2px 0 rgba(0, 0, 0, .65), 0 0 14px rgba(255, 60, 30, .55); white-space: nowrap; }
#bossbar .bb { position: relative; height: 20px; margin-top: 2px; background: rgba(22, 6, 6, .85); border: 2px solid rgba(255, 96, 64, .75); border-radius: 7px; overflow: hidden; box-shadow: 0 0 12px rgba(255, 40, 20, .35), 0 4px 14px rgba(0, 0, 0, .5); }
#bossbar .bb u, #bossbar .bb i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
#bossbar .bb u { background: #ffcf9e; transition: width .9s ease-in .3s; }
#bossbar .bb i { background: linear-gradient(180deg, #ff6a48 0%, #d11b0e 55%, #8c0d06 100%); transition: width .12s linear; }
#bossbar .bb b { position: relative; z-index: 1; font: 800 13px/20px var(--ui); letter-spacing: 1px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
#bossbar.rage .bb { animation: bossrage .45s ease-in-out infinite alternate; }
#bossbar.rage .bn::after { content: var(--rage-t, ' · ENRAGED'); color: #ff4a3a; } /* --rage-t: the translated word (client/ui/overlays.js) */
@keyframes bossrage { to { box-shadow: 0 0 24px rgba(255, 40, 20, .95); border-color: #ff3b30; } }
/* the animal curse counters (one chip per kind) and the giant animals' boss bars, each in its colours */
#cu-pig { --cl: #ffc4d0; --cc: #ff6f9a; --cg: rgba(255, 60, 130, .8); --cbg: rgba(95, 10, 45, .8); }
#cu-sheep { --cl: #fff2c8; --cc: #f2dc8a; --cg: rgba(240, 220, 150, .8); --cbg: rgba(80, 66, 24, .8); }
#cu-cow { --cl: #c8e6ff; --cc: #5ab4ff; --cg: rgba(70, 160, 255, .8); --cbg: rgba(10, 45, 95, .8); }
#cu-horse { --cl: #ffd8b0; --cc: #ff9a4a; --cg: rgba(240, 130, 50, .8); --cbg: rgba(90, 40, 10, .8); }
#cu-rabbit { --cl: #e6d8ff; --cc: #c09cff; --cg: rgba(170, 120, 255, .8); --cbg: rgba(50, 20, 95, .8); }
.cursechip b { color: var(--cl); }
.cursechip.pop { animation: pop .35s ease-out; }
.cursechip.cursed { border-color: var(--cc); animation: cucursed .8s ease-in-out infinite alternate; }
.cursechip.cursed b, .cursechip.cursed em { color: var(--cc); }
@keyframes cucursed { from { box-shadow: 0 0 0 transparent; } to { box-shadow: 0 0 18px var(--cg); background: var(--cbg); } }
#bossbar[data-boss="pig"] { --bn: #ffd6e2; --bg: rgba(255, 70, 140, .6); --bd: rgba(255, 110, 160, .8); --b1: #ff9cc0; --b2: #e8417e; --b3: #9a1048; --rage: ' · HANGRY'; --rc: #ff4a7a; }
#bossbar[data-boss="sheep"] { --bn: #fff6dc; --bg: rgba(240, 220, 150, .55); --bd: rgba(245, 228, 170, .85); --b1: #fffbe8; --b2: #e8d48a; --b3: #9a8640; --rage: ' · BAA-SERK'; --rc: #ffe066; }
#bossbar[data-boss="cow"] { --bn: #d8eeff; --bg: rgba(70, 160, 255, .6); --bd: rgba(110, 185, 255, .8); --b1: #9ad0ff; --b2: #3a8ee8; --b3: #154a9a; --rage: ' · MAD COW'; --rc: #6ac0ff; }
#bossbar[data-boss="horse"] { --bn: #ffe2c4; --bg: rgba(240, 130, 50, .6); --bd: rgba(250, 160, 90, .8); --b1: #ffbc80; --b2: #e0762a; --b3: #8a3a0c; --rage: ' · UNBRIDLED'; --rc: #ff9040; }
#bossbar[data-boss="rabbit"] { --bn: #eee4ff; --bg: rgba(170, 120, 255, .6); --bd: rgba(190, 150, 255, .8); --b1: #d4bcff; --b2: #9a6ae8; --b3: #4c2a9a; --rage: ' · HOPPING MAD'; --rc: #c09cff; }
#bossbar[data-boss="devil"] { --bn: #ffd0a8; --bg: rgba(255, 60, 10, .7); --bd: rgba(255, 110, 40, .9); --b1: #ffb040; --b2: #e02a08; --b3: #4a0602; --rage: ' · INFERNAL'; --rc: #ffb020; width: min(640px, 44vw); }
#bossbar[data-boss="devil"] .bn { letter-spacing: 5px; }
#bossbar[data-boss="devil"] .bb { background: rgba(14, 2, 2, .9); }
#bossbar[data-boss] .bn { color: var(--bn); text-shadow: 0 2px 0 rgba(0, 0, 0, .65), 0 0 14px var(--bg); }
#bossbar[data-boss] .bb { border-color: var(--bd); box-shadow: 0 0 12px var(--bg), 0 4px 14px rgba(0, 0, 0, .5); }
#bossbar[data-boss] .bb i { background: linear-gradient(180deg, var(--b1) 0%, var(--b2) 55%, var(--b3) 100%); }
#bossbar[data-boss].rage .bn::after { content: var(--rage-t, var(--rage)); color: var(--rc); }
#announce.trex { top: 36%; }
#announce.trex .t { font-size: clamp(34px, min(6vw, 9vh), 64px); line-height: 1.02; }
#announce.trex .s { margin-top: 8px; font-size: clamp(12px, 2.2vh, 18px); }
body.touch #bossbar { top: calc(40px + var(--st)); width: 52vw; }
body.touch #bossbar .bn { font-size: 14px; letter-spacing: 2px; }
body.touch #bossbar .bb { height: 12px; }
body.touch #bossbar .bb b { font-size: 9px; line-height: 12px; }
body.touch #announce.trex .t { font-size: 32px; }
body.touch #announce.trex .s { font-size: 12px; }
@media (max-width: 1100px) { #bossbar { top: 64px; width: 56vw; } }

/* ---- chatty bystanders (client/chatter/): speech bubbles over heads, the talk hint, the touch 💬 button */
#bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bub { position: absolute; left: 0; top: 0; display: none; max-width: 240px; width: max-content; padding: 7px 12px 8px; border-radius: 15px;
  background: #fff; color: #1b1d26; font: 700 14px/1.25 var(--ui); text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.32);
  transform-origin: 50% 100%; will-change: transform, opacity; opacity: 0; }
.bub::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
.bub.me { background: var(--yellow); color: #231c00; }
.bub.me::after { border-top-color: var(--yellow); }
.bub.q::before { content: '💬'; position: absolute; right: -9px; top: -10px; font-size: 13px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
#talkhint { position: absolute; left: 50%; top: calc(50% + 74px); transform: translateX(-50%); font: 600 13px var(--ui); color: rgba(255,255,255,.88);
  text-shadow: 0 1px 4px #000; white-space: nowrap; }
#talkhint kbd { margin: 0 3px; }
#talkhint.q { color: var(--yellow); }
body.touch #talkhint { display: none; }
#t-talk { width: 48px; height: 48px; right: calc(112px + var(--sr)); bottom: 168px; border-color: rgba(255,255,255,.7); }
#t-talk .i { font-size: 22px; }
/* sitting / lying down (client/pose.js): above JUMP, shown near a seat / bed, after standing still, or while resting */
#t-sit, #t-lie { width: 44px; height: 44px; right: calc(39px + var(--sr)); border-color: rgba(255,255,255,.6); }
#t-sit { bottom: 196px; } #t-lie { bottom: 246px; }
#t-sit .i, #t-lie .i { font-size: 20px; }
#pause .optnote { margin: -6px 0 10px; font: 500 11px/1.35 var(--ui); color: rgba(255,255,255,.55); text-align: left; }

/* ---- menu: settings in a 2-column grid (difficulty | lives, bots | bystanders), help folded away; fits a laptop */
#setup { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; width: min(760px, 94vw); margin: 0 auto 12px; text-align: left; }
#setup > div { width: auto; margin: 0; }
#setup .dd { font-size: 11.5px; min-height: 30px; }
#crowdpick .dl { font: 800 11px var(--ui); letter-spacing: 3px; opacity: .85; margin-bottom: 4px; }
#crowdpick .dl b { color: #7ee8ff; font-size: 14px; letter-spacing: 1px; margin-left: 6px; }
#crowdpick input { width: 100%; accent-color: #36c5f0; }
#crowdpick .dd { font: 600 11.5px var(--ui); color: #d6dbe4; }
#crowdpick .mini, #setup .mini { margin-left: 8px; padding: 1px 7px; font: 800 10px var(--ui); letter-spacing: 1.5px; color: #000; background: #7ee8ff; border: 0; border-radius: 6px; cursor: pointer; vertical-align: 2px; }
#crowdpick .mini.on { background: #2ee07f; }
#diffpick button { padding: 6px 0; font-size: 19px; }
#livespick button { padding: 5px 0; font-size: 18px; }
#howto { width: min(760px, 94vw); margin: 4px auto 0; text-align: center; }
#howto summary { display: inline-block; cursor: pointer; font: 800 11px var(--ui); letter-spacing: 2px; opacity: .75; padding: 6px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; list-style: none; }
#howto summary::-webkit-details-marker { display: none; }
#howto[open] summary { margin-bottom: 8px; }
.logo { font-size: clamp(64px, 12vw, 150px); }
.tagline { margin: 8px 0 14px; }
#status { margin: 10px 0 8px; }
@media (max-height: 820px) { .logo { font-size: clamp(56px, 9vw, 104px); } .tagline { font-size: 13px; margin: 4px 0 10px; } #setup .dd { min-height: 0; } }
@media (max-width: 640px) { #setup { grid-template-columns: 1fr; } }
body.touch #setup { gap: 6px 12px; }
#perfest { margin: 2px 0 0; font: 600 12px var(--ui); color: #cfd6e0; min-height: 16px; }
#perfest b { font-weight: 800; }
#perfchip { gap: 3px; }
#perfchip b { font-size: 13px; margin-left: 4px; }
#perfchip em { margin-right: 2px; }
body.touch #perfchip em { display: none; }

/* ---- instant replay clips (client/game/clips.js) */
#clipbtn { position: fixed; z-index: 55; right: 18px; top: 150px; padding: 10px 14px; font: 400 20px var(--display); letter-spacing: 1.5px; color: #fff; background: #ff3b30; border: 0; border-radius: 12px; box-shadow: 0 0 24px rgba(255,59,48,.6); cursor: pointer; animation: clippulse 0.9s ease-in-out infinite alternate; }
#clipbtn kbd { font: 800 11px var(--ui); background: rgba(0,0,0,.35); padding: 2px 6px; border-radius: 5px; margin-left: 6px; vertical-align: 3px; }
@keyframes clippulse { from { transform: scale(1); } to { transform: scale(1.06); } }
#clipmodal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0,0,0,.75); }
#clipmodal .box { background: #111418; border: 2px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px; text-align: center; max-height: 96vh; display: flex; flex-direction: column; gap: 10px; }
#clipmodal .ct { font: 400 26px var(--display); letter-spacing: 2px; color: #fff; }
#clipmodal .ct small { font: 600 12px var(--ui); opacity: .6; letter-spacing: 0; margin-left: 8px; }
#clipmodal video { height: min(68vh, 640px); aspect-ratio: 9 / 16; background: #000; border-radius: 10px; margin: 0 auto; }
#clipmodal .row { display: flex; gap: 8px; justify-content: center; }
#clipmodal .cbtn { padding: 9px 14px; font: 800 13px var(--ui); letter-spacing: 1px; color: #000; background: var(--yellow); border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; }
#clipmodal .cbtn.ghost { color: #fff; background: rgba(255,255,255,.12); }
#clipmodal .ch { font: 600 11.5px var(--ui); opacity: .65; }
body.touch #clipbtn { top: auto; bottom: calc(150px + var(--sb, 0px)); right: calc(150px + var(--sr, 0px)); font-size: 15px; }

/* ---- private rooms (client/game/rooms.js) */
#roomrow { margin-top: 8px; }
#mkroom, #myclips, #tutbtn { font: 800 11.5px var(--ui); letter-spacing: 1.5px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); color: #fff; background: rgba(255,255,255,.06); cursor: pointer; }
#roombanner { width: min(760px, 94vw); margin: 0 auto 10px; padding: 9px 12px; border-radius: 12px; background: rgba(54,197,240,.14); border: 1px solid rgba(54,197,240,.45); font: 600 13px var(--ui); color: #e8f7ff; text-align: left; }
#roombanner b.code, #roommodal b.code { font: 400 20px var(--display); letter-spacing: 3px; color: #7ee8ff; }
#roombanner .rb-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#roombanner .rb-leave { margin-left: auto; font: 700 11px var(--ui); color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 7px; padding: 4px 9px; cursor: pointer; }
#roombanner .rb-set { margin-top: 3px; opacity: .85; font-size: 12px; }
#roommodal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(0,0,0,.72); }
#roommodal .box { width: min(520px, 94vw); background: #111418; border: 2px solid rgba(255,255,255,.12); border-radius: 16px; padding: 18px; text-align: center; }
#roommodal .rt { font: 400 28px var(--display); letter-spacing: 2px; color: #fff; margin-bottom: 6px; }
#roommodal .rd { font: 600 13px var(--ui); color: #d6dbe4; margin: 6px 0 12px; }
#roommodal .rl { display: block; font: 800 11px var(--ui); letter-spacing: 2px; color: #cfd6e0; text-align: left; }
#roommodal .rl b { color: var(--yellow); font-size: 14px; margin-left: 6px; }
#roommodal .rl input { width: 100%; accent-color: var(--yellow); }
#roommodal .rrow { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
#roommodal .cbtn { padding: 9px 14px; font: 800 13px var(--ui); letter-spacing: 1px; color: #000; background: var(--yellow); border: 0; border-radius: 10px; cursor: pointer; }
#roommodal .cbtn.ghost { color: #fff; background: rgba(255,255,255,.12); }
#roommodal .rlink { display: flex; gap: 6px; }
#roommodal .rlink input { flex: 1; font: 600 13px ui-monospace, monospace; padding: 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: #0b0d10; color: #fff; }
#roommodal .rlan { margin-top: 8px; font: 600 11.5px var(--ui); opacity: .75; word-break: break-all; }
#roommodal .rerr { min-height: 16px; margin-top: 8px; font: 700 12px var(--ui); color: #ff6b5a; }
#pause-room { margin: 4px 0 10px; font: 600 13px var(--ui); color: #e8f7ff; }
#pause-room button { margin-left: 8px; font: 800 11px var(--ui); padding: 4px 9px; border-radius: 7px; border: 0; background: #7ee8ff; color: #000; cursor: pointer; }

/* reconnecting after a dropped connection (client/game/net.js) */
#netbanner { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 10px 18px; border-radius: 10px;
  background: rgba(20, 10, 10, 0.86); color: #ffd36b; font: 700 15px/1.3 system-ui, sans-serif; letter-spacing: 0.02em;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); pointer-events: none; text-align: center; max-width: calc(100vw - 32px); }
#netbanner.hidden { display: none; }
/* the "Reconnecting…" overlay: a match reset / server restart / lost connection (client/game/net.js tryReconnect) */
#reconnect { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 10, 0.72); backdrop-filter: blur(3px); }
#reconnect.hidden { display: none; }
#reconnect .card { width: min(360px, 100%); padding: 24px 20px 18px; border-radius: 16px; text-align: center; color: #fff;
  background: rgba(20, 22, 30, 0.95); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); font: 600 14px/1.4 var(--ui, system-ui, sans-serif); }
#reconnect h2 { margin: 10px 0 6px; font: 900 22px var(--ui, system-ui, sans-serif); letter-spacing: 0.03em; color: #ffd36b; }
#reconnect p { margin: 4px 0; opacity: 0.9; }
#reconnect .try { font-size: 12.5px; opacity: 0.65; font-variant-numeric: tabular-nums; min-height: 18px; }
#reconnect button { margin-top: 12px; }
#reconnect .spin { width: 38px; height: 38px; margin: 0 auto; border-radius: 50%; border: 4px solid rgba(255, 211, 107, 0.2); border-top-color: #ffd36b; animation: rcspin 0.9s linear infinite; }
@keyframes rcspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #reconnect .spin { animation-duration: 3s; } }

/* My Clips (client/ui/ui.js openClips, client/game/cliplib.js) */
#roomrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#myclips .n:not(:empty), #pause-clips .n:not(:empty) { margin-left: 4px; padding: 0 6px; border-radius: 8px; background: #ff3b30; color: #fff; font-size: 11px; }
#clipsmodal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0,0,0,.75); padding: 16px; }
#clipsmodal.hidden { display: none; }
#clipsmodal .box { background: #111418; border: 2px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px; text-align: center; width: min(920px, 100%); max-height: 92vh; display: flex; flex-direction: column; gap: 10px; }
#clipsmodal .ct { font: 400 26px var(--display); letter-spacing: 2px; color: #fff; }
#clipsmodal .ct small { font: 600 12px var(--ui); opacity: .6; letter-spacing: 0; margin-left: 8px; }
#clipsmodal .ch { font: 600 11.5px var(--ui); opacity: .65; }
#clipsmodal .row { display: flex; gap: 8px; justify-content: center; }
#clipsmodal .cbtn { padding: 9px 14px; font: 800 13px var(--ui); letter-spacing: 1px; color: #fff; background: rgba(255,255,255,.12); border: 0; border-radius: 10px; cursor: pointer; }
#clipsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; overflow-y: auto; padding: 2px; min-height: 120px; }
#clipsgrid .clip { position: relative; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #000 center / cover no-repeat; border: 2px solid transparent; cursor: pointer; padding: 0; }
#clipsgrid .clip:hover, #clipsgrid .clip:focus-visible { border-color: var(--yellow); outline: none; }
#clipsgrid .clip .w { position: absolute; top: 6px; left: 0; right: 0; font: 900 15px Impact, "Arial Black", sans-serif; color: #ffd60a; text-shadow: 0 2px 3px #000; }
#clipsgrid .clip .m { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 4px 5px; font: 700 10.5px var(--ui); color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
#clipsgrid .clip .pl { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: rgba(255,255,255,.85); text-shadow: 0 2px 6px #000; }
#clipsgrid .empty { grid-column: 1 / -1; align-self: center; font: 600 14px var(--ui); color: rgba(255,255,255,.7); padding: 30px 0; }

/* the tutorial coach (client/game/coach.js) and one-time tips */
#coach { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 55; width: min(440px, calc(100vw - 32px));
  background: rgba(12, 16, 24, 0.9); border: 2px solid rgba(255, 214, 10, 0.55); border-radius: 14px; padding: 10px 14px 12px;
  color: #fff; font: 600 14px/1.4 var(--ui, system-ui), sans-serif; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); transition: opacity .25s, border-color .2s; }
#coach.hidden, #tipcard.hidden { display: none; }
/* a menu panel open (the marketplace, upgrades, skills, the inventory, the keys...): the cards get out of its way */
body:has(.panel:not(.hidden)) #coach, body:has(.panel:not(.hidden)) #tipcard { display: none; }
#coach.dim { opacity: 0.35; }
#coach.ok { border-color: #2ee07f; }
#coach .ch { display: flex; justify-content: space-between; align-items: center; font: 800 11px var(--ui, system-ui); letter-spacing: 1.5px; color: #ffd60a; }
#coach .ch b { color: rgba(255, 255, 255, 0.6); margin-left: 6px; }
#coach-skip { background: none; border: 0; color: rgba(255, 255, 255, 0.55); font-size: 16px; cursor: pointer; padding: 2px 4px; pointer-events: auto; }
#coach-t { font: 400 24px var(--display, Impact), sans-serif; letter-spacing: 1px; margin: 2px 0; }
#coach.ok #coach-t::after { content: ' ✓'; color: #2ee07f; }
#coach-x kbd, #tipcard kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; margin: 0 1px; border-radius: 6px; background: #ffd60a; color: #000; font: 800 12px var(--ui, system-ui); text-align: center; }
#coach .cb { height: 4px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; margin-top: 8px; overflow: hidden; }
#coach .cb i { display: block; height: 100%; background: #ffd60a; transition: width .4s; }
#tipcard { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 55; width: min(460px, calc(100vw - 32px)); background: rgba(12, 16, 24, 0.9);
  border: 2px solid rgba(126, 232, 255, 0.6); border-radius: 14px; padding: 10px 14px; color: #fff; font: 600 14px/1.45 var(--ui, system-ui), sans-serif; pointer-events: none; }
#tipcard::before { content: '💡 '; }
@media (max-width: 700px) { #coach, #tipcard { top: 56px; font-size: 13px; } #coach-t { font-size: 20px; } }

/* ---------- the start menu, wide: on a laptop / desktop (and a phone on its side) the logo, your name and PLAY sit on
   the left and the match settings in a card on the right, with controls & tips under both, so it uses the width of
   the screen instead of one tall column. Narrow windows keep the single column. ---------- */
.side-h { display: none; }
@media (min-width: 760px) {
  /* (centred with auto margins: when it's taller than the window, e.g. controls & tips open, it scrolls from the top
     instead of being cut off; the top strip stays clear of the language picker and the mute button) */
  #menu { display: flex; overflow-y: auto; }
  .menu-inner { width: min(1240px, 94vw); margin: auto; padding: 62px 0 28px; }
  .menu-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 540px); gap: 20px clamp(28px, 4vw, 64px); align-items: center; text-align: left; }
  .menu-main .logo { font-size: clamp(90px, 10.5vw, 170px); transform-origin: 0 100%; }
  .menu-main .tagline { margin: 12px 0 24px; max-width: 560px; }
  .menu-main .join { justify-content: flex-start; }
  .menu-main #name { flex: 1; min-width: 0; max-width: 360px; }
  .menu-main #roomrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: flex-start; }
  .menu-main #roomrow button { margin: 0; }
  .menu-main #phone { margin-top: 16px; }
  .menu-main #status { margin: 10px 0 0; }
  .menu-side { padding: 16px 20px 18px; background: rgba(8, 10, 16, .62); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .side-h { display: block; margin-bottom: 12px; font: 800 12px var(--ui); letter-spacing: 3px; opacity: .7; }
  .menu-side #roombanner { width: auto; margin: 0 0 12px; }
  .menu-side #setup { grid-template-columns: 1fr; gap: 14px; width: auto; margin: 0; }
  .menu-side #setup .dd { min-height: 0; }
  #howto { width: auto; margin-top: 18px; text-align: left; }
  #howto[open] .controls, #howto[open] .tips { text-align: left; }
}
/* a short laptop window: everything a size smaller so it fits without scrolling */
@media (min-width: 760px) and (max-height: 760px) {
  .menu-inner { padding: 58px 0 16px; }
  .menu-main .logo { font-size: clamp(76px, 8.5vw, 130px); }
  .menu-main .tagline { margin: 8px 0 16px; font-size: 13.5px; }
  .menu-side { padding: 12px 16px 14px; }
  .side-h { margin-bottom: 8px; }
  .menu-side #setup { gap: 10px; }
  .menu-side #diffpick button { padding: 6px 0; font-size: 19px; }
  .menu-side #livespick button { padding: 4px 0; font-size: 17px; }
  #howto { margin-top: 12px; }
}
/* a phone on its side: two columns too, tighter still */
@media (min-width: 760px) and (max-height: 520px) {
  body.touch .menu-cols { gap: 10px 22px; }
  body.touch .menu-main .logo { font-size: clamp(40px, 7vw, 64px); }
  body.touch .menu-inner { padding: 46px 0 6px; } /* (clear of the language picker in the corner) */
  body.touch .menu-side { padding: 8px 12px 10px; border-radius: 14px; }
  body.touch .side-h { display: none; }
  body.touch .menu-side #setup { gap: 6px; }
}

/* ---------- police (client/police/): the wanted stars, the light bars' glow ---------- */
#wanted { border-color: rgba(90, 168, 255, .6); gap: 7px; }
#wanted em { color: #9cc8ff; opacity: 1; letter-spacing: 1.5px; }
#wanted .stars { display: flex; gap: 1px; font-size: 18px; line-height: 1; }
#wanted .stars i { font-style: normal; color: rgba(255, 255, 255, .2); text-shadow: none; }
#wanted .stars i.on { color: #ffd60a; text-shadow: 0 0 6px rgba(255, 214, 10, .7); }
#wanted.search .stars i.on { color: #aab2bf; text-shadow: 0 0 5px rgba(200, 210, 225, .35); animation: wsearch 1.6s ease-in-out infinite; }
#wanted .eye { display: none; font-weight: normal; font-size: 14px; line-height: 1; filter: drop-shadow(0 0 4px rgba(255, 90, 90, .8)); }
#wanted.seen .eye { display: inline; animation: wblink .5s steps(2, jump-none) 3; }
@keyframes wsearch { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
#wanted.up { animation: pop .35s ease-out; }
@keyframes wblink { from { opacity: 1; } to { opacity: .25; } }
#copfx::before, #copfx::after { content: ''; position: absolute; top: 0; bottom: 0; width: 22%; }
#copfx::before { left: 0; background: linear-gradient(to right, rgba(255, 30, 40, .42), transparent); }
#copfx::after { right: 0; background: linear-gradient(to left, rgba(40, 90, 255, .42), transparent); }
#copfx.on { opacity: 1; transition: opacity .4s; }
#copfx.on::before { animation: copflash .5s steps(2, jump-none) infinite; }
#copfx.on::after { animation: copflash .5s steps(2, jump-none) infinite reverse; }
@keyframes copflash { from { opacity: 1; } to { opacity: .1; } }
body.touch #wanted { gap: 4px; }
body.touch #wanted em { font-size: 10px; }
body.touch #wanted .stars { font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  #wanted.search .stars i.on, #wanted.up, #wanted.seen .eye { animation: none; }
  #wanted.search .stars i.on { opacity: .55; }
  #copfx.on { opacity: .45; }
  #copfx.on::before, #copfx.on::after { animation: none; }
}

/* ---------- proximity voice chat (client/voice/) ---------- */
#vcpick { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font: 600 13px var(--ui); color: #cfd6e0; }
#vcpick select, #panel-voice select { padding: 4px 8px; font: 600 13px var(--ui); color: #fff; background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 8px; }
#vcpick option, #panel-voice option { background: #1a1d24; color: #fff; }
#roommodal .rl.vc-room { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
#roommodal .rl.vc-room input { width: auto; }
#pause-voice.on { border-color: #2ee07f; color: #9ff5c4; }
#panel-voice { z-index: 66; width: min(560px, 94vw); }
#panel-voice .vcb label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0; font: 600 13px var(--ui); }
#panel-voice .vcb input[type=range] { width: 50%; accent-color: var(--yellow); }
#panel-voice .vcn { margin: 4px 0 10px; font: 500 12px/1.4 var(--ui); color: rgba(255,255,255,.6); }
#vc-status { margin: 8px 0; font: 600 13px/1.4 var(--ui); color: #9ff5c4; }
#vc-meter { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
#vc-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2ee07f, #ffd60a); transition: width .06s; }
#panel-voice .vch { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font: 800 11px var(--ui); letter-spacing: 2px; color: #cfd6e0; }
#panel-voice .vch label { margin: 0; letter-spacing: 0; }
#vc-list .vcr { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.07); font: 600 13px var(--ui); }
#vc-list .vcr span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vc-list .vcr em { font-style: normal; color: rgba(255,255,255,.55); font-size: 12px; }
#vc-list .vcr.talk span { color: #9ff5c4; }
#vc-list button.mini { padding: 3px 10px; font: 700 12px var(--ui); }
#vc-list button.mini.on { background: rgba(255,80,80,.25); border-color: #ff6b5a; }
#vc-me { position: absolute; left: calc(14px + var(--sl, 0px)); top: calc(92px + var(--st, 0px)); padding: 5px 10px; font: 700 12px var(--ui); color: rgba(255,255,255,.75); background: var(--panel, rgba(10,12,18,.6)); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; }
#vc-me.talking { color: #0b1a10; background: #2ee07f; border-color: #2ee07f; box-shadow: 0 0 14px rgba(46,224,127,.7); }
#vc-me.listen { color: #ffd60a; }
.tag.talk .n::before { content: '🔊'; margin-right: 4px; display: inline-block; animation: vcpulse .5s infinite alternate; }
@keyframes vcpulse { from { transform: scale(1); } to { transform: scale(1.25); } }
#t-voice { left: calc(332px + var(--sl)); }
#t-voice.live { background: rgba(46,224,127,.6); border-color: #2ee07f; }

/* the privacy note under the menu (the session log: server/sessions/, landing privacy.html#game) */
#privnote { margin-top: 8px; font-size: 11px; opacity: 0.6; line-height: 1.35; }
#privnote a { color: inherit; }