/* 08 · 6~7절 반응형. 모바일 세로 GameBoard가 진실 원천이고 PC는 폭만 넓어진다. */

:root {
  color-scheme: dark;
  --bg: #080c16;
  --panel: #111a2b;
  --line: #24334c;

  /* 바닥 · 획득 · 손패는 서로 다른 재질로 읽혀야 한다. 같은 색을 쓰지 않는다. */
  --felt: #14493a;          /* 바닥: 초록 장판 */
  --felt-deep: #0d3229;
  --felt-line: #2b7a5d;
  --felt-text: #a8d8c4;
  --tray: #14243a;          /* 획득: 파란 보관대 */
  --tray-deep: #0e1b2c;
  --tray-line: #3d6f96;
  --tray-text: #9cc3e4;
  --hand: #2c2116;          /* 손패: 나무 트레이 */
  --hand-deep: #1c1610;
  --hand-line: #7a5a28;
  --hand-text: #d8bf95;
  --text: #eef2fb;
  --muted: #8f9cb5;
  --accent: #ff6f7d;
  --legal: #53dcff;
  --gold: #ffbc3d;
  --mission: #b26bff;       /* 미션 관련 카드 아웃라인 */
  --card-bg: #f4ede0;
  --card-ink: #1b1408;
  --radius: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/*
 * hidden 속성은 반드시 display를 이겨야 한다.
 * .modal 같은 규칙이 display를 지정하면 [hidden]의 기본 display:none을 덮어써서
 * 숨겼다고 생각한 전체 화면 오버레이가 남아 모든 입력을 가로챈다.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  background: radial-gradient(circle at 50% -8%, rgba(255, 111, 125, .10), transparent 30rem), var(--bg);
  color: var(--text);
  font-family: "Pretendard", "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

/* ---------------------------------------------------------- 스테이지 꽃길 로비 */

body.lobby-open {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #182a22;
}

.flower-road-lobby {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  color: #2c2115;
  background:
    linear-gradient(90deg, rgba(28, 45, 34, .95), rgba(57, 79, 58, .35) 24%, rgba(57, 79, 58, .35) 76%, rgba(28, 45, 34, .95)),
    #243d30;
  font-family: "Pretendard", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.lobby-topbar {
  position: absolute;
  z-index: 8;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  width: min(calc(100% - 24px), 520px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.star-wallet,
.tavern-button {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 8px;
  border: 1px solid rgba(255, 239, 185, .4);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(52, 37, 24, .96), rgba(30, 22, 16, .96));
  box-shadow: 0 8px 22px rgba(18, 12, 8, .28), inset 0 1px rgba(255, 255, 255, .1);
  color: #fff4d4;
  pointer-events: auto;
}

.star-wallet-symbol {
  width: 36px;
  height: 36px;
  display: block;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .55));
}

.star-wallet-copy,
.tavern-button > span:last-child { display: grid; line-height: 1.05; text-align: left; }
.star-wallet-copy small,
.tavern-button small { color: #ccb98f; font-size: 9px; font-weight: 700; }
.star-wallet-copy b { margin-top: 3px; font-size: 19px; font-variant-numeric: tabular-nums; }

.tavern-button {
  min-width: 94px;
  justify-content: center;
  border-color: rgba(224, 124, 89, .48);
  cursor: pointer;
}
.tavern-symbol {
  width: 32px;
  height: 32px;
  display: block;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .55));
}
.tavern-button b { margin-top: 3px; color: #ffcf91; font-size: 14px; }
.tavern-button:active { transform: translateY(1px); }

.map-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 239, 185, .35) transparent;
  touch-action: pan-y;
}

.map-world {
  position: relative;
  width: min(100%, 560px);
  min-height: 100%;
  margin: 0 auto;
  padding: 0 0 max(86px, calc(env(safe-area-inset-bottom) + 70px));
  overflow: hidden;
  background: #bacf9d;
  box-shadow: 0 0 50px rgba(0, 0, 0, .3);
}

.map-segment {
  position: relative;
  height: 620px;
  isolation: isolate;
  overflow: hidden;
}
.map-segment::before,
.map-segment::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.map-segment::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 2% 24%, rgba(59, 93, 56, .5) 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 94% 68%, rgba(64, 105, 63, .44) 0 15%, transparent 15.5%),
    radial-gradient(circle at 16% 84%, rgba(255, 247, 203, .55) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 19%, rgba(255, 247, 203, .5) 0 2px, transparent 3px);
  background-size: auto, auto, 34px 34px, 42px 42px;
}
.map-segment::after {
  width: 210px;
  height: 110px;
  right: -80px;
  top: 95px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  filter: blur(1px);
  box-shadow: -340px 310px 0 rgba(255, 255, 255, .13);
}

.map-segment[data-theme="pine"] {
  background: linear-gradient(180deg, #b5cf9b, #d4d7a0 60%, #b7c990);
}
.map-segment[data-theme="plum"] {
  background: linear-gradient(180deg, #d9bcbd, #efd8c7 55%, #b5cf9b);
}
.map-segment[data-theme="stream"] {
  background: linear-gradient(180deg, #94c6b6, #bad8ba 52%, #d9bcbd);
}
.map-segment[data-theme="moon"] {
  background: linear-gradient(180deg, #7697a2, #a5bdad 60%, #94c6b6);
}

.segment-title {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 292px;
  transform: translate(-50%, -50%) rotate(-2deg);
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 7px 16px;
  border: 1px solid rgba(90, 53, 28, .24);
  border-radius: 7px;
  background: rgba(255, 247, 221, .72);
  box-shadow: 0 4px 12px rgba(58, 39, 22, .12);
  color: #67472c;
  backdrop-filter: blur(4px);
}
.segment-title small { font-size: 9px; letter-spacing: .14em; opacity: .7; }
.segment-title b { font-size: 13px; white-space: nowrap; }

.road-svg {
  position: absolute;
  z-index: 1;
  top: -2px;
  right: 0;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  overflow: visible;
}
.road-shadow { fill: none; stroke: rgba(76, 56, 35, .2); stroke-width: 10; }
.road-main { fill: none; stroke: #f4e5b7; stroke-width: 7; stroke-linecap: round; }
.road-stitch { fill: none; stroke: rgba(121, 87, 48, .35); stroke-width: 1.2; stroke-dasharray: 2 4; }

.map-node-wrap {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 4px;
}
.map-node {
  position: relative;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 4px solid #fff2cc;
  border-radius: 50%;
  background: linear-gradient(145deg, #d95542, #a72e2e);
  box-shadow: 0 6px 0 #6e3427, 0 10px 16px rgba(50, 30, 18, .22), inset 0 3px 0 rgba(255, 255, 255, .24);
  color: #fff8dc;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}
.map-node::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 242, 204, .45);
  border-radius: 50%;
}
.map-node.current {
  width: 70px;
  height: 70px;
  border-color: #fff4a9;
  background: linear-gradient(145deg, #f1b83e, #c56a19);
  box-shadow: 0 6px 0 #754215, 0 0 0 7px rgba(255, 232, 125, .28), 0 12px 22px rgba(74, 42, 16, .3);
  animation: current-node 1.8s ease-in-out infinite;
}
.map-node.completed { background: linear-gradient(145deg, #479966, #266a4d); box-shadow: 0 6px 0 #23513b, 0 10px 16px rgba(50,30,18,.2); }
.map-node.locked,
.map-node.future {
  border-color: #d5d5c7;
  background: linear-gradient(145deg, #839084, #626c65);
  box-shadow: 0 6px 0 #48504b, 0 10px 16px rgba(50, 30, 18, .18);
  color: #e8e8dc;
  cursor: default;
}
.map-node.future { opacity: .72; }
.map-node-lock { position: absolute; right: -3px; bottom: -1px; font-size: 14px; filter: grayscale(1); }

/* 별 3개가 노드 원의 위쪽을 아치로 두른다. 원 중심(top)에서 반지름만큼 회전 배치. */
.map-stars {
  position: absolute;
  top: 33px;   /* 노드 원(62px)의 중심 높이 */
  left: 50%;
  width: 0;
  height: 0;
  z-index: 5;
  pointer-events: none;
}
.map-star {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
  /* 중심 정렬 → 아치 각도로 회전 → 반지름만큼 밀어 올리기. 별은 아치를 따라 살짝 기운다. */
  transform: translate(-50%, -50%) rotate(var(--arc, 0deg)) translateY(-45px);
}
.map-star:nth-child(1) { --arc: -32deg; }
.map-star:nth-child(2) { --arc: 0deg; width: 27px; height: 27px; }
.map-star:nth-child(3) { --arc: 32deg; }
.map-star.earned { filter: drop-shadow(0 2px 2px rgba(67, 41, 18, .58)); }
.map-star.empty { opacity: .55; filter: drop-shadow(0 1px 1px rgba(67, 41, 18, .24)); }
/* 노드 아래 보너스 줄: 고 보너스 별 2개 + 랜덤뽑기 수령 여부 */
.map-substars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  z-index: 5;
}
.sub-star { width: 13px; height: 13px; display: block; object-fit: contain; }
.sub-star.empty { opacity: .5; }
.map-draw {
  margin-left: 3px;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(66, 44, 22, .5);
  color: rgba(255, 250, 225, .55);
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}
.map-draw.claimed {
  background: #e7bf76;
  color: #57432c;
  box-shadow: 0 1px 0 #754425;
}
.map-node-name {
  max-width: 116px;
  padding: 2px 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 250, 225, .72);
  color: #57432c;
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-start-sign {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 7px 18px;
  border: 2px solid #754425;
  border-radius: 5px;
  background: #e7bf76;
  box-shadow: 0 4px 0 #754425;
  color: #57331e;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.lobby-caption {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: max(9px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 7px 15px;
  border: 1px solid rgba(255, 244, 210, .18);
  border-radius: 99px;
  background: rgba(28, 35, 28, .75);
  color: #fff6dd;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.lobby-caption span { font-size: 7px; letter-spacing: .18em; opacity: .55; }
.lobby-caption b { font-size: 10px; }

.tavern-modal-card { text-align: center; }
#tavern-modal { z-index: 80; }
.tavern-sign {
  width: 72px;
  height: 72px;
  display: block;
  margin: 0 auto 12px;
  object-fit: contain;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .4));
}

@keyframes current-node {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (min-width: 700px) {
  .flower-road-lobby::before,
  .flower-road-lobby::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -8vw;
    width: 38vw;
    height: 70vh;
    background: linear-gradient(140deg, transparent 40%, rgba(7, 22, 14, .45) 41% 100%);
    pointer-events: none;
  }
  .flower-road-lobby::before { left: -15vw; transform: skewY(8deg); }
  .flower-road-lobby::after { right: -15vw; transform: scaleX(-1) skewY(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .map-node.current { animation: none; }
}

/* --------------------------------------------------------------- 앱 셸 */

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  /* 행은 내용만큼만. (기본값은 늘어나기라 대전 상대 자리·턴 배너 뒤에 빈 띠가 생긴다) */
  align-content: start;
  gap: 16px;
  /* 고정 상단바(약 50px)에 가리지 않도록 위쪽을 비운다 */
  padding: 58px 12px 12px;
  min-height: 100dvh;
}

/* 게임 화면 고정 상단바: 로비 상단바처럼 게임 UI와 분리되어 스크롤해도 항상 위에 있다 */
.game-topbar {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: linear-gradient(rgba(10, 14, 22, .94), rgba(10, 14, 22, .78));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

/* 상단 왼쪽: 게임 메뉴 아이콘. 누르면 왼쪽에서 메뉴가 슬라이드로 나온다 */
.hud-menu-button {
  flex: none;
  width: 40px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
}
.hud-menu-button:hover { border-color: var(--gold); }
.hud-menu-button .zone-icon { width: 18px; height: 18px; }

/* 게임 메뉴: 왼쪽 슬라이드 패널 */
.game-menu { position: fixed; inset: 0; z-index: 40; }
.game-menu-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 14, .62);
  opacity: 0;
  transition: opacity .25s ease;
}
.game-menu.open .game-menu-scrim { opacity: 1; }
.game-menu-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(240px, 78vw);
  padding: calc(max(8px, env(safe-area-inset-top)) + 50px) 14px 16px;
  background: linear-gradient(180deg, var(--panel), #0c1322);
  border-right: 1px solid var(--line);
  box-shadow: 12px 0 32px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateX(-105%);
  transition: transform .28s cubic-bezier(.25, .8, .35, 1);
}
.game-menu.open .game-menu-panel { transform: none; }
.game-menu-title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--muted);
}
.game-menu-item {
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.game-menu-item:hover { border-color: var(--gold); color: var(--gold); }
/* 개발·QA용 테스트 덱. 일반 메뉴와 눈에 띄게 구분한다. */
.menu-test-title { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.game-menu-item.test {
  padding: 10px 14px;
  border-style: dashed;
  color: var(--muted);
  font-size: 12px;
}
.game-menu-item.test:hover { border-color: #ff9d9d; color: #ff9d9d; }
@media (prefers-reduced-motion: reduce) {
  .game-menu-panel, .game-menu-scrim { transition: none; }
}

/* 상단 오른쪽: 미션 확인. 안내 팝업이 이 버튼으로 빨려 들어온다 */
.hud-mission-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 205, 112, .55);
  background: rgba(255, 205, 112, .10);
  color: var(--gold, #ffcd70);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.hud-mission-button:hover { background: rgba(255, 205, 112, .2); }
.hud-mission-button.mission-pulse { animation: mission-pulse .45s ease-out; }
@keyframes mission-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------ GameBoard */

.game-board {
  width: min(100%, 480px);
  justify-self: center;
  display: grid;
  /* 세 영역 모두 내용 높이만 쓴다. 장판을 1fr로 늘리면 빈 초록 바닥이 화면을 삼킨다. */
  grid-template-rows: repeat(3, auto);
  align-content: start;
  gap: 10px;
  min-height: 0;
  user-select: none;
  touch-action: manipulation;
}

/* ------------------------------------------------------ 영역 머리말 */

.zone { border-radius: var(--radius); }

.zone-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.zone-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 3px 9px;
  border: 1px solid currentColor;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.zone-icon { display: block; width: 14px; height: 14px; object-fit: contain; }
.zone-hint {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-tag-board { color: #6fe0b2; background: rgba(111, 224, 178, .10); }
.zone-tag-captured { color: #8fc4f2; background: rgba(127, 199, 255, .10); }
.zone-tag-hand { color: var(--gold); background: rgba(255, 188, 61, .12); }

.board-area .zone-hint { color: rgba(168, 216, 196, .72); }
.captured-area .zone-hint { color: var(--tray-text); font-weight: 800; font-size: 12px; margin-left: auto; }
.hand-area .zone-hint { color: var(--hand-text); font-weight: 700; }

.chip-toggle {
  flex: none;
  margin-left: auto;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid rgba(216, 191, 149, .35);
  border-radius: 99px;
  color: var(--hand-text);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.chip-toggle.on { border-color: var(--gold); color: var(--gold); }

.gauge { height: 5px; margin-top: 8px; background: #1b2740; border-radius: 99px; overflow: hidden; }
.gauge-fill { height: 100%; background: linear-gradient(90deg, var(--legal), var(--accent)); transition: width .2s ease; }

/* --------------------------------------------------------------- 바닥 */

/*
 * 바닥은 초록 장판이다. 4장 × 2줄 + 오른쪽에 뒤집을 화투 뭉치.
 * 안쪽 그림자로 눌린 면을 만들어 "여기 깔려 있다"를 보여준다.
 */
.board-area {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .07), transparent 62%),
    linear-gradient(180deg, var(--felt), var(--felt-deep));
  border: 1px solid var(--felt-line);
  box-shadow: inset 0 8px 22px rgba(0, 0, 0, .42), inset 0 -2px 0 rgba(255, 255, 255, .04);
  padding: 10px 9px 12px;
  display: grid;
  gap: 9px;
  align-content: start;
}

/* 바닥 그리드 + 오른쪽 뭉치 */
.board-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.board {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

/*
 * 바닥 한 줄. 장수는 JS가 배분한다 (한 줄 최대 6장, 12장까지 2줄, 그 위로 3줄).
 * 카드 폭을 못박아 실제 맞고처럼 작게 깔린다.
 */
.board-line {
  display: flex;
  justify-content: center;
  gap: 6px;
  min-height: 0;
}
.board-line.empty { min-height: 70px; }
/*
 * 바닥패는 한 장씩 나란히 깔린다. 같은 월끼리 묶어 보여 주는 테두리(그룹 UI)는 두지 않는다 —
 * 정렬만 월 오름차순이라 같은 월이 이웃해 있을 뿐, 줄 안에서는 모두 같은 간격이다.
 */
.board-stack {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.board-line .card { flex: none; width: 44px; }

/* 작은 바닥패에서는 분류 배지를 더 줄인다 */
.board .card .card-type { font-size: 8px; line-height: 12px; padding: 0 4px; }
.board .card .card-month { min-width: 13px; font-size: 9px; line-height: 13px; }

/* 화투 뭉치: 바닥 오른쪽. 패를 내면 여기서 한 장이 뒤집혀 나간다. */
.deck-pile { position: relative; flex: none; width: 46px; height: 70px; align-self: center; }
.deck-pile-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.deck-pile-card:nth-of-type(2) { left: 2px; top: 2px; }
.deck-pile-card:nth-of-type(3) { left: 4px; top: 4px; }
.deck-pile.empty .deck-pile-card { opacity: .25; }
.deck-count {
  position: absolute;
  right: -4px;
  bottom: -5px;
  z-index: 2;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 99px;
  background: #232a38;
  border: 1px solid rgba(216, 191, 149, .4);
  color: var(--hand-text);
  font-size: 10px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
}

/* --------------------------------------------------------------- 카드 */

/*
 * 카드는 이미지 한 장이 본체다. 13 · 10절대로 원본을 변형하지 않고
 * 상태(미션·잠금)와 분류 배지만 CSS로 덧붙인다.
 */
.card {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 8;
  border-radius: 8px;
  background: var(--card-bg);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease;
  outline: 2px solid transparent;
  outline-offset: 0;
}

.card-art {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  pointer-events: none;
}

/* 월 배지: 매칭이 핵심이라 기본은 켜 두고, 손패 영역의 토글로 끈다. */
.card-month {
  position: absolute;
  top: 3px;
  left: 3px;
  min-width: 15px;
  padding: 0 3px;
  background: rgba(10, 14, 12, .78);
  border-radius: 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}

/* 분류 배지: 색만으로 구분하지 않도록 글자를 함께 표시한다. */
.card-type {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 0 5px;
  border-radius: 99px;
  background: rgba(10, 14, 12, .74);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 14px;
  pointer-events: none;
}
.card.bright .card-type { background: rgba(196, 128, 16, .92); }
.card.animal .card-type { background: rgba(22, 118, 156, .92); }
.card.ribbon .card-type { background: rgba(176, 45, 60, .92); }

/* 바닥에 깔린 패: 그림자가 카드 바로 밑에 붙어 장판에 놓인 것처럼 보인다. */
.card.on-board {
  box-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 5px 8px -5px rgba(0, 0, 0, .85);
  cursor: default;
}

/* 내 손패: 위로 떠 있고 아래 금색 선으로 손에 들린 줄을 만든다. */
.card.in-hand {
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 188, 61, .28);
}
.card.in-hand::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: -4px;
  left: 4px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 188, 61, .8), transparent);
  border-radius: 99px;
  pointer-events: none;
}
.card.in-hand:active { transform: translateY(-6px); }

/* 손패·바닥에 같은 월이 함께 있으면(지금 짝이 가능하면) 노란색 아웃라인 */
.card.matchable {
  outline-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 188, 61, .28), 0 5px 10px -5px rgba(0, 0, 0, .8);
}
.card.in-hand.matchable {
  box-shadow: 0 0 0 3px rgba(255, 188, 61, .32), 0 8px 15px -5px rgba(0, 0, 0, .7);
}

/* 뒷면(딜링 중)에는 어떤 아웃라인도 보이지 않는다 */
.card.facedown,
.card.facedown.matchable {
  outline-color: transparent;
  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .7);
}

/* --------------------------------------------------------------- 획득 */

/*
 * 손패와 바닥 사이. 라벨 없이 광 → 띠 → 열끗 → 피 순서 한 줄로 겹쳐 쌓는다.
 * 위 줄에는 총점과 완성한 족보 칩만 보인다.
 */
.captured-area {
  background: linear-gradient(180deg, var(--tray), var(--tray-deep));
  border: 1px solid var(--tray-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  padding: 7px 11px 9px;
  display: grid;
  gap: 6px;
}

.captured-score { display: flex; align-items: center; gap: 10px; min-height: 18px; }
.score-total {
  flex: none;
  font-size: 13px;
  font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
/* 점수 옆 고 배지: 고를 외친 만큼 "N고" */
.go-badge {
  flex: none;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(255, 90, 90, .18);
  border: 1px solid rgba(255, 110, 110, .55);
  color: #ff9d9d;
  font-size: 11px;
  font-weight: 900;
}
/* 흔듬: 최종 점수 2배 상태를 획득 영역에 계속 보여준다 */
.shake-badge {
  background: rgba(255, 205, 112, .16);
  border-color: rgba(255, 205, 112, .6);
  color: var(--gold);
}
/* 점수 옆 미션 요약 한 줄 */
.mission-brief {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  color: var(--tray-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.captured-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(127, 199, 255, .18);
  border-radius: 9px;
  overflow: hidden;
}
.cap-group { display: flex; align-items: center; min-width: 0; }
/* 그룹 사이 구분선. 첫 그룹 앞에는 없다. */
.cap-group + .cap-group { border-left: 1px solid rgba(127, 199, 255, .22); padding-left: 6px; }
/* 빈 그룹은 자리 표시용 점선 칸 하나 */
.cap-group[data-empty="1"] .cap-cards::before {
  content: "";
  width: 22px;
  aspect-ratio: 5 / 8;
  border: 1px dashed rgba(127, 199, 255, .25);
  border-radius: 5px;
}
.cap-cards { display: flex; align-items: center; min-width: 0; }
/* 획득 카드는 작은 부채처럼 겹친다 */
.cap-cards .card {
  flex: none;
  width: 25px;
  aspect-ratio: 5 / 8;
  cursor: default;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .3);
}
.cap-cards .card + .card { margin-left: -13px; }
.cap-cards .card .card-type { display: none; }
.cap-cards .card .card-month { top: 1px; left: 1px; min-width: 12px; font-size: 8px; line-height: 12px; }

/* 완성 족보 칩: 완성됐을 때만 나타난다 */
.yaku-line { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; font-size: 10px; }
.yaku-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 10px; font-weight: 800;
  border: 1px solid rgba(127, 199, 255, .3); border-radius: 99px; color: var(--tray-text);
}
.yaku-chip.done { border-color: var(--gold); color: var(--gold); background: rgba(255, 188, 61, .12); }
.chip-icon { display: inline-block; width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }

/* --------------------------------------------------------------- 손패 */

/*
 * 손패는 내 손에 들린 패다. 초록 장판과 같은 계열을 쓰지 않고
 * 따뜻한 나무 트레이로 재질을 분리한다. 5장 × 2줄.
 */
.hand-area {
  position: relative; /* 매칭 선택 오버레이의 기준 */
  background:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, .018) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, var(--hand), var(--hand-deep));
  border: 1px solid var(--hand-line);
  box-shadow: inset 0 1px 0 rgba(255, 214, 150, .14), 0 -8px 22px -18px rgba(255, 188, 61, .7);
  padding: 9px 11px 11px;
  display: grid;
  gap: 8px;
}

.hand {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 52px));
  justify-content: center;
  gap: 7px;
  padding: 2px 0 4px;
}

.guide { margin: 0; font-size: 11px; color: #b6a184; text-align: center; min-height: 15px; }
.guide.warn { color: var(--accent); font-weight: 700; }

.controls { display: flex; gap: 6px; }
.ghost-button {
  flex: 1;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ghost-button:hover:not(:disabled) { border-color: var(--legal); color: var(--text); }
.ghost-button:disabled { opacity: .4; cursor: not-allowed; }

/* 손패 트레이 안에서는 버튼도 따뜻한 톤을 따른다. */
.hand-area .ghost-button { border-color: rgba(216, 191, 149, .28); color: var(--hand-text); }
.hand-area .ghost-button:hover:not(:disabled) { border-color: var(--gold); color: #fff; }
.hand-area .ghost-button.on { border-color: var(--gold); color: var(--gold); }

.build-tag { margin: 0; font-size: 9px; text-align: right; opacity: .6; }

/* -------------------------------------------------- 매칭 선택 오버레이 */

/*
 * 같은 월이 바닥에 2장일 때 손패 영역 위로 겹쳐 뜬다.
 * 낸 패(또는 뒤집힌 패) → 후보 2장 중 선택.
 */
.match-choice {
  position: absolute;
  inset: -4px;
  z-index: 12;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(10, 8, 5, .9);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  backdrop-filter: blur(3px);
}
.match-choice-title { margin: 0; font-size: 13px; font-weight: 800; color: var(--gold); }
.match-choice-row { display: flex; align-items: center; gap: 14px; }
.match-choice-played .card { width: 64px; cursor: default; }
.match-choice-arrow { font-size: 18px; color: var(--muted); }
.match-choice-options { display: flex; gap: 10px; }
.match-option {
  width: 76px;
  padding: 4px;
  background: rgba(83, 220, 255, .10);
  border: 2px solid var(--legal);
  border-radius: 11px;
  cursor: pointer;
  transition: transform .1s ease;
}
.match-option:hover { transform: translateY(-3px); }
.match-option .card { cursor: pointer; }
.match-choice .ghost-button { flex: none; padding: 6px 18px; }
.match-choice-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* 폭탄 선택지: 카드들과 나란히 놓이는 폭탄 카드 */
.bomb-option {
  position: relative;
  border-color: rgba(255, 110, 110, .75);
  background: rgba(255, 90, 90, .14);
}
.bomb-option .card-art {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
}
.bomb-option-label {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 99px;
  background: rgba(20, 6, 6, .82);
  color: #ffb3b3;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

/* --------------------------------------------------------- 턴 연출 */

/* 시작 딜링: 뒷면으로 뭉치에서 날아와 자리를 잡고, 왼쪽부터 차례로 뒤집힌다. */
.card.facedown {
  background-image: var(--card-back-image);
  background-size: cover;
  background-position: center;
}
.card.facedown .card-art,
.card.facedown .card-month,
.card.facedown .card-type { visibility: hidden; }
.card.deal-fly { transition: transform .17s cubic-bezier(.25, .7, .35, 1); }
/* 착지 순간의 "착" 펀치 */
.card.deal-land { animation: deal-land .14s ease-out; }
@keyframes deal-land { from { transform: scale(1.09); } }
.card.flipping { transform: scaleX(.06); transition: transform .12s ease-in; }

/* 턴 연출 복제본: 이동은 인라인 transform, 착지 충격은 여기서. */
.fx-clone {
  pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .65);
}
.fx-clone.slap { animation: slap .26s ease-out forwards; }
@keyframes slap {
  0% { filter: brightness(1.75); box-shadow: 0 0 0 0 rgba(255, 236, 170, .85); }
  40% { box-shadow: 0 0 0 12px rgba(255, 236, 170, 0); }
  100% { filter: brightness(1); box-shadow: 0 0 0 12px rgba(255, 236, 170, 0); }
}
/* 폭탄으로 내리꽂을 때: 더 세게 번쩍이고 파장이 크다 */
.fx-clone.slap.slap-hard { animation: slap-hard .34s ease-out forwards; }
@keyframes slap-hard {
  0% { filter: brightness(2.2); box-shadow: 0 0 0 0 rgba(255, 150, 120, .95); }
  45% { box-shadow: 0 0 0 20px rgba(255, 150, 120, 0); }
  100% { filter: brightness(1); box-shadow: 0 0 0 20px rgba(255, 150, 120, 0); }
}

/* 뻑! 쪽! 싹! 외침 */
.fx-pop {
  position: fixed;
  z-index: 50;
  transform: translate(-50%, -50%);
  padding: 6px 16px;
  border-radius: 99px;
  background: rgba(20, 12, 6, .92);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: 22px;
  font-weight: 900;
  pointer-events: none;
  animation: fx-pop .8s ease-out forwards;
}
@keyframes fx-pop {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -66%) scale(.95); opacity: 0; }
}

/* 입장 직후 빈 스테이지: 카드가 아직 돌지 않았다. 딜링은 미션 팝업 확인 뒤에. */
.game-board.predeal #board .card,
.game-board.predeal #hand .card {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .card, .gauge-fill { transition: none; }
  .card.deal-fly, .card.flipping { transition: none; }
  .fx-clone.slap, .fx-pop { animation: none; }
}

/* --------------------------------------------------------------- 모달 */

.modal {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(4, 7, 14, .78);
  backdrop-filter: blur(4px);
}

.modal-card {
  /* 100%는 조상 레이아웃에 따라 뷰포트보다 커질 수 있다. vw 기준으로 상한을 못박는다. */
  width: min(420px, calc(100vw - 36px));
  max-height: 88dvh;
  overflow-y: auto;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.modal-eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--gold); }
.modal-card h2 { margin: 0 0 6px; font-size: 22px; }
.modal-sub { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.result-score { margin: 4px 0 10px; font-size: 40px; font-weight: 900; color: var(--gold); }

.result-icon { display: block; width: 48px; height: 48px; margin: 0 auto 8px; object-fit: contain; }

/* 03 · 8절 별 + 보상 분해 — 기본 3개 영역과 고 보너스 2개 영역을 나눠 보여준다 */
.result-stars { margin: 2px 0 0; font-size: 26px; letter-spacing: .12em; color: var(--gold); }
.result-stars .stars-divider { margin: 0 6px; font-size: 15px; color: var(--muted); letter-spacing: 0; }
.result-stars .stars-bonus { color: #ff9d9d; }
.result-drawcard {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.result-drawcard.new { color: var(--gold); }

/* 고/스톱 팝업 */
.gostop-score { margin: 2px 0 8px; font-size: 34px; font-weight: 900; color: var(--gold); }
/* 국진 선택: 어떤 패를 옮기는지 그림으로 보여준다 */
.gukjin-card { display: flex; justify-content: center; margin: 8px 0 2px; }
.gukjin-card .card { width: 66px; cursor: default; }
.gostop-card .controls .ghost-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.gostop-go {
  border-color: rgba(255, 110, 110, .65);
  background: rgba(255, 90, 90, .14);
  color: #ffb3b3;
  font-weight: 900;
}
.reward-breakdown {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.reward-row { display: flex; justify-content: space-between; font-size: 12px; }
.reward-row span { color: var(--muted); }
.reward-row b { color: var(--gold); font-variant-numeric: tabular-nums; }

/* 미션 안내 팝업 */
.mission-info-status {
  margin: 12px 0 4px;
  display: grid;
  gap: 6px;
  text-align: left;
}
.mi-status-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
}
.mi-status-row .mi-status-label { color: var(--muted); }
.mi-status-row b {
  font-size: 15px;
  font-weight: 900;
  color: var(--gold, #ffcd70);
  font-variant-numeric: tabular-nums;
}
.mission-info-stars {
  margin: 12px 0 4px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  text-align: left;
  font-size: 12px;
}
.mission-info-stars li { display: flex; align-items: center; gap: 8px; }
.mission-info-stars .mi-star {
  flex: none;
  min-width: 44px;
  color: var(--gold, #ffcd70);
  letter-spacing: .05em;
}
.mission-info-stars .mi-draw { border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 2px; }
.mission-info-stars .mi-draw .mi-star { color: #ff9d9d; }
.mission-fly-clone { border-radius: 14px; overflow: hidden; }

.muted { color: var(--muted); }

/* --------------------------------------------------------- breakpoints */

@media (min-width: 768px) {
  .app-shell { padding: 62px 20px 20px; }
  .game-board { width: min(100%, 520px); }
}


/* ===================================================== 2인 대전 (11스테이지~)
 * 기존 게임 화면 위에 "상대 자리"와 "턴 배너"만 얹는다.
 * 바닥·내 획득·손패는 혼자 치기와 똑같은 것을 그대로 쓴다.
 */
.foe-area {
  /* app-shell은 그리드라 행이 늘어난다. 상대 자리는 내용만큼만 차지해야 판이 커진다. */
  align-self: start;
  padding: 6px 10px 8px;
  background: linear-gradient(180deg, rgba(74,34,30,.55), rgba(20,26,22,0));
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.foe-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  color: #f4e2c8; font-size: 12px; font-weight: 700;
}
.foe-grade {
  padding: 3px 8px; border-radius: 999px; font-size: 11px;
  background: rgba(214,120,96,.22); border: 1px solid rgba(214,120,96,.5); color: #ffc9b3;
}
.foe-go { padding: 2px 7px; border-radius: 999px; background: #b4482f; color: #fff; font-size: 11px; }
.foe-score { margin-left: auto; font-size: 13px; color: #ffe9a8; }

/* 상대 손패는 뒷면 장수로만. 줄어드는 게 보여야 압박이 된다. */
.foe-hand { display: flex; gap: 2px; margin-bottom: 8px; align-items: center; }
.foe-back {
  width: 22px; height: 34px; border-radius: 4px; flex: none;
  background: var(--card-back-image) center/cover, #6b2020;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.foe-count { margin-left: 6px; color: #d9c9a8; font-size: 12px; font-weight: 700; }

/* 상대 획득: 내 것과 같은 4분류를 절반 크기로 눕힌다 */
.foe-captured { display: flex; gap: 5px; }
.foe-area .foe-captured .cap-group {
  flex: 1; min-height: 30px; height: 30px; padding: 2px 4px; border-radius: 8px;
}
.foe-area .foe-captured .cap-cards { min-height: 0; }
.foe-area .foe-captured .card { width: 18px; }
.foe-area .foe-captured .cap-cards .card + .card { margin-left: -12px; }

.foe-area { margin-bottom: -10px; }

/* 턴 배너: 내 차례는 금색, 상대 차례는 붉은색 */
.turn-banner {
  align-self: start; display: flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 8px; font-size: 12px; font-weight: 700; letter-spacing: -.2px;
  background: rgba(255,233,168,.12); color: #ffe9a8;
}
.turn-banner.foe { background: rgba(214,120,96,.18); color: #ffc9b3; }

/* 상대 차례에는 내 손패를 눌러도 나가지 않으니 눌리지 않는 티를 낸다 */
body.versus .turn-banner.foe ~ .game-board .hand { opacity: .72; }