/* ═══════════════════════════════════════════════
   Book Wyrm Classic — Mobile-First Styles
   Column-stack board: 7 cols, heights [7,8,7,8,7,8,7]
   Tall cols (odd) shift down ½ tile for hex stagger
   ═══════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: url('../assets/backgrounds/library-bg.webp') center center / cover no-repeat fixed;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #f4f0ff;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── GAME FRAME — full-viewport flex column ── */
.game-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── TOP BAR ── */
.top-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 6px;
  background: linear-gradient(to bottom, rgba(2,0,12,.82) 0%, rgba(2,0,12,.1) 100%);
  gap: 8px;
}

.stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.stat-label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #a098c0;
  text-shadow: 0 1px 4px #000;
}

.stat-value {
  font-weight: 900;
  text-shadow: 0 2px 8px #000;
}

.score-val {
  font-size: 1.15rem;
  color: #ffe082;
}

.level-val {
  background: #1c5c28;
  border: 1.5px solid #40c45c;
  border-radius: 7px;
  padding: 1px 12px;
  font-size: .88rem;
  color: #fff;
}

.streak-val {
  font-size: .88rem;
  color: #c4b4ff;
}

.menu-btn {
  background: #21153a;
  color: #c0aff8;
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 5px 12px;
  font-weight: 700;
  font-size: .78rem;
  cursor: pointer;
}

/* ── SCENE AREA ── */
.scene-area {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
}

.wyrm-float {
  position: absolute;
  bottom: 18px;
  left: 5%;
  width: clamp(90px, 30vw, 150px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.85));
  pointer-events: none;
  z-index: 3;
}

.wyrm-float.cast { animation: wyrmCast .4s; }
@keyframes wyrmCast {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.12); }
}

/* ── BOTTOM AREA ── */
.bottom-area {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to top, rgba(2,0,14,.92) 0%, rgba(2,0,14,.78) 100%);
  border-top: 1.5px solid rgba(200,160,70,.3);
}

/* ── Word banner ── */
.word-banner {
  margin: 2px 8px 6px;
  background: linear-gradient(90deg, #0d2c7e, #1248b8, #0d2c7e);
  border: 2px solid #3888dc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-shadow: 0 2px 8px #000b;
  min-height: 32px;
  box-shadow: 0 0 16px rgba(56,136,220,.5), inset 0 1px 0 rgba(255,255,255,.1);
}

.gem { color: #7ab8ff; font-size: .8rem; }
#wordDisplay { color: #eef4ff; }

/* ── BOARD — column-stack hex grid ── */
.board-wrap {
  padding: 10px 4px 4px;
}

.board {
  /* Tile size: 7 columns must fit mobile viewport */
  --tile: clamp(36px, 10vw, 44px);
  --gap: 3px;
  --stagger-shift: calc((var(--tile) + var(--gap)) * 0.42);

  display: flex;
  flex-direction: row;          /* columns sit side by side */
  align-items: flex-start;      /* short cols align to top */
  gap: var(--gap);
  background: rgba(4,1,12,.72);
  border: 1.5px solid rgba(200,160,70,.4);
  border-radius: 12px;
  padding: 8px 6px 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,100,.08);
  width: fit-content;
  margin: 0 auto;
}

/* Each column is a vertical stack of tiles */
.hex-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Tall columns (8 tiles, odd indices) shift UP for stagger */
.hex-col-tall {
  margin-top: calc(var(--stagger-shift) * -1);
}

/* ── TILE ── */
.tile {
  width: var(--tile);
  height: var(--tile);
  border-radius: 7px;
  border: 1px solid #8a5812;

  /* Parchment / scrabble tile look */
  background:
    radial-gradient(ellipse at 22% 18%, rgba(255,255,220,.55) 0%, transparent 55%),
    linear-gradient(155deg, #f4d96a 0%, #d49230 48%, #a86010 100%);
  color: #1a0800;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 900;
  font-size: clamp(.92rem, 3.7vw, 1.28rem);

  cursor: pointer;
  transition: transform .12s, box-shadow .12s, filter .12s;
  user-select: none;

  box-shadow:
    inset 0 1px 0 rgba(255,255,200,.45),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 3px 0 #7a4208,
    0 4px 8px rgba(0,0,0,.45);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Corner rivets */
.tile::before, .tile::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
}
.tile::before { top: 3px; left: 3px; }
.tile::after  { bottom: 3px; right: 3px; }

.tile:active {
  transform: translateY(2px) scale(.97);
  box-shadow: 0 1px 0 #7a4208, 0 2px 4px rgba(0,0,0,.4);
}

.tile.selected {
  box-shadow: 0 0 0 3px #4ec9ff, 0 0 14px #4ec9ffbb, 0 3px 0 #7a4208;
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.15);
  z-index: 2;
}

.tile.no-adj {
  opacity: 0.35;
  cursor: not-allowed;
  filter: brightness(.6) saturate(.5);
}

/* Rare letter — silver tint */
.tile.rare {
  background:
    radial-gradient(ellipse at 22% 18%, rgba(255,255,230,.5) 0%, transparent 55%),
    linear-gradient(155deg, #e8e0b0 0%, #c0a860 48%, #8a7030 100%);
  border-color: #a09050;
}

/* Gold-rare letter */
.tile.gold-rare {
  background:
    radial-gradient(ellipse at 22% 18%, rgba(255,255,180,.6) 0%, transparent 55%),
    linear-gradient(155deg, #fff4a0 0%, #ffd700 50%, #c89010 100%);
  border-color: #daa520;
  box-shadow:
    inset 0 1px 0 rgba(255,255,180,.5),
    0 0 8px #ffd70066, 0 3px 0 #7a6000, 0 4px 8px rgba(0,0,0,.4);
}

/* Fire tile */
.tile.fire {
  background: linear-gradient(180deg, #ffe040 0%, #ff5500 45%, #b00e00 100%);
  color: #fff8e0;
  font-size: clamp(.9rem, 3.5vw, 1.15rem);
  font-family: inherit;
  border: 1px solid #ff3800;
  animation: flicker 1s infinite alternate ease-in-out;
  box-shadow: 0 0 8px #ff6200aa, 0 3px 0 #600;
  text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.9);
}
.tile.fire::before { display: none; }
.tile.fire::after {
  content: '🔥';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  opacity: .82;
  mix-blend-mode: screen;
  pointer-events: none;
}
.tile.fire.selected { box-shadow: 0 0 0 3px #ffe066, 0 0 16px #ff8800aa; }

@keyframes flicker {
  0%   { box-shadow: 0 0 8px #ff6200aa,  0 3px 0 #600; filter: brightness(1);    }
  50%  { box-shadow: 0 0 18px #ff2200dd, 0 3px 0 #600; filter: brightness(1.22); }
  100% { box-shadow: 0 0 5px #ff9900aa,  0 3px 0 #600; filter: brightness(.93);  }
}

/* Gold reward tile */
.tile.gold {
  background:
    radial-gradient(ellipse at 22% 18%, rgba(255,255,200,.6) 0%, transparent 55%),
    linear-gradient(155deg, #fff9c0, #ffd700, #c8930a);
  border: 1.5px solid #ffd700;
  color: #1e0f00;
  box-shadow: 0 0 12px #ffd70088, 0 3px 0 #8a6200, 0 4px 8px rgba(0,0,0,.4);
}

/* ── CONTROLS ── */
.controls {
  padding: 4px 10px 6px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  font-size: .78rem;
}

.points-preview {
  color: #d0beff;
}
.points-preview strong {
  color: #ffe082;
  font-size: .95rem;
}

.fire-status {
  color: #ff9955;
  font-size: .7rem;
}

.action-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.btn-clear, .btn-cast {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: .88rem;
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  min-height: 42px;
}

.btn-clear { background: #21153a; color: #c0aff8; }
.btn-cast  { background: #163fb0; color: #fff; border-color: #3c78f8; }
.btn-cast:disabled { opacity: .4; cursor: not-allowed; }

.log-bar {
  text-align: center;
  font-size: .68rem;
  color: #c0a86a;
  padding: 3px 0 2px;
}

/* ── Game Over overlay ── */
.overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.87);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; z-index: 100;
}
.overlay h2 { font-size: 1.8rem; color: #ff5555; text-shadow: 0 0 20px #f00; }
.overlay p  { color: #ddd; font-size: .9rem; }
.overlay .final-score { font-size: 2rem; color: #ffe082; font-weight: 900; }
.overlay button {
  padding: 11px 28px; border-radius: 10px;
  background: #163fb0; color: #fff; border: 2px solid #3c78f8;
  font-size: .95rem; font-weight: 700; cursor: pointer;
}