body{color:#f0f0f0;background-color:#1a1a1a;justify-content:center;align-items:center;min-height:100vh;margin:0;font-family:Helvetica Neue,Hiragino Sans GB,WenQuanYi Micro Hei,Microsoft Yahei,sans-serif;display:flex}.legacy-page{justify-content:center;align-items:center;width:100%;min-height:100vh;padding:20px;display:flex}.observer-join-controls{align-items:center;gap:10px;display:flex}.observer-join-controls input{flex-grow:1;padding:10px;transition:box-shadow .2s ease-in-out,border-color .2s ease-in-out;box-shadow:0 0 5px -2px #ffc107;border:2px solid #ffc107!important}.observer-join-controls input:focus{outline:none;box-shadow:0 0 8px #ffc107}.floating-error,.error-banner,.notice-banner{z-index:20;color:#f8d7da;background:#3a1f1f;border:1px solid #7a3535;border-radius:4px;max-width:min(720px,100vw - 32px);padding:10px 14px;position:fixed;top:16px;left:50%;transform:translate(-50%)}.notice-banner{color:#d9f2c3;background:#1f3320;border-color:#82b948;align-items:center;gap:12px;display:flex}.notice-banner button{color:#111;cursor:pointer;background:#82b948;border:0;border-radius:3px;padding:4px 8px}#initial-screen-container{text-align:center;background-color:#242424;border:1px solid #333;border-radius:12px;padding:40px 60px;transition:all .3s;box-shadow:0 10px 30px #00000080}#initial-screen-container:hover{transform:translateY(-5px);box-shadow:0 15px 40px #0009}#main-title{color:#82b948;letter-spacing:2px;text-shadow:0 0 10px #82b94880;margin-bottom:20px;font-size:3em;font-weight:700}#mode-selection h2{color:#ccc;margin-bottom:30px;font-size:1.5em;font-weight:300}#mode-selection button{color:#f0f0f0;cursor:pointer;background:linear-gradient(145deg,#3a3a3a,#1f1f1f);border:1px solid #444;border-radius:8px;margin:10px;padding:15px 30px;font-size:1.2em;transition:all .2s ease-in-out;box-shadow:0 4px 15px #0003}#mode-selection button:hover{color:#fff;background:linear-gradient(145deg,#82b948,#6f9e3c);border-color:#82b948;transform:scale(1.05);box-shadow:0 6px 20px #82b94866}.observer-join-section{border-top:1px solid #444!important;margin-top:40px!important;padding-top:30px!important}.observer-join-section h3{color:#ccc;margin-bottom:20px;font-weight:300}.observer-join-section input{color:#f0f0f0!important;background-color:#1a1a1a!important}.observer-join-section button{color:#f0f0f0;cursor:pointer;background:#555;border:1px solid #666;border-radius:8px;padding:12px 20px;transition:all .2s ease-in-out}.observer-join-section button:hover{color:#111;background:#82b948;border-color:#82b948}#mode-selection{text-align:center}#mode-selection button{cursor:pointer;margin:10px;padding:15px 30px;font-size:1.2em}#bp-interface{color:#f0f0f0;background-color:#242424;border:1px solid #333;border-radius:8px;width:95%;max-width:1400px;padding:20px;box-shadow:0 4px 15px #0000004d}.hidden{display:none}.top-bar{border-bottom:1px solid #333;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:15px;display:flex}#action-indicator{color:#f0f0f0;font-weight:700}#current-action{text-align:center;border-radius:4px;min-width:80px;padding:3px 8px;line-height:1.5;display:inline-block}#timer{font-size:1.1em}#pending-area{align-items:center;gap:5px;display:flex}#pending-champion{text-align:center;min-width:80px;font-weight:700}#pending-champion img{vertical-align:middle;border:1px solid #ccc;width:30px;height:30px;margin-left:5px}#confirm-button{cursor:pointer;padding:8px 15px}#confirm-button:disabled{cursor:not-allowed;opacity:.6}#empty-ban-button{cursor:pointer;color:#fff;background-color:#ff9800;border:none;border-radius:4px;margin:0 10px;padding:8px 15px}#empty-ban-button:hover{background-color:#e68a00}#empty-ban-button.hidden{display:none}#reset-button{cursor:pointer;color:#f0f0f0;background-color:#555;border:1px solid #666;border-radius:4px;padding:8px 15px}#reset-button:hover{background-color:#666}.main-content{justify-content:space-between;display:flex}.team-panel{border-radius:5px;flex-direction:column;width:20%;padding:10px;display:flex}.blue-team{background-color:#1e88e51a;border:1px solid #1e88e54d}.red-team{background-color:#e539351a;border:1px solid #e539354d}.team-panel h3{text-align:center;border-bottom:1px solid #444;margin-top:0;margin-bottom:15px;padding-bottom:5px}.main-content.observer-layout{display:block}.observer-layout .observer-draft-display{width:100%;min-height:clamp(500px,42vw,720px);margin:0 auto}.team-panel h4{color:#ccc;text-align:center;margin-bottom:8px;font-size:.9em}.team-panel .picks{flex-grow:1;order:1;margin-bottom:20px}.team-panel .bans{order:2;margin-top:auto}.slot-container{justify-content:center;gap:5px;min-height:55px;display:flex}.picks .slot-container{flex-direction:column;align-items:center;gap:8px}.picks .bp-slot:nth-child(3){margin-bottom:20px}.bans .slot-container{flex-flow:wrap;justify-content:flex-start;width:100%;max-width:180px;margin:0 auto}.bans .bp-slot:first-child,.bans .bp-slot:nth-child(2),.bans .bp-slot:nth-child(3){flex:none;margin-bottom:5px}.bans .bp-slot:nth-child(4),.bans .bp-slot:nth-child(5){margin-left:auto;margin-right:auto}.bans .slot-container:after{content:"";flex:auto}.bp-slot{color:#888;background-color:#1f1f1f;border:1px dashed #555;justify-content:center;align-items:center;width:50px;height:50px;font-size:.7em;display:flex;overflow:hidden}.bp-slot img{max-width:100%;max-height:100%;display:block}.bp-slot.empty-ban{color:#777;background-color:#2a2a2a;border:1px dashed #555;justify-content:center;align-items:center;font-size:16px;display:flex}.champion-pool-container{flex-direction:column;align-items:center;width:55%;padding:0 10px;display:flex}.observer-draft-display{background:radial-gradient(circle,#d1a95414,#0000 55%),#1f1f1f;border:1px solid #333;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:14px;width:55%;min-height:400px;padding:14px;display:grid;overflow:hidden}.observer-draft-divider{background:linear-gradient(#0000,#d1a954a6,#0000)}.observer-team-column{flex-direction:column;min-width:0;display:flex}.observer-banner-group{flex-direction:column;flex:1;display:flex}.observer-banner-list{flex:1;grid-template-rows:repeat(5,minmax(0,1fr));justify-items:stretch;gap:7px;display:grid}.observer-banner-empty{color:#777;aspect-ratio:auto;border:1px dashed #444;place-items:center;width:100%;min-width:0;max-width:100%;height:100%;font-size:.75em;display:grid}.observer-draft-banner{aspect-ratio:auto;isolation:isolate;background:#252525;border:1px solid #555;width:100%;min-width:0;max-width:100%;height:100%;animation:.65s ease-out both observer-banner-reveal;position:relative;overflow:hidden}.observer-team-column.blue .observer-draft-banner{background:linear-gradient(90deg,#1e88e561,#1e88e514),#141d28;border-color:#1e88e58c;box-shadow:inset 0 0 34px #1e88e52e}.observer-team-column.red .observer-draft-banner{background:linear-gradient(270deg,#e5393561,#e5393514),#281818;border-color:#e539358c;box-shadow:inset 0 0 34px #e539352e}.observer-team-column.blue .observer-banner-empty{background:#1e88e514;border-color:#1e88e561}.observer-team-column.red .observer-banner-empty{background:#e5393514;border-color:#e5393561}.observer-draft-banner img{object-fit:cover;object-position:center center;width:100%;height:100%;position:absolute;inset:0}.observer-banner-placeholder{z-index:1;filter:blur(2px);transform:scale(1.12)}.observer-banner-art{z-index:2}.observer-banner-fallback{z-index:0;color:#bbb;place-items:center;font-weight:700;display:grid;position:absolute;inset:0}.observer-banner-name{z-index:3;color:#fff;text-shadow:0 1px 2px #000;background:linear-gradient(#0000,#000000e6);padding:3px 6px;font-size:.75em;font-weight:700;position:absolute;inset:auto 0 0}.observer-ban-strip{background:linear-gradient(90deg,#1e88e51f,#0000 45% 55%,#e539351f),#1f1f1f;border:1px solid #333;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:14px;width:100%;margin-top:12px;padding:10px 14px;display:grid}.observer-ban-divider{background:linear-gradient(#0000,#d1a9548c,#0000)}.observer-ban-side{grid-template-rows:repeat(2,42px);grid-template-columns:repeat(6,21px);justify-content:center;gap:7px;min-width:0;display:grid}.observer-ban-slot{color:#777;aspect-ratio:1;background:#222;border:1px dashed #555;place-self:center;place-items:center;width:42px;height:42px;font-size:.72em;font-weight:700;display:grid;position:relative;overflow:hidden}.observer-ban-slot:first-child{grid-column:1/3}.observer-ban-slot:nth-child(2){grid-column:3/5}.observer-ban-slot:nth-child(3){grid-column:5/7}.observer-ban-slot:nth-child(4){grid-column:2/4}.observer-ban-slot:nth-child(5){grid-column:4/6}.observer-ban-slot.filled{color:#ddd;border-style:solid}.observer-ban-side.blue .observer-ban-slot.filled{background:#1e88e51a;border-color:#1e88e5a6}.observer-ban-side.red .observer-ban-slot.filled{background:#e539351a;border-color:#e53935a6}.observer-ban-slot.empty-ban{color:#777;background:#2a2a2a}.observer-ban-slot img{object-fit:cover;filter:grayscale();opacity:.9;width:100%;height:100%;position:absolute;inset:0}.observer-ban-slot span{z-index:1;text-shadow:0 1px 2px #000;background:#00000094;padding:2px 5px;position:relative}.observer-ban-slot.empty-ban span{text-shadow:none;background:0 0;padding:0}@keyframes observer-banner-reveal{0%{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.observer-draft-banner{animation:none}}#search-box{color:#f0f0f0;background-color:#1a1a1a;border:1px solid #444;border-radius:4px;width:80%;margin-bottom:15px;padding:8px}.tag-filter-container{background-color:#1f1f1f;border-radius:5px;flex-wrap:wrap;justify-content:center;gap:8px;width:95%;margin-bottom:15px;padding:10px;display:flex}.tag-filter-button{color:#f0f0f0;cursor:pointer;background-color:#333;border:1px solid #555;border-radius:20px;padding:6px 12px;font-size:14px;transition:all .2s}.tag-filter-button:hover{background-color:#444;border-color:#777}.tag-filter-button.active{color:#111;background-color:#82b948;border-color:#82b948}@media (max-width:768px){.tag-filter-container{gap:5px;width:100%;padding:8px 5px}.tag-filter-button{padding:4px 8px;font-size:12px}}#champion-pool{background-color:#1f1f1f;border:1px solid #333;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));grid-auto-rows:60px;justify-content:center;gap:10px;width:100%;max-width:700px;height:400px;margin:0 auto;padding:15px;display:grid;overflow-y:auto}@media (max-width:768px){.main-content{gap:8px}.observer-draft-display{gap:7px;width:58%;padding:4px 7px}.observer-layout .observer-draft-display{width:100%;min-height:clamp(300px,65vw,500px)}.observer-banner-list{gap:5px}.observer-ban-strip{gap:7px;padding:8px 7px}.observer-ban-side{grid-template-rows:repeat(2,36px);grid-template-columns:repeat(6,18px);gap:5px}.observer-ban-slot{width:36px;height:36px}#champion-pool{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));grid-auto-rows:50px;gap:5px;max-width:100%}.champion-item{width:50px;height:50px}}@media (max-width:480px){.observer-draft-display{gap:4px;padding:4px}.observer-banner-list{gap:4px}.observer-banner-empty,.observer-banner-name{font-size:.65em}.observer-banner-name{padding:2px 4px}}.champion-item{cursor:pointer;background:0 0;border:1px solid #0000;width:60px;height:60px;padding:0;transition:transform .2s,border-color .2s;position:relative}.champion-item:hover{border-color:#aaa;transform:scale(1.1)}.champion-item.pending{border:2px solid gold;transform:scale(1.05);box-shadow:0 0 10px gold}.champion-item img{width:100%;height:100%;display:block}.observer-mode .champion-item{cursor:default}#observer-notice,#referee-notice{color:#555;background-color:#ff03;border-radius:4px;margin:0 10px;padding:5px 10px;font-weight:700}#referee-notice{background-color:#ffa50033}.referee-mode .champion-item{cursor:pointer}.champion-item.system-banned{opacity:.4;cursor:not-allowed;filter:grayscale(80%);position:relative}.champion-item.system-banned:after{content:"⚠";color:#ff8c00;background-color:#0000001a;justify-content:center;align-items:center;font-size:2em;font-weight:700;display:flex;position:absolute;inset:0}.system-banned-section{background-color:#e651001a;border-top:1px solid #e651004d;width:100%;margin-top:20px;padding:15px}.system-banned-section h4{text-align:center;color:#ffcc80;margin:0 0 10px;font-size:16px}.system-banned-champions{flex-wrap:wrap;justify-content:center;gap:8px;min-height:50px;display:flex}.system-banned-item{background:0 0;border:1px solid #ccc;border-radius:4px;width:40px;height:40px;padding:0;overflow:hidden}.system-banned-item img{width:100%;height:100%;display:block}.referee-can-unban{cursor:pointer;position:relative}.referee-can-unban:hover:before{content:"✖";color:#fff;background-color:#ff00004d;justify-content:center;align-items:center;font-size:20px;font-weight:700;display:flex;position:absolute;inset:0}.empty-message{color:#999;text-align:center;width:100%;padding:10px;font-style:italic}.share-links-container{background-color:#1f1f1f;border:1px solid #333;border-radius:5px;margin-bottom:20px;padding:15px}.share-links-container h3{color:#f0f0f0;text-align:center;margin-top:0;margin-bottom:15px}.share-link{flex-wrap:wrap;align-items:center;margin-bottom:10px;display:flex}.share-link strong{min-width:120px;margin-right:10px}.share-link input{color:#f0f0f0;background-color:#1a1a1a;border:1px solid #444;border-radius:3px;flex:1;margin-right:10px;padding:5px;font-size:.8em}.share-link button{color:#111;cursor:pointer;background-color:#82b948;border:none;border-radius:3px;padding:5px 10px}.share-link button:hover{background-color:#6f9e3c}.champion-item.banned,.champion-item.picked{opacity:.4;cursor:not-allowed;filter:grayscale(80%)}.champion-item.banned:after,.champion-item.picked:after{content:"X";color:red;background-color:#0000001a;justify-content:center;align-items:center;font-size:2em;font-weight:700;display:flex;position:absolute;inset:0}.no-results-message{text-align:center;color:#666;background-color:#f8f8f8;border-radius:5px;grid-column:1/-1;width:100%;margin-top:20px;padding:20px;font-size:16px}.blue-turn{color:#90caf9;background-color:#1e88e533}.red-turn{color:#ef9a9a;background-color:#e5393533}#game-selection{text-align:center;color:#f0f0f0;background-color:#242424;border-radius:8px;max-width:800px;margin:0 auto;padding:20px;box-shadow:0 2px 10px #0000004d}.game-buttons{flex-wrap:wrap;justify-content:center;gap:15px;margin:30px 0;display:flex}.game-buttons button{color:#111;cursor:pointer;background-color:#82b948;border:none;border-radius:5px;padding:15px 30px;font-size:18px;transition:all .2s}.game-buttons button:hover{background-color:#6f9e3c;transform:translateY(-2px)}.back-button{margin-top:20px}.back-button button{color:#f0f0f0;cursor:pointer;background-color:#444;border:1px solid #555;border-radius:5px;padding:10px 20px}.back-button button:hover{background-color:#555}#game-indicator{color:#fff;background-color:#3f51b5;border-radius:4px;margin:0 10px;padding:5px 10px;font-weight:700}.previous-games-info{background-color:#2c528233;border:1px solid #2c528266;border-radius:5px;width:100%;margin-top:20px;padding:10px}.previous-games-info h4{color:#a6c5f7;margin:5px 0}.previous-games-champions{flex-wrap:wrap;gap:5px;margin-top:5px;display:flex}.previous-games-champion{border:1px solid #ccc;border-radius:50%;width:30px;height:30px;position:relative;overflow:hidden}.previous-games-champion img{object-fit:cover;width:100%;height:100%}.game-label{color:#fff;background-color:#4a90e2;border-radius:50%;justify-content:center;align-items:center;width:12px;height:12px;font-size:8px;display:flex;position:absolute;top:-5px;right:-5px}.global-session-info{background-color:#1f1f1f;border:1px solid #333;border-radius:5px;margin-top:20px;padding:15px}.global-session-info h4{color:#f0f0f0;border-bottom:1px solid #333;margin-top:0;margin-bottom:10px;padding-bottom:8px}.global-session-info h5{color:#ccc;margin-top:20px;margin-bottom:10px}.global-session-info .session-id{background-color:#333;border-radius:3px;margin-left:5px;padding:3px 6px;font-family:monospace}.global-session-info .no-session{color:#999;font-style:italic}.game-session-item{background-color:#2a2a2a;border:1px solid #444;border-radius:3px;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0;padding:8px;display:flex}.copy-button{color:#111;cursor:pointer;background-color:#82b948;border:none;border-radius:3px;margin-left:10px;padding:4px 8px;font-size:.9em}.copy-button:hover{background-color:#6f9e3c}.open-button{color:#fff;cursor:pointer;background-color:#2196f3;border:none;border-radius:3px;padding:4px 8px;font-size:.9em;text-decoration:none;display:inline-block}.distribute-page{color:#f0f0f0;background-color:#242424;border-radius:10px;max-width:1000px;margin:20px auto;padding:20px;box-shadow:0 2px 10px #0000001a}.distribute-header{text-align:center;border-bottom:1px solid #444;margin-bottom:20px;padding-bottom:15px}.distribute-header h2{color:#f0f0f0;margin-bottom:10px}.distribute-header .session-id{background-color:#333;border-radius:4px;padding:2px 6px;font-family:monospace;font-weight:700}.distribute-links h3{color:#ccc;margin-bottom:15px}.role-links{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.role-link-box{background-color:#1f1f1f;border:2px solid #444;border-radius:8px;width:45%;margin-bottom:15px;overflow:hidden;box-shadow:0 2px 5px #0000000d}.role-header{color:#fff;text-align:center;padding:10px}.role-header h4{margin:0;font-size:16px}.role-link{border-bottom:1px solid #333;padding:10px;display:flex}.role-link input{color:#f0f0f0;background-color:#1a1a1a;border:1px solid #444;border-radius:4px;flex:1;padding:8px;font-family:monospace;font-size:12px}.role-actions{justify-content:space-between;padding:10px;display:flex}.copy-button,.qrcode-button{color:#f0f0f0;cursor:pointer;background-color:#444;border:none;border-radius:4px;margin-left:8px;padding:8px 12px;transition:background-color .2s}.copy-button:hover,.qrcode-button:hover{background-color:#555}.open-button{color:#f0f0f0;background-color:#444;border-radius:4px;padding:8px 12px;text-decoration:none;transition:background-color .2s;display:inline-block}.open-button:hover{background-color:#555}.distribute-buttons{text-align:center;margin-top:20px}.primary-button{color:#111;cursor:pointer;background-color:#82b948;border:none;border-radius:4px;margin-right:10px;padding:10px 20px;font-size:14px}.secondary-button{color:#f0f0f0;cursor:pointer;background-color:#444;border:none;border-radius:4px;padding:10px 20px;font-size:14px}.primary-button:hover{background-color:#6f9e3c}.secondary-button:hover{background-color:#555}.error-message{text-align:center;padding:20px}.error-message h3{color:#ef9a9a;margin-bottom:10px}.error-message p{margin-bottom:20px}
:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--background:#111316;--surface:#1b1f24;--text:#f4f1e8;--muted:#b4bac2;--accent:#d1a954;--line:#333a43}*{box-sizing:border-box}html,body{min-height:100%}body{background:var(--background);color:var(--text);margin:0;font-family:Arial,Microsoft YaHei,sans-serif}.shell{place-items:center;min-height:100vh;padding:32px;display:grid}.panel{border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 92%, transparent);border-radius:8px;width:min(100%,560px);padding:32px}.eyebrow{color:var(--accent);letter-spacing:0;text-transform:uppercase;margin:0 0 12px;font-size:.78rem;font-weight:700}h1{margin:0;font-size:2.75rem;line-height:1.05}@media (max-width:520px){h1{font-size:2rem}}.status{color:var(--muted);margin:18px 0 0;font-size:1rem;line-height:1.6}