:root{color-scheme:dark;--pink:#ff3da4;--cyan:#59e7ff;--yellow:#ffe55c;--ink:#130b2b;--panel:#21133f}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
body{min-height:100vh;color:#fff;background:radial-gradient(circle at 15% 10%,#352060 0,transparent 30%),radial-gradient(circle at 85% 80%,#163c59 0,transparent 28%),linear-gradient(145deg,#0b0719,#170b33 55%,#071824);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,#000,transparent 90%)}
button,a{font:inherit}.site-header{display:flex;align-items:center;justify-content:space-between;max-width:1040px;margin:auto;padding:18px 24px}.brand{display:block;width:104px;height:54px;overflow:hidden;border-radius:6px;background:#fbfaf5}.brand img{display:block;width:104px;height:104px;transform:translateY(-25px)}.back{color:#dcd4ed;text-decoration:none;font:700 13px monospace}.back:hover{color:var(--cyan)}
.game-shell{display:grid;place-items:center;min-height:calc(100vh - 145px);padding:12px 20px 40px}.screen{width:min(760px,100%);text-align:center}.screen[hidden]{display:none}.eyebrow{margin:0 0 12px;color:var(--cyan);font:700 13px monospace;letter-spacing:.18em}.start-screen h1,.result-screen>h1{margin:0;font:900 clamp(50px,11vw,92px)/.9 Arial,sans-serif;letter-spacing:-.06em;text-shadow:4px 4px 0 #000}.start-screen h1 span:first-child{color:var(--pink)}.start-screen h1 span:last-child{color:var(--cyan)}.lead{margin:22px 0 10px;font-weight:900;font-size:clamp(24px,5vw,38px);line-height:1.25}.rule{max-width:590px;margin:20px auto 28px;color:#ded7ea;line-height:1.8}.mobile-only{display:none}
.start-visual{position:relative;width:180px;height:104px;margin:24px auto;border:2px solid var(--cyan);background:#0d0a20;box-shadow:8px 8px 0 #ff3da455;overflow:hidden}.start-visual::before,.start-visual::after{content:"";position:absolute;inset:10px;border:1px solid #ffffff22}.eye{position:absolute;inset:0;display:grid;place-items:center;color:var(--yellow);font-size:48px}.noise{position:absolute;right:8px;bottom:6px;color:#59e7ff55;font:700 10px monospace;text-align:left}.scan{position:absolute;z-index:2;left:0;right:0;height:2px;background:var(--pink);box-shadow:0 0 12px var(--pink);animation:scan 2s linear infinite}@keyframes scan{from{top:0}to{top:100%}}
.primary,.share{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 25px;border:2px solid #fff;border-radius:7px;background:var(--pink);color:#fff;font-weight:900;text-decoration:none;box-shadow:5px 5px 0 #000;cursor:pointer;transition:transform .12s,box-shadow .12s}.primary:hover,.share:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #000}.primary:focus-visible,.share:focus-visible,.answers button:focus-visible,.back:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.quiz-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:8px;color:#ddd5eb;font:800 13px monospace}.quiz-head p{margin:0}.progress{height:7px;margin-bottom:16px;border:1px solid #74668f;background:#100a22}.progress span{display:block;width:10%;height:100%;background:linear-gradient(90deg,var(--pink),var(--cyan));transition:width .25s}
.image-frame{position:relative;display:grid;place-items:center;height:min(57vh,510px);margin:0;border:2px solid #8c7bad;background:#f6f4f0;box-shadow:10px 10px 0 #0008;overflow:hidden}.image-frame img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.corner{position:absolute;width:28px;height:28px;border-color:var(--cyan)}.corner-a{top:8px;left:8px;border-top:3px solid;border-left:3px solid}.corner-b{top:8px;right:8px;border-top:3px solid;border-right:3px solid}.corner-c{bottom:8px;left:8px;border-bottom:3px solid;border-left:3px solid}.corner-d{right:8px;bottom:8px;border-right:3px solid;border-bottom:3px solid}.question{margin:20px 0 14px;font-size:clamp(18px,4vw,25px);font-weight:900}.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px}.answers[hidden],.feedback[hidden]{display:none}.answers button{min-height:68px;border:2px solid #fff;border-radius:8px;color:#fff;font-weight:900;font-size:19px;cursor:pointer;box-shadow:5px 5px 0 #000}.answers button:first-child{background:#cf176f}.answers button:last-child{background:#08798f}.answers small{display:block;margin-bottom:4px;font:700 10px monospace;letter-spacing:.12em}.answers button:hover{filter:brightness(1.18)}
.feedback{margin-top:14px;padding:18px;border:1px solid #76688e;border-radius:8px;background:#18102bea}.feedback-mark{margin:0;color:var(--yellow);font:900 38px/1 monospace}.feedback h2{margin:8px 0;font-size:22px}.feedback p:not(.feedback-mark){margin:0 0 16px;color:#ddd5e6;line-height:1.65}.feedback.wrong .feedback-mark{color:#ff6c8e}.feedback .primary{min-height:44px;padding:9px 20px;font-size:14px}
.result-screen>h1{color:var(--cyan)}.result-ring{display:flex;flex-direction:column;align-items:center;justify-content:center;width:220px;height:220px;margin:28px auto;border:12px solid var(--pink);border-right-color:var(--cyan);border-radius:50%;background:#160d2e;box-shadow:0 0 0 7px #ffffff12,10px 10px 0 #0007}.result-ring strong{font:900 62px/1 Arial,sans-serif}.result-ring span{margin-top:7px;color:#ddd4eb;font:800 15px monospace}.result-screen h2{margin:0;color:var(--yellow);font-size:clamp(24px,5vw,36px)}.result-screen>p:not(.eyebrow){margin:12px auto 25px;max-width:540px;color:#ddd5e8;line-height:1.8}.result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}.share{background:#111}.text-link{display:inline-block;margin-top:25px;color:#cfc5dc;font-size:13px}footer{padding:10px 20px 25px;text-align:center;color:#9d93ad;font-size:12px}
@media(max-width:620px){.site-header{padding:12px 15px}.game-shell{min-height:calc(100vh - 120px);padding:5px 14px 30px}.mobile-only{display:block}.rule{font-size:14px}.image-frame{height:min(49vh,430px)}.answers{gap:8px}.answers button{min-height:62px;font-size:16px}.result-ring{width:190px;height:190px}.result-ring strong{font-size:52px}}
@media(prefers-reduced-motion:reduce){.scan{animation:none;top:50%}.primary,.share{transition:none}}
.image-frame{width:100%}
.image-frame img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);max-width:none;max-height:none;object-fit:contain;object-position:center}