:root {
  --acc: #22b4ff; --acc2: #ffffff; --ink: #0a0c16; --glass: rgba(10, 13, 24, 0.72);
  --disp: 'Fira Sans Extra Condensed', Impact, 'Arial Narrow', sans-serif;
  --body: 'Fira Sans Condensed', -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #05060c; color: #fff; overflow: hidden; font-family: var(--body); user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#veil { position: fixed; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(6, 8, 18, 0.25), rgba(4, 5, 12, 0.82)); opacity: 0; transition: opacity 0.45s; pointer-events: none; }
#veil.on { opacity: 1; }
#veil.solid { background: #05060c; opacity: 1; }
#err { position: fixed; left: 8px; bottom: 8px; right: 8px; font: 12px/1.4 monospace; color: #ff8a8a; white-space: pre-wrap; pointer-events: none; z-index: 99; }

.screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); }
.screen.on { display: flex; animation: scrIn 0.32s cubic-bezier(0.2, 0.9, 0.2, 1); }
.screen.dim { background: rgba(4, 5, 12, 0.6); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
@keyframes scrIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- λογότυπο */
.logo { font: italic 900 clamp(56px, 11vw, 150px)/0.84 var(--disp); letter-spacing: -0.01em; text-align: center; transform: skewX(-6deg); filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 40px color-mix(in srgb, var(--acc) 55%, transparent)); }
.logo span { display: block; }
.logo .l1 { color: #fff; -webkit-text-stroke: 2px rgba(0, 0, 0, 0.35); }
.logo .l2 { background: linear-gradient(180deg, #fff38a 0%, #ffb21a 45%, #ff4a1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-left: 0.5em; }
.logo.big { font-size: clamp(64px, min(13vw, 21vh), 200px); }
.tagline { font: italic 800 clamp(15px, 2vw, 26px)/1 var(--disp); letter-spacing: 0.16em; margin: 20px 0 24px; color: var(--acc2); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.titleWrap { display: flex; flex-direction: column; align-items: center; padding: 26px 70px 30px; background: radial-gradient(closest-side, rgba(4, 5, 12, 0.5), rgba(4, 5, 12, 0)); }
.foot { position: absolute; bottom: 10px; font-size: 12px; opacity: 0.55; letter-spacing: 0.04em; text-shadow: 0 1px 2px #000; }

/* ---------- κουμπιά */
.btn { font: italic 900 clamp(20px, 2.5vw, 32px)/1 var(--disp); letter-spacing: 0.04em; color: #fff; background: linear-gradient(180deg, rgba(34, 40, 66, 0.92), rgba(14, 17, 32, 0.92)); border: 0; padding: 0.5em 1.5em 0.46em; transform: skewX(-9deg); cursor: pointer; position: relative; outline: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14), 0 6px 0 rgba(0, 0, 0, 0.45); transition: transform 0.12s, box-shadow 0.12s, background 0.12s; min-width: 9em; }
.btn em { font-style: italic; font-weight: 800; color: var(--acc); margin-left: 0.4em; }
.btn:hover, .btn:focus-visible { transform: skewX(-9deg) translateY(-3px) scale(1.04); box-shadow: inset 0 0 0 3px var(--acc), 0 9px 0 rgba(0, 0, 0, 0.45), 0 0 34px color-mix(in srgb, var(--acc) 60%, transparent); }
.btn:active { transform: skewX(-9deg) translateY(2px); }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 82%, #fff), var(--acc) 55%, color-mix(in srgb, var(--acc) 62%, #000)); color: #06101e; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), 0 6px 0 rgba(0, 0, 0, 0.45), 0 0 34px color-mix(in srgb, var(--acc) 45%, transparent); }
.btn.small { font-size: 18px; min-width: 0; }
.menu { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.menu .btn.primary { font-size: clamp(30px, 3.8vw, 52px); }

/* ---------- κεφαλίδα οθονών */
.top { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: max(16px, env(safe-area-inset-top)) 26px 12px; background: linear-gradient(180deg, rgba(4, 5, 12, 0.85), transparent); }
.top h1 { font: italic 900 clamp(26px, 3.6vw, 48px)/1 var(--disp); margin: 0; letter-spacing: 0.05em; transform: skewX(-6deg); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
.top .stat { justify-self: end; font: italic 900 24px var(--disp); color: #ffd23a; }
.top .stat .sep { opacity: 0.4; margin: 0 6px; }
.back { justify-self: start; font: italic 900 20px var(--disp); color: #fff; background: rgba(255, 255, 255, 0.08); border: 0; padding: 8px 18px; transform: skewX(-9deg); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16); outline: none; }
.back:hover, .back:focus-visible { box-shadow: inset 0 0 0 2px var(--acc); color: var(--acc); }

/* ---------- κόσμοι */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: min(1500px, 100%); margin-top: 58px; }
.wcard { position: relative; border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.1); transition: transform 0.16s, box-shadow 0.16s; aspect-ratio: 16 / 11.2; display: flex; flex-direction: column; justify-content: flex-end; }
.wcard:hover, .wcard:focus-within { transform: translateY(-5px) scale(1.025); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 3px var(--wc), 0 0 40px color-mix(in srgb, var(--wc) 45%, transparent); z-index: 2; }
.wcard canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wcard .shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(4, 5, 12, 0.88) 78%); }
.wcard .num { position: absolute; top: 8px; left: 12px; font: italic 900 22px var(--disp); opacity: 0.85; text-shadow: 0 2px 4px #000; }
.wcard .ws { position: absolute; top: 8px; right: 12px; font: italic 900 18px var(--disp); color: #ffd23a; text-shadow: 0 2px 4px #000; }
.wcard .info { position: relative; padding: 0 12px 10px; }
.wcard h2 { font: italic 900 clamp(22px, 2.3vw, 34px)/0.95 var(--disp); margin: 0; letter-spacing: 0.03em; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55); }
.wcard p { margin: 2px 0 8px; font-size: 13px; opacity: 0.85; }
.stages { display: flex; gap: 7px; }
.stg { flex: 1; font: italic 900 17px var(--disp); color: #fff; background: rgba(8, 10, 20, 0.72); border: 0; padding: 6px 4px 5px; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16); border-radius: 7px; outline: none; display: flex; flex-direction: column; align-items: center; gap: 1px; transition: background 0.12s, transform 0.12s; }
.stg .sn { display: flex; align-items: center; gap: 6px; }
.stg .kd { font: 900 10px var(--body); font-style: normal; letter-spacing: 0.04em; padding: 2px 5px 1px; border-radius: 5px; background: #ffd21a; color: #06101e; }
.stg .kd.k2D { background: #4ad8ff; }
.stg small { font: 700 10px var(--body); letter-spacing: 0.05em; opacity: 0.75; }
.stg .st { font-size: 12px; color: #ffd23a; letter-spacing: 1px; }
.stg .st i { color: rgba(255, 255, 255, 0.25); font-style: normal; }
.stg:hover, .stg:focus-visible { background: var(--wc); color: #06101e; transform: translateY(-2px); box-shadow: inset 0 0 0 2px #fff; }
.stg:hover .st, .stg:focus-visible .st { color: #06101e; }

/* ---------- οδηγοί */
.drvWrap { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.15fr); gap: 26px; width: min(1400px, 100%); margin-top: 56px; align-items: center; }
.drvGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dcard { position: relative; aspect-ratio: 1.45; border: 0; border-radius: 10px; background: linear-gradient(180deg, rgba(40, 46, 74, 0.85), rgba(12, 14, 26, 0.9)); cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); outline: none; transition: transform 0.12s; padding: 0; }
.dcard canvas { width: 100%; height: 100%; display: block; }
.dcard span { position: absolute; left: 0; right: 0; bottom: 3px; font: italic 900 14px var(--disp); letter-spacing: 0.05em; color: #fff; text-shadow: 0 2px 3px #000; }
.dcard:hover, .dcard:focus-visible { transform: scale(1.06); z-index: 2; box-shadow: inset 0 0 0 3px #fff; }
.dcard.sel { box-shadow: inset 0 0 0 3px var(--dc), 0 0 26px color-mix(in srgb, var(--dc) 60%, transparent); }
.drvView { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--glass); border-radius: 18px; padding: 14px 22px 22px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#drvCanvas { width: 100%; max-width: 560px; height: auto; }
.drvName { font: italic 900 clamp(34px, 4vw, 58px)/0.9 var(--disp); letter-spacing: 0.03em; transform: skewX(-6deg); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
.bars { width: 100%; max-width: 420px; display: grid; gap: 7px; margin: 6px 0 12px; }
.bars label { display: grid; grid-template-columns: 130px 1fr; align-items: center; font: italic 800 16px var(--disp); letter-spacing: 0.06em; }
.bars i { height: 11px; background: rgba(255, 255, 255, 0.12); transform: skewX(-20deg); display: block; }
.bars b { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), #fff); transition: width 0.3s; }

/* ---------- ρυθμίσεις / οδηγίες */
.panel { width: min(760px, 100%); background: var(--glass); border-radius: 18px; padding: 16px 26px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin-top: 40px; }
.row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font: italic 800 22px var(--disp); letter-spacing: 0.05em; }
.row:last-child { border: 0; }
.seg { display: flex; gap: 6px; }
.seg button, .tog { font: italic 900 17px var(--disp); color: #fff; background: rgba(255, 255, 255, 0.08); border: 0; padding: 7px 14px; cursor: pointer; transform: skewX(-9deg); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14); outline: none; min-width: 74px; }
.seg button.on, .tog.on { background: var(--acc); color: #06101e; box-shadow: inset 0 0 0 2px #fff; }
.seg button:focus-visible, .tog:focus-visible { box-shadow: inset 0 0 0 2px #fff, 0 0 18px var(--acc); }
.panel.help { width: min(1080px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; font-size: 17px; line-height: 1.5; }
.help h3 { font: italic 900 26px var(--disp); margin: 4px 0 8px; color: var(--acc); letter-spacing: 0.06em; }
.help p { margin: 7px 0; }
.help .dim { opacity: 0.65; font-size: 15px; }
kbd { font: 700 13px var(--body); background: #fff; color: #10131f; border-radius: 5px; padding: 2px 7px; box-shadow: 0 2px 0 #9aa0b4; margin-right: 2px; }

/* ---------- HUD */
.hudLayer { pointer-events: none; padding: 0; display: none; }
.hudLayer.on { display: block; animation: none; }
.hTop { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 18px; right: 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: start; }
.pos { font: italic 900 96px/0.8 var(--disp); transform: skewX(-8deg); text-shadow: 0 6px 0 rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.4); display: flex; align-items: flex-start; }
.pos b { color: #fff; padding-right: 6px; }
.pos.p1 b { color: #ffe04a; text-shadow: 0 6px 0 rgba(0, 0, 0, 0.5), 0 0 34px #ffb21a; }
.pos sup { font-size: 34px; margin-top: 6px; }
.pos span { font-size: 28px; align-self: flex-end; opacity: 0.8; margin-left: 4px; }
.pos.bump { animation: bump 0.4s; }
@keyframes bump { 30% { transform: skewX(-8deg) scale(1.3); } }
.prog { padding-top: 12px; }
.track { position: relative; height: 12px; background: rgba(6, 8, 16, 0.72); border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2); }
.track .flag { position: absolute; right: -4px; top: -9px; width: 14px; height: 30px; background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 7px 7px; border-radius: 2px; }
.track .dot { position: absolute; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.75); transition: left 0.2s linear; }
.track .dot.me { width: 24px; height: 24px; margin: -12px 0 0 -12px; box-shadow: 0 0 0 3px #fff, 0 0 14px #fff; z-index: 2; }
.track .fk { position: absolute; top: -5px; width: 3px; height: 5px; background: var(--acc); opacity: 0.9; }
.wname { margin-top: 7px; font: italic 800 15px var(--disp); letter-spacing: 0.14em; opacity: 0.82; text-shadow: 0 1px 3px #000; text-align: center; }
.hTop .right { text-align: right; }
.time { font: italic 900 40px/1 var(--disp); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); font-variant-numeric: tabular-nums; }
.cnt { font: italic 900 26px var(--disp); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); margin-top: 4px; }
.cnt .coin { color: #ffcf2a; text-shadow: 0 0 10px #ffb21a; }
.cnt .gem { color: #5af2ff; text-shadow: 0 0 10px #3ad8ff; margin-left: 10px; }
.hBL { position: absolute; left: 20px; bottom: max(18px, env(safe-area-inset-bottom)); }
.speed { font: italic 900 78px/0.8 var(--disp); transform: skewX(-8deg); text-shadow: 0 5px 0 rgba(0, 0, 0, 0.5); }
.speed span { font-size: 22px; margin-left: 6px; opacity: 0.8; }
.nitro { position: relative; width: 250px; height: 22px; margin-top: 10px; background: rgba(6, 8, 16, 0.72); transform: skewX(-20deg); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22); overflow: hidden; }
.nitro i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ff6a14, #ffd23a 60%, #fff); }
.nitro em { position: absolute; inset: 0; display: grid; place-items: center; font: italic 900 14px var(--disp); letter-spacing: 0.24em; color: #fff; text-shadow: 0 1px 2px #000; transform: skewX(20deg); }
.nitro.burn { box-shadow: inset 0 0 0 2px #fff, 0 0 26px #ff8a1a; }
.nitro.burn i { background: linear-gradient(90deg, #3ad8ff, #fff); }
.nitro::after { content: ''; position: absolute; left: 18%; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.5); }
.nitro.dry i { background: linear-gradient(90deg, #5b6478, #9aa6c0); }
.nitro.dry em { color: #c9d2e6; }
.hBR { position: absolute; right: 22px; bottom: max(18px, env(safe-area-inset-bottom)); }
.item { width: 128px; height: 128px; border-radius: 22px; background: rgba(6, 8, 16, 0.72); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.22); display: grid; place-items: center; position: relative; transform: skewX(-5deg); }
.item .ico { font-size: 66px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.item em { position: absolute; bottom: 7px; left: 0; right: 0; text-align: center; font: italic 900 15px var(--disp); letter-spacing: 0.08em; opacity: 0.55; }
.item kbd { position: absolute; top: -8px; right: -8px; }
.item.has { box-shadow: inset 0 0 0 3px var(--ic, #fff), 0 0 34px var(--ic, #fff); animation: itemPulse 0.9s infinite; }
.item.has em { opacity: 1; color: var(--ic, #fff); }
.item.roll .ico { animation: rollIco 0.09s infinite; }
@keyframes itemPulse { 50% { transform: skewX(-5deg) scale(1.06); } }
@keyframes rollIco { 50% { transform: translateY(-7px) scale(0.9); opacity: 0.7; } }
.chips { position: absolute; left: 20px; bottom: 150px; display: flex; flex-direction: column; gap: 6px; }
.chip { font: italic 900 17px var(--disp); letter-spacing: 0.06em; background: rgba(6, 8, 16, 0.78); padding: 4px 12px 3px; transform: skewX(-12deg); box-shadow: inset 0 0 0 2px var(--cc); color: var(--cc); position: relative; overflow: hidden; min-width: 150px; }
.chip i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--cc); }
.warn { position: absolute; right: 26px; top: 40%; font: italic 900 26px var(--disp); letter-spacing: 0.04em; background: #ffd21a; color: #16161a; padding: 6px 16px 4px; transform: skewX(-10deg); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.15s; }
.warn.on { opacity: 1; animation: warnB 0.5s infinite; }
@keyframes warnB { 50% { background: #ff5a2a; color: #fff; } }
.fork { position: absolute; left: 50%; top: 96px; transform: translateX(-50%) skewX(-8deg); font: italic 900 24px var(--disp); display: flex; gap: 8px; opacity: 0; transition: opacity 0.15s; white-space: nowrap; }
.fork span { background: rgba(8, 12, 28, 0.82); padding: 6px 16px 4px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); opacity: 0.75; }
.fork span.sel { background: rgba(12, 63, 168, 0.95); box-shadow: inset 0 0 0 3px #fff, 0 5px 0 rgba(0, 0, 0, 0.5); opacity: 1; }
.fork b { color: #ffd21a; }
.fork kbd { font-size: 16px; transform: skewX(8deg); display: inline-block; }
.fork.on { opacity: 1; }
.pops { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; }
.pop { font: italic 900 46px/1 var(--disp); letter-spacing: 0.03em; transform: skewX(-8deg); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.6), 0 0 26px currentColor; animation: popUp 1.25s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; white-space: nowrap; }
.pop.good { color: #8affb0; } .pop.bad { color: #ff5a4a; } .pop.gold { color: #ffe04a; } .pop.boost { color: #5af2ff; } .pop.item { color: #fff; }
@keyframes popUp { 0% { opacity: 0; transform: skewX(-8deg) scale(0.4); } 14% { opacity: 1; transform: skewX(-8deg) scale(1.18); } 26% { transform: skewX(-8deg) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: skewX(-8deg) translateY(-34px); } }
.count { position: absolute; inset: 0; display: grid; place-items: center; font: italic 900 min(46vh, 380px)/1 var(--disp); color: #fff; text-shadow: 0 14px 0 rgba(0, 0, 0, 0.5), 0 0 80px var(--acc); pointer-events: none; }
.count span { animation: cnt 0.85s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; display: block; transform: skewX(-8deg); }
.count span.go { color: #6bff8a; text-shadow: 0 14px 0 rgba(0, 0, 0, 0.5), 0 0 90px #3aff6a; font-size: 0.7em; }
@keyframes cnt { 0% { opacity: 0; transform: skewX(-8deg) scale(2.6); } 22% { opacity: 1; transform: skewX(-8deg) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: skewX(-8deg) scale(0.7); } }
.banner { position: absolute; left: -5%; right: -5%; top: 34%; text-align: center; font: italic 900 clamp(60px, 11vw, 170px)/1 var(--disp); padding: 10px 0 2px; transform: skewY(-3deg) scaleX(0); background: linear-gradient(90deg, transparent, rgba(6, 8, 16, 0.85) 18%, rgba(6, 8, 16, 0.85) 82%, transparent); text-shadow: 0 8px 0 rgba(0, 0, 0, 0.5); opacity: 0; }
.banner.on { animation: ban var(--bd, 2.2s) cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
.banner.gold { color: #ffe04a; } .banner.bad { color: #ff6a4a; font-size: clamp(34px, 5vw, 76px); top: 26%; }
@keyframes ban { 0% { opacity: 0; transform: skewY(-3deg) scaleX(0); } 12% { opacity: 1; transform: skewY(-3deg) scaleX(1); } 85% { opacity: 1; transform: skewY(-3deg) scaleX(1); } 100% { opacity: 0; transform: skewY(-3deg) scaleX(1.1); } }
.intro { position: absolute; left: 5%; bottom: 14%; display: flex; flex-direction: column; opacity: 0; transform: skewX(-7deg) translateX(-40px); transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1); }
.intro.on { opacity: 1; transform: skewX(-7deg); }
.intro small { font: italic 900 30px var(--disp); letter-spacing: 0.2em; color: var(--acc); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.6); }
.intro b { font: italic 900 clamp(70px, 11vw, 170px)/0.85 var(--disp); text-shadow: 0 8px 0 rgba(0, 0, 0, 0.5), 0 0 60px color-mix(in srgb, var(--acc) 60%, transparent); }
.intro span { font: italic 800 26px var(--disp); letter-spacing: 0.08em; margin-top: 8px; text-shadow: 0 2px 4px #000; }
.cutin { position: absolute; left: -10%; top: 22%; width: 74%; height: 44%; transform: skewX(-14deg) translateX(-110%); background: linear-gradient(90deg, rgba(255, 230, 80, 0.96), rgba(255, 110, 20, 0.96) 60%, rgba(255, 60, 160, 0.9)); box-shadow: 0 0 0 6px #fff, 0 0 80px #ffb21a; overflow: hidden; opacity: 0; }
.cutin::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255, 255, 255, 0.55) 34px 38px, transparent 38px 90px); animation: lines 0.25s linear infinite; }
@keyframes lines { to { transform: translateX(-90px); } }
.cutin canvas { position: absolute; right: 10%; bottom: -2%; height: 104%; transform: skewX(14deg); filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.9)); }
.cutin .ctxt { position: absolute; left: 16%; top: 14%; transform: skewX(14deg) skewX(-8deg); display: flex; flex-direction: column; }
.cutin b { font: italic 900 clamp(60px, 10vw, 150px)/0.85 var(--disp); color: #fff; text-shadow: 0 7px 0 rgba(0, 0, 0, 0.45); }
.cutin span { font: italic 900 clamp(24px, 3.4vw, 50px) var(--disp); color: #10131f; letter-spacing: 0.06em; }
.cutin.on { animation: cut 1.25s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
@keyframes cut { 0% { opacity: 1; transform: skewX(-14deg) translateX(-110%); } 16% { opacity: 1; transform: skewX(-14deg) translateX(0); } 80% { opacity: 1; transform: skewX(-14deg) translateX(3%); } 100% { opacity: 0; transform: skewX(-14deg) translateX(140%); } }
.pauseBtn { position: absolute; right: 18px; top: 108px; pointer-events: auto; font: 900 18px var(--body); width: 42px; height: 42px; border-radius: 50%; border: 0; color: #fff; background: rgba(6, 8, 16, 0.6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); cursor: pointer; outline: none; }
.camBtn { top: 160px; font-size: 19px; }
.camBtn em { position: absolute; left: -10px; top: -6px; font: italic 900 12px var(--disp); background: var(--acc); color: #06101e; padding: 1px 5px; border-radius: 6px; }
.track .z3 { position: absolute; top: 2px; bottom: 2px; background: color-mix(in srgb, var(--acc) 70%, transparent); border-radius: 4px; }
.viewp { position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%) skewX(-8deg); display: flex; align-items: center; gap: 10px; background: rgba(6, 8, 18, 0.86); padding: 8px 18px 6px 12px; box-shadow: inset 0 0 0 3px var(--acc), 0 6px 0 rgba(0, 0, 0, 0.5); font: italic 800 22px var(--disp); white-space: nowrap; opacity: 0; pointer-events: none; }
.viewp b { font: italic 900 46px/1 var(--disp); color: var(--acc); margin-right: 6px; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); }
.viewp span { display: flex; align-items: center; gap: 4px; }
.viewp kbd { transform: skewX(8deg); font-size: 15px; }
.viewp.on { animation: viewp 3.2s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
@keyframes viewp { 0% { opacity: 0; transform: translateX(-50%) skewX(-8deg) scale(0.6); } 8% { opacity: 1; transform: translateX(-50%) skewX(-8deg) scale(1.08); } 14% { transform: translateX(-50%) skewX(-8deg) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
.camBtn kbd { position: absolute; right: -8px; bottom: -8px; font-size: 10px; padding: 1px 5px; }
body.touch .camBtn kbd { display: none; }
.touch { display: none; }
body.touch .touch { display: block; }
body.touch .item kbd { display: none; }
.touch button { pointer-events: auto; position: absolute; border: 0; border-radius: 50%; color: #fff; font: italic 900 20px var(--disp); background: rgba(10, 13, 24, 0.5); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.4); width: 92px; height: 92px; }
.touch button.on { background: var(--acc); color: #06101e; }
.touch .tl button { width: 78px; height: 78px; }
.touch .tl button:nth-child(1) { left: 16px; bottom: 216px; } .touch .tl button:nth-child(2) { left: 176px; bottom: 216px; }
.touch .tl button:nth-child(3) { left: 96px; bottom: 296px; } .touch .tl button:nth-child(4) { left: 96px; bottom: 136px; }
.touch .tJump { right: 22px; bottom: 170px; width: 122px; height: 122px; font-size: 28px; }
.touch .tNitro { right: 156px; bottom: 150px; } .touch .tItem { right: 60px; bottom: 304px; width: 78px; height: 78px; font-size: 16px; }

/* ---------- παύση / αποτελέσματα / φόρτωση */
.box { background: var(--glass); border-radius: 20px; padding: 26px 40px 34px; display: flex; flex-direction: column; gap: 14px; align-items: stretch; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), 0 20px 60px rgba(0, 0, 0, 0.6); }
.box h1 { font: italic 900 64px/1 var(--disp); margin: 0 0 8px; text-align: center; transform: skewX(-6deg); }
.resBox { width: min(1040px, 100%); background: var(--glass); border-radius: 22px; padding: 22px 30px 26px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), 0 20px 60px rgba(0, 0, 0, 0.6); }
.resHead { display: flex; align-items: center; gap: 24px; border-bottom: 2px solid rgba(255, 255, 255, 0.12); padding-bottom: 12px; }
.rPos { font: italic 900 120px/0.8 var(--disp); transform: skewX(-8deg); background: linear-gradient(180deg, #fff, #ffd23a 60%, #ff8a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.5)); padding-right: 12px; }
.rPos.lost { background-image: linear-gradient(180deg, #fff, #9aa4c0); }
.rWorld { font: italic 900 30px var(--disp); letter-spacing: 0.08em; }
.stars { font-size: 54px; letter-spacing: 6px; color: rgba(255, 255, 255, 0.16); line-height: 1; }
.stars b { color: #ffd23a; text-shadow: 0 0 24px #ffb21a; display: inline-block; animation: starIn 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
.resBody { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; margin: 14px 0 18px; }
.rStats > div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font: italic 800 19px var(--disp); letter-spacing: 0.08em; }
.rStats b { font: italic 900 30px var(--disp); font-variant-numeric: tabular-nums; }
.rStats .rec { border: 0; color: #6bff8a; font-size: 22px; justify-content: center; min-height: 34px; }
.rList { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.rList li { display: grid; grid-template-columns: 34px 92px 1fr auto; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.06); padding: 2px 12px 2px 8px; font: italic 900 21px var(--disp); transform: skewX(-8deg); }
.rList li.me { background: var(--acc); color: #06101e; }
.rList canvas { width: 92px; height: 42px; transform: skewX(8deg); }
.rList time { font-variant-numeric: tabular-nums; opacity: 0.85; }
.resBtns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.loadBox { text-align: center; width: min(640px, 90%); }
.loadBox small { font: italic 900 24px var(--disp); letter-spacing: 0.24em; color: var(--acc); }
.loadBox h1 { font: italic 900 clamp(60px, 10vw, 130px)/0.9 var(--disp); margin: 4px 0; transform: skewX(-6deg); text-shadow: 0 8px 0 rgba(0, 0, 0, 0.5), 0 0 60px color-mix(in srgb, var(--acc) 50%, transparent); }
.loadBox p { font-size: 20px; opacity: 0.8; margin: 0 0 26px; }
.bar { width: min(460px, 80vw); height: 12px; background: rgba(255, 255, 255, 0.12); transform: skewX(-20deg); margin: 22px auto 10px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), #fff); transition: width 0.25s; }
.bootTxt { font: italic 800 16px var(--disp); letter-spacing: 0.2em; opacity: 0.7; }

@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, 1fr); overflow: auto; max-height: 82vh; } .drvWrap { grid-template-columns: 1fr; } .resBody, .panel.help { grid-template-columns: 1fr; } .pos { font-size: 62px; } .speed { font-size: 52px; } .nitro { width: 170px; } .item { width: 92px; height: 92px; } .item .ico { font-size: 46px; } .time { font-size: 28px; } }
@media (max-height: 560px) { .grid { margin-top: 44px; gap: 8px; } .wcard p { display: none; } .logo.big { font-size: clamp(54px, 22vh, 130px); } .tagline { margin: 8px 0 12px; } .menu { gap: 8px; } }