:root {
  --bg: #0b0d1a; --panel: #10132a; --line: #2a2f55; --line2: #3d4477; --ink: #14121c;
  --red: #ff2a2a; --red2: #c1121f; --yellow: #ffd23f; --cyan: #4fd6ff; --pink: #ff3fa0; --green: #3adf3a; --cream: #f4efe6;
  --px: "Press Start 2P", "Courier New", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--cream); font-family: var(--px); font-size: 11px; line-height: 1.6; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
kbd { background: #1c2040; border: 2px solid var(--line2); padding: 1px 5px; color: #fff; font-size: 9px; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background: repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
body.hd::after { background: repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 4px); }
body.hd #gl { image-rendering: auto; }
.panel { background: rgba(11,13,26,.93); border: 3px solid var(--line); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #1a1e3a; padding: 10px 12px; }
.panel h2 { margin: 0 0 10px; font-size: 14px; color: var(--pink); text-align: center; letter-spacing: .05em; text-shadow: 2px 2px 0 #000; }
.p1 { position: absolute; top: 4px; left: 4px; background: var(--yellow); color: #000; font-size: 8px; padding: 2px 4px; min-width: 14px; text-align: center; }

/* ---------- Menu: 80s arcade cabinet ---------- */
#menu { position: fixed; inset: 0; overflow: auto; background: radial-gradient(ellipse at 50% 0%, rgba(60,20,90,.55), rgba(6,7,16,.9) 60%), rgba(6,7,16,.86); }
#menu::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(transparent 60%, rgba(255,63,160,.10) 60.5%, transparent 61%), repeating-linear-gradient(90deg, rgba(79,214,255,.07) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(79,214,255,.07) 0 1px, transparent 1px 40px); background-size: 100% 100%, 100% 100%, 100% 100%; mask-image: linear-gradient(transparent 55%, #000 100%); -webkit-mask-image: linear-gradient(transparent 55%, #000 100%); }
#menu::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 120px rgba(0,0,0,.85), inset 0 0 30px rgba(0,0,0,.6); background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.45) 100%); }
#menu > * { position: relative; z-index: 2; }
#menu .panel { background: linear-gradient(180deg, rgba(20,14,44,.96), rgba(9,10,26,.96)); border: 3px solid #6a3fa0; box-shadow: 0 0 0 1px #000, 0 0 18px rgba(255,63,160,.25), inset 0 0 0 1px #2c1f4a, inset 0 0 40px rgba(60,30,110,.35); }
#menu .panel h2 { color: #fff; text-shadow: 0 0 6px var(--pink), 0 0 14px var(--pink), 0 0 26px rgba(255,63,160,.7), 2px 2px 0 #000; letter-spacing: .12em; }
#menu .panel h2::before, #menu .panel h2::after { content: "◆"; color: var(--cyan); text-shadow: 0 0 8px var(--cyan); font-size: 9px; margin: 0 10px; vertical-align: middle; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 8px solid transparent; border-image: repeating-linear-gradient(90deg, #ffd23f 0 8px, #2a1a10 8px 16px) 8; animation: marquee 1.2s steps(2) infinite; }
.banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3; background: linear-gradient(90deg, var(--pink), var(--cyan), var(--yellow), var(--pink)); box-shadow: 0 0 14px var(--pink); }
@keyframes marquee { 50% { border-image: repeating-linear-gradient(90deg, #2a1a10 0 8px, #ffd23f 8px 16px) 8; } }
.bannerQuote .q { text-shadow: 0 0 8px var(--pink), 2px 2px 0 #000; }
#langerFace { border-color: var(--cyan); box-shadow: 0 0 12px rgba(79,214,255,.5); }
#menu .card, #menu .trackRow { background: linear-gradient(180deg, #16123a, #0b0d22); border-color: #3b2f6e; box-shadow: inset 0 0 0 1px #000; }
#menu .card:hover, #menu .trackRow:hover { border-color: var(--cyan); box-shadow: 0 0 10px rgba(79,214,255,.35); }
#menu .card.active, #menu .trackRow.active { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), 0 0 18px rgba(255,210,63,.45), inset 0 0 18px rgba(255,210,63,.12); }
#menu .card.active > b, #menu .trackRow.active .info b { text-shadow: 0 0 8px var(--yellow); }
.coinLine span { animation: coin 1s steps(2) infinite; }
@keyframes coin { 50% { opacity: .25; } }
#startBtn { background: radial-gradient(ellipse at 50% 30%, #ff5c5c, #c1121f 60%, #7a0a12); color: #fff; border: 4px solid #ffd23f; border-radius: 14px; box-shadow: 0 0 0 3px #000, 0 6px 0 #5a0810, 0 6px 0 3px #000, 0 0 24px rgba(255,42,42,.55); text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255,255,255,.6); font-size: 18px; padding: 14px 34px; animation: press 1.4s steps(2) infinite; }
#startBtn:hover, #startBtn:active { background: radial-gradient(ellipse at 50% 30%, #ff8a8a, #e0202e 60%, #8a0a14); color: #fff; transform: translateY(3px); box-shadow: 0 0 0 3px #000, 0 3px 0 #5a0810, 0 3px 0 3px #000, 0 0 30px rgba(255,42,42,.8); animation: none; }
@keyframes press { 50% { border-color: #fff; box-shadow: 0 0 0 3px #000, 0 6px 0 #5a0810, 0 6px 0 3px #000, 0 0 40px rgba(255,210,63,.7); } }
#menu .subBtns button { background: linear-gradient(180deg, #1c1642, #0b0d22); color: var(--cyan); border-color: #4a3d8a; text-shadow: 0 0 6px rgba(79,214,255,.6); }
#menu .subBtns button:hover { border-color: var(--yellow); color: var(--yellow); text-shadow: 0 0 8px var(--yellow); }
#menu .menuFooter { border-top: 3px solid #3b2f6e; background: rgba(9,8,24,.8); }
#menu .menuFooter .slogan { color: var(--pink); text-shadow: 0 0 8px var(--pink); }
#menu .menuFooter .tipp { text-shadow: 0 0 8px rgba(255,210,63,.6); }
.menuFooter .keys kbd { background: #1c1642; border-color: #6a3fa0; }
#menu .desc { border-left-color: var(--pink); box-shadow: -4px 0 12px -6px var(--pink); }
#langerQuote { text-shadow: 0 0 6px rgba(255,255,255,.35); }
.hiScore { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; gap: 28px; z-index: 4; font-size: 10px; color: #fff; text-shadow: 2px 2px 0 #000, 0 0 8px rgba(255,255,255,.4); letter-spacing: .06em; white-space: nowrap; }
.hiScore b { color: var(--yellow); font-weight: normal; } .hiScore .hsTop { color: var(--red); } .hiScore .hsTop b { color: var(--yellow); }
.hiScore span:first-child { animation: coin 1s steps(2) infinite; }
@media (max-width: 1100px) { .hiScore { display: none; } }
.pressStart { width: 100%; text-align: center; color: var(--yellow); font-size: 12px; letter-spacing: .12em; text-shadow: 2px 2px 0 #000, 0 0 10px var(--yellow); animation: coin 0.9s steps(2) infinite; }
body.mobile .pressStart { font-size: 8px; }
.menuFooter .copy { width: 100%; text-align: center; color: #8d86b5; font-size: 7px; letter-spacing: .08em; }
.card.active::after { content: ""; position: absolute; left: -3px; right: -3px; top: -3px; bottom: -3px; border: 2px dashed rgba(255,210,63,.8); animation: chase .6s steps(2) infinite; pointer-events: none; }
@keyframes chase { 50% { border-color: rgba(255,255,255,.9); } }
@media (prefers-reduced-motion: reduce) { .banner::before, .coinLine span, #startBtn, .pressStart, .hiScore span, .card.active::after { animation: none; } }
.banner { position: relative; height: 150px; border-bottom: 3px solid var(--line); overflow: hidden; }
#skyline { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#logo { position: absolute; left: 16px; top: 4px; width: 560px; height: 140px; max-width: 60vw; image-rendering: pixelated; }
.bannerQuote { position: absolute; right: 18px; top: 10px; display: flex; align-items: center; gap: 12px; }
.bannerQuote .q { color: var(--pink); font-size: 11px; text-align: right; text-shadow: 2px 2px 0 #000; line-height: 1.8; }
.bannerQuote .q span { display: block; color: var(--yellow); font-size: 9px; }
#langerFace { width: 80px; height: 100px; image-rendering: pixelated; border: 3px solid var(--line2); background: #000; }
.menuGrid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-areas: "drivers tracks" "cars tracks" "cars langer" "start start"; gap: 12px; padding: 12px 16px 6px; max-width: 1500px; margin: 0 auto; }
.drivers { grid-area: drivers; } .tracks { grid-area: tracks; } .cars { grid-area: cars; } .langer { grid-area: langer; } .startRow { grid-area: start; }
@media (max-width: 1000px) { .menuGrid { grid-template-columns: 1fr; grid-template-areas: "drivers" "cars" "tracks" "langer" "start"; } }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#driverCards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
#carCards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } #carCards .card canvas { width: 104px; height: 36px; }
#driverCards .card { padding: 6px 3px 5px; } #driverCards .card small { font-size: 7px; min-height: 30px; }
#driverCards .card > b { min-height: 25px; } #carCards .card > b { min-height: 40px; }
.card { position: relative; background: #0d1024; border: 3px solid var(--line); padding: 8px 6px 6px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.card:hover { border-color: var(--line2); }
.card.active { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), 0 0 14px rgba(255,210,63,.35); }
.card canvas { image-rendering: pixelated; width: 80px; height: 100px; border: 2px solid #000; }
.card.car canvas { width: 128px; height: 44px; }
.card > b { display: block; width: 100%; font-size: 11px; line-height: 1.35; color: #fff; margin-top: 4px; padding: 5px 3px; background: #000; border: 2px solid #3b2f6e; white-space: normal; overflow-wrap: break-word; hyphens: manual; text-shadow: 2px 2px 0 #1a1a2a; }
.card.active > b { border-color: var(--yellow); background: #1a1200; }
.card.active > b { color: var(--yellow); }
.card small { font-size: 8px; color: var(--cyan); line-height: 1.5; min-height: 36px; }
.card .diff { font-style: normal; font-size: 9px; margin-top: 4px; }
.diff.d0 { color: var(--green); } .diff.d1 { color: var(--yellow); } .diff.d2 { color: var(--red); } .diff.d3 { color: var(--pink); }
.stat { display: grid; grid-template-columns: 62px 1fr; align-items: center; width: 100%; font-size: 7px; color: #ddd; text-align: left; }
.stat i { display: flex; gap: 2px; }
.stat i b { width: 10px; height: 8px; background: #2a1a10; border: 1px solid #000; margin: 0; }
.stat i b.on { background: linear-gradient(90deg, #ff7a00, #ff2a2a); } .stat i b.hi { background: var(--green); }
.trackList { display: flex; flex-direction: column; gap: 6px; }
.trackRow { position: relative; display: grid; grid-template-columns: 192px 1fr 118px; gap: 10px; align-items: center; background: #0d1024; border: 3px solid var(--line); padding: 6px 8px 6px 26px; cursor: pointer; min-height: 84px; }
.trackRow:hover { border-color: var(--line2); }
.trackRow.active { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), 0 0 14px rgba(255,210,63,.3); }
.trackRow .p1 { top: 6px; left: 6px; }
.trackRow .thumb { width: 192px; height: 72px; image-rendering: pixelated; border: 2px solid #000; }
.trackRow .info { display: flex; flex-direction: column; gap: 3px; }
.trackRow .info b { color: var(--yellow); font-size: 14px; line-height: 1.3; }
.trackRow.active .info b { color: #fff; }
.trackRow .info .sub { color: #fff; font-size: 9px; }
.trackRow .info .wp { color: var(--cyan); font-size: 8px; line-height: 1.5; }
.trackRow .pips { display: flex; gap: 3px; margin-top: 2px; }
.trackRow .pips b { width: 8px; height: 10px; background: #2a1a10; border: 1px solid #000; }
.trackRow .pips b.on { background: #ff7a00; }
.trackRow .map { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.trackRow .outline { width: 110px; height: 62px; image-rendering: pixelated; }
.trackRow .km { color: var(--cyan); font-size: 9px; }
.trackRow .best { color: var(--yellow); font-size: 8px; }
.desc { color: #ddd; font-size: 9px; line-height: 1.7; margin: 10px 0 0; border-left: 4px solid var(--red2); padding-left: 8px; }
.langerBox { display: flex; gap: 12px; align-items: flex-start; }
#langerFace2 { width: 64px; height: 80px; image-rendering: pixelated; border: 3px solid var(--line2); flex: none; }
#langerQuote { margin: 0; color: #fff; font-size: 10px; line-height: 1.9; }
.startRow { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
#startBtn { letter-spacing: .04em; }
.pxi { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: -4px; margin-right: 7px; }
.coinLine { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--cyan); font-size: 9px; letter-spacing: .15em; text-shadow: 0 0 8px var(--cyan); }
.coinLine canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.startCab { display: flex; align-items: center; gap: 16px; }
.startCab canvas { width: 60px; height: 60px; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(255,63,160,.5)); }
#startBtn::before { content: "▶ "; color: #ffd23f; } #startBtn::after { content: " ◀"; color: #ffd23f; }
body.mobile .startCab canvas { width: 40px; height: 40px; } body.mobile .coinLine { font-size: 7px; }
@keyframes blink { 50% { border-color: #fff; } }
.subBtns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.subBtns button { background: #0d1024; color: var(--cyan); border: 3px solid var(--line2); box-shadow: 3px 3px 0 #000; font-size: 9px; padding: 8px 10px; }
.subBtns button:hover { border-color: var(--cyan); }
#musicTitle { color: #aaa; font-size: 8px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menuFooter { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px 14px; font-size: 8px; color: #bbb; flex-wrap: wrap; }
.menuFooter .slogan { color: var(--cyan); font-size: 9px; letter-spacing: .05em; }
.menuFooter .slogan::before, .menuFooter .slogan::after { content: " ═══ "; color: var(--line2); }

/* ---------- Records modal ---------- */
#records { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 20; }
.modal { background: var(--panel); border: 3px solid var(--line2); box-shadow: 6px 6px 0 #000; padding: 16px 20px; max-width: 760px; width: 94vw; max-height: 90vh; overflow: auto; }
.modal h2 { margin: 0 0 12px; color: var(--yellow); font-size: 13px; text-align: center; }
.recTrack { border-top: 2px solid var(--line); padding: 8px 0; }
.recTrack b { color: var(--pink); font-size: 10px; }
.recTrack ol { margin: 6px 0 0; padding-left: 20px; }
.recTrack li { display: grid; grid-template-columns: 1fr 1fr 90px; font-size: 9px; color: #eee; }
.recTrack li span:last-child { text-align: right; color: var(--yellow); }
.recTrack p { margin: 4px 0 0; font-size: 9px; color: #999; }
#recordsClose { margin-top: 12px; background: var(--red2); color: #fff; border: 3px solid #000; padding: 10px 16px; font-size: 10px; width: 100%; }

/* ---------- Editor ---------- */
#editor { position: fixed; inset: 0; background: rgba(6,7,16,.9); display: flex; flex-direction: column; padding: 14px 18px; gap: 10px; z-index: 15; overflow: auto; }
.edHead { display: flex; justify-content: space-between; align-items: center; }
.edHead h2 { margin: 0; color: var(--yellow); font-size: 13px; }
#edCount { color: var(--cyan); font-size: 10px; }
.edBody { display: grid; grid-template-columns: 150px 1fr; gap: 12px; flex: 1; min-height: 0; }
.edPalette { display: flex; flex-direction: column; gap: 6px; }
.edPalette button { background: #0d1024; color: #fff; border: 3px solid var(--line2); padding: 8px 4px; font-size: 8px; box-shadow: 3px 3px 0 #000; }
.edPalette button:hover { border-color: var(--yellow); color: var(--yellow); }
.edMain { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#edPreview { width: 100%; height: 260px; background: #0a2a10; border: 3px solid var(--line2); background-image: linear-gradient(rgba(80,160,80,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(80,160,80,.25) 1px, transparent 1px); background-size: 20px 20px; }
.edSeq { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; }
.edSeq span { background: #1c2040; border: 2px solid var(--line2); padding: 4px 6px; font-size: 7px; cursor: pointer; }
.edSeq span:hover { border-color: var(--red); color: var(--red); }
#edWarn { font-size: 9px; padding: 6px 8px; border: 2px solid; }
#edWarn.ok { color: var(--green); border-color: var(--green); } #edWarn.bad { color: var(--yellow); border-color: var(--yellow); }
.edRow { display: flex; gap: 14px; align-items: center; font-size: 9px; flex-wrap: wrap; }
.edRow input, .edRow select { font: inherit; background: #0d1024; color: #fff; border: 2px solid var(--line2); padding: 4px 6px; margin-left: 6px; }
#edLen { color: var(--cyan); }
.edFoot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.edFoot button { background: #0d1024; color: #fff; border: 3px solid var(--line2); padding: 8px 10px; font-size: 8px; box-shadow: 3px 3px 0 #000; }
.edFoot button:disabled { opacity: .4; cursor: default; }
#edDrive { border-color: var(--green); color: var(--green); }
.edFoot .hint { font-size: 8px; color: #999; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
.hudTitle { position: absolute; top: 10px; left: 12px; background: rgba(5,6,14,.85); border: 3px solid var(--line); box-shadow: 3px 3px 0 #000; padding: 6px 10px; color: var(--yellow); font-size: 11px; }
.hudStats { position: absolute; top: 10px; right: 12px; background: rgba(5,6,14,.85); border: 3px solid var(--line); box-shadow: 3px 3px 0 #000; padding: 6px 10px; display: grid; gap: 2px; min-width: 230px; }
.hudStats div { display: flex; justify-content: space-between; gap: 16px; font-size: 10px; }
.hudStats span { color: var(--cream); } .hudStats b { color: var(--yellow); font-variant-numeric: tabular-nums; }
.hudMini { position: absolute; bottom: 14px; left: 12px; background: rgba(5,6,14,.75); border: 3px solid var(--line); box-shadow: 3px 3px 0 #000; padding: 4px; }
#minimap { width: 150px; height: 150px; display: block; image-rendering: pixelated; }
#cockpit { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 38%; image-rendering: pixelated; pointer-events: none; }
.hudDash { position: absolute; bottom: 14px; right: 12px; background: rgba(5,6,14,.85); border: 3px solid var(--line); box-shadow: 3px 3px 0 #000; padding: 8px 10px; display: grid; gap: 6px; min-width: 190px; }
.speedBox { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; background: #050508; border: 2px solid #1a1a2a; padding: 4px 8px; }
.speedBox b { font-size: 34px; color: var(--red); text-shadow: 0 0 8px rgba(255,42,42,.6); font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.speedBox span { font-size: 8px; color: #ddd; }
.barBox { display: grid; grid-template-columns: 62px 1fr; align-items: center; font-size: 8px; color: var(--cream); }
.bar { display: flex; gap: 2px; }
.bar i { flex: 1; height: 10px; background: #14141c; border: 1px solid #000; }
.bar.turbo i.on { background: var(--green); box-shadow: 0 0 4px var(--green); }
.bar.dmg i.on { background: var(--yellow); } .bar.dmg i.red { background: var(--red); }
#countdown { position: absolute; top: 30%; left: 0; right: 0; text-align: center; font-size: clamp(40px, 9vw, 100px); color: var(--yellow); text-shadow: 5px 5px 0 var(--red2), 10px 10px 0 #000; }
#wrongway { position: absolute; top: 22%; left: 0; right: 0; text-align: center; font-size: 18px; color: #fff; background: rgba(193,18,31,.85); padding: 10px; border-top: 3px solid #000; border-bottom: 3px solid #000; }
#msg { position: absolute; bottom: 120px; left: 50%; transform: translate(-50%, 20px); opacity: 0; transition: .2s steps(3); background: rgba(5,6,14,.92); color: var(--cream); padding: 10px 16px; max-width: min(680px, 92vw); border: 3px solid var(--line2); box-shadow: 5px 5px 0 #000; }
#msg.show { opacity: 1; transform: translate(-50%, 0); }
#msgWho { font-size: 8px; color: var(--pink); margin-bottom: 6px; }
#msgText { font-size: 11px; color: var(--yellow); line-height: 1.7; }
.hudBtns { position: absolute; top: 200px; right: 12px; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.hudBtns button { background: rgba(5,6,14,.85); color: #fff; border: 3px solid var(--line); box-shadow: 3px 3px 0 #000; width: 40px; height: 40px; font-size: 14px; }

/* ---------- Touch ---------- */
#touch { position: fixed; bottom: 90px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 14px; pointer-events: none; }
.tGroup { display: flex; gap: 10px; pointer-events: auto; }
#touch button { width: 70px; height: 70px; border: 3px solid #fff; box-shadow: 4px 4px 0 #000; background: rgba(193,18,31,.7); color: #fff; font-size: 26px; touch-action: none; user-select: none; }
#tGas { background: rgba(40,160,60,.75); } #tNitro { background: rgba(255,210,63,.7); color: #000; font-size: 18px; }
#rotate { display: none; }

/* ---------- Results ---------- */
#results { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); z-index: 20; }
.resInner { background: var(--panel); border: 3px solid var(--line2); box-shadow: 8px 8px 0 #000; padding: 18px 22px; max-width: 900px; width: 94vw; display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
@media (max-width: 760px) { .resInner { grid-template-columns: 1fr; } }
.resInner h2 { margin: 0 0 6px; color: var(--yellow); font-size: 13px; }
.resTitle { color: var(--pink); font-size: 11px; margin: 0 0 10px; line-height: 1.8; }
.record { background: var(--yellow); color: #000; padding: 8px 10px; border: 3px solid #000; font-size: 9px; margin-bottom: 10px; }
.resInner table { width: 100%; border-collapse: collapse; }
.resInner td { padding: 5px 4px; border-bottom: 2px dashed var(--line); font-size: 10px; color: #eee; }
.resInner td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.resInner tr.me td { color: var(--red); font-weight: bold; }
.resInner .small { font-size: 8px; color: #aaa; margin: 8px 0 0; }
.resBtns { display: flex; gap: 10px; margin-top: 14px; }
.resBtns button { flex: 1; background: var(--red2); color: #fff; border: 3px solid #000; box-shadow: 4px 4px 0 #000; padding: 12px; font-size: 9px; }
.resBtns #menuBtn { background: #2a2f55; }
.resRight { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
#resFace { width: 96px; height: 120px; image-rendering: pixelated; border: 3px solid var(--line2); }
.quote { color: var(--cream); font-size: 10px; line-height: 1.9; margin: 0; }
.quote .sig { color: var(--yellow); font-size: 9px; }
.quote.small { font-size: 9px; color: var(--cyan); }

/* ---------- Mobile ---------- */
body.mobile { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
body.mobile .banner { height: 96px; }
body.mobile #logo { width: 320px; height: 80px; top: 6px; left: 8px; }
body.mobile .bannerQuote .q { display: none; }
body.mobile #langerFace { width: 56px; height: 70px; }
body.mobile .menuGrid { grid-template-columns: 1fr; grid-template-areas: "drivers" "cars" "tracks" "langer" "start"; padding: 8px 10px; gap: 8px; }
body.mobile .cards { grid-template-columns: repeat(4, 1fr); gap: 5px; }
body.mobile .card canvas { width: 48px; height: 60px; } body.mobile .card.car canvas { width: 96px; height: 33px; }
body.mobile .card small { display: none; } body.mobile .card > b { font-size: 8px; }
body.mobile .stat { grid-template-columns: 44px 1fr; font-size: 6px; } body.mobile .stat i b { width: 7px; height: 6px; }
body.mobile .trackRow { grid-template-columns: 96px 1fr 70px; padding-left: 22px; min-height: 60px; }
body.mobile .trackRow .thumb { width: 96px; height: 36px; } body.mobile .trackRow .outline { width: 70px; height: 40px; }
body.mobile .trackRow .info b { font-size: 9px; } body.mobile .trackRow .info .wp { display: none; }
body.mobile .menuFooter .keys { display: none; }
body.mobile .langer { display: none; }
body.mobile .hudStats { min-width: 150px; padding: 4px 8px; } body.mobile .hudStats div { font-size: 8px; }
body.mobile .hudTitle { font-size: 8px; padding: 4px 8px; max-width: 45vw; }
body.mobile .hudMini { bottom: auto; top: 96px; left: 12px; } body.mobile #minimap { width: 80px; height: 80px; }
body.mobile .hudDash { min-width: 150px; padding: 6px 8px; bottom: auto; top: 96px; right: 12px; }
body.mobile .speedBox b { font-size: 22px; } body.mobile .bar i { height: 7px; }
body.mobile .hudBtns { top: auto; bottom: 14px; right: 12px; flex-direction: row; } body.mobile .hudBtns button { width: 34px; height: 34px; font-size: 12px; }
body.mobile #msg { bottom: 150px; font-size: 9px; padding: 8px 12px; } body.mobile #msgText { font-size: 9px; }
body.mobile #touch { bottom: max(64px, env(safe-area-inset-bottom)); padding: 0 max(12px, env(safe-area-inset-left)) 0 max(12px, env(safe-area-inset-right)); }
body.mobile #touch button { width: 76px; height: 76px; font-size: 28px; opacity: .85; }
body.mobile #cockpit { height: 34%; }
body.mobile .edBody { grid-template-columns: 1fr; } body.mobile .edPalette { flex-direction: row; flex-wrap: wrap; }
/* phones: the game only runs in landscape; portrait shows a full-screen "turn your phone" cover on every screen */
@media (orientation: portrait) {
  body.mobile #rotate { display: flex; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; background: #0a081e; color: var(--yellow); text-align: center; font-size: 15px; line-height: 2; pointer-events: auto; touch-action: none; }
  body.mobile #rotate div { font-size: 15px; } body.mobile #rotate small { display: block; color: var(--cyan); font-size: 10px; line-height: 1.6; margin-top: 8px; }
  body.mobile #rotate #rotateArt { display: block; width: 240px; height: 66px; margin: 0 auto 12px; image-rendering: pixelated; }
}

#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 40; }
.menuFooter .tipp { color: var(--yellow); font-size: 8px; width: 100%; text-align: center; }
.resInner .stats { color: var(--cyan); line-height: 1.8; } .resInner .stats b { color: var(--yellow); }

/* ---------- Two players / replay ---------- */
.p2Info { width: 100%; text-align: center; color: var(--cyan); font-size: 9px; }
.hudDash2 { display: none; }
body.split .hudDash { bottom: calc(50% + 12px); }
body.split .hudDash2 { display: grid; position: absolute; bottom: 14px; right: 12px; background: rgba(5,6,14,.85); border: 3px solid var(--line); box-shadow: 3px 3px 0 #000; padding: 8px 10px; gap: 6px; min-width: 190px; }
body.split .hudDash2 .speedBox b { color: var(--cyan); text-shadow: 0 0 8px rgba(79,214,255,.6); }
.pos2 { font-size: 8px; color: var(--cream); text-align: right; }
body.split .hudMini { bottom: calc(50% + 12px); }
body.split #hud::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: #000; box-shadow: 0 0 0 1px var(--line2); }
body.split .hudBtns { top: calc(50% + 14px); }
body.split #msg { bottom: auto; top: 46%; }
#replayUI { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.replayTop { position: absolute; left: 50%; transform: translateX(-50%); top: -100vh; margin-top: 14px; display: flex; gap: 16px; background: rgba(5,6,14,.85); border: 3px solid var(--red2); padding: 6px 12px; color: var(--red); font-size: 12px; animation: blink 1s steps(2) infinite; }
.replayTop span:last-child { color: var(--yellow); }
.replayTrack { position: absolute; left: 200px; right: 230px; bottom: 44px; height: 10px; background: #14141c; border: 2px solid var(--line2); }
#replayBar { height: 100%; background: linear-gradient(90deg, var(--pink), var(--cyan)); width: 0; }
.replayKeys { position: absolute; left: 200px; right: 230px; bottom: 14px; font-size: 8px; color: #ccc; display: flex; gap: 10px; align-items: center; pointer-events: auto; flex-wrap: wrap; }
.replayKeys button { background: var(--red2); color: #fff; border: 2px solid #000; font-size: 8px; padding: 4px 8px; }
body.mobile #p2Btn { display: none; }

/* Chicago am Rhein extras */
.express { background: #f4efe0; color: #111; border: 3px solid #000; box-shadow: 3px 3px 0 #000; padding: 6px 10px; font-size: 9px; letter-spacing: .5px; margin-bottom: 8px; line-height: 1.5; }
.express::before { content: 'DÄ SCHNELLE · KÖLN · '; color: #c1121f; font-weight: bold; }
.resInner .deckel { color: var(--yellow); }
.cupBox { border: 3px solid var(--line); background: rgba(5,6,14,.7); padding: 6px 10px; margin: 6px 0 8px; font-size: 9px; }
.cupBox b { color: var(--yellow); } .cupBox table { width: 100%; margin-top: 4px; border-collapse: collapse; } .cupBox td { padding: 2px 6px; } .cupBox tr.me td { color: var(--yellow); }

/* ---- phone layout: compact menu, no sideways overflow, HUD that does not overlap ---- */
body.mobile #menu { overflow-x: hidden; }
body.mobile .menuGrid { padding: 6px 8px; gap: 6px; max-width: 100vw; }
body.mobile .panel { padding: 6px 8px; }
body.mobile .panel h2 { font-size: 10px; margin: 0 0 6px; }
body.mobile .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } body.mobile #carCards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; } body.mobile #carCards .card canvas { width: 60px; height: 21px; } body.mobile #driverCards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
body.mobile .card { padding: 4px 3px 4px; gap: 2px; min-width: 0; }
body.mobile .card canvas { width: 40px; height: 50px; } body.mobile .card.car canvas { width: 72px; height: 25px; }
body.mobile .card > b { font-size: 8px; white-space: normal; padding: 3px 2px; min-height: 0; line-height: 1.3; max-width: 100%; }
body.mobile .card .diff { font-size: 6px; }
body.mobile .stat { grid-template-columns: 34px 1fr; font-size: 5px; gap: 2px; } body.mobile .stat i b { width: 6px; height: 5px; }
body.mobile .trackRow { grid-template-columns: 72px minmax(0, 1fr) 50px; gap: 6px; padding: 4px 6px 4px 20px; min-height: 48px; }
body.mobile .trackRow .thumb { width: 72px; height: 27px; } body.mobile .trackRow .outline { width: 50px; height: 30px; }
body.mobile .trackRow .info b { font-size: 9px; line-height: 1.3; } body.mobile .trackRow .info { min-width: 0; }
body.mobile .trackRow .p1 { font-size: 7px; }
body.mobile #trackDesc, body.mobile .trackDesc { font-size: 7px; }
body.mobile #startBtn { font-size: 12px; padding: 10px 18px; }
body.mobile .subBtns button { font-size: 7px; padding: 6px 8px; }
body.mobile .menuFooter { padding: 4px 8px 10px; font-size: 7px; }
body.mobile .menuFooter .slogan { font-size: 7px; }
@media (orientation: portrait) {
  body.mobile .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.mobile .card canvas { width: 56px; height: 70px; } body.mobile .card.car canvas { width: 96px; height: 33px; }
  body.mobile .card > b { font-size: 9px; }
  body.mobile .trackRow { grid-template-columns: 64px minmax(0, 1fr); }
  body.mobile .trackRow .outline { display: none; }
}
/* HUD: stats box has nine rows now – keep the speed dash below it, buttons smaller on short screens */
body.mobile .hudStats { min-width: 140px; gap: 1px; } body.mobile .hudStats div { font-size: 7px; }
body.mobile .hudDash { top: 150px; min-width: 140px; padding: 4px 8px; }
body.mobile .speedBox b { font-size: 20px; }
body.mobile .hudMini { top: 40px; }
body.mobile #msg { bottom: 132px; max-width: 46vw; }
@media (max-height: 420px) {
  body.mobile #touch button { width: 62px; height: 62px; font-size: 22px; }
  body.mobile #touch { bottom: max(52px, env(safe-area-inset-bottom)); }
  body.mobile .hudBtns { bottom: 8px; } body.mobile .hudBtns button { width: 30px; height: 30px; font-size: 11px; }
  body.mobile #msg { bottom: 122px; }
}
/* results on phones: one column, scrollable, buttons always reachable */
body.mobile #results { align-items: flex-start; overflow: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 max(10px, env(safe-area-inset-bottom)); box-sizing: border-box; }
body.mobile .resInner { grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; width: 96vw; box-shadow: 4px 4px 0 #000; margin: auto; }
body.mobile .resInner h2 { font-size: 10px; margin-bottom: 4px; } body.mobile .resTitle { font-size: 9px; }
body.mobile .resInner td { padding: 3px 3px; font-size: 8px; }
body.mobile .resInner .small { font-size: 7px; margin-top: 5px; line-height: 1.6; }
body.mobile .express { font-size: 7px; padding: 4px 8px; margin-bottom: 6px; }
body.mobile .record { font-size: 7px; padding: 5px 8px; margin-bottom: 6px; }
body.mobile .resBtns { flex-wrap: wrap; gap: 6px; margin-top: 8px; } body.mobile .resBtns button { padding: 9px 6px; font-size: 8px; min-width: 40%; }
body.mobile .resRight { gap: 6px; } body.mobile #resFace { width: 48px; height: 60px; } body.mobile .resRight .quote { font-size: 8px; margin: 0; }
body.mobile .cupBox { font-size: 7px; padding: 4px 8px; }
/* iPhone: keep everything out of the notch and the home bar, two-column menu in landscape, readable sizes */
body.mobile .hudTitle, body.mobile .hudMini { left: max(12px, env(safe-area-inset-left)); }
body.mobile .hudStats, body.mobile .hudDash, body.mobile .hudBtns { right: max(12px, env(safe-area-inset-right)); }
body.mobile .hudStats { top: max(8px, env(safe-area-inset-top)); }
body.mobile .hudTitle { top: max(8px, env(safe-area-inset-top)); }
body.mobile .menuGrid { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
body.mobile #logo { left: max(8px, env(safe-area-inset-left)); }
body.mobile .menuFooter { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
body.mobile .resInner { margin-left: max(2vw, env(safe-area-inset-left)); margin-right: max(2vw, env(safe-area-inset-right)); width: auto; }
body.mobile .panel h2 { font-size: 11px; }
body.mobile .card .diff { font-size: 7px; }
body.mobile .trackRow .info span { font-size: 7px; }
@media (orientation: landscape) {
  body.mobile .menuGrid { grid-template-columns: 1fr 1.15fr; grid-template-rows: auto 1fr auto; grid-template-areas: "drivers tracks" "cars tracks" "start start"; align-items: start; }
  body.mobile .cards, body.mobile #driverCards, body.mobile #carCards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  body.mobile .card canvas { width: 48px; height: 60px; } body.mobile #carCards .card canvas { width: 88px; height: 30px; }
  body.mobile .card > b { font-size: 9px; }
  body.mobile .banner { height: 64px; } body.mobile #logo { width: 210px; height: 52px; top: 4px; } body.mobile #langerFace { width: 40px; height: 50px; }
}

/* tilt steering: hide the left/right buttons, keep gas, brake, nitro, phone */
body.tilt #touch .tGroup:first-child { visibility: hidden; }
/* editor on phones: natural flow with scrolling, short preview, wrapped palette and footer */
body.mobile #editor { display: block; overflow: auto; padding: 8px max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
body.mobile .edHead { margin-bottom: 6px; } body.mobile .edHead h2 { font-size: 10px; } body.mobile #edCount { font-size: 8px; }
body.mobile .edBody { display: block; }
body.mobile .edPalette { gap: 4px; margin-bottom: 6px; } body.mobile .edPalette button { padding: 6px 5px; font-size: 7px; }
body.mobile #edPreview { height: 40vh; min-height: 140px; }
body.mobile .edSeq span { font-size: 6px; padding: 3px 5px; }
body.mobile .edRow { font-size: 8px; gap: 8px; margin-top: 4px; }
body.mobile .edFoot { margin-top: 8px; gap: 5px; } body.mobile .edFoot button { padding: 7px 8px; font-size: 7px; } body.mobile .edFoot .hint { font-size: 7px; width: 100%; }
/* replay on phones: only the ENDE button, no key hints, no driving buttons */
body.mobile .replayKeys { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: 12px; justify-content: center; }
body.mobile .replayKeys kbd, body.mobile .replayKeys > span, body.mobile .replayKeys::before { display: none; }
body.mobile .replayKeys button { font-size: 10px; padding: 10px 22px; }
body.mobile .replayTrack { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: 54px; }
body.mobile .replayTop { font-size: 9px; padding: 4px 10px; gap: 10px; margin-top: 8px; }
body.replaying #touch { display: none !important; }

.replayKeys button { margin-left: 4px; }
/* phones: messages at the top between title and stats so they never cover the car */
body.mobile #msg { top: max(8px, env(safe-area-inset-top)); bottom: auto; left: 50%; transform: translate(-50%, -12px); max-width: 44vw; padding: 5px 9px; }
body.mobile #msg.show { transform: translate(-50%, 0); }
body.mobile #msgWho { font-size: 7px; margin-bottom: 2px; } body.mobile #msgText { font-size: 8px; line-height: 1.5; }
body.mobile #countdown { top: 36%; }
/* phones: camera/sound/pixel/menu buttons at the bottom centre, far from gas and brake, and a bit of spacing between the driving buttons */
body.mobile .hudBtns { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); right: auto; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 8px; }
body.mobile .hudBtns button { width: 32px; height: 32px; font-size: 11px; opacity: .8; }
body.mobile #touch .tGroup { gap: 12px; }
body.mobile.racing #cockpit { display: block; }

/* ---------- Klüngel-Presse: the DÄ SCHNELLE front page on the results screen ---------- */
#resPaper { width: 100%; max-width: 380px; height: auto; border: 3px solid #000; box-shadow: 4px 4px 0 #000; image-rendering: auto; background: #f3ecd8; }
#paperBtn { background: #f4efe0; color: #111; border: 3px solid #000; box-shadow: 3px 3px 0 #000; padding: 8px 12px; font-size: 9px; }
body.mobile #resPaper { max-width: 260px; } body.mobile #paperBtn { font-size: 7px; padding: 6px 8px; }
/* ---------- attract mode ---------- */
#demo { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.demoTop { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: space-around; font-size: 14px; color: var(--yellow); text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255,210,63,.6); letter-spacing: .1em; }
.demoTop .blink { animation: coin 0.8s steps(2) infinite; color: #fff; }
.demoCrawlBox { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 85%, transparent); }
#demoCrawl { position: absolute; left: 50%; transform: translateX(-50%); width: min(720px, 90vw); text-align: center; color: var(--yellow); font-size: 14px; line-height: 2.1; text-shadow: 2px 2px 0 #000, 0 0 8px rgba(0,0,0,.8); animation: crawl 62s linear forwards; }
#demoCrawl p { margin: 0 0 22px; } #demoCrawl p.big { font-size: 22px; color: #fff; text-shadow: 3px 3px 0 var(--red2), 0 0 14px var(--pink); }
@keyframes crawl { from { top: 100%; } to { top: -160%; } }
body.demo .hudStats, body.demo .hudDash, body.demo .hudBtns, body.demo .hudMini, body.demo #touch, body.demo .hudTitle, body.demo #msg { display: none !important; }
body.mobile .demoTop { font-size: 9px; top: 8px; } body.mobile #demoCrawl { font-size: 9px; line-height: 1.9; } body.mobile #demoCrawl p.big { font-size: 14px; }

/* ---------- track intro card ---------- */
#introCard { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; z-index: 4; animation: introIn 3.8s ease-out forwards; }
#introCard b { display: block; font-size: clamp(20px, 4.5vw, 44px); color: var(--yellow); text-shadow: 4px 4px 0 var(--red2), 8px 8px 0 #000, 0 0 24px rgba(255,210,63,.5); letter-spacing: .06em; line-height: 1.3; }
#introCard span { display: block; margin-top: 12px; font-size: clamp(9px, 1.6vw, 14px); color: var(--cyan); text-shadow: 2px 2px 0 #000, 0 0 10px rgba(79,214,255,.6); letter-spacing: .15em; }
@keyframes introIn { 0% { opacity: 0; transform: translateY(30px) scale(.9); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
/* ---------- Orden ---------- */
.ordenGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ordenHead { grid-column: 1 / -1; color: var(--yellow); font-size: 10px; }
.orden { background: #0d1024; border: 2px solid var(--line); padding: 8px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: .45; filter: grayscale(1); }
.orden.on { opacity: 1; filter: none; border-color: var(--yellow); box-shadow: 0 0 10px rgba(255,210,63,.3); }
.orden canvas { image-rendering: pixelated; width: 48px; height: 48px; } .orden b { font-size: 8px; color: #fff; } .orden small { font-size: 7px; color: var(--cyan); line-height: 1.4; } .orden i { font-style: normal; font-size: 7px; color: #bbb; }
.record.orden { background: var(--pink); color: #fff; text-align: left; } .record.orden .oitem { display: flex; align-items: center; gap: 8px; } .record.orden .oitem + .oitem { margin-top: 4px; } .record.orden canvas.medal { image-rendering: pixelated; width: 24px; height: 24px; flex: none; }
body.mobile .ordenGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } body.mobile .orden canvas { width: 32px; height: 32px; }
/* ---------- Siegerehrung ---------- */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin-top: 10px; }
.podium .step { display: flex; flex-direction: column; align-items: center; gap: 2px; background: linear-gradient(180deg, #6a3fa0, #2c1f4a); border: 2px solid var(--yellow); padding: 6px 8px; min-width: 84px; }
.podium .step canvas { image-rendering: pixelated; width: 48px; height: 60px; border: 2px solid #000; } .podium .step b { color: var(--yellow); font-size: 12px; } .podium .step span { font-size: 8px; color: #fff; } .podium .step i { font-style: normal; font-size: 7px; color: var(--cyan); }
.podium .step.s0 { padding-bottom: 22px; } .podium .step.s2 { padding-bottom: 0; } .podium .step.s1 { padding-bottom: 10px; }

/* ---------- Hinterzimmer: the back room ---------- */
#club { position: fixed; inset: 0; z-index: 15; background: #0d0a14; display: flex; flex-direction: column; color: var(--cream); overflow: hidden; }
#clubRoom { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; object-fit: cover; }
#club > *:not(#clubRoom) { position: relative; z-index: 1; }
.clubTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: rgba(5,6,14,.8); border-bottom: 3px solid #3b2f6e; }
.clubTop b { color: var(--yellow); font-size: 12px; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255,210,63,.5); } .clubTop span { color: var(--cyan); font-size: 9px; } .clubTop span b { font-size: 9px; }
#clubBack { background: var(--red2); color: #fff; border: 3px solid #000; box-shadow: 3px 3px 0 #000; padding: 6px 10px; font-size: 8px; }
#clubLobby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 24px 18px; max-width: 1100px; margin: 0 auto; width: 100%; }
.cgame { background: rgba(9,10,26,.92); border: 3px solid #6a3fa0; box-shadow: 0 0 0 1px #000, 0 0 16px rgba(255,63,160,.25); padding: 12px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.cgame:hover { border-color: var(--yellow); } .cgame b { color: var(--yellow); font-size: 13px; text-shadow: 2px 2px 0 #000; } .cgame span { color: var(--pink); font-size: 8px; } .cgame small { color: #ddd; font-size: 8px; line-height: 1.6; } .cgame i { font-style: normal; color: var(--cyan); font-size: 7px; }
#clubTable { flex: 1; position: relative; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 120px; }
.seat.left { left: 16px; top: 14px; } .seat.right { right: 16px; top: 14px; } .seat.top { left: 50%; top: 6px; transform: translateX(-50%); }
.seat canvas { image-rendering: pixelated; width: 48px; height: 60px; border: 2px solid #000; background: #000; } .seat b { font-size: 8px; color: #fff; text-shadow: 1px 1px 0 #000; } .seat .lbl { font-size: 7px; color: var(--yellow); min-height: 10px; }
.seat .oh { display: flex; margin-top: 2px; max-width: 100%; overflow: hidden; } .seat .oh .ccard { margin-left: -18px; } .seat .oh .ccard:first-child { margin-left: 0; }
#clubMid { position: absolute; left: 150px; right: 150px; top: 10px; bottom: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.skatInfo { background: rgba(5,6,14,.8); border: 2px solid #3b2f6e; padding: 6px 10px; font-size: 8px; color: var(--cyan); text-align: center; line-height: 1.7; } .skatInfo.big { font-size: 10px; color: var(--yellow); border-color: var(--yellow); }
.trick { display: flex; gap: 14px; align-items: flex-end; min-height: 80px; } .trick .tc { display: flex; flex-direction: column; align-items: center; gap: 2px; } .trick .tc i { font-style: normal; font-size: 7px; color: #ccc; }
.piles { display: flex; align-items: center; gap: 10px; } .piles i { font-style: normal; font-size: 7px; color: #ccc; }
.meldRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; } .meldRow i { font-style: normal; font-size: 8px; color: var(--yellow); } .meldRow span { font-size: 7px; color: #888; } .meld { display: flex; background: rgba(0,0,0,.35); padding: 3px; border: 1px solid #3b2f6e; } .meld .ccard { margin-left: -10px; } .meld .ccard:first-child { margin-left: 0; }
.bankRow { display: flex; flex-direction: column; align-items: center; gap: 4px; } .bankRow i { font-style: normal; font-size: 9px; color: var(--yellow); }
#clubHand { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 4px; padding: 6px 10px 8px; min-height: 84px; }
#clubHand .total { font-size: 11px; color: var(--yellow); margin-left: 10px; text-shadow: 2px 2px 0 #000; }
.ccard { position: relative; width: 46px; height: 64px; background: #f6f1e4; border: 2px solid #111; border-radius: 4px; box-shadow: 2px 2px 0 #000; color: #111; cursor: pointer; flex: none; user-select: none; font-family: "Press Start 2P", monospace; transition: transform .12s; }
.ccard .r { position: absolute; left: 4px; top: 4px; font-size: 9px; } .ccard .s { position: absolute; left: 4px; top: 16px; font-size: 10px; } .ccard .c { position: absolute; right: 5px; bottom: 4px; font-size: 22px; }
.ccard.red { color: #c1121f; } .ccard.sel { transform: translateY(-10px); border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow), 2px 2px 0 #000; } .ccard.dim { opacity: .4; cursor: default; }
.ccard.back { background: #1c3f95 repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 4px, transparent 4px 8px); border-color: #fff; cursor: pointer; }
.ccard.small { width: 26px; height: 36px; border-width: 1px; } .ccard.small .r { font-size: 6px; left: 2px; top: 2px; } .ccard.small .s { font-size: 6px; left: 2px; top: 10px; } .ccard.small .c { font-size: 12px; right: 2px; bottom: 1px; }
.diceRows { display: flex; flex-direction: column; gap: 6px; } .diceRow { display: flex; align-items: center; gap: 6px; } .diceRow i { font-style: normal; width: 60px; font-size: 8px; color: var(--yellow); } .diceRow b { font-size: 8px; color: #fff; margin-left: 6px; }
.die { width: 34px; height: 34px; background: #f6f1e4; color: #111; border: 2px solid #111; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 2px 2px 0 #000; } .die.kept { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow), 2px 2px 0 #000; transform: translateY(-3px); }
#clubMsg { margin: 0 auto; max-width: 720px; width: calc(100% - 40px); background: rgba(5,6,14,.9); border: 3px solid var(--line2); box-shadow: 4px 4px 0 #000; padding: 6px 12px; min-height: 44px; } #clubMsg b { display: block; font-size: 8px; color: var(--pink); margin-bottom: 4px; } #clubMsg span { font-size: 10px; color: var(--yellow); line-height: 1.6; } #clubMsg.flash { border-color: var(--yellow); }
#clubBtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 12px 14px; background: rgba(5,6,14,.75); }
#clubBtns button { background: linear-gradient(180deg, #1c1642, #0b0d22); color: var(--cyan); border: 3px solid #4a3d8a; box-shadow: 3px 3px 0 #000; font-size: 8px; padding: 8px 10px; } #clubBtns button.main { background: var(--red2); color: #fff; border-color: #000; } #clubBtns button:disabled { opacity: .35; cursor: default; }
.clubEntry { background: linear-gradient(180deg, #2c6e49, #123d28); color: #fff; border: 4px solid var(--yellow); border-radius: 12px; box-shadow: 0 0 0 3px #000, 0 5px 0 #0a2416, 0 5px 0 3px #000, 0 0 18px rgba(58,223,58,.35); font-size: 10px; padding: 10px 22px; text-shadow: 2px 2px 0 #000; letter-spacing: .04em; }
.clubEntry:hover { border-color: #fff; transform: translateY(2px); box-shadow: 0 0 0 3px #000, 0 3px 0 #0a2416, 0 3px 0 3px #000, 0 0 26px rgba(58,223,58,.6); }
body.mobile .clubEntry { font-size: 7px; padding: 8px 12px; }
body.mobile #clubLobby { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; } body.mobile .cgame { padding: 6px; gap: 3px; } body.mobile .cgame b { font-size: 9px; } body.mobile .cgame small { font-size: 6px; line-height: 1.4; }
body.mobile .seat { width: 80px; } body.mobile .seat canvas { width: 32px; height: 40px; } body.mobile .seat.left { left: 6px; top: 6px; } body.mobile .seat.right { right: 6px; top: 6px; } body.mobile .seat .oh .ccard { margin-left: -20px; }
body.mobile #clubMid { left: 92px; right: 92px; top: 4px; bottom: 74px; gap: 4px; } body.mobile .skatInfo { font-size: 6px; padding: 3px 6px; line-height: 1.5; } body.mobile .skatInfo.big { font-size: 7px; }
body.mobile .ccard { width: 34px; height: 48px; } body.mobile .ccard .r { font-size: 7px; } body.mobile .ccard .s { font-size: 8px; top: 13px; } body.mobile .ccard .c { font-size: 16px; }
body.mobile #clubHand { min-height: 60px; padding: 4px 6px; gap: 2px; } body.mobile #clubMsg { min-height: 34px; padding: 4px 8px; } body.mobile #clubMsg span { font-size: 7px; } body.mobile #clubMsg b { font-size: 6px; margin-bottom: 2px; }
body.mobile #clubBtns { gap: 4px; padding: 5px 6px 8px; } body.mobile #clubBtns button { font-size: 6px; padding: 6px 7px; } body.mobile .clubTop { padding: 4px 8px; } body.mobile .clubTop b { font-size: 8px; } body.mobile .clubTop span { font-size: 6px; }
body.mobile .die { width: 26px; height: 26px; font-size: 20px; } body.mobile .diceRow i { width: 44px; font-size: 6px; } body.mobile .diceRow b { font-size: 6px; } body.mobile .trick { min-height: 60px; gap: 8px; }

/* ---------- Karriere, Botengang, on foot ---------- */
.modeRow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.modeRow button { background: linear-gradient(180deg, #4a2a7a, #1c1642); color: var(--yellow); border: 3px solid var(--yellow); box-shadow: 3px 3px 0 #000; font-size: 9px; padding: 9px 14px; text-shadow: 1px 1px 0 #000; }
.modeRow button:hover { border-color: #fff; color: #fff; }
#carCards .card.locked { opacity: .55; filter: grayscale(.7); } #carCards .card.locked > b { color: #aaa; }
#hudPrompt { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); background: var(--yellow); color: #000; border: 4px solid #000; box-shadow: 4px 4px 0 #000, 0 0 20px rgba(255,210,63,.6); font-size: 14px; padding: 12px 22px; animation: coin 0.8s steps(2) infinite; cursor: pointer; z-index: 6; pointer-events: auto; }
body.mobile #hudPrompt { bottom: 130px; font-size: 10px; padding: 10px 14px; } body.mobile .modeRow button { font-size: 7px; padding: 7px 9px; }