:root{
  --bg:#ffffff;
  --ink:#1c1c1e;
  --tile:#e8e6dd;
  --tile-shadow:#d8d5c9;
  --bridge:#ddd9cd;
  --blue:#4169f1;
  --blue-dark:#2f50d8;
  --green:#2e9e5b;
  --orange:#f59e0b;
  --muted:#9a9a94;
  --card:#ffffff;
  --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:520px;
  padding:22px 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:clamp(22px,6vw,29px);
  margin:0;
  letter-spacing:.3px;
  cursor:pointer;
}
.puz-num{
  font:inherit;
  color:inherit;
  background:none;border:none;cursor:pointer;
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-underline-offset:4px;
  padding:0;
}
@media (hover:hover){ .puz-num:hover{color:var(--blue);} }

/* Subtitle / forming word */
.subtitle{
  text-align:center;
  height:40px;
  margin:20px 0 0;
  display:flex;align-items:center;justify-content:center;
}
.forming{
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:clamp(22px,6vw,29px);
  line-height:1;
  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);
}
.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:clamp(22px,6vw,29px);letter-spacing:.5px;cursor:pointer;}
.forming.remaining.intro{cursor:default;}
.forming.remaining u{text-decoration-thickness:3px;text-underline-offset:4px;}
.forming.active{color:var(--ink);}
.forming.active:not(.pressing){text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px;}
@media (hover:hover){
  .forming.remaining:hover u{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:50px 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;
}
#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.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.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;}


/* 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;}

/* 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:1px;}
.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:30px 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-val{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-message{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:21px;color:var(--ink);margin:0 0 16px;}
.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;}
.btn-share:hover{background:#5c9657;}
.btn-challenge{background:var(--blue);color:#fff;}
.btn-challenge:hover{background:var(--blue-dark);}

/* 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;}
.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:3px;
  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;}

/* Community average line (under the time) */
.c-avg{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px;color:var(--muted);margin:-2px 0 14px;font-variant-numeric:tabular-nums;}
.c-avg:empty{display:none;}
.c-avg.faster{color:var(--green);}
.c-avg.anim-in{animation:riseIn .55s cubic-bezier(.22,1,.36,1) both;}

/* "Guess the hardest word" prompt / result line above the dictionary */
.c-hardest-sub{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px;color:var(--muted);text-align:center;margin:-8px 0 18px;}
.c-hardest-sub:empty{display:none;}
.c-hardest-sub.correct{color:var(--green);}
.c-hardest-sub.wrong{color:var(--orange);}
.c-hardest-sub.anim-in{animation:riseIn .55s cubic-bezier(.22,1,.36,1) both;}

/* Per-word vote button (small, subtle blue pill) + revealed stats */
.btn-guess{
  display:block;width:fit-content;margin:12px auto 0;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:13px;letter-spacing:.3px;
  padding:6px 14px;border-radius:999px;border:none;cursor:pointer;
  background:var(--blue);color:#fff;
}
.btn-guess:hover{background:var(--blue-dark);}
.def-stats{display:flex;justify-content:center;gap:26px;margin-top:14px;}
.def-stat{font-family:'Baloo 2',sans-serif;font-weight:800;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-hardest-badge{
  display:inline-block;margin-top:12px;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:13px;letter-spacing:.5px;
  padding:5px 12px;border-radius:999px;background:#fdebcf;color:#c47d10;text-transform:uppercase;
}
.c-defs .def-item.is-hardest{border-color:#f1c97a;background:#fdf6ea;}
.c-defs .def-item.guess-right{border-color:#bfe3c8;background:#f1faf3;}
.c-defs .def-item.guess-wrong{border-color:#f0c9a6;}

.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;}

/* 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:40px auto 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);opacity:.7;line-height:1.1;
}
.play-timer:hover .play-timer-val{color:var(--blue);}
body.done .play-timer,
body.tutorial .play-timer,
body.no-timer .play-timer{display:none;}

/* "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:22px auto 0;
  max-width:min(34ch,92vw);
  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" link under the grid — underlined like the how-to-play link,
   but quieter so the instruction stays the focus. */
.tut-skip{
  display:none;
  text-align:center;
  margin:24px 0 0;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:clamp(19px,5.2vw,25px);
  letter-spacing:.2px;
  color:var(--muted);
  opacity:.7;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  cursor:pointer;
}
.tut-skip:hover{color:var(--blue);}
/* Skip-tutorial link is hidden for now but kept in place for possible reuse.
   To bring it back, restore: body.tutorial .tut-skip{display:block;} */
body.tutorial .tut-skip{display:none;}
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;}

/* 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-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 */
.bonus-title{color:var(--orange);}
.bonus-body{font-size:19px;line-height:1.5;color:var(--ink);text-align:center;}
.bonus-body p{margin:0 0 14px;}
.btn-bonus{background:var(--orange);color:#fff;}
.btn-bonus:hover{filter:brightness(.95);}
.btn-bonus:disabled{opacity:.6;cursor:default;}

/* ===== Dark mode ===== */
:root.dark{
  --bg:#15161c;
  --ink:#e9e9ee;
  --tile:#2c2f3a;
  --tile-shadow:#1c1e26;
  --bridge:#363a47;
  --blue:#6286ff;
  --blue-dark:#4c6ef0;
  --green:#43b873;
  --orange:#f1a83a;
  --muted:#8d8f9b;
  --card:#1d1f27;
}
.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 .def-hardest-badge{background:#3a2f18;color:#e7af52;}
.dark .c-defs .def-item.is-hardest{border-color:#5a4a22;background:#23200f;}
.dark .c-defs .def-item.guess-right{border-color:#2f5d40;background:#16261c;}
.dark .c-defs .def-item.guess-wrong{border-color:#5a3f28;}
.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;}