*{box-sizing:border-box} :root{--green:#0d4a28;--lime:#95dd45;--gold:#ffc928;--red:#ef2b40;--ink:#162219;--paper:#fffdf4}
html,body{margin:0;min-height:100%;font-family:"Noto Sans JP","Yu Gothic",sans-serif;color:var(--ink);background:#f3edda}
body{overflow-x:hidden;background:radial-gradient(circle at 10% 0,#fff9c6 0,transparent 28%),radial-gradient(circle at 95% 90%,#cdeed4 0,transparent 32%),#f4f0e4}
button{font:inherit} .app{min-height:100vh;padding:24px;display:grid;place-items:center;position:relative;isolation:isolate}
.app:before{content:"";position:fixed;inset:0;z-index:-2;opacity:.25;background-image:linear-gradient(30deg,#0d4a2810 12%,transparent 12.5%,transparent 87%,#0d4a2810 87.5%),linear-gradient(150deg,#0d4a2810 12%,transparent 12.5%,transparent 87%,#0d4a2810 87.5%);background-size:48px 84px}
.shell{width:min(900px,100%);min-height:660px;background:var(--paper);border:3px solid var(--green);border-radius:28px;box-shadow:10px 12px 0 #0d4a28,0 25px 70px #173b2b30;overflow:hidden;position:relative}
.top{display:flex;align-items:center;gap:16px;padding:18px 24px;background:var(--green);color:#fff}.logo{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:var(--gold);color:var(--green);font-size:28px;font-weight:1000;transform:rotate(-5deg);box-shadow:0 4px 0 #8f6500}.top-copy{min-width:0}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:900;color:#bcf276}.top h1{font-size:clamp(18px,3vw,25px);line-height:1.25;margin:2px 0}.best{margin-left:auto;text-align:center;font-size:11px;color:#cce8d5;white-space:nowrap}.best b{display:block;color:var(--gold);font-size:20px}
.screen{display:none;padding:34px clamp(20px,5vw,46px)}.screen.on{display:block}.start{text-align:center;padding-top:62px}.start-mark{width:115px;height:115px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;font-size:64px;background:var(--gold);border:5px solid var(--green);box-shadow:0 10px 0 #b68100;animation:float 2.2s ease-in-out infinite}.start h2{font-size:clamp(27px,5vw,44px);line-height:1.2;margin:0;color:var(--green)}.start p{max-width:590px;margin:18px auto 28px;line-height:1.9}.chips{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-bottom:28px}.chip{border:2px solid #d9c984;border-radius:999px;padding:7px 13px;background:#fff8d8;font-size:12px;font-weight:900}.primary{border:0;border-radius:999px;background:var(--green);color:#fff;padding:17px 36px;min-width:240px;font-weight:1000;letter-spacing:.05em;cursor:pointer;box-shadow:0 7px 0 #062b16;transition:.15s}.primary:hover{transform:translateY(-2px);box-shadow:0 9px 0 #062b16}.primary:active{transform:translateY(5px);box-shadow:0 2px 0 #062b16}
.status{display:flex;align-items:center;gap:14px;margin-bottom:20px}.count{font-size:13px;font-weight:1000;color:var(--green);white-space:nowrap}.count b{font-size:25px}.bar{height:12px;flex:1;border:2px solid var(--green);border-radius:20px;overflow:hidden;background:#e6e2d3}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--gold));transition:width .45s cubic-bezier(.2,.9,.2,1)}.score{font-weight:1000;color:#927000;white-space:nowrap}
.category{display:inline-flex;gap:7px;align-items:center;background:#e6f5e9;color:var(--green);border-radius:999px;padding:5px 11px;font-size:11px;font-weight:900}.question{font-size:clamp(20px,3.6vw,30px);line-height:1.55;margin:14px 0 22px;min-height:92px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer{position:relative;display:flex;text-align:left;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 15px;border:2px solid #c8c3ae;border-radius:15px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer;transition:.15s}.answer:hover:not(:disabled){border-color:var(--green);transform:translateY(-2px);box-shadow:0 6px 0 #cfd8c9}.letter{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eee9d8;color:var(--green);font-weight:1000}.answer.correct{color:#063819;border-color:#16a34a;background:#dcfce7;transform:scale(1.02);box-shadow:0 0 0 5px #4ade8055}.answer.wrong{color:#7f0713;border-color:var(--red);background:#ffe1e5;animation:wrongWobble .5s both}.answer.reveal-answer:not(.wrong){border-color:#16a34a;background:#effdf2}.answer:disabled{cursor:default}.feedback{display:none;margin-top:20px;border-radius:18px;border:3px solid;padding:20px 20px 18px;animation:pop .4s cubic-bezier(.2,1.7,.3,1)}.feedback.on{display:block}.feedback.good{border-color:#16a34a;background:#eaffef}.feedback.bad{border-color:var(--red);background:#fff0f1}.verdict{font-size:clamp(22px,4vw,34px);font-weight:1000;line-height:1.15}.good .verdict{color:#08772e}.bad .verdict{color:#c11225}.roast{font-size:17px;font-weight:1000;margin:8px 0;color:#bb1728}.explain{margin:10px 0 0;line-height:1.75;font-size:14px}.next{display:block;margin:17px 0 0 auto;border:0;border-radius:999px;padding:13px 25px;background:var(--ink);color:#fff;font-weight:1000;cursor:pointer}
.result{text-align:center;padding-top:48px}.rank{font-size:66px;line-height:1;margin-bottom:12px;filter:drop-shadow(0 7px 0 #d6b640)}.result h2{font-size:clamp(27px,5vw,43px);margin:0;color:var(--green)}.big-score{font-size:clamp(62px,14vw,110px);font-weight:1000;line-height:1;color:var(--green);margin:18px 0 8px}.big-score span{font-size:.3em;color:#58645b}.result-message{font-weight:800;line-height:1.8;margin-bottom:23px}.result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.secondary{border:2px solid var(--green);border-radius:999px;background:#fff;color:var(--green);padding:14px 25px;font-weight:1000;cursor:pointer}
.fx{position:fixed;inset:0;z-index:20;pointer-events:none;display:none;overflow:hidden}.fx.on{display:block}.flash{position:absolute;inset:0;animation:flash .6s both}.fx.good .flash{background:#faffb5}.fx.bad .flash{background:#ff001f}.stamp{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%) rotate(-8deg) scale(.2);font-size:clamp(60px,14vw,150px);font-weight:1000;white-space:nowrap;text-shadow:6px 7px 0 #000;color:#fff;animation:stamp .75s cubic-bezier(.15,1.6,.25,1) both}.fx.good .stamp{color:#fff31d;-webkit-text-stroke:5px #08772e}.fx.bad .stamp{color:#fff;-webkit-text-stroke:6px #9d0014}.particle{position:absolute;width:13px;height:26px;left:var(--x);top:-30px;background:var(--c);animation:fall var(--d) var(--delay) cubic-bezier(.1,.7,.5,1) forwards;transform:rotate(var(--r))}.beam{position:absolute;left:-20%;width:140%;height:16px;background:#fff;box-shadow:0 0 25px 12px var(--red);animation:beam .6s both}.beam:nth-child(2){top:28%;transform:rotate(18deg)}.beam:nth-child(3){top:66%;transform:rotate(-16deg)}
body.correct-hit .shell{animation:correctHit .7s both}body.wrong-hit .shell{animation:wrongHit .55s both}
@keyframes float{50%{transform:translateY(-9px) rotate(5deg)}}@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes wrongWobble{20%{transform:translateX(-10px) rotate(-1deg)}40%{transform:translateX(9px) rotate(1deg)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}@keyframes flash{0%{opacity:.92}100%{opacity:0}}@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-16deg) scale(2.8)}55%{opacity:1;transform:translate(-50%,-50%) rotate(5deg) scale(.82)}100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}@keyframes fall{to{top:110%;transform:translateX(var(--drift)) rotate(720deg)}}@keyframes beam{0%{opacity:0;transform:scaleX(.1)}35%{opacity:1}100%{opacity:0;transform:scaleX(1)}}@keyframes correctHit{25%{transform:scale(1.025)}50%{transform:scale(.99)}100%{transform:scale(1)}}@keyframes wrongHit{15%,45%,75%{transform:translateX(-10px)}30%,60%,90%{transform:translateX(10px)}}
@media(max-width:620px){.app{padding:10px}.shell{border-radius:18px;box-shadow:5px 6px 0 #0d4a28;min-height:760px}.top{padding:13px 15px}.logo{width:43px;height:43px}.best{display:none}.screen{padding:24px 16px}.start{padding-top:38px}.answers{grid-template-columns:1fr}.question{min-height:0}.answer{min-height:59px}.feedback{padding:16px}.next{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}