@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Noto+Sans+JP:wght@400;700&display=swap";:root{--bg: #000;--surface: #050505;--surface2: #111;--border: #333;--text: #fff;--text-dim: #aaa;--accent: #cc2244;--accent-dark: #881122;--accent-rgb: 204,34,68;--accent-glow: rgba(204,34,68,.3);--radius: 8px;--font: "Press Start 2P", monospace;--font-ja: "Noto Sans JP", sans-serif;--green: #22cc66;--red-flash: #ff3355;--border-w: 1px;--border-col: var(--border);--glow-size: 16px;--shimmer-str: 0;--canvas-light: 0}@property --shimmer-angle{syntax: "<angle>"; initial-value: 0deg; inherits: true;}.card{position:relative}.card:after{content:"";position:absolute;inset:calc(-1 * var(--border-w));border-radius:var(--radius);padding:var(--border-w);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--shimmer-str, 0);pointer-events:none;transition:opacity .2s ease}input[type=range].ui-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;outline:none;cursor:pointer;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill, 50%),var(--surface2) var(--fill, 50%),var(--surface2) 100%);box-shadow:inset 0 0 0 1px var(--border-col)}input[type=range].ui-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:4px;background:var(--accent);border:2px solid #fff;cursor:grab;box-shadow:0 0 0 1px var(--border-col),0 0 12px var(--accent-glow);transition:transform .12s ease,box-shadow .12s ease}input[type=range].ui-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range].ui-slider:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.25);box-shadow:0 0 0 1px var(--border-col),0 0 18px var(--accent)}input[type=range].ui-slider::-moz-range-thumb{width:18px;height:18px;border-radius:4px;background:var(--accent);border:2px solid #fff;cursor:grab;box-shadow:0 0 0 1px var(--border-col),0 0 12px var(--accent-glow)}.seg{display:flex;background:var(--surface2);border:var(--border-w) solid var(--border-col);border-radius:var(--radius);padding:2px;position:relative;overflow:hidden}.seg-btn{flex:1;padding:10px 8px;font-size:7px;font-family:var(--font);letter-spacing:1.5px;background:transparent;border:none;color:var(--text-dim);cursor:pointer;border-radius:calc(var(--radius) - 4px);transition:color .18s ease,background .18s ease;position:relative;z-index:2}.seg-btn.active{background:var(--accent);color:#fff;box-shadow:0 0 10px var(--accent-glow)}.subsection-title{font-size:7px;color:var(--accent);letter-spacing:2px;margin-bottom:14px;margin-top:6px;display:flex;align-items:center;gap:8px}.subsection-title:before{content:"";width:8px;height:8px;background:var(--accent);box-shadow:0 0 8px var(--accent)}.subsection-title:after{content:"";flex:1;height:1px;background:linear-gradient(to right,var(--border-col),transparent)}.subsection+.subsection{margin-top:22px;padding-top:22px;border-top:1px solid var(--border-col)}.slider-row{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}.slider-row:last-child{margin-bottom:0}.slider-head{display:flex;justify-content:space-between;align-items:baseline}.slider-label{font-size:7px;color:var(--text-dim);letter-spacing:1.2px}.slider-value{font-size:9px;color:var(--accent);font-variant-numeric:tabular-nums;min-width:48px;text-align:right;text-shadow:0 0 8px var(--accent-glow)}.light-mode{--bg: #fff;--surface: #fff;--surface2: #f2f2f2;--border: #d0d0d0;--text: #111;--text-dim: #555;--green: #1a9e4a;--red-flash: #cc1133;--canvas-light: 1}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:10px;line-height:1.6;-webkit-font-smoothing:antialiased}.page{display:flex;flex-direction:column;align-items:center;min-height:100dvh;padding:24px 16px;gap:16px;max-width:480px;margin:0 auto}.page-title{font-size:20px;color:var(--text);text-align:center;letter-spacing:2px}.page-title:before,.page-title:after{content:"";display:inline-block;width:6px;height:6px;margin:0 10px 3px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.subtitle{font-size:8px;color:var(--text-dim);text-align:center}.card{background:var(--surface);border:var(--border-w) solid var(--border-col);border-radius:var(--radius);padding:16px;width:100%;box-shadow:0 0 var(--glow-size) var(--accent-glow)}.card-title{font-size:8px;color:var(--text-dim);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.btn{display:block;width:100%;padding:14px 16px;background:var(--surface2);border:var(--border-w) solid var(--border-col);border-radius:var(--radius);color:var(--text);font-family:var(--font);font-size:9px;cursor:pointer;text-align:center;transition:border-color .15s,background .15s;letter-spacing:1px}.btn:hover{border-color:var(--accent);background:var(--surface)}.btn:active{transform:scale(.98)}.btn-accent{background:rgba(var(--accent-rgb),.14);border-color:var(--accent);color:var(--text)}.btn-accent:hover{background:rgba(var(--accent-rgb),.22);border-color:var(--accent-dark)}.btn-ghost{background:transparent;border-color:var(--border);color:var(--text-dim)}input.text-input{display:block;width:100%;padding:14px 12px;background:var(--surface2);border:calc(var(--border-w) + 1px) solid var(--border-col);border-radius:var(--radius);color:var(--text);font-family:var(--font);font-size:12px;outline:none;transition:border-color .15s}input.text-input:focus{border-color:var(--accent)}input.text-input::placeholder{color:var(--text-dim)}.game-wrap{display:flex;flex-direction:column;width:100%;max-width:480px;margin:0 auto;min-height:100dvh;background:var(--bg)}.hud{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--surface);border-bottom:2px solid var(--accent);flex-shrink:0}.hud-left{display:flex;flex-direction:column;gap:2px}.hud-level{font-size:7px;color:var(--text)}.hud-score{font-size:9px;color:var(--text)}.hearts{display:flex;gap:4px}.heart{font-size:14px}.heart.empty{opacity:.2}.hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.hud-timer{font-size:7px;color:var(--text-dim)}.canvas-area{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px}canvas#dungeon{image-rendering:pixelated;image-rendering:crisp-edges;display:block;max-width:100%;max-height:100%;border:1px solid var(--border-col);border-radius:4px}.ja-mode canvas#dungeon{border:2px solid #ffb7c5;box-shadow:0 0 20px #ffb7c533}.ja-mode .hud{border-bottom:2px solid #ffb7c5;box-shadow:0 2px 10px #ffb7c54d}.ja-mode .canvas-area{background:radial-gradient(circle,#1a1a2e,#000);position:relative}.ja-mode .canvas-area:before{content:"✿";position:absolute;top:10px;right:10px;color:#ffb7c5;opacity:.2;font-size:20px}.ja-mode .canvas-area:after{content:"✿";position:absolute;bottom:10px;left:10px;color:#ffb7c5;opacity:.2;font-size:20px}.controls-bar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:14px 8px 24px 14px;background:var(--surface);border-top:1px solid var(--border-col)}@media (min-width: 768px){.controls-bar{display:none}}.dpad{position:relative;width:178px;height:178px;flex-shrink:0}.dpad-btn{position:absolute;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--surface2);border:calc(var(--border-w) + .5px) solid var(--border-col);border-radius:12px;color:var(--text);font-size:22px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .07s,border-color .07s,transform .07s}.dpad-btn:active{background:rgba(var(--accent-rgb),.2);border-color:var(--accent);transform:scale(.9)}.dpad-up{top:0;left:61px}.dpad-down{bottom:0;left:61px}.dpad-left{top:61px;left:0}.dpad-right{top:61px;right:0}.dpad-center{position:absolute;top:61px;left:61px;width:56px;height:56px;background:var(--bg);border:calc(var(--border-w) + .5px) solid var(--border-col);border-radius:12px;pointer-events:none}.action-btn{width:96px;height:96px;border-radius:12px;background:var(--surface2);border:calc(var(--border-w) + .5px) solid var(--border-col);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .07s,border-color .07s,transform .07s}.action-btn:active{background:rgba(var(--accent-rgb),.2);border-color:var(--accent);transform:scale(.9)}.talk-bubble{position:relative;display:flex;align-items:center;justify-content:center}.talk-bubble-text{position:absolute;top:14px;left:50%;transform:translate(-50%);font-family:var(--font);font-size:8px;letter-spacing:1px;white-space:nowrap;pointer-events:none}.challenge-overlay{position:fixed;inset:0;background:#0a0a0feb;display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}.challenge-box{background:var(--surface);border:calc(var(--border-w) + 1px) solid var(--accent);border-radius:var(--radius);padding:24px;width:100%;max-width:400px;display:flex;flex-direction:column;gap:16px;box-shadow:0 0 calc(var(--glow-size) * 2) var(--accent-glow)}.challenge-label{font-size:7px;color:var(--text-dim);text-align:center;text-transform:uppercase}.challenge-word{font-size:22px;color:var(--text);text-align:center}.challenge-prompt{font-size:8px;color:var(--text-dim);text-align:center}.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice-btn{padding:12px 8px;background:var(--surface2);border:var(--border-w) solid var(--border-col);border-radius:var(--radius);color:var(--text);font-family:var(--font);font-size:8px;cursor:pointer;text-align:center;transition:border-color .1s,background .1s}.choice-btn:hover{border-color:var(--accent)}.choice-btn.correct{border-color:var(--green);background:#22cc6626;color:var(--text)}.choice-btn.wrong{border-color:var(--red-flash);background:#ff335526;color:var(--text)}.lb-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border-col);font-size:8px}.lb-rank{color:var(--text-dim);width:20px;text-align:right}.lb-name{flex:1;color:var(--text)}.lb-score,.lb-row.me .lb-name{color:var(--text)}.lb-row.me:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}.word-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border-col);font-size:8px}.word-es{color:var(--text)}.word-en{color:var(--text-dim)}.settings-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.settings-card-head .card-title{margin-bottom:0}.settings-status{font-size:6px;letter-spacing:1px;color:var(--text-dim)}.settings-status.saving,.settings-status.queued,.settings-status.saved,.settings-status.error,.settings-error{color:var(--text)}.settings-status:before{content:"";display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:var(--accent);vertical-align:1px}.settings-status.saved:before{background:var(--green)}.settings-status.error:before{background:var(--red-flash)}.settings-error{margin-top:12px;padding-left:10px;border-left:4px solid var(--red-flash);font-size:7px;line-height:1.7}.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:12px}.theme-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:8px 4px;background:transparent;border:1px solid transparent;border-radius:var(--radius);color:inherit;font-family:var(--font);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,transform .15s}.theme-swatch:hover,.theme-swatch:focus-visible{background:rgba(var(--accent-rgb),.08);border-color:var(--border);outline:none}.theme-swatch:active{transform:translateY(1px) scale(.98)}.theme-swatch.active{background:rgba(var(--accent-rgb),.1);border-color:rgba(var(--accent-rgb),.45)}.swatch-circle{position:relative;width:40px;height:40px;border-radius:50%;border:3px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 -8px #0000002e;transition:border-color .15s,box-shadow .15s}.theme-swatch.active .swatch-circle{border-color:var(--text);box-shadow:0 0 18px var(--accent-glow),inset 0 -8px #0000002e}.theme-swatch.active .swatch-circle:after{content:"";position:absolute;inset:-45%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translate(-70%) rotate(18deg);animation:swatch-shimmer 1.7s ease-in-out infinite}.swatch-label{max-width:100%;overflow:hidden;font-size:6px;color:var(--text-dim);text-overflow:ellipsis}.theme-swatch.active .swatch-label{color:var(--text)}@keyframes swatch-shimmer{0%,35%{transform:translate(-70%) rotate(18deg)}70%,to{transform:translate(70%) rotate(18deg)}}@media (prefers-reduced-motion: reduce){.theme-swatch.active .swatch-circle:after{animation:none;transform:translate(0) rotate(18deg);opacity:.25}}.stat-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border-col);font-size:8px}.stat-label{color:var(--text-dim)}.stat-value{color:var(--text)}.spacer{flex:1}@keyframes flash-green{0%,to{opacity:0}20%,80%{opacity:1}}@keyframes flash-red{0%,to{opacity:0}20%,80%{opacity:1}}.flash-green{animation:flash-green .4s ease;background:#22cc6626}.flash-red{animation:flash-red .4s ease;background:#ff335526}