* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #a8dcff; font-family: "Nunito", "Segoe UI Rounded", "Arial Rounded MT Bold", system-ui, sans-serif; color: #1f2a3a; touch-action: none; }
#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; border: 0; cursor: pointer; color: inherit; touch-action: manipulation; }

.screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); z-index: 5; }
.screen.on { display: flex; }
.screen.dim { background: rgba(25, 40, 70, .5); z-index: 20; }
.hud { position: fixed; inset: 0; display: none; pointer-events: none; z-index: 4; }
.hud.on { display: block; }
.hud > * { pointer-events: auto; }

/* Start */
#s-start { justify-content: space-between; background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 62%, rgba(40,70,120,.35) 100%); }
.logo { margin-top: 4vh; display: flex; flex-direction: column; align-items: center; transform: rotate(-3deg); }
.logo span { font-weight: 900; letter-spacing: 1px; line-height: 1; padding: 6px 18px 10px; border-radius: 16px; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.18); box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.logo .l1 { font-size: min(15vw, 78px); background: #e8423f; }
.logo .l2 { font-size: min(11vw, 56px); background: #2f8fdd; margin-top: -4px; transform: rotate(4deg) translateX(14px); }
.bigrow { display: flex; gap: 22px; margin-top: auto; }
.big { width: min(36vw, 170px); height: min(36vw, 170px); border-radius: 34px; font-size: min(17vw, 84px); box-shadow: 0 8px 0 rgba(0,0,0,.22), inset 0 -8px 0 rgba(0,0,0,.12); transition: transform .1s; }
.big:active, .mid:active, .ib:active, .go:active, .tile:active { transform: translateY(4px) scale(.97); }
.b-build { background: #f7d038; }
.b-race { background: #4cb050; }
.row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mid { position: relative; width: 78px; height: 78px; border-radius: 24px; background: #fff; font-size: 40px; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.mid small { position: absolute; right: 6px; bottom: 4px; font-size: 22px; }
.mid.go2 { background: #4cb050; color: #fff; }
.foot { margin: 0; font-size: 12px; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* Kopfzeilen */
.top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; align-items: center; gap: 12px; }
.title { font-size: 40px; font-weight: 900; }
.ib { width: 54px; height: 54px; border-radius: 18px; background: rgba(255,255,255,.95); font-size: 28px; box-shadow: 0 4px 0 rgba(0,0,0,.18); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.go { height: 58px; min-width: 76px; border-radius: 20px; background: #4cb050; color: #fff; font-size: 32px; box-shadow: 0 5px 0 #2f7d33; margin-left: auto; }
.go.bad { background: #b9c0c8; box-shadow: 0 5px 0 #8a929c; }
.go.pulse { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* Schauplätze */
#s-scene { background: linear-gradient(#ffe9a8, #ffd2e6); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(100%, 520px); }
.tile { position: relative; aspect-ratio: 1.15; border-radius: 26px; font-size: 64px; background: #fff; box-shadow: 0 7px 0 rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tile .badge { position: absolute; right: 8px; top: 6px; font-size: 30px; }
.tile canvas { width: 100%; height: 100%; display: block; }
.tile .ico { position: absolute; left: 8px; top: 6px; font-size: 26px; }
.tiles.small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tiles.small .tile { aspect-ratio: 1; font-size: 44px; }
.tile.empty { opacity: .55; }

/* Bauen */
.bar { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 8px; align-items: center; padding: max(10px, env(safe-area-inset-top)) 10px 10px; background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0)); overflow-x: auto; }
.dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px max(12px, env(safe-area-inset-bottom)); background: rgba(255,255,255,.88); border-radius: 26px 26px 0 0; box-shadow: 0 -4px 18px rgba(0,0,0,.12); }
.colors { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; overflow-x: auto; padding: 2px; }
.sw { width: 40px; height: 40px; border-radius: 12px; flex: none; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); border: 3px solid transparent; }
.sw.on { border-color: #1f2a3a; transform: scale(1.12); }
.colors .ib { width: 46px; height: 46px; font-size: 24px; }
.colors .sp { flex: 1; }
.tools { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.tools::-webkit-scrollbar { display: none; }
.tool { width: 64px; height: 64px; flex: none; border-radius: 18px; background: #eef3f9; font-size: 34px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 rgba(0,0,0,.12); border: 3px solid transparent; }
.tool svg { width: 46px; height: 46px; }
.tool.on { background: #fff3b0; border-color: #f39c1f; transform: translateY(-3px); }

/* Fahren */
.dbar { background: none; pointer-events: none; }
.dbar > * { pointer-events: auto; }
.chip { background: rgba(255,255,255,.92); border-radius: 16px; padding: 8px 12px; font-weight: 900; font-size: 20px; box-shadow: 0 3px 0 rgba(0,0,0,.15); white-space: nowrap; }
.chip.pos { font-size: 28px; min-width: 56px; text-align: center; background: #f7d038; }
.split { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); display: none; font-size: 26px; }
.split.on { display: block; }
.pad { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 14px; align-items: flex-end; }
.pad.left { left: 14px; }
.pad.right { right: 14px; }
.pad button { width: 88px; height: 88px; border-radius: 50%; background: rgba(255,255,255,.85); font-size: 40px; box-shadow: 0 6px 0 rgba(0,0,0,.2); }
.pad button.on { transform: translateY(4px); filter: brightness(.9); }
.pad .gas { width: 104px; height: 104px; background: #4cb050; color: #fff; font-size: 48px; }
.pad .brake { width: 72px; height: 72px; background: #e8423f; color: #fff; font-size: 30px; }

/* Werkstatt */
.garage { display: flex; flex-direction: column; gap: 10px; }
.grow { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 2px; }
.grow .lab { font-size: 26px; width: 34px; flex: none; text-align: center; }
.opt { width: 58px; height: 58px; flex: none; border-radius: 16px; background: #eef3f9; display: flex; align-items: center; justify-content: center; border: 3px solid transparent; font-size: 30px; }
.opt svg { width: 44px; height: 44px; }
.opt.on { border-color: #f39c1f; background: #fff3b0; }
.opt.sw { width: 44px; height: 44px; }

/* Karten / Fenster */
.card { background: #fff; border-radius: 30px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: 0 10px 0 rgba(0,0,0,.2); max-width: 100%; }
.card.wide { width: min(100%, 480px); max-height: 92vh; overflow-y: auto; }
.medal { font-size: 110px; line-height: 1; }
.rinfo { display: flex; flex-direction: column; gap: 8px; align-items: center; font-size: 28px; font-weight: 900; }
.rinfo .new { color: #e8423f; animation: pulse 1s infinite; }

/* Pokale */
#s-cups { background: linear-gradient(#bfe6ff, #fff2c2); }
.cups { display: flex; flex-direction: column; gap: 12px; width: min(100%, 460px); }
.cup { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 22px; padding: 10px 16px; font-size: 40px; box-shadow: 0 5px 0 rgba(0,0,0,.15); }
.cup .off { opacity: .2; filter: grayscale(1); }
.cup .sc { margin-right: auto; }

#msg { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.6); font-size: 120px; font-weight: 900; color: #fff; text-shadow: 0 6px 0 rgba(0,0,0,.25), 0 0 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none; z-index: 30; transition: opacity .15s, transform .25s; white-space: nowrap; }
#msg.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#msg.small { font-size: 64px; }
#dbg { position: fixed; left: 4px; bottom: 4px; font: 11px monospace; color: #000; background: rgba(255,255,255,.7); z-index: 50; pointer-events: none; white-space: pre; display: none; }

@media (min-aspect-ratio: 1/1) {
  .big { width: 150px; height: 150px; font-size: 72px; }
  .logo { margin-top: 2vh; }
  .logo .l1 { font-size: 64px; } .logo .l2 { font-size: 46px; }
}