:root {
  --bg-deep:#1a0033; --bg-mid:#2d0058;
  --cyan:#00f0ff; --magenta:#ff00aa; --yellow:#ffd700;
  --green:#00ff66; --red:#ff3355; --orange:#ff8800;
  --road:#2a2a2a; --sidewalk:#6b5d7a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg-deep);color:#fff;font-family:'VT323','Gowun Dodum',monospace;min-height:100vh}
img,svg{image-rendering:pixelated}
body{position:relative;padding:14px 10px 40px;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.18) 3px,rgba(0,0,0,.18) 3px);z-index:1000;mix-blend-mode:multiply}
body::after{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.5) 100%);z-index:1001}
.kr{font-family:'Gowun Dodum',sans-serif;word-break:keep-all}
#app{max-width:760px;margin:0 auto;position:relative}

#titleScreen{text-align:center;padding:8px 4px}
#titleScreen h1{font-family:'Press Start 2P',monospace;font-size:clamp(22px,6.5vw,34px);color:var(--yellow);margin-bottom:8px;letter-spacing:2px;text-shadow:4px 4px 0 var(--magenta)}
#titleScreen .subtitle{font-family:'VT323',monospace;font-size:18px;color:var(--cyan);margin-bottom:18px;letter-spacing:2px}
.titleSvg{width:min(320px,86vw);height:min(320px,86vw);margin:0 auto 16px;background:var(--bg-deep);border:4px solid var(--cyan);display:block;box-shadow:0 0 0 2px var(--bg-deep),0 0 0 6px var(--magenta)}
.blurb{font-family:'Gowun Dodum',sans-serif;font-size:16px;color:#ddd;margin-bottom:14px;line-height:1.7;word-break:keep-all;padding:0 8px}
.blurb b{color:var(--yellow)}

.levelGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0;padding:0 4px}
.levelCard{background:var(--bg-mid);border:3px solid var(--cyan);padding:10px 8px;text-align:center;cursor:pointer;position:relative;min-height:120px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.levelCard:hover{background:#000}
.levelCard .lvNum{font-family:'VT323',monospace;font-size:14px;color:var(--cyan);margin-bottom:4px;letter-spacing:1px}
.levelCard .lvTitle{font-family:'Gowun Dodum',sans-serif;font-size:15px;color:var(--yellow);margin-bottom:4px;font-weight:bold}
.levelCard .lvCount{font-family:'VT323',monospace;font-size:13px;color:#aaa;margin-bottom:8px}
.levelCard .lvBadgeMini{margin:4px 0}
.levelCard.locked{opacity:.45;cursor:not-allowed;border-color:#555}
.levelCard.locked .lvTitle{color:#888}
.levelCard.cleared{border-color:var(--green)}
.levelCard.cleared::after{content:'★';position:absolute;top:4px;right:6px;color:var(--green);font-size:16px}
.levelCard.locked::before{content:'🔒';position:absolute;top:4px;right:6px;font-size:14px}

.startBtn{font-family:'Press Start 2P',monospace;font-size:14px;background:var(--magenta);color:#000;border:4px solid var(--yellow);padding:14px 22px;cursor:pointer;letter-spacing:2px;animation:blink 1s infinite step-end;margin:8px 4px}
@keyframes blink{50%{background:var(--yellow);color:var(--magenta);border-color:var(--magenta)}}
.smallBtn{font-family:'VT323',monospace;font-size:16px;background:#000;color:var(--cyan);border:2px solid var(--cyan);padding:8px 12px;cursor:pointer;margin:4px;letter-spacing:1px}
.textBtn{font-family:'VT323',monospace;font-size:16px;background:transparent;color:var(--cyan);border:none;padding:6px 10px;cursor:pointer;margin:4px;letter-spacing:1px;text-decoration:underline}
.textBtn:hover{color:var(--yellow)}
.shareBtn{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;background:#000;color:var(--cyan);border:4px solid var(--cyan);cursor:pointer;margin:8px 4px;padding:0;box-sizing:border-box;flex:0 0 auto}
.shareBtn svg{width:24px;height:24px}
#finalScreen .shareBtn{width:45px;height:45px;border-width:3px;margin:6px}
#finalScreen .shareBtn svg{width:20px;height:20px}
#finalScreen #backToTitleBtn{border:3px solid var(--cyan);padding:9px 14px;text-decoration:none;background:#000;border-radius:0}
#finalScreen #backToTitleBtn:hover{border-color:var(--yellow)}
#titleScreen .startBtn{font-size:13px;padding:10px 20px;margin:6px}
#titleScreen .shareBtn{width:45px;height:45px;border-width:3px;margin:6px}
#titleScreen .shareBtn svg{width:20px;height:20px}
.shareBtn:hover{color:var(--yellow);border-color:var(--yellow)}
.shareBtn:active{transform:translateY(1px)}
.smallBtn:hover{background:var(--cyan);color:#000}

.hud{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:var(--bg-mid);border:2px solid var(--cyan);padding:6px;margin-bottom:10px}
.hud .cell{text-align:center;padding:2px}
.hud .label{font-family:'VT323',monospace;color:var(--cyan);margin-bottom:2px;font-size:13px;letter-spacing:1px}
.hud .value{font-family:'VT323',monospace;color:var(--yellow);font-size:18px;word-break:break-all;line-height:1}

#quizScreen,#finalScreen{display:none}
.stageHeader{background:var(--bg-mid);border:2px solid var(--magenta);padding:8px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.stageNum{font-family:'VT323',monospace;font-size:14px;color:var(--cyan);margin-bottom:4px;letter-spacing:1px}
.stageTitle{font-family:'Gowun Dodum',sans-serif;font-size:17px;color:var(--yellow);font-weight:bold}
.typeBadge{font-family:'VT323',monospace;font-size:13px;padding:4px 8px;border:2px solid currentColor;white-space:nowrap;letter-spacing:1px}
.typeBadge.t-4-choice{color:var(--cyan)}
.typeBadge.t-ox{color:var(--green)}
.typeBadge.t-animated-ox{color:var(--orange)}

.sceneWrap{position:relative;max-width:480px;margin:0 auto 6px}
.sceneInfo{position:absolute;top:8px;left:10px;z-index:5;font-family:'VT323',monospace;font-size:15px;color:var(--cyan);background:rgba(0,0,0,0.6);padding:2px 8px;border:1px solid var(--cyan);letter-spacing:1px;pointer-events:none}
.sceneBadge{display:inline-block;font-family:'Gowun Dodum',sans-serif;font-size:13px;font-weight:bold;color:#fff;background:var(--magenta);padding:4px 12px;border:2px solid #000;letter-spacing:0;line-height:1.3;margin-bottom:8px;box-shadow:0 0 8px rgba(255,0,170,0.6)}
.scene{width:100%;aspect-ratio:1;background:#000;border:4px solid var(--cyan);display:block}
.legend{display:flex;justify-content:center;gap:10px;font-size:14px;margin-bottom:8px;flex-wrap:wrap;font-family:'Gowun Dodum',sans-serif}
.legend .item{display:flex;align-items:center;gap:4px}
.swatch{width:18px;height:18px;border:1px solid #fff;display:inline-block;vertical-align:middle}

.message{background:#000;border:2px solid var(--yellow);padding:12px;margin-bottom:10px;font-family:'Gowun Dodum',sans-serif;font-size:16px;line-height:1.7;color:#fff;word-break:keep-all}
.message .desc{color:#bbb;margin-bottom:6px;font-size:14px}
.message .desc:empty{display:none}
.message .q{color:var(--yellow);font-size:17px;font-weight:bold}

.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.choice{background:var(--bg-mid);border:2px solid var(--cyan);padding:12px;font-family:'Gowun Dodum',sans-serif;font-size:15px;color:#fff;cursor:pointer;text-align:left;line-height:1.5;word-break:keep-all}
.choice:hover{background:var(--magenta);border-color:var(--yellow);color:#000}
.choice .num{font-family:'Press Start 2P',monospace;color:var(--yellow);font-size:11px;margin-right:8px}
.choice:hover .num{color:var(--cyan)}

.oxButtons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.oxBtn{padding:20px 8px;background:var(--bg-mid);border:4px solid var(--cyan);cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:64px}
.oxBtn .oxLabel{font-family:'Gowun Dodum',sans-serif;font-size:22px;font-weight:bold;line-height:1.3;word-break:keep-all;text-align:center}
.oxBtn.o{color:var(--green);border-color:var(--green)}
.oxBtn.x{color:var(--red);border-color:var(--red)}
.oxBtn:hover{background:#000}

.animControls{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.replayBtn{font-family:'VT323',monospace;font-size:16px;background:var(--orange);color:#000;border:2px solid #000;padding:8px 12px;cursor:pointer;white-space:nowrap;letter-spacing:1px}
.replayBtn:hover{background:var(--yellow)}
.progressBar{flex:1;height:10px;background:#000;border:2px solid var(--cyan);position:relative;overflow:hidden}
.progressBar>.fill{height:100%;background:var(--cyan);width:0%;transition:width .05s linear}

.actionRow{display:flex;gap:6px;justify-content:center;margin:6px 0;flex-wrap:wrap}

#resultModal,#badgeModal,#stagePreviewModal,#tutorialModal,#shareModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:100;align-items:center;justify-content:center;padding:14px}
#resultModal.show,#badgeModal.show,#stagePreviewModal.show,#tutorialModal.show,#shareModal.show{display:flex}
#shareModal .modalBox{border-color:var(--cyan);max-width:420px}
#shareModal .nextBtn{margin:6px 0}
#tutorialModal .modalBox{border-color:var(--magenta)}
.tutorialCarRow{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0 14px}
.tutorialCarSvg{width:80px;height:96px;animation:tutorialPulse 1s ease-in-out infinite;filter:drop-shadow(0 0 8px #ff00aa)}
@keyframes tutorialPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.tutorialLegend{display:flex;justify-content:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;font-family:'Gowun Dodum',sans-serif;font-size:12px;color:#ddd}
.tutorialLegend .item{display:flex;align-items:center;gap:5px}
.tutorialLegend .swatch{width:14px;height:14px;border:2px solid #000;display:inline-block}
#stagePreviewModal .modalBox{max-height:92vh;overflow-y:auto;border-color:var(--cyan)}
.modalBox{background:var(--bg-mid);border:4px solid var(--yellow);padding:18px;max-width:480px;width:100%;text-align:center;z-index:1002}
.modalBox .icon{font-size:54px;margin-bottom:4px;line-height:1}
.modalBox .icon.ok{color:var(--green)}
.modalBox .icon.bad{color:var(--red)}
.modalBox h2{font-family:'Gowun Dodum',sans-serif;font-size:18px;margin-bottom:10px;font-weight:bold}
.modalBox h2.ok{color:var(--green)}
.modalBox h2.bad{color:var(--red)}
.explain{font-family:'Gowun Dodum',sans-serif;font-size:15px;color:#fff;margin-bottom:14px;line-height:1.7;word-break:keep-all;text-align:left;background:#000;padding:12px;border:1px solid #555}
.penalty{font-family:'VT323',monospace;font-size:15px;color:var(--red);margin-bottom:14px;line-height:1.5;letter-spacing:1px}
.penalty.none{color:var(--green)}
.penalty.flow{color:var(--orange)}
.nextBtn{font-family:'VT323',monospace;font-size:18px;background:var(--cyan);color:#000;border:4px solid #000;padding:10px 24px;cursor:pointer;margin:4px;letter-spacing:2px;font-weight:bold}
.nextBtn:hover{background:var(--yellow)}

#finalScreen{text-align:center;padding:8px}
.resultBanner{display:block;width:100%;max-width:760px;margin:0 auto 12px;cursor:pointer;position:relative;z-index:1002}
.resultBanner img{width:100%;height:auto;display:block;image-rendering:auto}
#finalScreen h1{font-family:'Press Start 2P',monospace;color:var(--yellow);font-size:20px;margin-bottom:4px;letter-spacing:2px}
#finalScreen .subFinal{font-family:'VT323',monospace;font-size:15px;color:var(--cyan);margin-bottom:12px;letter-spacing:1px}
#finalScreen .grade{font-family:'Press Start 2P',monospace;font-size:84px;color:var(--yellow);margin:8px 0;text-shadow:4px 4px 0 var(--magenta);line-height:1}
#finalScreen .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:14px 0}
#finalScreen .stat{background:var(--bg-mid);border:2px solid var(--cyan);padding:10px 6px}
#finalScreen .stat .label{font-family:'VT323',monospace;font-size:14px;color:var(--cyan);margin-bottom:4px;letter-spacing:1px}
#finalScreen .stat .value{font-family:'VT323',monospace;font-size:20px;color:var(--yellow)}
.badgeBox{margin:14px auto;padding:14px 8px;border:3px solid var(--yellow);background:#000;max-width:300px}
.badgeSvg{width:140px;height:140px;display:block;margin:4px auto}
.badgeName{font-family:'Press Start 2P',monospace;font-size:14px;color:var(--yellow);margin:6px 0}
.badgeKr{font-family:'Gowun Dodum',sans-serif;font-size:15px;color:var(--cyan);font-weight:bold}

.retryBtn{font-family:'Press Start 2P',monospace;font-size:13px;background:var(--magenta);color:#000;border:4px solid var(--yellow);padding:10px 20px;cursor:pointer;margin:6px}

.recordPanel{background:var(--bg-mid);border:2px solid var(--cyan);padding:8px 12px;margin:14px auto;max-width:340px;text-align:left;font-family:'Gowun Dodum',sans-serif}
.recordPanel .recordTitle{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--yellow);text-align:center;margin-bottom:6px;letter-spacing:1px}
.recordPanel .recordRow{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:2px 0;padding:1px 0;border-bottom:1px dashed #553388}
.recordPanel .recordRow:last-child{border-bottom:none}
.recordPanel .rk{color:var(--cyan)}
.recordPanel .rv{color:var(--yellow);font-weight:bold;font-family:'VT323',monospace;font-size:15px}
.recordPanel .rDim{color:#888;font-size:11px;margin-left:4px;font-family:'VT323',monospace}

.legalNote{margin-top:14px;padding:12px;border:2px solid #443a66;border-radius:6px;background:rgba(0,0,0,.35);text-align:left;font-family:'Gowun Dodum',sans-serif;word-break:keep-all}
.legalNote .legalTitle{font-size:13px;color:var(--yellow);margin-bottom:8px;font-weight:bold;letter-spacing:.5px}
.legalNote p{font-size:12px;color:#ddd;line-height:1.7;margin-bottom:10px}
.legalNote a{display:inline-block;color:var(--cyan);text-decoration:none;font-size:12px;line-height:1.6}
.legalNote a:hover{color:var(--yellow);text-decoration:underline}
.legalNote .legalSub{color:#888;font-size:11px;margin-left:6px}

.copyright{margin-top:18px;font-family:'VT323',monospace;font-size:13px;color:#888;text-align:center;letter-spacing:1px}
.copyright a{color:var(--cyan);text-decoration:none}
.copyright a:hover{color:var(--yellow);text-decoration:underline}

@media(max-width:480px){
  .choices{grid-template-columns:1fr}
  .oxBtn{padding:16px 6px;min-height:54px}
  .oxBtn .oxLabel{font-size:19px}
  .stageTitle{font-size:15px}
  .levelGrid{grid-template-columns:1fr 1fr;gap:6px}
  .hud .label{font-size:11px}
  .hud .value{font-size:15px}
  .message{font-size:15px}
  .choice{font-size:14px;padding:10px}
  .explain{font-size:14px}
  .resultBanner{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:-22px}
}