/* Page-shell rules that used to live in inline <style> blocks on the
   Zanagrams page. Kept in source order ahead of the game stylesheet. */

html:has(.game-zanagrams) { background: transparent; }
body:has(.game-zanagrams) {
  margin: 0;
  background: transparent !important;
  opacity: 1 !important;
}
.game-zanagrams .overlay { display: none !important; }
.game-zanagrams .overlay.open { display: flex !important; }

/* Zanagrams page — same shell pattern as 18 Words */
html:has(.game-zanagrams) {
  height: auto;
  min-height: 100%;
}
body:has(.game-zanagrams) {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: transparent !important;
  font-family: "Baloo 2", system-ui, -apple-system, sans-serif !important;
  opacity: 1 !important;
}
.game-zanagrams .content {
  position: relative;
  flex: 1 1 auto;
  min-height: 700px;
  width: 100%;
  max-width: 1403px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  background: var(--pd-colour-background, #ffffff);
  line-height: normal;
  box-sizing: border-box;
  overflow: hidden;
}

.game-zanagrams .game-shell {
  width: 100%;
  max-width: 700px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  line-height: normal;
}

@media (max-width: 768px) {
  html:has(.game-zanagrams), body:has(.game-zanagrams) {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .game-zanagrams .content {
    min-height: 0 !important;
  }
  .game-zanagrams .game-shell {
    min-height: 0;
  }
}

/* Match hub cream across the embedded game */
.game-zanagrams {
  --bg: #ffffff;
  --card: #ffffff;
  --tile: #d9d5c8;
  --tile-shadow: #c9c4b5;
  --bridge: #c8c2b3;
  --line: #ece9e0;
}

.game-zanagrams #pauseBtnTop, .game-zanagrams #helpBtnTop {
  display: inline-flex !important;
}
.game-zanagrams {
  --bg:#ffffff;
  --ink:#1c1c1e;
  --tile:#d9d5c8;
  --tile-shadow:#c9c4b5;
  --bridge:#c8c2b3;
  --blue:#4169f1;
  --blue-dark:#2f50d8;
  --green:#2e9e5b;
  --green-dark:#278a4f;
  --orange:#f59e0b;
  --red:#e0524a;
  --muted:#b8b8b4;
  --card:#ffffff;
  --line:#ece9e0;
  --hint-bg:#c4d2fb; /* solid light-blue hint marker — subtle, lighter than the blue highlight */
  --radius:18px;
}
.game-zanagrams * {box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* Inherited defaults sit on the game root, not the page: the custom properties
   above are scoped to it, so var() would not resolve on <body>. */
.game-zanagrams {
  font-family:"Baloo 2",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
/* Legacy standalone wrapper; the platform pads .game-shell instead (below). */
.game-zanagrams .app {
  position:relative;
  width:100%;
  max-width:700px;
  padding:50px 16px calc(40px + env(safe-area-inset-bottom));
}
/* PZL games game column — same idea as 18 Words: padding on .game-shell only, never on body */
body:has(.game-zanagrams) .game-shell {
  position:relative;
  width:100%;
  max-width:700px;
  padding:24px 16px calc(28px + env(safe-area-inset-bottom));
}
@media (max-width: 768px) {
  body:has(.game-zanagrams) .game-shell {
    padding:16px 16px 12px;
  }
}

/* Only during play: hide tool icons on completion; keep Log in visible. */
/* Hide pause / rotate / hint on completion — keep help (?) and archive (calendar) */
body:has(.game-zanagrams.is-done) #pd-chrome-tools #pauseBtnTop,
body:has(.game-zanagrams.is-done) #pd-chrome-tools #rotateBtnTop,
body:has(.game-zanagrams.is-done) #pd-chrome-tools #hintBtn { display: none; }

/* Rotate control hidden for now */
.game-zanagrams #rotateBtnTop,
body:has(.game-zanagrams) #pd-chrome-tools #rotateBtnTop {
  display: none !important;
}

/* 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. */
.game-zanagrams .subtitle {
  --zg-forming-size: clamp(30px, 8vw, 36px);
  position:relative;
  text-align:center;
  /* Tall enough for the largest forming state so the board never jumps */
  min-height: calc(var(--zg-forming-size) + 16px);
  height: calc(var(--zg-forming-size) + 16px);
  margin:44px auto 10px;
  width:min(86vw,52vh,420px);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  box-sizing:border-box;
}
/* Confetti burst behind the "Longest word!" message. */
.game-zanagrams .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;
}
.game-zanagrams .forming {
  position:relative;z-index:1;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Baloo 2',sans-serif;
  font-weight:800;
  font-size:var(--zg-forming-size);
  line-height:1;
  min-height:var(--zg-forming-size);
  text-align:center;
  text-decoration:none;
  color:var(--blue);
  letter-spacing:0px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  box-sizing:border-box;
  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. */
.game-zanagrams .top-icon {
  position:relative;
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--ink);
}
.game-zanagrams .top-icon svg {width:30px;height:30px;display:block;}
body:has(.game-zanagrams) #pd-chrome-tools {
  align-items: center;
}
body:has(.game-zanagrams) #pd-chrome-tools .top-icon,
body:has(.game-zanagrams) #pd-chrome-tools .pd-chrome-archive {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body:has(.game-zanagrams) #pd-chrome-tools .top-icon svg,
body:has(.game-zanagrams) #pd-chrome-tools .pd-chrome-archive svg {
  width: 30px;
  height: 30px;
  display: block;
  flex: 0 0 auto;
}
/* Small blue "hints left" badge on the hint icon (tools live outside .game-zanagrams). */
.game-zanagrams .hint-badge,
body:has(.game-zanagrams) #pd-chrome-tools .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,#3b6ef5);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){ .game-zanagrams .top-icon:hover {color:var(--blue);} }
.game-zanagrams .top-icon:focus,
.game-zanagrams .top-icon:focus-visible {outline:none;}
/* One full turn of the rotate icon each time it's tapped. */
@keyframes zanagrams-iconSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.game-zanagrams .top-icon.spinning svg {animation:zanagrams-iconSpin .95s cubic-bezier(.45,.05,.2,1);}
.game-zanagrams .top-icon.shake,
.game-zanagrams .hint-btn.shake,
body:has(.game-zanagrams) #pd-chrome-tools .hint-btn.shake {
  animation:zanagrams-iconShake .35s ease;
}
@keyframes zanagrams-iconShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-4px);}
  40%{transform:translateX(4px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
}
.game-zanagrams .forming.fading {opacity:0;transform:scale(.8);}
.game-zanagrams .forming.hint {color:var(--muted);font-weight:600;letter-spacing:.5px;font-size:18px;cursor:default;}
.game-zanagrams .forming.remaining {color:var(--ink);font-size:clamp(22px,6.8vw,32px);letter-spacing:.5px;cursor:pointer;}
.game-zanagrams .forming.remaining.intro {cursor:default;}
.game-zanagrams .forming.remaining.count {color:var(--ink);}
.game-zanagrams .forming.active {color:var(--blue);}
@media (hover:hover){
  .game-zanagrams .forming.remaining:hover {color:var(--blue);}
  .game-zanagrams .forming.active:not(.pressing):hover {color:var(--blue);}
}
.game-zanagrams .forming.complete {color:var(--green);cursor:pointer;letter-spacing:.5px;font-size:clamp(26px,7vw,32px);}
.game-zanagrams .forming.res-good {color:var(--green);cursor:default;letter-spacing:normal;animation:zanagrams-wordPop .42s cubic-bezier(.34,1.56,.64,1) both;}
.game-zanagrams .forming.res-bonus {color:var(--orange);cursor:default;letter-spacing:normal;animation:zanagrams-wordPop .42s cubic-bezier(.34,1.56,.64,1) both;}
/* Scale-only pulse — keep opacity so the word doesn't flash out then back in */
@keyframes zanagrams-wordPop{
  0%  {transform:scale(1);}
  40% {transform:scale(1.1);}
  100%{transform:scale(1);}
}
.game-zanagrams .forming.feedback {letter-spacing:normal;cursor:default;animation:zanagrams-msgShake .32s ease;}
.game-zanagrams .forming.feedback.bad {color:#e0392b;}
.game-zanagrams .forming.feedback.warn {color:var(--orange);}
@keyframes zanagrams-msgShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-4px);}
  40%{transform:translateX(4px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
}

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

/* In-content puzzle loader — covers only the game column, not site chrome. */
.game-zanagrams .puz-loader { display:none !important; }
.game-zanagrams .puz-spinner {
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(26,26,26,.08);
  border-top-color:rgba(26,26,26,.28);
  animation:zanagrams-puzSpin .8s linear infinite;
}
@keyframes zanagrams-puzSpin{to{transform:rotate(360deg);}}
/* The new puzzle's board fades/rises in once the loader clears. */
@keyframes zanagrams-boardIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.game-zanagrams #board.board-in {animation:zanagrams-boardIn .34s cubic-bezier(.22,1,.36,1) both;}
.game-zanagrams #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. */
.game-zanagrams #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. */
.game-zanagrams .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. */
.game-zanagrams #boardRotate.no-rot-trans, .game-zanagrams #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 zanagrams-boardSpinPulse{
  0%  {transform:scale(1);}
  50% {transform:scale(.8);}
  100%{transform:scale(1);}
}
.game-zanagrams #board.spin-pulse {animation:zanagrams-boardSpinPulse .95s cubic-bezier(.45,.05,.2,1);}

.game-zanagrams #bridges {position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.game-zanagrams .bridge {stroke:var(--tile);stroke-width:5;stroke-linecap:round;}
.game-zanagrams .bridge.res-good {stroke:var(--green);}
.game-zanagrams .bridge.res-bonus {stroke:var(--orange);}
.game-zanagrams .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 zanagrams-hintBridgeFlash{
  0%  {stroke:var(--hint-bg);}
  35% {stroke:var(--blue);}
  100%{stroke:var(--hint-bg);}
}
.game-zanagrams .bridge.hint-bridge-flash {animation:zanagrams-hintBridgeFlash .85s ease both;}
.game-zanagrams .bridge.gone {opacity:0;stroke-width:0;}
.game-zanagrams .pathseg {fill:none;stroke:var(--tile);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.game-zanagrams .pathseg.live {stroke:var(--blue);}
.game-zanagrams .pathseg.res-good {stroke:var(--green);}
.game-zanagrams .pathseg.res-bonus {stroke:var(--orange);}
.game-zanagrams .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:800;
  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;
}
.game-zanagrams .tile.hint-letter {background:var(--hint-bg);color:#1e2a55;}
.game-zanagrams .tile.active {background:var(--blue);color:#fff;}
.game-zanagrams .tile.res-good {background:var(--green);color:#fff;}
.game-zanagrams .tile.res-bonus {background:var(--orange);color:#fff;}
.game-zanagrams .tile.gone {opacity:0;pointer-events:none;}

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

@keyframes zanagrams-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%);}
}
.game-zanagrams .tile.shake {animation:zanagrams-tileShake .3s ease;}

/* Valid word: each tile pops with an expanding green ring, rippling along the word */
@keyframes zanagrams-tilePop{
  0%  {transform:translate(-50%,-50%) scale(1);}
  45% {transform:translate(-50%,-50%) scale(1.07);}
  100%{transform:translate(-50%,-50%) scale(1);}
}
.game-zanagrams .tile.pop {animation:zanagrams-tilePop .5s 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 zanagrams-hintPop{
  0%  {transform:translate(-50%,-50%) scale(1);}
  35% {transform:translate(-50%,-50%) scale(1.16);}
  100%{transform:translate(-50%,-50%) scale(1);}
}
@keyframes zanagrams-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 zanagrams-hintTintLit{
  0%  {background:var(--hint-bg);color:#1e2a55;}
  35% {background:var(--blue);color:#fff;}
  100%{background:var(--hint-bg);color:#1e2a55;}
}
.game-zanagrams .tile.hint-pulse {animation:zanagrams-hintPop .85s cubic-bezier(.34,1.56,.64,1) both, zanagrams-hintTint .85s ease both;z-index:3;}
.game-zanagrams .tile.hint-pulse-lit {animation:zanagrams-hintPop .85s cubic-bezier(.34,1.56,.64,1) both, zanagrams-hintTintLit .85s ease both;z-index:3;}

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

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

/* Modals — faded page (via #pd-page-frost) + white bordered card */
.game-zanagrams .overlay {
  position:fixed;inset:0;
  background: transparent;
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
  z-index:1000;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}
.game-zanagrams .overlay.open {display:flex;}
/* Modal chrome defaults to SS3; tiles / word scores keep their own Baloo rules. */
.game-zanagrams .modal {
  font-family:var(--pd-font-ui);
}
.game-zanagrams .modal .tile,
.game-zanagrams .modal .tile-letter {
  font-family:"Baloo 2",system-ui,sans-serif;
}
.game-zanagrams .modal {
  position:relative;
  background: var(--pd-colour-background, #fff);
  width:100%;max-width:400px;
  border-radius:12px;
  border:2px solid var(--ink,#2B2B2B);
  box-shadow:none;
  padding: 28px 16px 22px;
  max-height:min(58dvh, calc(100dvh - 96px));
  overflow:hidden;
  overscroll-behavior:none;
  animation:zanagrams-rise .22s ease;
  box-sizing:border-box;
}
/* The game owns its own overlays, so it locks page scroll while one is open. */
body:has(.game-zanagrams .overlay.open) {
  overflow:hidden !important;
  overscroll-behavior:none;
}
@keyframes zanagrams-rise{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
.game-zanagrams .modal-head {
  display:flex;align-items:center;justify-content:center;position:static;z-index:5;
  background:transparent;
  margin:0 0 12px;
  padding:0 28px;
}
.game-zanagrams .modal-head h2 {font-family:var(--pd-font-ui);font-weight:800;font-size:24px;line-height:28px;margin:0;text-align:center;}
.game-zanagrams .modal-close {
  position:absolute;right:12px;top:25px;
  display:grid;place-items:center;padding:0;
  background:none;border:none;font-size:32px;font-weight:600;line-height:1;color:var(--ink);cursor:pointer;
  width:34px;height:34px;border-radius:8px;z-index:6;
}
.game-zanagrams .modal-close:hover {color:var(--ink);background:rgba(0,0,0,.06);}
.game-zanagrams .modal-bottom-close {
  width:100%;
  margin-top:16px;
}

/* Definitions modal — scroll the card when the word list is long */
.game-zanagrams #defOverlay.overlay {
  touch-action: manipulation;
}
.game-zanagrams #defOverlay .modal {
  max-height: min(72dvh, calc(100dvh - 72px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Desktop only — mobile sheets use touch-action:none so swipe-dismiss wins. */
@media (min-width: 769px) {
  .game-zanagrams #defOverlay .modal {
    touch-action: pan-y;
  }
}

/* Definitions list */
.game-zanagrams .def-item {padding:14px 0;border-bottom:1px solid #eee;}
.game-zanagrams .def-item:last-child {border-bottom:none;}
.game-zanagrams .def-word-row {display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.game-zanagrams .def-word {font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px;letter-spacing:normal;}
.game-zanagrams .def-word.bonus {color:var(--orange);}
.game-zanagrams .def-time {
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15px;
  color:#8a8a8b;font-variant-numeric:tabular-nums;flex:0 0 auto;letter-spacing:.2px;
}
.game-zanagrams .def-text {font-size:18px;line-height:1.45;margin:4px 0 0;}
.game-zanagrams .def-ex {font-size:16px;color:var(--muted);font-style:italic;margin-top:4px;}
.game-zanagrams .def-empty {text-align:center;color:var(--muted);padding:24px 0;}

/* Completion sits under the board — unlock page scroll so results can move. */
@media (max-width: 768px) {
  html:has(.game-zanagrams.is-done),
  body:has(.game-zanagrams.is-done) {
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .game-zanagrams.is-done .content,
  .game-zanagrams.is-done .game-shell {
    min-height: auto !important;
    height: auto !important;
    overflow: visible;
  }
}
/* After solving: board goes away; completion sits at the top and slides up. */
.game-zanagrams.is-done .subtitle,
.game-zanagrams.is-done #boardSlot {
  display: none !important;
}

.game-zanagrams .complete-screen {
  display: none;
  width: 100%;
  max-width: 420px;
  margin: 8px auto 0;
  text-align: center;
  box-sizing: border-box;
}
.game-zanagrams .complete-screen.is-shown {display:flex;}
.game-zanagrams .complete-screen.pd-complete-panel {
  margin-top: 8px;
  padding-left: 0;
  padding-right: 0;
  opacity: 1;
  transform: none;
  transition: none;
}
.game-zanagrams .complete-screen.pd-complete-panel:not(.is-shown) {
  visibility: hidden;
  pointer-events: none;
}
.game-zanagrams .complete-screen.pd-complete-panel.is-shown {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
.game-zanagrams .complete-screen.pd-complete-panel.is-instant {
  transition: none;
}
/* Disable shared line-stagger; stages own the reveal. */
.game-zanagrams .pd-complete .pd-c-line {
  opacity: 1;
  animation: none !important;
}
/* Must beat `.pd-c-line` opacity when a stage is also a line (try / words). */
.game-zanagrams .pd-complete .zg-c-stage,
.game-zanagrams .zg-c-stage {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.45s cubic-bezier(.22,1,.36,1), transform 0.45s cubic-bezier(.22,1,.36,1);
  width: 100%;
}
.game-zanagrams .pd-complete .zg-c-stage.is-in,
.game-zanagrams .zg-c-stage.is-in {
  opacity: 1;
  transform: none;
}
.game-zanagrams .complete-screen.is-instant .zg-c-stage {
  transition: none;
}
.game-zanagrams .zg-c-trophy-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.game-zanagrams .pd-c-words {
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
}
.game-zanagrams .c-time {position:relative;width:100%;}
.game-zanagrams .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;}
.game-zanagrams .c-time-val {
  position:relative;z-index:1;display:block;margin:0 0 10px;
  font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:clamp(26px, 7vw, 32px);line-height:1.12;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.game-zanagrams .c-time-val.is-resigned {
  font-variant-numeric: normal;
}
.game-zanagrams.is-resigned .pd-c-share {display: none !important;}
.game-zanagrams .pd-c-word-list .def-item {
  grid-template-columns: minmax(0, 1fr) auto;
}
.game-zanagrams .pd-c-word-list--timed .def-item {
  grid-template-columns: minmax(0, 1.5fr) 0.8fr 0.85fr;
  align-items: start;
}
.game-zanagrams .pd-c-word-list--timed .def-main {
  grid-column: 1;
}
.game-zanagrams .pd-c-word-list .def-word {
  font-family: var(--pd-font-ui);
}
/* Top x% line under the time — shared .pd-c-rank owns the look */
.game-zanagrams .c-msg:empty {display:none;}
/* Bonus head inside Today's words */
.game-zanagrams .pd-c-word-list .c-bonus-head,
.game-zanagrams .pd-c-word-list .pd-c-bonus-head {
  font-size:13px;
  font-weight:700;
  color:#8a8a8b;
  margin:18px 0 6px;
  text-align:left;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.game-zanagrams .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;
}
.game-zanagrams .btn-primary {background:var(--blue);color:#fff;}
.game-zanagrams .btn-primary:hover {background:var(--blue-dark);}
.game-zanagrams .btn-secondary {background:#f0efe9;color:var(--ink);}
.game-zanagrams .btn-secondary:hover {background:#e6e4db;}

/* Under-grid timer row hidden — pause lives in the top bar. */
.game-zanagrams .under-grid {
  display: none !important;
}

.game-zanagrams .play-timer {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:fit-content;margin:0;
  background:none;border:none;padding:8px 10px;cursor:pointer;
  color:#9a9a96;font:inherit;
  -webkit-tap-highlight-color:transparent;
}
.game-zanagrams .play-timer-pause {
  width:18px;height:18px;display:block;flex:0 0 auto;
}
.game-zanagrams .play-timer-pause .filled {fill:currentColor;}
.game-zanagrams .play-timer-val {
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px;
  font-variant-numeric:tabular-nums;color:inherit;line-height:1;
  letter-spacing:0.02em;
  transition:color .2s ease;
}
@media (hover:hover){
  .game-zanagrams .play-timer:hover {color:var(--blue);}
}
/* Flash the timer while a bonus-time bump animates. */
.game-zanagrams .play-timer-val.penalty {color:var(--orange);}

.game-zanagrams.is-paused #boardSlot,
.game-zanagrams.is-paused .subtitle {
  visibility:hidden;
}

/* Text-only "Hint"/"Rotate" buttons — match the timer's size/colour, sitting
   beside it. */
.game-zanagrams .hint-btn, .game-zanagrams .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. */
.game-zanagrams .under-grid .hint-btn, .game-zanagrams .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){
  .game-zanagrams .hint-btn:hover, .game-zanagrams .rotate-btn:hover {color:var(--blue);}
}
/* No lingering focus ring after a tap/click; keep one for keyboard users. */
.game-zanagrams .hint-btn:focus, .game-zanagrams .rotate-btn:focus {outline:none;}
.game-zanagrams .hint-btn:focus,
.game-zanagrams .hint-btn:focus-visible,
.game-zanagrams .rotate-btn:focus,
.game-zanagrams .rotate-btn:focus-visible {outline: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. */
/* During the tutorial the title / forming slot are hidden (instructions take
   their place), but the top-left back button stays available. */
.game-zanagrams .tut-text {display:none;}
body:has(.game-zanagrams.is-tutorial) #pd-chrome-tools { display: none; }
.game-zanagrams.is-tutorial .subtitle {display:none;}
.game-zanagrams.is-tutorial .tut-text {
  display:block;
  text-align:center;
  margin:22px auto 0;
  font-family:var(--pd-font-ui);
  font-weight:800;
  font-size:clamp(19px,5.2vw,25px);
  line-height:1.7;
  color:var(--ink);
}
.game-zanagrams.is-tutorial.is-done .tut-text {display:none;}
.game-zanagrams.is-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 zanagrams-tutTextOut{from{opacity:1;transform:scale(1);}to{opacity:0;transform:scale(.82);}}
@keyframes zanagrams-tutTextIn{from{opacity:0;transform:scale(.82);}to{opacity:1;transform:scale(1);}}
.game-zanagrams.is-tutorial .tut-text.tut-anim-out {animation:zanagrams-tutTextOut .18s ease forwards;}
.game-zanagrams.is-tutorial .tut-text.tut-anim-in {animation:zanagrams-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. */
.game-zanagrams.is-tutorial .tut-text .tut-l1 {
  display:block;
  margin-bottom:14px;
}

/* Tutorial lives in the normal play column — hide under-grid chrome. */
.game-zanagrams.is-tutorial .under-grid {
  display: none !important;
}
.game-zanagrams .tut-skip {
  display: none;
  width: auto !important;
  margin: 18px auto 0;
  padding: 10px 22px !important;
  font-family: var(--pd-font-ui) !important;
  font-size: 16px !important;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
}
.game-zanagrams.is-tutorial .tut-skip:not([hidden]) {
  display: block;
}
.game-zanagrams .tut-skip.tut-skip-play {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #fff !important;
}
html[data-theme="dark"] .game-zanagrams .modal {
  background: var(--pd-colour-surface, #1c1c19);
  color: var(--ink);
}
html[data-theme="dark"] .game-zanagrams .tut-skip {
  border-color: var(--ink);
  background: var(--card, var(--pd-colour-surface));
  color: var(--ink);
}
html[data-theme="dark"] .game-zanagrams .tut-skip.tut-skip-play {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--bg, #141412) !important;
}
body:has(.game-zanagrams.is-home) #pd-chrome-tools {
  display: none;
}

/* Bonus word intro modal */
.game-zanagrams .modal-bonus {
  text-align:center;
  max-width:400px;
}

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

/* ===== Home / welcome screen ===== */
.game-zanagrams #homeScreen {display:none;}
.game-zanagrams.is-home .app > *:not(#homeScreen), .game-zanagrams.is-home .game-shell > *:not(#homeScreen) {display:none !important;}
.game-zanagrams.is-home #homeScreen,
.game-zanagrams.is-welcome #homeScreen {display:flex !important;}
/* Play chrome sizes every h1 as an absolute header title — reset for welcome. */
.game-zanagrams #homeScreen .pd-welcome-title {
  position: static;
  left: auto;
  transform: none;
  pointer-events: auto;
  cursor: default;
  font-size: clamp(30px, 9vw, 40px);
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: var(--pd-colour-heading, #161613);
}

/* Site-wide dark theme */
html[data-theme="dark"] .game-zanagrams {
  --bg: #141412;
  --ink: #dddace;
  --tile: #2e2c28;
  --tile-shadow: #242220;
  --bridge: #4a463c;
  --line: #3a3a35;
  --muted: #9a9a92;
  --card: #1c1c19;
  --hint-bg: #3a3428;
}
html[data-theme="dark"] .game-zanagrams .content {
  background: var(--pd-colour-background, #141412);
}
html[data-theme="dark"] .game-zanagrams .btn-secondary {
  background: #2a2a26;
  color: var(--ink);
}
html[data-theme="dark"] .game-zanagrams .btn-secondary:hover {
  background: #3a3a35;
}
html[data-theme="dark"] .game-zanagrams .modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
}
