/* 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;
  --hand: #2c2116;          /* 손패: 나무 트레이 */
  --hand-deep: #1c1610;
  --hand-line: #7a5a28;
  --hand-text: #d8bf95;
  --text: #eef2fb;
  --muted: #8f9cb5;
  --accent: #ff6f7d;
  --legal: #53dcff;
  --gold: #ffbc3d;
  --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;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  gap: 16px;
  padding: 12px;
  min-height: 100dvh;
}

.panel { display: none; }

/* 넓은 PC 미만: 왼쪽 패널은 왼쪽에서 슬라이드로 열리는 드로어다. 08 · 8절 */
@media (max-width: 1179.98px) {
  .panel-left {
    display: block;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 84vw);
    z-index: 30;
    background: var(--panel);
    border-right: 1px solid var(--line);
    padding: 16px;
    overflow-y: auto;
    transform: translateX(-103%);
    transition: transform .28s cubic-bezier(.2, .8, .3, 1);
    box-shadow: 18px 0 40px -20px rgba(0, 0, 0, .85);
  }
  .panel-left.open { transform: translateX(0); }
}
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(4, 7, 14, .62);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-head .panel-title { margin: 0; }
.panel-head .drawer-close { margin-left: 0; }

.stage-drawer-button {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}
.stage-drawer-button:hover { border-color: var(--gold); color: var(--gold); }
@media (min-width: 1180px) {
  .drawer-scrim, .stage-drawer-button, .drawer-close { display: none; }
}

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

.game-board {
  width: min(100%, 480px);
  justify-self: center;
  display: grid;
  /* 네 영역 모두 내용 높이만 쓴다. 장판을 1fr로 늘리면 빈 초록 바닥이 화면을 삼킨다. */
  grid-template-rows: repeat(4, 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-plant { color: #7fc7ff; 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); }
.planting-area .zone-hint { color: #8aa8c6; }
.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); }

.hud {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hud-row.secondary { margin-top: 8px; }

.goal { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hud-icon { display: block; flex: none; width: 20px; height: 20px; object-fit: contain; }
.goal-label { font-size: 15px; font-weight: 800; }
.goal-progress { margin-left: 8px; color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.actions-value { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.actions-unit { margin-left: 3px; font-size: 11px; color: var(--muted); }

.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; }

.phase-tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.phase-tag[data-phase="go"] { color: var(--accent); }
.forecast { display: flex; gap: 6px; flex-wrap: wrap; }
.forecast span {
  padding: 2px 8px; font-size: 10px; font-weight: 700;
  border: 1px solid rgba(255, 188, 61, .4); border-radius: 99px; color: var(--gold);
}

/* 05 · 9절 미션 HUD 한 줄 요약 */
.mission-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 9px;
  background: rgba(255, 188, 61, .08);
  border: 1px solid rgba(255, 188, 61, .35);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
.mission-chip.met { background: rgba(255, 188, 61, .22); }
.mission-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* --------------------------------------------------------------- 보드 */

/*
 * 바닥은 초록 장판이다. 안쪽 그림자로 눌린 면을 만들어 "여기 깔려 있다"를 보여준다.
 * 심기·손패와 배경을 공유하지 않는 것이 이 화면의 핵심 규칙이다.
 */
.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 7px 12px;
  display: grid;
  grid-template-rows: repeat(3, auto);
  gap: 10px;
  align-content: start;
}

.board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  align-items: start;
}

/* 층은 물리적으로 겹친다: 아래층 더미는 위 카드 뒤에 숨고 대각선 모서리가 보인다. */
.stack { position: relative; display: block; padding-bottom: 22px; }
.stack > .card, .stack > .slot-empty { position: relative; z-index: 2; }

/*
 * 덮인 패 더미. 위 카드에 완전히 가려지고 오른쪽 아래 모서리만 살짝 보여
 * "뒤에 숨어 있다"로 읽히게 한다. 장수는 아래 .stack-under 배지가 알린다.
 */
.card-back {
  position: absolute;
  left: 9px;
  top: 10px;
  width: 100%;
  aspect-ratio: 5 / 8;
  border-radius: 7px;
  overflow: hidden;
  opacity: .95;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), 4px 5px 8px -3px rgba(0, 0, 0, .9);
}
/* 위 카드가 비어 있으면 더미가 자리를 지킨다 */
.stack > .card-back:first-child { position: relative; left: 0; top: 0; margin: 0 auto; width: 92%; }

/* 숨은 패 안내 배지. 뒷면 자체는 가려지므로 이 배지가 존재를 알린다. */
.stack-under {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(6, 10, 8, .82);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 8px;
  font-weight: 800;
  color: #cfe8dc;
  white-space: nowrap;
  pointer-events: none;
}

/* 장판 위 빈 자리 */
.slot-empty {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: rgba(0, 0, 0, .16);
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 8px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3);
}

/*
 * 심기는 바닥이 아니다. 파란 금속 보관대로 재질을 분리한다.
 */
.planting-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: 9px 11px 11px;
  display: grid;
  gap: 8px;
}

.planting-slots { display: flex; gap: 6px; }

.plant-slot {
  flex: 1;
  min-height: 62px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .22);
  border: 1px dashed rgba(127, 199, 255, .3);
  border-radius: 10px;
  color: #7fc7ff;
  font-size: 18px;
}
.plant-slot.legal { border-style: solid; border-color: var(--legal); background: rgba(83, 220, 255, .14); }
/* 회수 가능한 심은 카드: 보드의 합법 패처럼 살짝 떠오르고 금색 테두리 */
.plant-slot.legal .card {
  transform: translateY(-6px);
  outline-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 188, 61, .38), 0 10px 16px -6px rgba(0, 0, 0, .75);
}
.plant-slot:not(.empty) {
  padding: 3px;
  background: rgba(127, 199, 255, .08);
  border-style: solid;
  border-color: rgba(127, 199, 255, .45);
}

.board-actions { display: grid; gap: 6px; }
.bomb-buttons { display: grid; gap: 6px; }
.bomb-buttons:empty { display: none; }

/* 04 · 5절 폭탄: 조건이 갖춰진 월마다 버튼 하나 */
.bomb-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px;
  background: rgba(255, 111, 125, .16);
  border: 1px solid var(--accent);
  border-radius: 10px;
  color: #ffb9c1;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.shuffle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: rgba(255, 188, 61, .14);
  border: 1px solid var(--gold);
  border-radius: 10px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

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

/*
 * 카드는 이미지 한 장이 본체다. 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-back .card-art { width: 100%; height: 100%; object-fit: cover; }

/* 월 배지: 매칭이 핵심이라 기본은 켜 두고, 손패 영역의 토글로 끈다. */
.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);
}

/* 내 손패: 위로 떠 있고 아래 금색 선으로 손에 들린 줄을 만든다. */
.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.planted { box-shadow: 0 0 0 1px rgba(127, 199, 255, .55), 0 4px 9px -4px rgba(0, 0, 0, .75); }

/* 04 · 7절 설사 더미: 잠긴 세 장. 붉은 자물쇠 톤. */
.card.pile {
  box-shadow: 0 0 0 2px rgba(255, 111, 125, .55), 0 4px 9px -4px rgba(0, 0, 0, .8);
}
.card.pile .card-type { background: rgba(176, 45, 60, .95); }

.card.legal { outline-color: var(--legal); box-shadow: 0 0 0 3px rgba(83, 220, 255, .3), 0 5px 12px rgba(0, 0, 0, .45); }
.card.selected { transform: translateY(-10px); outline-color: var(--gold); box-shadow: 0 12px 20px -6px rgba(0, 0, 0, .8); }
.card.locked { filter: grayscale(.75) brightness(.62); cursor: not-allowed; }
.card.mini { width: 30px; }
.card.mini .card-type { display: none; }
.card.mini .card-month { top: 2px; left: 2px; font-size: 9px; line-height: 13px; min-width: 13px; }

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

/*
 * 손패는 내 손에 들린 패다. 초록 장판과 같은 계열을 쓰지 않고
 * 따뜻한 나무 트레이로 재질을 분리한다.
 */
.hand-area {
  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;
}

/* 다음 패: 손패 트레이 안의 대기열. 왼쪽 패가 다음 보충 때 손패 오른쪽으로 들어온다. */
.preview-box {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px;
  background: rgba(0, 0, 0, .24);
  border: 1px solid rgba(216, 191, 149, .2);
  border-radius: 10px;
}
.preview-label { font-size: 10px; font-weight: 800; color: var(--hand-text); white-space: nowrap; }
.preview-cards { display: flex; gap: 7px; align-items: center; min-height: 48px; }
.preview-hint { margin-left: auto; font-size: 9px; color: rgba(216, 191, 149, .62); white-space: nowrap; }

/* 화투 뭉치: 시작 딜링과 보충의 출발점. 남은 덱 수를 보여준다. */
.deck-pile { position: relative; flex: none; width: 36px; height: 52px; }
.deck-pile-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 48px;
  border-radius: 5px;
  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: -3px;
  bottom: -4px;
  z-index: 2;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 99px;
  background: #232a38;
  border: 1px solid rgba(216, 191, 149, .4);
  color: var(--hand-text);
  font-size: 9px;
  font-weight: 900;
  line-height: 14px;
  text-align: center;
}

/* 시작 딜링: 뒷면으로 뭉치에서 날아와 자리를 잡고, 왼쪽부터 차례로 뒤집힌다. */
.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,
.card.facedown .preview-order { visibility: hidden; }
.card.deal-fly, .card-back.deal-fly { transition: transform .17s cubic-bezier(.25, .7, .35, 1); }
/* 착지 순간의 "착" 펀치 */
.card.deal-land, .card-back.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; }

/* 세 번째 다음 패: 붉은 뒷면 + 배지. 카드 정보는 이미지·문구 어디에도 싣지 않는다. 02 · 8절 */
.card.masked {
  background-image: var(--card-back-image);
  background-size: cover;
  background-position: center;
  cursor: default;
}
.masked-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 7px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  color: rgba(255, 255, 255, .88);
  background: rgba(0, 0, 0, .28);
  border-radius: 8px;
  pointer-events: none;
}

/* 획득: 손패가 대상 패로 날아가 "짝" 붙는다. 이동은 인라인 transform, 충격은 여기서. */
.capture-clone {
  pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .65);
}
.capture-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% { opacity: 0; filter: brightness(1); box-shadow: 0 0 0 12px rgba(255, 236, 170, 0); }
}

/* 눈맞춤 교환 중에는 보드를 어둡게 해 손패·대기열에 집중시킨다. 07 · 9절 */
.wink-dim { filter: brightness(.55) saturate(.75); transition: filter .2s ease; }

/* 몇 번째 행동 뒤에 들어오는 패인지. 1번(바로 다음)만 금색으로 세운다. */
.preview-order {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 14px;
  height: 14px;
  border-radius: 99px;
  background: #232a38;
  border: 1px solid rgba(216, 191, 149, .4);
  color: var(--hand-text);
  font-size: 9px;
  font-weight: 900;
  line-height: 13px;
  text-align: center;
  pointer-events: none;
}
.preview-order.next { background: var(--gold); border-color: var(--gold); color: #1a1206; }

/* 보충 연출: 위치 이동은 JS가 FLIP으로 시작 transform을 걸고 순서대로 풀어준다. */
.card.fly-in {
  position: relative;
  z-index: 6;
  transition: transform .45s cubic-bezier(.2, .8, .25, 1);
  box-shadow: 0 0 0 2px var(--gold), 0 8px 18px -6px rgba(255, 188, 61, .55);
}
.card.hand-shift { transition: transform .22s ease; }
.card.preview-shift { transition: transform .22s ease; }
.card.preview-hold { opacity: 0; }
.card.preview-enter { animation: preview-enter .28s ease backwards; }
@keyframes preview-enter { from { opacity: 0; transform: translateX(10px) scale(.8); } }
@media (prefers-reduced-motion: reduce) {
  .card.fly-in, .card.hand-shift, .card.preview-shift,
  .card.deal-fly, .card-back.deal-fly, .card.flipping { transition: none; }
  .card.preview-enter { animation: none; }
}

.yaku-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.yaku-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 10px; font-weight: 800;
  border: 1px solid rgba(216, 191, 149, .3); border-radius: 99px; color: var(--hand-text);
}
.yaku-chip.done { border-color: var(--gold); color: var(--gold); background: rgba(255, 188, 61, .12); }
/* 이 판의 목표 족보: 목표 아이콘 + 금색 테두리로 다른 족보와 구분한다 */
.yaku-chip.goal-target {
  border-color: var(--gold);
  color: #ffd98a;
  background: rgba(255, 188, 61, .08);
  box-shadow: 0 0 0 1px rgba(255, 188, 61, .28);
}
.chip-icon { display: inline-block; width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }

.hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding-bottom: 4px; }

/* 04 · 8~9절 WINK 게이지와 눈맞춤 버튼 */
.wink-row { display: flex; align-items: center; gap: 8px; }
.wink-gauge {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(83, 220, 255, .25);
  border-radius: 99px;
  overflow: hidden;
}
.wink-gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, #2b9fbf, var(--legal));
  transition: width .25s ease;
}
.wink-row .chip-toggle:disabled { opacity: .45; cursor: not-allowed; }

.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; }

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

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

.modal-card {
  width: min(420px, 100%);
  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; }

.stop-button {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: rgba(83, 220, 255, .12);
  border: 1px solid var(--legal);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.btn-icon { display: block; flex: none; width: 28px; height: 28px; object-fit: contain; }
.btn-text { display: grid; gap: 3px; min-width: 0; }
.stop-button strong { font-size: 17px; }
.stop-button small { font-size: 11px; color: var(--muted); }

.go-section { margin-top: 14px; display: grid; gap: 8px; }
.go-warning { margin: 0; font-size: 11px; color: var(--accent); }
.contract-offers { display: grid; gap: 8px; }

.contract-button {
  display: grid; gap: 4px;
  padding: 12px;
  background: rgba(255, 111, 125, .10);
  border: 1px solid rgba(255, 111, 125, .5);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.contract-button strong { font-size: 14px; }
.contract-button small { font-size: 11px; color: var(--muted); }
.contract-button ul { margin: 4px 0 0; padding-left: 15px; font-size: 11px; color: var(--muted); }

/* 05 · 6절 미션 등급 */
.tier {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  vertical-align: 1px;
}
.tier-plain { background: rgba(83, 220, 255, .18); color: var(--legal); }
.tier-bold { background: rgba(255, 188, 61, .2); color: var(--gold); }
.tier-jackpot { background: rgba(255, 111, 125, .22); color: var(--accent); }

.joker-targets { display: grid; gap: 8px; }
.joker-option { background: rgba(83, 220, 255, .08); border-color: rgba(83, 220, 255, .45); }

/* 03 · 8절 별 + 03 · 13절 보상 분해 */
.result-stars { margin: 2px 0 0; font-size: 26px; letter-spacing: .12em; color: var(--gold); }
.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; }

/* --------------------------------------------------------------- 패널 */

.panel-title { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.panel-block { margin-top: 16px; }
.panel-block h3 { margin: 0 0 6px; font-size: 11px; color: var(--muted); }

.stage-list { display: grid; gap: 6px; }
.stage-button {
  display: grid; gap: 2px;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.stage-button.active { border-color: var(--accent); background: rgba(255, 111, 125, .10); }
.stage-button.locked { opacity: .45; cursor: not-allowed; }
.stage-button b { font-size: 12px; }
.stage-button small { font-size: 10px; color: var(--muted); }

.stat-grid { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; font-size: 12px; }
.stat-grid dt { color: var(--muted); }
.stat-grid dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }

.yaku-detail { display: grid; gap: 5px; }
.yaku-row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.yaku-cells { display: flex; gap: 3px; }
.yaku-cells i { width: 10px; height: 10px; border: 1px solid var(--line); border-radius: 3px; }
.yaku-cells i.filled { background: var(--gold); border-color: var(--gold); }

.history { margin: 0; padding-left: 16px; font-size: 11px; color: var(--muted); display: grid; gap: 2px; }
.muted { color: var(--muted); }

/* V2 · 꽃판 연쇄 / 이어족보 */
.carry-strip { display: flex; gap: 5px; overflow-x: auto; padding-top: 6px; scrollbar-width: none; }
.carry-chip {
  flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(255, 188, 61, .45);
  border-radius: 999px; background: rgba(255, 188, 61, .10); color: var(--gold);
  font-size: 10px; font-weight: 800;
}
button.carry-chip { cursor: pointer; }
button.carry-chip:disabled { opacity: .45; cursor: default; }
.carry-hint { outline: 2px solid rgba(255, 188, 61, .7); outline-offset: 2px; }
.flower-toast {
  position: fixed; z-index: 50; left: 50%; top: max(18px, env(safe-area-inset-top));
  transform: translateX(-50%); display: grid; gap: 2px; min-width: 220px;
  padding: 12px 18px; border: 1px solid rgba(255, 188, 61, .8); border-radius: 14px;
  background: rgba(30, 17, 35, .96); box-shadow: 0 12px 36px rgba(0,0,0,.45);
  color: var(--text); text-align: center; pointer-events: none;
}
.flower-toast[hidden] { display: none; }
.flower-toast b { color: var(--gold); font-size: 21px; }
.flower-toast span { color: var(--muted); font-size: 11px; }
.carry-choice { margin: 10px 0 14px; padding: 12px; border: 1px solid rgba(255, 188, 61, .35); border-radius: 12px; }
.carry-choice .contract-button.selected { border-color: var(--gold); background: rgba(255, 188, 61, .12); }

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

@media (min-width: 768px) {
  .app-shell { grid-template-columns: minmax(360px, 480px) minmax(230px, 320px); align-items: start; padding: 20px; }
  .panel-right { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
}

@media (min-width: 1180px) {
  .app-shell { grid-template-columns: minmax(230px, 300px) minmax(360px, 480px) minmax(230px, 320px); }
  .panel-left { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .gauge-fill { transition: none; }
}