@import url('../global.css');

:root {
  --title-color: var(--color-sorry);
  /* Printed cardboard board-game stock: warm cream lanes, a worn kraft frame. */
  --sorry-bg: #e8dcb8;
  --sorry-track: #d9c89a;
  --sorry-border: #6b4226;
  --sorry-frame: #c9a86a;
  --sorry-frame-dark: #8a6a3c;
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */

.sorry-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm);
  box-sizing: border-box;
}

.sorry-board[data-visual-theme='arcade'] {
  --sorry-bg: #2a1730;
  --sorry-track: #3d2049;
  --sorry-border: #ff4fd8;
  --sorry-frame: #7d2f8f;
  --sorry-frame-dark: #4a1a57;
}

.sorry-board[data-visual-theme='midnight'] {
  --sorry-bg: #14202e;
  --sorry-track: #1c2f42;
  --sorry-border: #38bdf8;
  --sorry-frame: #24425c;
  --sorry-frame-dark: #142433;
}

.sorry-board[data-visual-theme='daylight'] {
  --sorry-bg: #ece3fb;
  --sorry-track: #ddccf5;
  --sorry-border: #7c3aed;
  --sorry-frame: #a985e8;
  --sorry-frame-dark: #6b3ec7;
}

.sorry-board[data-visual-theme='amber'] {
  --sorry-bg: #3a2607;
  --sorry-track: #4d330c;
  --sorry-border: #fbbf24;
  --sorry-frame: #8a5a1a;
  --sorry-frame-dark: #4a2f0c;
}

.sorry-board {
  width: 100%;
  max-width: min(480px, 90vmin);
  aspect-ratio: 1;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.12), transparent 60%),
    repeating-linear-gradient(115deg, rgba(107, 66, 38, 0.05) 0 2px, transparent 2px 6px),
    var(--sorry-bg);
  border: 6px solid var(--sorry-frame);
  outline: 1px solid var(--sorry-frame-dark);
  outline-offset: -7px;
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 24px rgba(107, 66, 38, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  position: relative;
}

.sorry-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Card area ───────────────────────────────────────────────────────────────── */

.sorry-card-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

.sorry-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 72px;
  padding: 4px 10px;
  border: 2px solid var(--sorry-frame-dark);
  border-radius: 8px;
  background: linear-gradient(160deg, #fbf4de 0%, #eee0bb 100%);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sorry-border);
  transition:
    transform 0.15s,
    background 0.15s;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    inset 0 0 0 3px #fbf4de;
  position: relative;
}

.sorry-card--empty {
  color: var(--ink-muted);
  opacity: 0.6;
  background: var(--sorry-track);
}

.sorry-card--sorry {
  background: linear-gradient(160deg, var(--color-sorry) 0%, var(--sorry-border) 100%);
  color: #fbf4de;
  border-color: var(--sorry-border);
  transform: scale(1.08);
}

/* Extra-draw badge */
.sorry-card[data-extra='1']::after {
  content: '+1';
  position: absolute;
  top: -8px;
  right: -8px;
  background: #22c55e;
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 99px;
}

/* ── Pawn interactions ───────────────────────────────────────────────────────── */

.sorry-pawn {
  cursor: default;
  transition: r 0.1s;
}

.sorry-pawn--active {
  cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

.sorry-hint {
  cursor: pointer;
  transition: opacity 0.15s;
}

.sorry-hint:hover {
  opacity: 1 !important;
  stroke-width: 3 !important;
}

.sorry-exchange-target {
  cursor: pointer;
  animation: sorry-pulse 1s ease-in-out infinite;
}

@keyframes sorry-pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}