/* ============================================================
   사천성 전용 스타일 (전통 상아)
   - 패가 주인공이라 판은 라이트/다크와 무관하게 진녹색 나사천으로
     고정한다(도구별 디자인 자율). 그 위에서 크림색 패가 또렷하다.
   - 패는 SVG 한 장으로 그린다. 크기는 --tw/--th를 app.js가 화면에
     맞춰 계산해 넣는다.
   - 길은 판 바깥으로 한 칸 나갈 수 있어, 겹선 그림판을 사방 한 칸
     넓게 잡고 판 둘레에 그만큼 여백을 둔다.
   ============================================================ */

:root {
  --sc-felt: #2f5d4a;         /* 나사천(판 바탕) */
  --sc-felt-edge: #24493a;
  --sc-tile: #f4ead6;         /* 상아색 패 */
  --sc-tile-top: #fffaf0;     /* 패 윗면 하이라이트 */
  --sc-tile-lip: #d9c9a8;     /* 패 아랫단 */
  --sc-tile-edge: #c9b795;
  --sc-accent: #b23025;       /* 이 도구 포인트(주묵 계열) */
}

/* ---- 도입부 ---- */
.tool-intro { padding: clamp(30px, 5vw, 56px) 0 clamp(18px, 3vw, 30px); }
.tool-intro h1 { margin: 0 0 var(--space-4); }
.tool-intro .accent { color: var(--sc-accent); }
.tool-intro .lead {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--color-text-sub);
  max-width: 56ch;
  margin: 0;
}
.tool-intro .lead strong { color: var(--color-text); }
.tool-intro .lead-note {
  margin: var(--space-3) 0 0;
  font-size: .88rem;
  color: var(--color-text-sub);
}

/* ---- 설정 ---- */
.sc-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.sc-field { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.sc-lab {
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-text-sub);
  min-width: 44px;
}
.sc-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sc-chip {
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  padding: 9px 16px;
  border-radius: 3px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-sub);
  transition: background .15s, color .15s, border-color .15s;
}
.sc-chip:hover { border-color: var(--sc-accent); color: var(--color-text); }
.sc-chip[aria-pressed="true"] {
  background: var(--sc-accent);
  border-color: var(--sc-accent);
  color: #fff;
  font-weight: 700;
}
.sc-toggle {
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 3px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-sub);
}
.sc-toggle .sc-dot {
  width: 12px; height: 12px;
  border-radius: 2px;
  border: 1px solid var(--color-border);
  background: transparent;
}
.sc-toggle[aria-pressed="true"] { color: var(--color-text); border-color: var(--sc-accent); }
.sc-toggle[aria-pressed="true"] .sc-dot { background: var(--sc-accent); border-color: var(--sc-accent); }

/* ---- 무대 ---- */
.sc-stage { margin-bottom: var(--space-6); }
.sc-status {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.sc-stat {
  font-size: .9rem;
  color: var(--color-text-sub);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.sc-stat b {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.sc-board-wrap {
  position: relative;
  /* 판 크기가 화면에 맞춰 정해지므로, 나사천도 딱 그만큼만 두른다 */
  width: fit-content;
  margin: 0 auto;
  padding: var(--pady, 24px) var(--padx, 20px);
  background: var(--sc-felt);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 2px, transparent 2px 4px);
  border: 1px solid var(--sc-felt-edge);
  border-radius: 6px;
  box-shadow: inset 0 2px 14px rgba(0,0,0,.28);
  overflow: hidden;
}
.sc-board { position: relative; }

/* 패 */
.sc-tile {
  position: absolute;
  width: var(--tw);
  height: var(--th);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  line-height: 0;
  transition: transform .12s;
}
.sc-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8%;
  background: var(--sc-tile);
  border: 1px solid var(--sc-tile-edge);
  box-shadow:
    inset 0 0 0 1.5px var(--sc-tile-top),
    inset 0 -8% 0 0 var(--sc-tile-lip),
    0 3px 4px rgba(20,16,10,.34);
  box-sizing: border-box;
}
.sc-tile:hover { transform: translateY(-2px); }
.sc-tile:focus-visible { outline: 3px solid #fff; outline-offset: 1px; z-index: 3; }

.sc-tile.is-picked { transform: translateY(-3px); z-index: 2; }
.sc-tile.is-picked .sc-face {
  box-shadow:
    inset 0 0 0 2.5px var(--sc-accent),
    inset 0 -8% 0 0 var(--sc-tile-lip),
    0 5px 8px rgba(20,16,10,.42);
}
.sc-tile.is-hint .sc-face {
  animation: sc-hint 1s ease-in-out infinite;
}
@keyframes sc-hint {
  0%, 100% { box-shadow: inset 0 0 0 1.5px var(--sc-tile-top), inset 0 -8% 0 0 var(--sc-tile-lip), 0 3px 4px rgba(20,16,10,.34); }
  50%      { box-shadow: inset 0 0 0 3px #f0c14b, inset 0 -8% 0 0 var(--sc-tile-lip), 0 3px 10px rgba(240,193,75,.6); }
}
.sc-tile.is-bad { animation: sc-shake .3s; }
@keyframes sc-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.sc-tile.is-gone {
  animation: sc-gone .26s ease-in forwards;
  pointer-events: none;
}
@keyframes sc-gone {
  to { transform: scale(.55); opacity: 0; }
}

/* 이어진 길 */
.sc-line-svg {
  position: absolute;
  left: calc(-1 * var(--tw));
  top: calc(-1 * var(--th));
  width: calc(100% + 2 * var(--tw));
  height: calc(100% + 2 * var(--th));
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}
.sc-line {
  fill: none;
  stroke: #f0c14b;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* viewBox 단위가 가로세로로 다르게 늘어나므로 선 굵기는 화면 기준으로 고정 */
  vector-effect: non-scaling-stroke;
  stroke-width: 4px;
  animation: sc-fade .42s ease-out forwards;
}
@keyframes sc-fade {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* 완주 알림 */
.sc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 40, 32, .72);
  z-index: 6;
}
.sc-overlay-panel {
  background: var(--sc-tile);
  border: 1px solid var(--sc-tile-edge);
  border-radius: 4px;
  padding: var(--space-5) var(--space-6);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  max-width: 90%;
}
.sc-ov-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: #23201c;
}
.sc-ov-time { margin: 0 0 4px; color: #4a4438; }
.sc-ov-time b { font-size: 1.3rem; color: var(--sc-accent); }
.sc-ov-line { margin: 0 0 var(--space-4); font-size: .9rem; color: #6b6257; }
.sc-btn-big {
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  padding: 12px 28px;
  border-radius: 3px;
  border: 0;
  background: var(--sc-accent);
  color: #fff;
}

/* 액션 */
.sc-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-4);
}
.sc-btn {
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  padding: 11px 20px;
  border-radius: 3px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color .15s, color .15s;
}
.sc-btn:hover:not(:disabled) { border-color: var(--sc-accent); color: var(--sc-accent); }
.sc-btn:disabled { opacity: .45; cursor: default; }
.sc-btn.is-urge {
  border-color: var(--sc-accent);
  background: var(--sc-accent);
  color: #fff;
  font-weight: 700;
}
.sc-msg {
  text-align: center;
  margin: var(--space-3) 0 0;
  min-height: 1.5em;
  font-size: .95rem;
  color: var(--color-text-sub);
}

/* 출처 */
.sc-credit {
  margin: var(--space-3) 0 0;
  font-size: .82rem;
  color: var(--color-text-sub);
  text-align: center;
}

@media (max-width: 560px) {
  .sc-lab { min-width: 0; }
  .sc-chip { padding: 8px 12px; font-size: .95rem; }
  .sc-btn { padding: 10px 14px; font-size: .95rem; }
  .sc-status { gap: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-tile, .sc-tile.is-gone, .sc-tile.is-hint .sc-face, .sc-line { animation: none; transition: none; }
  .sc-tile.is-gone { opacity: 0; }
}