:root{--tv-cream:#fffded;--tv-yellow:#ffd500;--tv-yellow-shadow:#c9a300;--tv-red:#e60012;--tv-red-shadow:#a80009;--tv-pink:#ff1a8f;--tv-black:#1a1a1a;--tv-white:#fff;--tv-blue:#00aef0;--display:"RocknRoll One", "Hiragino Sans", system-ui, sans-serif;--sans:"Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;font-family:var(--sans);color:var(--tv-black);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;font-weight:700;line-height:1.6}*{box-sizing:border-box}html,body,#root{min-height:100svh;margin:0;padding:0}body{background:repeating-linear-gradient(45deg, var(--tv-cream), var(--tv-cream) 24px, #fff5cc 24px, #fff5cc 25px)}.app{flex-direction:column;max-width:680px;min-height:100svh;margin:0 auto;padding:20px 16px 48px;display:flex}.screen{flex-direction:column;flex:1;gap:20px;display:flex}.tv-header{background:var(--tv-black);color:var(--tv-yellow);font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;border:3px solid var(--tv-black);box-shadow:4px 4px 0 var(--tv-yellow);justify-content:space-between;align-items:center;padding:10px 18px;font-size:13px;display:flex}.tv-header-tag{background:var(--tv-yellow);color:var(--tv-black);letter-spacing:.1em;padding:2px 10px;font-size:11px}.start-hero{background:var(--tv-yellow);border:4px solid var(--tv-black);text-align:center;box-shadow:8px 8px 0 var(--tv-black);margin:12px 0 28px;padding:36px 24px 32px;position:relative;overflow:hidden}.start-hero:before{content:"";pointer-events:none;background:repeating-conic-gradient(#0000000d 0deg 10deg,#0000 10deg 20deg);animation:30s linear infinite spin;position:absolute;inset:-50%}@keyframes spin{to{transform:rotate(360deg)}}.start-pretitle{background:var(--tv-red);color:var(--tv-white);font-family:var(--display);letter-spacing:.1em;box-shadow:3px 3px 0 var(--tv-black);margin-bottom:14px;padding:4px 16px;font-size:14px;display:inline-block;position:relative;transform:rotate(-2deg)}.start-title{font-family:var(--display);color:var(--tv-black);letter-spacing:.02em;margin:0;font-size:clamp(36px,9vw,56px);line-height:1.1;position:relative}.start-title .num{color:var(--tv-red);text-shadow:-3px -3px 0 var(--tv-white), 3px -3px 0 var(--tv-white), -3px 3px 0 var(--tv-white), 3px 3px 0 var(--tv-white), 6px 6px 0 var(--tv-black);margin:0 .05em;font-size:1.3em;display:inline-block;transform:rotate(-3deg)}.start-subtitle{font-family:var(--display);background:var(--tv-black);color:var(--tv-white);letter-spacing:.15em;margin-top:16px;padding:4px 14px;font-size:14px;display:inline-block;position:relative}.bubble{background:var(--tv-white);border:3px solid var(--tv-black);font-family:var(--sans);box-shadow:4px 4px 0 var(--tv-black);border-radius:16px;padding:16px 20px;font-size:15px;font-weight:700;line-height:1.75;position:relative}.bubble:after{content:"";border-left:14px solid #0000;border-right:14px solid #0000;border-top:14px solid var(--tv-black);width:0;height:0;position:absolute;bottom:-14px;left:32px}.bubble:before{content:"";border-left:11px solid #0000;border-right:11px solid #0000;border-top:11px solid var(--tv-white);z-index:1;width:0;height:0;position:absolute;bottom:-9px;left:35px}.bubble ul{margin:0;padding-left:1.2em}.bubble li{margin:4px 0}.bubble-mark{background:var(--tv-yellow);margin:0 2px;padding:0 4px;display:inline-block}.cta-stack{flex-direction:column;gap:14px;margin-top:20px;display:flex}.pop-btn{font:inherit;font-family:var(--display);letter-spacing:.05em;border:4px solid var(--tv-black);cursor:pointer;text-align:left;align-items:center;gap:16px;width:100%;padding:18px 24px;font-size:22px;transition:transform 80ms,box-shadow 80ms;display:flex;position:relative}.pop-btn:hover{transform:translate(-2px,-2px)}.pop-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--tv-black)!important}.pop-btn-yellow{background:var(--tv-yellow);color:var(--tv-black);box-shadow:6px 6px 0 var(--tv-black)}.pop-btn-yellow:hover{box-shadow:8px 8px 0 var(--tv-black)}.pop-btn-red{background:var(--tv-red);color:var(--tv-white);box-shadow:6px 6px 0 var(--tv-black)}.pop-btn-red:hover{box-shadow:8px 8px 0 var(--tv-black)}.pop-btn-num{background:var(--tv-white);color:var(--tv-black);border:3px solid var(--tv-black);flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;display:flex}.pop-btn-red .pop-btn-num{color:var(--tv-red)}.pop-btn-meta{flex-direction:column;flex:1;display:flex}.pop-btn-meta-sub{font-family:var(--sans);letter-spacing:0;opacity:.85;margin-top:2px;font-size:12px;font-weight:500}.quiz-status{align-items:stretch;gap:10px;display:flex}.quiz-q-badge{background:var(--tv-black);color:var(--tv-yellow);font-family:var(--display);border:3px solid var(--tv-black);box-shadow:3px 3px 0 var(--tv-yellow);flex:1;align-items:baseline;gap:6px;padding:10px 16px;display:flex}.quiz-q-num{color:var(--tv-yellow);letter-spacing:.04em;font-size:28px}.quiz-q-suffix{color:var(--tv-white);opacity:.7;font-size:13px}.quiz-q-label{letter-spacing:.2em;color:var(--tv-white);opacity:.7;margin-right:4px;font-size:11px}.quiz-score-badge{background:var(--tv-red);color:var(--tv-white);font-family:var(--display);border:3px solid var(--tv-black);box-shadow:3px 3px 0 var(--tv-yellow);align-items:baseline;gap:6px;padding:10px 18px;display:flex}.quiz-score-label{letter-spacing:.2em;opacity:.85;font-size:11px}.quiz-score-num{letter-spacing:.05em;font-size:24px}.specimen-frame{background:var(--tv-yellow);border:4px solid var(--tv-black);box-shadow:6px 6px 0 var(--tv-black);padding:18px;position:relative}.specimen-frame-tag{background:var(--tv-red);color:var(--tv-white);font-family:var(--display);letter-spacing:.1em;border:3px solid var(--tv-black);padding:4px 14px;font-size:14px;position:absolute;top:-16px;left:16px;transform:rotate(-3deg)}.specimen-frame-tag-q{background:var(--tv-white);color:var(--tv-black);font-family:var(--display);letter-spacing:.1em;border:2px solid var(--tv-black);padding:2px 10px;font-size:12px;position:absolute;top:-12px;right:16px}.specimen-color{aspect-ratio:4/3;border:3px solid var(--tv-black);width:100%}.quiz-prompt{font-family:var(--display);text-align:center;color:var(--tv-black);margin:20px 0 4px;font-size:26px}.choice-list{flex-direction:column;gap:10px;display:flex}.choice-btn{font:inherit;font-family:var(--sans);background:var(--tv-white);color:var(--tv-black);border:3px solid var(--tv-black);cursor:pointer;text-align:left;box-shadow:4px 4px 0 var(--tv-black);align-items:center;gap:14px;width:100%;padding:14px 18px;font-size:17px;font-weight:700;transition:transform 80ms,box-shadow 80ms,background .15s;display:flex}.choice-btn:hover{background:var(--tv-yellow);box-shadow:6px 6px 0 var(--tv-black);transform:translate(-2px,-2px)}.choice-btn:active{box-shadow:2px 2px 0 var(--tv-black);transform:translate(2px,2px)}.choice-btn-num{background:var(--tv-red);color:var(--tv-white);font-family:var(--display);border:2px solid var(--tv-black);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:18px;display:flex}.choice-btn-name{flex-direction:column;display:flex}.choice-btn-ja{font-size:17px;font-weight:700;font-family:var(--display)}.choice-btn-en{opacity:.6;letter-spacing:.05em;margin-top:2px;font-size:11px;font-weight:500}.hard-form{flex-direction:column;gap:12px;display:flex}.hard-input{font:inherit;font-family:var(--display);border:4px solid var(--tv-black);background:var(--tv-white);width:100%;box-shadow:4px 4px 0 var(--tv-black);padding:16px 18px;font-size:22px}.hard-input:focus{background:#fff8c8;outline:none}.hard-input::placeholder{color:var(--tv-black);opacity:.4;font-family:var(--sans);font-size:15px;font-weight:500}.correct-flash{background:var(--tv-yellow);background-image:repeating-conic-gradient(from 0deg, var(--tv-yellow) 0deg 12deg, #fff5b8 12deg 24deg);z-index:100;justify-content:center;align-items:center;animation:.18s cubic-bezier(.34,1.56,.64,1) flash-in,.2s ease-in .7s forwards flash-out;display:flex;position:fixed;inset:0}@keyframes flash-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes flash-out{0%{opacity:1}to{opacity:0}}.correct-flash-inner{text-align:center;animation:.5s cubic-bezier(.68,-.55,.27,1.55) pop-bounce}@keyframes pop-bounce{0%{transform:scale(.3)}60%{transform:scale(1.15)}to{transform:scale(1)}}.correct-circle{border:14px solid var(--tv-red);background:var(--tv-white);width:200px;height:200px;box-shadow:8px 8px 0 var(--tv-black);border-radius:50%;justify-content:center;align-items:center;margin:0 auto 20px;display:flex}.correct-circle-mark{font-family:var(--display);color:var(--tv-red);font-size:120px;line-height:1}.correct-text{font-family:var(--display);color:var(--tv-red);text-shadow:-2px -2px 0 var(--tv-white), 2px -2px 0 var(--tv-white), -2px 2px 0 var(--tv-white), 2px 2px 0 var(--tv-white), 5px 5px 0 var(--tv-black);letter-spacing:.05em;margin:0 0 8px;font-size:clamp(36px,8vw,56px)}.correct-sub{background:var(--tv-black);color:var(--tv-yellow);font-family:var(--display);letter-spacing:.4em;box-shadow:4px 4px 0 var(--tv-red);margin:0;padding:4px 18px;font-size:18px;display:inline-block;transform:rotate(-2deg)}.gameover{background:var(--tv-pink);background-image:repeating-linear-gradient(135deg, var(--tv-pink), var(--tv-pink) 60px, var(--tv-red) 60px, var(--tv-red) 120px);flex-direction:column;padding:24px 20px 40px;animation:.4s cubic-bezier(.34,1.56,.64,1) gameover-burst;display:flex;position:fixed;inset:0;overflow-y:auto}@keyframes gameover-burst{0%{opacity:0;transform:scale(.6)rotate(-5deg)}to{opacity:1;transform:scale(1)rotate(0)}}.go-buzz{background:var(--tv-black);color:var(--tv-yellow);font-family:var(--display);letter-spacing:.2em;box-shadow:4px 4px 0 var(--tv-yellow);align-self:center;margin:4px 0 12px;padding:6px 20px;font-size:18px;transform:rotate(-3deg)}.go-burst{background:var(--tv-yellow);border:5px solid var(--tv-black);box-shadow:10px 10px 0 var(--tv-black);text-align:center;width:100%;max-width:560px;margin:0 auto 20px;padding:32px 24px;position:relative}.go-burst:before,.go-burst:after{content:"";background:var(--tv-yellow);border:4px solid var(--tv-black);z-index:-1;position:absolute}.go-burst:before{inset:-16px -8px;transform:rotate(3deg)}.go-burst:after{inset:-8px -16px;transform:rotate(-3deg)}.go-shout{font-family:var(--display);color:var(--tv-black);letter-spacing:.02em;text-shadow:4px 4px 0 var(--tv-red);margin:0;font-size:clamp(38px,10vw,64px);font-weight:400;line-height:1.1;animation:.3s ease-in-out infinite alternate shake-letter}@keyframes shake-letter{0%{transform:translate(-1px,-1px)rotate(-.5deg)}to{transform:translate(1px,1px)rotate(.5deg)}}.go-shout-ban{background:var(--tv-red);color:var(--tv-white);text-shadow:none;margin:0 4px;padding:0 12px;font-size:.9em;display:inline-block;transform:rotate(-3deg)}.go-reveal{background:var(--tv-white);border:4px solid var(--tv-black);box-shadow:6px 6px 0 var(--tv-black);text-align:center;width:100%;max-width:480px;margin:16px auto;padding:18px}.go-reveal-tag{background:var(--tv-blue);color:var(--tv-white);font-family:var(--display);letter-spacing:.1em;border:2px solid var(--tv-black);margin-bottom:12px;padding:3px 14px;font-size:13px;display:inline-block}.go-reveal-color{aspect-ratio:5/3;border:3px solid var(--tv-black);width:100%;margin-bottom:12px}.go-reveal-name-ja{font-family:var(--display);color:var(--tv-black);margin:0 0 4px;font-size:26px}.go-reveal-name-en{font-family:var(--sans);opacity:.6;letter-spacing:.1em;text-transform:uppercase;margin:0;font-size:12px;font-weight:500}.go-reveal-hex{opacity:.6;margin:6px 0 0;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px}.go-score{background:var(--tv-black);color:var(--tv-yellow);border:4px solid var(--tv-yellow);text-align:center;width:100%;max-width:480px;box-shadow:6px 6px 0 var(--tv-white);margin:8px auto 16px;padding:18px 24px}.go-score-label{font-family:var(--display);letter-spacing:.3em;color:var(--tv-yellow);margin:0 0 6px;font-size:13px}.go-score-value{font-family:var(--display);color:var(--tv-yellow);text-shadow:3px 3px 0 var(--tv-red);margin:0;font-size:64px;line-height:1}.go-score-total{opacity:.6;font-size:22px}.go-score-suffix{font-family:var(--sans);color:var(--tv-white);margin:4px 0 0;font-size:14px;font-weight:700}.go-retry{font-family:var(--display);background:var(--tv-yellow);color:var(--tv-black);border:4px solid var(--tv-black);cursor:pointer;letter-spacing:.1em;box-shadow:6px 6px 0 var(--tv-black);align-self:center;margin-top:8px;padding:14px 36px;font-size:18px;transition:transform 80ms,box-shadow 80ms}.go-retry:hover{box-shadow:8px 8px 0 var(--tv-black);transform:translate(-2px,-2px)}.go-retry:active{box-shadow:2px 2px 0 var(--tv-black);transform:translate(4px,4px)}.clear{text-align:center;padding:40px 0}.clear-cong{background:var(--tv-red);color:var(--tv-white);font-family:var(--display);letter-spacing:.2em;box-shadow:4px 4px 0 var(--tv-black);margin-bottom:24px;padding:6px 18px;font-size:16px;display:inline-block;transform:rotate(-2deg)}.clear-title{font-family:var(--display);color:var(--tv-black);text-shadow:5px 5px 0 var(--tv-yellow), 8px 8px 0 var(--tv-red);margin:12px 0;font-size:clamp(48px,13vw,84px);line-height:1.1}.clear-message{font-family:var(--sans);margin:24px 0;font-size:16px;font-weight:700}.clear-score{font-family:var(--display);color:var(--tv-red);margin:16px 0 32px;font-size:28px}@media (width<=640px){.app{padding:16px 12px 40px}.start-hero{padding:28px 18px}.pop-btn{padding:16px 18px;font-size:18px}.pop-btn-num{width:30px;height:30px;font-size:15px}.quiz-status{flex-direction:column;gap:8px}.quiz-q-num,.quiz-prompt{font-size:22px}.choice-btn-ja{font-size:16px}.go-shout{font-size:clamp(32px,11vw,48px)}.go-score-value{font-size:48px}}