@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&display=swap";:root{--bg: #111111;--surface: #1a1a1a;--surface2: #222222;--surface3: #2c2c2c;--border: rgba(255, 255, 255, .08);--border2: rgba(255, 255, 255, .14);--accent: #a01818;--accent-dim: rgba(209, 76, 34, .16);--accent-glow: rgba(209, 76, 34, .3);--accent-gold: #FFC107;--gold: #FFC107;--brand-blue: #2c5a71;--brand-blue-glow: rgba(44, 90, 113, .4);--brand-mist: #b0c4de;--brand-mist-glow: rgba(176, 196, 222, .4);--silver: #8a8a8a;--bronze: #a06030;--text-primary: #eeecea;--text-secondary: #8a8a88;--text-dim: #565654;--ready: #e0e0de;--iron: #252525;--font-heading: "Bebas Neue", sans-serif;--font-mono: "Space Mono", monospace;color-scheme:dark;font-family:var(--font-mono);background:#0c0c0c;color:var(--text-primary)}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;min-height:100vh;background-color:var(--bg);font-family:var(--font-mono);position:relative;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.09'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:1;mix-blend-mode:overlay}#root{display:flex;flex-direction:column;min-height:100vh;position:relative}a{color:var(--accent);text-decoration:none;transition:all .2s;font-family:var(--font-mono)}a:hover{filter:brightness(1.2)}h1,h2,h3,h4{font-family:var(--font-heading);letter-spacing:.1em;text-transform:uppercase;color:var(--text-primary);line-height:1.1}button{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.05em;border-radius:4px;cursor:pointer;transition:all .2s;border:1px solid var(--border2);background:var(--surface2);color:var(--text-primary);padding:10px 20px}button:hover{background:var(--surface3);border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 15px var(--accent-dim)}button.primary:hover{filter:brightness(1.1);transform:translateY(-1px)}input,textarea{background:var(--surface);border:1px solid var(--border2);color:var(--text-primary);padding:12px;border-radius:4px;font-family:var(--font-mono);font-size:14px}input:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--surface2)}.container{max-width:800px;margin:0 auto;padding:20px;width:100%}.page-content{flex:1;padding-top:80px;padding-bottom:40px}@media(max-width:768px){.page-content{padding-top:20px;padding-bottom:100px}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.fade-in{animation:slideUp .4s cubic-bezier(.2,.8,.2,1) forwards}.roster-card{background:var(--surface);border:1px solid var(--border2);border-radius:4px;padding:14px;transition:all .15s}.roster-card:hover{background:var(--surface2);border-color:var(--accent)}.sash{position:absolute;top:0;left:8px;height:66%;width:28px;background:#3e92cc;z-index:10;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.4));clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);display:flex;flex-direction:column;align-items:center;padding-top:12px;gap:8px}.card-patch{width:14px;height:14px;border-radius:50%;background-color:#454545;border:1px solid rgba(255,255,255,.8)}@keyframes patch-sparkle{0%,to{border-color:var(--brand-mist);box-shadow:0 0 10px var(--brand-mist-glow)}50%{border-color:#fff;box-shadow:0 0 20px var(--brand-mist-glow),0 0 40px var(--brand-blue-glow)}}@keyframes sash-victory-glow{0%,to{filter:drop-shadow(0 0 5px var(--brand-blue-glow))}50%{filter:drop-shadow(0 0 15px var(--brand-mist-glow)) drop-shadow(0 0 30px var(--brand-blue-glow))}}.sparkle-award{animation:patch-sparkle 2s ease-in-out infinite;transition:transform .3s ease}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}.drawer-overlay{position:fixed;inset:0;z-index:2000;background:#000000e6;display:flex;align-items:flex-end;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .15s ease-out}.drawer-sheet{width:100%;max-width:800px;background:var(--surface);border-radius:4px 4px 0 0;border-top:2px solid var(--accent);box-shadow:0 -10px 40px #000c;height:69%;display:flex;flex-direction:column;animation:drawerSlideUp .3s cubic-bezier(.32,.72,0,1);position:relative;padding-bottom:env(safe-area-inset-bottom,20px)}.drawer-handle{width:36px;height:4px;background:var(--iron);border-radius:2px;margin:12px auto;flex-shrink:0}.drawer-content{flex:1;overflow-y:auto;padding:0 20px 40px}@keyframes drawerSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.drawer-sheet{max-width:100%;border-radius:8px 8px 0 0}}.gauntlet-dash-card{background:var(--surface);border:1px solid var(--border2);border-radius:4px;margin:16px auto 48px;max-width:600px;overflow:hidden;text-align:left}.gauntlet-dash-header{background:var(--iron);padding:8px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}.gauntlet-dash-body{padding:16px;display:flex;flex-direction:column;gap:4px}.gauntlet-top-row{display:flex;gap:12px;align-items:center}.gauntlet-art-placeholder{width:120px;height:120px;flex-shrink:0}.gauntlet-passive-block{flex:1}.gauntlet-active-block{padding:0}.ability-item{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase}.status-indicator{display:flex;align-items:center;gap:8px;font-size:9px;font-weight:700;letter-spacing:1px}.dot{width:6px;height:6px;border-radius:50%}.dot.ready{background:#4caf50;box-shadow:0 0 5px #4caf50}.dot.cooldown{background:var(--text-dim)}.badge{font-size:9px;padding:3px 8px;border-radius:2px;text-transform:uppercase;font-weight:700;margin-top:2px;flex-shrink:0}.badge.passive{background:var(--surface3);color:var(--text-primary);border:1px solid var(--border)}.badge.active{background:var(--accent);color:#fff;border:1px solid var(--accent-glow);box-shadow:0 0 10px var(--accent-dim)}.ability-item p{font-size:11px;line-height:1.6;color:var(--text-primary)}.activation-button{width:100%;padding:12px;border:none;border-top:1px solid var(--border2);font-family:var(--font-heading);font-size:20px;letter-spacing:2px;text-align:center;cursor:pointer;transition:all .2s}.activation-button.ready{background:var(--accent);color:#fff}.activation-button.inactive{background:var(--iron);color:var(--text-dim);cursor:not-allowed}.active-banner{margin:24px 0;background:var(--surface);border:1px solid var(--border2);border-radius:4px;text-align:left;overflow:hidden}.active-banner.live{border-color:var(--brand-blue);box-shadow:0 0 20px var(--brand-blue-glow)}.banner-header{background:var(--iron);padding:8px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}.banner-body{padding:20px}.banner-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-bottom:20px}.info-field{display:flex;flex-direction:column;gap:4px;overflow:hidden}.info-label{font-size:9px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.info-value{font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.banner-description-box{background:var(--surface2);padding:16px;border:1px solid var(--border);border-radius:4px;margin:16px 0}.double-points-alert{display:inline-block;color:var(--accent-gold);font-weight:700;font-family:var(--font-heading);letter-spacing:1px;margin-top:12px;border:1px dashed var(--accent-gold);padding:4px 12px}.tactical-select{width:100%;background:var(--surface3);color:var(--text-primary);border:1px solid var(--border);padding:10px;border-radius:2px;font-family:var(--font-mono);font-size:12px;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.tactical-select:focus{border-color:var(--accent)}.host-control-panel{margin-top:24px;padding-top:24px;border-top:1px solid var(--border2);margin-left:12px;margin-right:12px}.control-header{font-family:var(--font-heading);font-size:1.2rem;color:var(--accent-gold);margin-bottom:20px;text-transform:uppercase;letter-spacing:2px}.modal-section-header{background:var(--iron);padding:8px 16px;display:flex;align-items:center;gap:12px;margin-bottom:24px;border-radius:2px;border-left:3px solid var(--accent-gold)}.modal-section-header h3{margin:0;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--text-primary);text-transform:uppercase}.modal-section-header .line{flex:1;height:1px;background:var(--border);opacity:.3}.tactical-close-btn{background:var(--iron);color:var(--text-dim);border:1px solid var(--border);border-radius:2px;padding:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.tactical-close-btn:hover{background:var(--surface3);color:var(--text-primary);border-color:var(--accent)}
