:root {
  color-scheme: light;
  --blue: #2675f5;
  --blue-dark: #1263e5;
  --blue-soft: #edf4ff;
  --green: #1eaf67;
  --yellow: #ffe45c;
  --gold: #f2b615;
  --red: #e64a4a;
  --ink: #101116;
  --muted: #777d89;
  --line: #dde1e7;
  --key: #989ca5;
  --paper: #ffffff;
  --page: #f7f8fb;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--page); }
body {
  min-height: 100%;
  margin: 0;
  background: radial-gradient(circle at 50% -10%, #fff 0, var(--page) 56%);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input, a { font: inherit; touch-action: manipulation; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(38, 117, 245, .35);
  outline-offset: 3px;
}

.game-shell {
  width: min(100%, 660px);
  margin: 0 auto;
  padding: 25px 22px 30px;
}

body.game-theme-christmas {
  background-color: #dff2ff;
  background-image: linear-gradient(rgba(231,247,255,.18), rgba(244,251,255,.72) 34%, rgba(248,252,250,.96) 78%), url("assets/puzzle-packs/en-GB/seasonal/christmas/christmas-scene.png?v=247-replay-custom-challenge");
  background-position: center top; background-repeat: no-repeat; background-size: max(1100px, 100vw) auto; background-attachment: fixed;
}
body.game-theme-christmas::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.92) 0 2px, transparent 2.8px), radial-gradient(circle, rgba(255,255,255,.72) 0 1.5px, transparent 2.3px);
  background-position: 18px 12px, 72px 58px; background-size: 96px 96px, 128px 128px;
}
body.game-theme-christmas .game-shell {
  margin-top: 14px; margin-bottom: 18px; border: 1px solid rgba(255,255,255,.92); border-radius: 32px;
  background: rgba(255,255,255,.9); box-shadow: 0 24px 60px rgba(28,67,75,.2); backdrop-filter: blur(12px);
}
body.game-theme-christmas .logo-heading { padding: 7px 12px; border-radius: 16px; background: rgba(255,255,255,.82); }
body.game-theme-christmas .guess-pill { border-color: #17764d; box-shadow: 0 5px 15px rgba(23,118,77,.12); }
body.game-theme-christmas .menu-button { border-color: #b32632; background: #fff7f7; }
body.game-theme-christmas .menu-button span { background: #9f2430; }
body.game-theme-christmas .puzzle-identity { color: #8f1f2b; text-shadow: 0 1px 0 #fff; }
body.game-theme-christmas .puzzle-identity::before {
  content: "❄  CHRISTMAS PACK  ❄"; display: block; width: max-content; max-width: 100%; margin: 0 auto 9px; padding: 6px 13px;
  border: 1px solid #e8c56b; border-radius: 999px; background: #fff4c9; color: #7a4b00; font-size: 10px; letter-spacing: .12em;
}
body.game-theme-christmas .board-wrap {
  border: 6px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(135deg,#ae2330 0 16px,#fff 16px 29px,#17764d 29px 45px,#fff 45px 58px) border-box;
  box-shadow: 0 20px 42px rgba(62,80,70,.16), 0 0 0 1px rgba(120,73,38,.18);
}
body.game-theme-christmas .board {
  padding: 3px; background: radial-gradient(circle at 12% 18%,rgba(255,255,255,.95) 0 2px,transparent 2.7px), radial-gradient(circle at 78% 66%,rgba(255,255,255,.8) 0 1.5px,transparent 2.3px), linear-gradient(145deg,#dcefe7,#fff6df);
  background-size: 54px 54px, 70px 70px, auto; box-shadow: inset 0 0 0 1px rgba(23,118,77,.12); counter-reset: advent-door;
}
body.game-theme-christmas .cell.blocked { border-color: #0d5738; background: linear-gradient(145deg,#1d7b51,#0c4e32); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
body.game-theme-christmas .cell:not(.blocked) { counter-increment: advent-door; }
body.game-theme-christmas .cell:not(.blocked):not(.selected):not(.discovered):not(.solved):not(.solution) {
  background: radial-gradient(circle at calc(100% - 8px) 50%,#d9a719 0 2.5px,transparent 3.3px), linear-gradient(145deg,#fffdf5,#f5ead0);
  box-shadow: inset 0 0 0 3px rgba(122,75,0,.06), inset -5px 0 8px rgba(122,75,0,.08), 0 4px 8px rgba(89,58,18,.08);
}
body.game-theme-christmas .cell:nth-child(odd):not(.blocked):not(.selected):not(.discovered):not(.solved):not(.solution):not(.wrong-entry) { border-color: #b32632; }
body.game-theme-christmas .cell:nth-child(even):not(.blocked):not(.selected):not(.discovered):not(.solved):not(.solution):not(.wrong-entry) { border-color: #17764d; }
body.game-theme-christmas .cell:not(.blocked):not(.selected):not(.entry):not(.discovered):not(.solved):not(.solution)::before {
  content: counter(advent-door); position: absolute; left: 5px; top: 3px; color: #8a5a00; font-size: 9px; font-weight: 900; line-height: 1;
}
body.game-theme-christmas .cell.selected:not(.solved):not(.discovered) { border-color: #d9a719; background: #fff7d8; box-shadow: inset 0 0 0 1px rgba(217,167,25,.2); }
body.game-theme-christmas .selection-indicator { border-color: #e1adb2; background: #fff1f2; color: #8f1f2b; }
body.game-theme-christmas .selection-indicator.down { border-color: #a7d2bb; background: #edf9f2; color: #116841; }
body.game-theme-christmas .hint-button { border-color: #9bc9b0; background: #f1fbf5; color: #116841; }
body.game-theme-christmas .keyboard { padding: 12px; border: 1px solid rgba(23,118,77,.17); border-radius: 20px; background: rgba(247,252,249,.82); }

.game-header {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto 48px;
  align-items: center;
  gap: 10px;
}
.logo-heading { min-width: 0; margin: 0; line-height: 0; }
.brand-logo { display: block; width: min(100%, 238px); height: auto; }
.guess-pill, .menu-button {
  height: 46px;
  border-radius: 999px;
  background: #fff;
}
.score-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  border: 1.5px solid #f1c453;
  color: #895e00;
  box-shadow: 0 5px 15px rgba(222, 160, 0, .08);
}
.score-pill > span { color: #edae00; }
.score-pill strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.score-pill small { display: none; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.score-pill.pop { animation: score-pop .7s ease; }
@keyframes score-pop {
  35% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(242, 182, 21, .2); }
}
.guess-pill {
  min-width: 130px;
  padding: 0 15px;
  border: 2px solid var(--blue);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  transition: border-color .25s, color .25s, box-shadow .25s;
}
.guess-pill strong { font-size: 18px; }
.guess-pill.caution { border-color: #e6a718; color: #8d6000; }
.guess-pill.danger {
  border-color: var(--red);
  color: #b52128;
  animation: danger-pulse 1.25s ease-in-out infinite;
}
.guess-pill.saved { animation: saved-glow 1.1s ease; }
@keyframes danger-pulse {
  50% { box-shadow: 0 0 0 7px rgba(230,74,74,.15), 0 0 18px rgba(230,74,74,.28); }
}
@keyframes saved-glow {
  35% { border-color: var(--green); color: #087742; box-shadow: 0 0 0 8px rgba(30,175,103,.2), 0 0 20px rgba(30,175,103,.34); }
}
.menu-button {
  width: 48px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border: 1.5px solid var(--line);
}
.menu-button span { width: 18px; height: 2px; border-radius: 2px; background: #1d2027; }

.puzzle-identity {
  margin: 24px 0 16px;
  text-align: center;
  color: #858a95;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.puzzle-identity p { margin: 4px 0; }
.puzzle-identity p:last-child { color: #4e5561; }
.remove-ads-header-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 8px;
  color: #4e5561;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.remove-ads-header-link:hover,
.remove-ads-header-link:focus-visible { text-decoration: underline; }
.difficulty-score-inline { white-space: nowrap; }
.difficulty-score-star { color: var(--ink); }

.board-wrap {
  padding: 17px;
  border: 3px solid transparent;
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 20px 42px rgba(28, 40, 62, .09), 0 0 0 1px var(--line);
}
.board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  border-radius: 16px;
}
.cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 3px solid #dfe2e7;
  border-radius: 16px;
  background: #fff;
  color: #20232b;
  font-size: clamp(24px, 7vw, 40px);
  font-weight: 800;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.cell.blocked {
  border-color: #111216;
  background: linear-gradient(145deg, #16171b, #0d0e11);
}
.cell.selected {
  z-index: 1;
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px rgba(38,117,245,.18);
}
.cell.direction-crossing {
  z-index: 3;
}
.cell.direction-crossing::after {
  content: attr(data-alternate);
  position: absolute;
  bottom: 3px;
  right: 3px;
  color: #b1b5bc;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.cell.entry { color: #15171c; }
.cell.entry.wrong-entry {
  border-color: #a61b29;
  background: #fff;
  color: #20232b;
  box-shadow: none;
}
.cell.discovered {
  border-color: var(--blue);
  background: linear-gradient(145deg, #3e8cff, #1f6fec);
  color: #fff;
  box-shadow: 0 6px 14px rgba(38,117,245,.22);
}
.cell.solution {
  border-color: #c7ccd4;
  background: #e8eaee;
  color: #2e333c;
}
.cell.assisted {
  border-color: #b9bfd0;
  background: #f0f1f5;
  color: #2e333c;
  box-shadow: inset 0 0 0 1px rgba(46,51,60,.06);
}
.cell.solved {
  border-color: var(--green);
  background: linear-gradient(145deg, #27bd73, #169d5b);
  color: #fff;
  box-shadow: 0 6px 14px rgba(30,175,103,.2);
}
.cell.selected.solved,
.cell.selected.discovered {
  border-color: #78aaf8;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.38),
    0 0 0 2px rgba(38,117,245,.25);
}
.cell.reveal { animation: tile-reveal .42s cubic-bezier(.2,.9,.25,1.3); }
.cell.chain { animation: chain-ring 1.35s ease both; z-index: 2; }
@keyframes tile-reveal {
  0% { transform: scale(.66) rotate(-5deg); }
  65% { transform: scale(1.08) rotate(2deg); }
}
@keyframes chain-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,182,21,0); }
  18%, 72% { border-color: #f5bd17; box-shadow: 0 0 0 5px rgba(242,182,21,.52), 0 0 22px rgba(242,182,21,.6); }
}
.board-wrap.pulse-blue .board { animation: board-blue .58s ease; }
.board-wrap.pulse-yellow .board { animation: board-yellow .58s ease; }
.board-wrap.pulse-green .board { animation: board-green .68s ease; }
@keyframes board-blue { 45% { box-shadow: 0 0 0 7px rgba(38,117,245,.3), 0 0 22px rgba(38,117,245,.38); } }
@keyframes board-yellow { 45% { box-shadow: 0 0 0 7px rgba(255,228,92,.55), 0 0 24px rgba(220,180,0,.5); } }
@keyframes board-green { 45% { box-shadow: 0 0 0 8px rgba(30,175,103,.4), 0 0 26px rgba(30,175,103,.48); } }

.selection-indicator {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 16px auto 8px;
  padding: 7px 15px;
  border: 1.5px solid #bad5ff;
  border-radius: 999px;
  background: #eff5ff;
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(38,117,245,.08);
  transition: transform .15s, box-shadow .15s, background .2s, border-color .2s;
}
.selection-indicator[hidden] { display: none; }
.selection-indicator:hover { box-shadow: 0 5px 13px rgba(38,117,245,.16); }
.selection-indicator:active { transform: translateY(1px) scale(.985); }
.selection-indicator:focus-visible { outline: 3px solid rgba(38,117,245,.25); outline-offset: 3px; }
.selection-indicator:disabled { cursor: default; opacity: .7; box-shadow: none; }
.selection-indicator.down { background: #f4f0ff; border-color: #d5c6ff; color: #714ac8; }
.status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  min-height: 62px;
  margin: 8px auto 10px;
  color: #737985;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  white-space: pre-line;
  overflow: hidden;
}
.status.error { color: #d92d20; }
.assist-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 44px;
  margin-bottom: 14px;
}
.hint-button {
  padding: 10px 17px;
  border: 1.5px solid #cdd7e8;
  border-radius: 999px;
  background: white;
  color: var(--blue-dark);
  font-weight: 800;
}
.hint-button:disabled { opacity: .42; cursor: default; }
.toggle-track {
  width: 48px; height: 27px; padding: 3px; border-radius: 99px;
  background: #dfe2e7; box-shadow: inset 0 0 0 1px #cbd0d8; transition: background .2s;
}
.toggle-track span { display: block; width: 21px; height: 21px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .2s; }

.keyboard { display: grid; gap: 10px; }
.keyboard-row { display: flex; justify-content: center; gap: 7px; }
.key {
  flex: 0 1 58px;
  min-width: 0;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: var(--key);
  color: #fff;
  box-shadow: 0 3px 0 #767b84;
  font-size: 21px;
  font-weight: 800;
  transition: transform .1s, background .2s, color .2s, opacity .2s, box-shadow .2s;
}
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 #747983; }
.key.used {
  background: #fff; color: #c9ccd2; box-shadow: 0 0 0 2px #e2e4e8;
  cursor: not-allowed;
}
.key.current { background: #8fa9d1; box-shadow: 0 3px 0 #7289ad; }
.key.jumbled {
  background: var(--yellow); color: #463c00; box-shadow: 0 3px 0 #d2b600;
}
.key.tried:not(.used) {
  background: #fbe3e5;
  color: #a61b29;
  box-shadow: 0 3px 0 #d9a0a5;
}
.key.delete-key { background: #c5c9d0; color: #353941; box-shadow: 0 3px 0 #a7abb2; font-size: 25px; }
.actions { display: grid; grid-template-columns: .78fr 1.55fr; gap: 12px; margin-top: 18px; }
.action-button { min-height: 64px; border-radius: 18px; font-size: 19px; font-weight: 800; }
.clear-button { border: 1.5px solid #d8dbe1; background: white; color: #15171c; }
.submit-button { border: 0; background: linear-gradient(135deg, #3183ff, #1666e9); color: white; box-shadow: 0 10px 22px rgba(38,117,245,.2); }
.submit-button:disabled { background: #91b5ed; box-shadow: none; cursor: default; }
.submit-button.caution,
.submit-button.caution:disabled {
  background: linear-gradient(135deg, #f2c34f, #e6a718);
  color: #543700;
  box-shadow: 0 10px 22px rgba(230,167,24,.24);
}
.submit-button.danger,
.submit-button.danger:disabled {
  background: linear-gradient(135deg, #ed6262, var(--red));
  color: #fff;
  box-shadow: 0 10px 22px rgba(230,74,74,.24);
  animation: danger-pulse 1.25s ease-in-out infinite;
}
dialog {
  width: min(calc(100% - 34px), 560px);
  max-height: min(86vh, 780px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 27px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 28px 70px rgba(9,17,33,.28);
}
dialog::backdrop { background: rgba(21,31,51,.55); backdrop-filter: blur(7px); }
.panel-dialog { padding: 28px; overflow: auto; }
.compact-dialog { width: min(calc(100% - 34px), 500px); }
.dialog-header, .result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.eyebrow { display: block; margin-bottom: 8px; color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.red-eyebrow { color: var(--red); }
dialog h2 { margin: 0; font-size: clamp(28px, 6vw, 38px); line-height: 1.08; letter-spacing: -.03em; }
.close-button { flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 26px; line-height: 1; }
.dialog-copy { color: #525965; font-size: 16px; font-weight: 600; line-height: 1.55; }
.dialog-action {
  width: 100%; min-height: 58px; margin-top: 20px; border: 0; border-radius: 17px;
  background: linear-gradient(135deg, #3183ff, #1666e9); color: white; font-size: 18px; font-weight: 800;
}
.dialog-secondary {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #69717d;
  font-size: 14px;
  font-weight: 800;
}
.menu-list { display: grid; margin-top: 22px; border-top: 1px solid #eceef1; }
.menu-list button,
.menu-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 17px 5px; border: 0; border-bottom: 1px solid #eceef1; background: transparent;
  color: #17191e; text-align: left; font-weight: 800;
}
.menu-list a { text-decoration: none; }
.menu-version-link span { color: var(--blue-dark); }
.menu-list small { color: #858b96; font-weight: 700; text-align: right; }
.accessibility-settings {
  display: grid;
  margin-top: 22px;
  border-top: 1px solid #e4e7eb;
}
.accessibility-setting {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 86px;
  padding: 16px 4px;
  border-bottom: 1px solid #e4e7eb;
  cursor: pointer;
}
.accessibility-setting-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.accessibility-setting-input:focus-visible {
  outline: 0;
  box-shadow: none;
}
.accessibility-setting-copy strong {
  display: block;
  color: #17191e;
  font-size: 16px;
  line-height: 1.25;
}
.accessibility-setting-copy small {
  display: block;
  margin-top: 5px;
  color: #68707b;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}
.accessibility-setting-input:checked ~ .toggle-track { background: var(--blue); }
.accessibility-setting-input:checked ~ .toggle-track span { transform: translateX(21px); }
.accessibility-setting-input:focus-visible ~ .toggle-track {
  outline: 3px solid rgba(38, 117, 245, .4);
  outline-offset: 3px;
}
.accessibility-note {
  margin: 16px 0 0;
  color: #69717d;
  font-size: 13px;
  font-weight: 700;
}
.testing-tools { margin-top: 18px; color: #8a909a; font-size: 13px; }
.testing-tools summary { cursor: pointer; font-weight: 700; }
.danger-link { margin-top: 10px; padding: 7px 0; border: 0; background: transparent; color: #be3038; font-weight: 800; }
.library-back {
  display: inline-flex;
  align-items: center;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 13px;
  font-weight: 850;
}
.dialog-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 12px;
}
.dialog-navigation .library-back { margin: 0; }
.pack-library-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 18px;
  padding: 5px;
  border-radius: 15px;
  background: #edf1f6;
}
.pack-library-tab {
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #69717d;
  font-size: 14px;
  font-weight: 850;
}
.pack-library-tab.active {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(35,50,72,.1);
}
.pack-library-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  margin-top: 14px;
}
.pack-library-search input,
.pack-library-select select {
  width: 100%;
  height: 42px;
  border: 1.5px solid #d5dbe4;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}
.pack-library-search input { min-width: 0; padding: 0 13px; }
.pack-library-search input::placeholder { color: #8b929d; }
.pack-library-select select { max-width: 165px; padding: 0 29px 0 10px; }
.pack-library-search input:focus,
.pack-library-select select:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(38,117,245,.12);
}
.pack-list { display: grid; gap: 14px; margin-top: 20px; }
.pack-library-overview { display: block; }
.pack-library-group + .pack-library-group { margin-top: 22px; }
.pack-library-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.pack-library-group-heading h3 { margin: 0; font-size: 16px; }
.pack-library-group-heading span { color: #858c97; font-size: 11px; font-weight: 750; }
.pack-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pack-library-group .pack-overview-grid { display: grid; gap: 10px; }
.pack-library-intro .pack-overview-grid { grid-template-columns: 1fr; }
.pack-library-intro .pack-library-group-heading { display: none; }
.pack-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 142px;
  padding: 15px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: #fafbfc;
  color: var(--ink);
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pack-tile-intro {
  min-height: 128px;
  border-color: #b8cdf0;
  background: linear-gradient(145deg, #f9fbff, #f3f7ff);
}
.pack-tile:hover {
  border-color: #a9c8fb;
  box-shadow: 0 10px 24px rgba(38,117,245,.1);
  transform: translateY(-1px);
}
.pack-tile header, .pack-card header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.pack-tile h3, .pack-card h3 { margin: 0; font-size: 18px; line-height: 1.2; }
.pack-tile header span, .pack-card header span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 99px;
  background: #eaf7f0;
  color: #178151;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}
.pack-progress-track {
  height: 7px;
  margin-top: 15px;
  overflow: hidden;
  border-radius: 99px;
  background: #e6e9ee;
}
.pack-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #34c77d, var(--green));
}
.pack-tile footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
  padding-top: 13px;
  color: #858b96;
  font-size: 12px;
  font-weight: 750;
}
.pack-tile footer strong { color: var(--blue); }
.pack-library-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px 16px;
  border: 1px dashed #d5dbe4;
  border-radius: 14px;
  color: #747d89;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}
.store-pack-tile {
  display: flex;
  flex-direction: column;
  min-height: 184px;
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: 17px;
  background: #fafbfc;
}
.store-pack-tile header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.store-pack-tile h3 { margin: 0; font-size: 17px; line-height: 1.2; }
.store-pack-tile header span {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 99px;
  background: #edf3ff;
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.store-pack-tile > p { margin: 9px 0 13px; color: #626b77; font-size: 12px; font-weight: 650; line-height: 1.4; }
.store-pack-tile footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  color: #818894;
  font-size: 12px;
  font-weight: 750;
}
.store-pack-tile footer strong { color: var(--ink); font-size: 15px; }
.store-buy-button {
  width: 100%;
  min-height: 40px;
  margin-top: 12px;
  border: 0;
  border-radius: 11px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
}
.pack-description {
  position: relative; z-index: 1; margin: 9px 0 0; color: #59616d;
  font-size: 12px; font-weight: 700; line-height: 1.35;
}
.pack-theme-christmas.pack-tile, .pack-theme-christmas.pack-card {
  position: relative; overflow: hidden; border-color: #d7a3a3;
  background: radial-gradient(circle at 88% 18%, rgba(255,255,255,.95) 0 2px, transparent 3px), radial-gradient(circle at 75% 38%, rgba(255,255,255,.8) 0 1.5px, transparent 2.5px), linear-gradient(145deg, #fffafa 0%, #f8fff9 62%, #fff8e8 100%);
  box-shadow: inset 5px 0 0 #b32632;
}
.pack-theme-christmas .pack-theme-art {
  position: relative; z-index: 1; height: 82px; margin: 12px -10px 4px;
  overflow: hidden; border: 1px solid rgba(143,31,43,.2); border-radius: 13px;
  background-image: url("assets/puzzle-packs/en-GB/seasonal/christmas/christmas-scene.png?v=247-replay-custom-challenge");
  background-position: center; background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.pack-theme-christmas.pack-card .pack-theme-art { height: 128px; margin-right: 0; margin-left: 0; background-position: center 42%; }
.pack-theme-christmas.pack-tile::after, .pack-theme-christmas.pack-card::after {
  content: "✦  ❄"; position: absolute; right: 14px; bottom: 10px;
  color: rgba(20,116,75,.16); font-size: 28px; letter-spacing: 5px; pointer-events: none;
}
.pack-theme-christmas.pack-tile:hover { border-color: #b32632; box-shadow: inset 5px 0 0 #b32632, 0 12px 28px rgba(126,28,38,.14); }
.pack-theme-christmas.pack-tile header span, .pack-theme-christmas.pack-card header span { border: 1px solid #e8c56b; background: #fff4c9; color: #7a4b00; }
.pack-theme-christmas.pack-tile h3, .pack-theme-christmas.pack-card h3 { color: #8f1f2b; }
.pack-theme-christmas .pack-progress-track { background: #eadfde; }
.pack-theme-christmas .pack-progress-track span { background: linear-gradient(90deg, #b32632 0 48%, #17764d 52% 100%); }
.pack-theme-christmas.pack-tile footer strong { color: #9f2430; }
#packs-dialog.pack-theme-christmas { border-top: 7px solid #a9222f; background: radial-gradient(circle at 8% 7%, rgba(24,126,81,.09) 0 3px, transparent 4px), radial-gradient(circle at 92% 12%, rgba(179,38,50,.08) 0 3px, transparent 4px), #fff; }
#packs-dialog.pack-theme-christmas #pack-library-title { color: #8f1f2b; }
#packs-dialog.pack-theme-christmas .library-back { color: #17764d; }
#packs-dialog.pack-theme-christmas .puzzle-choice.active { border-color: #b32632; color: #9f2430; box-shadow: 0 0 0 2px rgba(179,38,50,.12); }
#packs-dialog.pack-theme-christmas .puzzle-choice:not(.locked):nth-child(even) { border-bottom-color: #17764d; }
.promo-code-panel {
  margin-top: 18px;
  border: 1.5px dashed #b8cbe8;
  border-radius: 18px;
  background: #f5f9ff;
}
.promo-code-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 17px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.promo-code-panel summary::-webkit-details-marker { display: none; }
.promo-code-panel summary strong { font-size: 14px; }
.promo-code-panel summary span {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 99px;
  background: #e2edff;
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}
.promo-code-content { padding: 0 17px 17px; }
.promo-code-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.promo-code-heading label { font-size: 15px; font-weight: 850; }
.promo-code-controls { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.promo-code-controls input {
  min-width: 0;
  height: 46px;
  padding: 0 13px;
  border: 1.5px solid #cbd3df;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.promo-code-controls input:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(38,117,245,.13);
}
.promo-code-controls input::placeholder { color: #9ba2ad; }
.promo-code-controls button {
  min-width: 86px;
  border: 0;
  border-radius: 12px;
  background: #dce3ec;
  color: #7b8491;
  font-size: 13px;
  font-weight: 850;
  cursor: not-allowed;
}
.promo-code-panel p { margin: 9px 1px 0; color: #747d89; font-size: 11px; font-weight: 650; line-height: 1.4; }
.pack-detail-view { display: block; }
.pack-library-meta {
  margin: 5px 0 0;
  color: #858c97;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.pack-card { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fafbfc; }
.pack-summary { margin: 5px 0 13px; color: #848a94; font-size: 12px; font-weight: 700; }
.puzzle-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.puzzle-choice {
  aspect-ratio: 1; padding: 0; border: 1.5px solid #d9dde4; border-radius: 10px; background: white;
  color: #59606b; font-size: 13px; font-weight: 800; position: relative;
}
.puzzle-choice.active { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 2px rgba(38,117,245,.12); }
.puzzle-choice.solved { border-color: var(--green); background: #eaf9f1; color: #138553; }
.puzzle-choice.failed { border-color: #ef9ba0; background: #fff0f0; color: #bd3138; }
.puzzle-choice.replayable:not(.solved):not(.failed) { border-color: var(--green); color: #138553; }
.puzzle-choice.locked {
  opacity: .28;
  filter: grayscale(1);
  cursor: not-allowed;
}
.puzzle-choice.solved::after, .puzzle-choice.failed::after, .puzzle-choice.replayable::after {
  content: "✓"; position: absolute; right: 4px; bottom: 2px; font-size: 9px;
}
.puzzle-choice.failed::after { content: "×"; }
.difficulty-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}
.difficulty-option {
  width: 100%;
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas:
    "number score"
    "heading heading"
    "rules rules";
  align-content: start;
  align-items: center;
  gap: 10px 12px;
  padding: 15px;
  border: 1.5px solid #dfe2e7;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.difficulty-option:not([aria-disabled="true"]):hover {
  border-color: #a9c6f4;
  transform: translateY(-1px);
}
.difficulty-option.selected {
  border-color: var(--blue);
  background: #f4f8ff;
  box-shadow: 0 0 0 2px rgba(38,117,245,.1);
}
.difficulty-option[aria-disabled="true"] { cursor: default; }
.difficulty-section-title {
  margin: 5px 0 -3px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}
.difficulty-preset-option {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "identity score"
    "rules rules";
}
.difficulty-preset-identity {
  grid-area: identity;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.difficulty-preset-identity .difficulty-number { grid-area: auto; }
.difficulty-number {
  grid-area: number;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #eef1f5;
  color: #464d58;
  font-size: 21px;
  font-weight: 900;
}
.difficulty-option.selected .difficulty-number { background: var(--blue); color: white; }
.custom-difficulty-option {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "identity score"
    "custom-copy custom-copy";
  border-color: #c8b5ec;
  background: linear-gradient(145deg, #fff, #f8f3ff);
}
.custom-difficulty-option.selected { background: linear-gradient(145deg, #f4f8ff, #f7f0ff); }
.difficulty-option.challenge-option {
  grid-template-columns: 52px 1fr;
  grid-template-areas:
    "number heading"
    "custom-copy custom-copy";
}
.difficulty-option.challenge-option .difficulty-heading { align-self: center; }
.difficulty-option.challenge-option[aria-disabled="true"] { opacity: .72; }
.difficulty-custom-identity {
  grid-area: identity;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.difficulty-custom-identity .difficulty-number { grid-area: auto; }
.difficulty-custom-icon { background: #eee4ff; color: #713fc1; }
.difficulty-option.selected .difficulty-custom-icon { background: #713fc1; }
.difficulty-heading strong { font-size: 18px; font-weight: 950; }
.difficulty-custom-copy {
  grid-area: custom-copy;
  color: #5d536b;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}
.difficulty-heading {
  grid-area: heading;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.difficulty-current {
  padding: 4px 8px;
  border-radius: 99px;
  background: #dce9ff;
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.difficulty-multiplier {
  grid-area: score;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  gap: 2px;
  color: var(--blue);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}
.difficulty-multiplier small {
  color: var(--blue-dark);
  font-size: 11px;
  letter-spacing: .08em;
}
.difficulty-rules {
  grid-area: rules;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.difficulty-rules span {
  display: grid;
  grid-column: auto;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #515965;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}
.difficulty-rules b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #eaf1fc;
  color: #315e9c;
  font-size: 20px;
}
.difficulty-rules .rule-reduced { color: #8b6670; }
.difficulty-rules .rule-reduced b { background: #f5e9ec; color: #a04d61; }
.difficulty-rules .difficulty-tried-key {
  background: #fbe3e5;
  color: #a61b29;
  box-shadow: 0 3px 0 #d9a0a5;
}
.difficulty-rules .difficulty-jumbled-key {
  background: var(--yellow);
  color: #463c00;
  box-shadow: 0 3px 0 #d2b600;
}
.difficulty-rules .difficulty-key-icon {
  font-size: 16px;
  font-weight: 800;
}
.difficulty-rules .difficulty-lightbulb {
  background: #fff5c4;
  color: #8a6500;
}
.custom-score-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label score" "copy score";
  align-items: center;
  gap: 4px 14px;
  margin: 22px 0;
  padding: 17px;
  border: 1.5px solid #cdb8f1;
  border-radius: 17px;
  background: linear-gradient(145deg, #f8f2ff, #f2f7ff);
}
.custom-score-card span {
  grid-area: label;
  color: #5b378d;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .09em;
}
.custom-score-card strong {
  grid-area: score;
  color: #713fc1;
  font-size: 34px;
  font-weight: 950;
}
.custom-score-card small { grid-area: copy; color: #655d6e; font-size: 12px; font-weight: 750; }
.custom-difficulty-form { display: grid; gap: 16px; }
.custom-setting-group {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid #dfe2e8;
  border-radius: 16px;
  background: #fff;
}
.custom-setting-group legend {
  padding: 0 6px;
  color: #282d35;
  font-size: 15px;
  font-weight: 950;
}
.custom-setting-heading { display: inline-flex; align-items: center; gap: 9px; }
.custom-setting-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #eaf1fc;
  color: #315e9c;
  font-size: 18px;
  font-weight: 900;
}
.custom-setting-hints { background: #fff5c4; color: #8a6500; font-size: 17px; }
.custom-setting-tried {
  background: #fbe3e5;
  color: #a61b29;
  box-shadow: 0 3px 0 #d9a0a5;
  font-size: 15px;
}
.custom-setting-jumbled {
  background: var(--yellow);
  color: #463c00;
  box-shadow: 0 3px 0 #d2b600;
  font-size: 15px;
}
.custom-choice-grid, .custom-choice-list { display: grid; gap: 8px; }
.custom-choice-grid.two-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.custom-choice-grid.three-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.custom-choice-grid label, .custom-choice-list label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1.5px solid #dadde4;
  border-radius: 12px;
  background: #fafbfc;
  color: #545b66;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
}
.custom-choice-grid label:has(input:checked), .custom-choice-list label:has(input:checked) {
  border-color: var(--blue);
  background: #edf4ff;
  color: #174f9f;
  box-shadow: 0 0 0 2px rgba(38,117,245,.08);
}
.custom-choice-grid input, .custom-choice-list input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
}
.custom-difficulty-summary {
  margin: 16px 2px 0;
  color: #6c727c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
#use-custom-difficulty:disabled { opacity: .48; cursor: not-allowed; }
.start-difficulty-label {
  display: block;
  margin: 22px 0 7px;
  color: #555c67;
  font-size: 13px;
  font-weight: 800;
}
.start-difficulty-select {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 2px solid var(--blue);
  border-radius: 15px;
  background: #fff;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
}
.start-difficulty-summary {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 15px;
  border: 1px solid #dbe6f8;
  border-radius: 15px;
  background: #f4f8ff;
}
.start-difficulty-summary strong { color: var(--blue-dark); font-size: 15px; }
.start-difficulty-summary span { color: #565d68; font-size: 13px; font-weight: 700; line-height: 1.4; }
.start-difficulty-summary small { color: #9a7000; font-weight: 900; }
.help-start {
  margin-top: 22px;
  padding: 15px;
  border: 1px solid #dbe6f8;
  border-radius: 16px;
  background: #f5f8fe;
}
.help-start strong,
.help-feedback strong,
.help-finish strong {
  display: block;
  color: #181b21;
  font-size: 16px;
  font-weight: 900;
}
.help-start p,
.help-feedback p,
.help-finish p {
  margin: 4px 0 0;
  color: #555d69;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}
.help-show-video {
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.help-section-title {
  margin: 24px 0 11px;
  color: #22262d;
  font-size: 17px;
}
.help-feedback-list { display: grid; gap: 9px; }
.help-feedback {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 13px;
  align-items: center;
  padding: 13px;
  border: 1px solid #e0e3e8;
  border-radius: 16px;
  background: #fff;
}
.reuse-tip-card { margin: 0; }
.help-key {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 850;
}
.help-cell {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  border: 3px solid #dfe2e7;
  border-radius: 10px;
  background: var(--blue-soft);
  color: #15171c;
  font-size: 18px;
  font-weight: 850;
}
.help-cell-wrong-entry {
  border-color: #a61b29;
  background: #fff;
  color: #20232b;
  box-shadow: none;
}
.help-key-perfect {
  background: linear-gradient(145deg, #3e8cff, #1f6fec);
  color: #fff;
  box-shadow: 0 3px 0 #1458bd;
}
.help-key-jumbled {
  background: var(--yellow);
  color: #463c00;
  box-shadow: 0 3px 0 #d2b600;
}
.help-key-wrong {
  background: #fbe3e5;
  color: #a61b29;
  box-shadow: 0 3px 0 #d9a0a5;
}
.help-key-solved {
  background: linear-gradient(145deg, #27bd73, #169d5b);
  color: #fff;
  box-shadow: 0 3px 0 #0f7f48;
}
.help-finish {
  margin-top: 12px;
  padding: 15px;
  border: 1px solid #cce7d9;
  border-radius: 16px;
  background: #f1fbf6;
}
.direction-demo {
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid #dce3ee;
  border-radius: 18px;
  background: #eef2f8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.direction-demo video {
  display: block;
  width: 100%;
  max-height: 340px;
  background: #eef2f8;
  object-fit: contain;
}
.help-direction-demo { margin: 15px 0 0; }
.demo-replay {
  display: block;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-top: 1px solid #dce3ee;
  background: #fff;
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 850;
}
.direction-tutorial-dialog .dialog-copy { margin-bottom: 0; }

.result-dialog { z-index: 4; }
.perfect-badge { padding: 8px 14px; border: 1.5px solid #e9b52b; border-radius: 99px; background: #fff1b9; color: #755000; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.result-progress { margin: 9px 0 20px; color: #858b96; font-weight: 800; }
.result-total {
  display: flex; align-items: baseline; justify-content: center; gap: 9px;
  padding: 22px 14px; border: 1.5px solid #efc84c; border-radius: 20px;
  background: linear-gradient(120deg, #fffaf0, #fff0b7); color: #684700; font-weight: 800;
}
.result-total strong { color: #b57800; font-size: clamp(36px, 9vw, 52px); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.score-breakdown { margin-top: 18px; border-top: 1px solid #e8e9ec; }
.score-row { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid #e8e9ec; color: #555c67; font-weight: 750; }
.score-row strong { color: #13161b; }
.score-row.chain strong { color: #ad7200; }
.result-dialog .dialog-copy { margin: 16px 0 0; font-size: 15px; line-height: 1.45; }
.result-dialog .dialog-action { margin-top: 16px; }
.puzzle-rating {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid #e8e9ec;
}
.puzzle-rating-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.puzzle-rating-heading h3 { margin: 0; color: #242832; font-size: 17px; font-weight: 900; }
.puzzle-rating-heading > span { color: #9298a2; font-size: 12px; font-weight: 800; }
.puzzle-rating-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.puzzle-rating-fieldset legend { margin-bottom: 8px; color: #555c67; font-size: 13px; font-weight: 800; }
.puzzle-rating-scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.puzzle-rating-end { color: #858b96; font-size: 10px; font-weight: 800; white-space: nowrap; }
.puzzle-rating-buttons { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.puzzle-rating-buttons input { position: absolute; opacity: 0; pointer-events: none; }
.puzzle-rating-buttons label {
  display: grid; place-items: center; min-width: 0; height: 34px; border: 1.5px solid #d6dbe3; border-radius: 8px;
  background: #fff; color: #4d5561; font-size: 12px; font-weight: 900; cursor: pointer; user-select: none;
}
.puzzle-rating-buttons input:checked + label { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-dark); }
.puzzle-rating-buttons input:focus-visible + label { outline: 3px solid rgba(46, 115, 210, .22); outline-offset: 2px; }
.puzzle-rating-comment { display: flex; align-items: baseline; gap: 5px; margin: 12px 0 6px; color: #555c67; font-size: 13px; font-weight: 800; }
.puzzle-rating-comment small { color: #9298a2; font-size: 11px; font-weight: 700; }
#puzzle-rating-comment {
  box-sizing: border-box; width: 100%; min-height: 62px; resize: vertical; padding: 9px 11px; border: 1.5px solid #d6dbe3;
  border-radius: 10px; background: #fff; color: #242832; font: inherit; font-size: 13px; line-height: 1.35;
}
#puzzle-rating-comment:focus { border-color: var(--blue); outline: 3px solid rgba(46, 115, 210, .12); }
.puzzle-rating-status { margin: 8px 0 0; color: #2a7543; font-size: 13px; font-weight: 800; line-height: 1.4; }
.puzzle-rating-status.error { color: #ad2f2f; }
@media (max-width: 460px) {
  .puzzle-rating-scale { grid-template-columns: 1fr; gap: 5px; }
  .puzzle-rating-end { display: none; }
  .puzzle-rating-buttons { gap: 3px; }
  .puzzle-rating-buttons label { height: 32px; border-radius: 7px; font-size: 11px; }
}

.toast {
  position: fixed; z-index: 20; left: 50%; bottom: 22px; transform: translate(-50%, 18px);
  max-width: calc(100% - 34px); padding: 12px 18px; border-radius: 99px; background: #181b21; color: white;
  font-size: 13px; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Keep the complete game controls visible in a typical desktop browser window. */
@media (min-width: 700px) {
  .game-shell {
    width: min(100%, 540px);
    padding-top: 16px;
    padding-bottom: 20px;
  }

  .brand-logo {
    max-width: 198px;
  }

  .puzzle-identity {
    margin: 14px 0 11px;
    font-size: 10px;
  }

  .board-wrap {
    padding: 12px;
    border-radius: 23px;
  }

  .board {
    gap: 6px;
  }

  .cell {
    border-width: 2.5px;
    border-radius: 12px;
    font-size: 30px;
  }

  .selection-indicator {
    margin-top: 10px;
    margin-bottom: 4px;
    padding: 6px 13px;
    font-size: 12px;
  }

  .status {
    height: 54px;
    min-height: 54px;
    margin: 4px auto 6px;
    font-size: 13px;
  }

  .assist-row {
    min-height: 36px;
    margin-bottom: 9px;
  }

  .hint-button {
    padding: 8px 14px;
    font-size: 13px;
  }

  .keyboard {
    gap: 9px;
  }

  .keyboard-row {
    gap: 5px;
  }

  .key {
    flex-basis: 46px;
    height: 45px;
    border-radius: 9px;
    font-size: 18px;
  }

  .actions {
    margin-top: 12px;
  }

  .action-button {
    min-height: 50px;
    border-radius: 15px;
    font-size: 17px;
  }
}

@media (max-width: 560px) {
  .game-shell { padding: 18px 13px 24px; }
  .game-header { grid-template-columns: minmax(108px, 1fr) auto 42px; gap: 6px; }
  .brand-logo { max-width: 175px; }
  .score-pill { height: 40px; padding: 0 8px; }
  .score-pill strong { font-size: 13px; }
  .guess-pill { height: 40px; min-width: 91px; padding: 0 9px; }
  .guess-pill span { display: none; }
  .guess-pill strong::after { content: " left"; font-size: 13px; }
  .menu-button { width: 42px; height: 42px; }
  .puzzle-identity { margin: 19px 0 13px; font-size: 10px; letter-spacing: .07em; }
  .board-wrap { padding: 12px; border-radius: 23px; }
  .board { gap: 6px; }
  .cell { border-width: 2.5px; border-radius: 12px; font-size: clamp(20px, 7.6vw, 34px); }
  .selection-indicator { margin-top: 13px; font-size: 12px; }
  .status { height: 54px; min-height: 54px; font-size: 13px; }
  .assist-row { gap: 10px; margin-bottom: 13px; }
  .hint-button { padding: 8px 12px; font-size: 13px; }
  .toggle-track { width: 42px; height: 24px; }
  .toggle-track span { width: 18px; height: 18px; }
  .keyboard { gap: 10px; }
  .keyboard-row { gap: 5px; }
  .key { flex-basis: 44px; height: 52px; border-radius: 9px; font-size: 18px; }
  .actions { margin-top: 15px; gap: 9px; }
  .action-button { min-height: 58px; border-radius: 16px; font-size: 17px; }
  .panel-dialog { padding: 23px; }
  .pack-library-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-library-search { grid-column: 1 / -1; }
  .pack-library-select select { max-width: none; }
  .pack-overview-grid { grid-template-columns: 1fr; }
  .pack-tile { min-height: 126px; padding: 14px; }
  .pack-tile-intro { min-height: 120px; }
  .store-pack-tile { min-height: 0; }
  .promo-code-controls { grid-template-columns: 1fr; }
  .promo-code-controls button { min-height: 43px; }
  .puzzle-grid { grid-template-columns: repeat(5, 1fr); }
  .difficulty-option {
    grid-template-columns: 46px 1fr;
    gap: 8px 10px;
    padding: 12px;
  }
  .custom-difficulty-option,
  .difficulty-preset-option { grid-template-columns: 1fr auto; }
  .difficulty-number { width: 46px; height: 46px; border-radius: 13px; font-size: 20px; }
  .difficulty-rules { grid-template-columns: 1fr; gap: 10px; }
  .difficulty-rules span { grid-column: auto; font-size: 16px; }
  .custom-choice-grid.three-choice { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .score-pill small { display: none; }
  .score-pill { padding: 0 7px; }
  .brand-logo { max-width: 145px; }
  .key { height: 49px; }
  .assist-row { flex-wrap: wrap; }
}

/* Compact phone layout. Board width is deliberately based on viewport width,
   not dynamic viewport height, so iOS browser chrome changes cannot resize the puzzle after first paint. */
@media (max-width: 560px) and (max-height: 850px) {
  .game-shell {
    padding-top: 3px;
    padding-bottom: 12px;
  }

  .puzzle-identity {
    margin: 4px 0 2px;
  }

  .board-wrap {
    width: min(100%, clamp(300px, 80vw, 322px));
    max-width: 100%;
    margin-inline: auto;
    padding: 8px;
    border-radius: 20px;
  }

  /* A no-hint game has no assist row, so give that space back to the grid. */
  .game-shell:has(.assist-row[hidden]) .board-wrap {
    width: min(100%, clamp(312px, 84vw, 340px));
  }

  .board {
    gap: 5px;
  }

  .cell {
    border-width: 2px;
    border-radius: 10px;
    font-size: 27px;
  }

  .selection-indicator {
    margin-top: 8px;
    margin-bottom: 3px;
    padding: 5px 11px;
    font-size: 11px;
  }

  .status {
    height: 45px;
    min-height: 45px;
    margin: 3px auto;
    font-size: 12px;
    line-height: 1.25;
  }

  .assist-row {
    min-height: 32px;
    margin-bottom: 8px;
    gap: 8px;
  }

  .hint-button {
    padding: 6px 10px;
    font-size: 12px;
  }

  .keyboard { gap: 10px; }
  .keyboard-row { gap: 4px; }

  .key {
    height: 38px;
    border-radius: 8px;
    font-size: 16px;
  }

  .actions {
    margin-top: 8px;
  }

  .action-button {
    min-height: 48px;
    font-size: 16px;
  }
}

/* Keep the three essential guess actions reachable throughout phone play. */
@media (max-width: 699px) {
  .game-shell {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  /* Keep the crossword in normal document flow on phones.
     Sticky positioning caused iOS Chrome external-link launches to visually
     shift the board when the browser chrome settled after first paint. */
  .board-wrap {
    position: static;
    z-index: auto;
    isolation: auto;
  }

  .actions {
    position: fixed;
    z-index: 25;
    left: 50%;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(calc(100% - 26px), 634px);
    margin: 0;
    padding: 8px;
    transform: translateX(-50%);
    border: 1px solid rgba(216, 219, 225, .9);
    border-radius: 21px;
    background: rgba(247, 248, 251, .96);
    box-shadow: 0 -8px 24px rgba(25, 39, 64, .12);
  }

  .toast {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }

}

/* Keep the festive game comfortably playable without losing the Advent-door detail. */
@media (min-width: 700px) and (max-height: 850px) {
  body.game-theme-christmas .game-shell {
    width: min(100%, 480px);
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 10px 18px 12px;
    border-radius: 24px;
  }

  body.game-theme-christmas .game-header {
    grid-template-columns: minmax(120px, 1fr) auto auto 40px;
    gap: 7px;
  }

  body.game-theme-christmas .brand-logo { max-width: 175px; }
  body.game-theme-christmas .score-pill,
  body.game-theme-christmas .guess-pill,
  body.game-theme-christmas .menu-button { height: 40px; }
  body.game-theme-christmas .menu-button { width: 40px; }

  body.game-theme-christmas .puzzle-identity {
    margin: 4px 0 5px;
    line-height: 1.2;
  }

  body.game-theme-christmas .puzzle-identity::before {
    margin-bottom: 3px;
    padding: 3px 10px;
    font-size: 8px;
  }

  body.game-theme-christmas .board-wrap {
    width: 310px;
    max-width: 100%;
    margin-inline: auto;
    padding: 8px;
    border-width: 4px;
    border-radius: 21px;
  }

  body.game-theme-christmas .board { gap: 4px; }
  body.game-theme-christmas .cell {
    border-width: 2px;
    border-radius: 9px;
    font-size: 24px;
  }

  body.game-theme-christmas .selection-indicator {
    margin-top: 5px;
    margin-bottom: 2px;
    padding: 4px 10px;
    font-size: 11px;
  }

  body.game-theme-christmas .status {
    height: 34px;
    min-height: 34px;
    margin: 2px auto;
    font-size: 11px;
  }

  body.game-theme-christmas .assist-row {
    min-height: 28px;
    margin-bottom: 4px;
  }

  body.game-theme-christmas .hint-button {
    padding: 5px 10px;
    font-size: 11px;
  }

  body.game-theme-christmas .keyboard {
    gap: 4px;
    padding: 6px;
    border-radius: 14px;
  }

  body.game-theme-christmas .keyboard-row { gap: 4px; }
  body.game-theme-christmas .key {
    flex-basis: 40px;
    height: 34px;
    border-radius: 7px;
    font-size: 15px;
  }

  body.game-theme-christmas .actions {
    margin-top: 6px;
    gap: 8px;
  }

  body.game-theme-christmas .action-button {
    min-height: 42px;
    border-radius: 12px;
    font-size: 15px;
  }
}

@media (max-width: 699px) {
  /* backdrop-filter creates a containing block that can displace fixed controls. */
  body.game-theme-christmas .game-shell { backdrop-filter: none; }
  body.game-theme-christmas .keyboard { padding: 8px; }
}

@media (max-width: 560px) and (max-height: 850px) {
  body.game-theme-christmas .board-wrap {
    width: min(100%, clamp(276px, calc(100dvh - 510px), 320px));
    border-width: 4px;
  }

  body.game-theme-christmas .board { gap: 4px; }
  body.game-theme-christmas .cell {
    border-radius: 8px;
    font-size: clamp(20px, 6.4vw, 26px);
  }
}

@media (max-width: 560px) and (max-height: 720px) {
  body.game-theme-christmas .puzzle-identity::before {
    margin-bottom: 2px;
    padding: 3px 9px;
    font-size: 8px;
  }

  body.game-theme-christmas .board-wrap {
    width: min(100%, 260px);
  }

  body.game-theme-christmas .selection-indicator { margin-top: 5px; }
  body.game-theme-christmas .status {
    height: 36px;
    min-height: 36px;
  }
  body.game-theme-christmas .assist-row { margin-bottom: 4px; }
  body.game-theme-christmas .keyboard {
    gap: 5px;
    padding: 6px;
  }
  body.game-theme-christmas .key { height: 34px; }
  body.game-theme-christmas .action-button { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

.pack-locale{display:block;margin-top:4px;font-size:.54em;line-height:1;font-weight:800;letter-spacing:.08em;color:#7d8795;text-transform:uppercase}


/* V51 tester usage-tracking settings */
.tracking-test-id-setting {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line, #d8dde6);
  border-radius: 18px;
  background: #fff;
}
.tracking-test-id-setting input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccd3df;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
  background: #fff;
}

/* V52: locale selector */
.language-setting {
  display: grid;
  gap: 14px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--line, #d9dee8);
}
.language-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.language-choice {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 2px solid #d9dee8;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
}
.language-choice:has(input:checked) {
  border-color: #2d78f4;
  background: #f4f8ff;
}
.language-choice input {
  margin: 0;
  accent-color: #2d78f4;
}
.language-choice-flag {
  font-size: 1.45rem;
  line-height: 1;
}
.language-choice > span:last-child {
  display: grid;
  gap: 2px;
}
.language-choice small {
  color: #7d8491;
  font-weight: 700;
  line-height: 1.25;
}
@media (max-width: 620px) {
  .language-choice-list { grid-template-columns: 1fr; }
}

/* V53: compact pack-language selector */
.pack-language-switcher{display:flex;align-items:center;gap:10px;margin:14px 0 10px;padding:8px 10px;border:1px solid #e0e5ed;border-radius:13px;background:#f8fafc;color:#5c6471}
.pack-language-switcher-label{font-size:12px;font-weight:800;white-space:nowrap}
.pack-language-buttons{display:flex;gap:4px;padding:3px;border-radius:10px;background:#e9edf4}
.pack-language-buttons button{min-width:54px;border:0;border-radius:8px;background:transparent;padding:7px 9px;font:inherit;font-size:12px;font-weight:850;color:#626b78;cursor:pointer}
.pack-language-buttons button.active{background:#fff;color:#1f6ff0;box-shadow:0 1px 3px rgba(15,23,42,.12)}
.pack-language-status{margin-left:auto;font-size:11px;font-weight:700;color:#838b97;text-align:right}
@media (max-width:620px){.pack-language-switcher{flex-wrap:wrap}.pack-language-status{width:100%;margin-left:0;text-align:left}.pack-language-switcher-label{flex:1}}

/* V54: progressive Puzzle Library locale control. */
.pack-language-switcher[hidden]{display:none!important}


/* V64 Puzzle Complete performance celebration */
.skill-celebration {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 2px 0 16px;
  overflow: visible;
}
.skill-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 13px 10px 12px;
  border: 1px solid #e2e6ed;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
  text-align: center;
}
.skill-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.85) 45%, transparent 70%);
  transform: translateX(-140%);
  pointer-events: none;
}
.skill-celebration.celebrate .skill-card::after { animation: skill-shimmer 900ms ease-out 220ms 1; }
.skill-label { display: block; margin-bottom: 5px; color: #737b88; font-size: 11px; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; }
.skill-card strong { color: #242832; font-size: 29px; font-weight: 950; line-height: 1; font-variant-numeric: tabular-nums; }
.skill-card strong small { margin-left: 2px; color: #9198a4; font-size: 11px; font-weight: 850; }
.player-skill-line { display: flex; align-items: center; justify-content: center; gap: 6px; }
.skill-delta { display: inline-flex; align-items: center; justify-content: center; min-width: 35px; padding: 4px 6px; border-radius: 999px; font-size: 12px; font-weight: 950; font-variant-numeric: tabular-nums; }
.skill-delta.positive { background: #e7f7eb; color: #24743d; }
.skill-delta.negative { background: #fdeaea; color: #a43030; }
.skill-delta.neutral { background: #edf0f5; color: #6e7580; }
.streak-card strong { display: inline-block; }
.skill-celebration.celebrate .streak-card strong { animation: streak-pop 520ms cubic-bezier(.2, .9, .28, 1.35) 520ms both; }
.skill-spark { position: absolute; z-index: 2; color: #d79b22; font-size: 17px; opacity: 0; pointer-events: none; }
.skill-spark-one { top: -11px; left: 9%; }
.skill-spark-two { top: -14px; right: 8%; font-size: 13px; }
.skill-celebration.celebrate .skill-spark-one { animation: skill-spark 850ms ease-out 140ms 1; }
.skill-celebration.celebrate .skill-spark-two { animation: skill-spark 850ms ease-out 390ms 1; }
@keyframes skill-shimmer { 0% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }
@keyframes streak-pop { 0% { transform: scale(.72); opacity: .2; } 70% { transform: scale(1.16); } 100% { transform: scale(1); opacity: 1; } }
@keyframes skill-spark { 0% { transform: translateY(7px) scale(.25) rotate(-18deg); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-9px) scale(1.18) rotate(20deg); opacity: 0; } }
@media (max-width: 520px) {
  .skill-celebration { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .streak-card { grid-column: 1 / -1; }
  .skill-card strong { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .skill-celebration.celebrate .skill-card::after,
  .skill-celebration.celebrate .streak-card strong,
  .skill-celebration.celebrate .skill-spark { animation: none; }
}


/* CrossWordy V71 - Share CrossWordy */
.share-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.share-dialog h3 { margin: 0; color: var(--ink, #151922); }
.share-code-card,
.share-benefit-card,
.share-platform-card,
.share-enter-card,
.share-video-card {
  border: 1px solid #e2e7ee;
  border-radius: 20px;
  background: #fff;
  margin-top: 14px;
  padding: 16px 18px;
}
.share-card-heading { margin-bottom: 10px; }
.share-code-row { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
.share-code-value {
  min-width: 0;
  border: 1.5px solid #b9c4d1;
  background: #fff;
  border-radius: 18px;
  padding: 18px 18px 14px;
  color: #087b87;
  text-align: center;
  cursor: pointer;
}
.share-code-value strong {
  display: block;
  font-size: clamp(2rem, 7vw, 3.25rem);
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
}
.share-code-value small { display: block; margin-top: 10px; color: #596579; font-weight: 800; }
.share-benefit-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  background: linear-gradient(135deg, #f3fbfc 0%, #fbfefe 100%);
}
.share-coin-mark {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #ffc83d;
  border: 6px solid #efa900;
  color: #8b5900;
  display: grid;
  place-items: center;
  font-weight: 1000;
  font-size: 2rem;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.48);
}
.share-benefit-copy h3 { color: #08736f; margin-bottom: 6px; font-size: clamp(1.05rem, 3vw, 1.18rem); }
.share-benefit-copy p { margin: 0; color: #303d50; line-height: 1.4; }
.share-inline-link {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #125fd0;
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.share-platform-card h3 { margin-bottom: 12px; }
.share-platform-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
.share-platform {
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-weight: 800;
  color: #202632;
  cursor: pointer;
  font-size: .9rem;
}
.share-platform-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef1f4;
  color: #202632;
  font-size: 1.45rem;
  font-weight: 1000;
  line-height: 1;
}
.share-platform-whatsapp .share-platform-icon { background: #25d366; color: #fff; }
.share-platform-facebook .share-platform-icon { background: #1877f2; color: #fff; font-family: Arial, sans-serif; font-size: 2rem; }
.share-platform-messages .share-platform-icon { background: #34c759; color: #fff; font-size: 2rem; }
.share-platform-email .share-platform-icon { background: #1677e8; color: #fff; }
.share-platform-x .share-platform-icon { background: #050505; color: #fff; }
.share-platform-telegram .share-platform-icon { background: #2aabee; color: #fff; }
.share-platform-copy .share-platform-icon { background: #087f8b; color: #fff; }
.share-enter-card p { margin: 5px 0 12px; color: #5c687a; }
.share-enter-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.share-enter-row input {
  min-width: 0;
  height: 58px;
  border: 1.5px solid #cbd3dd;
  border-radius: 18px;
  padding: 0 18px;
  font: inherit;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: #172033;
  background: #fff;
}
.share-enter-row input:focus { outline: 3px solid rgba(4,139,151,.17); border-color: #078b96; }
.share-enter-row button {
  min-width: 180px;
  border: 0;
  border-radius: 18px;
  background: #078b96;
  color: #fff;
  font-weight: 900;
  padding: 0 18px;
  font-size: 1rem;
}
.share-enter-row button:disabled { background: #d8dde4; color: #8c95a2; cursor: not-allowed; }
.share-code-status { font-size: .88rem; min-height: 0; margin: 8px 2px 0 !important; color: #5d6675; }
.share-code-status:empty { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.share-video-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(180px, .9fr);
  gap: 16px;
  align-items: center;
  background: linear-gradient(135deg, #effbfc 0%, #fbfefe 100%);
}
.share-video-thumbnail {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #061c35;
  aspect-ratio: 1.6 / 1;
  cursor: pointer;
}
.share-video-thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.share-video-thumbnail::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.2), transparent 58%); }
.share-video-play {
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 1.55rem; padding-left: 4px;
  background: rgba(0,112,126,.93); border: 4px solid rgba(255,255,255,.92); box-shadow: 0 6px 24px rgba(0,0,0,.24);
}
.share-video-card-content { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.share-video-card-content h3 { color: #172033; font-size: clamp(1.1rem, 3.4vw, 1.35rem); line-height: 1.15; }
.share-watch-button {
  border: 2px solid #078b96;
  border-radius: 16px;
  background: #fff;
  color: #087b87;
  padding: 14px 18px;
  font-weight: 900;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.share-security-note {
  margin: 14px 2px 0;
  color: #5c687a;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}
.share-security-icon { color: #0d8d9a; }

.share-video-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(3, 8, 16, .94); color: #fff; }
.share-video-lightbox::backdrop { background: rgba(3, 8, 16, .94); }
.share-video-lightbox-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.share-video-lightbox-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(16px, env(safe-area-inset-top)) 18px 12px; font-size: 1.05rem; }
.share-video-close { width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; line-height: 1; }
.share-video-stage { min-height: 0; display: grid; place-items: center; padding: 0 16px; position: relative; }
.share-video-stage video { display: block; max-width: min(100%, 560px); max-height: 100%; width: auto; height: 100%; object-fit: contain; background: #000; }
.share-video-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px 16px max(18px, env(safe-area-inset-bottom)); }
.share-video-controls button { min-height: 64px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 900; font-size: 1rem; }
.share-video-mute { position: absolute; top: 12px; left: 28px; z-index: 3; min-height: 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.55); background: rgba(7,139,150,.92); color: #fff; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 900; font-size: .95rem; }
.share-video-control-icon { font-size: 1.45rem; line-height: 1; }

@media (max-width: 620px) {
  .share-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); padding: 18px 14px; }
  .share-code-card, .share-benefit-card, .share-platform-card, .share-enter-card, .share-video-card { border-radius: 18px; padding: 14px; margin-top: 12px; }
  .share-code-value strong { font-size: clamp(1.85rem, 10vw, 2.8rem); }
  .share-benefit-card { gap: 12px; }
  .share-coin-mark { width: 56px; height: 56px; border-width: 5px; font-size: 1.65rem; }
  .share-platform-grid { gap: 12px 4px; }
  .share-platform { font-size: .82rem; }
  .share-platform-icon { width: 50px; height: 50px; }
  .share-enter-row { grid-template-columns: 1fr; }
  .share-enter-row input { height: 54px; font-size: 1.35rem; }
  .share-enter-row button { min-height: 54px; min-width: 0; }
  .share-video-card { grid-template-columns: 1.15fr .85fr; gap: 12px; }
  .share-video-card-content h3 { font-size: 1.05rem; }
  .share-watch-button { width: 100%; padding: 13px 14px; font-size: 1rem; }
  .share-video-play { width: 58px; height: 58px; font-size: 1.45rem; }
  .share-security-note { font-size: .9rem; }
  .share-video-mute { top: 10px; left: 24px; padding: 7px 10px; font-size: .88rem; }
  .share-video-controls { grid-template-columns: 1fr 1fr; }
  .share-video-controls button { min-height: 58px; font-size: .88rem; padding: 8px; }
}

@media (max-width: 390px) {
  .share-platform-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .share-platform { font-size: .76rem; }
  .share-platform-icon { width: 46px; height: 46px; }
  .share-benefit-card { grid-template-columns: 1fr; text-align: center; }
  .share-coin-mark { margin: 0 auto; }
  .share-video-card { grid-template-columns: 1fr; }
  .share-video-card-content { text-align: center; }
}


/* CrossWordy V74 private tester tools */
.tester-tools-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dce3ea;
  border-radius: 14px;
  background: #f8fafc;
}
.tester-tools-panel[hidden] { display: none !important; }
.tester-tools-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.tester-tools-heading > span { font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: #64748b; }
.tester-tools-panel > strong, .tester-tools-panel > small { display:block; }
.tester-tools-panel > small { margin-top:5px; color:#64748b; line-height:1.35; }
.tester-jump-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:12px; }
.tester-jump-row input { min-width:0; padding:11px 12px; border:1px solid #cbd5e1; border-radius:10px; font:inherit; }
.tester-jump-row .tester-go { margin:0; min-width:88px; }
.tester-quick-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.tester-quick-row button, .tester-lock-button { min-height:40px; }


/* CrossWordy V87: tighter modern iPhone WebKit layout (Safari and Chrome on iOS).
   Compress whitespace and the fixed action tray without shrinking the crossword. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 430px) and (orientation: portrait) {
    .game-shell {
      padding-top: 8px;
      padding-left: 12px;
      padding-right: 12px;
    }

    .puzzle-identity {
      margin-top: 9px;
      margin-bottom: 5px;
    }

    .selection-indicator {
      margin-top: 8px;
      margin-bottom: 2px;
    }

    .status {
      height: 42px;
      min-height: 42px;
      margin: 0 auto 2px;
      line-height: 1.2;
    }

    .assist-row {
      min-height: 34px;
      margin-bottom: 7px;
    }

    .keyboard { gap: 8px; }
    .keyboard-row { gap: 4px; }

    .actions {
      bottom: max(4px, env(safe-area-inset-bottom));
      padding: 6px;
      border-radius: 18px;
    }

    .action-button {
      min-height: 50px;
      border-radius: 15px;
    }
  }
}


/* CrossWordy V89: iOS Safari short-viewport correction.
   Safari's bottom browser chrome leaves less usable height than Chrome on iOS.
   Keep the board comfortably large, but compact the vertical stack enough that
   all three keyboard rows remain clear of the fixed Clear / Guess tray.
   Chrome and other browsers keep the V87 layout unchanged. */
@media (max-width: 560px) and (max-height: 850px) and (orientation: portrait) {
  html.ios-safari .game-shell {
    padding-top: 2px;
  }

  html.ios-safari .puzzle-identity {
    margin-top: 3px;
    margin-bottom: 2px;
  }

  html.ios-safari .board-wrap,
  html.ios-safari .game-shell:has(.assist-row[hidden]) .board-wrap {
    width: min(100%, clamp(310px, calc(100dvh - 330px), 370px));
    padding: 7px;
  }

  html.ios-safari .selection-indicator {
    margin-top: 4px;
    margin-bottom: 0;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  html.ios-safari .status {
    height: 35px;
    min-height: 35px;
    margin: 0 auto;
  }

  html.ios-safari .assist-row {
    min-height: 28px;
    margin-bottom: 4px;
  }

  html.ios-safari .hint-button {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  html.ios-safari .keyboard {
    gap: 6px;
  }

  html.ios-safari .keyboard-row {
    gap: 4px;
  }

  html.ios-safari .key {
    height: 34px;
  }

  html.ios-safari .actions {
    bottom: max(3px, env(safe-area-inset-bottom));
    padding: 5px;
  }

  html.ios-safari .action-button {
    min-height: 46px;
  }
}



/* V110: full-screen How to Play video.
   The dialog is a true viewport overlay. The video stage gets whatever height
   remains after the controls, and object-fit: contain always shows the entire
   2:3 tutorial frame (including its keyboard and bottom controls). */
.how-to-video-dialog[open] {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  border-radius: 0;
  background: #0d111a;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
}
.how-to-video-dialog::backdrop { background: rgba(10,16,28,.96); }
.how-to-video-stage {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  background: #070a10;
}
.how-to-video-stage video {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center center;
  background: #070a10;
}
.how-to-video-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0;
}
.how-to-video-actions .dialog-action,
.how-to-video-actions .dialog-secondary {
  margin: 0;
  min-height: 48px;
}
.how-to-video-actions .how-to-replay,
.how-to-video-actions .how-to-mute {
  border: 1.5px solid #2d7ff9;
  border-radius: 13px;
  background: #fff;
  color: #1768d8;
  font-weight: 900;
}
.how-to-video-actions .how-to-mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.how-to-mute-icon { font-size: 1.1em; line-height: 1; }
.how-to-video-actions .how-to-start {
  grid-column: 1 / -1;
  min-height: 54px;
  border-radius: 14px;
}
@media (min-width: 900px) {
  .how-to-video-dialog[open] {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  .how-to-video-stage video {
    /* Prevent an ultra-wide desktop from making the portrait tutorial enormous;
       height remains the primary constraint. */
    max-width: 760px;
  }
  .how-to-video-actions {
    width: min(760px, 100%);
    justify-self: center;
  }
}
@media (max-height: 650px) {
  .how-to-video-dialog[open] { gap: 6px; padding-top: 6px; padding-bottom: 6px; }
  .how-to-video-actions { gap: 6px; }
  .how-to-video-actions .dialog-action,
  .how-to-video-actions .dialog-secondary { min-height: 40px; }
  .how-to-video-actions .how-to-start { min-height: 44px; }
}



/* V111: optional tester code on Confidential Preview */
.preview-tester-code {
  display: grid;
  gap: 7px;
  margin: 16px 0 4px;
  text-align: left;
}
.preview-tester-code strong {
  font-size: 14px;
  color: #303846;
}
.preview-tester-code small {
  color: #6d7581;
  font-size: 12px;
  line-height: 1.4;
}
.preview-tester-code input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccd3df;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
  background: #fff;
}

/* V113 interstitial-ad placeholder: deliberately outside active gameplay. */
.interstitial-ad-placeholder{width:min(100vw,760px);height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;padding:0;background:#172033;color:#fff}
.interstitial-ad-placeholder::backdrop{background:#172033}
.interstitial-ad-placeholder-inner{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 24px;gap:16px}
.interstitial-ad-placeholder-inner .eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.interstitial-ad-placeholder-inner h2{margin:0;max-width:540px;font-size:clamp(28px,7vw,48px);line-height:1.05}
.interstitial-ad-placeholder-inner p{max-width:560px;margin:0;opacity:.8;line-height:1.5}
.interstitial-ad-placeholder-inner button{margin-top:12px;max-width:320px}

/* CrossWordy V118 tester telemetry summary controls */
.tester-summary-tools{margin-top:14px;padding-top:12px;border-top:1px solid var(--line,#d9dee8);display:grid;gap:8px}.tester-summary-tools>small{display:block}.tester-summary-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.tester-summary-row button{width:100%}.tester-summary-row select{min-width:132px}@media(max-width:520px){.tester-summary-row{grid-template-columns:1fr}.tester-summary-row select{width:100%}}




/* CROSSWORDY HOW TO PLAY DIRECT POLISH V126 */
#help-dialog .help-start{
  background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
  border-color:#cfe0ff;
}
#help-dialog .help-show-video{
  background:linear-gradient(135deg,#3f85ff 0%,#2f6edb 100%);
  color:#fff;
  border:none;
  border-radius:14px;
  padding:10px 18px;
  min-width:142px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(47,110,219,.22);
}
#help-dialog .help-show-video:hover{filter:brightness(.97);}
#help-dialog .help-feedback{border-width:1px 1px 1px 5px;}
#help-dialog .help-feedback:nth-child(1){
  background:linear-gradient(180deg,#f7fbff 0%,#eef5ff 100%);
  border-left-color:#2f78ff;
}
#help-dialog .help-feedback:nth-child(2){
  background:linear-gradient(180deg,#fffdf3 0%,#fff9de 100%);
  border-left-color:#e4bd00;
}
#help-dialog .help-feedback:nth-child(3){
  background:linear-gradient(180deg,#fff8f8 0%,#ffeded 100%);
  border-left-color:#dc7b7b;
}
#help-dialog .help-feedback:nth-child(4){
  background:linear-gradient(180deg,#f5fff8 0%,#e9f8ef 100%);
  border-left-color:#1faf61;
}
#help-dialog .help-finish{
  background:linear-gradient(180deg,#f4fbf7 0%,#e8f6ee 100%);
  border-color:#bfe1cc;
}
#help-dialog > .dialog-action[data-close="help-dialog"]{
  background:linear-gradient(135deg,#3f85ff 0%,#2f6edb 100%);
  color:#fff;
  border:none;
  box-shadow:0 10px 24px rgba(47,110,219,.24);
}


/* CrossWordy V144: iOS installed/app-mode layout polish only.
   Browser Safari/Chrome layouts remain unchanged. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 430px) and (orientation: portrait) {
    html.ios-app .status {
      height: auto;
      min-height: 62px;
      margin: 2px auto 6px;
      padding: 6px 8px;
      box-sizing: border-box;
      line-height: 1.28;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    html.ios-app .keyboard {
      gap: 12px;
    }
  }
}


/* CrossWordy V145: iOS installed/app-mode bottom tray clearance only. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 430px) and (orientation: portrait) {
    html.ios-app .actions {
      bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
    }

    html.ios-app .keyboard {
      margin-bottom: 10px;
    }
  }
}


/* CrossWordy V146: iOS installed/app-mode bottom tray micro-adjustment. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 430px) and (orientation: portrait) {
    html.ios-app .actions {
      bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
    }

    html.ios-app .keyboard {
      margin-bottom: 12px;
    }
  }
}


/* CrossWordy V148: Play as App menu/help panel */
.play-as-app-dialog{
  max-width:760px;
}
.play-as-app-intro{
  max-width:620px;
  color:#667085;
  line-height:1.5;
}
.play-as-app-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:18px 0;
}
.play-as-app-card{
  border:1px solid #dce5ee;
  background:#f8fafc;
  border-radius:20px;
  padding:18px;
}
.play-as-app-platform{
  display:inline-block;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  color:#2f78ff;
  margin-bottom:5px;
}
.play-as-app-card h3{
  margin:0 0 12px;
  font-size:1.05rem;
}
.play-as-app-card ol{
  margin:0;
  padding-left:1.25rem;
}
.play-as-app-card li{
  margin:0 0 9px;
  line-height:1.45;
  color:#475467;
}
.play-as-app-card li:last-child{
  margin-bottom:0;
}
.play-as-app-tip{
  display:flex;
  gap:8px;
  align-items:flex-start;
  border-radius:16px;
  padding:13px 15px;
  margin:0 0 16px;
  background:#eef6ff;
  color:#31516d;
  line-height:1.4;
}
.play-as-app-tip strong{
  flex:0 0 auto;
}
@media(max-width:620px){
  .play-as-app-grid{
    grid-template-columns:1fr;
  }
  .play-as-app-card{
    padding:16px;
  }
  .play-as-app-tip{
    display:block;
  }
  .play-as-app-tip strong{
    display:block;
    margin-bottom:3px;
  }
}

/* CrossWordy V151: polished Play as App screen */
.play-as-app-dialog{width:min(760px,calc(100vw - 24px));max-width:760px;border:0;padding:0;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.24)}
.play-as-app-dialog::backdrop{background:rgba(28,39,58,.36);backdrop-filter:blur(6px)}
.play-as-app-shell{padding:18px 22px 22px}
.play-as-app-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:14px}
.play-as-app-back{justify-self:start;border:0;background:transparent;padding:2px 0;color:#1476ff;font:inherit;font-weight:800}
.play-as-app-handle{width:54px;height:5px;border-radius:999px;background:#c9ced8}
.play-as-app-close{justify-self:end}
.play-as-app-heading{margin:0 8px 20px}
.play-as-app-heading .eyebrow{display:block;margin-bottom:6px;color:#1476ff;font-weight:900;letter-spacing:.13em}
.play-as-app-heading h2{margin:0;font-size:clamp(2rem,5vw,3.4rem);line-height:.98;letter-spacing:-.035em;color:#0f2144}
.play-as-app-heading p{max-width:620px;margin:13px 0 0;color:#657087;font-size:1.05rem;line-height:1.45}
.play-as-app-card{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:start;margin:0 0 14px;border-radius:24px;padding:22px;border:1px solid}
.play-as-app-card-ios{background:linear-gradient(145deg,#f5faff 0%,#eef6ff 100%);border-color:#b8d6ff}
.play-as-app-card-android{background:linear-gradient(145deg,#fbfff5 0%,#f4f8ea 100%);border-color:#d5e8a9}
.play-as-app-card-icon{display:grid;place-items:center;width:96px;height:96px;margin:4px auto 0;border-radius:22px}
.play-as-app-card-icon-phone{background:linear-gradient(145deg,#e5f0ff,#f4f8ff);box-shadow:inset 0 0 0 1px #c4dcff}
.play-as-app-phone-glyph{width:30px;height:58px;border:4px solid #1554d1;border-radius:8px;position:relative;box-sizing:border-box}
.play-as-app-phone-glyph::after{content:"";position:absolute;left:50%;bottom:5px;width:9px;height:3px;border-radius:10px;background:#1554d1;transform:translateX(-50%)}
.play-as-app-card-icon-android{background:linear-gradient(145deg,#e7f5c8,#f1f8dc);box-shadow:inset 0 0 0 1px #d5e8a9}
.play-as-app-android-glyph{width:62px;height:54px;border-radius:20px 20px 12px 12px;background:#67c23a;position:relative}
.play-as-app-android-glyph::before,.play-as-app-android-glyph::after{content:"";position:absolute;top:-10px;width:3px;height:16px;background:#67c23a;border-radius:3px}
.play-as-app-android-glyph::before{left:17px;transform:rotate(-28deg)} .play-as-app-android-glyph::after{right:17px;transform:rotate(28deg)}
.play-as-app-card-body h3{margin:0 0 10px;font-size:1.3rem;line-height:1.2}.play-as-app-card-ios h3{color:#1476ff}.play-as-app-card-android h3{color:#139338}
.play-as-app-steps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.play-as-app-steps li{display:grid;grid-template-columns:28px 1fr;gap:11px;align-items:start;position:relative}
.play-as-app-steps li:not(:last-child)::after{content:"";position:absolute;left:13px;top:30px;bottom:-11px;border-left:2px dotted currentColor;opacity:.28}
.play-step-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;font-weight:900;line-height:1}
.play-as-app-steps-blue{color:#1476ff}.play-as-app-steps-green{color:#139338}.play-as-app-steps-blue .play-step-num{background:#1476ff}.play-as-app-steps-green .play-step-num{background:#139338}
.play-as-app-steps li>span:last-child{color:#27354d;line-height:1.45}.play-as-app-steps small{display:block;margin-top:6px;color:#657087;font-size:.9rem;line-height:1.35}
.play-share-icon{display:inline-grid;place-items:center;width:36px;height:36px;margin-left:6px;vertical-align:middle;border:2px solid #1476ff;border-radius:10px;background:#fff;box-shadow:0 3px 10px rgba(20,118,255,.12)}
.play-share-icon svg{width:23px;height:23px;fill:none;stroke:#1476ff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.play-share-icon-green{border-color:#139338;box-shadow:0 3px 10px rgba(19,147,56,.10)}.play-share-icon-green svg{stroke:#139338}
.play-as-app-home-preview{display:grid;grid-template-columns:minmax(220px,1.05fr) minmax(220px,1fr);gap:22px;align-items:center;border:1px solid #d9e2ef;border-radius:22px;padding:12px 16px;margin:2px 0 16px;background:linear-gradient(180deg,#fbfdff,#f7faff)}
.play-as-app-home-image{display:block;width:100%;height:auto;align-self:center}
.play-as-app-home-phone{position:relative;min-height:132px;overflow:hidden;border-radius:18px 18px 0 0;padding:12px;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.18) 0 38%,transparent 38% 100%),linear-gradient(145deg,#062455,#153f80)}
.play-as-app-home-status{display:flex;justify-content:space-between;font-size:.72rem;font-weight:800;opacity:.95}
.play-as-app-home-icon-wrap{position:absolute;left:24px;bottom:13px;text-align:center}
.play-as-app-home-icon{position:relative;width:54px;height:54px;border-radius:14px;background:#070b13;box-shadow:0 7px 16px rgba(0,0,0,.35);transform:rotate(-5deg)}
.play-as-app-home-icon span{position:absolute;inset:7px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#3a8cff,#0b63ec);color:#fff;font-size:2rem;line-height:1;font-weight:900;transform:rotate(5deg)}
.play-as-app-home-icon i{position:absolute;right:4px;top:-6px;width:18px;height:18px;border-top:4px solid #0b7cff;border-right:4px solid #0b7cff;border-radius:50%;transform:rotate(16deg)}
.play-as-app-home-label{margin-top:6px;color:#fff;font-size:.72rem}.play-as-app-home-placeholder{position:absolute;bottom:30px;width:58px;height:58px;border-radius:14px;background:rgba(255,255,255,.12)}.play-as-app-home-placeholder.p1{left:135px}.play-as-app-home-placeholder.p2{left:215px}
.play-as-app-home-copy{display:grid;gap:8px}.play-as-app-home-copy strong{color:#0f2144;font-size:1.15rem;line-height:1.25}.play-as-app-home-copy span{color:#657087;line-height:1.4}
.play-as-app-got-it{width:100%;min-height:54px;border:0;border-radius:18px;background:linear-gradient(90deg,#0c6cff,#147cff);color:#fff;font-weight:900;font-size:1.08rem;box-shadow:0 10px 24px rgba(20,118,255,.22)}
@media(max-width:650px){.play-as-app-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:24px}.play-as-app-dialog .play-as-app-shell{padding:14px 12px 16px}.play-as-app-heading{margin:0 4px 14px}.play-as-app-heading h2{font-size:2.25rem}.play-as-app-heading p{font-size:.98rem}.play-as-app-card{grid-template-columns:1fr;gap:10px;padding:16px;border-radius:20px}.play-as-app-card-icon{width:70px;height:70px;margin:0}.play-as-app-phone-glyph{width:24px;height:47px;border-width:3px}.play-as-app-android-glyph{width:48px;height:44px}.play-as-app-card-body h3{font-size:1.1rem}.play-as-app-home-preview{grid-template-columns:1fr;gap:12px;padding:10px}.play-as-app-home-phone{min-height:120px}}


/* CrossWordy V152: Play as App scrolling + proper platform logos */
.play-as-app-dialog{
  max-height:min(860px, calc(100dvh - 16px));
}
.play-as-app-shell{
  max-height:min(860px, calc(100dvh - 16px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.play-as-app-topbar{
  position:sticky;
  top:0;
  z-index:3;
  padding-bottom:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 72%, rgba(255,255,255,0) 100%);
}
.play-as-app-card-icon-apple{
  background:linear-gradient(145deg,#eff3fa,#ffffff);
  box-shadow:inset 0 0 0 1px #d7dfef;
}
.play-as-app-card-icon-android-logo{
  background:linear-gradient(145deg,#eef8de,#fbfff5);
  box-shadow:inset 0 0 0 1px #d6e7b2;
}
.play-os-logo{
  width:56px;
  height:56px;
}
.play-os-logo-apple{
  fill:#0f2144;
}
.play-os-logo-android{
  fill:none;
  stroke:#50b92d;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.play-as-app-card-body h3{
  margin-bottom:12px;
}
.play-share-icon{
  border-color:#1476ff;
  box-shadow:0 3px 10px rgba(20,118,255,.12);
}
.play-share-icon svg{
  stroke:#1476ff;
}
.play-as-app-home-preview{
  margin-bottom:18px;
}
@media (max-width:650px){
  .play-as-app-dialog{
    width:calc(100vw - 12px);
    max-height:calc(100dvh - 12px);
  }
  .play-as-app-shell{
    max-height:calc(100dvh - 12px);
    padding-bottom:max(16px, env(safe-area-inset-bottom));
  }
  .play-as-app-topbar{
    padding-top:2px;
    margin-bottom:10px;
  }
  .play-as-app-card{
    margin-bottom:12px;
  }
  .play-as-app-card-icon{
    width:74px;
    height:74px;
  }
  .play-os-logo{
    width:44px;
    height:44px;
  }
  .play-as-app-home-preview{
    margin-bottom:14px;
  }
}

/* CrossWordy V153: Player Skill & Win Streak guide */
.player-skill-dialog{width:min(820px,calc(100vw - 24px));max-width:820px;max-height:calc(100dvh - 18px);border:0;padding:0;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.24)}
.player-skill-dialog::backdrop{background:rgba(28,39,58,.48);backdrop-filter:blur(5px)}
.player-skill-shell{max-height:calc(100dvh - 18px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:24px 28px 28px}
.player-skill-topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}.player-skill-back{border:0;background:transparent;padding:0;color:#1476ff;font:inherit;font-weight:850}.player-skill-heading{margin:0 0 22px}.player-skill-heading .eyebrow{display:block;color:#1476ff;font-weight:900;letter-spacing:.15em;margin-bottom:8px}.player-skill-heading h2{margin:0;color:#0f172a;font-size:clamp(2rem,5vw,3.5rem);line-height:1.02;letter-spacing:-.04em}.player-skill-heading p{margin:14px 0 0;max-width:720px;color:#667085;font-size:1.05rem;line-height:1.5}
.player-skill-card{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start;padding:20px;margin:0 0 14px;border:1px solid;border-radius:22px}.player-skill-card h3{margin:0 0 5px;color:#172033;font-size:1.2rem}.player-skill-card p{margin:0;color:#5f6b7d;line-height:1.5}.player-skill-card-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;font-size:1.55rem;font-weight:900}.player-skill-card-blue{background:#f2f7ff;border-color:#c8dcff;border-left:6px solid #2f7df6}.player-skill-card-blue .player-skill-card-icon{background:#2f7df6;color:#fff}.player-skill-card-green{background:#f1fbf5;border-color:#c9ead5;border-left:6px solid #22ad69}.player-skill-card-green .player-skill-card-icon{background:#22ad69;color:#fff}.player-skill-card-neutral{background:#f8fafc;border-color:#dbe3ee;border-left:6px solid #74839a}.player-skill-card-neutral .player-skill-card-icon{background:#eef2f7;color:#344054}
.player-skill-section-title{margin:26px 0 12px;color:#172033;font-size:1.35rem}.player-skill-formula-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}.player-skill-formula-card{border:1px solid #dce4ef;border-radius:20px;padding:18px;background:#fff}.player-skill-formula-card h4{margin:10px 0 8px;color:#172033;font-size:1.05rem}.player-skill-formula-card p{color:#667085;line-height:1.45}.player-skill-formula{padding:10px 12px;border-radius:12px;background:#f6f8fb;color:#172033!important;font-weight:800;overflow-wrap:anywhere}.player-skill-badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:.72rem;font-weight:900;letter-spacing:.08em}.player-skill-badge.solved{background:#dcfce7;color:#167444}.player-skill-badge.failed{background:#fff1f2;color:#b42318}
.player-skill-penalties{margin:14px 0;padding:18px;border:1px solid #f0d99b;border-radius:20px;background:#fffaf0}.player-skill-penalties h3{margin:0 0 12px;color:#172033}.player-skill-penalty-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.player-skill-penalty-grid div{display:grid;gap:3px;padding:12px;border-radius:14px;background:#fff;border:1px solid #f2dfae}.player-skill-penalty-grid strong{color:#344054}.player-skill-penalty-grid span{color:#b54708;font-weight:850}.player-skill-list{margin:10px 0 12px;padding-left:1.2rem;color:#5f6b7d;line-height:1.55}
.player-skill-note{display:grid;gap:5px;margin:14px 0;padding:16px 18px;border-radius:18px;border:1px solid #c8dcff;background:#eef6ff;color:#3c526d;line-height:1.45}.player-skill-note strong{color:#174c91}.player-skill-note-light{border-color:#dce4ef;background:#f8fafc}.player-skill-note-light strong{color:#344054}.player-skill-got-it{width:100%;min-height:54px;margin-top:4px;border:0;border-radius:18px;background:linear-gradient(90deg,#0c6cff,#147cff);color:#fff;font-weight:900;font-size:1.05rem}.player-skill-result-link{display:inline-flex;align-items:center;gap:6px;margin:8px auto 0;padding:0;border:0;background:transparent;color:#1476ff;font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(max-width:650px){.player-skill-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:24px}.player-skill-shell{max-height:calc(100dvh - 12px);padding:18px 16px max(20px,env(safe-area-inset-bottom))}.player-skill-heading h2{font-size:2.25rem}.player-skill-card{grid-template-columns:52px 1fr;gap:12px;padding:16px}.player-skill-card-icon{width:46px;height:46px}.player-skill-formula-grid{grid-template-columns:1fr}.player-skill-penalty-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* CrossWordy V154: clearer Player Skill scoring cards */
.player-skill-explainer-card{display:flex;flex-direction:column}
.player-skill-explainer-card h4{font-size:1.22rem;margin:12px 0 8px}
.player-skill-big-rule{margin:0 0 14px!important;color:#24324a!important;font-size:1.06rem;font-weight:800;line-height:1.4}
.player-skill-example{display:grid;gap:5px;margin:0 0 14px;padding:13px 14px;border-radius:14px;background:#f7f9fc;border:1px solid #e4e9f1;color:#5f6b7d;line-height:1.45}
.player-skill-example strong{color:#344054}
.player-skill-range{margin:0 0 12px!important;color:#344054!important}
.player-skill-maths{margin-top:auto!important;padding:11px 12px;border-radius:12px;background:#f4f6f9;color:#667085!important;font-size:.9rem;line-height:1.4}
.player-skill-maths strong{color:#475467}
@media(max-width:650px){
  .player-skill-explainer-card h4{font-size:1.12rem}
  .player-skill-big-rule{font-size:1rem}
}


/* CrossWordy V175: native app-only game screen tuning. */
html.native-app .native-rating-comment {
  display: none !important;
}

html.native-app .game-shell {
  padding-top: calc(env(safe-area-inset-top) + 4px) !important;
}

html.native-app .game-header {
  position: relative;
  z-index: 1;
}

@media (max-width: 560px) {
  html.native-app .game-shell {
    padding-top: calc(env(safe-area-inset-top) + 4px) !important;
  }

  html.native-app .keyboard {
    gap: 6px !important;
    margin-bottom: 2px !important;
  }

  html.native-app .keyboard-row {
    gap: 4px !important;
  }

  html.native-app .key {
    height: 44px !important;
    border-radius: 8px !important;
    font-size: 17px !important;
  }

  html.native-app .actions {
    padding: 7px !important;
  }

  html.native-app .action-button {
    min-height: 52px !important;
  }
}

/* CrossWordy V175: one clean result-card layout for web + native.
   No inherited Player Skill exceptions. */
#complete-dialog .skill-celebration {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 9px !important;
  margin: 2px 0 12px !important;
}

#complete-dialog .streak-card {
  grid-column: auto !important;
}

#complete-dialog .skill-card {
  position: relative !important;
  box-sizing: border-box !important;
  height: 86px !important;
  min-height: 86px !important;
  padding: 9px 6px 7px !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 24px 1fr !important;
  overflow: hidden !important;
  text-align: center !important;
}

#complete-dialog .skill-label {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  color: #737b88 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* This is deliberately identical for all three cards. */
#complete-dialog .skill-value-line {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  gap: 0 !important;
  white-space: nowrap !important;
}

#complete-dialog .skill-value-line > strong {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  color: #242832 !important;
  font-size: 26px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

#complete-dialog .skill-value-line > strong small {
  margin-left: 2px !important;
  color: #9198a4 !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

/* Delta is independent of the score row, so even 100/100 cannot wrap. */
#complete-dialog #player-skill-card .skill-delta,
html.native-app #complete-dialog #player-skill-card .skill-delta {
  position: absolute !important;
  right: 5px !important;
  bottom: 5px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 3px 5px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  line-height: 1 !important;
}

/* Normal next-puzzle text is intentionally omitted; special messages still show. */
#complete-message:empty {
  display: none !important;
}

@media (max-width: 520px) {
  #complete-dialog .skill-celebration {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #complete-dialog .streak-card {
    grid-column: auto !important;
  }

  #complete-dialog .skill-card {
    height: 82px !important;
    min-height: 82px !important;
  }

  #complete-dialog .skill-value-line > strong {
    font-size: 24px !important;
  }
}
/* CrossWordy V177: wider-iPhone keyboard clearance.
   17 Pro / 17e / Air layouts remain unchanged; on wider iPhones such as
   17 Pro Max, reclaim a little space above the fixed action tray. */
@media (min-width: 431px) and (max-width: 560px) and (orientation: portrait) {
  html.native-app .keyboard {
    margin-top: -18px !important;
  }
}

/* The result dialog itself receives focus on open, not rating 1.
   A rating is only styled as selected when the radio is actually checked. */
#complete-dialog:focus {
  outline: none;
}
/* CrossWordy V178: wider-iPhone hint spacing.
   On Pro Max-sized portrait iPhones, lift the hint row slightly away from the keyboard.
   Other phone layouts remain unchanged. */
@media (min-width: 431px) and (max-width: 560px) and (orientation: portrait) {
  html.native-app .assist-row {
    transform: translateY(-10px);
    margin-bottom: 18px !important;
  }
}


/* CrossWordy V181 native menu clean-up. */
html.native-app #menu-play-as-app,
html.native-app .tracking-test-id-setting {
  display: none !important;
}

html.native-app #usage-tracking-toggle {
  pointer-events: auto;
}

/* CrossWordy V186: highlighted availability feedback on relevant screens. */
.availability-notice {
  margin: 6px 0 14px;
  padding: 12px 14px;
  border: 1px solid #e1b455;
  border-radius: 10px;
  background: #fff2c2;
  color: #5a4212;
  line-height: 1.35;
}
.availability-notice strong,
.availability-notice span {
  display: block;
}
.availability-notice strong {
  margin-bottom: 3px;
  font-weight: 800;
}
#reveal-dialog .menu-list button:disabled {
  opacity: .45;
  cursor: default;
}



/* CrossWordy V187: header help, onboarding guide, current skill and helper prominence. */
.header-guess-group {
  display: flex;
  align-items: center;
  gap: 7px;
}
.game-help-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}
.game-help-button:active { transform: scale(.96); }

.help-key-available {
  border: 2px solid #d8dde6;
  background: #fff;
  color: #27303d;
  box-shadow: 0 3px 0 #c7ced9;
}

.player-skill-current {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
.player-skill-current > div {
  padding: 13px 14px;
  border: 1px solid #d8e4f2;
  border-radius: 14px;
  background: #f7faff;
}
.player-skill-current span {
  display: block;
  margin-bottom: 4px;
  color: #6c788b;
  font-size: 12px;
  font-weight: 800;
}
.player-skill-current strong {
  display: block;
  color: #14213b;
  font-size: 22px;
  line-height: 1.1;
}

.intro-guide-dialog {
  width: min(680px, calc(100vw - 28px));
  max-height: min(900px, calc(100dvh - 28px));
  padding: 0;
}
.intro-guide-shell {
  padding: 24px;
  overflow-y: auto;
}
.intro-guide-shell h2 {
  margin: 5px 0 16px;
}
.intro-feedback-list .help-feedback {
  grid-template-columns: 54px 1fr;
}
.intro-guide-shell .dialog-action {
  margin-top: 14px;
}

.helper-never-button {
  min-height: 50px !important;
  border: 2px solid var(--blue) !important;
  background: #edf5ff !important;
  color: #0e68df !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 12px rgba(24, 118, 255, .12);
}

@media (max-width: 560px) {
  .header-guess-group { gap: 5px; }
  .game-help-button {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 18px;
  }
  .intro-guide-shell { padding: 18px; }
  .intro-feedback-list { gap: 7px; }
  .intro-feedback-list .help-feedback {
    grid-template-columns: 44px 1fr;
    padding: 10px;
  }
  .intro-feedback-list .help-key {
    width: 40px;
    height: 40px;
  }
}

/* CrossWordy V189: corrected letter guide and direction help. */
.help-key-discovered {
  border: 2px solid #d8dde6;
  background: #ffffff;
  color: #27303d;
  box-shadow: 0 3px 0 #c7ced9;
}
.help-key-available {
  border: 2px solid #aeb6c2;
  background: #aeb3bc;
  color: #ffffff;
  box-shadow: 0 3px 0 #8f96a1;
}
.help-direction-guide {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1px solid #d9e4f2;
  border-radius: 12px;
  background: #f7faff;
}
.help-direction-guide strong {
  display: block;
  margin-bottom: 3px;
}
.help-direction-guide p {
  margin: 0;
  line-height: 1.45;
  color: #5f6d80;
}



/* CrossWordy V190: move direction help above the guide and match guide trims to each status. */
#help-dialog .help-feedback,
.intro-feedback-list .help-feedback {
  border-width: 1px 1px 1px 5px;
}
#help-dialog .help-feedback.help-feedback-perfect,
.intro-feedback-list .help-feedback.help-feedback-perfect {
  background: linear-gradient(180deg,#f7fbff 0%,#eef5ff 100%);
  border-left-color: #2f78ff;
}
#help-dialog .help-feedback.help-feedback-jumbled,
.intro-feedback-list .help-feedback.help-feedback-jumbled {
  background: linear-gradient(180deg,#fffdf3 0%,#fff9de 100%);
  border-left-color: #e4bd00;
}
#help-dialog .help-feedback.help-feedback-wrong,
.intro-feedback-list .help-feedback.help-feedback-wrong {
  background: linear-gradient(180deg,#fff8f8 0%,#ffeded 100%);
  border-left-color: #dc7b7b;
}
#help-dialog .help-feedback.help-feedback-discovered,
.intro-feedback-list .help-feedback.help-feedback-discovered {
  background: linear-gradient(180deg,#fafbfc 0%,#f0f3f7 100%);
  border-left-color: #cfd6e0;
}
#help-dialog .help-feedback.help-feedback-available,
.intro-feedback-list .help-feedback.help-feedback-available {
  background: linear-gradient(180deg,#f3f5f8 0%,#e5e9ef 100%);
  border-left-color: #aeb6c2;
}
#help-dialog .help-feedback.help-feedback-solved,
.intro-feedback-list .help-feedback.help-feedback-solved {
  background: linear-gradient(180deg,#f5fff8 0%,#e9f8ef 100%);
  border-left-color: #1faf61;
}
#help-dialog .help-direction-guide,
.intro-guide-shell .help-direction-guide {
  margin: 12px 0 12px;
}
.intro-guide-shell .help-direction-guide {
  margin-top: 6px;
}


/* CrossWordy V192: compact non-modal teaching helpers. */
html.native-app .testing-tools { display: none !important; }

.teaching-banner {
  position: fixed;
  z-index: 80;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  width: min(calc(100% - 20px), 520px);
  transform: translate(-50%, calc(-100% - 28px));
  opacity: 0;
  pointer-events: none;
  transition: transform .3s ease, opacity .22s ease;
}
.teaching-banner.show {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.teaching-banner-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: start;
  height: 148px;
  padding: 13px 12px 11px 14px;
  overflow: hidden;
  border: 1px solid #dce2ea;
  border-left-width: 5px;
  border-radius: 17px;
  background: #f7faff;
  box-shadow: 0 10px 28px rgba(23, 34, 55, .18);
}
.teaching-banner-visual {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: 2px;
}
.teaching-banner .help-key {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 15px;
}
.teaching-banner-info-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  font-size: 19px;
  font-weight: 900;
  font-family: Georgia, serif;
}
.teaching-banner-copy { min-width: 0; }
.teaching-banner-title {
  display: block;
  margin: 0 0 4px;
  color: #171b23;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 850;
}
.teaching-banner-copy > p {
  margin: 0;
  color: #566173;
  font-size: 13px;
  line-height: 1.34;
  font-weight: 650;
}
.teaching-banner-meta {
  position: absolute;
  left: 66px;
  right: 40px;
  bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: #798393;
  font-size: 11px;
  line-height: 1.2;
}
#teaching-banner-never {
  border: 0;
  padding: 3px 0;
  background: transparent;
  color: #536b8d;
  font-size: 11px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.teaching-banner-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #687589;
  font-size: 24px;
  line-height: 1;
}
.teaching-banner-info .teaching-banner-card {
  background: linear-gradient(180deg,#f7fbff 0%,#eef5ff 100%);
  border-left-color: #2f78ff;
}
.teaching-banner-perfect .teaching-banner-card {
  background: linear-gradient(180deg,#f7fbff 0%,#eef5ff 100%);
  border-left-color: #2f78ff;
}
.teaching-banner-jumbled .teaching-banner-card {
  background: linear-gradient(180deg,#fffdf3 0%,#fff9de 100%);
  border-left-color: #e4bd00;
}
.teaching-banner-wrong .teaching-banner-card {
  background: linear-gradient(180deg,#fff8f8 0%,#ffeded 100%);
  border-left-color: #dc7b7b;
}
.teaching-banner-solved .teaching-banner-card {
  background: linear-gradient(180deg,#f5fff8 0%,#e9f8ef 100%);
  border-left-color: #1faf61;
}
@media (max-width: 390px) {
  .teaching-banner-card {
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    gap: 8px;
    height: 152px;
    padding-left: 11px;
    padding-right: 9px;
  }
  .teaching-banner-visual { width: 38px; height: 38px; }
  .teaching-banner .help-key { width: 34px; height: 34px; font-size: 14px; }
  .teaching-banner-title { font-size: 15px; }
  .teaching-banner-copy > p { font-size: 12px; }
  .teaching-banner-meta { left: 57px; right: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .teaching-banner { transition: opacity .12s linear; }
}


/* CrossWordy V194: very compact helpers + reliable first-launch positioning. */
.teaching-banner {
  top: 0;
  width: min(calc(100% - 12px), 520px);
  transition: transform .9s ease, opacity .66s ease;
}
html.native-app .teaching-banner {
  top: env(safe-area-inset-top);
}
.teaching-banner-card {
  grid-template-columns: 30px minmax(0, 1fr) 22px;
  gap: 7px;
  height: 92px;
  padding: 8px 8px 7px 10px;
  border-radius: 14px;
  align-items: start;
}
.teaching-banner-visual {
  width: 30px;
  height: 30px;
  margin-top: 0;
}
.teaching-banner .help-key {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 12px;
}
.teaching-banner-info-icon {
  width: 27px;
  height: 27px;
  font-size: 15px;
}
.teaching-banner-copy {
  min-width: 0;
  padding-top: 1px;
}
.teaching-banner-title {
  display: inline;
  margin: 0;
  font-size: 13px;
  line-height: 1.22;
}
.teaching-banner-title::after {
  content: ": ";
}
.teaching-banner-copy > p {
  display: inline;
  margin: 0;
  color: #566173;
  font-size: 11.5px;
  line-height: 1.22;
  font-weight: 650;
}
.teaching-banner-meta {
  position: static;
  display: block;
  margin-top: 5px;
  color: #798393;
  font-size: 10.5px;
  line-height: 1.1;
}
.teaching-banner-close {
  width: 22px;
  height: 22px;
  font-size: 21px;
  line-height: 1;
  align-self: start;
}
#teaching-banner-never { display: none !important; }

/* First-launch help: always start at the top and keep the action reachable. */
#intro-dialog:focus { outline: none; }
.intro-guide-dialog {
  overflow: hidden;
}
.intro-guide-shell {
  max-height: calc(100dvh - 34px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  padding-bottom: 0;
}
.intro-guide-shell .how-to-start {
  position: sticky;
  bottom: 0;
  z-index: 5;
  width: 100%;
  margin: 12px 0 0;
  box-shadow: 0 -12px 18px rgba(255,255,255,.96);
}

@media (max-width: 390px) {
  .teaching-banner-card {
    grid-template-columns: 28px minmax(0, 1fr) 20px;
    gap: 6px;
    height: 96px;
    padding: 7px 7px 6px 9px;
  }
  .teaching-banner-visual { width: 28px; height: 28px; }
  .teaching-banner .help-key { width: 26px; height: 26px; font-size: 11px; }
  .teaching-banner-info-icon { width: 25px; height: 25px; font-size: 14px; }
  .teaching-banner-title { font-size: 12.5px; }
  .teaching-banner-copy > p { font-size: 11px; line-height: 1.2; }
  .teaching-banner-meta { margin-top: 4px; font-size: 10px; }
}


/* CrossWordy V196: first-launch Start playing breathing room. */
.intro-guide-shell .how-to-start {
  bottom: 12px;
}


/* CrossWordy V197: slightly tighter, consistent first-launch guide cards. */
.intro-feedback-list .help-feedback {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


/* CrossWordy V198: final first-launch spacing pass. */
.intro-feedback-list .help-feedback {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.intro-guide-shell .how-to-start {
  margin-top: 10px !important;
}


/* CrossWordy V201: add breathing room above Start playing. */
.intro-guide-shell .how-to-start {
  margin-top: 12px !important;
}


/* CrossWordy V202: Start playing returns to normal flow. */
.intro-guide-shell .how-to-start {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  margin: 12px 0 12px !important;
  box-shadow: none !important;
}


/* CrossWordy V208
   Native-only: Account and Player Skill are long pages. Keep them visually
   aligned with the other menu dialogs instead of allowing them to fill almost
   the entire iPhone viewport. */
html.native-app #cw-account-dialog,
html.native-app #player-skill-dialog {
  height: auto !important;
  max-height: min(86dvh, 780px) !important;
  margin: auto !important;
}

html.native-app #cw-account-dialog .cw-account-shell,
html.native-app #player-skill-dialog .player-skill-shell {
  height: auto !important;
  min-height: 0 !important;
  max-height: min(86dvh, 780px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-top: 18px !important;
  padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
}


/* CrossWordy V209: native Accessibility page clean-up. */
html.native-app label[for="allow-pinch-zoom"] {
  display: none !important;
}





/* CrossWordy V214: iPhone 17e portrait balance, pass 2.
   The first tuning helped, but the 17e still has room to let the puzzle breathe.
   Increase the board a little further while keeping the fixed action tray safe. */
@media (max-width: 390px) and (max-height: 850px) and (orientation: portrait) {
  html.native-app .board-wrap {
    width: min(100%, clamp(334px, 92vw, 358px)) !important;
  }

  html.native-app .game-shell:has(.assist-row[hidden]) .board-wrap {
    width: min(100%, clamp(342px, 94vw, 366px)) !important;
  }

  html.native-app .keyboard {
    margin-top: 12px !important;
  }
}

/* =========================================================
   V229 - CONSISTENT DIALOG CLOSE BUTTONS
   Applies to Game Menu and all panel/help/settings dialogs.
   Keep the close control compact, consistently aligned and avoid the
   oversized double-ring appearance that touch focus can create on native.
   ========================================================= */

.panel-dialog .dialog-header > .close-button {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--blue-dark) !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* On native touch screens a tapped close button should not retain the
   large focus halo. Keyboard/web focus indication remains unchanged. */
html.native-app .panel-dialog .dialog-header > .close-button:focus,
html.native-app .panel-dialog .dialog-header > .close-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* =========================================================
   V230 - ACCESSIBILITY WHITE/DISCOVERED KEY DEPTH
   Keep discovered/locked white keys visually consistent with the
   keyboard depth used by neighbouring grey keys (e.g. V, M, R),
   without changing their semantic colour or solved-green styling.
   ========================================================= */

html.accessible-mode .keyboard .key.discovered,
html.accessible-mode .keyboard .key.locked,
html.accessible-mode .keyboard .key[aria-disabled="true"].discovered,
html.accessible-mode .keyboard .key[aria-disabled="true"].locked {
  border-bottom-width: 4px !important;
  border-bottom-style: solid !important;
  box-shadow: 0 3px 0 rgba(58, 66, 78, 0.38) !important;
  transform: none !important;
}


/* =========================================================
   V234 - NATIVE GAMEPLAY DOCUMENT SCROLL LOCK
   =========================================================
   Native gameplay must remain pinned to the top of the viewport.
   The app shell may be slightly taller than the visual viewport on some
   iPhones because of safe-area/layout padding; that must never allow the
   document itself to retain a vertical scroll offset.

   IMPORTANT:
   - Applies only to native gameplay.
   - Dialogs/help/account/settings continue to scroll inside their own panels.
   - Do not "fix" header position to compensate for document scroll.
   ========================================================= */
html.native-app,
html.native-app body {
  overscroll-behavior-y: none;
}

html.native-app body {
  overflow-y: hidden;
}

/* V243: UI control text-selection and Game Menu polish */
button,
button *,
[role="button"],
[role="button"] *,
input[type="button"],
input[type="submit"],
input[type="reset"],
.cw-no-select,
.cw-no-select * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

.cw-plain-game-menu-link {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.cw-plain-game-menu-link:focus,
.cw-plain-game-menu-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}



/* CrossWordy V247: native iOS status spacing. */
@supports (-webkit-touch-callout: none) {
  html.ios-app .status-assist-zone {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
}
\n\n/* CrossWordy V249: deterministic puzzle support REF + label-only pool bands. */\n.puzzle-support-ref {\n  display: inline-block;\n  margin-left: 1px;\n  color: #8b919b;\n  font-size: 10px;\n  font-weight: 800;\n  letter-spacing: .08em;\n  white-space: nowrap;\n  vertical-align: baseline;\n}\n@media (max-width: 390px) {\n  .puzzle-support-ref { font-size: 9px; letter-spacing: .065em; }\n}\n

/* CROSSWORDY_NATIVE_STATUS_THREE_LINE_V253
   Native iOS only: allow the gameplay status to grow naturally to three lines.
   Keep the extra 10px clearance above/below the status area. Short/compact
   phones (<=720px tall) retain their dedicated fit rules in compact-phone.css. */
@supports (-webkit-touch-callout: none) {
  @media (min-height: 721px) and (orientation: portrait) {
    html.native-app .status-assist-zone {
      height: auto !important;
      min-height: 64px !important;
      margin-top: 10px !important;
      margin-bottom: 10px !important;
      overflow: visible !important;
    }

    html.native-app .status-assist-zone .status {
      height: auto !important;
      min-height: 64px !important;
      margin: 0 !important;
      padding: 4px 8px !important;
      box-sizing: border-box !important;
      line-height: 1.35 !important;
      overflow: visible !important;
    }
  }
}

/* CROSSWORDY_NATIVE_MESSAGE_ZONE_V254
   Native iOS only: give the whole gameplay message/status area enough vertical
   room for a genuine three-line message. This supersedes the V253 64px status
   sizing on standard/tall phones. Web and compact-phone layouts are unchanged. */
@supports (-webkit-touch-callout: none) {
  @media (min-height: 721px) and (orientation: portrait) {
    html.native-app .status-assist-zone {
      height: auto !important;
      min-height: 84px !important;
      margin-top: 10px !important;
      margin-bottom: 10px !important;
      align-items: center !important;
      overflow: visible !important;
    }

    html.native-app .status-assist-zone .status {
      height: auto !important;
      min-height: 84px !important;
      margin: 0 !important;
      padding: 8px 10px !important;
      box-sizing: border-box !important;
      line-height: 1.35 !important;
      overflow: visible !important;
    }

    /* If the separate direction pill is visible, give it the same deliberate
       breathing room rather than letting it crowd the board or message zone. */
    html.native-app .selection-indicator:not([hidden]) {
      margin-top: 10px !important;
      margin-bottom: 10px !important;
    }
  }
}

/* CROSSWORDY_NATIVE_MESSAGE_ZONE_V255
   Native iOS only: tune back the V254 message zone. Keep enough room for a
   genuine three-line status while avoiding the large reserved gap seen in
   V254. Web and compact/short-phone layouts remain unchanged. */
@supports (-webkit-touch-callout: none) {
  @media (min-height: 721px) and (orientation: portrait) {
    html.native-app .status-assist-zone {
      height: auto !important;
      min-height: 60px !important;
      margin-top: 10px !important;
      margin-bottom: 10px !important;
      align-items: center !important;
      overflow: visible !important;
    }

    html.native-app .status-assist-zone .status {
      height: auto !important;
      min-height: 60px !important;
      margin: 0 !important;
      padding: 4px 8px !important;
      box-sizing: border-box !important;
      line-height: 1.3 !important;
      overflow: visible !important;
    }

    html.native-app .selection-indicator:not([hidden]) {
      margin-top: 6px !important;
      margin-bottom: 6px !important;
    }
  }
}

/* CROSSWORDY_RETIRED_JUMP_INLINE_STYLE_V261 */
.tester-jump-inline-message {
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid currentColor;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.35;
}


/* CrossWordy V285: ranked progression on the Puzzle Complete screen. */
#complete-dialog .result-rank-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: -2px 0 12px;
}
#complete-dialog .result-rank-summary[hidden] { display: none !important; }
#complete-dialog .result-rank-chip {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #f8fafc;
  text-align: center;
}
#complete-dialog .result-rank-chip span {
  display: block;
  min-height: 2.2em;
  color: #737b88;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .035em;
  text-transform: uppercase;
}
#complete-dialog .result-rank-chip strong {
  display: inline-block;
  margin-top: 3px;
  color: #242832;
  font-size: 19px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#complete-dialog .result-rank-chip small {
  display: inline-block;
  min-width: 30px;
  margin-left: 5px;
  color: #667085;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  vertical-align: 2px;
}
#complete-dialog .result-rank-chip small.positive { color: #24743d; }
#complete-dialog .result-rank-chip small.negative { color: #a43030; }
#complete-dialog .ranked-graduation {
  margin: 0 0 14px;
  padding: 13px 14px;
  border: 1px solid #cdddf7;
  border-left: 5px solid #2f7df6;
  border-radius: 14px;
  background: #f4f8ff;
  color: #344054;
}
#complete-dialog .ranked-graduation[hidden] { display: none !important; }
#complete-dialog .ranked-graduation .eyebrow { display: block; margin: 0 0 4px; color: #2f64b4; }
#complete-dialog .ranked-graduation > strong { display: block; color: #172033; font-size: 1rem; }
#complete-dialog .ranked-graduation p { margin: 5px 0 4px; font-size: .9rem; line-height: 1.4; }
#complete-dialog .ranked-graduation small { display: block; color: #667085; font-size: .78rem; line-height: 1.4; }
@media (max-width: 380px) {
  #complete-dialog .result-rank-summary { grid-template-columns: 1fr; }
  #complete-dialog .result-rank-chip span { min-height: 0; }
}


/* CrossWordy V288: simplify Puzzle Complete and move rank detail to Leaderboard. */
#complete-dialog .skill-card{height:94px!important;min-height:94px!important;grid-template-rows:30px 1fr!important}
#complete-dialog .skill-label{height:30px!important;min-height:30px!important;white-space:normal!important;line-height:1.05!important;align-items:center!important}
#complete-dialog .result-leaderboard-cta{margin:2px 0 4px;padding:12px 13px;border:1px solid #c8dcff;border-radius:14px;background:#f2f7ff;text-align:center}
#complete-dialog .result-leaderboard-cta p{margin:0 0 9px;color:#43536a;font-size:.88rem;line-height:1.35;font-weight:700}
#complete-dialog .result-leaderboard-button{width:100%;min-height:44px;border:0;border-radius:12px;background:#2f7df6;color:#fff;font:inherit;font-weight:900;cursor:pointer}
#complete-dialog .player-skill-result-link{display:flex;margin:8px auto 12px}

/* CrossWordy V295: illustrated Game Menu. */
#menu-dialog {
  width: min(calc(100% - 34px), 640px);
}
#menu-dialog .menu-list {
  margin-top: 22px;
}
#menu-dialog .menu-list .menu-item {
  display: grid;
  grid-template-columns: 48px minmax(155px, .92fr) minmax(0, 1.25fr) 18px;
  align-items: center;
  gap: 0 14px;
  min-height: 66px;
  padding: 8px 5px;
  transition: background-color .15s ease;
}
#menu-dialog .menu-list .menu-item:hover {
  background: #f8faff;
}
#menu-dialog .menu-item-icon {
  width: 46px;
  height: 46px;
  display: block;
  object-fit: contain;
}
#menu-dialog .menu-item-title {
  min-width: 0;
  color: #11141a;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.18;
}
#menu-dialog .menu-list .menu-item small {
  min-width: 0;
  overflow: hidden;
  color: #7a8290;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#menu-dialog .menu-item-chevron {
  justify-self: end;
  color: #8791a1;
  font-size: 31px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
}
#menu-dialog .menu-list .menu-item:focus-visible {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  outline: 3px solid rgba(38,117,245,.34);
  outline-offset: -2px;
}

@media (max-width: 520px) {
  #menu-dialog .menu-list .menu-item {
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    grid-template-rows: auto auto;
    gap: 2px 11px;
    min-height: 64px;
    padding: 7px 3px;
  }
  #menu-dialog .menu-item-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
  }
  #menu-dialog .menu-item-title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 15px;
  }
  #menu-dialog .menu-list .menu-item small {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 12px;
    text-align: left;
  }
  #menu-dialog .menu-item-chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 28px;
  }
}


/* CrossWordy V299: richer Puzzle Complete performance summary. */
#complete-dialog .skill-card {
  height: 118px !important;
  min-height: 118px !important;
  grid-template-rows: 27px minmax(36px, 1fr) auto !important;
  padding: 9px 7px 8px !important;
}
#complete-dialog .skill-label {
  height: 27px !important;
  min-height: 27px !important;
}
#complete-dialog .skill-value-line {
  padding: 0 !important;
}
#complete-dialog .skill-value-line > strong {
  font-size: 27px !important;
}
#complete-dialog .player-skill-line {
  gap: 5px !important;
}
#complete-dialog #player-skill-card .skill-delta,
html.native-app #complete-dialog #player-skill-card .skill-delta {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  padding: 3px 5px !important;
  font-size: 8px !important;
}
#complete-dialog .skill-card-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-top: 4px;
  color: #667085;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.16;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#complete-dialog .skill-card-meta b {
  color: #344054;
  font: inherit;
  font-weight: 900;
}
#complete-dialog .puzzle-skill-card {
  grid-template-rows: 27px 1fr !important;
}
#complete-dialog .puzzle-skill-card .skill-value-line {
  grid-row: 2;
  align-self: stretch !important;
}
@media (max-width: 420px) {
  #complete-dialog .skill-celebration {
    gap: 6px !important;
  }
  #complete-dialog .skill-card {
    height: 114px !important;
    min-height: 114px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  #complete-dialog .skill-label {
    font-size: 8px !important;
  }
  #complete-dialog .skill-value-line > strong {
    font-size: 24px !important;
  }
  #complete-dialog .skill-card-meta {
    font-size: 8px;
  }
}

/* CrossWordy V300: Puzzle Complete hierarchy + optional comment modal. */
#complete-dialog .skill-celebration {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 2px 0 10px !important;
}
#complete-dialog #player-skill-card,
#complete-dialog #winning-streak-card {
  height: 128px !important;
  min-height: 128px !important;
  padding: 10px 9px 9px !important;
  grid-template-rows: 25px minmax(42px, 1fr) auto !important;
}
#complete-dialog #player-skill-card .skill-label,
#complete-dialog #winning-streak-card .skill-label {
  height: 25px !important;
  min-height: 25px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
}
#complete-dialog #player-skill-card .skill-value-line > strong,
#complete-dialog #winning-streak-card .skill-value-line > strong {
  font-size: 34px !important;
}
#complete-dialog #player-skill-card .skill-delta,
html.native-app #complete-dialog #player-skill-card .skill-delta {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  padding: 4px 6px !important;
  font-size: 10px !important;
}
#complete-dialog .skill-card-meta {
  gap: 3px !important;
  padding-top: 2px !important;
  font-size: 12px !important;
  line-height: 1.18 !important;
}
#complete-dialog .puzzle-skill-card {
  grid-column: 1 / -1 !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 15px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  text-align: left !important;
}
#complete-dialog .puzzle-skill-card .skill-label {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-size: 10px !important;
}
#complete-dialog .puzzle-skill-card .skill-value-line {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  height: auto !important;
  align-self: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}
#complete-dialog .puzzle-skill-card .skill-value-line > strong {
  font-size: 27px !important;
}
#complete-dialog .puzzle-skill-card .skill-value-line > strong small {
  font-size: 12px !important;
}
#complete-dialog .puzzle-rating {
  margin-top: 12px;
  padding-top: 12px;
}
#complete-dialog .puzzle-rating-heading {
  margin-bottom: 7px;
}
#complete-dialog .puzzle-comment-link {
  display: inline-flex;
  margin: 9px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1476ff;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#complete-dialog .dialog-action {
  margin-top: 12px;
}

.puzzle-comment-dialog {
  width: min(calc(100% - 34px), 500px);
  padding: 24px;
}
.puzzle-comment-header { align-items: flex-start; }
.puzzle-comment-copy { margin: 12px 0; }
#puzzle-rating-comment {
  box-sizing: border-box;
  width: 100%;
  min-height: 118px;
  resize: vertical;
  padding: 12px 13px;
  border: 1.5px solid #d6dbe3;
  border-radius: 12px;
  background: #fff;
  color: #242832;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
}
#puzzle-rating-comment:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(46, 115, 210, .12);
}
.puzzle-comment-actions {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 10px;
  margin-top: 14px;
}
.puzzle-comment-cancel,
.puzzle-comment-save {
  min-height: 48px;
  border-radius: 14px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.puzzle-comment-cancel {
  border: 1.5px solid #d8dbe1;
  background: #fff;
  color: #4d5561;
}
.puzzle-comment-save {
  border: 0;
  background: linear-gradient(135deg, #3183ff, #1666e9);
  color: #fff;
}

@media (max-width: 420px) {
  #complete-dialog .result-progress { margin: 7px 0 12px; }
  #complete-dialog #player-skill-card,
  #complete-dialog #winning-streak-card {
    height: 124px !important;
    min-height: 124px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
  #complete-dialog #player-skill-card .skill-value-line > strong,
  #complete-dialog #winning-streak-card .skill-value-line > strong {
    font-size: 31px !important;
  }
  #complete-dialog .skill-card-meta {
    font-size: 11px !important;
  }
  #complete-dialog .puzzle-skill-card {
    height: 52px !important;
    min-height: 52px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #complete-dialog .puzzle-skill-card .skill-value-line > strong {
    font-size: 25px !important;
  }
  #complete-dialog .result-leaderboard-cta {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #complete-dialog .player-skill-result-link {
    margin-top: 6px;
    margin-bottom: 9px;
  }
  .puzzle-comment-dialog { padding: 20px; }
}