:root{--bg:#1a1423;--bg-panel:#251c33;--bg-panel-raised:#2f2442;--border:#4a3b63;--border-bright:#7c5cbf;--text:#e8e0d0;--text-dim:#a396b8;--gold:#e8b33d;--green:#6dbf6d;--red:#d1495b;--font-pixel:"Press Start 2P", monospace;--font-body:"VT323", monospace}*{box-sizing:border-box}body{background-color:var(--bg);color:var(--text);font-family:var(--font-body);background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:24px 24px;margin:0;font-size:22px;line-height:1.4}button{cursor:pointer;font-family:inherit}code{font-family:var(--font-body)}.app{flex-direction:column;max-width:860px;min-height:100vh;margin:0 auto;padding:16px;display:flex}.app-header{border-bottom:4px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 0 20px;display:flex}.app-title{font-family:var(--font-pixel);color:var(--gold);cursor:pointer;text-shadow:3px 3px #000;margin:0;font-size:18px}.app-main{flex:1;padding:24px 0}.app-footer{border-top:4px solid var(--border);color:var(--text-dim);text-align:center;padding:12px 0;font-size:18px}.screen-title{font-family:var(--font-pixel);color:var(--text);margin:16px 0 24px;font-size:15px;line-height:1.8}.btn{font-family:var(--font-pixel);color:var(--text);background:var(--bg-panel-raised);border:3px solid var(--border-bright);padding:12px 18px;font-size:11px;box-shadow:4px 4px #000}.btn:hover:not(:disabled){background:var(--border-bright);color:#fff}.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px #000}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{border-color:var(--gold);color:var(--gold);margin-top:16px}.btn-primary:hover:not(:disabled){background:var(--gold);color:#1a1423}.btn-ghost{border-color:var(--border);box-shadow:none;color:var(--text-dim);background:0 0}.btn-small{padding:8px 12px;font-size:9px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;display:grid}.card{background:var(--bg-panel);border:4px solid var(--border);color:var(--text);text-align:left;flex-direction:column;gap:10px;padding:24px 20px;display:flex}.card-clickable{border-color:var(--border-bright);box-shadow:6px 6px #000}.card-clickable:hover{border-color:var(--gold);transform:translate(-2px,-2px);box-shadow:8px 8px #000}.card-locked{opacity:.45}.card-title{font-family:var(--font-pixel);color:var(--gold);font-size:14px}.card-detail{color:var(--text-dim);font-size:20px}.level-list{flex-direction:column;gap:12px;display:flex}.level-row{background:var(--bg-panel);border:3px solid var(--border-bright);color:var(--text);font-family:var(--font-body);text-align:left;align-items:center;gap:16px;padding:14px 18px;font-size:22px;display:flex;box-shadow:4px 4px #000}.level-row:hover:not(:disabled){border-color:var(--gold)}.level-row:disabled{cursor:not-allowed}.level-locked{opacity:.4;border-color:var(--border);box-shadow:none}.level-done{border-color:var(--green)}.level-number{font-family:var(--font-pixel);color:var(--gold);white-space:nowrap;font-size:11px}.level-title{flex:1}.level-status{color:var(--text-dim);white-space:nowrap;font-size:18px}.level-done .level-status{color:var(--green)}.play-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.play-progress{color:var(--text-dim);font-size:18px}.progress-bar{background:var(--bg-panel);border:3px solid var(--border);height:14px;margin-bottom:24px}.progress-fill{background:var(--gold);height:100%;transition:width .3s}.step-box{background:var(--bg-panel);border:4px solid var(--border);padding:24px;box-shadow:8px 8px #000}.dialog-box{align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.dialog-portrait{border:3px solid var(--gold);background:#14101c;flex-shrink:0;padding:6px;line-height:0;box-shadow:4px 4px #000}.dialog-portrait svg{image-rendering:pixelated}.portrait-img{image-rendering:pixelated;object-fit:cover;display:block}@media (prefers-reduced-motion:no-preference){.portrait-talking{animation:.6s ease-in-out infinite portrait-bob}}@keyframes portrait-bob{0%,to{transform:none}50%{transform:translateY(-1px)}}.dialog-content{flex:1;min-width:0}.dialog-name{font-family:var(--font-pixel);color:var(--gold);margin-bottom:10px;font-size:11px;line-height:1.6;display:block}.dialog-role{color:var(--text-dim)}@media (width<=480px){.dialog-box{flex-direction:column}}.options{flex-direction:column;gap:12px;display:flex}.option{background:var(--bg-panel-raised);border:3px solid var(--border);color:var(--text);text-align:left;padding:14px 18px;font-size:22px}.option:hover:not(:disabled){border-color:var(--border-bright)}.option-selected{border-color:var(--gold);background:#3a2d52}.option-correct{border-color:var(--green);background:#23361f}.option-wrong{border-color:var(--red);background:#3d1f26}.query-slate{border:3px dashed var(--border-bright);background:#14101c;flex-wrap:wrap;align-items:center;gap:8px;min-height:64px;margin-bottom:16px;padding:12px;display:flex}.query-slate-wrong{border-color:var(--red)}.query-placeholder{color:var(--text-dim);font-size:18px}.token-bank{flex-wrap:wrap;gap:8px;display:flex}.token{font-family:var(--font-body);background:var(--bg-panel-raised);border:3px solid var(--border-bright);color:var(--text);padding:8px 14px;font-size:20px;box-shadow:3px 3px #000}.token:hover:not(:disabled){border-color:var(--gold)}.token:disabled{opacity:.25;cursor:default;box-shadow:none}.token-picked{border-color:var(--gold);color:var(--gold)}.feedback{border:3px solid;margin-top:20px;padding:16px}.feedback-correct{border-color:var(--green);background:#23361f}.feedback-wrong{border-color:var(--red);background:#3d1f26}.feedback-title{font-family:var(--font-pixel);margin:0 0 12px;font-size:12px}.feedback-correct .feedback-title{color:var(--green)}.feedback-wrong .feedback-title{color:var(--red)}.feedback p{margin:0 0 8px}.complete-screen{text-align:center;padding:48px 0}.complete-screen .screen-title{color:var(--gold)}.complete-level-title{font-size:26px}.complete-xp{color:var(--green);font-size:24px}.complete-actions{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:24px;display:flex}.lives-display{color:var(--text);white-space:nowrap;align-items:center;gap:8px;font-size:20px;display:inline-flex}.hearts-row{flex-wrap:wrap;align-items:center;gap:3px;display:inline-flex}.heart-icon{image-rendering:pixelated}.modal-backdrop{z-index:100;background:#0a0610d9;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--bg-panel);border:4px solid var(--red);text-align:center;width:100%;max-width:480px;padding:32px 28px;box-shadow:10px 10px #000}.modal-title{font-family:var(--font-pixel);color:var(--red);margin:0 0 16px;font-size:14px;line-height:1.8}.modal-title-success{color:var(--green)}.modal-gold{border-color:var(--gold)}.modal-title-gold{color:var(--gold)}.name-input{width:100%;font-family:var(--font-body);color:var(--text);border:3px solid var(--border-bright);text-align:center;background:#14101c;outline:none;margin-top:8px;padding:12px 14px;font-size:22px}.name-input:focus{border-color:var(--gold)}.name-input::placeholder{color:var(--text-dim);opacity:.7}.name-error{color:var(--red);margin:10px 0 0}.player-name{color:var(--text-dim);margin-top:6px;font-size:18px;display:block}.modal-title-fail{color:var(--red)}.modal-detail{color:var(--text-dim);margin:12px 0}.modal-actions{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:20px;display:flex}.d20{clip-path:polygon(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);filter:drop-shadow(6px 6px #000);background:linear-gradient(135deg,#9b7fd4 0%,#6a4bab 55%,#4a3b63 100%);justify-content:center;align-items:center;width:120px;height:132px;margin:8px auto 16px;display:flex}.d20-number{font-family:var(--font-pixel);color:#fff;text-shadow:3px 3px #000;font-size:28px}.d20-rolling{animation:.45s linear infinite d20-tumble}@keyframes d20-tumble{0%{transform:rotate(0)scale(1)}25%{transform:rotate(90deg)scale(.92)}50%{transform:rotate(180deg)scale(1.05)}75%{transform:rotate(270deg)scale(.95)}to{transform:rotate(360deg)scale(1)}}.d20-success{background:linear-gradient(135deg,#8fd48f 0%,#4d9950 55%,#2d5c30 100%);animation:.35s ease-out d20-land}.d20-fail{background:linear-gradient(135deg,#e07a8a 0%,#b13a4c 55%,#6e2430 100%);animation:.35s ease-out d20-land}@keyframes d20-land{0%{transform:scale(1.35)}60%{transform:scale(.9)}to{transform:scale(1)}}.play-screen{position:relative}.xp-pop{font-family:var(--font-pixel);color:var(--green);text-shadow:2px 2px #000;pointer-events:none;opacity:0;z-index:10;font-size:12px;position:absolute;top:64px;right:12px}.dialog-typing{cursor:pointer}.type-cursor{background:var(--gold);vertical-align:text-bottom;width:.55em;height:1em;margin-left:3px;display:inline-block}.dialog-text p{margin:0 0 14px}.dialog-text p:last-child{margin-bottom:0}@media (prefers-reduced-motion:no-preference){.step-box{animation:.25s ease-out step-in}.step-shake{animation:.45s shake}.step-flash{animation:.6s ease-out flash-gold}.xp-pop{animation:1.1s ease-out forwards xp-float}.type-cursor{animation:.7s step-end infinite cursor-blink}.heart-breaking{animation:.6s ease-in forwards heart-break}.heart-pop{animation:.5s ease-out heart-pop-in}.complete-screen{animation:.35s ease-out step-in}.complete-screen .screen-title{animation:.45s ease-out heart-pop-in}}@keyframes step-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}@keyframes flash-gold{0%{box-shadow:0 0 0 2px #e8b33df2,8px 8px #000}to{box-shadow:0 0 0 20px #e8b33d00,8px 8px #000}}@keyframes xp-float{0%{opacity:0;transform:translateY(8px)}15%{opacity:1}to{opacity:0;transform:translateY(-36px)}}@keyframes cursor-blink{50%{opacity:0}}@keyframes heart-break{0%{transform:none}20%{transform:translate(-3px)rotate(-10deg)}40%{transform:translate(3px)rotate(10deg)}60%{transform:translate(-2px)scale(1.2)}to{opacity:0;transform:scale(1.5)}}@keyframes heart-pop-in{0%{transform:scale(0)}60%{transform:scale(1.35)}to{transform:scale(1)}}.save-controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.save-error{color:var(--red);cursor:pointer;font-size:18px}