/*
  word-games.css — Shared visual language for MGP Word category.
  Aesthetic: vintage library / Scrabble parlor / dictionary.
  Warm paper, leather bindings, wooden tiles, typewriter keys,
  red-stamp accents, chalkboard hints.
*/

:root {
  --wg-paper:        #FAF5E6;
  --wg-paper-warm:   #F0E5CC;
  --wg-paper-dark:   #E6D9B8;
  --wg-ink:          #1A1614;
  --wg-ink-faded:    #3D3026;
  --wg-ink-light:    #6B5D4E;

  --wg-leather:      #4A2A1C;
  --wg-leather-lt:   #6B3F2A;
  --wg-leather-dk:   #2D1810;

  --wg-brass:        #A67B3A;
  --wg-brass-bright: #D4A95E;
  --wg-brass-deep:   #6B4D1E;

  --wg-red:          #8B1A1A;
  --wg-red-light:    #B91C1C;

  --wg-green:        #2D5A3D;
  --wg-green-light:  #4A7A5D;
  --wg-green-bright: #6B9A7D;

  --wg-tile-wood:    #E8C98B;
  --wg-tile-wood-dk: #B8975C;
  --wg-tile-wood-hl: #F5DDA8;

  --wg-shadow-sm: 0 1px 3px rgba(26,22,20,0.18);
  --wg-shadow-md: 0 4px 12px rgba(26,22,20,0.25), 0 1px 3px rgba(26,22,20,0.15);
  --wg-shadow-lg: 0 10px 28px rgba(26,22,20,0.35), 0 3px 8px rgba(26,22,20,0.18);

  --wg-serif: 'Libre Baskerville', 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ---------- Page-level paper background ---------- */
body.wg-bg {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(166,123,58,0.10) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 90%, rgba(139,26,26,0.06) 0%, transparent 40%),
    linear-gradient(180deg, #EDE3C8 0%, #DCCFAA 100%);
  min-height: 100vh;
}

/* ---------- Main page frame (book cover feel) ---------- */
.wg-frame {
  background:
    /* Paper grain: very subtle noise-like gradient layers */
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(166,123,58,0.08) 0%, transparent 50%),
    linear-gradient(180deg, var(--wg-paper) 0%, var(--wg-paper-warm) 100%);
  border: 1px solid rgba(74,42,28,0.25);
  border-radius: 12px;
  padding: 22px;
  position: relative;
  box-shadow:
    /* Outer leather binding effect */
    0 0 0 4px var(--wg-leather),
    0 0 0 6px var(--wg-brass-deep),
    0 0 0 7px var(--wg-leather-dk),
    0 18px 40px rgba(26,22,20,0.35),
    inset 0 0 60px rgba(166,123,58,0.1);
  isolation: isolate;
  color: var(--wg-ink);
}
.wg-frame::before {
  /* Subtle paper-grain overlay using crosshatch gradient */
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(74,42,28,0.015) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(74,42,28,0.015) 3px 4px);
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
}
.wg-frame > * { position: relative; z-index: 1; }

/* ---------- Title (serif + ornamental divider) ---------- */
.wg-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--wg-leather);
  position: relative;
}
.wg-title-row::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 0; right: 0;
  border-top: 1px solid var(--wg-brass);
}
.wg-title {
  font-family: var(--wg-serif);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 28px);
  margin: 0;
  color: var(--wg-ink);
  letter-spacing: 0.5px;
}
.wg-title em {
  color: var(--wg-red);
  font-style: italic;
  font-weight: 400;
}
.wg-subtitle {
  font-family: var(--wg-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--wg-ink-light);
  margin: 2px 0 0;
}

/* ---------- Status strip (kraft paper) ---------- */
.wg-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--wg-paper-warm) 0%, var(--wg-paper-dark) 100%);
  border: 1px solid rgba(74,42,28,0.25);
  border-radius: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(26,22,20,0.08);
}
.wg-status span {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--wg-ink-faded);
}
.wg-status .wg-stat-val {
  color: var(--wg-red);
  font-weight: 800;
}
.wg-status .wg-stat-sep {
  color: var(--wg-brass);
  opacity: 0.5;
}

/* ---------- Scrabble-style wooden letter tile ---------- */
.wg-tile {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--wg-tile-wood-hl) 0%, var(--wg-tile-wood) 45%, var(--wg-tile-wood-dk) 100%);
  color: var(--wg-ink);
  font-family: var(--wg-serif);
  font-weight: 700;
  font-size: 26px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 0 rgba(74,42,28,0.35),
    0 6px 12px rgba(26,22,20,0.25),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -3px 4px rgba(74,42,28,0.18);
  user-select: none;
}
.wg-tile::before {
  /* Subtle wood grain */
  content: '';
  position: absolute; inset: 3px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(92deg,
      transparent 0 8px,
      rgba(74,42,28,0.05) 8px 9px);
  pointer-events: none;
}
.wg-tile .wg-tile-val {
  position: absolute;
  bottom: 4px; right: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--wg-ink-faded);
}
/* Tile states for Wordle-like games */
.wg-tile.wg-t-correct {
  background: linear-gradient(135deg, #4A7A5D 0%, var(--wg-green) 100%);
  color: #FAF5E6;
  box-shadow: 0 4px 0 rgba(26,36,28,0.45), 0 6px 14px rgba(45,90,61,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
}
.wg-tile.wg-t-correct .wg-tile-val { color: rgba(250,245,230,0.8); }
.wg-tile.wg-t-present {
  background: linear-gradient(135deg, #D4A95E 0%, var(--wg-brass) 100%);
  color: #FAF5E6;
  box-shadow: 0 4px 0 rgba(74,53,18,0.45), 0 6px 14px rgba(166,123,58,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
}
.wg-tile.wg-t-present .wg-tile-val { color: rgba(250,245,230,0.8); }
.wg-tile.wg-t-absent {
  background: linear-gradient(135deg, #6B5D4E 0%, #3D3026 100%);
  color: #BEB097;
  box-shadow: 0 4px 0 rgba(26,22,20,0.45), 0 6px 14px rgba(26,22,20,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}
.wg-tile.wg-t-absent .wg-tile-val { color: rgba(190,176,151,0.6); }
.wg-tile.wg-t-empty {
  background: linear-gradient(135deg, var(--wg-paper) 0%, var(--wg-paper-warm) 100%);
  border: 2px dashed rgba(74,42,28,0.25);
  box-shadow: inset 0 1px 2px rgba(26,22,20,0.06);
}
.wg-tile.wg-t-filled {
  background: linear-gradient(135deg, var(--wg-tile-wood-hl) 0%, var(--wg-tile-wood) 100%);
  border: 2px solid var(--wg-brass);
}

/* Mini tile size */
.wg-tile.wg-t-sm { width: 38px; height: 38px; font-size: 18px; }
.wg-tile.wg-t-sm .wg-tile-val { font-size: 7px; bottom: 2px; right: 3px; }
.wg-tile.wg-t-lg { width: 64px; height: 64px; font-size: 30px; }

/* ---------- Typewriter keyboard keys ---------- */
.wg-key {
  min-width: 32px;
  height: 40px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--wg-ink-faded);
  background:
    linear-gradient(180deg, #FAF5E6 0%, #E6D9B8 100%);
  color: var(--wg-ink);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.08s;
  box-shadow:
    0 3px 0 var(--wg-leather-lt),
    0 4px 6px rgba(26,22,20,0.2),
    inset 0 1px 0 rgba(255,255,255,0.6);
  text-transform: uppercase;
  user-select: none;
}
.wg-key:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 4px 0 var(--wg-leather-lt), 0 6px 10px rgba(26,22,20,0.22), inset 0 1px 0 rgba(255,255,255,0.6);
}
.wg-key:active:not(:disabled),
.wg-key.wg-pressed {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--wg-leather-lt), 0 1px 2px rgba(26,22,20,0.15), inset 0 1px 0 rgba(255,255,255,0.4);
}
.wg-key:disabled { opacity: 0.45; cursor: not-allowed; }
.wg-key.wg-k-wide { min-width: 56px; font-size: 11px; }

.wg-key.wg-k-correct {
  background: linear-gradient(180deg, #6B9A7D 0%, var(--wg-green) 100%);
  color: #FAF5E6;
  border-color: var(--wg-green-bright);
  box-shadow: 0 3px 0 rgba(26,36,28,0.45), 0 4px 8px rgba(45,90,61,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}
.wg-key.wg-k-present {
  background: linear-gradient(180deg, var(--wg-brass-bright) 0%, var(--wg-brass) 100%);
  color: #FAF5E6;
  border-color: var(--wg-brass-bright);
  box-shadow: 0 3px 0 rgba(74,53,18,0.45), 0 4px 8px rgba(166,123,58,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}
.wg-key.wg-k-absent {
  background: linear-gradient(180deg, #6B5D4E 0%, #3D3026 100%);
  color: #BEB097;
  border-color: #3D3026;
  box-shadow: 0 3px 0 rgba(26,22,20,0.45), 0 4px 8px rgba(26,22,20,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ---------- Action buttons (ink-stamp style) ---------- */
.wg-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: 2px solid var(--wg-leather);
  background: linear-gradient(180deg, var(--wg-paper) 0%, var(--wg-paper-warm) 100%);
  color: var(--wg-ink);
  font-family: var(--wg-serif);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.1s, filter 0.1s, box-shadow 0.1s;
  box-shadow: 0 3px 0 var(--wg-leather), 0 5px 10px rgba(26,22,20,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.wg-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.04); }
.wg-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 var(--wg-leather), 0 2px 4px rgba(26,22,20,0.15), inset 0 1px 0 rgba(255,255,255,0.4); }
.wg-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }

.wg-btn-primary {
  background: linear-gradient(180deg, var(--wg-red-light) 0%, var(--wg-red) 100%);
  color: #FAF5E6;
  border-color: #5A1010;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  box-shadow: 0 3px 0 #5A1010, 0 5px 12px rgba(139,26,26,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.wg-btn-primary:active:not(:disabled) {
  box-shadow: 0 1px 0 #5A1010, 0 2px 4px rgba(139,26,26,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}
.wg-btn-secondary {
  background: linear-gradient(180deg, #E6D9B8 0%, #C8B78E 100%);
  border-color: var(--wg-leather);
}
.wg-btn-accent {
  background: linear-gradient(180deg, var(--wg-green-bright) 0%, var(--wg-green) 100%);
  color: #FAF5E6;
  border-color: #1F4128;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  box-shadow: 0 3px 0 #1F4128, 0 5px 12px rgba(45,90,61,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ---------- Message / banner (dictionary entry style) ---------- */
.wg-message {
  text-align: center;
  font-family: var(--wg-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--wg-ink-faded);
  min-height: 26px;
  margin: 8px 0;
}
.wg-banner {
  padding: 10px 16px;
  border-radius: 8px;
  margin: 10px auto;
  max-width: 460px;
  text-align: center;
  font-family: var(--wg-serif);
  font-weight: 700;
  font-size: 16px;
  border: 2px solid;
  box-shadow: var(--wg-shadow-md);
}
.wg-banner.wg-b-win {
  background: linear-gradient(180deg, #DDF4E2 0%, #BEE6C7 100%);
  color: var(--wg-green);
  border-color: var(--wg-green);
}
.wg-banner.wg-b-lose {
  background: linear-gradient(180deg, #F5D8D8 0%, #E8B5B5 100%);
  color: var(--wg-red);
  border-color: var(--wg-red);
}
.wg-banner.wg-b-info {
  background: linear-gradient(180deg, #F5E8C8 0%, #E8D69A 100%);
  color: var(--wg-leather);
  border-color: var(--wg-brass);
}

/* ---------- Hint / chalkboard panel (used for category, clue, etc.) ---------- */
.wg-chalkboard {
  background:
    radial-gradient(ellipse at center, #3A6B4D 0%, #1F4128 100%);
  border: 8px solid var(--wg-leather);
  border-radius: 6px;
  box-shadow:
    inset 0 0 24px rgba(0,0,0,0.5),
    0 0 0 2px var(--wg-brass-deep),
    0 6px 20px rgba(26,22,20,0.3);
  padding: 16px 20px;
  color: #F0EEE4;
  font-family: 'Caveat', 'Kalam', var(--wg-serif);
  text-align: center;
}
.wg-chalkboard-label {
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--wg-brass-bright);
  margin-bottom: 4px;
  font-family: 'DM Mono', monospace;
}
.wg-chalkboard-text {
  font-size: 18px;
  font-weight: 700;
  color: #FAF5E6;
  letter-spacing: 1px;
}

/* ---------- Game-over / stamped "The End" panel ---------- */
.wg-gameover {
  background:
    radial-gradient(ellipse at center, var(--wg-paper) 0%, var(--wg-paper-dark) 100%);
  border: 2px solid var(--wg-leather);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 0 0 4px var(--wg-paper), 0 0 0 6px var(--wg-brass-deep), var(--wg-shadow-lg);
  position: relative;
}
.wg-gameover::before {
  /* Rubber-stamp effect */
  content: attr(data-stamp);
  position: absolute;
  top: 10px; right: 14px;
  font-family: var(--wg-serif);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--wg-red);
  opacity: 0.6;
  border: 2px solid var(--wg-red);
  padding: 2px 8px;
  border-radius: 4px;
  transform: rotate(-8deg);
  text-transform: uppercase;
  pointer-events: none;
}
.wg-gameover-title {
  font-family: var(--wg-serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--wg-red);
  margin-bottom: 8px;
}
.wg-gameover-body {
  font-family: var(--wg-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--wg-ink-faded);
  margin-bottom: 16px;
}

/* ---------- Small utility ---------- */
.wg-divider {
  border: 0;
  border-top: 1px solid var(--wg-brass);
  margin: 16px 0;
  position: relative;
}
.wg-divider::after {
  content: '❦';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--wg-paper);
  padding: 0 10px;
  color: var(--wg-brass);
  font-size: 14px;
}

@media (max-width: 640px) {
  .wg-frame { padding: 16px 14px; }
  .wg-tile { width: 44px; height: 44px; font-size: 20px; }
  .wg-tile.wg-t-lg { width: 54px; height: 54px; font-size: 24px; }
  .wg-tile.wg-t-sm { width: 32px; height: 32px; font-size: 15px; }
  .wg-key { min-width: 28px; height: 36px; padding: 0 7px; font-size: 12px; }
  .wg-key.wg-k-wide { min-width: 46px; font-size: 10px; }
  .wg-title { font-size: 20px; }
  .wg-gameover { padding: 18px 14px; }
}

@media (min-width: 900px) {
  .wg-tile { width: 62px; height: 62px; font-size: 28px; }
  .wg-tile.wg-t-lg { width: 78px; height: 78px; font-size: 36px; }
}