html, body { min-height:100%; margin:0; background:#100b21; color:#f7f2ff; }
body.arcade-site { background:radial-gradient(ellipse at 50% 0,#321d58 0,#150d29 48%,#100b21 100%); }
.flapper-page { width:min(100% - 24px, 720px); margin:0 auto; padding:14px 0 36px; color:#f7f2ff; }
.flapper-cabinet {
    display:grid; gap:12px; padding:clamp(14px,3vw,24px);
    border:3px solid #d776ff; border-radius:12px;
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),radial-gradient(ellipse at top,#281a49,#100d22 72%);
    box-shadow:0 0 24px rgba(215,118,255,.24),inset 0 0 24px rgba(0,0,0,.32);
}
.flapper-topline { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.flapper-page .game-brand { color:#4ce8ff; font:800 .7rem/1.4 Inter,system-ui,sans-serif; letter-spacing:.1em; }
.flapper-page h1 { margin:0; color:#ffe17b; font:400 clamp(.9rem,3vw,1.2rem)/1.5 var(--font-pixel,monospace); text-align:center; text-shadow:2px 2px #9c3260; }
.flapper-page .game-subtitle { margin:-8px 0 0; color:#4ce8ff; font:400 .56rem/1.6 var(--font-pixel,monospace); letter-spacing:.06em; text-align:center; }
.flapper-page .sound-toggle { min-height:40px; padding:8px 12px; border:1px solid #8066bf; border-radius:6px; color:#f8f4ff; background:#21183d; font:700 .85rem/1.2 Inter,system-ui,sans-serif; cursor:pointer; }
.flapper-hud { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #564879; border-radius:7px; color:#c6bed9; background:#080914; font:700 .68rem/1.35 var(--font-pixel,monospace); }
.flapper-hud div { display:grid; gap:4px; }
.flapper-hud div:last-child { text-align:right; }
.flapper-hud strong { color:#ffe17b; font-size:.8rem; }
.flapper-stage { position:relative; width:min(100%,430px); margin:0 auto; overflow:hidden; border:2px dashed #d776ff; border-radius:8px; background:#100d22; touch-action:manipulation; }
.flapper-stage canvas { display:block; width:100%; height:auto; aspect-ratio:340/380; cursor:pointer; }
.flapper-stage[hidden] { display:none; }
.flapper-page .game-start-overlay { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:18px; background:rgba(7,6,19,.48); text-align:center; }
.flapper-page .game-start-overlay[hidden] { display:none !important; }
.flapper-page .game-start-overlay h2 { margin:0; color:#ffe17b; font:400 clamp(.8rem,2.8vw,1rem)/1.6 var(--font-pixel,monospace); text-shadow:0 2px 5px rgba(0,0,0,.95); }
.flapper-page .game-start-overlay p:not(.overlay-kicker) { max-width:43ch; margin:0; color:#ded6ea; font:500 .95rem/1.5 Inter,system-ui,sans-serif; text-shadow:0 2px 5px rgba(0,0,0,.95); }
.flapper-page .overlay-kicker { margin:0; color:#4ce8ff; font:800 .68rem/1.4 Inter,system-ui,sans-serif; letter-spacing:.12em; }
.flapper-page .arcade-primary-button { min-height:48px; padding:12px 20px; border:1px solid #ff8da5; border-radius:8px; color:#fff; background:linear-gradient(180deg,#f34163,#bc1c48); box-shadow:0 4px #64142f; font:800 1rem/1.2 Inter,system-ui,sans-serif; cursor:pointer; }
.flapper-instructions { margin:0; color:#d4cde3; font:500 .9rem/1.5 Inter,system-ui,sans-serif; text-align:center; }
.flapper-page .game-scoreboards { margin-top:30px; }
.flapper-scoreboards {
    --scores-mint: #4ce8ff;
    --scores-mint-dim: #d776ff;
    --scores-black: #080817;
    --scores-line: rgba(76,232,255,.4);
    border-color: #524175;
    background:
        repeating-linear-gradient(0deg, rgba(76,232,255,.02) 0, rgba(76,232,255,.02) 1px, transparent 1px, transparent 4px),
        linear-gradient(145deg, #211536, #100d22);
}
.flapper-scoreboards .scoreboard-period { border-color: rgba(76,232,255,.38); }
.flapper-page .game-hall-link { text-align:center; }
.flapper-page .game-result-panel[hidden] { display:none; }
.flapper-page .result-lock { margin:14px 0 0; color:#c4bfd6; font:600 .85rem/1.4 Inter,system-ui,sans-serif; }
.flapper-page .sound-toggle:focus-visible,.flapper-page .arcade-primary-button:focus-visible { outline:3px solid #ffe17b; outline-offset:3px; }
@media(max-width:520px) {
    .flapper-page { width:min(100% - 16px,720px); padding-top:8px; }
    .flapper-cabinet { gap:10px; padding:12px; }
}