/* 한뼘 땅따먹기 — 전자칠판 우선.
   본문 ≥48px · 핵심 수치 ≥96px · 터치 ≥88px · 필수 터치는 화면 세로 25~75%
   (1920×1080 기준. 전부 계산해서 나온 값이다 — 눈대중 금지) */

:root {
  --bg: #1e2836;
  --panel: #26344a;
  --line: #44586f;
  --ink: #f2f7fc;
  --ink-dim: #b9c9dc;
  --accent: #ffd451;

  /* 소리 토글 폭. HUD 양쪽 빈 열(.hud-pad)이 이 값과 같아서 겹침이 구조적으로 불가능하다.
     넘버러시에서 토글이 HUD 라벨을 가린 사고가 2회 났다 — 이번엔 레이아웃으로 막는다. */
  --edge: 1vw;                                   /* 화면 가장자리 여백. HUD 패딩과 소리도크
     오른쪽 여백이 **같은 변수**여야 한다 — 1vw vs 1.2vw로 3.84px 어긋나 겹쳤다(실측). */
  --dock-h: clamp(56px, 8.6dvh, 112px);          /* 1080 → 92.9px (터치 기준 ≥88) */
  --dock-w: calc(var(--dock-h) * 3 + var(--edge) * 2);   /* ⚠️ 높이에서 **계산**한다(단추 3개 — 전체화면·효과음·배경음).
     상수로 두면 버튼이 컨테이너를 넘쳐 왼쪽 HUD를 침범한다(넘버러시와 같은 클래스의 사고). */

  /* 플레이 화면 4행: HUD 25% / 필드 50% / 힌트 11% / 안전여백 14% */
  --stage-h: 50dvh;
  --field-h: min(var(--stage-h), calc(94vw / 1.5));

  --fs-value: clamp(30px, 9.6dvh, 150px);   /* 1080 → 103.7px  (기준 ≥96) */
  --fs-body: clamp(14px, 4.7dvh, 62px);     /* 1080 →  50.8px  (기준 ≥48) */
  --fs-btn: clamp(18px, 5.2dvh, 72px);      /* 1080 →  56.2px */
  --touch: max(88px, 9dvh);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}

/* ── 화면 전환 ── */
.screen { display: none; position: fixed; inset: 0; }
.screen.is-on { display: flex; }
#scr-start, #scr-album, #scr-handoff, #scr-count, #scr-result {
  flex-direction: column;
  align-items: center;
  justify-content: safe center;   /* 넘치면 위가 잘리지 않게 */
  gap: 2.2dvh;
  padding: calc(var(--dock-h) + 3dvh) 4vw 4dvh;
  text-align: center;
  /* 폰 세로에선 내용이 화면보다 길다 — 고정 화면이라 스크롤이 막혀 인원 단추(=시작)를 못 눌렀다(2026-10-22 제보) */
  overflow-y: auto;
  overscroll-behavior: contain;
}
#scr-play { flex-direction: column; }

/* ── 소리 토글 (전 화면 공용) ── */
.sound-dock {
  position: fixed;
  top: 1.2dvh;
  right: var(--edge);
  z-index: 40;
  display: flex;
  gap: var(--edge);
  width: var(--dock-w);
  justify-content: flex-end;
}
.sound-btn {
  width: var(--dock-h);
  height: var(--dock-h);
  min-width: 52px;
  min-height: 52px;
  border: 3px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: var(--ink);
  font-size: calc(var(--dock-h) * 0.55);   /* 1080 → 51px (본문 기준 ≥48) */
  line-height: 1;
  cursor: pointer;
}
.sound-btn.is-off { opacity: 0.4; border-style: dashed; }

/* ── 시작 화면 ── */
.title {
  font-size: clamp(30px, 9dvh, 138px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.tagline { font-size: var(--fs-body); color: var(--ink-dim); }
.tagline b { color: var(--ink); }
.pick-label { font-size: var(--fs-body); margin-top: 1dvh; }
.pick { display: flex; gap: clamp(8px, 1.4vw, 26px); flex-wrap: wrap; justify-content: center; }
.pick-btn {
  width: var(--touch);
  height: var(--touch);
  border: 4px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--fs-btn);
  font-weight: 800;
  cursor: pointer;
}
.pick-btn.is-rec { border-color: var(--accent); color: var(--accent); }
.best { font-size: var(--fs-body); color: var(--ink-dim); }
.sunhaengssam-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5em 1.4em;
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-dim);
  font-size: clamp(12px, 2.4dvh, 20px);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

/* ── 시작 화면 v2 — 위 22%: 제목 / 25~75%: 뼘이 카드 + 모드 카드 + 인원(필수 터치) ── */
#scr-start { justify-content: flex-start; gap: 1.6dvh; padding-top: calc(var(--dock-h) * 0.15 + 1dvh); }
.home-head { min-height: 21dvh; display: flex; flex-direction: column; justify-content: center; gap: 0.6dvh; }
#scr-start .title { font-size: clamp(28px, 8dvh, 120px); }
.home-main { display: flex; gap: 2vw; width: min(96vw, 1800px); height: 52dvh; align-items: stretch; }
.buddy { flex: 0 0 min(28vw, 520px); background: var(--panel); border: 3px solid var(--line); border-radius: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1dvh; padding: 1.6dvh 1.4vw; }
.buddy-img { width: auto; height: 22dvh; aspect-ratio: 1; object-fit: contain; }
.buddy-name { font-size: clamp(16px, 4.4dvh, 56px); color: #8fe39a; }
.buddy-bar { width: 90%; height: 1.6dvh; min-height: 8px; border-radius: 99px; background: #18222f; overflow: hidden; }
.buddy-bar span { display: block; height: 100%; background: linear-gradient(90deg, #8fe39a, #ffd451); border-radius: 99px; }
.buddy-goal { font-size: clamp(13px, 3dvh, 38px); color: var(--ink-dim); }
.buddy-album, .album-item { min-height: var(--touch); padding: 0 1.4vw; border-radius: 18px; border: 3px solid var(--line); background: #1b2635;
  color: var(--ink); font: 800 clamp(14px, 3.4dvh, 44px) system-ui, sans-serif; display: inline-flex; align-items: center; gap: 0.6vw; cursor: pointer; }
.home-pick { flex: 1; display: flex; flex-direction: column; gap: 1.2dvh; min-width: 0; }
.modes.gb-modes { grid-template-columns: repeat(3, 1fr); gap: 1vw; flex: 1; }
.modes .gb-mode { border: 3px solid var(--line); border-radius: 22px; background: var(--panel); color: var(--ink); padding: 1dvh 1vw; min-height: var(--touch); text-align: left; }
.modes .gb-mode.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent) inset; }
.modes .gb-mode-emoji { width: auto; height: auto; color: var(--accent); }
.modes .gb-mode-emoji svg { width: clamp(22px, 5dvh, 64px); height: clamp(22px, 5dvh, 64px); }
.modes .gb-mode-name { font-size: clamp(16px, 4.45dvh, 56px); }
.modes .gb-mode-desc { font-size: clamp(12px, 2.9dvh, 36px); color: var(--ink-dim); }
.modes .gb-mode-best { font-size: clamp(12px, 2.7dvh, 34px); color: var(--accent); }
.pick-btn:disabled { opacity: 0.3; border-style: dashed; cursor: not-allowed; }
#scr-start .pick-label { margin-top: 0; }
.sound-btn svg, .buddy-album svg { width: 0.9em; height: 0.9em; }
@media (max-aspect-ratio: 4/3) {
  .home-main { flex-direction: column; height: auto; }
  .buddy { flex: none; flex-direction: row; flex-wrap: wrap; }
  .buddy-img { height: 12dvh; }
  .modes.gb-modes { grid-template-columns: repeat(2, 1fr); }
  /* 세로 화면: 제목 칸·카드를 줄여 인원 단추가 첫 화면에 오게 */
  #scr-start { justify-content: flex-start; padding-top: calc(var(--dock-h) + var(--edge) + 1dvh); }
  .home-head { min-height: 0; }
  #scr-start .title { font-size: clamp(26px, 5.5dvh, 120px); }
  .buddy { padding: 1dvh 3vw; gap: 0.6dvh 3vw; }
  .buddy-img { height: 8dvh; }
  .modes .gb-mode { padding: 0.8dvh 2vw; }
  .modes .gb-mode-name { font-size: clamp(15px, 3dvh, 56px); }
  .modes .gb-mode-desc { font-size: clamp(12px, 2dvh, 36px); }
  /* 인원 6개를 한 줄로 — 360px 폰에서 6이 둘째 줄로 내려가 화면 밖이었다(qa phone-s) */
  .pick { flex-wrap: nowrap; gap: 8px; }
  .pick-btn { width: min(var(--touch), calc((92vw - 40px) / 6)); }
}
/* 좁은 화면(휴대폰): 전체화면 단추를 빼고 소리 단추 2개만 — HUD 열이 좁아져 숫자가 넘쳤다(qa phone 87>70) */
@media (max-width: 700px) {
  #btn-full { display: none; }
  :root { --dock-w: calc(var(--dock-h) * 2 + var(--edge)); }
}
/* 이야기 앨범 */
.album { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30vw, 420px), 1fr)); gap: 1.2dvh 1vw; width: min(92vw, 1500px); }
.album-item.is-locked { opacity: 0.45; border-style: dashed; cursor: default; }
.buddy-say { font-size: var(--fs-body); color: #8fe39a; }
.handoff-last { font-size: clamp(14px, 3.6dvh, 46px); color: var(--ink-dim); min-height: 1em; }
.r-sub { font-size: clamp(14px, 4.45dvh, 56px); color: var(--ink-dim); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud.is-last .hud-value { color: var(--accent); }

/* ── 핸드오프 ── */
.handoff-turn {
  font-size: var(--fs-value);
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.handoff-mark { font-size: 1.05em; line-height: 1; }
.row { display: flex; gap: clamp(10px, 1.6vw, 30px); flex-wrap: wrap; justify-content: center; }
.btn {
  min-height: var(--touch);
  min-width: calc(var(--touch) * 2.2);
  padding: 0 clamp(14px, 2vw, 44px);
  border: 4px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--fs-btn);
  font-weight: 800;
  cursor: pointer;
}
.btn-go { background: var(--accent); color: #241c00; border-color: #b99400; }
.btn-skip { color: var(--ink-dim); }

/* ── 카운트다운 ── */
.count-num { font-size: clamp(70px, 34dvh, 400px); font-weight: 900; color: var(--accent); line-height: 1; }
.count-sub { font-size: var(--fs-body); color: var(--ink-dim); }

/* ── HUD (5열 대칭: 빈칸 | 시간 | 차례 | 점수 | 빈칸) ── */
.hud {
  height: 25dvh;
  display: grid;
  grid-template-columns: var(--dock-w) 1fr 1fr 1fr var(--dock-w);
  align-items: center;
  padding: 0 var(--edge);
}
.hud-pad { }
.hud-slot { display: flex; flex-direction: column; align-items: center; gap: 0.3dvh; min-width: 0; }
.hud-label { font-size: var(--fs-body); color: var(--ink-dim); white-space: nowrap; font-weight: inherit; }
.hud-label b { font-weight: inherit; }
.hud-label .sm { display: none; }
.hud-value {
  font-size: var(--fs-value);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.22em;
}
.hud-mark { line-height: 1; }
.hud.is-urgent #hud-time { color: #ff6a5a; }

/* ── 무대: 로스터 | 필드 | 사이드 ── */
.stage {
  height: var(--stage-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 1vw;
}
.field-wrap {
  height: var(--field-h);
  width: calc(var(--field-h) * 1.5);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
#field { display: block; width: 100%; height: 100%; }

.roster { display: flex; flex-direction: column; gap: 0.9dvh; }
.roster-item {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--fs-body);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0.55;
}
.roster-item.is-now { opacity: 1; }
.roster-item.is-done { opacity: 0.85; }
.roster-item .r-score { color: var(--ink-dim); font-weight: 800; }
.roster-item.is-now .r-score { color: var(--accent); }

.side { display: flex; flex-direction: column; gap: 1.4dvh; align-items: center; }
.side-box { display: flex; flex-direction: column; align-items: center; gap: 0.2dvh; }
.side-label { font-size: var(--fs-body); color: var(--ink-dim); white-space: nowrap; }
.side-value { font-size: var(--fs-body); font-weight: 800; letter-spacing: 0.06em; white-space: nowrap; }

/* ── 힌트 + 파워바 ── */
.hint {
  height: 11dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8dvh;
  padding: 0 4vw;
}
.hint-text { font-size: var(--fs-body); color: var(--ink-dim); white-space: nowrap; }
.power-wrap {
  width: min(70vw, calc(var(--field-h) * 1.5));
  height: clamp(10px, 1.9dvh, 26px);
  border: 3px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: #16202c;
}
.power-fill { display: block; height: 100%; width: 0%; background: var(--accent); }
.safe-gap { height: 14dvh; }

/* ── 결과 ── */
.result-head { font-size: clamp(26px, 7.4dvh, 112px); font-weight: 900; color: var(--accent); }
.result-table { display: flex; flex-direction: column; gap: 0.7dvh; width: min(92vw, 1100px); }
.result-row {
  display: grid;
  grid-template-columns: 2.2em 1.4em auto 1fr auto;   /* 순위 · 표시 · 이름 · 덧말(딱 맞힘·팀원) · 점수 */
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-body);
  font-weight: 700;
  padding: 0.35dvh 0.7em;
  border-radius: 14px;
  background: #22304480;
}
.result-row.is-top { background: #3b3410; border: 3px solid var(--accent); }
.result-row .r-rank { color: var(--ink-dim); font-weight: 800; }
.result-row.is-top .r-rank { color: var(--accent); }
.result-row .r-cells { font-weight: 900; }
.result-row.is-skip { opacity: 0.5; }
.result-note { font-size: var(--fs-body); color: var(--ink-dim); }

/* ── 좁은 화면(스마트폰): 로스터를 필드 아래로 접고 필드를 폭에 맞춘다 ──
   세로 25~75% 밴드는 전자칠판(서서 조작 + OS 툴바) 조건이라 여기선 적용하지 않는다 */
@media (max-width: 899px) {
  :root {
    --edge: 2vw;
    --stage-h: 46dvh;
    --field-h: min(var(--stage-h), calc(94vw / 1.5));
    /* ⚠️ 좁은 화면에서는 dvh 기준 폰트가 가로를 넘친다 — 390px에서 HUD 3칸이 통째로 겹쳤다(실측).
       가로(vw)를 함께 상한으로 걸어야 한다. */
    --dock-h: clamp(50px, 7dvh, 64px);
    --fs-value: clamp(22px, 8.6vw, 44px);
    --fs-body: clamp(12px, 4.4vw, 22px);
    --fs-btn: clamp(16px, 5.6vw, 30px);
    --touch: max(56px, 8dvh);
  }
  .hud-label .lg { display: none; }
  .hud-label .sm { display: inline; }
  .hud { height: 15dvh; grid-template-columns: 1fr 1fr 1fr var(--dock-w); }
  .hud-pad { display: none; }
  .stage {
    height: auto;
    flex: 1 1 auto;          /* 남는 세로를 흡수해 내용을 가운데로 — 안 하면 하단에 40%가 통째로 빈다 */
    align-content: center;
    grid-template-columns: 1fr;
    gap: 1.6dvh;
  }
  .field-wrap { order: 1; }
  .roster-side { order: 2; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 3vw; }
  .side { display: none; }
  .hint { height: auto; padding: 1.4dvh 4vw; }
  .safe-gap { height: 2dvh; }
  .hint-text { white-space: normal; text-align: center; }
}

/* @gb-juice-css v3 — kit/juice/juice.css. 게임 스타일시트 끝에 그대로 붙인다(CSP style-src 'self' 라 JS 가 <style> 을 넣지 않는다). */
.gbj-layer{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.gbj-pop{position:absolute;transform:translate(-50%,-50%) scale(var(--s));font:900 22px/1 system-ui,sans-serif;text-shadow:0 2px 0 #0008,0 0 12px currentColor;white-space:nowrap;animation:gbjPop .9s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes gbjPop{0%{opacity:0;transform:translate(-50%,-50%) scale(calc(var(--s)*.3))}15%{opacity:1;transform:translate(-50%,-80%) scale(calc(var(--s)*1.35))}35%{transform:translate(calc(-50% + var(--dx)),-120%) scale(var(--s))}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-260%) scale(calc(var(--s)*.9))}}
.gbj-punch{animation:gbjPunch .32s cubic-bezier(.2,2,.4,1)}
@keyframes gbjPunch{0%{transform:scale(1)}30%{transform:scale(var(--gbj-p))}100%{transform:scale(1)}}
.gbj-flash{position:absolute;inset:0;opacity:0}
.gbj-flash.gbj-go{animation:gbjFlash .35s ease-out forwards}
@keyframes gbjFlash{to{opacity:0}}
/* 가운데 큰 글자 — 자리는 게임이 --gbj-banner-top 으로 옮긴다(HUD 배너·선택 카드와 겹치지 않게 · 2026-10-12 끝까지 진화 실측). 좁은 화면에서 넘치지 않게 vw 로 줄인다  · 튀어나올 때 1.25배라 폭은 76vw(2026-10-14 술래가 번진다: 92vw 면 412px 폰에서 양옆이 잘렸다 — banner-fit 실측) */
.gbj-banner{position:absolute;left:50%;top:var(--gbj-banner-top,40%);transform:translate(-50%,-50%);font:900 clamp(20px,6.4vw,40px)/1.1 system-ui,sans-serif;text-align:center;opacity:0;text-shadow:0 3px 0 #000a,0 0 24px currentColor;max-width:76vw;width:max-content}
.gbj-banner.gbj-go{animation:gbjBan var(--d,1.4s) cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes gbjBan{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(2deg)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1.05)}}
/* v3 타격 묶음(DOM 게임용 — 캔버스 게임은 콜백으로 직접 그린다): 찌그러짐·튕겨남·화면 흔들림·하얀 번쩍 */
/* 한 요소에 셋이 같이 걸린다 — animation 하나를 서로 덮지 않게 갈래마다 칸(--gbj-a1~3)을 따로 둔다 */
.gbj-squash,.gbj-knock,.gbj-hitflash{animation:var(--gbj-a1,none),var(--gbj-a2,none),var(--gbj-a3,none)}
.gbj-squash{--gbj-a1:gbjSquash .28s cubic-bezier(.2,2.2,.4,1)}
@keyframes gbjSquash{0%{transform:scale(1)}25%{transform:scale(1.3,.7)}55%{transform:scale(.88,1.12)}100%{transform:scale(1)}}
.gbj-knock{--gbj-a2:gbjKnock .4s cubic-bezier(.2,1.8,.4,1)}
@keyframes gbjKnock{0%{translate:0 0}25%{translate:var(--kx,14px) var(--ky,0)}60%{translate:calc(var(--kx,14px)*-.25) calc(var(--ky,0px)*-.25)}100%{translate:0 0}}
.gbj-shake{animation:gbjShake .3s linear}
@keyframes gbjShake{0%,100%{translate:0 0}20%{translate:calc(var(--sh,5px)*-1) var(--sh,5px)}40%{translate:var(--sh,5px) calc(var(--sh,5px)*-.6)}60%{translate:calc(var(--sh,5px)*-.6) calc(var(--sh,5px)*-.4)}80%{translate:calc(var(--sh,5px)*.4) calc(var(--sh,5px)*.3)}}
.gbj-hitflash{--gbj-a3:gbjWhite .16s steps(1,end)}
@keyframes gbjWhite{0%{filter:brightness(0) invert(1)}100%{filter:none}}
@media (prefers-reduced-motion:reduce){.gbj-pop,.gbj-banner.gbj-go,.gbj-punch,.gbj-squash,.gbj-knock,.gbj-shake,.gbj-hitflash{animation-duration:.01s}}