@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{--color-bg: #1a1a2e;--color-bg2: #16213e;--color-panel: #0f3460;--color-accent: #e05c2a;--color-accent2: #f0a500;--color-text: #e0e0e0;--color-text-dim: #8899aa;--color-success: #4caf50;--color-danger: #e53935;--color-border: #2a4a7f;--font-pixel: "Press Start 2P", monospace;--font-ui: "Press Start 2P", monospace;image-rendering:pixelated;image-rendering:crisp-edges}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;min-height:100vh;background:var(--color-bg);color:var(--color-text);font-family:var(--font-pixel);font-size:10px;line-height:1.8}a{color:var(--color-accent2);text-decoration:none}a:hover{text-decoration:underline}img,canvas{image-rendering:pixelated}.app{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;max-width:960px;margin:0 auto;width:100%;padding:24px 16px}.navbar{background:var(--color-bg2);border-bottom:2px solid var(--color-border);padding:12px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}.navbar-brand{font-size:14px;color:var(--color-accent);letter-spacing:2px;text-shadow:2px 2px 0 #000}.navbar-links{display:flex;gap:16px;flex:1}.nav-link{color:var(--color-text-dim);font-size:8px;padding:4px 8px;border:1px solid transparent;transition:color .15s,border-color .15s}.nav-link:hover,.nav-link.active{color:var(--color-accent2);border-color:var(--color-accent2);text-decoration:none}.navbar-user{font-size:8px;color:var(--color-text-dim)}.btn{display:inline-block;font-family:var(--font-pixel);font-size:8px;padding:8px 16px;border:2px solid currentColor;cursor:pointer;background:transparent;color:var(--color-text);letter-spacing:1px;transition:background .1s,color .1s;image-rendering:pixelated}.btn:hover{background:#ffffff14}.btn:active{transform:translate(1px,1px)}.btn-primary{color:var(--color-accent);border-color:var(--color-accent)}.btn-primary:hover{background:var(--color-accent);color:#fff}.btn-danger{color:var(--color-danger);border-color:var(--color-danger)}.btn-danger:hover{background:var(--color-danger);color:#fff}.btn-success{color:var(--color-success);border-color:var(--color-success)}.btn-success:hover{background:var(--color-success);color:#fff}.btn:disabled{opacity:.4;cursor:not-allowed}.panel{background:var(--color-panel);border:2px solid var(--color-border);padding:16px;margin-bottom:16px}.panel-title{font-size:10px;color:var(--color-accent2);margin-bottom:12px;text-transform:uppercase;letter-spacing:2px;border-bottom:1px solid var(--color-border);padding-bottom:8px}.form-group{margin-bottom:16px}.form-label{display:block;font-size:8px;color:var(--color-text-dim);margin-bottom:6px}.form-input{width:100%;background:var(--color-bg);border:2px solid var(--color-border);color:var(--color-text);font-family:var(--font-pixel);font-size:9px;padding:8px 10px;outline:none}.form-input:focus{border-color:var(--color-accent2)}.form-error{font-size:8px;color:var(--color-danger);margin-top:4px}.stat-bar-wrap{margin-bottom:6px}.stat-bar-label{font-size:7px;color:var(--color-text-dim);display:flex;justify-content:space-between;margin-bottom:2px}.stat-bar-track{height:6px;background:var(--color-bg);border:1px solid var(--color-border)}.stat-bar-fill{height:100%;background:var(--color-accent);transition:width .3s}.hp-bar-track{height:10px;background:var(--color-bg);border:2px solid var(--color-border)}.hp-bar-fill{height:100%;background:var(--color-success);transition:width .4s}.hp-bar-fill.low{background:var(--color-accent)}.hp-bar-fill.critical{background:var(--color-danger)}.character-card{background:var(--color-bg2);border:2px solid var(--color-border);padding:12px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:border-color .15s}.character-card:hover{border-color:var(--color-accent2)}.character-name{font-size:10px;color:var(--color-accent2)}.character-level{font-size:7px;color:var(--color-text-dim)}.character-record{font-size:7px}.record-wins{color:var(--color-success)}.record-losses{color:var(--color-danger)}.fight-arena{background:var(--color-bg2);border:2px solid var(--color-border);display:flex;flex-direction:column;align-items:center;overflow:hidden}.fight-log{max-height:240px;overflow-y:auto;padding:8px;background:var(--color-bg);border-top:2px solid var(--color-border);width:100%}.fight-log-entry{font-size:7px;padding:3px 0;border-bottom:1px solid var(--color-bg2)}.fight-log-entry.damage{color:var(--color-accent)}.fight-log-entry.dodge{color:var(--color-accent2)}.fight-log-entry.heal{color:var(--color-success)}.fight-log-entry.poison{color:#9b59b6}.fight-log-entry.skill{color:#3498db}.fight-log-entry.end{color:var(--color-accent2);font-weight:700}.ladder-row{display:grid;grid-template-columns:40px 1fr 80px 80px 60px;align-items:center;padding:8px;border-bottom:1px solid var(--color-border);font-size:8px;gap:8px}.ladder-row:hover{background:var(--color-bg2)}.rank-1{color:gold}.rank-2{color:silver}.rank-3{color:#cd7f32}.skill-badge{display:inline-block;border:1px solid var(--color-border);padding:3px 6px;font-size:7px;margin:2px;background:var(--color-bg)}.skill-badge.PASSIVE{border-color:#3498db;color:#3498db}.skill-badge.TRIGGERED{border-color:#9b59b6;color:#9b59b6}.skill-badge.ACTIVE{border-color:var(--color-accent);color:var(--color-accent)}.weapon-badge{display:inline-block;border:1px solid var(--color-accent2);padding:3px 6px;font-size:7px;margin:2px;color:var(--color-accent2)}.color-swatch{display:inline-block;width:24px;height:24px;border:2px solid var(--color-border);cursor:pointer;image-rendering:pixelated}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media (max-width: 640px){.grid-2,.grid-3{grid-template-columns:1fr}.ladder-row{grid-template-columns:30px 1fr 60px 60px}}.page-title{font-size:14px;color:var(--color-accent);margin-bottom:24px;text-shadow:2px 2px 0 #000}.text-center{text-align:center}.text-dim{color:var(--color-text-dim);font-size:8px}.mb-4{margin-bottom:16px}.mb-2{margin-bottom:8px}.gap-2{gap:8px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.spinner{animation:spin 1s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}