/* 콩콩배구 — DOM UI. 웹폰트를 쓰지 않는다(한글 웹폰트만 3~5MB, CDN 은 사용자 IP 를 제3자에 보낸다). */
:root{
  --ink:#0d1b2a; --ink-2:#2f4858; --paper:#fdf8ee; --sand:#f2d9a8;
  --sea:#4bb3c4; --coral:#ff7f6e; --coral-ink:#c93c26; --gold:#ffd166; --mint:#8fd9c0;
  --shadow:0 6px 0 rgba(13,27,42,.18);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--ink); color:var(--ink); overflow:hidden; touch-action:manipulation;
}
#app{position:fixed; inset:0; display:grid; place-items:center}
#court{position:absolute; inset:0; width:100%; height:100%; display:block}

/* ── HUD ───────────────────────────────────────── */
.hud{position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between}
.hud-top{display:flex; align-items:flex-start; justify-content:center; gap:clamp(10px,3vw,40px); padding:clamp(8px,1.6vh,18px) 12px 0}
.hud-side{min-width:clamp(64px,14vw,150px); text-align:center;
  /* 배경(하늘·모래)이 밝아서 흰 글자만으로는 대비가 안 난다 — 고정 어두운 판을 깐다.
     동적 배경 위의 UI 는 그림자가 아니라 «자기 배경»을 가져야 한다. */
  background:rgba(13,27,42,.55); border-radius:12px; padding:4px clamp(6px,1.2vw,12px)}
.hud-name{font-size:clamp(13px,2.1vh,20px); font-weight:800; color:#fff; line-height:1.35}
.hud-sets{font-size:clamp(12px,1.8vh,18px); color:var(--gold); letter-spacing:2px; line-height:1.35}
.hud-score{
  display:flex; align-items:center; gap:6px; font-size:clamp(26px,5.4vh,54px); font-weight:900; color:#fff;
  background:rgba(13,27,42,.42); border-radius:14px; padding:2px clamp(10px,2vw,18px);
  text-shadow:0 3px 0 rgba(13,27,42,.5); font-variant-numeric:tabular-nums;
}
.hud-score i{opacity:.6; font-style:normal}
.hud-rally{position:absolute; left:50%; top:clamp(58px,11vh,110px); transform:translateX(-50%);
  color:var(--gold); font-weight:900; background:rgba(13,27,42,.55); border-radius:10px; padding:2px 10px;
  line-height:1.4}
.hud-rally:empty{display:none}
.hud-banner{position:absolute; left:50%; top:38%; transform:translate(-50%,-50%) scale(.9);
  font-size:clamp(24px,6vh,58px); font-weight:900; color:#fff; opacity:0; transition:opacity .18s, transform .18s;
  background:rgba(13,27,42,.62); border-radius:16px; text-align:center; padding:6px 22px; line-height:1.3}
.hud-banner.is-on{opacity:1; transform:translate(-50%,-50%) scale(1)}
.hud-bottom{display:flex; justify-content:space-between; padding:0 clamp(8px,2vw,22px) clamp(8px,2vh,18px); gap:12px}
.gauge{position:relative; flex:0 1 clamp(110px,26vw,260px); height:clamp(12px,2.2vh,20px);
  background:rgba(13,27,42,.45); border-radius:999px; overflow:hidden; border:2px solid rgba(255,255,255,.5)}
.gauge b{position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,var(--mint),var(--gold)); transition:width .12s}
.gauge--right b{inset:0 0 0 auto}
.gauge span{position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(9px,1.4vh,12px);
  font-weight:800; color:#fff; text-shadow:0 1px 0 rgba(13,27,42,.7); opacity:0}
.gauge.is-full{border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,209,102,.45)}
.gauge.is-full span{opacity:1}

/* ── 터치 ──────────────────────────────────────── */
.touch{position:absolute; inset:auto 0 0 0; display:flex; justify-content:space-between;
  padding:0 12px 14px; pointer-events:none}
.touch-left,.touch-right{display:flex; gap:10px; pointer-events:auto}
.tbtn{width:clamp(56px,15vw,72px); height:clamp(56px,15vw,72px); border-radius:50%; border:2px solid rgba(13,27,42,.7);
  background:rgba(253,248,238,.9); color:var(--ink); font-size:22px; font-weight:800; cursor:pointer}
.tbtn.is-active{background:var(--gold); color:var(--ink)}
.tbtn--hit{background:var(--coral); color:var(--ink)}
.tbtn--jump{background:var(--sea); color:var(--ink)}

/* ── 화면 ──────────────────────────────────────── */
.screen{
  position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(10px,2vh,18px); padding:clamp(16px,4vh,40px) 18px; text-align:center;
  background:linear-gradient(180deg,rgba(253,248,238,.96),rgba(242,217,168,.96)); overflow-y:auto;
}
.screen.is-on{display:flex}
.logo{font-size:clamp(38px,10vh,84px); font-weight:900; letter-spacing:-2px; color:var(--ink)}
.logo span{color:var(--coral-ink)}
.tagline{font-size:clamp(16px,2.1vh,18px); color:var(--ink-2); max-width:46ch; line-height:1.5}
.foot{font-size:clamp(16px,1.6vh,16px); color:var(--ink-2); opacity:.75}
h2{font-size:clamp(20px,4vh,34px); font-weight:900}
h3{font-size:clamp(16px,2.2vh,18px); color:var(--ink-2)}
.menu{display:flex; flex-direction:column; gap:10px; width:min(340px,86vw)}
.menu--row{flex-direction:row; flex-wrap:wrap; justify-content:center; width:auto}
.btn{
  min-height:56px; min-width:56px; padding:14px 22px; border:0; border-radius:14px; cursor:pointer;
  font-size:clamp(16px,2.2vh,18px); font-weight:800; color:var(--ink);
  background:#fff; box-shadow:var(--shadow); transition:transform .08s;
}
.btn:active{transform:translateY(3px); box-shadow:0 3px 0 rgba(13,27,42,.18)}
.btn--primary{background:var(--coral); color:var(--ink)}
.btn--ghost{background:rgba(255,255,255,.55)}
.picker{display:flex; gap:clamp(10px,3vw,32px); flex-wrap:wrap; justify-content:center}
.picker-col{display:flex; flex-direction:column; gap:8px; align-items:center}
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.card{
  width:clamp(84px,17vw,116px); min-height:56px; padding:8px 6px; font-size:16px; border:3px solid transparent; border-radius:14px;
  background:#fff; box-shadow:var(--shadow); cursor:pointer; font-family:inherit;
}
.card.is-on{border-color:var(--coral)}
.card img{width:100%; aspect-ratio:1; object-fit:contain; display:block}
.card b{display:block; font-size:clamp(16px,1.9vh,17px); margin-top:2px; line-height:1.3}
.card .stat{display:flex; gap:3px; justify-content:center; margin-top:4px}
.card .stat i{width:14px; height:6px; border-radius:3px; background:#e6e0d4}
.card .stat i.on{background:var(--sea)}
.row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center}
.row-label{font-size:clamp(16px,1.9vh,16px); font-weight:800; color:var(--ink-2)}
.chip{min-height:56px; min-width:56px; padding:10px 18px; border:2px solid rgba(13,27,42,.15); border-radius:999px;
  background:#fff; font-size:clamp(16px,2vh,16px); font-weight:800; cursor:pointer; font-family:inherit; color:var(--ink)}
.chip.is-on{background:var(--sea); color:var(--ink); border-color:var(--sea)}
.keys{border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.keys th,.keys td{padding:11px 14px; font-size:clamp(16px,1.9vh,16px); border-bottom:1px solid #eee}
.keys th{background:var(--sea); color:var(--ink)}
.tip{max-width:52ch; font-size:clamp(16px,1.9vh,16px); color:var(--ink-2); line-height:1.6}
.field{display:flex; align-items:center; gap:12px; width:min(340px,86vw); font-size:clamp(16px,2vh,16px); font-weight:700; min-height:56px}
.field span{min-width:60px; text-align:left}
.field input[type=range]{flex:1; min-height:56px}
.field--check{cursor:pointer}
.field--check input{width:28px; height:28px; min-height:56px}
.loading{position:absolute; inset:0; display:grid; place-items:center; gap:12px; background:var(--ink); color:#fff}
.loading .bar{width:min(280px,70vw); height:10px; border-radius:999px; background:rgba(255,255,255,.2); overflow:hidden}
.loading .bar b{display:block; height:100%; width:0; background:var(--gold); transition:width .15s}
.loading p{margin-top:10px; font-size:16px; opacity:.85}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }
@media (min-width:900px){ .touch{display:none} }
/* 좁은 화면: 캐릭터 선택을 세로로 쌓고 카드 4개를 한 줄에 — 글자를 줄이지 않고 레이아웃을 바꾼다 */
@media (max-width:520px){
  .picker{flex-direction:column; gap:10px}
  .cards{grid-template-columns:repeat(4,1fr)}
  .card{width:auto}
  .screen{justify-content:flex-start; padding-top:16px}
}