:root{
  --bg:#ffffff;
  --ink:#1c1c1e;
  --tile:#e8e6dd;
  --tile-shadow:#d8d5c9;
  --bridge:#ddd9cd;
  --blue:#4169f1;
  --blue-dark:#2f50d8;
  --green:#2e9e5b;
  --orange:#f59e0b;
  --red:#e0524a;
  --muted:#b8b8b4;
  --card:#ffffff;
  --hint-bg:#c4d2fb; /* solid light-blue hint marker — subtle, lighter than the blue highlight */
  --radius:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
.app{
  width:100%;
  max-width:700px;
  padding:50px 16px calc(40px + env(safe-area-inset-bottom));
}
/* Hidden on first load until init() picks and applies a puzzle, so the
   player never sees an empty board flash or layout shift. */
.app{opacity:0;transition:opacity .18s ease;}
body.loaded .app{opacity:1;}

/* Header */
header{text-align:center;}
h1{
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:25px;
  margin:0;
  letter-spacing:.3px;
  cursor:pointer;
  color:var(--ink);
}
.puz-num{
  font:inherit;
  color:inherit;
  background:none;border:none;cursor:pointer;
  padding:0;
}
/* Header icons: the burger sits at the board's left edge; the rotate + hint pair
   sit together at the board's right edge. Both are vertically centred on the
   title, which stays centred in the header. The burger opens the settings menu. */
#appHeader{position:relative;}
.top-icon.header-menu,
.header-icons{
  position:absolute;
  top:50%;transform:translateY(-50%);
}
.top-icon.header-menu{left:calc(50% - min(86vw,52vh,420px) / 2);}
.header-icons{
  right:calc(50% - min(86vw,52vh,420px) / 2);
  display:flex;align-items:center;gap:2px;
}
/* Only during play: the completion screen hides the forming row, so hide the
   rotate/hint icons too (home/tutorial hide the whole header already). The
   burger stays visible on completion so the Paused menu is reachable. */
body.done .header-icons{display:none;}

/* TEMP: rotate icon hidden for now. */
#rotateBtnTop{display:none;}

/* Subtitle / forming word. Constrained to the board's width and laid out as a
   row so the rotate/hint icons sit at the grid's left/right edges, in line with
   the centred forming word / "x/x words" text. */
.subtitle{
  position:relative;
  text-align:center;
  height:40px;
  margin:20px auto 0;
  width:min(86vw,52vh,420px);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
/* Confetti burst behind the "Longest word!" message. */
.forming-confetti{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:340px;height:180px;max-width:100vw;
  pointer-events:none;z-index:0;
}
.forming{
  position:relative;z-index:1;
  flex:1 1 auto;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:25px;
  line-height:1;
  text-align:center;
  text-decoration:none;
  color:var(--blue);
  letter-spacing:0px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  transition:opacity .2s ease,transform .26s cubic-bezier(.34,1.56,.64,1);
}
/* Icon buttons flanking the forming word (rotate left, hint right). They match
   the header's dark ink colour and turn blue on hover via currentColor. */
.top-icon{
  position:relative;
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--ink);
}
.top-icon svg{width:26px;height:26px;display:block;}
/* Small blue "hints left" badge on the hint icon. */
.hint-badge{
  position:absolute;top:1px;right:1px;
  min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:var(--blue);color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:11px;line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  pointer-events:none;
}
@media (hover:hover){ .top-icon:hover{color:var(--blue);} }
.top-icon:focus{outline:none;}
.top-icon:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px;}
/* One full turn of the rotate icon each time it's tapped. */
@keyframes iconSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.top-icon.spinning svg{animation:iconSpin .95s cubic-bezier(.45,.05,.2,1);}
.forming.fading{opacity:0;transform:scale(.8);}
.forming.hint{color:var(--muted);font-weight:600;letter-spacing:.5px;font-size:16px;cursor:default;}
.forming.remaining{color:var(--ink);font-size:25px;letter-spacing:.5px;cursor:pointer;}
.forming.remaining.intro{cursor:default;}
.forming.remaining.count{color:var(--ink);}
.forming.active{color:var(--blue);}
@media (hover:hover){
  .forming.remaining:hover{color:var(--blue);}
  .forming.active:not(.pressing):hover{color:var(--blue);}
}
.forming.complete{color:var(--green);cursor:pointer;letter-spacing:.5px;font-size:clamp(18px,5vw,24px);}
.forming.res-good{color:var(--green);cursor:default;letter-spacing:normal;animation:wordPop .5s cubic-bezier(.34,1.56,.64,1) both;}
.forming.res-bonus{color:var(--orange);cursor:default;letter-spacing:normal;animation:wordPop .5s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes wordPop{
  0%  {transform:scale(.6);opacity:0;}
  55% {transform:scale(1.12);opacity:1;}
  100%{transform:scale(1);opacity:1;}
}
.forming.feedback{letter-spacing:normal;cursor:default;animation:msgShake .32s ease;}
.forming.feedback.bad{color:#e0392b;}
.forming.feedback.warn{color:var(--orange);}
@keyframes msgShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-4px);}
  40%{transform:translateX(4px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
}

/* Board */
.board-wrap{margin:30px 0 0;display:flex;align-items:center;justify-content:center;position:relative;}

/* Brief full-screen loader shown while switching puzzles, so a change is always
   perceptible (otherwise the swap can be instant and easy to miss). */
.puz-loader{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease;
  z-index:200;
}
.puz-loader.show{opacity:1;visibility:visible;}
.puz-spinner{
  width:38px;height:38px;border-radius:50%;
  border:4px solid var(--bridge);
  border-top-color:var(--blue);
  animation:puzSpin .7s linear infinite;
}
@keyframes puzSpin{to{transform:rotate(360deg);}}
/* The new puzzle's board fades/rises in once the loader clears. */
@keyframes boardIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
#board.board-in{animation:boardIn .34s cubic-bezier(.22,1,.36,1) both;}
#board{
  position:relative;
  width:min(86vw,52vh,420px);
  aspect-ratio:1/1;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
/* Wrapper we spin to rotate the whole grid (bridges + tiles) as one unit.
   A springy easing with a soft overshoot makes the quarter-turn land with a
   satisfying little settle rather than a flat, mechanical turn. Because the
   letters counter-rotate on the very same curve, they stay upright the whole
   way through — even while the wrapper overshoots and eases back. */
#boardRotate{
  position:absolute;inset:0;
  transform-origin:50% 50%;
  transition:transform .95s cubic-bezier(.45,.05,.2,1);
}
/* Letters counter-rotate by the same amount so they stay upright as it turns. */
.tile-letter{
  display:block;
  transform:rotate(var(--tile-rot,0deg));
  transition:transform .95s cubic-bezier(.45,.05,.2,1);
}
/* Instant reset (no spin) when a fresh puzzle loads. */
#boardRotate.no-rot-trans,
#boardRotate.no-rot-trans .tile-letter{transition:none !important;}

/* A scale flourish that plays alongside the spin: the board eases INWARD (a
   gentle shrink) at the midpoint of the turn, then settles back out to its
   full size. It never grows past 100%. */
@keyframes boardSpinPulse{
  0%  {transform:scale(1);}
  50% {transform:scale(.8);}
  100%{transform:scale(1);}
}
#board.spin-pulse{animation:boardSpinPulse .95s cubic-bezier(.45,.05,.2,1);}

#bridges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.bridge{stroke:var(--tile);stroke-width:5;stroke-linecap:round;}
.bridge.res-good{stroke:var(--green);}
.bridge.res-bonus{stroke:var(--orange);}
.bridge.hint-bridge{stroke:var(--hint-bg);}
/* Replay flash (full word already revealed): bridges flash active blue, then
   settle back to the light-blue hint colour. */
@keyframes hintBridgeFlash{
  0%  {stroke:var(--hint-bg);}
  35% {stroke:var(--blue);}
  100%{stroke:var(--hint-bg);}
}
.bridge.hint-bridge-flash{animation:hintBridgeFlash .85s ease both;}
.bridge.gone{opacity:0;stroke-width:0;}
.pathseg{fill:none;stroke:var(--tile);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.pathseg.live{stroke:var(--blue);}
.pathseg.res-good{stroke:var(--green);}
.pathseg.res-bonus{stroke:var(--orange);}
.tile{
  position:absolute;
  width:20%;aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--tile);
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:clamp(24px,7.4vw,36px);
  color:var(--ink);
  cursor:pointer;
  z-index:2;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.tile.hint-letter{background:var(--hint-bg);color:#1e2a55;}
.tile.active{background:var(--blue);color:#fff;}
.tile.res-good{background:var(--green);color:#fff;}
.tile.res-bonus{background:var(--orange);color:#fff;}
.tile.gone{opacity:0;pointer-events:none;}

/* Disable transitions/animations on initial paint & puzzle load */
#board.no-trans .tile,
#board.no-trans .bridge,
#board.no-trans .pathseg{transition:none !important;animation:none !important;}

@keyframes tileShake{
  0%,100%{transform:translate(-50%,-50%);}
  20%{transform:translate(calc(-50% - 3px),-50%);}
  40%{transform:translate(calc(-50% + 3px),-50%);}
  60%{transform:translate(calc(-50% - 2px),-50%);}
  80%{transform:translate(calc(-50% + 2px),-50%);}
}
.tile.shake{animation:tileShake .3s ease;}

/* Valid word: each tile pops with an expanding green ring, rippling along the word */
@keyframes tilePop{
  0%  {transform:translate(-50%,-50%) scale(1);}
  45% {transform:translate(-50%,-50%) scale(1.16);}
  100%{transform:translate(-50%,-50%) scale(1);}
}
.tile.pop{animation:tilePop .62s cubic-bezier(.34,1.56,.64,1) both;}

/* Hint reveal: the tile pops (bouncy scale) and tints blue, then settles to the
   subtle light-blue hint marker (.hint-letter). The scale and the colour are
   separate animations so only the scale uses the overshoot easing — otherwise the
   colour would overshoot past the final light-blue and visibly snap back. */
@keyframes hintPop{
  0%  {transform:translate(-50%,-50%) scale(1);}
  35% {transform:translate(-50%,-50%) scale(1.16);}
  100%{transform:translate(-50%,-50%) scale(1);}
}
@keyframes hintTint{
  0%  {background:var(--tile);color:var(--ink);}
  35% {background:var(--blue);color:#fff;}
  100%{background:var(--hint-bg);color:#1e2a55;}
}
/* Same tint for letters already lit light-blue, so they don't flash back to the
   default tile colour before pulsing. */
@keyframes hintTintLit{
  0%  {background:var(--hint-bg);color:#1e2a55;}
  35% {background:var(--blue);color:#fff;}
  100%{background:var(--hint-bg);color:#1e2a55;}
}
.tile.hint-pulse{animation:hintPop .85s cubic-bezier(.34,1.56,.64,1) both, hintTint .85s ease both;z-index:3;}
.tile.hint-pulse-lit{animation:hintPop .85s cubic-bezier(.34,1.56,.64,1) both, hintTintLit .85s ease both;z-index:3;}


/* Used-up tile melts away: shrink + fade */
@keyframes tileVanish{
  0%  {transform:translate(-50%,-50%) scale(1);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(0);opacity:0;}
}
.tile.vanish{animation:tileVanish .42s cubic-bezier(.4,0,.5,1) both;}

/* Bridge melts away: thins to nothing while fading */
@keyframes bridgeVanish{
  0%  {opacity:1;stroke-width:5;}
  100%{opacity:0;stroke-width:0;}
}
.bridge.vanish{animation:bridgeVanish .42s cubic-bezier(.4,0,.5,1) both;}

/* Modals */
.overlay{
  position:fixed;inset:0;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(3px);
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
  z-index:100;
}
.overlay.open{display:flex;}
.modal{
  background:var(--card);
  width:100%;max-width:420px;
  border-radius:24px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  padding:22px 22px 26px;
  padding-top: 0px;
  max-height:70vh;
  overflow-y:auto;
  overscroll-behavior:none;
  -webkit-overflow-scrolling:touch;
  animation:rise .22s ease;
}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
.modal-head{
  display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:5;
  background:var(--card);
  margin:-22px -22px 26px;
  padding:22px 22px 12px;
}
.modal-head h2{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:24px;margin:0;text-align:center;}
.modal-close{
  position:absolute;right:18px;top:18px;
  background:none;border:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;
  width:36px;height:36px;border-radius:50%;
}
.modal-close:hover{color:var(--ink);background:#f0efe9;}
.modal-back{
  position:absolute;left:18px;top:18px;
  background:none;border:none;font-size:32px;font-weight:700;line-height:1;color:var(--muted);cursor:pointer;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding-bottom:4px;
}
.modal-back:hover{color:var(--ink);background:#f0efe9;}
.dark .modal-back:hover{color:var(--ink);background:rgba(255,255,255,.08);}
.modal-sub{text-align:center;color:var(--muted);font-size:18px; font-weight: 700; margin-top: 0px;}

/* Puzzle book type tabs (mini / classic). They sit just above the countdown and
   stay stuck to the top (right below the sticky header) while the list scrolls.
   Full-bleed background so scrolling rows pass cleanly underneath. `top` is set
   in JS to the header's measured height. */
.book-tabs{
  display:flex;gap:8px;justify-content:center;
  position:sticky;top:0;z-index:4;
  background:var(--card);
  margin:0 -22px;
  padding-bottom:20px;
}
/* One-off "new Master mode" note for existing players. */
.book-note{
  position:relative;
  background:#f1f6ff;border:1px solid #d9e6ff;border-radius:14px;
  padding:16px 40px 14px 16px;margin:0 0 18px;
  font-size:15px;line-height:1.5;color:var(--ink);
}
.book-note-body p{margin:0 0 10px;}
.book-note-body p:last-child{margin-bottom:0;}
.book-note-close{
  position:absolute;top:8px;right:8px;
  background:none;border:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;
  width:30px;height:30px;border-radius:50%;
}
.book-note-close:hover{color:var(--ink);background:rgba(0,0,0,.06);}
.dark .book-note{background:#182234;border-color:#26344d;}
.dark .book-note-close:hover{background:rgba(255,255,255,.08);}

/* Quick loader shown when switching tabs, so the change is obvious. */
.book-loading{display:flex;justify-content:center;padding:44px 0;}
.book-tab{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:16px;
  padding:8px 20px;border-radius:16px;border:2px solid #ece9e0;
  background:#fff;color:var(--muted);cursor:pointer;
  transition:border-color .12s,background .12s,color .12s;
}
.book-tab:hover{border-color:var(--blue);}
.book-tab.active{border-color:#bfe3c8;background:#f1faf3;color:var(--ink);}
.dark .book-tab{border-color:#2e313c;background:var(--card);}
.dark .book-tab.active{border-color:#2f5d40;background:#16261c;color:var(--ink);}
/* Daily streak line beneath each mode label. */
.book-tab-streak{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11.5px;font-weight:700;color:var(--muted);line-height:1;
}
.book-tab-streak.on{color:var(--orange);}
.book-tab-streak .c-pill-ico{width:12px;height:12px;margin-left:0;}

/* Puzzle book rows */
.book-row{
  display:flex;align-items:center;justify-content:space-between;
  border:2px solid #ece9e0;border-radius:14px;
  padding:14px 16px;margin-bottom:10px;
  cursor:pointer;background:#fff;font-weight:700;
  transition:border-color .12s,background .12s;
}
.book-row:hover{border-color:var(--blue);}
.book-row.active{border-color:#bfe3c8;background:#f1faf3;}
.book-row.disabled{cursor:default;opacity:.6;}
.book-row .label{font-family:'Baloo 2',sans-serif;font-size:18px;}
.pill{font-size:13px;font-weight:800;padding:5px 12px;border-radius:999px;background:#f0efe9;color:var(--muted);}
.pill.progress{background:#fdebcf;color:#c47d10;}
.pill.done{background:#dff3e6;color:var(--green);}

/* Definitions list */
.def-item{padding:14px 0;border-bottom:1px solid #eee;}
.def-item:last-child{border-bottom:none;}
.def-word{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px;letter-spacing:normal;}
.def-word.bonus{color:var(--orange);}
.def-text{font-size:18px;line-height:1.45;margin:4px 0 0;}
.def-ex{font-size:16px;color:var(--muted);font-style:italic;margin-top:4px;}
.def-empty{text-align:center;color:var(--muted);padding:24px 0;}

/* Completion screen (in-page, replaces the board) */
body.done{overflow-y:auto;height:auto;min-height:100dvh;}
body.done .subtitle,
body.done .board-wrap{display:none;}

.complete-screen{display:none;width:100%;max-width:420px;margin:20px auto 0;text-align:center;}
.complete-screen.show{display:block;}
.c-line{opacity:0;}
.complete-screen.show .c-line{animation:riseIn .55s cubic-bezier(.22,1,.36,1) both;}
@keyframes riseIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

.c-time{position:relative;}
.c-confetti{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:360px;height:200px;max-width:100vw;pointer-events:none;z-index:0;}
.c-time-val{position:relative;z-index:1;display:block;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:46px;line-height:1.05;color:var(--ink);margin-bottom:15px;font-variant-numeric:tabular-nums;}
.c-next{color:var(--muted);font-weight:800;font-size:19px;margin:18px 0 0;font-variant-numeric:tabular-nums;}

/* Action buttons side by side */
.c-actions{display:flex;gap:10px;margin-top:10px;}
.c-actions .btn{margin-top:0;flex:1;}
.btn-share{background:#6aaa64;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:9px;}
.btn-share:hover{background:#5c9657;}
.btn-ico{flex:none;width:18px;height:18px;align-self:center;vertical-align: middle;margin-right: 5px;}
.btn-challenge{background:var(--blue);color:#fff;position:relative;overflow:visible;}
.btn-challenge:hover{background:var(--blue-dark);}

/* "New master mode!" tag on the More button, until a Master puzzle is played. */
.btn-badge{
  position:absolute;top:-9px;right:-7px;
  background:var(--orange);color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:11px;letter-spacing:.2px;
  padding:3px 8px;border-radius:999px;line-height:1.15;white-space:nowrap;
  box-shadow:0 3px 8px rgba(0,0,0,.2);
  animation:badgePop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.btn-badge:empty{display:none;}
@keyframes badgePop{0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}}

/* Today's words dictionary */
.c-defs-head{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:25px;text-align:center;margin:36px 0 18px;}
.c-defs{text-align:center;}
/* The definitions subheader was removed, so space the main list off the actions above. */
#cDefs{margin-top:50px;}
.c-defs .def-item{
  background:#faf9f4;
  border:1px solid #ece9df;
  border-radius:16px;
  padding:18px 18px 16px;
  margin-bottom:12px;
}
.c-defs .def-word{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:22px;letter-spacing:normal;
  color:var(--ink);
}
.c-defs .def-word.bonus{color:var(--orange);}
.c-defs .def-divider{width:34px;height:3px;border-radius:3px;background:#e4e0d3;margin:9px auto;}
.c-defs .def-text{font-size:20px;line-height:1.5;color:var(--ink);}
.c-defs .def-ex{font-size:17px;color:var(--muted);font-style:italic;margin-top:9px;line-height:1.45;}

/* Completion pills (under the time): average comparison + hints used */
.c-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:-2px 0 16px;}
.c-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;
  padding:8px 15px;border-radius:999px;
  background:#f0efe9;color:var(--muted);font-variant-numeric:tabular-nums;
}
.c-pill:empty{display:none;}
.c-pill-ico{flex:none;margin-left:-2px;}
.c-pill-avg.faster{background:#dff3e6;color:var(--green);}
.c-pill-hints{background:#e6ecff;color:var(--blue);}
.c-pill-streak{background:#ffe7d1;color:var(--orange);}
.c-pill.anim-in{animation:riseIn .5s cubic-bezier(.22,1,.36,1) both;}
.complete-screen.tut .c-pills{display:none;}
.c-cross{margin-top:28px;}
.c-cross-pill{
  display:inline-block;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;
  padding:9px 18px;border-radius:999px;
  background:#efe6ff;color:#6a3fd6;text-decoration:none;
  transition:background .15s ease,transform .1s ease;
}
.c-cross-pill u{text-decoration:underline;}
.c-cross-pill:hover{background:#e4d6ff;}
.c-cross-pill:active{transform:scale(.97);}
.complete-screen.tut .c-cross{display:none;}
.dark .c-cross-pill{background:#2c2540;color:#b79dff;}
.dark .c-cross-pill:hover{background:#372c52;}

/* Random praise line under the time/average pill */
.c-msg{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px;color:var(--ink);margin:-4px 0 16px;}
.c-msg:empty{display:none;}
.complete-screen.tut .c-msg{display:none;}

/* Per-word community time comparison (You / Average / Difference) */
.def-stats{display:flex;justify-content:center;gap:22px;margin-top:14px;}
.def-stat{font-family:'Baloo 2',sans-serif;font-weight:600;font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums;}
.def-stat-label{display:block;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:2px;}
.def-diff.faster{color:var(--green);}
.def-diff.slower{color:var(--red);}

.btn{
  display:block;width:100%;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;
  padding:14px;border-radius:14px;border:none;cursor:pointer;margin-top:10px;
}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-dark);}
.btn-secondary{background:#f0efe9;color:var(--ink);}
.btn-secondary:hover{background:#e6e4db;}

.loading{text-align:center;color:var(--muted);padding:20px;}

/* Row under the grid holding the timer and the Hint button, evenly spaced. */
.under-grid{
  display:flex;align-items:center;justify-content:center;gap:36px;
  width:fit-content;margin:40px auto 0;
}
body.done .under-grid,
body.tutorial .under-grid,
body.show-howlink .under-grid{display:none;}

/* Timer + pause control under the grid (normal daily play). Tapping it opens
   the menu, which pauses the clock. */
.play-timer{
  display:flex;align-items:center;
  width:fit-content;margin:0;
  background:none;border:none;padding:6px 4px;cursor:pointer;
  color:var(--muted);font:inherit;
}
.play-timer-val{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:25px;
  font-variant-numeric:tabular-nums;color:var(--muted);line-height:1.1;
  transition:color .2s ease;
}
@media (hover:hover){
  .play-timer:hover .play-timer-val{color:var(--blue);}
}
/* Flash the timer while a hint's 30s penalty counts up. */
.play-timer-val.penalty{color:var(--orange);}
body.no-timer .play-timer{display:none;}

/* Text-only "Hint"/"Rotate" buttons — match the timer's size/colour, sitting
   beside it. */
.hint-btn,.rotate-btn{
  position:relative;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:25px;line-height:1.1;
  color:var(--muted);
  background:none;border:none;padding:6px 4px;cursor:pointer;
}
/* Under-grid text buttons hidden — the icons above the grid replace them. */
.under-grid .hint-btn,.under-grid .rotate-btn{display:none;}
/* Only apply hover colour on devices that truly hover, so a tap on mobile doesn't
   leave the text stuck blue. */
@media (hover:hover){
  .hint-btn:hover,.rotate-btn:hover{color:var(--blue);}
}
/* No lingering focus ring after a tap/click; keep one for keyboard users. */
.hint-btn:focus,.rotate-btn:focus{outline:none;}
.hint-btn:focus-visible,.rotate-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;}

/* "How to play" link under the grid — shown instead of the timer for languages
   without a tutorial (e.g. Spanish) until the player finds their first word. */
.how-link{
  display:none;
  text-align:center;
  margin:34px 0 0;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:clamp(20px,5.5vw,26px);
  letter-spacing:.3px;
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-underline-offset:4px;
  cursor:pointer;
}
.how-link:hover{color:var(--blue);}
body.show-howlink .play-timer{display:none;}
body.show-howlink .how-link{display:block;}
body.done .how-link,
body.tutorial .how-link{display:none;}

/* ===== Tutorial (first-ever visit) ===== */
/* Always-visible instruction line, in its own slot so it never shares the
   forming-word div. A generous min-height keeps the board from shifting as the
   message changes between stages. */
/* The brand header and forming-word slot are hidden during the tutorial; the
   instruction line above the grid takes their place. */
.tut-text{display:none;}
body.tutorial #appHeader{display:none;}
body.tutorial .subtitle{display:none;}
body.tutorial .tut-text{
  display:block;
  text-align:center;
  margin:0px auto 0;
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:clamp(19px,5.2vw,25px);
  line-height:1.7;
  color:var(--ink);
}
body.tutorial.done .tut-text{display:none;}
body.tutorial .tut-text b{color:var(--blue);font-weight:800;letter-spacing:1px;}
/* Stage-change transition: shrink the old instruction out, grow the new one in. */
@keyframes tutTextOut{from{opacity:1;transform:scale(1);}to{opacity:0;transform:scale(.82);}}
@keyframes tutTextIn{from{opacity:0;transform:scale(.82);}to{opacity:1;transform:scale(1);}}
body.tutorial .tut-text.tut-anim-out{animation:tutTextOut .18s ease forwards;}
body.tutorial .tut-text.tut-anim-in{animation:tutTextIn .28s cubic-bezier(.34,1.56,.64,1) both;}
/* First line of each step reserves room for two lines (so it can wrap on mobile
   without shifting the board) and adds a gap before the "Drag …" line. */
body.tutorial .tut-text .tut-l1{
  display:block;
  margin-bottom:14px;
}

/* "Skip tutorial" text under the grid — sits where the timer normally is and
   matches its font size/style. */
.tut-skip{
  display:none;
  text-align:center;
  margin:40px 0 0;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:25px;
  line-height:1.1;
  color:var(--muted);
  cursor:pointer;
}
.tut-skip:hover{color:var(--blue);}
body.tutorial .tut-skip{display:block;}
body.tutorial.done .tut-skip{display:none;}

/* Tutorial completion screen: a "Tutorial complete!" heading + time + message +
   a single button. Hide the normal share/more actions and the dictionary. */
.c-tut-head{display:none;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:26px;color:var(--ink);margin:0 0 12px;}
.c-tut-actions{display:none;}
.complete-screen.tut .c-actions:not(.c-tut-actions){display:none;}
.complete-screen.tut .c-tut-head{display:block;}
.complete-screen.tut .c-tut-actions{display:flex;margin-top:6px;}

/* Make the header feel clickable (opens the menu) */
#appHeader{cursor:pointer;}

/* Menu list */
.menu-list{display:flex;flex-direction:column;gap:8px;}
.menu-item{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:18px;
  color:var(--ink);text-align:left;
  background:var(--card);border:2px solid #ece9e0;border-radius:14px;
  padding:15px 16px;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.menu-item:hover{border-color:var(--blue);}
.menu-arrow{color:var(--muted);font-size:22px;line-height:1;font-weight:700;}
/* Change puzzle / Send feedback / Return home only appear in the in-game
   "Paused" menu, not the home "Settings" menu. */
.menu-paused-only{display:none;}
body.menu-paused .menu-paused-only{display:flex;}

/* Language selector */
.menu-lang-current{display:flex;align-items:center;gap:8px;color:var(--muted);}
.menu-lang-current .lang-flag{font-size:22px;line-height:1;}
.lang-row{display:flex;align-items:center;gap:12px;}
.lang-row .lang-flag{font-size:24px;line-height:1;}
.lang-row .lang-name{font-family:'Baloo 2',sans-serif;}
.lang-check{color:var(--green);font-size:20px;font-weight:800;line-height:1;}
.menu-item.active{border-color:#bfe3c8;background:#f1faf3;}
.dark .menu-item.active{border-color:#2f5d40;background:#16261c;}

/* Toggle switch */
.switch{
  position:relative;flex:0 0 auto;
  width:46px;height:28px;border-radius:999px;
  background:#d6d3c8;transition:background .18s ease;
}
.switch-knob{
  position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .18s ease;
}
.switch.on{background:var(--blue);}
.switch.on .switch-knob{transform:translateX(18px);}

/* How to play content */
.how-body{font-size:18px;line-height:1.55;color:var(--ink);}
.how-body p{margin:0 0 12px;}

.how-section{margin:0;}

.how-subhead{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px;color:var(--ink);
  margin:26px 0 16px;
}

.how-steps{list-style:none;margin:0;padding:0;}
.how-steps li{
  display:flex;align-items:center;gap:14px;
  margin:0 0 16px;
  font-size:18px;line-height:1.5;
}
.how-steps li:last-child{margin-bottom:0;}
.how-steps .num{
  flex:0 0 auto;
  width:30px;height:30px;border-radius:50%;
  background:var(--blue);color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(65,105,241,.35);
}
.how-section.is-controls .how-steps .num{
  background:var(--green);
  box-shadow:0 2px 6px rgba(46,158,91,.35);
}

/* Feedback form */
.fb-form{display:flex;flex-direction:column;}
.fb-label{font-weight:800;font-size:14px;margin:6px 0 6px;color:var(--ink);}
.fb-input,.fb-textarea{
  width:100%;font-family:'Nunito',sans-serif;font-size:15px;
  color:var(--ink);background:var(--card);
  border:2px solid #ece9e0;border-radius:12px;padding:12px 14px;
  margin-bottom:12px;resize:vertical;
}
.fb-input:focus,.fb-textarea:focus{outline:none;border-color:var(--blue);}
.fb-status{text-align:center;font-weight:700;font-size:14px;margin:10px 0 0;min-height:18px;color:var(--muted);}
.fb-status.ok{color:var(--green);}
.fb-status.err{color:#e0392b;}
.legal-body{padding:4px 22px 28px;font-size:15px;line-height:1.65;}
.legal-body h3{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;margin:22px 0 6px;color:var(--ink);}
.legal-body h3:first-child{margin-top:2px;}
.legal-body p{margin:0 0 10px;color:var(--muted);}
.legal-body a{color:var(--green);text-decoration:underline;}
.legal-body a:hover{opacity:.8;}
.legal-updated{font-size:13px;margin-top:18px !important;}

/* Bonus word intro modal */
.modal-bonus{
  text-align:center;
  padding-top:34px;
  max-width:380px;
}
.bonus-badge{
  width:78px;height:78px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:#fff;
  background:linear-gradient(150deg,#ffcb5e 0%,#f59e0b 70%);
  box-shadow:0 12px 26px rgba(245,158,11,.45), inset 0 2px 5px rgba(255,255,255,.45);
  animation:bonusPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
.bonus-badge svg{width:38px;height:38px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));}
@keyframes bonusPop{0%{transform:scale(0) rotate(-30deg);opacity:0;}100%{transform:scale(1) rotate(0);opacity:1;}}

.bonus-title{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:26px;line-height:1.2;
  color:var(--orange);margin:0 0 12px;
}
.bonus-body{font-size:18px;line-height:1.55;color:var(--ink);text-align:center;max-width:300px;margin:0 auto;}
.bonus-body p{margin:0 0 14px;}
.bonus-body p:last-child{margin-bottom:0;}
.btn-bonus{
  background:var(--orange);color:#fff;margin-top:24px;
  box-shadow:0 8px 18px rgba(245,158,11,.38);
}
.btn-bonus:hover{filter:brightness(.97);}
.btn-bonus:disabled{opacity:.55;cursor:default;box-shadow:none;}

/* Hint explainer modal */
.modal-hint{
  text-align:center;
  padding-top:34px;
  max-width:380px;
}
.hint-title{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:26px;line-height:1.2;
  color:var(--ink);margin:0 0 14px;
}
.hint-body{font-size:18px;line-height:1.55;color:var(--ink);text-align:center;max-width:300px;margin:0 auto;}
.hint-body p{margin:0 0 14px;}
.hint-body p:last-child{margin-bottom:0;}
.hint-actions{display:flex;gap:10px;margin-top:24px;}
.hint-actions .btn{margin-top:0;flex:1;}

/* Out-of-hints countdown */
.no-hints-timer{
  font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:34px;line-height:1;letter-spacing:.02em;
  color:var(--blue);margin:18px auto 0;
  font-variant-numeric:tabular-nums;
}

/* ===== Home screen ===== */
/* Shown to returning players who have no puzzle in progress. It hides the game
   chrome and presents the daily / master / archive / settings menu. */
#homeScreen{display:none;}
body.home{overflow-y:auto;height:auto;min-height:100dvh;}
/* Hide every direct child of .app except the home screen while it's showing. */
body.home .app > *:not(#homeScreen){display:none !important;}
/* Top-aligned (not vertically centred) so the title sits at the same height as
   the puzzle's header. */
body.home #homeScreen{display:block;}
.home-inner{
  width:100%;max-width:420px;margin:0 auto;
  animation:riseIn .5s cubic-bezier(.22,1,.36,1) both;
}
.home-title{
  font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:clamp(34px,10vw,46px);
  text-align:center;margin:0 0 30px;letter-spacing:.5px;color:var(--ink);cursor:default;
}
.home-buttons{display:flex;flex-direction:column;gap:12px;}
.home-btn{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--card);border:2px solid #ece9e0;border-radius:16px;
  padding:14px 16px;cursor:pointer;color:var(--ink);
  transition:border-color .12s,background .12s,transform .06s;
}
.home-btn:hover{border-color:var(--blue);}
.home-btn:active{transform:scale(.99);}
.home-btn:focus{outline:none;}
.home-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.home-btn-ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.home-btn-ico svg{width:24px;height:24px;display:block;}
.home-ico-daily{background:var(--blue);}
.home-ico-master{background:linear-gradient(150deg,#ffcb5e 0%,#f59e0b 70%);}
.home-ico-plain{background:#eceae1;color:var(--muted);}
.home-btn-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;}
.home-btn-label{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:19px;line-height:1.15;}
.home-btn-status{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px;
  font-family:'Nunito',sans-serif;font-weight:700;font-size:13.5px;color:var(--muted);line-height:1.1;
}
.home-btn-status:empty{display:none;}
.home-btn-status.progress{color:var(--orange);}
.home-btn-status.done{color:var(--green);}
.home-btn-status .home-dot{color:var(--muted);}
.home-btn-status .home-streak{display:inline-flex;align-items:center;gap:3px;color:var(--orange);}
.home-btn-status .home-streak svg{width:12px;height:12px;display:block;}
.home-btn-arrow{flex:0 0 auto;color:var(--muted);font-size:26px;line-height:1;font-weight:700;}
.home-btn.disabled{opacity:.55;cursor:default;}
.home-btn.disabled:hover{border-color:#ece9e0;}
.dark .home-btn{border-color:#2e313c;}
.dark .home-ico-plain{background:#2a2d37;color:var(--muted);}
.dark .home-btn.disabled:hover{border-color:#2e313c;}

/* ===== Dark mode ===== */
:root.dark{
  --bg:#15161c;
  --ink:#e9e9ee;
  --tile:#2c2f3a;
  --tile-shadow:#1c1e26;
  --bridge:#363a47;
  --blue:#6286ff;
  --blue-dark:#4c6ef0;
  --green:#43b873;
  --orange:#f1a83a;
  --red:#f1786e;
  --muted:#6a6b75;
  --card:#1d1f27;
  --hint-bg:#9aa6cc;
}
.dark .overlay{background:rgba(0,0,0,.55);}
.dark .modal{box-shadow:0 18px 50px rgba(0,0,0,.55);}
.dark .modal-close:hover{color:var(--ink);background:rgba(255,255,255,.08);}
.dark .book-row{border-color:#2e313c;background:var(--card);}
.dark .book-row.active{border-color:#2f5d40;background:#16261c;}
.dark .pill{background:#2a2d37;color:var(--muted);}
.dark .pill.progress{background:#3a2f18;color:#e7af52;}
.dark .pill.done{background:#16301f;color:#52c483;}
.dark .def-item{border-bottom-color:#2a2d37;}
.dark .c-defs .def-item{background:#1a1c23;border-color:#2a2d37;}
.dark .c-defs .def-divider{background:#363a47;}
.dark .btn-secondary{background:#2a2d37;color:var(--ink);}
.dark .btn-secondary:hover{background:#353945;}
.dark .menu-item{border-color:#2e313c;}
.dark .fb-input,.dark .fb-textarea{border-color:#2e313c;}
.dark .switch{background:#3a3d48;}
.dark .c-pill{background:#2a2d37;color:var(--muted);}
.dark .c-pill-avg.faster{background:#16301f;color:#52c483;}
.dark .c-pill-hints{background:#222a44;color:var(--blue);}
.dark .c-pill-streak{background:#3a2617;color:var(--orange);}