/* Flap NYC — 画面の UI。シーンの邪魔をしない（メニューと結果は下寄せ・半透明）。 */
:root { --ink: #fff; --pink: #ff4fa0; --cyan: #4fe6ff; --dark: #120f1c; font-family: 'Lilita One', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1c2f58; color: var(--ink); touch-action: none; user-select: none; -webkit-user-select: none; }
canvas { display: block; position: fixed; inset: 0; }
[hidden] { display: none !important; }

.hud { position: fixed; z-index: 2; top: max(14px, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; pointer-events: none; }
.score { font-size: clamp(64px, 17vw, 110px); line-height: 1; color: #fff; -webkit-text-stroke: 7px var(--dark); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(18, 15, 28, 0.55); letter-spacing: 2px; }
.score.pop { animation: pop 0.28s ease-out; }
@keyframes pop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.banner { margin-top: 4px; font-size: clamp(22px, 6vw, 34px); letter-spacing: 4px; text-transform: uppercase; color: var(--cyan); -webkit-text-stroke: 5px var(--dark); paint-order: stroke fill; opacity: 0; transform: translateY(-6px); transition: opacity 0.4s, transform 0.4s; }
.banner.show { opacity: 1; transform: none; }

.mute { position: fixed; z-index: 5; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(18, 15, 28, 0.45); color: #fff; font-size: 18px; cursor: pointer; backdrop-filter: blur(4px); }
.flash { position: fixed; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash 0.35s ease-out; }
@keyframes flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }

.hint { position: fixed; z-index: 3; left: 0; right: 0; bottom: 22%; text-align: center; font-size: clamp(24px, 7vw, 38px); letter-spacing: 4px; color: #fff; -webkit-text-stroke: 6px var(--dark); paint-order: stroke fill; animation: blink 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes blink { 50% { opacity: 0.35; } }

.panel { position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); width: min(380px, calc(100% - 28px)); text-align: center; }
.menu { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; padding: max(44px, 7vh) 0 max(26px, env(safe-area-inset-bottom)); pointer-events: none; }
.menu .cta, .menu .credit { pointer-events: auto; }
.menu-bottom { padding-bottom: 2vh; }
.title { margin: 0; font-size: clamp(64px, 20vw, 104px); line-height: 0.88; letter-spacing: 3px; color: #ffe066; -webkit-text-stroke: 9px var(--dark); paint-order: stroke fill; text-shadow: 0 8px 0 rgba(18, 15, 28, 0.6), 0 0 40px rgba(255, 120, 80, 0.55); transform: rotate(-3deg); }
.title span { display: block; color: var(--pink); text-shadow: 0 8px 0 rgba(18, 15, 28, 0.6), 0 0 34px rgba(255, 79, 160, 0.9); }
.sub { margin: 0 0 6px; font-size: 19px; line-height: 1.3; color: #fff; -webkit-text-stroke: 4px var(--dark); paint-order: stroke fill; }
.cta { display: block; width: 100%; margin: 10px 0 0; border: 0; border-radius: 16px; padding: 14px; font: inherit; font-size: 26px; letter-spacing: 2px; color: #fff; background: linear-gradient(#ff6aa8, #ff3d8a); box-shadow: 0 5px 0 #a8185a, 0 10px 28px rgba(0, 0, 0, 0.35); cursor: pointer; }
.cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #a8185a; }
.cta.ghost { background: rgba(18, 15, 28, 0.55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); font-size: 21px; padding: 11px; }
.best { margin: 12px 0 0; font-size: 18px; color: #fff; -webkit-text-stroke: 4px var(--dark); paint-order: stroke fill; }
.credit { margin: 14px 0 0; font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }

.result { top: max(70px, 9vh); background: rgba(18, 15, 28, 0.72); backdrop-filter: blur(10px); border-radius: 24px; padding: 22px 22px 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.14); animation: rise 0.5s cubic-bezier(0.2, 1.2, 0.4, 1); }
@keyframes rise { 0% { transform: translate(-50%, 40px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }
.result-label { margin: 0; font-size: 18px; letter-spacing: 4px; color: var(--cyan); }
.r-score { margin: 0; font-size: 110px; line-height: 1; color: #fff; text-shadow: 0 0 30px rgba(255, 79, 160, 0.8); }
.r-unit { margin: -4px 0 8px; font-size: 18px; letter-spacing: 3px; opacity: 0.8; }
.r-phase { margin: 6px 0 2px; font-size: 19px; color: #ffe066; white-space: nowrap; }
.r-best { margin: 0 0 6px; font-size: 17px; opacity: 0.85; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ?og=1（X カード用の絵）: タイトルだけ見せる */
.og .mute, .og .menu-bottom, .og .hud { display: none !important; }
.og .menu { justify-content: center; left: 70%; width: 46%; }
.og .title { font-size: 130px; }