@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
:root{--bg:#05080d;--panel:#10161b;--line:#37434c;--text:#edf3f5;--muted:#91a0a8;--accent:#f1b63b}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'Noto Sans KR',sans-serif}body{background:var(--bg);color:var(--text)}button,input,select{font:inherit}
.top{padding:22px 28px 14px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-family:Orbitron,sans-serif;font-weight:800;letter-spacing:2px}.brand small{display:block;color:var(--accent);font-size:11px;letter-spacing:3px;margin-bottom:5px}.brand>div{font-size:24px}.badge{border:1px solid #46545d;background:#11181d;padding:8px 12px;border-radius:5px;color:#cbd5da;font-size:12px}.logout-btn{background:none;border:0;color:#aeb9be;cursor:pointer;margin-right:8px;font-size:12px}.logout-btn:hover{color:var(--accent)}
.wrap{max-width:1180px;margin:auto;padding:0 24px 34px}.btn{border:1px solid #55636b;background:#182127;color:#fff;padding:10px 15px;border-radius:5px;cursor:pointer}.btn:hover{background:#222e36}.btn.small{padding:8px 11px;font-size:12px}.btn.danger{border-color:#74443c}.admin-teambar{display:flex;gap:12px;align-items:stretch;margin-bottom:12px}.team-select-wrap,.broadcast-link-wrap,.team-name-panel,.asset-note{background:#0d1317;border:1px solid #364149;padding:12px 14px}.team-select-wrap{width:250px}.team-select-wrap label,.broadcast-label{display:block;color:#839098;font-size:11px;margin-bottom:6px}.team-select-wrap select{width:100%;background:#0b1014;color:#fff;border:1px solid #3c4951;padding:9px;border-radius:4px}.broadcast-link-wrap{flex:1;display:flex;align-items:center;gap:10px}.broadcast-link-wrap .broadcast-label{margin:0}.broadcast-link-wrap code{flex:1;color:var(--accent);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-name-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}.team-name-panel strong{display:block;font-size:13px}.team-name-panel span{display:block;color:#839098;font-size:11px;margin-top:4px}.team-name-editor{display:flex;gap:8px;min-width:360px}.team-name-editor input{flex:1;background:#0b1014;color:#fff;border:1px solid #3c4951;padding:10px;border-radius:4px}
.asset-note{margin-bottom:12px}.asset-note strong{display:block;font-size:13px}.asset-note span{display:block;color:#839098;font-size:11px;margin-top:4px}.asset-note code{display:block;color:#aab7bd;font-size:10px;margin-top:7px;word-break:break-all}
.admin-controls{display:flex;gap:10px;margin-bottom:10px}.hint{color:#839098;font-size:12px;margin:8px 0 12px}.linebar{display:flex;align-items:center;justify-content:space-between;background:#0d1317;border:1px solid #364149;padding:12px 16px;margin-bottom:12px}.linecount{font-family:Orbitron,sans-serif;font-size:22px;color:var(--accent)}.linecount span{font-size:12px;color:#aeb9be;letter-spacing:2px}
.board-shell{position:relative;isolation:isolate}.admin-board-shell{width:min(100%,680px);margin:0 auto}.image-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:6px}.image-cell{position:relative;min-width:0;min-height:0;overflow:hidden;padding:0;border:0;background:none}.admin .image-cell{aspect-ratio:1;border:2px solid #27343b;border-radius:2px;cursor:pointer}.admin .image-cell:hover{outline:2px solid var(--accent);outline-offset:-2px}.image-cell .bingo-tile{display:block;width:100%;height:100%;object-fit:cover}.success-stamp{position:absolute;z-index:20;inset:10%;width:80%;height:80%;object-fit:contain;pointer-events:none}.line-layer{position:absolute;inset:0;z-index:30;pointer-events:none;overflow:hidden}.bingo-line{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}
/* login */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:30px;background:radial-gradient(circle at 50% -10%,#27343c 0,#0a0e12 45%,#050708 100%)}.login-card{width:min(430px,100%);background:linear-gradient(145deg,#121a20,#0b1014);border:1px solid #3a4851;padding:34px;border-radius:8px;box-shadow:0 20px 60px #0008}.login-brand{font-family:Orbitron,sans-serif;font-weight:800;letter-spacing:2px;margin-bottom:30px}.login-brand small{display:block;color:var(--accent);font-size:11px;letter-spacing:3px;margin-bottom:6px}.login-brand div{font-size:23px}.login-card h1{font-size:21px;margin:0 0 8px}.login-card p{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 20px}.login-card form{display:flex;flex-direction:column;gap:10px}.login-card input{width:100%;background:#080d11;color:#fff;border:1px solid #3c4951;padding:13px;border-radius:5px;outline:none}.login-card input:focus{border-color:var(--accent)}.login-status{min-height:20px;margin-top:12px;color:#9eabb1;font-size:12px}.login-status.bad{color:#ff8c73}.hidden{display:none!important}
/* broadcast */
.broadcast{overflow:hidden;width:100%;height:100vh;background:#05080d}.broadcast-screen{position:relative;width:100%;height:100vh;padding:2.5vh 3vw;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:center;justify-items:center;gap:1.2vh;background:#05080d url('/assets/background.png') center/cover no-repeat;overflow:hidden}.broadcast-team-image{grid-row:1;width:min(42vw,720px);height:clamp(52px,9vh,105px);display:flex;align-items:center;justify-content:center;z-index:40}.broadcast-team-image img{max-width:100%;max-height:100%;object-fit:contain}.broadcast-board-shell{grid-row:2;align-self:center;justify-self:center;width:min(72vw,82vh,900px);aspect-ratio:1;z-index:10}.broadcast-bingo{width:100%;height:100%;gap:6px}.broadcast-cell{aspect-ratio:1}.broadcast-cell .success-stamp{inset:9%;width:82%;height:82%}.broadcast-lines{grid-row:3;color:#f0e8d5;font-family:Orbitron,sans-serif;font-size:clamp(18px,2.1vw,32px);font-weight:800;line-height:1;letter-spacing:1px;text-shadow:0 3px 14px #000b;background:rgba(0,0,0,.68);padding:8px 18px 10px;border-radius:6px;white-space:nowrap;z-index:40}.chroma .broadcast-screen{background:#00ff00!important}.chroma .broadcast-lines{background:rgba(0,0,0,.7)}
/* overview */
.overview{overflow:hidden;background:#05080d;color:#f5f7f8}
.overview-screen{position:relative;width:100vw;height:100vh;padding:2.5vh 2.6vw;background:#05080d url('/assets/background.png') center/cover no-repeat;overflow:hidden}
.overview-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,7,12,.18),rgba(3,7,12,.48));pointer-events:none}
.team-overview-grid{position:relative;z-index:2;width:100%;height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2vh 2vw;min-height:0}
.ov-team-card{--accent:#f1b63b;position:relative;display:grid;grid-template-columns:300px minmax(0,1fr);align-items:center;gap:.45vw;min-width:0;min-height:0;padding:1.15vh 1.05vw;background:linear-gradient(135deg,rgba(9,14,19,.94),rgba(13,21,27,.82));border:2px solid color-mix(in srgb,var(--accent) 72%,#fff 8%);clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 12px 35px rgba(0,0,0,.38),0 0 24px color-mix(in srgb,var(--accent) 15%,transparent)}
.ov-team-card:nth-child(2){--accent:#20a9ff}.ov-team-card:nth-child(3){--accent:#ff4052}.ov-team-card:nth-child(4){--accent:#35e58a}
.ov-team-card:after{content:"";position:absolute;left:0;top:0;width:28%;height:2px;background:var(--accent);box-shadow:0 0 15px var(--accent)}
.ov-accent{position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);pointer-events:none}
.ov-team-info{position:relative;z-index:2;height:100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35vh;padding:.5vh 0;transform:translateX(70px)}
.ov-team-image{display:block;width:200px;height:100px;max-width:200px;max-height:100px;aspect-ratio:2/1;object-fit:fill;filter:drop-shadow(0 5px 10px #000b)}
.ov-team-fallback{display:none;color:#fff;font-family:Orbitron,sans-serif;font-size:clamp(18px,2vw,30px);font-weight:900;text-align:center}
.ov-lines-label{width:min(100%,230px);padding:.8vh .6vw .9vh;border-top:1px solid color-mix(in srgb,var(--accent) 65%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:rgba(0,0,0,.28);text-align:center;font-family:Orbitron,sans-serif;text-shadow:0 2px 10px #000}
.ov-lines-label span{display:block;font-size:clamp(10px,.72vw,14px);font-weight:700;letter-spacing:.25em;color:#f1f3f5}
.ov-lines-label strong{display:block;margin-top:.2vh;font-size:clamp(32px,3.3vw,58px);line-height:.95;color:var(--accent);font-weight:900}
.ov-board-shell{position:relative;width:min(100%,34vh,430px);aspect-ratio:1;justify-self:start;min-width:0;transform:translateX(60px)}
.ov-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:4px}
.ov-cell{position:relative;min-width:0;min-height:0;overflow:hidden;background:#121b21;border:1px solid rgba(135,159,174,.5);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ov-cell.success{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent) inset,0 0 12px color-mix(in srgb,var(--accent) 20%,transparent)}
.ov-tile{display:block;width:100%;height:100%;object-fit:cover}
.ov-stamp{position:absolute;z-index:10;inset:8%;width:84%;height:84%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 5px #000)}
.ov-line-layer{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.ov-line{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block}
.chroma .overview-screen{background:#00ff00!important}.chroma .overview-screen:before{display:none}.chroma .ov-team-card{box-shadow:none}.chroma .ov-lines-label{background:rgba(0,0,0,.72)}

@media(max-width:900px){.admin-teambar,.team-name-panel{flex-direction:column}.team-select-wrap{width:100%}.team-name-editor{min-width:0;width:100%}.broadcast-link-wrap{flex-wrap:wrap}.broadcast-link-wrap code{flex-basis:100%}.ov-team-card{grid-template-columns:250px minmax(0,1fr)}.ov-team-info{height:auto}.ov-team-image{width:200px;height:100px}.ov-board-shell{width:min(58vw,34vh,280px);margin:0 auto;transform:none}}
@media(max-height:760px){.broadcast-screen{gap:.6vh;padding-top:1.5vh;padding-bottom:1.5vh}.broadcast-team-image{height:clamp(42px,7vh,75px)}.broadcast-board-shell{width:min(70vw,78vh,760px)}.broadcast-lines{font-size:clamp(15px,1.9vw,26px)}}
@media(max-width:700px){.wrap{padding-left:12px;padding-right:12px}.admin-board-shell{width:min(100%,600px)}.overview-screen{padding:10px}.team-overview-grid{gap:10px}.ov-team-card{padding:8px}.ov-team-image{width:200px;height:100px}.ov-lines-label{padding:4px}.ov-lines-label strong{font-size:28px}.ov-board-shell{width:min(43vw,30vh,210px);transform:none}}

/* ===== v2.3 individual team broadcast ===== */
.broadcast-screen{position:relative;display:grid;grid-template-columns:minmax(290px,31vw) minmax(0,1fr);width:100vw;height:100vh;padding:3vh 3vw;gap:2.4vw;overflow:hidden;background:#05080d;color:#f7f7f5}
.broadcast-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,5,8,.78) 0%,rgba(2,5,8,.54) 31%,rgba(2,5,8,.20) 65%,rgba(2,5,8,.44) 100%),linear-gradient(180deg,rgba(2,5,8,.16),rgba(2,5,8,.60));pointer-events:none;z-index:0}
.broadcast-glow{position:absolute;left:7vw;top:13vh;width:34vw;height:60vh;background:radial-gradient(ellipse,rgba(255,185,50,.16),transparent 66%);filter:blur(18px);pointer-events:none;z-index:0}
.broadcast-side-panel{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;height:100%;padding:1vh 1vw}
.broadcast-brand{align-self:flex-start;margin-left:3.5vw;margin-bottom:2vh;font-family:Orbitron,sans-serif;line-height:.85;text-shadow:0 3px 18px #000}
.broadcast-brand .brand-mark{font-size:clamp(28px,3.4vw,62px);font-weight:950;letter-spacing:-.06em;color:#f3f3f1}
.broadcast-brand .brand-name{font-size:clamp(26px,3vw,54px);font-weight:950;letter-spacing:-.06em;color:#f3f3f1}
.broadcast-brand .brand-sub{margin-top:1vh;font-size:clamp(9px,.72vw,14px);letter-spacing:.48em;color:#f4d07a}
.broadcast-team-image-wrap{position:relative;width:min(100%,600px);aspect-ratio:4/1;transform:translateX(50px);min-height:0;display:flex;align-items:center;justify-content:center;margin:1vh 0 2vh;filter:drop-shadow(0 12px 22px rgba(0,0,0,.58))}
.broadcast-team-image{display:block;width:600px;height:150px;max-width:none;max-height:none;object-fit:fill}
.team-image-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-family:Orbitron,sans-serif;font-size:clamp(32px,4vw,70px);font-weight:950;color:#fff;text-shadow:0 4px 15px #000}
.broadcast-lines-card{position:relative;width:min(100%,330px);transform:translateX(50px);padding:2.5vh 2vw 2.5vh;border:1px solid rgba(255,199,80,.68);background:linear-gradient(145deg,rgba(8,11,15,.90),rgba(11,17,22,.68));clip-path:polygon(0 16px,16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px));box-shadow:0 0 0 1px rgba(255,255,255,.035) inset,0 15px 42px rgba(0,0,0,.45),0 0 30px rgba(245,174,44,.10);text-align:center}
.broadcast-lines-card:before{content:"";position:absolute;inset:9px;border:1px solid rgba(255,199,80,.18);pointer-events:none}
.broadcast-lines-label{font-family:Orbitron,sans-serif;font-size:clamp(13px,1.1vw,21px);font-weight:800;letter-spacing:.32em;color:#f3efe5}
.broadcast-lines-number{margin-top:1vh;font-family:Orbitron,sans-serif;font-size:clamp(82px,10vw,180px);font-weight:950;line-height:.82;color:#ffca4f;text-shadow:0 5px 20px rgba(255,181,48,.18)}
.broadcast-lines-rule{height:1px;margin:1.6vh auto 0;width:72%;background:linear-gradient(90deg,transparent,#f5c65c,transparent)}

.broadcast-board-area{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-width:0;height:100%}
.broadcast-board-frame{position:relative;width:min(100%,88vh);aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:6.6%;background:transparent;overflow:hidden}
.mission-board-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;z-index:1;pointer-events:none}
.broadcast-board-frame:before{display:none}
.board-corner,.board-title{display:none}
.broadcast-board-shell{position:relative;width:100%;height:100%;aspect-ratio:1;z-index:4}.broadcast-bingo{width:100%;height:100%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:6px}.broadcast-cell{position:relative;overflow:hidden;min-width:0;min-height:0;background:#101820;border:1px solid rgba(153,173,188,.62);box-shadow:0 3px 10px rgba(0,0,0,.42)}.broadcast-cell.success{border-color:#ffbd3e;box-shadow:0 0 0 1px rgba(255,190,55,.55) inset,0 0 20px rgba(255,181,40,.12)}
.broadcast-cell .bingo-tile{display:block;width:100%;height:100%;object-fit:cover}.broadcast-cell .success-stamp{position:absolute;z-index:8;inset:8%;width:84%;height:84%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 6px #000b)}
.broadcast-board-shell .line-layer{position:absolute;inset:0;z-index:15;pointer-events:none;overflow:hidden}.broadcast-board-shell .bingo-line{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}
.chroma .broadcast-screen{background:#00ff00!important}.chroma .broadcast-screen:before,.chroma .broadcast-glow{display:none}.chroma .broadcast-side-panel,.chroma .broadcast-board-area{filter:none}.chroma .broadcast-lines-card,.chroma .broadcast-board-frame{box-shadow:none}.chroma .broadcast-board-frame{background:transparent}
@media(max-width:1050px){.broadcast-screen{grid-template-columns:minmax(230px,30vw) minmax(0,1fr);gap:1.4vw;padding:2vh 1.6vw}.broadcast-board-frame{width:min(100%,88vh);padding:6.6%}.broadcast-lines-card{padding:2vh 1.2vw}}
@media(max-width:760px){.broadcast-screen{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:10px}.broadcast-side-panel{height:auto;display:grid;grid-template-columns:1fr 1.2fr;grid-template-rows:auto auto;gap:8px;padding:0}.broadcast-brand{grid-column:1/-1;margin:0}.broadcast-team-image-wrap{min-height:70px;margin:0;transform:none}.broadcast-lines-card{width:auto;padding:10px;transform:none}.broadcast-lines-number{font-size:54px}.broadcast-board-area{min-height:0}.broadcast-board-frame{width:min(100%,86vh);max-height:82vh;padding:6.6%}.board-title{top:4px}.broadcast-bingo{gap:3px}}


/* admin broadcast launcher */
.broadcast-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.broadcast-nav .btn{white-space:nowrap}.broadcast-nav .chroma-btn{border-color:#62e66c;color:#baffc0;background:#112015}.nav-divider{width:1px;height:24px;background:#38434d;margin:0 3px}

/* Independent broadcast backgrounds: replace these files to customize each screen.
   team1.png ~ team4.png are used by the corresponding team screen.
   overview.png is used by the 4-team overview. */
.broadcast-screen{background-image:var(--broadcast-bg,none);background-position:center;background-size:cover;background-repeat:no-repeat}
.overview-screen{background-image:var(--overview-bg,none);background-position:center;background-size:cover;background-repeat:no-repeat}
.chroma .broadcast-screen{background-image:none!important;background-color:#00ff00!important}
.chroma .overview-screen{background-image:none!important;background-color:#00ff00!important}