:root {
  --bg: #1b102a;
  --panel: #2b1844;
  --ink: #fff4a8;
  --hot: #ff4f78;
  --gold: #ffc857;
  --green: #64ff7c;
  --cyan: #55e6ff;
  --shadow: #08040f;
  --danger: #ff334e;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: "Courier New", monospace; }

body { touch-action: none; image-rendering: pixelated; }

button { font: inherit; }

.app { width: 100vw; height: 100dvh; min-height: 100vh; background: radial-gradient(circle at 50% 12%, #54306f 0 8%, transparent 34%), linear-gradient(#1b102a, #160c22 58%, #2a1222); position: relative; }

.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); overflow: hidden; }
.game-screen { padding-bottom: max(58px, calc(env(safe-area-inset-bottom) + 50px)); }

.screen.active { display: flex; }

.scanlines::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 2px, transparent 2px 5px); mix-blend-mode: screen; opacity: .35; }

.logo { z-index: 1; margin: 10px 0 4px; color: var(--gold); text-align: center; font-size: clamp(44px, 14vw, 76px); line-height: .86; letter-spacing: 3px; text-shadow: 4px 0 var(--hot), -4px 4px var(--shadow), 0 8px #000; }

.hero-art { position: relative; width: min(86vw, 360px); height: 220px; margin: 6px 0 12px; filter: drop-shadow(0 12px 0 #09040d); animation: idleBuck 1.3s steps(3) infinite; }

.arena { position: relative; width: min(92vw, 430px); height: 36dvh; min-height: 220px; margin: 10px auto 8px; border: 6px solid var(--ink); background: linear-gradient(#71447a 0 46%, #2f7d42 47% 100%); box-shadow: 0 0 0 5px var(--shadow), inset 0 -26px #215b32; overflow: hidden; }

.arena::before { content: ""; position: absolute; inset: auto 0 36%; height: 18px; background: repeating-linear-gradient(90deg, #55301b 0 22px, #7a4a24 22px 31px); box-shadow: 0 -52px 0 rgba(255,200,87,.12); }

.pov-arena { --scene-tilt: 0deg; --scene-shift: 0px; --buck: 0px; height: 45dvh; min-height: 330px; max-height: 560px; background: #1b102a; perspective: 520px; }
.pov-arena::before { display: none; }
.pov-world { position: absolute; inset: -11% -12% -4%; transform-origin: 50% 68%; transform: translateX(var(--scene-shift)) rotate(var(--scene-tilt)); transition: transform .05s linear; background: url("assets/ai-arena-pov.webp") center / cover no-repeat, url("assets/arena-pov.svg") center / cover no-repeat; filter: saturate(1.08) contrast(1.05); }
.pov-world > * { display: none; }
.has-ai-full-pov .pov-world { inset: -8% -10%; background: url("assets/ai-full-pov.webp") center / cover no-repeat; filter: saturate(1.03) contrast(1.02); }
.has-ai-full-pov .pov-boar, .has-ai-full-pov .pov-rider { display: none; }
.has-ai-parts .pov-world { inset: -8% -10%; background: url("assets/ai-arena-clean.webp") center / cover no-repeat; filter: saturate(1.03) contrast(1.02); }
.has-ai-parts .pov-boar { display: block; bottom: -20px; width: min(82vw, 420px); height: min(68vw, 340px); background-image: url("assets/ai-boar-head-1.webp"); }
.has-ai-parts .pov-rider { display: block; height: min(58vw, 270px); background-image: url("assets/ai-rider-legs-1.webp"); }
.has-ai-sheet .pov-world { inset: -8% -10%; background-image: url("assets/dzikie_rodeo_warstwy.webp"); background-size: 298% 267%; background-position: 19.8% 0%; filter: saturate(1.05) contrast(1.04); }
.has-ai-sheet .pov-boar { display: block; bottom: -18px; width: min(82vw, 420px); height: min(45vw, 230px); background-image: url("assets/dzikie_rodeo_warstwy.webp"); background-size: 270% 668%; background-position: var(--boar-sheet-x, 7%) var(--boar-sheet-y, 46%); filter: drop-shadow(0 16px 12px rgba(0,0,0,.5)); }
.has-ai-sheet .pov-rider { display: block; height: min(37vw, 170px); background-image: url("assets/dzikie_rodeo_warstwy.webp"); background-size: 210% 905%; background-position: var(--legs-sheet-x, 0%) 100%; filter: drop-shadow(0 12px 10px rgba(0,0,0,.45)); }
.sky { position: absolute; inset: 0 0 39%; background: linear-gradient(#1232a2 0%, #1f59c8 52%, #5b8bd9 100%); overflow: hidden; }
.sky::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px); }
.cloud { position: absolute; width: 74px; height: 20px; background: #d8d7c4; box-shadow: 18px -9px #f1ead5, 38px -3px #b8b9b7, 58px 4px #7c91bd; opacity: .8; }
.cloud.a { left: 12%; top: 15%; transform: scale(1.1); }
.cloud.b { right: 11%; top: 19%; }
.cloud.c { left: 42%; top: 34%; transform: scale(.65); }
.dirt { position: absolute; left: -6%; right: -6%; bottom: -2%; height: 58%; background: radial-gradient(ellipse at 50% 0, rgba(245,179,91,.35), transparent 38%), repeating-linear-gradient(12deg, #6b441f 0 7px, #7d5228 7px 11px, #4f3118 11px 15px, #9a6830 15px 18px); clip-path: polygon(25% 0, 75% 0, 110% 100%, -10% 100%); }
.grandstand { position: absolute; bottom: 34%; width: 40%; height: 42%; transform-origin: 50% 100%; }
.grandstand.left { left: -2%; transform: skewY(13deg) rotate(-2deg); }
.grandstand.right { right: -2%; transform: skewY(-13deg) rotate(2deg); }
.grandstand .roof { position: absolute; left: -9%; right: -9%; top: 0; height: 28%; background: repeating-linear-gradient(45deg, #16100d 0 7px, #4b2e18 7px 12px); border-bottom: 5px solid #1b0e08; clip-path: polygon(0 74%, 88% 0, 100% 28%, 13% 100%); }
.grandstand.right .roof { clip-path: polygon(0 28%, 12% 0, 100% 74%, 87% 100%); }
.grandstand .crowd { position: absolute; left: 5%; right: 5%; bottom: 0; height: 72%; background: repeating-radial-gradient(circle at 8px 10px, #f1b36d 0 3px, transparent 4px 14px), repeating-radial-gradient(circle at 18px 22px, #4db1ff 0 3px, transparent 4px 17px), repeating-radial-gradient(circle at 30px 16px, #ffd857 0 3px, transparent 4px 19px), #22140e; border: 4px solid #24140c; animation: crowdJump .42s steps(2) infinite; }
.grandstand .bunting, .gate .bunting { position: absolute; left: 8%; right: 8%; bottom: 8%; height: 18px; background: repeating-linear-gradient(90deg, #c61d35 0 12px, #fff 12px 20px, #1944a3 20px 32px); clip-path: polygon(0 0, 100% 0, 92% 100%, 82% 20%, 72% 100%, 62% 20%, 52% 100%, 42% 20%, 32% 100%, 22% 20%, 12% 100%); }
.gate { position: absolute; left: 35%; right: 35%; bottom: 35%; height: 27%; background: repeating-linear-gradient(45deg, #4b2b15 0 10px, #7b4c24 10px 18px); border: 5px solid #201108; box-shadow: 0 -22px 0 #2b180b; }
.gate::before { content: ""; position: absolute; left: -20%; right: -20%; top: -28px; height: 28px; background: #5d3519; border: 4px solid #1b0e08; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.gate .flag { position: absolute; left: 46%; top: -83px; width: 7px; height: 58px; background: #25120a; }
.gate .flag::after { content: ""; position: absolute; left: 7px; top: 4px; width: 34px; height: 20px; background: #c92d21; clip-path: polygon(0 0, 100% 45%, 0 100%); animation: flagWave .55s steps(2) infinite; }
.pov-boar { position: absolute; left: 50%; bottom: -16px; width: min(74vw, 360px); height: min(62vw, 300px); transform: translateX(-50%) translateY(var(--buck)); transform-origin: 50% 96%; background: url("assets/ai-boar-pov.webp") center bottom / contain no-repeat, url("assets/pov-boar.svg") center bottom / contain no-repeat; filter: drop-shadow(0 16px 12px rgba(0,0,0,.5)); }
.pov-boar > * { display: none; }
.pov-head { position: absolute; left: 55px; right: 55px; bottom: 0; height: 155px; background: repeating-linear-gradient(102deg, #1a1410 0 5px, #4d3a2a 5px 9px, #2d2218 9px 13px, #7b6041 13px 16px); border-radius: 48% 48% 10% 10%; box-shadow: inset 18px 0 #19120d, inset -18px 0 #6c5438; animation: headRoll .62s steps(3) infinite; }
.pov-mane { position: absolute; left: 92px; right: 92px; bottom: 78px; height: 118px; z-index: 2; background: repeating-linear-gradient(92deg, transparent 0 5px, #070504 5px 9px, transparent 9px 14px); clip-path: polygon(50% 0, 90% 100%, 10% 100%); animation: maneShake .22s steps(2) infinite; }
.pov-horn { position: absolute; bottom: 84px; width: 38px; height: 128px; background: linear-gradient(90deg, #3a2518, #fff1c7 35%, #9a8060 64%, #2b1b14); border: 4px solid #1a100b; z-index: 3; }
.pov-horn.left { left: 28px; border-radius: 100% 0 28% 100%; transform: rotate(-13deg); clip-path: polygon(82% 0, 100% 100%, 0 100%, 24% 18%); animation: hornLeft .38s steps(2) infinite; }
.pov-horn.right { right: 28px; border-radius: 0 100% 100% 28%; transform: rotate(13deg); clip-path: polygon(18% 0, 76% 18%, 100% 100%, 0 100%); animation: hornRight .38s steps(2) infinite; }
.pov-ear { position: absolute; bottom: 62px; width: 40px; height: 40px; background: #2b1d14; border: 4px solid #120b08; z-index: 1; }
.pov-ear.left { left: 48px; transform: rotate(-28deg); }
.pov-ear.right { right: 48px; transform: rotate(28deg); }
.pov-rider { position: absolute; left: 0; right: 0; bottom: -22px; height: min(54vw, 250px); pointer-events: none; transform: translateY(var(--buck)); background: url("assets/ai-rider-legs.webp") center bottom / contain no-repeat, url("assets/pov-legs.svg") center bottom / contain no-repeat; filter: drop-shadow(0 12px 10px rgba(0,0,0,.45)); }
.pov-rider > * { display: none; }
.pov-rider .leg { position: absolute; bottom: 0; width: 82px; height: 170px; background: repeating-linear-gradient(105deg, #3f3625 0 8px, #6c6045 8px 14px, #2c251a 14px 19px); border: 4px solid #120b08; z-index: 4; }
.pov-rider .leg.left { left: 5%; transform: rotate(-16deg); border-radius: 38px 38px 20px 20px; animation: riderLegL .34s steps(2) infinite; }
.pov-rider .leg.right { right: 5%; transform: rotate(16deg); border-radius: 38px 38px 20px 20px; animation: riderLegR .34s steps(2) infinite; }
.pov-rider .boot { position: absolute; bottom: 118px; width: 58px; height: 52px; background: repeating-linear-gradient(100deg, #18100c 0 7px, #4a3426 7px 13px); border: 4px solid #090503; z-index: 5; border-radius: 18px 18px 10px 10px; }
.pov-rider .boot.left { left: 13%; transform: rotate(-10deg); animation: bootKickL .34s steps(2) infinite; }
.pov-rider .boot.right { right: 13%; transform: rotate(10deg); animation: bootKickR .34s steps(2) infinite; }

.boar { position: absolute; left: 42px; bottom: 24px; width: 214px; height: 118px; transform-origin: 50% 84%; }
.hero-art .boar { left: 38px; bottom: 18px; transform: scale(1.08); }

.boar-body { position: absolute; left: 22px; top: 34px; width: 150px; height: 65px; background: #7b3f22; border: 4px solid #24110f; border-radius: 18px 34px 14px 14px; box-shadow: inset 0 9px #a95a2c, inset -20px 0 #633018; animation: boarBreath .72s steps(2) infinite; }
.boar-body::after { content: ""; position: absolute; left: 13px; top: 18px; width: 14px; height: 9px; background: #4c2115; box-shadow: 28px -8px #9a4d27, 57px 10px #4c2115, 86px -4px #9a4d27; }
.boar-bristles { position: absolute; left: 42px; top: 18px; width: 102px; height: 23px; background: repeating-linear-gradient(90deg, transparent 0 9px, #24110f 9px 13px, transparent 13px 21px); clip-path: polygon(0 100%, 8% 15%, 15% 100%, 27% 0, 36% 100%, 49% 10%, 60% 100%, 74% 0, 86% 100%, 100% 25%, 100% 100%); animation: bristleShake .45s steps(2) infinite; }
.boar-tail { position: absolute; left: 2px; top: 55px; width: 28px; height: 18px; border: 4px solid #24110f; border-right: 0; border-bottom: 0; transform-origin: 100% 50%; animation: tailWag .28s steps(2) infinite; }
.boar-ear { position: absolute; left: 128px; top: 17px; width: 28px; height: 30px; background: #7b3f22; border: 4px solid #24110f; transform: rotate(23deg); animation: earFlick .9s steps(2) infinite; }
.boar-snout { position: absolute; left: 147px; top: 51px; width: 55px; height: 36px; background: #c16b3c; border: 4px solid #24110f; border-radius: 7px; animation: headNod .52s steps(2) infinite; }
.boar-snout::after { content: ""; position: absolute; right: 8px; top: 10px; width: 6px; height: 6px; background: #24110f; box-shadow: -18px 0 #24110f; }
.boar-eye { position: absolute; left: 153px; top: 39px; width: 8px; height: 8px; background: #fff; border: 2px solid #24110f; box-shadow: 3px 3px #24110f; animation: headNod .52s steps(2) infinite; }
.boar-tusk { position: absolute; top: 81px; width: 19px; height: 10px; background: #fff3d5; border: 3px solid #24110f; animation: headNod .52s steps(2) infinite; }
.boar-tusk.left { left: 159px; transform: skewX(-25deg); }
.boar-tusk.right { left: 186px; transform: skewX(25deg); }
.boar-leg { position: absolute; top: 91px; width: 15px; height: 34px; background: #3b1c16; border: 4px solid #160908; transform-origin: 50% 0; }
.boar-leg.a { left: 43px; animation: hoofKickA .26s steps(2) infinite; }
.boar-leg.b { left: 88px; animation: hoofKickB .31s steps(2) infinite; }
.boar-leg.c { left: 124px; animation: hoofKickA .29s steps(2) infinite reverse; }
.boar-leg.d { left: 153px; animation: hoofKickB .34s steps(2) infinite reverse; }

.rider { position: absolute; left: 98px; bottom: 106px; width: 74px; height: 101px; transform-origin: 50% 96%; }
.hero-art .rider { left: 112px; bottom: 104px; }
.rider .hat { position: absolute; left: 16px; top: 1px; width: 46px; height: 13px; background: #3c2415; border: 4px solid #100908; box-shadow: 8px -10px 0 -2px #6d411e; animation: hatToss 1.15s steps(4) infinite; }
.rider .head { position: absolute; left: 25px; top: 20px; width: 27px; height: 27px; background: #f0a45f; border: 4px solid #170b07; box-shadow: inset -5px 0 #cc7743; }
.rider .head::after { content: ""; position: absolute; right: 2px; top: 8px; width: 5px; height: 5px; background: #170b07; box-shadow: -10px 1px #170b07; }
.rider .body { position: absolute; left: 21px; top: 49px; width: 35px; height: 38px; background: #2d8d56; border: 4px solid #120808; box-shadow: inset 8px 0 rgba(255,255,255,.16); }
.rider .arm { position: absolute; top: 49px; width: 14px; height: 42px; background: #f0a45f; border: 3px solid #170b07; transform-origin: 50% 0; }
.rider .arm.l { left: 5px; animation: armWaveL .34s steps(2) infinite; }
.rider .arm.r { right: 4px; animation: armWaveR .29s steps(2) infinite; }
.rider .leg { position: absolute; top: 82px; width: 13px; height: 34px; background: #334d9a; border: 3px solid #120808; transform-origin: 50% 0; }
.rider .leg.l { left: 20px; transform: rotate(25deg); }
.rider .leg.r { right: 16px; transform: rotate(-25deg); }

.skin-rider-1 .body { background: #27613f; } .skin-rider-1 .hat { background: #245b30; }
.skin-rider-2 .body { background: #b45a2a; } .skin-rider-2 .hat { background: #8c4c20; }
.skin-rider-3 .body { background: #9b4d24; } .skin-rider-3 .hat { background: #cf9b51; }
.skin-rider-4 .body { background: #ffd84a; } .skin-rider-4 .hat { background: #ffe66b; box-shadow: 9px -12px 0 -2px #e23c65; }
.skin-boar-1 .boar-body, .skin-boar-1 .boar-ear { background: #222; } .skin-boar-1 .boar-body { box-shadow: inset 0 14px #444; }
.skin-boar-2 .boar-body, .skin-boar-2 .boar-ear { background: #5a2d1c; } .skin-boar-2 { transform: scale(1.16); }
.skin-boar-3 .boar-body, .skin-boar-3 .boar-ear, .skin-boar-3 .boar-snout { background: #d6a32f; } .skin-boar-3 .boar-body { box-shadow: inset 0 14px #ffe16a; }
.skin-boar-4 .boar-body, .skin-boar-4 .boar-ear { background: #213d24; } .skin-boar-4 .boar-body { box-shadow: inset 0 14px #3d7a43; }
.skin-boar-1 .pov-head { background: repeating-linear-gradient(102deg, #090909 0 5px, #343434 5px 9px, #171717 9px 13px); }
.skin-boar-2 .pov-head { transform: scale(1.08); }
.skin-boar-3 .pov-head { background: repeating-linear-gradient(102deg, #6d4a12 0 5px, #d0a12e 5px 9px, #ffe16a 9px 13px); }
.skin-boar-4 .pov-head { background: repeating-linear-gradient(102deg, #101f12 0 5px, #31582f 5px 9px, #1d351d 9px 13px); }

.arcade-btn { z-index: 1; width: min(86vw, 340px); margin: 7px 0; padding: 14px 16px; color: var(--ink); background: #33204d; border: 4px solid var(--ink); box-shadow: 0 7px 0 var(--shadow), inset 0 0 0 4px rgba(255,255,255,.08); text-transform: uppercase; letter-spacing: 2px; cursor: pointer; }
.arcade-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--shadow); }
.arcade-btn.primary { color: #1b102a; background: var(--gold); }

.menu-stats { z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; color: var(--cyan); font-size: 15px; }

.hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(94vw, 520px); }
.hud div, .fatigue-wrap { background: rgba(0,0,0,.35); border: 4px solid var(--ink); padding: 8px; box-shadow: 0 5px 0 var(--shadow); }
.hud span, .fatigue-wrap span { display: block; color: var(--cyan); font-size: 12px; }
.hud strong { font-size: clamp(18px, 6vw, 25px); }
.fatigue-wrap { width: min(94vw, 520px); margin-top: 9px; }
.fatigue { height: 20px; background: repeating-linear-gradient(90deg, #39264e 0 13px, #1a1028 13px 18px); border: 3px solid #0d0714; }
#fatigue-bar { width: 100%; height: 100%; background: repeating-linear-gradient(90deg, hsl(var(--energy-hue), 95%, 58%) 0 13px, hsl(var(--energy-hue), 85%, 43%) 13px 18px); transition: width .08s linear, background-color .08s linear; }

.level-wrap { width: min(94vw, 520px); margin-top: 8px; padding-bottom: 0; transform: translateY(-12px); }
.level-labels { display: flex; justify-content: space-between; color: var(--cyan); font-size: 11px; }
.level { position: relative; height: 58px; border: 5px solid var(--ink); background: #12091d; box-shadow: 0 7px 0 var(--shadow), inset 0 0 18px #000; overflow: hidden; }
.safe-zone { position: absolute; left: 36%; width: 28%; top: 0; bottom: 0; background: rgba(100,255,124,.25); border-left: 3px dashed var(--green); border-right: 3px dashed var(--green); }
.center-mark { position: absolute; left: calc(50% - 2px); top: 0; bottom: 0; width: 4px; background: var(--gold); }
.ball { position: absolute; top: 8px; left: calc(50% - 20px); width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0 10%, var(--hot) 11% 55%, #94183c 56%); border: 5px solid #15080d; box-shadow: 0 4px 0 #000; }
.gyro-state { width: min(94vw, 520px); margin-top: 0; min-height: 28px; text-align: center; color: var(--cyan); font-size: 12px; transform: translateY(-8px); }
.message { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); z-index: 3; min-width: 230px; padding: 15px; text-align: center; color: #1b102a; background: var(--gold); border: 5px solid #fff7cf; box-shadow: 0 8px 0 #000; font-size: clamp(24px, 8vw, 38px); font-weight: 900; }
.hidden { display: none; }

.panel-screen { justify-content: center; gap: 12px; text-align: center; }
.panel-screen h2 { margin: 0 0 8px; color: var(--gold); font-size: clamp(34px, 11vw, 58px); text-shadow: 3px 3px #000, 5px 0 var(--hot); }
.panel-screen p { max-width: 520px; margin: 6px 0; line-height: 1.45; }
.result-grid { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; min-width: min(88vw, 390px); padding: 16px; border: 5px solid var(--ink); background: rgba(0,0,0,.36); text-align: left; }
.result-grid strong { color: var(--green); text-align: right; }
.skins-screen { justify-content: flex-start; overflow-y: auto; }
.skins-screen h3 { width: min(94vw, 520px); margin: 10px 0 0; color: var(--cyan); text-align: left; }
.skins-list { width: min(94vw, 520px); display: grid; gap: 8px; }
.skin-card { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px; background: rgba(0,0,0,.35); border: 4px solid var(--ink); text-align: left; }
.skin-card small { display: block; color: var(--cyan); }
.skin-card button { width: auto; min-width: 118px; margin: 0; padding: 9px; font-size: 13px; }

.falling #hunter { animation: fall .7s steps(4) forwards; }
.win-flash { animation: flash .6s steps(2) 2; }

@keyframes idleBuck { 35% { transform: translateY(-7px) rotate(-1deg); } 70% { transform: translateY(3px) rotate(1deg); } }
@keyframes boarBreath { 50% { transform: translateY(-3px); } }
@keyframes bristleShake { 50% { transform: translateY(-4px); } }
@keyframes tailWag { 50% { transform: rotate(-24deg) translateY(-4px); } }
@keyframes earFlick { 50% { transform: rotate(38deg) translateY(-2px); } }
@keyframes headNod { 50% { transform: translateY(-7px) rotate(-3deg); } }
@keyframes hoofKickA { 50% { transform: translate(8px, -9px) rotate(22deg); } }
@keyframes hoofKickB { 50% { transform: translate(-5px, 7px) rotate(-18deg); } }
@keyframes armWaveL { 50% { transform: rotate(-55deg) translateY(-6px); } }
@keyframes armWaveR { 50% { transform: rotate(58deg) translateY(-7px); } }
@keyframes hatToss { 0%, 100% { transform: translate(0, 0) rotate(0); } 35% { transform: translate(8px, -18px) rotate(12deg); } 65% { transform: translate(-5px, -10px) rotate(-8deg); } }
@keyframes crowdJump { 50% { transform: translateY(-4px); filter: brightness(1.2); } }
@keyframes flagWave { 50% { transform: skewY(-18deg); } }
@keyframes headRoll { 35% { transform: translateY(-8px) rotate(-2deg); } 70% { transform: translateY(5px) rotate(2deg); } }
@keyframes maneShake { 50% { transform: translateY(-6px) scaleX(1.08); } }
@keyframes hornLeft { 50% { transform: translateY(-8px) rotate(-18deg); } }
@keyframes hornRight { 50% { transform: translateY(-8px) rotate(18deg); } }
@keyframes riderLegL { 50% { transform: rotate(-22deg) translateY(-12px); } }
@keyframes riderLegR { 50% { transform: rotate(22deg) translateY(9px); } }
@keyframes bootKickL { 50% { transform: rotate(-18deg) translateY(-15px); } }
@keyframes bootKickR { 50% { transform: rotate(18deg) translateY(10px); } }
@keyframes fall { to { transform: translate(-76px, 88px) rotate(-96deg); } }
@keyframes flash { 50% { filter: brightness(2); } }

@media (max-height: 720px) {
  .logo { font-size: clamp(36px, 12vw, 54px); }
  .hero-art { height: 180px; transform: scale(.86); margin: -8px 0 -2px; }
  .arcade-btn { padding: 10px 12px; margin: 5px 0; }
  .arena { height: 31dvh; min-height: 190px; }
  .pov-arena { height: 40dvh; min-height: 270px; }
  .pov-boar { width: min(72vw, 300px); height: min(56vw, 230px); }
  .pov-head { left: 48px; right: 48px; height: 126px; }
  .pov-horn { bottom: 70px; height: 104px; width: 32px; }
  .pov-rider { height: min(48vw, 190px); }
  .pov-rider .leg { width: 64px; height: 132px; }
  .pov-rider .boot { bottom: 92px; width: 48px; height: 43px; }
  .game-screen { padding-bottom: max(46px, calc(env(safe-area-inset-bottom) + 38px)); }
  .level { height: 52px; }
  .ball { top: 7px; width: 36px; height: 36px; }
}