@import "https://fonts.googleapis.com/css2?family=DotGothic16&family=Press+Start+2P&display=swap";
:root{--bg:#0c1130;--bg-deep:#07091f;--bg-stars:#1a2052;--parchment:#f4ecd0;--parchment-shadow:#d9cfa8;--parchment-ink:#1a1a1a;--menu-bg:#1a3a8c;--menu-bg-deep:#0e2566;--menu-text:#f4ecd0;--menu-border-light:#fff;--menu-border-dark:#000;--gold:#f9c93b;--gold-deep:#c78f1a;--hp:#d63a3a;--hp-deep:#8a1f1f;--exp:#4caf50;--exp-deep:#1f6b22;--mp:#4a7ec9;--mp-deep:#20528f;--boss:#7b5dd6;--boss-deep:#432d8a;--danger:#e85d3a;--u:4px}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--menu-text);-webkit-font-smoothing:none;font-smooth:never;image-rendering:pixelated;text-rendering:geometricprecision;margin:0;padding:0;font-family:DotGothic16,"Press Start 2P",monospace;overflow:hidden}.bg-stars{background:radial-gradient(circle, var(--bg-stars) 0%, var(--bg) 60%, var(--bg-deep) 100%);z-index:-2;position:fixed;inset:0}.bg-stars:before,.bg-stars:after{content:"";opacity:.5;background-image:radial-gradient(2px 2px at 8% 12%,#fff 50%,#0000 51%),radial-gradient(2px 2px at 22% 78%,#fff 50%,#0000 51%),radial-gradient(2px 2px at 67% 18%,#fff 50%,#0000 51%),radial-gradient(2px 2px at 88% 64%,#fff 50%,#0000 51%),radial-gradient(2px 2px at 41% 41%,#fff 50%,#0000 51%),radial-gradient(2px 2px at 14% 92%,#fff 50%,#0000 51%),radial-gradient(2px 2px at 76% 88%,#fff 50%,#0000 51%),radial-gradient(2px 2px at 55% 8%,#fff 50%,#0000 51%),radial-gradient(2px 2px at 92% 32%,#fff 50%,#0000 51%),radial-gradient(2px 2px at 33% 26%,#fff 50%,#0000 51%);position:absolute;inset:0}.bg-stars:after{opacity:.3;background-position:30% 60%;animation:4s steps(2,end) infinite twinkle}@keyframes twinkle{0%,to{opacity:.15}50%{opacity:.5}}.app-shell{width:100%;height:100vh;padding:var(--u);justify-content:center;align-items:center;display:flex}.game-screen{background:var(--bg);width:100%;max-width:420px;height:100%;max-height:880px;box-shadow:inset 0 0 0 calc(var(--u)) #000, inset 0 0 0 calc(var(--u)*2) #fff, inset 0 0 0 calc(var(--u)*3) #000, 0 0 60px #7a5adc66;flex-direction:column;display:flex;position:relative;overflow:hidden}.dashboard-body{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.dashboard-side{flex-shrink:0}.dashboard-main{flex-direction:column;flex:1;min-height:0;display:flex}@media (min-width:641px){.app-shell{padding:calc(var(--u)*3)}.game-screen{max-width:720px;max-height:min(960px,100vh - 24px)}}@media (min-width:1024px){.game-screen{max-width:1180px;max-height:min(900px,100vh - 32px)}.scroll.subject-grid{gap:calc(var(--u)*2);grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;display:grid}.scroll.subject-grid .sub-card{margin-bottom:0}.dashboard-body{gap:calc(var(--u)*2);padding:0 calc(var(--u)*2);flex:1;grid-template-columns:300px 1fr;min-height:0;display:grid;overflow:hidden}.dashboard-side{gap:calc(var(--u)*2);padding:calc(var(--u)*2) 0;flex-direction:column;display:flex;overflow-y:auto}.dashboard-main{min-height:0;padding:calc(var(--u)*2) 0;flex-direction:column;display:flex}.desktop-hide{display:none!important}.wide-content{width:100%;max-width:760px;margin:0 auto}.title-logo{font-size:32px}}@media (min-width:1280px){.scroll.subject-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:1023px){.desktop-only{display:none!important}}.pwin{background:var(--menu-bg);color:var(--menu-text);border:var(--u) solid var(--menu-border-dark);outline:var(--u) solid var(--menu-border-light);outline-offset:calc(var(--u)*-2);padding:calc(var(--u)*3);margin:calc(var(--u)*2);font-size:14px;line-height:1.5;position:relative}.pwin:has(>.pwin-title){margin-top:calc(var(--u)*5)}.pwin-flush{margin:0}.pwin-flush:has(>.pwin-title){margin-top:calc(var(--u)*5)}.pwin-title{top:calc(var(--u)*-6);left:calc(var(--u)*3);background:var(--menu-bg-deep);color:var(--gold);border:var(--u) solid var(--menu-border-dark);outline:2px solid var(--menu-border-light);outline-offset:-2px;padding:3px var(--u);letter-spacing:1px;font-family:"Press Start 2P",monospace;font-size:12px;position:absolute}.parch{background:var(--parchment);color:var(--parchment-ink);border:var(--u) solid var(--parchment-ink);padding:calc(var(--u)*3);box-shadow:inset 0 0 0 2px var(--parchment-shadow);position:relative}.pbtn{letter-spacing:1px;background:var(--menu-bg);color:var(--menu-text);border:var(--u) solid var(--menu-border-dark);outline:2px solid var(--menu-border-light);outline-offset:-2px;padding:calc(var(--u)*2) calc(var(--u)*3);cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:var(--u);min-height:44px;font-family:inherit;font-size:14px;transition:transform 60ms step-end;display:inline-flex;position:relative}.pbtn:hover{background:#2a51b3}.pbtn:active{transform:translate(2px,2px)}.pbtn:disabled{opacity:.4;cursor:not-allowed}.pbtn-gold{background:var(--gold);color:#2a1a00}.pbtn-gold:hover{background:#ffd95a}.pbtn-danger{background:var(--hp)}.pbtn-danger:hover{background:#e85d5d}.pbtn-ghost{border:var(--u) solid transparent;background:0 0;outline:none}.pbtn-ghost:hover{background:#ffffff0f}.pbtn-select:before{content:"▶";left:var(--u);opacity:0;color:var(--gold);position:absolute}.pbtn-select:hover:before,.pbtn-select:focus:before{opacity:1}.gauge{align-items:center;gap:var(--u);font-size:12px;display:flex}.gauge-label{letter-spacing:1px;width:32px;font-family:"Press Start 2P",monospace;font-size:11px}.gauge-track{height:calc(var(--u)*3);outline:2px solid var(--menu-text);outline-offset:-4px;background:#000;border:2px solid #000;flex:1;position:relative;overflow:hidden}.gauge-fill{background:var(--exp);height:100%;transition:width .24s steps(8,end);box-shadow:inset 0 2px #fff6}.gauge-hp .gauge-fill{background:var(--hp)}.gauge-exp .gauge-fill{background:var(--exp)}.gauge-mp .gauge-fill{background:var(--mp)}.gauge-gold .gauge-fill{background:var(--gold)}.gauge-boss .gauge-fill{background:var(--boss)}.gauge-value{text-align:right;min-width:60px;color:var(--menu-text);font-family:"Press Start 2P",monospace;font-size:11px}.h-jrpg{letter-spacing:2px;color:var(--gold);text-shadow:2px 2px #000;margin:0;font-family:"Press Start 2P",monospace;font-size:14px}.h-jrpg-sm{letter-spacing:1.5px;color:var(--menu-text);margin:0;font-family:"Press Start 2P",monospace;font-size:11px}.statusbar{color:var(--menu-text);padding:calc(var(--u)*1.25) calc(var(--u)*2);letter-spacing:1px;border-bottom:2px solid var(--menu-text);background:#000;justify-content:space-between;align-items:center;font-family:"Press Start 2P",monospace;font-size:10px;display:flex}.screen-header{align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*2);background:var(--menu-bg-deep);border-bottom:var(--u) solid #000;display:flex;position:relative}.screen-header:after{content:"";background:var(--menu-text);opacity:.5;height:2px;position:absolute;bottom:-2px;left:0;right:0}.screen-header-back{background:var(--menu-bg);color:var(--menu-text);border:var(--u) solid #000;outline:2px solid var(--menu-border-light);outline-offset:-2px;padding:calc(var(--u)*2) calc(var(--u)*3);cursor:pointer;letter-spacing:1px;align-items:center;gap:var(--u);-webkit-user-select:none;user-select:none;flex-shrink:0;min-height:44px;font-family:inherit;font-size:13px;transition:transform 60ms step-end;display:inline-flex}.screen-header-back:hover{background:#2a51b3}.screen-header-back:active{transform:translate(2px,2px)}.screen-header-title{color:var(--gold);letter-spacing:2px;text-shadow:2px 2px #000;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-family:"Press Start 2P",monospace;font-size:11px;overflow:hidden}.screen-header-meta{letter-spacing:1px;color:var(--menu-text);padding:calc(var(--u)*1) calc(var(--u)*2);border:2px solid var(--menu-text);background:#000;flex-shrink:0;margin-left:auto;font-family:"Press Start 2P",monospace;font-size:11px}@media (min-width:1024px){.screen-header{padding:calc(var(--u)*3) calc(var(--u)*4);gap:calc(var(--u)*3)}.screen-header-title{letter-spacing:3px;font-size:14px}.screen-header-meta{font-size:12px}}.navbar{background:var(--menu-bg-deep);border-top:var(--u) solid #000;padding:var(--u);gap:var(--u);display:flex}.navbar .pbtn{min-height:44px;padding:var(--u);flex:1;font-size:11px}.sub-card{background:var(--menu-bg);width:100%;color:var(--menu-text);border:var(--u) solid #000;outline:2px solid var(--menu-text);outline-offset:-6px;padding:calc(var(--u)*2) calc(var(--u)*3);margin-bottom:calc(var(--u)*2);cursor:pointer;text-align:left;font-family:inherit;transition:transform 80ms step-end;display:block;position:relative}.sub-card:hover{background:#2a51b3}.sub-card:active{transform:translate(2px,2px)}.sub-card-row{align-items:center;gap:calc(var(--u)*2);display:flex}.sub-card-sprite{background:var(--bg-deep);outline:2px solid var(--menu-text);outline-offset:-4px;border:2px solid #000;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.sub-card-body{flex:1;min-width:0}.sub-card-name{white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:13px;font-weight:700;overflow:hidden}.sub-card-meta{color:var(--gold);letter-spacing:1px;margin-bottom:var(--u);font-family:"Press Start 2P",monospace;font-size:10px}.badge{letter-spacing:1px;background:var(--menu-bg);color:var(--menu-text);border:2px solid #000;padding:4px 7px;font-family:"Press Start 2P",monospace;font-size:10px;display:inline-block}.badge-pass{background:var(--exp);color:#fff}.badge-fail{background:var(--hp);color:#fff}.badge-grade-s{background:var(--gold);color:#2a1a00}.badge-grade-a{background:var(--exp);color:#fff}.badge-grade-b{background:var(--mp);color:#fff}.badge-grade-c{color:#fff;background:#b06d2c}.badge-grade-f{background:var(--hp);color:#fff}.badge-progress{background:var(--menu-bg);color:var(--gold)}.badge-danger{background:var(--danger);color:#fff;animation:1s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.5}}.form-row{gap:var(--u);margin-bottom:calc(var(--u)*3);flex-direction:column;display:flex}.form-label{letter-spacing:1px;color:var(--gold);font-family:"Press Start 2P",monospace;font-size:11px}.form-help{color:#f4ecd099;font-size:12px}.form-input{background:var(--bg-deep);color:var(--menu-text);border:var(--u) solid #000;outline:2px solid var(--menu-text);outline-offset:-4px;padding:calc(var(--u)*2);letter-spacing:1px;width:100%;font-family:inherit;font-size:14px}.form-input:focus{outline-color:var(--gold);background:#15205e}.form-input::placeholder{color:#f4ecd059}.form-error{color:var(--hp);font-family:"Press Start 2P",monospace;font-size:12px}.check-row{align-items:center;gap:var(--u);cursor:pointer;-webkit-user-select:none;user-select:none;padding:4px;display:flex}.check-box{outline:2px solid var(--menu-text);outline-offset:-3px;background:var(--bg-deep);width:20px;height:20px;color:var(--gold);border:2px solid #000;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;display:flex}.dialog-box{background:var(--menu-bg);border:var(--u) solid #000;outline:2px solid var(--menu-text);outline-offset:-6px;padding:calc(var(--u)*3);margin:calc(var(--u)*2);font-size:13px;line-height:1.5;position:relative}.dialog-box:after{content:"▼";color:var(--gold);font-size:10px;animation:.8s steps(2,end) infinite bob;position:absolute;bottom:4px;right:10px}@keyframes bob{50%{transform:translateY(2px)}}.modal-overlay{z-index:50;padding:calc(var(--u)*2);background:#000000b3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.scroll{scrollbar-width:thin;scrollbar-color:var(--gold) var(--bg-deep);overflow:hidden auto}.scroll::-webkit-scrollbar{width:10px}.scroll::-webkit-scrollbar-track{background:var(--bg-deep)}.scroll::-webkit-scrollbar-thumb{background:var(--gold);border:2px solid #000}.scroll>.pwin,.scroll>.dialog-box{margin-left:0;margin-right:0}.sprite{image-rendering:pixelated;display:inline-block}.sprite svg{image-rendering:pixelated;shape-rendering:crispedges;display:block}@keyframes hop{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.sprite-hop{animation:.6s steps(2,end) infinite hop}.mini-gauge{outline:1px solid var(--menu-text);outline-offset:-2px;background:#000;border:1px solid #000;height:8px;position:relative}.mini-gauge-fill{background:var(--exp);height:100%;transition:width .24s steps(8,end)}.sim-row{padding:calc(var(--u)*2);border-bottom:2px dashed #f4ecd033;justify-content:space-between;align-items:center;font-size:13px;display:flex}.sim-row:last-child{border-bottom:none}.tag{background:var(--menu-bg-deep);color:var(--gold);letter-spacing:1px;border:2px solid #000;padding:4px 6px;font-family:"Press Start 2P",monospace;font-size:10px;display:inline-block}.flex{display:flex}.flex-col{flex-direction:column}.gap-1{gap:var(--u)}.gap-2{gap:calc(var(--u)*2)}.gap-3{gap:calc(var(--u)*3)}.flex-1{flex:1}.flex-grow{flex-grow:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.text-center{text-align:center}.text-gold{color:var(--gold)}.text-hp{color:var(--hp)}.text-exp{color:var(--exp)}.text-mp{color:var(--mp)}.text-boss{color:var(--boss)}.text-sm{font-size:12px}.text-xs{letter-spacing:1px;font-family:"Press Start 2P",monospace;font-size:10px}.mt-1{margin-top:var(--u)}.mt-2{margin-top:calc(var(--u)*2)}.mt-3{margin-top:calc(var(--u)*3)}.mt-4{margin-top:calc(var(--u)*4)}.mb-1{margin-bottom:var(--u)}.mb-2{margin-bottom:calc(var(--u)*2)}.mb-3{margin-bottom:calc(var(--u)*3)}.p-2{padding:calc(var(--u)*2)}.p-3{padding:calc(var(--u)*3)}.w-full{width:100%}.title-bg{background:linear-gradient(180deg, transparent 0%, #7a5adc2e 100%), var(--bg);padding:calc(var(--u)*6) calc(var(--u)*4);flex-direction:column;flex:1;justify-content:space-between;align-items:center;display:flex;position:relative;overflow:hidden}.title-logo{color:var(--gold);text-shadow:3px 3px 0 #000, -1px -1px 0 var(--gold-deep);letter-spacing:3px;text-align:center;margin-top:calc(var(--u)*4);font-family:"Press Start 2P",monospace;font-size:22px;line-height:1.4}.title-sub{letter-spacing:2px;color:var(--menu-text);text-shadow:2px 2px #000;text-align:center;margin-top:calc(var(--u)*2);font-size:14px}.stage-floor{background:repeating-linear-gradient(90deg, var(--boss-deep) 0px, var(--boss-deep) 8px, var(--bg-deep) 8px, var(--bg-deep) 16px);border-top:4px solid var(--menu-text);height:80px;position:relative}.stage-floor:before{content:"";background:linear-gradient(#7a5adc66 0%,#0000 100%);position:absolute;inset:0}.pix-divider{background:repeating-linear-gradient(90deg, var(--menu-text) 0 4px, transparent 4px 8px);height:4px;margin:calc(var(--u)*2) 0}.section-block{outline-offset:-4px;padding:calc(var(--u)*3);margin-bottom:calc(var(--u)*3);background:#00000040;border:2px solid #000;outline:2px solid #f4ecd066}.section-block-header{color:var(--gold);letter-spacing:1.5px;margin:calc(var(--u)*-3) calc(var(--u)*-3) calc(var(--u)*2);padding:calc(var(--u)*2) calc(var(--u)*3);background:var(--menu-bg-deep);align-items:center;gap:var(--u);border-bottom:2px solid #000;font-family:"Press Start 2P",monospace;font-size:11px;display:flex}@keyframes glow{0%,to{box-shadow:0 0 0 0 var(--gold)}50%{box-shadow:0 0 12px 2px var(--gold)}}.rank-glow{animation:2s steps(8,end) infinite glow}.num{letter-spacing:1px;font-family:"Press Start 2P",monospace}.hero-frame{background:var(--bg-deep);outline:2px solid var(--gold);outline-offset:-4px;border:2px solid #000;flex-shrink:0;padding:4px;position:relative}.hero-frame-grad{outline-color:var(--gold);box-shadow:0 0 0 2px var(--gold-deep), 0 0 12px 2px #f9c93b73;animation:2.4s steps(8,end) infinite grad-portrait-glow}@keyframes grad-portrait-glow{0%,to{box-shadow:0 0 0 2px var(--gold-deep), 0 0 6px 1px #f9c93b59}50%{box-shadow:0 0 0 2px var(--gold-deep), 0 0 18px 4px #f9c93bbf}}.grad-frame{position:relative}.grad-frame:before{content:"";pointer-events:none;z-index:1;background:linear-gradient(135deg,#f9c93b1a 0%,#0000 30% 70%,#f9c93b1a 100%);position:absolute;inset:-2px}.grad-banner{background:repeating-linear-gradient(90deg, var(--gold) 0 6px, var(--gold-deep) 6px 12px);color:#1a1a1a;letter-spacing:2px;text-shadow:0 1px #fff6;z-index:2;border-top:2px solid #000;border-bottom:2px solid #000;justify-content:center;align-items:center;gap:10px;margin:-4px -4px 10px;padding:6px 8px;font-family:"Press Start 2P",monospace;font-size:11px;animation:3s linear infinite grad-banner-shimmer;display:flex;position:relative}.grad-banner-text{white-space:nowrap;background:#fff8c0d9;border:2px solid #1a1a1a;padding:3px 10px}.grad-title-mark{color:var(--gold);text-shadow:0 0 4px #f9c93bb3;margin-left:4px;animation:1.4s steps(4,end) infinite grad-spark;display:inline-block}.grad-banner-spark{color:#1a1a1a;font-size:14px;animation:1s steps(4,end) infinite grad-spark}.grad-banner-spark:last-child{animation-delay:.5s}@keyframes grad-banner-shimmer{0%{background-position:0 0}to{background-position:48px 0}}@keyframes grad-spark{0%,to{opacity:1;transform:scale(1)rotate(0)}50%{opacity:.6;transform:scale(1.3)rotate(72deg)}}.gauge-credit .gauge-fill{background:var(--mp)}.gauge-credit-grad .gauge-track{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-deep), 0 0 6px #f9c93b66}.gauge-credit-grad .gauge-value{color:var(--gold)}