@font-face{font-family:Galmuri11;src:url('fonts/Galmuri11.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Galmuri11;src:url('fonts/Galmuri11-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{--warm:#fffdf6;--pale:#edf3f6;--muted:#626f7e;--line:#d4dddf;--pixel:Galmuri11,monospace;--red:#df564b;background-color:#edf1ed;background-image:radial-gradient(#ccd6cc 1px,transparent 1px);background-size:16px 16px}
body{font-synthesis:none}.app{background:var(--warm);border-left:2px solid var(--navy);border-right:2px solid var(--navy);box-shadow:8px 0 0 #182b4c0a;border-radius:0}main{padding-top:24px}header{padding-bottom:18px;border-bottom:2px solid var(--navy);position:relative;margin-bottom:20px}header:after{content:'';position:absolute;bottom:-2px;left:0;width:62px;height:4px;background:var(--red)}.brand-kicker{display:block;font:10px/1.5 var(--pixel);letter-spacing:.8px;color:var(--blue);margin-bottom:7px}h1{font-family:var(--pixel);font-size:26px;font-weight:700;letter-spacing:-1px;line-height:1.55;display:flex;align-items:center;gap:8px;margin:0 0 3px}header p{font-size:12px;line-height:1.6}h1 .pixel-icon{width:25px;height:25px;flex-shrink:0}h2,h3{font-family:var(--pixel);font-weight:700;letter-spacing:-.3px}h2{font-size:18px;line-height:1.6}h3{font-size:16px;line-height:1.5}.pixel-icon{display:inline-block;width:22px;height:22px;vertical-align:middle;flex-shrink:0;image-rendering:pixelated}.mascot{border-radius:0;background:#eaf0ee;border:2px solid var(--navy);box-shadow:3px 3px 0 #cfdbd3;width:44px;height:44px}.mascot svg{width:100%;height:100%;image-rendering:pixelated}.badge{border-radius:0;font:11px/1.5 var(--pixel);border:1px solid #bfccd9;background:#edf3f6;padding:5px 7px;display:inline-flex;gap:5px;align-items:center}.badge .pixel-icon{width:12px;height:12px}.streak{background:#fff1be;border:1px solid #cfab4c;color:var(--navy);font-size:10px}.header-side{gap:9px}.card{border:2px solid var(--navy);border-radius:0;background:#fffefa;box-shadow:4px 4px 0 #dae3dc;padding:17px}.progress-card{background:#1a2b4c;color:#fff8df;box-shadow:4px 4px 0 #ddb34f;position:relative;background-image:radial-gradient(#ffffff0b .7px,transparent .7px);background-size:4px 4px;padding:15px 17px}.scoreboard-caption{display:flex;justify-content:space-between;font:9px/1.5 var(--pixel);color:#9ab4c9;letter-spacing:.7px;margin-bottom:13px}.scoreboard-caption span:last-child{color:#fdb813}.progress-top{font:13px/1.6 var(--pixel)}.progress-top>span:first-child{display:flex;align-items:center;gap:6px}.progress-top .pixel-icon{color:var(--gold);width:16px;height:16px}.percent{font:700 28px/1.5 var(--pixel);color:#fbd57a;letter-spacing:-1px}.track{height:10px;background:#edf1e9;border:1px solid #c9d5cb;border-radius:0;margin:12px 0}.track span{border-radius:0;background-color:var(--gold);background-image:repeating-linear-gradient(90deg,transparent 0,transparent 6px,#182b4c40 6px,#182b4c40 8px)}.progress-card .track{border:1px solid #63748b;background:#2d3c56;margin:10px 0}.progress-card .sub{color:#c0ccda;font-size:11px}.quick-row{gap:13px;margin:18px 0 25px}.quick{border:2px solid var(--navy)!important;border-radius:0;box-shadow:3px 3px 0 #cad6dc;padding:12px 14px;background:#edf4f6!important}.quick:first-child{background:#fff2ce!important;box-shadow:3px 3px 0 #e5c976}.quick .symbol{margin-bottom:10px;color:var(--blue)}.quick:first-child .symbol{color:#d29323}.quick .symbol .pixel-icon{width:25px;height:25px}.quick strong{font:700 13px/1.55 var(--pixel)}.quick small{font-size:11px;margin-top:6px}.quick:hover{transform:translate(-1px,-1px)}.quick:active{transform:translate(3px,3px);box-shadow:none}.sim-heading{display:flex;align-items:center;gap:8px;font-size:17px;margin-top:25px}.sim-heading .pixel-icon{width:18px;height:18px;color:var(--blue)}.sim-heading span{margin-left:auto;font:9px/1.5 var(--pixel);color:var(--muted);white-space:nowrap}.sim-card{padding:12px;background:#fffefa;box-shadow:4px 4px 0 #b9ccc3}.tabs{background:#e3eae4;border:2px solid var(--navy);border-radius:0;padding:3px;gap:3px}.tabs button{font:11px/1.5 var(--pixel);border-radius:0;padding:11px 0;font-weight:700}.tabs .active{box-shadow:2px 2px 0 #719390;background:var(--navy);color:#fff8e3}.chips{gap:8px;padding:12px 0 10px}.chip{font:11px/1.65 var(--pixel);border:1px solid #8d9f9d;border-radius:0;background:#fffef7;padding:8px 10px;box-shadow:2px 2px 0 #dae2d9;min-height:37px}.chip.active{background:#fff0bc;border:1px solid #9b7f29;color:#574611;font-weight:700;box-shadow:2px 2px 0 #d8bc67}.sim-status{background:var(--navy);color:#b9cddb;height:auto;min-height:39px;padding:8px 9px;margin:1px 0 9px;gap:6px;font:9px/1.6 var(--pixel)}.sim-status strong{font-family:var(--pixel);font-size:10px;color:#ffdc82;font-weight:400;text-align:right;line-height:1.6;max-width:65%}.live-dot{border-radius:0;width:5px;height:5px;background:#b9dfb4;box-shadow:0 0 0 1px #486547}canvas{border-radius:0;border:2px solid #51685a;image-rendering:pixelated;background:#f1f4e8}.controls{gap:6px;margin:9px 0}.controls button{font:11px/1.6 var(--pixel);color:var(--navy);padding:8px 7px;min-height:37px;border:1px solid #899ca6;background:#edf2ed;box-shadow:2px 2px 0 #c8d4c8;white-space:nowrap}.controls button:active{transform:translate(2px,2px);box-shadow:none}.rule-strip{background:#eef4e7;color:#395442;border-left:3px solid #89a97a;border-radius:0;font-size:12px;font-weight:600;line-height:1.75;padding:10px 11px}.underlink button{font-size:11px;color:var(--blue);padding:8px 2px;text-decoration:underline;text-underline-offset:3px}.tip{display:flex;gap:11px;align-items:center;border:2px solid #ba975b;border-radius:0;background:#fff4d9;box-shadow:3px 3px 0 #edd9b2;padding:12px;margin-top:20px;font-size:12px;line-height:1.7}.tip>.pixel-icon{width:23px;height:23px;color:var(--navy)}.tip small{font:10px/1.5 var(--pixel);color:#a05b3f;display:block;margin-bottom:4px}.tip b{margin-left:auto;font:18px var(--pixel);color:#8b6332}.footnote{font-size:10px;line-height:1.7;color:#6e7d70;margin-top:22px}.search{border:2px solid #657883;border-radius:0;background:#fffef9;box-shadow:3px 3px 0 #d7dfd4;font-size:14px;padding:14px;margin-bottom:9px}.rule-row{border:2px solid #809297;border-radius:0;background:#fffefa;box-shadow:3px 3px 0 #dee5d9;padding:16px}.row-body p{font-size:13px;line-height:1.75;margin-top:8px}.star{color:#8a9790;font-family:var(--pixel);font-size:25px}.star.saved{color:#bb8421}.empty{background:#f0f3eb;border:1px dashed #a4b19e;border-radius:0;margin-top:14px}nav{background:#fffdf6;border-top:3px solid var(--navy);backdrop-filter:none;padding-top:9px}nav button{font:10px/1.5 var(--pixel);color:#6d7c81;gap:5px}nav .selected{font-weight:700;color:var(--navy)}.nav-icon{border-radius:0;width:46px;height:30px;display:grid;place-items:center;font-size:20px}.nav-icon .pixel-icon{width:19px;height:19px}nav .selected .nav-icon{background:#ffeab4;box-shadow:2px 2px 0 #ccb16d;color:var(--navy)}dialog{border:3px solid var(--navy);border-radius:0;background:#fffdf6;box-shadow:7px 7px 0 #15284433}dialog::backdrop{background:#1a2b4c77;backdrop-filter:none}.modal-content{padding:23px}.modal-content h2{font:700 25px/1.6 var(--pixel);margin:15px 0 18px}.modal-content .intro{font:11px/1.6 var(--pixel);color:#6b786e;margin-top:20px}.level-choice{border:1px solid #889998;border-radius:0;background:#f5f5ec;box-shadow:3px 3px 0 #d8dfd1;padding:15px;margin:13px 0}.level-choice strong{font:700 13px/1.65 var(--pixel)}.level-choice small{font-size:12px;line-height:1.7}.level-choice.active{background:#fff0bd;border:2px solid #a78633;padding:14px;box-shadow:3px 3px 0 #d6b861}.radio{border-radius:0;border-color:#95a19a;width:16px;height:16px}.level-choice.active .radio{border:4px solid #a18024;background:#fffdf5}.primary,.outline{font:700 13px/1.65 var(--pixel);border-radius:0;padding:13px;border:2px solid var(--navy);background:var(--blue);color:#fff9e2;box-shadow:3px 3px 0 #8ba3b0;margin-top:17px}.primary:active,.outline:active{transform:translate(3px,3px);box-shadow:none}.outline{background:#fff8df;color:var(--navy);box-shadow:3px 3px 0 #d5c693}.close{font:11px var(--pixel);min-height:34px}.rule-summary{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:17px;line-height:1.85}.example{border-radius:0;border-left:3px solid var(--blue);background:#edf3f2;padding:15px;font-size:14px;line-height:1.8}.example strong{font:700 12px/1.9 var(--pixel)}.caution{font-size:13px;line-height:1.9}.snack h2{font:700 30px/1.6 var(--pixel);margin:24px 0}.snack .mascot{width:94px;height:94px;margin:25px auto;box-shadow:5px 5px 0 #bfcfc4}.snack .rule-summary{font-size:21px;line-height:1.8}.pagination button{font:11px var(--pixel);border:1px solid #94a4a0;background:#f0f3e9;padding:12px}.quiz-prompt{font:700 22px/1.75 var(--pixel);margin:22px 0}.option{font-family:var(--pixel);font-size:15px;font-weight:400;border:2px solid #8a9e9e;border-radius:0;background:#fffefa;box-shadow:3px 3px 0 #dbe3d5;line-height:1.75;padding:17px}.option.correct{border-color:#497952;background:#eaf4de;box-shadow:3px 3px 0 #aec99f}.option.wrong{border-color:#ae5d51;background:#fff0e6;box-shadow:3px 3px 0 #e3bbae}.feedback{border:2px solid #7c9193;border-radius:0;box-shadow:3px 3px 0 #d7e1d3;background:#fffefa}.feedback strong{font:700 13px/1.8 var(--pixel)}.feedback p{line-height:1.85}.score{font:700 42px/1.6 var(--pixel)}.pitch-controls button{font:11px/1.6 var(--pixel);border:2px solid var(--navy);border-radius:0;box-shadow:3px 3px 0 #97aeb3;background:var(--blue);padding:11px 13px;color:#fff8de}.pitch-counter{font:700 13px var(--pixel);background:#1a2b4c;color:#fbd57a;padding:9px 11px}#toast{border:2px solid #c6d2b9;border-radius:0;font:12px/1.65 var(--pixel);background:var(--navy);box-shadow:4px 4px 0 #1a2b4c20;max-width:90%;text-align:center}.pill-count .pixel-icon{width:14px;height:14px;margin-right:4px}.level-card{margin-top:22px}@media(min-width:600px){.app{margin-top:24px;border:2px solid var(--navy);border-radius:0;box-shadow:8px 8px 0 #ccd7ce}}@media(max-width:370px){main{padding-left:14px;padding-right:14px}h1{font-size:23px}.sim-heading{font-size:15px}.sim-heading span{font-size:8px}.controls button{font-size:10px;padding:8px 5px}.quick strong{font-size:12px}}@media(prefers-reduced-motion:reduce){.quick:hover{transform:none}}
