:root { color-scheme: dark; --ink:#fff8e9; --muted:#d8c5b9; --wine:#321c32; --plum:#51243e; --orange:#ff8d3b; --gold:#ffd56b; --teal:#66d3bb; --red:#fb5f56; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); font-family:"Hiragino Sans","Yu Gothic",system-ui,sans-serif; background:radial-gradient(circle at 50% -20%,#773553 0,#351c33 45%,#1f1727 100%); }
button { font:inherit; }
.app-shell { position:relative; overflow:hidden; min-height:100vh; min-height:100dvh; display:grid; place-items:center; isolation:isolate; }
.app-shell::before { content:""; position:absolute; inset:0; z-index:-2; opacity:.32; background-image:linear-gradient(35deg,transparent 48%,#fba24a 49%,transparent 51%),linear-gradient(-40deg,transparent 48%,#e05850 49%,transparent 51%); background-size:90px 90px; mask-image:radial-gradient(ellipse at center,black,transparent 78%); }
.app-shell::after { content:""; position:absolute; width:36rem; height:36rem; border:1px solid #ffb45f44; border-radius:50%; z-index:-1; top:50%; left:50%; transform:translate(-50%,-49%); box-shadow:0 0 0 38px #ffb45f0a,0 0 0 76px #ffb45f08; }
.screen { width:min(100%,760px); min-height:100vh; min-height:100dvh; padding:clamp(1.5rem,5vh,4rem) clamp(1.25rem,5vw,3.5rem); text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
[hidden] { display:none !important; }
.eyebrow { color:var(--gold); letter-spacing:.2em; font-size:.75rem; font-weight:800; margin:0 0 .85rem; }
.title-screen h1 { white-space:nowrap; font-size:clamp(2.65rem,14vw,7.8rem); line-height:.9; margin:0; letter-spacing:-.1em; text-shadow:0 8px 0 #1f132466,0 0 36px #ff804755; }
.title-screen h1 span { color:var(--orange); }
.title-question { font-size:clamp(1.25rem,4vw,1.8rem); font-weight:800; margin:2rem 0 .6rem; }
.intro { line-height:1.9; color:var(--muted); margin:0 0 2rem; font-size:1rem; }.intro strong { color:var(--gold); }
.primary-button { cursor:pointer; min-width:220px; border:0; border-radius:999px; padding:1rem 1.7rem; color:#351a2d; font-size:1.15rem; font-weight:900; background:linear-gradient(135deg,var(--gold),var(--orange)); box-shadow:0 7px 0 #b34b38,0 14px 27px #130c1d77; transition:transform .15s,filter .15s; }
.primary-button:hover { filter:brightness(1.1); transform:translateY(-2px); }.primary-button:active { transform:translateY(5px); box-shadow:0 2px 0 #b34b38; }.primary-button span { margin-left:.4em; }
.high-score-label { margin:2.5rem 0 .5rem; color:var(--muted); font-size:.78rem; letter-spacing:.12em; }.high-score-label strong { margin-left:.4rem; color:var(--ink); font-size:1.25rem; }.key-hint { margin:0; font-size:.75rem; color:#c6aeb4; }
.game-screen { justify-content:space-between; position:relative; }.hud { width:100%; display:flex; text-align:left; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.12em; }.hud div { display:grid; gap:.22rem; }.hud strong { color:var(--ink); font-size:1.1rem; letter-spacing:.02em; }
.game-content { width:100%; margin:auto; display:flex; flex-direction:column; align-items:center; }.question { font-size:clamp(1.15rem,4vw,1.55rem); margin:1rem 0; font-weight:800; }.word { max-width:100%; margin:.5rem 0 1rem; font-size:clamp(3.4rem,15vw,7rem); line-height:1.18; font-weight:900; letter-spacing:-.08em; overflow-wrap:anywhere; text-shadow:0 8px 20px #120b1d8f; }.rhythm-display { width:clamp(7.4rem,27vw,10.5rem); height:clamp(7.4rem,27vw,10.5rem); display:grid; place-items:center; border-radius:50%; color:#321a2d; font-size:clamp(4.2rem,16vw,7rem); font-weight:1000; line-height:1; background:radial-gradient(circle at 35% 30%,#fff2b0,var(--gold) 44%,#f08b3d 100%); box-shadow:0 0 0 8px #ffd56b22,0 18px 35px #160b2180; }.rhythm-display.pop { animation:pop .22s cubic-bezier(.19,1.8,.65,1); }.rhythm-display.success { background:radial-gradient(circle at 35% 30%,#e4fff3,#6ee5b9 48%,#2d9d89); font-size:clamp(2.7rem,10vw,4.5rem); }.rhythm-display.fail { background:radial-gradient(circle at 35% 30%,#fff0d3,#ff9279 48%,#d94f61); font-size:clamp(2.7rem,10vw,4.5rem); }.answer-area { width:min(100%,620px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem,3vw,1.5rem); }.answer { min-height:clamp(4.7rem,13vw,6.3rem); cursor:pointer; border:3px solid #ffffff35; border-radius:1.25rem; color:var(--ink); font-size:clamp(1.25rem,4vw,1.65rem); font-weight:900; background:#ffffff12; box-shadow:0 8px 0 #140c1c88; transition:transform .14s,background .14s,border-color .14s,box-shadow .14s; }.answer:hover:not(:disabled) { background:#ffffff23; transform:translateY(-2px); }.answer:active:not(:disabled) { transform:translateY(5px); box-shadow:0 3px 0 #140c1c88; }.answer .check { display:inline-grid; place-items:center; width:1.25em; height:1.25em; margin-right:.3em; border-radius:50%; opacity:0; color:#311b30; background:#fff5bb; transform:scale(.4); transition:.14s; }.answer.selected { border-width:5px; transform:scale(1.035); }.answer.yes.selected { border-color:var(--teal); background:#41bfa83d; box-shadow:0 0 23px #62dfbc77,0 8px 0 #164a4a; }.answer.no.selected { border-color:#ff9a5e; background:#f7794d3d; box-shadow:0 0 23px #ff925877,0 8px 0 #6e302c; }.answer.selected .check { opacity:1; transform:scale(1); }.answer:disabled { cursor:not-allowed; opacity:.62; }.answer-area.locked .answer.selected { animation:selectedPulse .5s ease-in-out infinite alternate; }.bpm-up { pointer-events:none; position:absolute; top:18%; left:50%; opacity:0; transform:translate(-50%,-20px) scale(.85); color:var(--gold); text-shadow:0 3px #71302d; font-size:1.25rem; font-weight:1000; transition:.2s; }.bpm-up.show { opacity:1; transform:translate(-50%,0) scale(1); }
.over-screen h2 { margin:.1rem 0 1.3rem; color:#ff9071; font-size:clamp(3rem,13vw,5.5rem); letter-spacing:.03em; text-shadow:0 5px #722f3b; }.result-score { font-size:1.45rem; margin:0 0 .4rem; }.result-score strong { color:var(--gold); font-size:2.2rem; }.best-score { margin:0 0 1.5rem; color:var(--muted); }.best-score strong { color:var(--ink); }.answer-recap { width:min(100%,430px); padding:1.25rem 1.4rem; margin:0 0 1.8rem; border:1px solid #ffffff2f; border-radius:1rem; text-align:left; background:#ffffff0f; }.answer-recap p { margin:.42rem 0; }.answer-recap b { color:var(--gold); }.word-search { color:var(--gold); font-weight:800; text-decoration:underline; text-decoration-color:#ffd56b88; text-underline-offset:.2em; }.word-search:hover { color:#fff2b4; }.answer-recap .reason { padding-top:.55rem; color:var(--muted); font-size:.9rem; }
.leaf { position:absolute; z-index:-1; color:#ffbd68; opacity:.5; font-size:2rem; animation:float 7s ease-in-out infinite; }.leaf-a { top:14%; left:12%; }.leaf-b { top:65%; right:8%; color:#e8655d; animation-delay:-3s; }.leaf-c { top:31%; right:11%; color:#ffd66b; animation-delay:-5s; }
.flash { animation:flash .45s ease-out; } @keyframes pop { from { transform:scale(.62) rotate(-8deg); } to { transform:scale(1) rotate(0); } } @keyframes selectedPulse { to { filter:brightness(1.2); } } @keyframes flash { 40% { filter:brightness(1.5); } } @keyframes float { 50% { transform:translateY(-18px) rotate(25deg); } } @media (max-height:650px) { .screen { padding-top:1.1rem; padding-bottom:1.1rem; }.title-screen h1 { font-size:4.7rem; }.title-question { margin:1rem 0 .4rem; }.intro { margin-bottom:1rem; }.high-score-label { margin-top:1.3rem; }.word { margin:.2rem 0 .5rem; }.status-text { margin-top:.7rem; }.answer { min-height:4rem; } }