:root{--bg: #0b0f17;--bg-2: #121828;--fg: #dbe0ff;--accent: #63e485;--accent-2: #59b0ff;--danger: #ff6b6b;--pixel-border: 2px}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:DotGothic16,"Press Start 2P",Noto Sans JP,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;letter-spacing:.2px}.app{display:grid;grid-template-rows:auto 1fr auto;height:100%}.header,.footer{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-2);border:calc(var(--pixel-border) * 2) solid #000;outline:var(--pixel-border) solid #333;box-shadow:4px 4px #000,8px 8px #333}.footer{border-top:calc(var(--pixel-border) * 2) solid #000}.brand{font-weight:700;letter-spacing:.5px;font-family:"Press Start 2P",DotGothic16,sans-serif}.nav a{color:var(--fg);text-decoration:none;margin-right:12px;display:inline-block;padding:4px 8px;border:var(--pixel-border) solid #000;box-shadow:0 0 0 var(--pixel-border) #333}.nav a:hover{color:#08121f;background:var(--accent)}.main{padding:12px}.pixel-card{position:relative;background:linear-gradient(var(--bg-2),var(--bg-2)),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 4px);border:calc(var(--pixel-border) * 2) solid #000;outline:var(--pixel-border) solid #333;box-shadow:4px 4px #000,8px 8px #333;padding:12px;margin-bottom:12px}.pixel-card:before,.pixel-card:after{content:"";position:absolute;width:8px;height:8px;background:var(--bg);border:var(--pixel-border) solid #000}.pixel-card:before{left:-2px;top:-2px}.pixel-card:after{right:-2px;bottom:-2px}.titlebar{display:grid;grid-template-columns:1fr auto;align-items:center;background:#1a2240;color:var(--fg);border:var(--pixel-border) solid #000;box-shadow:0 0 0 var(--pixel-border) #333;margin:-8px -8px 8px;padding:6px 8px}.titlebar .title{font-family:"Press Start 2P",DotGothic16,sans-serif;letter-spacing:.5px}.titlebar .title-actions{display:flex;gap:8px}.btn{position:relative;background:var(--accent-2);color:#08121f;border:var(--pixel-border) solid #000;padding:8px 12px;cursor:pointer;box-shadow:calc(var(--pixel-border)) calc(var(--pixel-border)) 0 #000,calc(var(--pixel-border) * 2) calc(var(--pixel-border) * 2) 0 #333}.btn:hover{filter:brightness(1.05)}.btn:active{transform:translate(calc(var(--pixel-border)),calc(var(--pixel-border)));box-shadow:0 0 #000}.btn:focus-visible{outline:none;box-shadow:0 0 0 var(--pixel-border) #fff,calc(var(--pixel-border)) calc(var(--pixel-border)) 0 #000}.btn.danger{background:var(--danger);color:#1a0b0b}.btn.secondary{background:var(--accent)}.btn.ghost{background:transparent;color:var(--fg)}.btn.ghost:hover{background:#1b2336}.input,.select,.textarea{background:#0f1526;color:var(--fg);border:var(--pixel-border) solid #000;padding:6px}.input,.select,.textarea{box-shadow:inset var(--pixel-border) var(--pixel-border) 0 #000,inset calc(var(--pixel-border) * -1) calc(var(--pixel-border) * -1) 0 #333;caret-color:var(--accent)}.textarea{min-height:92px}.input::placeholder,.textarea::placeholder{color:#9aa8c7}img,canvas{image-rendering:pixelated}.sprite-icon{display:inline-block;border:var(--pixel-border) solid #000;box-shadow:0 0 0 var(--pixel-border) #333;background:#0f1526}.sprite-icon.bob{animation:bob 1.2s ease-in-out infinite}.sprite-icon.sparkle:after,.sprite-icon.sparkle:before{content:"";position:absolute;width:2px;height:2px;background:var(--accent-2);box-shadow:2px 0 #000;opacity:.9;animation:sparkle 1.2s steps(2) infinite}.sprite-icon.sparkle:after{right:2px;top:2px}.sprite-icon.sparkle:before{left:2px;bottom:2px;animation-delay:.6s}.retro-overlay{position:fixed;inset:0;pointer-events:none;z-index:100;background-image:repeating-linear-gradient(180deg,#ffffff08 0 1px,#00000008 1px 2px),radial-gradient(closest-side,#0000 60%,#0003)}.pixel-fx-layer{position:fixed;inset:0;pointer-events:none;z-index:9999}.pixel-burst{position:absolute;transform:translate(-50%,-50%)}.pixel-particle{position:absolute;left:0;top:0;width:var(--size);height:var(--size);background:var(--color);border:var(--pixel-border) solid #000;box-shadow:0 0 0 var(--pixel-border) #333;opacity:.95;animation:burst .7s ease-out forwards;animation-delay:var(--delay)}@keyframes burst{0%{transform:translate(0);opacity:1}80%{transform:translate(var(--dx),var(--dy));opacity:1}to{transform:translate(var(--dx),var(--dy));opacity:0}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-1px)}}@keyframes sparkle{0%,to{opacity:.85}50%{opacity:.4}}.btn{position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:-50%;left:-20%;width:40%;height:200%;background:linear-gradient(45deg,#fff3,#fff0);transform:translate(-100%);opacity:0}.btn:hover:after{animation:shine .6s ease-out forwards}@keyframes shine{0%{transform:translate(-100%);opacity:0}20%{opacity:.5}to{transform:translate(300%);opacity:0}}.tasks{display:grid;gap:8px}.task-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.xp-bar{height:12px;background:#111522;border:var(--pixel-border) solid #000}.xp-fill{height:100%;background:var(--accent)}.toast{position:fixed;left:50%;top:16px;transform:translate(-50%);background:#0f1526;color:var(--accent);border:var(--pixel-border) solid #000;padding:8px 12px;box-shadow:0 0 0 var(--pixel-border) #333;animation:pop .2s ease-out,fade 2s ease-out}@keyframes pop{0%{transform:translate(-50%) scale(.9);opacity:0}to{transform:translate(-50%) scale(1);opacity:1}}@keyframes fade{0%{opacity:1}80%{opacity:1}to{opacity:0}}