:root { --ink:#f4f0d8; --navy:#080b18; --purple:#697080; --orange:#df443c; --cream:#f4f0d8; --pink:#f05a5a; --yellow:#f8d545; --sky:#151b31; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:#191b2b; background:#e6dfc8; font:1rem/1.5 Arial,Helvetica,sans-serif; }
button { font:inherit; cursor:pointer; }
.topbar { width:min(1180px,calc(100% - 2rem)); margin:auto; padding:1.15rem 0; border-bottom:2px solid var(--ink); display:flex; justify-content:space-between; }
.back-link { color:#191b2b; text-decoration:none; font:.78rem monospace; }.back-link:hover { color:var(--orange); }
.language-switcher { display:flex; gap:.25rem; font:.75rem monospace; }.language-switcher a { padding:.25rem .5rem; text-decoration:none; border:1px solid transparent; }.language-switcher a.active,.language-switcher a:hover { background:var(--yellow); border-color:var(--ink); }
.game-shell { width:min(1180px,calc(100% - 2rem)); margin:auto; padding:3.8rem 0 5rem; }.game-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:2.5rem; }.machine-label { margin:0 0 .75rem; color:var(--orange); font:700 .7rem monospace; letter-spacing:.13em; }.game-heading h1 { margin:0; font:900 clamp(4.5rem,12vw,9rem)/.78 Arial,sans-serif; letter-spacing:-.09em; color:var(--navy); }.game-heading>div>p:last-child { margin:1rem 0 0; font-size:1.1rem; }.title-mark { position:relative; width:7rem; height:7rem; margin-bottom:1rem; transform:rotate(6deg); background:var(--orange); border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink); }.title-mark span { position:absolute; inset:1rem; display:grid; place-items:center; border:2px solid var(--ink); color:var(--ink); font:700 1.1rem monospace; }.title-mark i { position:absolute; width:1.5rem; height:1.5rem; right:-.8rem; bottom:-.7rem; background:var(--yellow); border:2px solid var(--ink); transform:rotate(20deg); }
.game-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(16rem,.5fr); gap:2.7rem; align-items:start; }.machine { padding:1.1rem; border:2px solid #191b2b; background:var(--orange); box-shadow:9px 9px 0 #191b2b; }.machine-top,.machine-status { display:flex; justify-content:space-between; gap:1rem; color:#191b2b; font:700 .7rem monospace; }.machine-top { padding-bottom:.8rem; }.screen-frame { position:relative; padding:.8rem; background:#191b2b; border:2px solid #191b2b; }.screen-frame canvas { display:block; width:100%; height:auto; aspect-ratio:900/560; background:var(--sky); image-rendering:pixelated; }.screen-message { position:absolute; inset:33% 25%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.65rem; padding:1rem; color:var(--cream); border:2px solid var(--yellow); background:rgba(8,11,24,.93); text-align:center; font:.75rem monospace; }.screen-message strong { color:var(--yellow); font-size:1.25rem; text-transform:uppercase; }.screen-message.hidden { display:none; }.machine-status { padding:.85rem 0; }.machine-status strong { color:#191b2b; }.play-controls { display:flex; align-items:center; gap:1rem; padding-top:.8rem; border-top:2px solid #191b2b; }.button { padding:.7rem 1rem; border:2px solid #191b2b; background:var(--cream); box-shadow:3px 3px 0 #191b2b; font-weight:700; }.button:hover,.button:focus-visible { transform:translate(2px,2px); box-shadow:1px 1px 0 #191b2b; }.button.primary { background:var(--navy); color:var(--yellow); }.key-hint { color:#191b2b; font:700 .68rem monospace; }.flap-button { display:none; }
.side-panel { display:grid; gap:1.5rem; }.poster { min-height:20rem; padding:1.3rem; overflow:hidden; position:relative; border:2px solid var(--ink); background:var(--purple); color:var(--cream); box-shadow:6px 6px 0 var(--pink); }.poster .machine-label { color:var(--yellow); }.poster-copy { position:absolute; z-index:2; left:1.2rem; bottom:.9rem; margin:0; font:700 1.7rem/.85 Arial,sans-serif; letter-spacing:-.06em; }.poster-copy b { color:var(--yellow); font-size:3rem; }.poster-bird { position:absolute; width:12rem; height:10rem; right:-1.8rem; top:3.3rem; transform:rotate(-9deg); }.bird-body { position:absolute; width:7rem; height:3.8rem; right:1.1rem; top:3.3rem; border:5px solid var(--ink); border-radius:50%; background:var(--orange); }.rider { position:absolute; width:2.3rem; height:2.6rem; right:3.5rem; top:1.2rem; border:4px solid var(--ink); border-radius:55% 55% 45% 45%; background:var(--yellow); }.wing { position:absolute; width:5.5rem; height:4rem; right:4rem; top:1.7rem; background:var(--yellow); border:5px solid var(--ink); border-radius:80% 10% 80% 10%; transform:rotate(-30deg); }.lance { position:absolute; z-index:3; width:8rem; height:4px; right:4.2rem; top:2.4rem; background:var(--ink); transform:rotate(-12deg); }.lance:after { content:''; position:absolute; right:-.4rem; top:-.25rem; border-left:.7rem solid var(--ink); border-top:.35rem solid transparent; border-bottom:.35rem solid transparent; }.info-card { padding:1.3rem; border:2px solid var(--ink); background:#fff4dc; }.info-card p:not(.machine-label) { margin:.5rem 0 1.3rem; font-size:.9rem; }.legend { padding-top:.8rem; border-top:1px solid #aaa; font:700 .65rem monospace; }.legend span { display:inline-block; width:.65rem; height:.65rem; margin:0 .25rem 0 .5rem; border:1px solid var(--ink); border-radius:50%; }.legend span:first-child { margin-left:0; background:var(--yellow); }.legend .enemy-dot { background:var(--pink); }
.game-over { width:min(25rem,calc(100% - 2rem)); padding:2rem; border:2px solid var(--ink); background:var(--cream); box-shadow:8px 8px 0 var(--ink); }.game-over::backdrop { background:rgba(25,27,43,.72); }.game-over h2 { margin:0 0 1.5rem; font-size:2rem; letter-spacing:-.05em; }.game-over h2 span { color:var(--orange); }
@media (max-width:760px) { .game-shell { padding-top:2.8rem; }.game-heading { align-items:start; }.title-mark { width:5rem; height:5rem; }.game-layout { grid-template-columns:1fr; gap:2rem; }.side-panel { grid-template-columns:1fr 1fr; }.poster { min-height:17rem; }.poster-copy { font-size:1.2rem; }.poster-copy b { font-size:2rem; }.play-controls { flex-wrap:wrap; }.flap-button { display:block; width:100%; margin-top:1rem; padding:1rem; border:2px solid var(--ink); background:var(--yellow); box-shadow:3px 3px 0 var(--ink); font-weight:900; letter-spacing:.15em; }.flap-button span { margin-right:.6rem; }.flap-button small { display:block; margin-top:.2rem; font: .55rem monospace; letter-spacing:0; } }
@media (max-width:480px) { .game-heading h1 { font-size:4.5rem; }.title-mark { width:4rem; height:4rem; }.title-mark span { inset:.5rem; font-size:.75rem; }.side-panel { grid-template-columns:1fr; }.poster { min-height:14rem; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }

.utility-button { padding-inline:.75rem; }
.mobile-controls { display:none; }
.scoreboard { padding:1.3rem; border:2px solid #191b2b; background:#fff4dc; }
.scoreboard h2 { margin:0 0 1rem; color:#191b2b; font-size:2rem; letter-spacing:-.05em; }
.scores { min-height:11rem; margin:0; padding:0; list-style:none; counter-reset:scores; }
.scores li { display:grid; grid-template-columns:2rem 1fr auto; gap:.6rem; padding:.5rem 0; border-bottom:1px solid #b6ae9a; counter-increment:scores; font:700 .8rem monospace; }
.scores li::before { content:counter(scores, decimal-leading-zero); color:var(--orange); }
.scores .empty { display:block; padding:.8rem 0; color:#5b5a53; font: .8rem/1.4 monospace; }.scores .empty::before { content:none; }
.game-over label { display:block; margin-bottom:.35rem; color:#191b2b; font:.75rem monospace; }.game-over input { width:100%; padding:.7rem; border:2px solid #191b2b; text-transform:uppercase; }.form-actions { display:flex; flex-wrap:wrap; gap:.7rem; }.form-error { min-height:1.2rem; margin:.5rem 0 0; color:var(--orange); font-size:.8rem; }.button.secondary { background:transparent; box-shadow:none; }
.machine:fullscreen { width:100vw; height:100vh; padding:1rem; overflow:auto; background:var(--orange); }.machine:fullscreen .screen-frame { max-width:1100px; margin:auto; }.machine:fullscreen canvas { max-height:calc(100vh - 170px); }.machine:fullscreen .mobile-controls { display:flex; }

@media (max-width:760px) {
    .mobile-controls { display:flex; align-items:stretch; justify-content:center; gap:.7rem; margin-top:.8rem; }
    .direction-button, .flap-button { min-width:4rem; min-height:3.5rem; border:2px solid #191b2b; background:var(--cream); box-shadow:3px 3px 0 #191b2b; font-weight:900; }
    .flap-button { display:block; flex:1; margin:0; padding:.65rem 1rem; background:var(--yellow); letter-spacing:.15em; }
    .flap-button span { margin-right:.5rem; }.flap-button small { display:block; margin-top:.1rem; font:.55rem monospace; letter-spacing:0; }
    .direction-button:active, .flap-button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 #191b2b; }
    .key-hint { display:none; }.play-controls { justify-content:space-between; }.utility-button { font-size:.75rem; }
    .scoreboard { order:3; }.game-over { max-height:calc(100vh - 2rem); overflow:auto; }
}

@media (max-width:760px) and (orientation:landscape) {
    .topbar { padding:.5rem 0; }.game-shell { padding:.7rem 0 1.5rem; }.game-heading { margin-bottom:.7rem; }.game-heading h1 { font-size:3.7rem; }.game-heading>div>p:last-child, .title-mark { display:none; }.game-layout { gap:1rem; }.machine { padding:.6rem; }.screen-frame { padding:.45rem; }.machine-status { padding:.35rem 0; }.mobile-controls { margin-top:.45rem; }.side-panel { display:none; }
}