: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;
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-underline-offset:4px;
  cursor:pointer;
}
@media (hover:hover){ #appHeader:hover h1{color:var(--blue);} }
.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;
}

/* 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;}
#board{
  position:relative;
  width:min(86vw,52vh,420px);
  aspect-ratio:1/1;
  touch-action:none;
  user-select: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;
}
.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:18px;letter-spacing:1px;}
.def-word.bonus{color:var(--orange);}
.def-text{font-size:15px;margin:3px 0 0;}
.def-ex{font-size:14px;color:var(--muted);font-style:italic;margin-top:3px;}
.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:6px;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 2px;}
.c-defs-sub{text-align:center;color:var(--muted);font-size:14px;font-weight:700;margin:0 0 18px;letter-spacing:.3px;}
.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:17px;line-height:1.45;color:var(--ink);}
.c-defs .def-ex{font-size:15px;color:var(--muted);font-style:italic;margin-top:9px;line-height:1.4;}

/* Favourite / least-favourite voting */
.vote-row{display:flex;gap:8px;justify-content:center;margin-top:14px;}
.vote{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;
  padding:8px 14px;border-radius:999px;
  border:2px solid #e6e2d6;background:#fff;color:var(--muted);
  cursor:pointer;transition:background .12s,border-color .12s,color .12s,transform .08s;
}
.vote svg{width:15px;height:15px;flex:0 0 auto;}
.vote:hover{border-color:#cfcabb;}
.vote:active{transform:scale(.94);}
.vote-fav.active{background:#ffe3ea;border-color:#ff6b8a;color:#e63a63;}
.vote-least.active{background:#e7edff;border-color:#7d97ff;color:#3b5bdb;}

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

/* "How to play" link under the grid (shown until first word ever found) */
.how-link{
  text-align:center;
  margin:26px 0 0;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:clamp(22px,6vw,29px);
  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.done .how-link{display:none;}

/* 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{
  position:relative;padding:3px 0 0 44px;margin:0 0 16px;
  font-size:18px;line-height:1.5;
}
.how-steps li:last-child{margin-bottom:0;}
.how-steps .num{
  position:absolute;left:0;top:0;
  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 .vote{border-color:#363a47;background:var(--card);color:var(--muted);}
.dark .vote:hover{border-color:#474b58;}
.dark .vote-fav.active{background:#3a1f29;border-color:#ff6b8a;color:#ff8fa6;}
.dark .vote-least.active{background:#1f2742;border-color:#7d97ff;color:#9db1ff;}
.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;}