/* =============================================================
   Wordominoes — design system + screens
   ============================================================= */

:root {
  /* Setting Plaster palette */
  --bg:           #DFC2AF;
  --bg-deeper:    #D2B59E;
  --ink:          #2C2520;
  --ink-soft:     #5C4F44;
  --ink-mid:      #6B5A4A;
  --walnut:       #5A3F2C;

  /* Scrabble tile palette */
  --tile:         #F5E5C5;
  --tile-light:   #FAEDD0;
  --tile-dark:    #ECD8AE;
  --tile-edge:    #C9A876;
  --tile-shadow:  rgba(76, 52, 28, 0.28);
  --tile-letter:  #2A1F18;
  --tile-value:   #6B4F35;

  /* Status accents */
  --good:         #7C9A6E;
  --good-deep:    #5C7350;
  --bad:          #C5705A;
  --chain:        #E8B86A;
  --chain-deep:   #D89F4F;
  --primary:      #B8896C;
  --primary-deep: #8C6448;

  /* Tier colours (low → high) */
  --tier-1: #C5705A;
  --tier-2: #C68458;
  --tier-3: #BF9B53;
  --tier-4: #8E9F6B;
  --tier-5: #5C7350;

  /* Type */
  --serif: 'Sanchez', 'Rockwell', 'Bookman Old Style', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;            /* fallback for older browsers */
  min-height: 100dvh;           /* dynamic viewport — respects mobile address bar */
  position: relative;
}

/* -------- Screens -------- */
.screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;            /* fallback */
  min-height: 100dvh;           /* dynamic viewport — fits within actual visible area */
  padding: 32px 22px 28px;
  box-sizing: border-box;
}

.screen[hidden] { display: none; }

.screen.center {
  justify-content: space-between;
  align-items: center;
  padding: 40px 32px;
}

/* -------- Typography -------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--walnut);
  margin: 0;
  letter-spacing: -0.3px;
}

h1 { font-size: 38px; line-height: 1; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }

p { line-height: 1.5; margin: 0; }

em { color: var(--walnut); font-style: normal; font-weight: 600; }

kbd {
  background: var(--tile);
  border: 1px solid var(--tile-edge);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.85em;
  font-family: 'Menlo', monospace;
  color: var(--ink);
}

.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.label-tiny {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-mid);
}

/* -------- Header bar (sub-screens) -------- */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  margin-bottom: 12px;
}

.header-title {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--walnut);
  line-height: 1;
}

.header-title.stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.header-title.stacked .date {
  font-size: 16px;
}

.header-title.stacked .num {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-mid);
}

.header-spacer { width: 30px; }

/* -------- Icon button (back, close, menu) -------- */
.icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tile);
  border: 1.5px solid var(--tile-edge);
  box-shadow: 0 1.5px 0 var(--tile-edge);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: var(--ink);
  transition: transform 0.06s ease;
}

.icon-btn:active { transform: translateY(1px); box-shadow: 0 0 0 var(--tile-edge); }

.icon-btn svg { display: block; }

/* -------- Tile (used everywhere) -------- */
.tile {
  position: relative;
  background: linear-gradient(160deg, var(--tile-light) 0%, var(--tile) 50%, var(--tile-dark) 100%);
  border: 1px solid var(--tile-edge);
  border-radius: 5px;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--tile-letter);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.7),
    inset 0 -2px 0 rgba(110, 80, 40, 0.18),
    0 2px 3px var(--tile-shadow);
  user-select: none;
  -webkit-user-select: none;
  text-transform: uppercase;
  /* Board tiles are tappable for hinge selection — same anti-zoom treatment. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tile[data-value]::after {
  content: attr(data-value);
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  color: var(--tile-value);
  line-height: 1;
}

.tile.gold {
  background: linear-gradient(160deg, #F4D697 0%, var(--chain) 50%, var(--chain-deep) 100%);
  border-color: #B5823A;
}

.tile.preview {
  opacity: 0.55;
  border-style: dashed;
  border-color: rgba(120, 90, 50, 0.55);
  background: linear-gradient(160deg, #FBF1DC 0%, #F8EBCD 100%);
}

.tile.fade-1 { opacity: 0.45; }
.tile.fade-2 { opacity: 0.7; }

/* -------- Button -------- */
.button {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: transparent;
  color: var(--walnut);
  border: 1.5px solid var(--tile-edge);
  border-radius: 12px;
  padding: 14px 0;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--tile-edge);
  transition: transform 0.06s ease, box-shadow 0.06s ease;
  /* No double-tap zoom on rapid button taps, no 300ms delay. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.button:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--tile-edge);
}

.button.primary {
  background: var(--primary);
  color: #FFF8EE;
  border-color: var(--primary-deep);
  box-shadow: 0 3px 0 var(--primary-deep), 0 5px 12px rgba(76, 52, 28, 0.18);
}

.button.primary:active {
  box-shadow: 0 0 0 var(--primary-deep), 0 2px 4px rgba(76, 52, 28, 0.1);
}

.button.small {
  font-size: 12px;
  padding: 10px 0;
  border-radius: 8px;
}

.button.text {
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--walnut);
  padding: 6px 12px;
  width: auto;
}

.button.text:active { transform: none; box-shadow: none; }

.button-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.button-row.horizontal {
  flex-direction: row;
}

.button-row.horizontal .button { flex: 1; }
.button-row.horizontal .button.primary { flex: 1.4; }

/* -------- Tier badge -------- */
.tier-badge {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 13px;
  color: #FFF8EE;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 6px rgba(76, 52, 28, 0.18);
  background: var(--tier-3);
  border: 1px solid #9C7E40;
}

.tier-badge.tier-1 { background: var(--tier-1); border-color: #9F4734; }
.tier-badge.tier-2 { background: var(--tier-2); border-color: #9F6940; }
.tier-badge.tier-3 { background: var(--tier-3); border-color: #9C7E40; }
.tier-badge.tier-4 { background: var(--tier-4); border-color: #6E7E50; }
.tier-badge.tier-5 { background: var(--tier-5); border-color: #3E5435; }

/* -------- Word slots -------- */
.word-slots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 10px 0 12px;
}

.slot {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1.5px dashed rgba(76, 52, 28, 0.3);
  background: rgba(255, 248, 230, 0.25);
  box-sizing: border-box;
}

.slot.played {
  border-style: solid;
  border-color: var(--good-deep);
  background: linear-gradient(160deg, #A8C49A 0%, var(--good) 100%);
}

.slot.current {
  border-style: solid;
  border-color: #B5823A;
  background: linear-gradient(160deg, #F4D697 0%, var(--chain) 100%);
}

/* -------- Lives -------- */
.lives { display: flex; gap: 5px; }

.life {
  width: 16px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(160deg, var(--ink) 0%, #1a1410 100%);
  border: 1px solid var(--ink-soft);
  position: relative;
}

.life::before, .life::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--tile);
  left: 50%;
  transform: translateX(-50%);
}

.life::before { top: 4px; }
.life::after { bottom: 4px; }

.life.spent { opacity: 0.22; }

.life.large {
  width: 36px;
  height: 50px;
  border-radius: 6px;
  border-width: 1.5px;
  box-shadow: 0 4px 8px rgba(28, 18, 10, 0.25);
}
.life.large::before, .life.large::after {
  width: 7px; height: 7px;
}
.life.large::before { top: 8px; }
.life.large::after { bottom: 8px; }

.life.mini {
  width: 12px;
  height: 16px;
  border-radius: 2.5px;
}
.life.mini::before, .life.mini::after {
  width: 2px; height: 2px;
}
.life.mini::before { top: 3px; }
.life.mini::after { bottom: 3px; }

/* -------- Card -------- */
.card {
  background: rgba(255, 248, 230, 0.4);
  border: 1px solid rgba(76, 52, 28, 0.18);
  border-radius: 12px;
  padding: 16px 22px;
}

/* -------- Score display -------- */
.score-big {
  font-family: var(--serif);
  font-size: 56px;
  color: var(--walnut);
  line-height: 1;
  letter-spacing: -1px;
}

.score-big .pts {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-left: 6px;
}

.score-mid {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--walnut);
  line-height: 1;
}

/* -------- Stats footer -------- */
.stats {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-mid);
  letter-spacing: 0.4px;
}

.stats .stat-num {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--walnut);
  margin-left: 4px;
}

.stat-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-mid);
  opacity: 0.4;
}

/* =============================================================
   SCREEN: Splash
   ============================================================= */

#splash {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity 0.4s ease;
}

#splash.hidden { opacity: 0; pointer-events: none; }

#splash svg { width: 110px; height: 70px; }

#splash .splash-title {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--walnut);
}

/* =============================================================
   SCREEN: Home / Played-today
   ============================================================= */

#screen-home, #screen-played-today {
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 40px 32px;
}

.home-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-logo {
  width: 100px;
  height: 70px;
  margin-bottom: 16px;
}

.home-tagline {
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mid);
  margin: 12px 0 0;
  letter-spacing: 0.2px;
}

.home-info {
  text-align: center;
}

.home-info .date {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--walnut);
}

.home-info .num {
  font-size: 11px;
  color: var(--ink-mid);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-top: 6px;
}

.home-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Played-today result card */
.result-card {
  text-align: center;
  width: 100%;
  max-width: 280px;
  /* Override the default .card padding (16px 22px) — the result card
     stacks four items, so it needs more vertical breathing room. */
  padding: 22px 24px;
}

.result-card .result-date {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin: 0 0 14px;
}

.result-card .tier-badge { margin-bottom: 14px; }

/* Space the score away from the badges below it so "77 PTS" and the
   "❤ Untouched" pill don't read as a single stacked blob. */
.result-card .score-mid { margin-bottom: 14px; }

/* Lift the countdown off the card so they don't visually touch on tall
   phones where space-between has nothing to distribute. */
#screen-played-today .countdown {
  margin-top: 14px;
}

/* Countdown */
.countdown {
  text-align: center;
}

.countdown .countdown-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin: 0 0 4px;
}

.countdown .countdown-time {
  font-family: var(--serif);
  font-size: 36px;
  color: var(--walnut);
  line-height: 1;
  letter-spacing: -0.5px;
}

.countdown.inline .countdown-time {
  font-size: 13px;
  margin-left: 4px;
}

.countdown.inline {
  font-size: 11px;
  color: var(--ink-mid);
}

/* =============================================================
   SCREEN: How to play
   ============================================================= */

#screen-how-to .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 14px;
}

.rule-section { }

.rule-section .rule-text {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}

.rule-section .rules-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.rule-section .rules-list li {
  padding-left: 12px;
  position: relative;
}

.rule-section .rules-list li::before {
  content: '·';
  position: absolute;
  left: 2px;
  color: var(--ink-mid);
  font-weight: bold;
}

/* Chain visual (CAT meeting TAR via shared T) */
.chain-visual {
  position: relative;
  width: 122px;
  height: 72px;
  margin: 12px auto 0;
}

.chain-visual .tile {
  position: absolute;
  width: 22px;
  height: 22px;
  font-size: 12px;
  border-radius: 4px;
}

/* Spinner visual (LEARNT meets LETTER between TT pair) */
.spinner-visual {
  position: relative;
  width: 188px;
  height: 118px;
  margin: 12px auto 0;
}

.spinner-visual .tile {
  position: absolute;
  width: 18px;
  height: 18px;
  font-size: 11px;
  border-radius: 3px;
}

/* =============================================================
   SCREEN: Game in progress
   ============================================================= */

#screen-game {
  padding: 12px 18px 16px;
}

.game-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}

.game-top .score-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.game-top .score-block .label {
  font-size: 10px;
}

.game-top .score-block .score-num {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--walnut);
  line-height: 1;
}

/* Board + scoring sidebar row */
.board-row {
  display: flex;
  gap: 8px;
  flex: 1;
  margin-bottom: 12px;
  min-height: 240px;
}

.scoring-side {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 10px 4px;
  background: rgba(255, 248, 230, 0.32);
  border-radius: 12px;
  border: 1px solid rgba(76, 52, 28, 0.14);
}

.score-tip {
  text-align: center;
}

.score-tip .num {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--walnut);
  line-height: 1;
}

.score-tip .num.small { font-size: 16px; }

.score-tip .lbl {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-mid);
  margin-top: 4px;
  line-height: 1.2;
}

/* Domino board */
.board {
  flex: 1;
  position: relative;
  background: rgba(255, 248, 230, 0.32);
  border-radius: 12px;
  border: 1px solid rgba(76, 52, 28, 0.14);
  box-shadow: inset 0 1px 3px rgba(76, 52, 28, 0.08);
  overflow: hidden;
  min-height: 240px;
}

.board-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: transform;
}

.board .bt {
  position: absolute;
  width: 30px;
  height: 30px;
  font-size: 16px;
  border-radius: 4px;
}

.board .bt.entering {
  opacity: 0;
  transform: scale(0.4);
}

/* Open hinge tiles on the board are tappable — used to switch between
   multiple hinges with the same letter. They get a permanent gold ring
   plus a gentle pulse so new players can't miss that something happens here. */
.board .bt.gold {
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(120, 80, 30, 0.25),
    0 0 0 3px rgba(232, 184, 106, 0.7),
    0 0 12px rgba(232, 184, 106, 0.45),
    0 2px 6px var(--tile-shadow);
  animation: pulseHingeIdle 2.2s ease-in-out infinite;
}

@keyframes pulseHingeIdle {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -2px 0 rgba(120, 80, 30, 0.25),
      0 0 0 3px rgba(232, 184, 106, 0.55),
      0 0 10px rgba(232, 184, 106, 0.35),
      0 2px 6px var(--tile-shadow);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -2px 0 rgba(120, 80, 30, 0.25),
      0 0 0 5px rgba(232, 184, 106, 0.75),
      0 0 16px rgba(232, 184, 106, 0.55),
      0 2px 6px var(--tile-shadow);
  }
}

/* Active hinge: green-tile + green-halo "good to go" signal once the player
   has typed the matching first letter (or tapped to commit). Distinct from
   the gold "this is a hinge" state — green semantic = locked-in, ready. */
.board .bt.active-hinge {
  background: linear-gradient(160deg, #B7CDA8 0%, var(--good) 55%, var(--good-deep) 100%);
  border-color: var(--good-deep);
  animation: pulseHingeActive 1.2s ease-in-out infinite;
}

@keyframes pulseHingeActive {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 0 rgba(60, 80, 50, 0.3),
      0 0 0 4px rgba(124, 154, 110, 0.7),
      0 0 14px rgba(124, 154, 110, 0.5),
      0 2px 6px var(--tile-shadow);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 0 rgba(60, 80, 50, 0.3),
      0 0 0 7px rgba(124, 154, 110, 0.85),
      0 0 22px rgba(124, 154, 110, 0.7),
      0 2px 6px var(--tile-shadow);
  }
}

/* Wheel */
.wheel-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  position: relative;
}

.shuffle-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--walnut);
}

.shuffle-btn:active {
  transform: rotate(60deg);
}

.wheel {
  position: relative;
  width: 220px;
  height: 220px;
}

.wheel .wt {
  position: absolute;
  width: 44px;
  height: 44px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  padding: 0;
  border-radius: 6px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  /* Prevent iOS double-tap zoom on rapid wheel taps and kill the 300ms tap delay. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.wheel .wt[data-value]::after {
  bottom: 4px;
  right: 6px;
  font-size: 10px;
}

.wheel .wt:hover { background: linear-gradient(160deg, #FBEDD2 0%, var(--tile) 100%); }

.wheel .wt:active {
  transform: translate(-50%, -50%) scale(0.92);
}

.wheel .wt.center {
  width: 56px;
  height: 56px;
  font-size: 26px;
  /* Match the gold hinge / locked-in chain tile so the centre letter reads
     as the same gold accent used everywhere else, not a separate yellow. */
  background: linear-gradient(160deg, #F4D697 0%, var(--chain) 50%, var(--chain-deep) 100%);
  border-color: #B5823A;
  z-index: 2;
}

/* Game controls */
.game-controls {
  display: flex;
  gap: 10px;
}

.game-controls .button {
  font-size: 14px;
  padding: 13px 0;
  border-radius: 10px;
  letter-spacing: 1.4px;
}

/* Message line */
.message {
  text-align: center;
  min-height: 1.4em;
  margin: 4px 0 8px;
  /* Match the score preview's right-padding so errors/flashes/toggles
     stay aligned with the wheel's horizontal centre below. */
  padding-right: 46px;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-mid);
}

.message.error { color: var(--bad); }
.message.success { color: var(--good-deep); }

/* Live score preview shown while the player is typing a chain-valid word.
   Teaches the scoring system by showing exactly which bonuses fire as
   letters get added or removed. Hidden when the typed word can't currently
   chain (the message bar surfaces the error instead). */
.score-preview {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 6px;
  /* Offset by the shuffle button width + flex gap below so the centering
     aligns with the wheel's horizontal centre (the wheel is shifted left
     by the shuffle button on its right). */
  padding-right: 46px;
  font-family: var(--sans);
  min-height: 1.4em;
}

/* The preview row stays in the layout even when empty — we just clear its
   text content. Keeps the playing window from jumping each time the
   preview blanks out between words. */

.score-preview-pts {
  font-size: 16px;
  font-weight: 700;
  color: var(--good-deep);
  letter-spacing: 0.4px;
}

.score-preview-breakdown {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mid);
  letter-spacing: 0.2px;
}

/* Subtle Buy-Me-a-Coffee link. Sits at the bottom of the end-of-game and
   played-today screens — visible to anyone scrolling that far, but not
   competing with the primary actions. */
.coffee-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 22px auto 12px;
  padding: 8px 14px;
  width: max-content;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mid);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--tile-edge);
  background: transparent;
  transition: background 0.12s ease, color 0.12s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.coffee-link:hover {
  background: var(--tile-light);
  color: var(--walnut);
}

.coffee-link:active {
  background: var(--tile-edge);
}

.coffee-emoji {
  font-size: 14px;
}

/* =============================================================
   BADGES (achievement pills + help icon + How-To-Play list)
   ============================================================= */

/* Container that holds the badge row plus the ? help button on end-of-game. */
.badge-row-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 12px auto 0;
  flex-wrap: wrap;
}

.badge-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--tile-light);
  border: 1px solid var(--tile-edge);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--walnut);
  letter-spacing: 0.2px;
  cursor: default;
}

.badge-pill .badge-emoji { font-size: 14px; }

/* Subtle ? button — same vibe as the badge pills, smaller. */
.badge-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--tile-edge);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}

.badge-help:hover {
  background: var(--tile-light);
  color: var(--walnut);
}

.badge-help:active {
  background: var(--tile-edge);
}

/* Played-today card variant — slightly less margin so it nests cleanly. */
#played-badges {
  margin-top: 10px;
}

/* Badges section on the How To Play screen. */
.badges-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}

.badges-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--tile-edge);
}

.badges-list li:last-child { border-bottom: 1px solid var(--tile-edge); }

.badges-list .badge-emoji {
  font-size: 22px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.badges-list div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.badges-list em {
  font-style: normal;
  font-weight: 600;
  color: var(--walnut);
  font-family: var(--sans);
  font-size: 14px;
}

.badges-list span {
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 13px;
}

/* Inline pill button inside the message bar — used by the branch-instead?
   toggle when a typed word could be played as either a chain or a spinner. */
.message-toggle {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--walnut);
  background: transparent;
  border: 1.5px solid var(--tile-edge);
  border-radius: 999px;
  padding: 2px 10px;
  margin: 0 4px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.08s ease;
}

.message-toggle:active {
  background: var(--tile-edge);
}

/* =============================================================
   SCREEN: End of game (shared by complete/incomplete)
   ============================================================= */

#screen-end-of-game .hero {
  text-align: center;
  margin: 8px 0 14px;
}

#screen-end-of-game .hero .next-tier {
  font-size: 11px;
  color: var(--ink-mid);
  letter-spacing: 0.4px;
  font-style: italic;
  margin-top: 4px;
}

#screen-end-of-game .hero .next-tier em {
  color: var(--walnut);
  font-style: normal;
  font-weight: 600;
}

#screen-end-of-game .incomplete-line {
  font-size: 11px;
  color: var(--ink-mid);
  letter-spacing: 0.4px;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.divider {
  height: 1px;
  background: rgba(76, 52, 28, 0.18);
  margin: 4px 0 8px;
}

.words-list { margin-bottom: 12px; }

.word-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 6px;
}

.word-row + .word-row { border-top: 1px solid rgba(76, 52, 28, 0.1); }

.word-row.top {
  background: linear-gradient(90deg,
    rgba(124, 154, 110, 0) 0%,
    rgba(124, 154, 110, 0.16) 50%,
    rgba(124, 154, 110, 0) 100%);
  border-top: 1px solid transparent !important;
}

.word-row.empty { opacity: 0.42; }

.word-row .word-num {
  font-family: var(--serif);
  font-size: 13px;
  color: #B5823A;
  text-align: right;
}

.word-row .word-name {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--walnut);
  letter-spacing: 0.6px;
}

.word-row .word-name-link {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(76, 52, 28, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}

.word-row .word-name-link:hover {
  text-decoration-color: var(--walnut);
}

.word-row .word-name.dash {
  font-style: italic;
  color: var(--ink-mid);
}

.word-row .word-score {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--walnut);
}

.word-row .word-score.top {
  color: var(--good-deep);
  font-weight: 600;
}

.word-row .word-score .pts {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 3px;
}

.word-row .word-score.top .pts { color: var(--good-deep); }

.word-row.review { align-items: flex-start; }

.word-row.review .review-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.word-row.review .review-breakdown {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-mid);
  letter-spacing: 0.3px;
}

/* Best possible word card */
.best-possible {
  background: rgba(255, 248, 230, 0.4);
  border: 1px solid rgba(76, 52, 28, 0.14);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
  margin-bottom: 14px;
}

.best-possible .bp-label {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-mid);
  font-weight: 600;
  margin: 0 0 8px;
}

.best-possible .bp-tiles {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-bottom: 6px;
}

.best-possible .bp-tile {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  font-size: 12px;
}

.best-possible .bp-score {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--walnut);
  margin: 0;
}

.best-possible .bp-score .pts {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 3px;
}

/* Tiny italic link beneath any word — opens a google "define" search. */
.define-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-mid);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}

.define-link:hover { color: var(--walnut); }

/* =============================================================
   SCREEN: Best solution
   ============================================================= */

#screen-best-solution .max-score {
  font-family: var(--serif);
  font-size: 44px;
  color: var(--walnut);
  line-height: 1;
  letter-spacing: -0.5px;
  text-align: center;
  margin: 8px 0 4px;
}

#screen-best-solution .max-score .pts {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-left: 6px;
}

#screen-best-solution .max-sub {
  font-size: 11px;
  color: var(--ink-mid);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 4px;
  margin-bottom: 12px;
}

#screen-best-solution .board {
  height: 260px;
  flex: none;
}

/* Your chain review — larger centred score, snug board */
.max-score.your-chain-score {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  color: var(--walnut);
  line-height: 1;
  letter-spacing: -1px;
  text-align: center;
  margin: 18px 0 22px;
}

.max-score.your-chain-score .pts {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-mid);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-left: 6px;
}

.your-chain-board {
  flex: none !important;
  min-height: 0 !important;
  /* height is set inline by renderYourChain based on the chain's actual size */
}

#screen-best-solution .board .bt {
  width: 14px;
  height: 14px;
  font-size: 9px;
  border-radius: 3px;
}

/* =============================================================
   SCREEN: Share preview
   ============================================================= */

#screen-share .share-intro {
  text-align: center;
  font-size: 11px;
  color: var(--ink-mid);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 8px 0 18px;
}

/* ============== SHARED-CHAIN VIEW (opened from a friend's link) ============== */
#screen-shared .shared-intro {
  text-align: center;
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 14px;
  margin: 12px 16px 18px;
}

#screen-shared .shared-intro span {
  color: var(--walnut);
  font-weight: 600;
}

#screen-shared .share-card {
  /* Centre the card on the screen with a sensible max-width on wide viewports. */
  margin: 0 auto 20px;
  max-width: 360px;
}

#screen-shared .shared-gate {
  margin: 0 16px 20px;
  padding: 20px 18px;
  background: var(--tile-light);
  border: 1px solid var(--tile-edge);
  border-radius: 14px;
  text-align: center;
}

#screen-shared #shared-board-wrap {
  margin: 0 16px 20px;
}

.share-card {
  background: var(--tile-light);
  border: 1px solid var(--tile-edge);
  border-radius: 14px;
  padding: 26px 24px 22px;
  box-shadow: 0 6px 14px rgba(76, 52, 28, 0.18), 0 2px 4px rgba(76, 52, 28, 0.1);
  margin: 0 auto 22px;
  max-width: 290px;
  text-align: center;
}

.share-card .share-title {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--walnut);
  margin: 0 0 4px;
  line-height: 1.1;
}

.share-card .share-tier {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-mid);
  margin: 0 0 18px;
  letter-spacing: 0.4px;
}

.share-stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin: 0 0 18px;
}

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

.share-stat .share-stat-num {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--walnut);
  line-height: 1;
}

.share-stat .share-stat-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mid);
}

.share-stat-divider {
  width: 1px;
  height: 30px;
  background: rgba(76, 52, 28, 0.2);
}

.share-emojis {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0 0 16px;
}

.sq {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  box-sizing: border-box;
}

.sq.sage {
  background: linear-gradient(160deg, #A8C49A, var(--good) 50%, var(--good-deep));
  border: 1px solid var(--good-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sq.gold {
  background: linear-gradient(160deg, #F4D697, var(--chain) 50%, var(--chain-deep));
  border: 1px solid #B5823A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.sq.dark {
  background: linear-gradient(160deg, #4A3D33, var(--ink) 50%, #1a1410);
  border: 1px solid var(--ink);
}

.share-footer {
  text-align: center;
  font-size: 11px;
  color: var(--ink-mid);
  letter-spacing: 0.6px;
  margin: 0;
}

/* =============================================================
   MODAL: Use a life
   ============================================================= */

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-layer[hidden] { display: none; }

.modal-dim {
  position: absolute;
  inset: 0;
  background: rgba(44, 37, 32, 0.55);
  backdrop-filter: blur(2px);
}

.modal-card {
  position: relative;
  z-index: 1;
  width: 286px;
  background: #F2DDC3;
  border-radius: 18px;
  border: 1px solid rgba(76, 52, 28, 0.2);
  box-shadow: 0 14px 36px rgba(28, 18, 10, 0.45), 0 4px 12px rgba(28, 18, 10, 0.3);
  padding: 28px 24px 22px;
  text-align: center;
}

.modal-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.modal-card .modal-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--walnut);
  margin: 0 0 10px;
  line-height: 1.2;
}

.modal-card .modal-body {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 18px;
}

.modal-card .lives-after {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 12px;
  color: var(--ink-mid);
  letter-spacing: 0.4px;
}

.modal-card .modal-actions {
  display: flex;
  gap: 10px;
}

.modal-card .modal-actions.vertical {
  flex-direction: column;
}

.modal-card .modal-actions .button {
  font-size: 13px;
  padding: 12px 0;
  letter-spacing: 1.4px;
  border-radius: 10px;
}

/* ============== TUTORIAL BANNER (interactive walkthrough) ============== */
/* The prompt is OVERLAID on the score-preview + message rows during the
   tutorial. Those rows are already reserved height in the layout, so this
   adds zero vertical space — the wheel doesn't shift down on small phones,
   and the banner just hides the (irrelevant during teaching) score preview
   while teaching. */
.prompt-area {
  position: relative;
}

.tutorial-banner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff8e6 0%, #fdeec2 100%);
  border: 1px solid rgba(120, 80, 30, 0.18);
  box-shadow: 0 1px 2px rgba(28, 18, 10, 0.08);
  /* Smaller right-padding than message bar — the banner spans the full
     prompt-area width and isn't trying to centre on the wheel. */
}

/* The hidden attribute must beat the display:flex default above. */
.tutorial-banner[hidden] { display: none; }

/* Off-piste error styling — player typed the wrong word during a play step.
   We swap the banner copy to a "stick with the example" reminder and tint
   the banner red so the cue is unmissable. Next keystroke clears it. */
.tutorial-banner.error {
  background: linear-gradient(180deg, #fde2e2 0%, #fbcdcd 100%);
  border-color: rgba(180, 40, 40, 0.45);
}

.tutorial-banner.error .tutorial-banner-text {
  color: #8a1f1f;
}

.tutorial-banner.error .tutorial-banner-text em {
  color: #5a0f0f;
}

.tutorial-banner.shake {
  animation: tutorialBannerShake 0.42s ease-in-out;
}

@keyframes tutorialBannerShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

.tutorial-banner-text {
  flex: 1;
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-mid);
  text-align: left;
}

.tutorial-banner-text em {
  font-style: normal;
  font-weight: 700;
  color: var(--walnut);
}

.tutorial-banner-skip {
  flex: none;
  background: transparent;
  border: 1px solid rgba(120, 80, 30, 0.3);
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.tutorial-banner-skip:hover {
  background: rgba(120, 80, 30, 0.08);
}

/* FINISH — only shown on the final banner-info step, after a short reveal
   delay. Sized like a proper CTA (not a tiny inline pill) and fades in so
   the appearance reads as "OK, you're done — tap to wrap up." */
.tutorial-banner-finish {
  flex: none;
  /* Match the Enter button (.button.primary) so the CTA reads as the same
     visual language the player has been using throughout the tutorial. */
  background: var(--primary);
  border: 1px solid var(--primary-deep);
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--primary-deep), 0 3px 6px rgba(76, 52, 28, 0.15);
  opacity: 1;
  transition: filter 0.15s ease, transform 0.15s ease, opacity 0.35s ease-out;
}

.tutorial-banner-finish:hover {
  filter: brightness(1.08);
}

.tutorial-banner-finish:active {
  transform: scale(0.96);
}

/* When "hidden", keep the button in the layout — just make it invisible and
   uninteractive. Otherwise the text re-wraps the instant the button appears,
   which the player perceives as a layout jolt. */
.tutorial-banner-finish[hidden] {
  display: inline-block;
  visibility: hidden;
  opacity: 0;
}


/* ============== TUTORIAL MODAL ============== */
.tutorial-card {
  max-width: 360px;
}

.tutorial-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}

.tutorial-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tile-edge);
  opacity: 0.35;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.tutorial-dot.active {
  opacity: 1;
  transform: scale(1.2);
  background: var(--walnut);
}

.tutorial-body {
  color: var(--ink-mid);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 18px;
}

.tutorial-body p { margin: 8px 0; }
.tutorial-body p:first-child { margin-top: 0; }
.tutorial-body p:last-child { margin-bottom: 0; }
.tutorial-body em { font-style: normal; font-weight: 600; color: var(--walnut); }

.tutorial-illustration {
  position: relative;
  margin: 14px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tutorial-illustration .chain-visual,
.tutorial-illustration .spinner-visual {
  margin: 0 auto;
}

.modal-life-tile {
  width: 36px;
  height: 50px;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--ink) 0%, #1a1410 100%);
  border: 1.5px solid var(--ink-soft);
  position: relative;
  transform: rotate(-8deg);
  box-shadow: 0 4px 8px rgba(28, 18, 10, 0.25);
}

.modal-life-tile::before, .modal-life-tile::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tile);
  left: 50%;
  transform: translateX(-50%);
}

.modal-life-tile::before { top: 8px; }
.modal-life-tile::after { bottom: 8px; }

/* =============================================================
   Mobile tuning
   ============================================================= */

@media (max-width: 380px) {
  .wheel { width: 200px; height: 200px; }
  .wheel .wt { width: 40px; height: 40px; font-size: 20px; }
  .wheel .wt.center { width: 50px; height: 50px; font-size: 24px; }
}