/* 놀자 공용 스타일 — 패널·버튼·오버레이·캐릭터 선택 화면 */
:root{
  --panel: rgba(9, 18, 38, 0.93);
  --line: rgba(255,255,255,0.12);
  --fg: #f1f5f9;
  --muted: #9fb0c8;
  --p1: #3b82f6;
  --p2: #f43f5e;
  --accent: #facc15;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#06122a;color:var(--fg);overflow:hidden;
  font-family:"Pretendard","Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  -webkit-user-select:none;user-select:none}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(ellipse at center, rgba(4,10,24,.30), rgba(4,10,24,.72))}
.hidden{display:none!important}
.panel{width:min(980px,100%);max-height:100%;overflow:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:22px;padding:22px 28px;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
h1{margin:0;font-size:40px;letter-spacing:-.03em}
.sub{color:var(--muted);margin:6px 0 14px;font-size:16px;line-height:1.6}
.sub b{color:var(--fg)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:780px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:rgba(255,255,255,.03)}
.card h3{margin:0 0 10px;font-size:14px;color:var(--muted);font-weight:700;letter-spacing:.04em}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
button{font:inherit;color:var(--fg);background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;
  padding:9px 14px;font-size:15px;cursor:pointer}
button:hover{background:rgba(255,255,255,.14)}
button.on{background:#1d4ed8;border-color:#60a5fa}
button.primary{background:var(--accent);color:#1a1a1a;border:none;font-weight:800;font-size:20px;padding:13px 24px;border-radius:14px}
button.primary:hover{filter:brightness(1.06)}
.seg button{padding:6px 11px;font-size:14px;border-radius:10px}
.slot{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px dashed var(--line)}
.slot:first-child{border-top:none}
.badge{font-weight:800;border-radius:8px;padding:2px 9px;font-size:14px;margin-top:2px}
.b1{background:var(--p1)} .b2{background:var(--p2)}
.meter{flex:1;height:10px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden;min-width:80px}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#facc15,#ef4444);transition:width .05s linear}
.small{font-size:13px;color:var(--muted)}
label.set{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:15px}
input[type=range]{flex:1;accent-color:var(--accent)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
kbd{background:rgba(255,255,255,.1);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;font-size:13px;color:var(--fg)}
.warn{color:#fbbf24;font-size:14px;margin-top:8px;line-height:1.5}
.center{text-align:center}
.big{font-size:52px;font-weight:900;margin:4px 0 6px}
.hint{display:inline-block;background:rgba(6,14,32,.78);border-radius:10px;padding:3px 12px;font-size:13px;color:var(--muted)}

/* 캐릭터 선택 */
.overlay.sel{flex-direction:column;justify-content:space-between;align-items:stretch;padding:2.4vh 3vw;
  background:linear-gradient(rgba(4,10,24,.84), rgba(4,10,24,0) 30%, rgba(4,10,24,0) 64%, rgba(4,10,24,.9))}
.seltitle{text-align:center;font-size:30px;font-weight:900;letter-spacing:-.02em;margin-bottom:10px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.roster{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tile{position:relative;width:96px;border-radius:16px;background:rgba(9,18,38,.82);border:3px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;align-items:center;padding:6px 4px;cursor:pointer}
.tile:hover{background:rgba(30,41,70,.9)}
.tile canvas{width:76px;height:76px;display:block}
.tile .tn{font-size:15px;font-weight:800;margin-top:2px}
.tile.p1{border-color:var(--p1)} .tile.p2{border-color:var(--p2)} .tile.p1.p2{border-color:#c084fc}
.tg{position:absolute;top:-11px;font-size:12px;font-weight:900;border-radius:8px;padding:1px 6px;display:none}
.tg.t1{left:-6px;background:var(--p1)} .tg.t2{right:-6px;background:var(--p2)}
.tile.p1 .t1,.tile.p2 .t2{display:block}
.selbottom{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end}
.selcard{background:var(--panel);border:2px solid var(--line);border-radius:18px;padding:12px 16px}
.selcard.rd{border-color:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.selcard .nm{font-size:30px;font-weight:900;margin:0 6px}
.selcard .st{font-size:15px;color:var(--muted)} .selcard.rd .st{color:#4ade80;font-weight:800}
.selcard .row{margin-top:6px}
.selmid{display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:6px}
.selmsg{font-size:21px;font-weight:800;text-align:center;min-height:28px;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.overlay.bottom{align-items:flex-end;padding-bottom:5vh;background:linear-gradient(rgba(4,10,24,0) 52%, rgba(4,10,24,.84))}