/* GO기릿 서바이벌 — 보는 사람이 직접 명단을 넣고 돌리는 화면(2026-10-01, /seah/survival/ 관전 화면에서 옮김).
   경기장은 화면 크기 캔버스 하나. 폰 우선.
   CSP: script-src 'self', 외부 리소스 불가 → 폰트는 사이트 공용 Pretendard 서브셋만. */
@font-face{font-family:Pretendard;font-weight:400;font-display:swap;src:url(../assets/fonts/Pretendard-Regular.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:600;font-display:swap;src:url(../assets/fonts/Pretendard-SemiBold.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:800;font-display:swap;src:url(../assets/fonts/Pretendard-ExtraBold.woff2) format('woff2')}
:root{
  color-scheme:dark;
  --bg:#060A14; --bg2:#0B1020; --card:rgba(180,214,255,.05); --line:rgba(180,214,255,.13);
  --tx:#EAF4FF; --tx2:#9FB4CE; --tx3:#6B7F98;
  --cyan:#5BE1FF; --violet:#A277FF; --amber:#FFD166; --pink:#FF6B9D; --green:#7CFFB2; --danger:#FF6B6B;
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:
  radial-gradient(60% 40% at 15% 0%,rgba(91,225,255,.10),transparent 70%),
  radial-gradient(50% 40% at 90% 5%,rgba(162,119,255,.12),transparent 70%),var(--bg);
  color:var(--tx);font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
input{font:inherit;color:inherit;background:rgba(180,214,255,.06);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-width:0;font-size:14px}
input:focus{outline:2px solid var(--cyan);outline-offset:1px}
[hidden]{display:none!important}
.muted{color:var(--tx2)} .small{font-size:12px}
.kicker{margin:0;font-size:10px;letter-spacing:.3em;color:var(--cyan);font-weight:700}
h1{margin:0;font-size:18px;font-weight:800;line-height:1.2}
h2{margin:0 0 8px;font-size:16px;font-weight:800}
h2 b{color:var(--cyan)}
h2 small{font-weight:500;font-size:12px}

.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 8px;max-width:1160px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:36px;height:36px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(91,225,255,.4)}
.badge{font-size:11px;font-weight:800;letter-spacing:.1em;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--tx2);white-space:nowrap}
.badge.lobby{border-color:rgba(91,225,255,.5);color:var(--cyan)}
.badge.running{border-color:rgba(124,255,178,.5);color:var(--green);animation:pulse 1.2s infinite}
.badge.done{border-color:rgba(255,209,102,.5);color:var(--amber)}
@keyframes pulse{50%{opacity:.5}}

/* ── 고정 바 ── */
.bar{position:sticky;top:0;z-index:40;background:rgba(6,10,20,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar-in{max-width:1160px;margin:0 auto;padding:8px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rt{flex-basis:100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--tx2)}
.rt:empty{display:none}
.rt b{color:var(--tx);font-size:15px;font-weight:800}
.rt .prize{color:var(--amber);font-weight:700}
.rt .total{margin-left:auto;font-variant-numeric:tabular-nums}
.rt .total b{color:var(--green);font-size:14px}
.sum{font-weight:800;font-size:14px;flex:1;min-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum b{color:var(--amber)} .sum i{font-style:normal;color:var(--cyan)}
.bar-ctl{display:flex;align-items:center;gap:6px}
.bar-ctl input{width:120px;padding:7px 10px}
.pill{padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--tx2);font-weight:700;font-size:13px;white-space:nowrap}
.pill.on{border-color:rgba(91,225,255,.5);color:var(--cyan);background:rgba(91,225,255,.1)}
.pill.gold{border-color:rgba(255,209,102,.5);color:var(--amber)}
.pill.danger{border-color:rgba(255,107,107,.45);color:var(--danger)}
.pill:disabled{opacity:.4}

/* 알림 스택 — 「OOO님 목숨 2개 추가」 */
.notes{position:fixed;right:12px;top:150px;z-index:70;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:min(360px,92vw)}
.note{background:rgba(11,16,32,.96);border:1px solid rgba(124,255,178,.45);border-left:4px solid var(--green);border-radius:10px;padding:8px 12px;font-size:14px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:notein .25s ease}
.note b{color:var(--green)} .note small{color:var(--tx3);font-weight:500;margin-left:6px}
.note.out{opacity:0;transform:translateX(20px);transition:all .4s}
@keyframes notein{from{opacity:0;transform:translateY(-8px)}}

/* ── 레이아웃 ── */
.wrap{max-width:1160px;margin:0 auto;padding:10px 12px 60px}
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.stage{min-width:0;position:relative}
#stage{display:block;width:100%;height:min(78vh,720px);aspect-ratio:auto;background:#0B1230;border-radius:14px;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.45)}
/* 경기 중 사건 피드 — 캔버스 위 왼쪽 아래 */
.evfeed{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column-reverse;gap:4px;pointer-events:none;max-width:70%}
.evfeed div{background:rgba(6,10,20,.7);border-radius:8px;padding:4px 10px;font-size:13px;font-weight:700;animation:notein .25s ease}
.evfeed div b{color:var(--pink)} .evfeed div.out b{color:var(--danger)}
.evfeed div:nth-child(n+5){display:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card.center{text-align:center;padding:36px 16px}
.big{font-size:44px;margin:0 0 6px}
.rule{margin:0 0 6px}
.rule b{color:var(--amber)}

/* 순위·목록 */
.rank{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:14px;max-height:60vh;overflow:auto}
.rank li{display:grid;grid-template-columns:28px 12px 1fr auto;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:rgba(0,0,0,.2)}
.rank li .no{font-weight:800;color:var(--tx3);font-variant-numeric:tabular-nums}
.rank li.fin .no{color:var(--amber)}
.rank li i{width:12px;height:12px;border-radius:50%;display:inline-block}
.rank li .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank li .nm small{font-weight:500;color:var(--tx3);margin-left:5px}
.rank li .v{font-size:12px;color:var(--tx2);font-variant-numeric:tabular-nums}
.rank li.me{outline:1px solid var(--cyan)}
.rank li.win{background:rgba(255,209,102,.14)}
.rank li.out{opacity:.5}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.plist li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:999px;background:rgba(0,0,0,.25);font-size:13px}
.plist li i{width:10px;height:10px;border-radius:50%}
.plist li small{color:var(--tx3)}
.plist li.me{outline:1px solid var(--cyan)}
.plist li button{margin-left:4px;font-size:11px;color:var(--tx3);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.plist li button:hover{color:var(--danger);border-color:var(--danger)}

.side{display:flex;flex-direction:column;gap:12px}
.side-close{align-self:flex-end;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--tx2);font-weight:700}
.only-m{display:none}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#EAF4FF;color:#0B1020;padding:10px 16px;border-radius:999px;font-weight:700;z-index:99;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:90vw;text-align:center}

@media (min-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr) 320px;align-items:start}
  .side{position:sticky;top:110px;max-height:calc(100vh - 120px);overflow:auto}
}
@media (max-width:999px){
  .only-m{display:inline-flex}
  #stage{height:min(72vh,640px)}
  .side{position:fixed;inset:0;z-index:60;background:rgba(6,10,20,.96);padding:14px 12px calc(20px + env(safe-area-inset-bottom));overflow:auto;transform:translateY(100%);transition:transform .22s ease;visibility:hidden}
  body.side-open .side{transform:none;visibility:visible}
  body.side-open{overflow:hidden}
  .rank{max-height:none}
  .bar-ctl input{width:104px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── 준비(명단 입력) ── body.mode-setup 일 때만 보이고, 경기가 시작되면 순위 칸(.side)과 자리를 바꾼다 */
body:not(.mode-setup) .setup{display:none}
body.mode-setup .side{display:none!important}
.setup{display:flex;flex-direction:column;gap:12px}

/* 공용 −/+ 스테퍼 — 가운데 숫자칸은 직접 입력도 된다 */
.step{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:rgba(180,214,255,.06)}
.step button{width:30px;flex:none;color:var(--tx2);font-size:16px;font-weight:700}
.step button:hover{background:rgba(180,214,255,.08);color:var(--tx)}
.step button:active{background:rgba(91,225,255,.18)}
.step input{border:0;border-radius:0;background:none;width:44px;padding:6px 0;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step input:focus{outline:none;background:rgba(91,225,255,.08)}

/* 맨 위 입력줄: 닉 · 생명 · 추가 */
.qadd{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
.qadd #qNick{width:100%;padding:10px 12px;font-size:15px}
.qbtn{padding:0 14px;border-radius:10px;font-weight:800;color:#0B1020;background:var(--cyan)}
.qbtn:active{filter:brightness(1.1)}

.lhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lhead h2{margin:0}
.links{display:flex;gap:12px;flex:none}
.lk{font-size:12.5px;font-weight:700;color:var(--tx2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(159,180,206,.35)}
.lk:hover{color:var(--tx)}
.lk.danger{color:var(--danger);text-decoration-color:rgba(255,107,107,.35)}

.elist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto}
.elist li{display:grid;grid-template-columns:10px minmax(0,1fr) auto 28px;align-items:center;gap:6px}
.elist li i{width:10px;height:10px;border-radius:50%}
.elist li input.nick{width:100%;padding:7px 10px}
.elist li .step input{width:40px}
.elist li .step button{width:26px}
.elist li .del{width:28px;height:28px;border-radius:8px;color:var(--tx3);font-size:12px}
.elist li .del:hover{color:var(--danger);background:rgba(255,107,107,.1)}
.elist li.dup input.nick{border-color:var(--amber)}   /* 칸을 떠나면 앞 줄에 합쳐진다 */
.elist .empty{display:block;color:var(--tx3);font-size:13px;padding:10px 4px;text-align:center;border:1px dashed var(--line);border-radius:10px}

.paste{display:flex;flex-direction:column;gap:8px}
.prow{display:flex;gap:6px}
textarea{font:inherit;color:inherit;background:rgba(180,214,255,.06);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;resize:vertical;width:100%}
textarea:focus{outline:2px solid var(--cyan);outline-offset:1px}

.winrow{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding-top:10px;border-top:1px solid var(--line)}
.rule{margin:0;text-align:center}
.err{margin:0;color:var(--danger);font-weight:700;font-size:13px}
.start{padding:14px 18px;border-radius:12px;font-size:17px;font-weight:800;color:#0B1020;
  background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 10px 30px rgba(91,225,255,.25)}
.start:disabled{opacity:.45}
.done-btns{margin-top:10px}
.erow-add{display:flex;gap:6px;flex-wrap:wrap}
@media (min-width:1000px){
  body.mode-setup .layout{grid-template-columns:minmax(0,1fr) 360px}
  .setup{position:sticky;top:70px;max-height:calc(100vh - 80px);overflow:auto}
}
@media (max-width:999px){
  body.mode-setup #stage{height:min(38vh,340px)}
  .elist{max-height:none}
  .qadd #qNick{font-size:16px}   /* iOS 는 16px 미만 입력칸에 포커스하면 화면을 확대한다 */
}