/* game.css — Go Stop specific styles (loaded after main.css) */

/* ── Hwatu card dimensions ─────────────────────────────────────────────────── */
:root {
  --card-w: 40px;
  --card-h: 58px;
  /* Tiny: captured card grid */
  --card-w-xs: 22px;
  --card-h-xs: 32px;
  /* Small: AI hand stub */
  --card-w-sm: 30px;
  --card-h-sm: 44px;
  /* Player hand — readable but compact */
  --card-w-lg: 48px;
  --card-h-lg: 70px;
  --card-radius: 5px;
  --card-back-bg: linear-gradient(145deg, #8b1a1a 0%, #5a0d0d 100%);
  --field-bg: rgba(0, 80, 30, 0.25);
}

/* ── Screen base ───────────────────────────────────────────────────────────── */
.gs-screen {
  display: flex;
  flex-direction: column;
  /* Break out of body's padding for true full-bleed */
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.gs-screen[hidden] { display: none; }

/* ── Start screen ──────────────────────────────────────────────────────────── */
.gs-screen--start {
  align-items: center;
  justify-content: flex-start;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(56, 189, 248, 0.18), transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 50%, rgba(14, 165, 233, 0.08), transparent 45%),
    var(--bg-deep);
}

.gs-start-inner {
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding:
    max(2rem, env(safe-area-inset-top))
    max(1.5rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1.5rem, env(safe-area-inset-left));
}

.gs-start-hero {
  text-align: center;
  margin-top: 0.5rem;
}

.gs-start-emoji {
  font-size: 3.5rem;
  margin: 0 0 0.4rem;
  line-height: 1;
}

.gs-start-title {
  font-size: clamp(2rem, 9vw, 2.8rem);
  margin: 0 0 0.3rem;
  letter-spacing: 0.04em;
}

.gs-start-sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Difficulty buttons */
.gs-diff-group {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.gs-diff-label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.gs-btn--diff {
  width: 100%;
}

/* ── Shared button style ───────────────────────────────────────────────────── */
.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 0 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, transform 0.1s;
}

.gs-btn:active { transform: scale(0.97); background: var(--bg-card-hover); }

.gs-btn--primary {
  background: var(--accent-hot);
  border-color: var(--accent-hot);
  color: #061018;
}

.gs-btn--primary:active { background: var(--accent); }

/* ── Rules accordion ───────────────────────────────────────────────────────── */
.gs-rules-wrap {
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  overflow: hidden;
}

.gs-rules-toggle {
  width: 100%;
  background: var(--bg-card);
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.8rem 1rem;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gs-rules-body {
  padding: 0.75rem 1rem 1rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.gs-rules-body h3 {
  color: var(--text);
  font-size: 0.88rem;
  margin: 0.85rem 0 0.3rem;
}

.gs-rules-body ol,
.gs-rules-body ul {
  margin: 0 0 0.5rem;
  padding-left: 1.3rem;
}

.gs-rules-body li + li { margin-top: 0.25rem; }

.gs-rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 0.3rem;
}

.gs-rules-table th,
.gs-rules-table td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
}

.gs-rules-table th { color: var(--accent); font-weight: 700; }

/* ── Game screen layout ────────────────────────────────────────────────────── */
.gs-screen--game {
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg-deep);
}

/* ── Topbar ─────────────────────────────────────────────────────────────────── */
.gs-topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding:
    max(0.55rem, env(safe-area-inset-top))
    max(0.75rem, env(safe-area-inset-right))
    0.45rem
    max(0.75rem, env(safe-area-inset-left));
  flex-shrink: 0;
  background: rgba(6,16,24,0.6);
  border-bottom: 1px solid var(--stroke);
}

.gs-topbar-back {
  font-size: 0.82rem;
  white-space: nowrap;
}

.gs-turn-label {
  flex: 1;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: color 0.2s;
}

.gs-turn-label[data-who="player"] { color: var(--accent); }
.gs-turn-label[data-who="ai"]     { color: #f97316; }

/* Scores — right side of topbar */
.gs-score-pair {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--text-muted);
  flex-shrink: 0;
}

.gs-score-sep { opacity: 0.4; }

.gs-score-val {
  color: var(--accent);
  font-size: 0.88rem;
}

.gs-score-val--ai { color: #f97316; }

/* ── AI panel: hand stub + captures in one horizontal row ──────────────────── */
.gs-ai-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px max(0.75rem, env(safe-area-inset-right)) 5px max(0.75rem, env(safe-area-inset-left));
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--stroke);
  flex-shrink: 0;
  overflow: hidden;
  min-height: calc(var(--card-h-xs) + 14px);
}

/* Single back-card stub + count badge */
.gs-ai-hand-mini {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.gs-ai-count {
  position: absolute;
  bottom: -4px;
  right: -6px;
  background: #f97316;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  line-height: 1;
}

/* Vertical divider between hand stub and captures */
.gs-ai-panel::after {
  content: '';
  width: 1px;
  align-self: stretch;
  background: var(--stroke);
  flex-shrink: 0;
  margin: 2px 0;
}

/* ── Shared cap-zone (used in both AI and player panels) ───────────────────── */
/* ── Shared cap-zone (AI strip: compact single row) ────────────────────────── */
.gs-cap-zone {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  overflow-x: auto;
  align-items: center;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  padding: 2px 0;
}

.gs-cap-zone::-webkit-scrollbar { display: none; }

/* Player zone: one row per type, only non-empty rows rendered */
.gs-cap-zone--player {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: visible;
  flex: unset;
  padding: 3px max(0.75rem, env(safe-area-inset-right)) 3px max(0.75rem, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* One row: [type label] [scrollable cards] */
.gs-cap-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  overflow: hidden;
}

.gs-cap-label {
  font-size: 0.6rem;
  font-weight: 800;
  font-family: var(--font);
  width: 22px;
  flex-shrink: 0;
  text-align: right;
  color: var(--text-muted);
}

.gs-cap-row--gwang .gs-cap-label { color: #fbbf24; }
.gs-cap-row--yul   .gs-cap-label { color: #86efac; }
.gs-cap-row--dan   .gs-cap-label { color: #f9a8d4; }
.gs-cap-row--pi    .gs-cap-label { color: #94a3b8; }

.gs-cap-empty {
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.5;
  white-space: nowrap;
  grid-column: 1 / -1;
}

/* Card groups within a cell — scrollable horizontally */
.gs-cap-group {
  display: flex;
  gap: 2px;
  padding: 1px 2px;
  border-radius: 3px;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
}

.gs-cap-group::-webkit-scrollbar { display: none; }

.gs-cap-group--gwang { background: rgba(251, 191, 36, 0.12); }
.gs-cap-group--yul   { background: rgba(134, 239, 172, 0.10); }
.gs-cap-group--dan   { background: rgba(249, 168, 212, 0.10); }
.gs-cap-group--pi    { background: rgba(148, 163, 184, 0.08); }

/* Tiny card size in capture display */
.gs-cap-zone .gs-card,
.gs-cap-row  .gs-card {
  width: var(--card-w-xs);
  height: var(--card-h-xs);
  flex-shrink: 0;
}

/* ── Field ─────────────────────────────────────────────────────────────────── */
.gs-zone--field {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: rgba(0, 100, 40, 0.35);
  border-top: 1px solid rgba(0,180,80,0.2);
  border-bottom: 1px solid rgba(0,180,80,0.2);
  padding: 6px max(0.75rem, env(safe-area-inset-right)) 6px max(0.75rem, env(safe-area-inset-left));
  overflow: hidden;
  min-height: 130px;
}

.gs-field {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  height: 100%;
  scrollbar-width: none;
}

.gs-field::-webkit-scrollbar { display: none; }

/* Month group: cards side-by-side, fully visible */
.gs-field-group {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
}

/* ── Draw pile ─────────────────────────────────────────────────────────────── */
.gs-draw-pile {
  flex-shrink: 0;
  position: relative;
}

.gs-draw-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: var(--accent-hot);
  color: #061018;
  font-size: 0.65rem;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.gs-draw-empty {
  width: var(--card-w);
  height: var(--card-h);
  border: 1px dashed var(--stroke);
  border-radius: var(--card-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* ── Player panel: captures + hand ────────────────────────────────────────── */
.gs-player-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--stroke);
  background: rgba(255,255,255,0.03);
  flex-shrink: 0;
}

/* Hand zones ─────────────────────────────────────────────────────────────── */
.gs-hand {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gs-hand::-webkit-scrollbar { display: none; }

.gs-hand--player {
  position: relative;
  overflow: visible;
  padding: 8px max(0.75rem, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  height: calc(var(--card-h-lg) + 18px);
  flex-shrink: 0;
}

/* ── Action bar ────────────────────────────────────────────────────────────── */
.gs-action-bar {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  padding: 0.45rem max(1rem, env(safe-area-inset-right)) max(0.6rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgba(6,16,24,0.95);
  border-top: 1px solid var(--stroke);
  flex-shrink: 0;
}
/* ── Card base ─────────────────────────────────────────────────────────────── */
.gs-card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-radius);
  border: 1px solid rgba(255,255,255,0.15);
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 0.12s, box-shadow 0.12s, outline 0.1s;
  position: relative;
  cursor: default;
}

.gs-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 쌍피 ×2 marker */
.gs-card--back {
  background: var(--card-back-bg);
  border-color: rgba(255,180,180,0.2);
}

/* Small variant (AI hand) */
.gs-card--small {
  width: var(--card-w-sm);
  height: var(--card-h-sm);
}

/* Selected (player hand) */
.gs-card--selected {
  transform: translateY(-10px);
  outline: 2px solid var(--accent-hot);
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.5);
  z-index: 999 !important;
}

/* Highlighted (field choice) */
.gs-card--highlight {
  outline: 2px solid #fbbf24;
  cursor: pointer;
  animation: gs-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes gs-pulse {
  from { box-shadow: 0 0 6px rgba(251,191,36,0.4); }
  to   { box-shadow: 0 0 16px rgba(251,191,36,0.9); }
}

/* Capture flash */
.gs-card--capture {
  outline: 2px solid #4ade80;
  animation: gs-capture-flash 0.5s ease-out;
}

@keyframes gs-capture-flash {
  0%   { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Flip-in animation for drawn card */
.gs-card--flip-in {
  animation: gs-flip-in 0.35s ease-out;
}

@keyframes gs-flip-in {
  from { opacity: 0; transform: rotateY(90deg) scale(0.8); }
  to   { opacity: 1; transform: rotateY(0deg) scale(1); }
}

/* Player hand cards are bigger */
.gs-hand--player .gs-card {
  width: var(--card-w-lg);
  height: var(--card-h-lg);
  cursor: pointer;
}

.gs-hand--player .gs-card:active {
  transform: translateY(-4px);
}

.gs-hand--player .gs-card--selected:active {
  transform: translateY(-10px);
}

/* 쌍피tint */
.gs-card--ssangpi::after {
  content: '×2';
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 0.55rem;
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 0 2px;
  border-radius: 3px;
  pointer-events: none;
}

/* 광 gold border */
.gs-card--gwang {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.25), 0 2px 6px rgba(0,0,0,0.4);
}


/* ── Dialog overlay ────────────────────────────────────────────────────────── */
.gs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 16, 24, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 100;
}

.gs-overlay[hidden] { display: none; }

.gs-dialog {
  background: #0d1f2d;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 1.5rem;
  width: 100%;
  max-width: 22rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}

.gs-dialog-title {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
}

.gs-dialog-body {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.1rem;
  line-height: 1.5;
}

.gs-dialog-buttons {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.gs-dialog-buttons .gs-btn {
  flex: 1;
  min-width: 0;
}

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.gs-toast {
  position: fixed;
  bottom: max(6rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: rgba(13, 31, 45, 0.95);
  border: 1px solid var(--stroke);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  z-index: 200;
}

.gs-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Result screen ─────────────────────────────────────────────────────────── */
.gs-screen--result {
  align-items: center;
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(56, 189, 248, 0.18), transparent 55%),
    var(--bg-deep);
}

.gs-result-inner {
  width: 100%;
  max-width: 28rem;
  padding:
    max(2rem, env(safe-area-inset-top))
    max(1.5rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1.5rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.gs-result-winner {
  font-size: clamp(1.4rem, 6vw, 2rem);
  margin: 0;
  text-align: center;
}

.gs-result-winner[data-winner="player"] { color: var(--accent); }
.gs-result-winner[data-winner="ai"]     { color: #f97316; }

.gs-result-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.gs-result-col {
  background: var(--bg-card);
  border: 1px solid var(--stroke);
  border-radius: 0.75rem;
  padding: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.gs-result-col h3 {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--text);
}

.gs-result-pak {
  background: var(--bg-card);
  border: 1px solid var(--stroke);
  border-radius: 0.75rem;
  padding: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.gs-result-pak[hidden] { display: none; }

.gs-result-pak h3 {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--text);
}

.gs-result-final {
  color: var(--accent-hot);
  font-weight: 800;
  font-size: 1rem;
  margin-top: 0.35rem;
}

.gs-result-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gs-credits {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  line-height: 1.6;
}

.gs-credits a { color: var(--accent); }