/* ================================
   Thinkle — Clean, Centered Styles
   ================================ */

/* Scope everything to Thinkle */
.thinkle-page, .thinkle-page * { box-sizing: border-box; }

html, body {
  background:#121213; color:#fff;
  margin:0; padding:0; overflow-x:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Layout */
.thinkle-page {
  --maxw: 760px;
  --gutter: 16px;    /* page side padding */
  --tileGap: 8px;    /* gap between tiles */
  --keyGap: 8px;     /* gap between keys */
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 24px var(--gutter);
}
.thinkle-page .container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

/* Header */
h1 { margin: 0 0 .5rem; font-size: 2rem; }
.subtitle { margin: 0 0 1.25rem; color:#d7dadc; font-weight: 400; }

/* ---------------- Board ---------------- */
#game-board.board {
  display: grid;
  gap: var(--tileGap);
  margin: 0 auto 12px;
  width: 100%;
  padding-inline: var(--gutter);
}
#game-board .row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--tileGap);
}
#game-board .tile {
  width: 100%;
  aspect-ratio: 1 / 1;          /* default desktop/tablet: true square */
  border: 2px solid #3a3a3c;
  border-radius: 10px;
  background: #222;
  display: flex; align-items:center; justify-content:center;
  text-transform: uppercase; font-weight: 700;
  font-size: clamp(20px, 7vw, 30px);
  color:#fff;
}
#game-board .tile.correct { background:#538d4e; border-color:#538d4e; }
#game-board .tile.present { background:#b59f3b; border-color:#b59f3b; }
#game-board .tile.absent  { background:#3a3a3c; border-color:#3a3a3c; }
#game-board .tile.invalid { border-color:#c00; color:#c00; }

/* ---------------- Keyboard ---------------- */
/* Use grid rows so each line stretches edge-to-edge reliably */
#keyboard.keyboard {
  width: 100%;
  max-width: 100%;
  margin: 12px auto 0;
  padding-inline: var(--gutter);
}
.keyboard-row {
  display: grid;
  width: 100%;
  column-gap: var(--keyGap);
  row-gap: 10px;
}
#keyboard .keyboard-row:nth-child(1) { grid-template-columns: repeat(10, 1fr); }
#keyboard .keyboard-row:nth-child(2) { grid-template-columns: repeat(9, 1fr); }
#keyboard .keyboard-row:nth-child(3) { grid-template-columns: 1.4fr repeat(7, 1fr) 1.6fr; } /* ENTER / letters / ⌫ */

.key {
  display:flex; align-items:center; justify-content:center;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #555;
  background:#333;
  color:#fff;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: background .15s;
}
.key:hover { background:#444; }
.key.correct { background:#538d4e; border-color:#538d4e; }
.key.present { background:#b59f3b; border-color:#b59f3b; }
.key.absent  { background:#3a3a3c; border-color:#3a3a3c; }
.key.enter { font-size: .95rem; letter-spacing:.02em; }  /* help “ENTER” fit */
.key.backspace { font-size: 1.15rem; }

/* ---------------- Messages / Stats ---------------- */
.message { min-height: 1.25rem; font-size: 1rem; }
#endStats { display:none; margin-top: 1.25rem; text-align:center; }
#endStats .stats p { margin:.5rem 0; color:#d7dadc; font-size: 1rem; }
#shareBtn { display:none; margin: 0 auto 1rem; padding:.6rem 1.2rem; background:#538d4e; border:0; border-radius:8px; color:#fff; }
#shareBtn:hover { background:#6aaa64; }

/* Modal (trimmed) */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; visibility:hidden; opacity:0; transition:opacity .2s; z-index:1000; }
.modal.show { visibility:visible; opacity:1; }
.modal-content { background:#1e1e1e; padding:2rem; border-radius:12px; width:min(360px, 95%); text-align:center; position:relative; }
.modal-close { position:absolute; top:.5rem; right:.5rem; background:transparent; border:0; font-size:1.5rem; color:#fff; cursor:pointer; }

/* Game-links partial */
#postGameLinks.hidden { display:none !important; }

/* Utility */
.hidden { display: none !important; }

/* ---------------- Mobile (<=600px) ---------------- */
@media (max-width: 600px) {
  .thinkle-page { --gutter: 10px; --tileGap: 6px; --keyGap: 6px; padding: 16px var(--gutter); }
  .thinkle-page .container { max-width: 100% !important; }

  /* Make tiles a bit shorter so the keyboard has more room */
  #game-board.board { padding-inline: var(--gutter); }
  #game-board .tile {
    aspect-ratio: 0.92 / 1;
    font-size: clamp(16px, 5.6vw, 24px);
    border-radius: 8px;
  }

  /* Keyboard: truly full-width with comfy spacing */
  #keyboard.keyboard { padding-inline: var(--gutter); }
  .key {
    min-height: clamp(52px, 14.5vw, 66px);
    font-size: clamp(15px, 4.6vw, 19px);
  }
  .key.enter { font-size: clamp(13px, 3.8vw, 16px); }
  .key.backspace { font-size: clamp(18px, 5vw, 22px); }
}

/* ---------------- Desktop/tablet (>=900px) ---------------- */
@media (min-width: 900px) {
  /* Keep the playable area tidy */
  #game-board.board, #keyboard.keyboard { max-width: 520px; padding-inline: 0; }
  .key { min-height: 44px; font-size: 0.95rem; }
}
/* === FINAL SIZING FIXES — mobile full width, desktop smaller === */

/* Mobile: make board & keyboard span the full width with tiny side gutters */
@media (max-width: 600px) {
  .thinkle-page { padding: 12px 0 !important; }
  .thinkle-page .container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

  /* Edge-to-edge (with 8px gutters) */
  #game-board.board,
  #keyboard.keyboard {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Board: slightly shorter tiles so keyboard is visible */
  #game-board .row { gap: 6px !important; }
  #game-board .tile {
    aspect-ratio: 0.92 / 1 !important;            /* a touch shorter than square */
    font-size: clamp(16px, 5.4vw, 22px) !important;
    border-radius: 8px;
  }

  /* Keyboard: use grid so each row fills 100% width exactly */
  .keyboard-row {
    display: grid !important;
    width: 100% !important;
    column-gap: 6px !important;
    row-gap: 10px !important;                      /* vertical space between rows */
  }
  #keyboard .keyboard-row:nth-child(1) { grid-template-columns: repeat(10, 1fr) !important; }
  #keyboard .keyboard-row:nth-child(2) { grid-template-columns: repeat(9, 1fr) !important; }
  /* ENTER, 7 letters, ⌫ — slightly asymmetrical so “ENTER” fits comfortably */
  #keyboard .keyboard-row:nth-child(3) { grid-template-columns: 1.3fr repeat(7, 1fr) 1.5fr !important; }

  .key {
    width: 100% !important;
    min-height: clamp(52px, 14.5vw, 64px) !important;
    font-size: clamp(15px, 4.6vw, 19px) !important;
    line-height: 1 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }
  .key.enter { font-size: clamp(13px, 3.8vw, 16px) !important; letter-spacing: 0.02em; }
  .key.backspace { font-size: clamp(18px, 5vw, 22px) !important; }
}

/* Desktop/tablet: make tiles smaller so the keyboard is reachable without scrolling */
@media (min-width: 900px) {
  /* Shrink the board width → smaller tiles → shorter total height */
  #game-board.board { max-width: 420px !important; padding-inline: 0 !important; }
  #game-board .row { gap: 6px !important; }
  #game-board .tile { font-size: clamp(18px, 2.0vw, 24px) !important; }

  /* Keep keyboard tidy and centered */
  #keyboard.keyboard { max-width: 520px !important; padding-inline: 0 !important; }
  .keyboard-row { column-gap: 6px !important; }
  .key { min-height: 44px !important; font-size: 0.95rem !important; }
}
/* ================================
   Thinkle — Visual Refresh
   Circles + Cool (cyan/violet) palette
   Place this at the END of thinkle/style.css
   ================================ */

.thinkle-page {
  /* Tunable theme tokens */
  --tile-bg:        #0b132b;   /* deep blue */
  --tile-border:    #1f3b57;   /* blue border */
  --tile-correct:   #22d3ee;   /* cyan */
  --tile-present:   #a78bfa;   /* violet */
  --tile-absent:    #334155;   /* slate */

  --key-bg:         #293241;   /* keyboard base */
  --key-border:     #415a77;
  --key-correct:    #06b6d4;   /* cyan */
  --key-present:    #8b5cf6;   /* violet */
  --key-absent:     #334155;   /* slate */

  --glow-correct:   0 0 0.5rem rgba(34,211,238,.45);
  --glow-present:   0 0 0.5rem rgba(167,139,250,.4);
}

/* ----- Board: circles + new colors ----- */
.thinkle-page #game-board .tile {
  background: var(--tile-bg) !important;
  border-color: var(--tile-border) !important;
  border-radius: 50% !important;         /* ◯ make them circles */
  aspect-ratio: 1 / 1 !important;        /* keep perfectly round on all screens */
  font-weight: 800;
  letter-spacing: .03em;
  transition: background .18s ease, border-color .18s ease, transform .08s ease;
}

.thinkle-page #game-board .tile.correct {
  background: var(--tile-correct) !important;
  border-color: var(--tile-correct) !important;
  box-shadow: var(--glow-correct);
  color: #0b1220;                        /* high contrast on cyan */
}

.thinkle-page #game-board .tile.present {
  background: var(--tile-present) !important;
  border-color: var(--tile-present) !important;
  box-shadow: var(--glow-present);
  color: #0b1220;
}

.thinkle-page #game-board .tile.absent {
  background: var(--tile-absent) !important;
  border-color: var(--tile-absent) !important;
  color: #e5e7eb !important;
}

/* little “pop” when a state is applied */
.thinkle-page #game-board .tile.correct,
.thinkle-page #game-board .tile.present,
.thinkle-page #game-board .tile.absent {
  transform: scale(1.02);
}

/* ----- Keyboard: pills + matching colors ----- */
.thinkle-page #keyboard .key {
  background: var(--key-bg) !important;
  border-color: var(--key-border) !important;
  border-radius: 999px !important;       /* pill keys */
  color: #fff !important;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.thinkle-page #keyboard .key:hover { transform: translateY(-1px); }

.thinkle-page #keyboard .key.correct {
  background: var(--key-correct) !important;
  border-color: var(--key-correct) !important;
  color: #082a2f !important;
  box-shadow: var(--glow-correct);
}
.thinkle-page #keyboard .key.present {
  background: var(--key-present) !important;
  border-color: var(--key-present) !important;
  color: #1b1030 !important;
  box-shadow: var(--glow-present);
}
.thinkle-page #keyboard .key.absent {
  background: var(--key-absent) !important;
  border-color: var(--key-absent) !important;
}

/* ----- Mobile tweaks: keep circles + leave more room for keyboard ----- */
@media (max-width: 600px) {
  /* Circles must stay 1:1 to remain round */
  .thinkle-page #game-board .tile {
    aspect-ratio: 1 / 1 !important;
    /* slightly smaller text so keyboard is more visible */
    font-size: clamp(15px, 5.2vw, 22px) !important;
  }

  /* ENTER text fits comfortably on pills */
  .thinkle-page #keyboard .key.enter {
    font-size: clamp(13px, 3.8vw, 16px) !important;
    letter-spacing: 0.02em;
  }
}
/* Present = right letter, wrong spot
   Add a small corner badge + subtle stripes so it's clear even without the old yellow. */
.thinkle-page #game-board .tile.present {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.16) 0,
      rgba(255,255,255,.16) 6px,
      transparent 6px,
      transparent 12px
    ),
    var(--tile-present) !important;   /* keep our violet base */
  border-color: var(--tile-present) !important;
  color: #0b1220 !important;
  box-shadow: var(--glow-present);
}

/* small top-right badge to reinforce “move me” */
.thinkle-page #game-board .tile.present::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  background: #0b1220;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  opacity: .9;
}

/* keyboard present keys get a tiny corner notch cue too */
.thinkle-page #keyboard .key.present {
  position: relative;
  background: var(--key-present) !important;
  border-color: var(--key-present) !important;
  color: #1b1030 !important;
  box-shadow: var(--glow-present);
}
.thinkle-page #keyboard .key.present::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 6px;
  height: 6px;
  background: #1b1030;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  opacity: .9;
}
/* === Black out keys that aren't in the word (ABSENT) === */
.thinkle-page #keyboard .key.absent {
  background: #0b0b0b !important;   /* near-black */
  border-color: #0b0b0b !important;
  color: #7a7a7a !important;         /* dim but readable */
  box-shadow: none !important;
  filter: grayscale(1) contrast(.9) brightness(.9);
  transform: none !important;        /* no hover pop */
}

/* Keep "blacked-out" keys flat on hover/active */
.thinkle-page #keyboard .key.absent:hover,
.thinkle-page #keyboard .key.absent:active {
  background: #0b0b0b !important;
  border-color: #0b0b0b !important;
  color: #7a7a7a !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Optional: make board tiles for ABSENT a touch darker to match the vibe */
.thinkle-page #game-board .tile.absent {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #e5e5e5 !important;
}
/* === Docked keyboard (mobile) — full width, fixed to bottom === */
:root{
  --kb-height: 260px;                          /* JS will overwrite this */
  --kb-safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 900px){
  /* Give the play area enough bottom padding so the fixed keyboard doesn’t overlap */
  body.kb-docked .thinkle-page{
    padding-bottom: calc(var(--kb-height) + var(--kb-safe-bottom) + 8px);
  }

  /* Dock the keyboard bar */
  body.kb-docked #keyboard.keyboard{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0 !important;
    width: 100% !important; max-width: none !important;
    padding: 10px 10px calc(10px + var(--kb-safe-bottom)) !important;
    background: linear-gradient(180deg, rgba(14,16,20,.96), rgba(14,16,20,.98));
    backdrop-filter: blur(6px);
    border-top: 1px solid #2a2a2a;
    box-shadow: 0 -8px 24px rgba(0,0,0,.5);
    z-index: 1000;
  }

  /* Rows always fill the full width */
  body.kb-docked #keyboard .keyboard-row{
    display: grid !important;
    width: 100%;
    column-gap: 8px;
    row-gap: 10px;
  }
  body.kb-docked #keyboard .keyboard-row:nth-child(1){ grid-template-columns: repeat(10, 1fr); }
  body.kb-docked #keyboard .keyboard-row:nth-child(2){ grid-template-columns: repeat(9, 1fr); }
  body.kb-docked #keyboard .keyboard-row:nth-child(3){ grid-template-columns: 1.35fr repeat(7, 1fr) 1.65fr; }

  /* Nice big tap targets; ENTER text fits */
  body.kb-docked #keyboard .key{
    min-height: clamp(52px, 13.5vw, 64px);
    font-size: clamp(15px, 4.6vw, 19px);
  }
  body.kb-docked #keyboard .key.enter{
    font-size: clamp(13px, 3.8vw, 16px);
    letter-spacing: .02em;
  }
}
/* Mobile: fit all 6 rows above the docked keyboard */
@media (max-width: 600px) {
  :root {
    /* JS will overwrite these with exact values; these are safe fallbacks */
    --tilePx: 54px;
    --tileGapM: 6px;
  }

  /* Keep a small, even gutter */
  .thinkle-page { padding: 12px 0 !important; }
  .thinkle-page .container { max-width: 100% !important; padding: 0 !important; }

  /* Board uses fixed px tiles driven by --tilePx so we can guarantee 6 rows fit */
  #game-board.board {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 8px !important;
    margin: 0 auto 10px !important;
    gap: var(--tileGapM) !important;
  }
  #game-board .row {
    display: grid !important;
    grid-template-columns: repeat(5, var(--tilePx)) !important;
    gap: var(--tileGapM) !important;
    justify-content: center; /* if height becomes the limiter, keep centered */
  }
  #game-board .tile {
    width: var(--tilePx) !important;
    height: var(--tilePx) !important;
    aspect-ratio: auto !important;   /* explicit size beats aspect-ratio */
    /* scale letters with tile size */
    font-size: clamp(14px, calc(var(--tilePx) * 0.45), 26px) !important;
  }
}
/* Hide header while actively playing */
.play-mode .cb-header,
.play-mode header.site-header { display: none !important; }

/* Keep content scrollable above docked keyboard */
.kb-docked main { padding-bottom: var(--kb-height, 0); }

/* Circles stay as-is (just a reminder) */
#game-board .tile { border-radius: 9999px; }