:root{--bg: #1a1a2e;--surface: #252544;--text: #e8e8f0;--text-muted: #a0a0c0;--accent: #5a8fd8;--accent-hover: #7aaae8;--border: #3a3a5c;--success: #5cb85c;--warning: #f0ad4e;--error: #d9534f;--font-body: "Segoe UI", system-ui, sans-serif;--font-heading: "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100vh}body{background-color:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{min-height:100vh;display:flex;flex-direction:column}.app-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:1rem}.app-header h1{font-family:var(--font-heading);font-size:1.5rem;color:var(--text)}.app-main{flex:1;padding:2rem 1.5rem;max-width:800px;width:100%;margin:0 auto}.app-description{color:var(--text-muted);margin-bottom:2rem;font-size:1.1rem}.button-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.nav-button{display:block;width:100%;padding:1rem 1.5rem;background-color:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;font-size:1rem;font-family:var(--font-body);cursor:pointer;transition:background-color .15s,border-color .15s;min-height:44px}.nav-button:hover,.nav-button:focus-visible{background-color:var(--accent);color:var(--bg);border-color:var(--accent);outline:none}.nav-button:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px}select{padding:.5rem;background-color:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:4px;font-size:.9rem;min-height:44px}@media (min-width: 640px){.app-header h1{font-size:1.75rem}}.btn{display:inline-block;padding:.75rem 1.25rem;border-radius:8px;font-size:.95rem;font-family:var(--font-body);cursor:pointer;border:1px solid transparent;transition:background-color .15s,border-color .15s,opacity .15s;min-height:44px;text-align:center}.btn-primary{background-color:var(--accent);color:var(--bg);border-color:var(--accent)}.btn-primary:hover,.btn-primary:focus-visible{background-color:var(--accent-hover);border-color:var(--accent-hover)}.btn-secondary{background-color:var(--surface);color:var(--text);border-color:var(--border)}.btn-secondary:hover,.btn-secondary:focus-visible{background-color:var(--border)}.btn-danger{background-color:var(--error);color:#fff;border-color:var(--error)}.btn-danger:hover,.btn-danger:focus-visible{opacity:.85}.btn:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px}.sprite-animated{image-rendering:pixelated;image-rendering:crisp-edges}.sprite-paused{animation-play-state:paused}.sprite-frame-container{image-rendering:pixelated;image-rendering:crisp-edges}.battle-background{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}@media (prefers-reduced-motion: reduce){.sprite-animated,.sprite-frame-container{animation:none!important}.sprite-frame-container{display:none}.sprite-animated[data-reduced-fallback]{content:attr(data-reduced-fallback)}}.field{margin-bottom:1rem}.field-label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem;color:var(--text-muted)}.text-input,.number-input,.dropdown{width:100%;padding:.6rem .75rem;background-color:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:.95rem;font-family:var(--font-body);min-height:44px;box-sizing:border-box}.text-input:focus,.number-input:focus,.dropdown:focus{outline:none;border-color:var(--accent)}.checkbox-field{display:flex;align-items:center;gap:.5rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.95rem}.actions-bar{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-dialog{background:var(--surface);border-radius:12px;max-width:500px;width:100%;max-height:80vh;overflow-y:auto;border:1px solid var(--border)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--border)}.modal-header h2{font-size:1.2rem}.modal-close{background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;padding:0 .5rem;min-height:44px;min-width:44px}.modal-close:hover{color:var(--text)}.modal-body{padding:1.5rem}.modal-body p{margin-bottom:.5rem}.toast-container{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);z-index:2000;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}.toast{padding:.75rem 1.25rem;border-radius:8px;color:#fff;font-size:.9rem;opacity:0;transition:opacity .3s;max-width:400px;text-align:center}.toast-visible{opacity:1}.toast-info{background:var(--accent)}.toast-success{background:var(--success)}.toast-warning{background:var(--warning)}.toast-error{background:var(--error)}.autocomplete{position:relative}.autocomplete-input{width:100%;padding:.6rem .75rem;background-color:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:.95rem;min-height:44px;box-sizing:border-box}.autocomplete-input:focus{outline:none;border-color:var(--accent)}.autocomplete-list{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:6px;max-height:200px;overflow-y:auto;z-index:100;list-style:none;display:none}.autocomplete-item{padding:.6rem .75rem;cursor:pointer;font-size:.9rem}.autocomplete-item:hover,.autocomplete-item-highlighted{background-color:var(--accent);color:var(--bg)}.teambuilder-main{max-width:900px}.team-section{margin-bottom:1.5rem}.team-bar{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}.team-bar .dropdown{flex:1;min-width:200px}.members-list{display:grid;grid-template-columns:1fr;gap:1.5rem}.pokemon-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.25rem}.pokemon-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.pokemon-species-info{display:flex;flex-direction:column;gap:.35rem}.pokemon-slot-label{font-weight:600;font-size:1rem}.type-badges{display:flex;gap:.35rem;flex-wrap:wrap}.type-badge{font-size:.75rem;padding:.15rem .5rem;border-radius:4px;background:var(--border);color:var(--text);text-transform:uppercase;font-weight:600}.moves-section,.stat-section{margin:1rem 0}.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem}.stat-total{display:block;margin-top:.5rem;font-size:.85rem;color:var(--text-muted)}.stat-preview{margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--border)}.stat-cell{font-size:.85rem;background:var(--bg);padding:.35rem .5rem;border-radius:4px;text-align:center}.add-pokemon-btn{width:100%}.trainer-main{max-width:700px}.upload-section{margin:1.5rem 0}.upload-hint{font-size:.85rem;color:var(--text-muted);margin-bottom:1rem}.upload-field{margin-bottom:1rem}.sprite-upload-preview{max-width:96px;max-height:96px;margin-top:.5rem;border:1px solid var(--border);border-radius:4px}.preview-section{margin:1.5rem 0}.sprite-preview-grid{display:flex;gap:1.5rem;flex-wrap:wrap}.sprite-preview-cell{display:flex;flex-direction:column;align-items:center;gap:.5rem}.sprite-preview-label{font-size:.85rem;color:var(--text-muted)}.sprite-preview-img{max-width:96px;max-height:128px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}@media (min-width: 768px){.members-list{grid-template-columns:1fr 1fr}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}.sprite-preview-unavailable{font-size:.75rem;color:var(--text-muted);font-style:italic}.card-top-row{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.5rem}.card-sprite-preview{width:48px;height:48px;flex-shrink:0;border:1px solid var(--border);border-radius:4px;background:var(--bg);object-fit:contain}.card-top-info{flex:1;display:flex;flex-direction:column;gap:.25rem}.card-slot-label{font-weight:600;font-size:.9rem}.card-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem}.card-row-3col{display:grid;grid-template-columns:1fr 80px 80px;gap:.5rem;margin-bottom:.5rem;align-items:end}.card-row-3col .field{margin-bottom:0}.pokemon-card .checkbox-label{margin-bottom:.5rem;font-size:.85rem}.moves-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.5rem 0}.moves-grid .autocomplete{margin-bottom:0}.moves-grid .field-label{display:none}.pokemon-card .stat-section{margin:.25rem 0}.stat-section-label{font-size:.8rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:.25rem}.stat-slider-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem}.stat-slider-label{width:30px;font-size:.75rem;font-weight:600;flex-shrink:0}.stat-slider-input{flex:1;min-height:auto;height:20px}.stat-slider-value{width:28px;font-size:.75rem;text-align:right;flex-shrink:0}.stat-total{font-size:.75rem;color:var(--text-muted);margin-top:.15rem}.computed-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem}.computed-stat-cell{font-size:.75rem;background:var(--bg);padding:.2rem .4rem;border-radius:3px;text-align:center}.pokemon-card{padding:.85rem}.pokemon-card .field{margin-bottom:0}.pokemon-card .autocomplete-input,.pokemon-card .number-input,.pokemon-card .dropdown{min-height:36px;font-size:.85rem;padding:.4rem .6rem}.remove-pokemon-btn{min-height:32px;min-width:32px;padding:0 .5rem;font-size:.8rem}.lobby-main{max-width:600px}.manual-sdp-text{width:100%;min-height:80px;font-family:monospace;font-size:.8rem;padding:.5rem;margin:.5rem 0;border:1px solid var(--border);border-radius:.25rem;background:var(--surface);color:var(--text);resize:vertical}.lobby-section{margin-bottom:1.5rem}.lobby-section h2{font-size:1.1rem;margin-bottom:.75rem}.room-code-display{font-size:2rem;font-weight:700;letter-spacing:.5rem;text-align:center;padding:1rem;background:var(--surface);border:2px dashed var(--accent);border-radius:12px;margin-bottom:.75rem;font-family:monospace}.room-code-input{text-align:center;font-size:1.5rem;letter-spacing:.5rem;font-family:monospace}.lobby-status{margin:1.5rem 0;padding:1rem;background:var(--surface);border-radius:8px;border:1px solid var(--border)}.lobby-status-text{font-weight:600;margin-bottom:.5rem}.lobby-status-connected{color:var(--success)}.lobby-status-connecting{color:var(--warning)}.lobby-status-disconnected{color:var(--text-muted)}.lobby-status-error{color:var(--error)}.lobby-info{font-size:.9rem;color:var(--text-muted);margin-bottom:.25rem}.lobby-hint{font-size:.85rem;color:var(--text-muted);margin-top:.5rem}.lobby-handshake-panel{margin:1rem 0;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:8px}.lobby-handshake-status{font-size:.9rem;color:var(--text-muted);margin-bottom:.5rem}.diagnostics-details{font-size:.85rem;color:var(--text-muted)}.diagnostics-details summary{cursor:pointer;color:var(--accent)}.diagnostics-details ul{list-style:none;margin-top:.5rem}.diagnostics-details li{margin-bottom:.25rem;word-break:break-all}.diagnostics-log{font-size:.75rem;white-space:pre-wrap;max-height:300px;overflow-y:auto;background:var(--bg);padding:.5rem;border-radius:4px;margin-top:.35rem;line-height:1.4;color:var(--text-muted)}.start-battle-btn{font-size:1.2rem;padding:1rem 2rem;margin-top:1rem}.battle-root{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;flex-direction:column}.battle-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;background-color:var(--bg);z-index:0}.battle-bg.battle-background{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.battle-top-bar{position:relative;z-index:2;display:flex;justify-content:flex-end;padding:.5rem}.battle-area{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem}.battle-foe-area{flex:1;justify-content:flex-start}.battle-my-area{flex:1;justify-content:flex-end}.battle-trainer-info{background:#0009;padding:.3rem .75rem;border-radius:6px;font-size:.85rem}.battle-sprite{width:96px;height:96px;object-fit:contain}.battle-foe-sprite{transform:scaleX(-1)}.hp-bar-container{background:#0009;padding:.3rem .5rem;border-radius:6px;min-width:150px}.hp-bar-label{font-size:.75rem;display:block;margin-bottom:2px}.hp-bar-bg{height:6px;background:#fff3;border-radius:3px;overflow:hidden}.hp-bar-fill{height:100%;transition:width .3s;border-radius:3px}.hp-green{background:var(--success)}.hp-yellow{background:var(--warning)}.hp-red{background:var(--error)}.battle-turn-info{position:relative;z-index:2;display:flex;gap:1rem;padding:.3rem .5rem;font-size:.85rem;background:#0009;border-radius:6px;margin:0 auto}.battle-timer{color:var(--warning);font-weight:700}.battle-result.win{color:var(--success);font-weight:700;font-size:1.5rem}.battle-result.lose{color:var(--error);font-weight:700;font-size:1.5rem}.battle-action-panel{position:relative;z-index:2;background:#000000b3;padding:.75rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.battle-move-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;flex:1}.battle-move-grid .btn{min-height:36px;font-size:.8rem;padding:.4rem}.battle-chat-panel{position:relative;z-index:2;background:#000000b3;padding:.5rem;display:flex;gap:.5rem;align-items:center;max-height:120px}.chat-toggle,.chat-drawer,.chat-drawer-backdrop{display:none}@media (max-width: 640px){.chat-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .75rem}.battle-chat-panel{display:none}.chat-drawer-backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:150;opacity:0;pointer-events:none;transition:opacity .25s ease}.chat-backdrop-visible{opacity:1;pointer-events:auto}.chat-drawer{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;max-height:80vh;height:60vh;background:var(--surface);border-top:1px solid var(--border);border-radius:12px 12px 0 0;z-index:160;padding:.75rem;gap:.5rem;transform:translateY(100%);transition:transform .25s ease}.chat-drawer-open{transform:translateY(0)}.chat-drawer-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:.5rem}.chat-drawer-title{font-weight:600}.chat-drawer-close{background:none;border:none;color:var(--text);font-size:1.5rem;line-height:1;min-width:44px;min-height:44px;cursor:pointer}.chat-drawer .battle-chat-log{flex:1;max-height:none;overflow-y:auto;font-size:.85rem}.chat-drawer .battle-chat-input{flex:0 0 auto;width:100%;min-height:44px}}@media (prefers-reduced-motion: reduce){.chat-drawer,.chat-drawer-backdrop{transition:none}}.battle-chat-log{flex:1;overflow-y:auto;max-height:80px;font-size:.75rem}.chat-message{margin-bottom:2px}.battle-chat-input{flex:0 0 150px;min-height:36px;font-size:.8rem;padding:.3rem .5rem;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:4px}@media (max-width: 640px){.battle-sprite{width:64px;height:64px}.battle-move-grid{grid-template-columns:1fr}.battle-chat-panel{display:none}}.battle-log{position:relative;z-index:2;max-height:120px;overflow-y:auto;background:#000000b3;border-top:1px solid var(--border);padding:.5rem .75rem;font-size:.85rem;line-height:1.5}.battle-log-line{margin-bottom:.25rem;color:var(--text)}.battle-log-line:first-child{color:var(--accent-hover)}.switch-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.85rem}.switch-menu-sprite{width:32px;height:32px;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges}.switch-fainted{opacity:.5;text-decoration:line-through}.switch-active{border-color:var(--accent);background:#5a8fd833}.battle-end-area{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;padding:1rem;background:#000000bf;border-top:1px solid var(--border)}.trainer-card-export{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1rem}.trainer-card-export label{font-size:.9rem;color:var(--text-muted)}.trainer-card-export select{min-height:36px;font-size:.85rem}.replay-main{max-width:900px}.replay-list-section{margin:1.5rem 0}.replay-list{display:flex;flex-direction:column;gap:.5rem}.replay-empty{color:var(--text-muted);font-style:italic}.replay-item{display:flex;align-items:center;gap:.5rem;padding:.6rem;background:var(--surface);border-radius:8px;border:1px solid var(--border)}.replay-item-info{flex:1;display:flex;flex-direction:column;gap:.15rem}.replay-item-title{font-weight:600;font-size:.9rem}.replay-item-date{font-size:.75rem;color:var(--text-muted)}.replay-viewer-area{margin-top:1.5rem}.replay-matchup{font-size:1.1rem;font-weight:600;margin-bottom:.75rem}.replay-turn-controls{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.replay-battle-state{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;background:var(--surface);padding:1rem;border-radius:8px;border:1px solid var(--border)}.replay-side{flex:1;min-width:150px;display:flex;flex-direction:column;gap:.5rem}.replay-side-name{font-weight:600;font-size:.9rem;margin-bottom:.25rem}.replay-vs{font-weight:700;color:var(--text-muted);align-self:center}.replay-mon{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.4rem;border-radius:4px}.replay-mon.active{background:#5a8fd826}.replay-mon.fainted{opacity:.4}.replay-mon-name{font-size:.8rem;font-weight:600}.replay-mon-sprite{width:48px;height:48px}.replay-mon-hp{font-size:.7rem;color:var(--text-muted)}.replay-winner{width:100%;text-align:center;font-weight:700;color:var(--success);margin-top:.5rem}.replay-player{margin-top:1rem}.replay-stage{position:relative;width:100%;max-width:640px;aspect-ratio:16 / 10;margin:0 auto 1rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;overflow:hidden}.replay-stage canvas{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}.replay-log{max-height:200px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.75rem;font-size:.85rem;line-height:1.5;margin-bottom:1rem}.replay-log-entry{margin-bottom:.25rem}.replay-log-entry.turn{color:var(--accent-hover);font-weight:600}.replay-log-entry.damage{color:var(--error)}.replay-log-entry.faint{color:var(--warning)}.replay-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;justify-content:center;margin-bottom:1rem}.replay-speed-select{min-height:36px;font-size:.85rem}.replay-paused-hint{text-align:center;font-size:.85rem;color:var(--text-muted);margin-bottom:.5rem}