.worm-content {
  --worm-muted: #546480;
  --worm-ink: #0b2a59;
  --worm-board-bg: #f7faff;
  --worm-grid-border: #d7e1ee;
  --worm-cell-alternate: #edf4ff66;
  --worm-clue-bg: #fffdf5;
  --worm-clue-border: #c6d6ec;
  --worm-stat-text: #475569;
}
.worm-content { padding-bottom: 32px; }
.worm-heading { text-align: center; margin: 0 0 22px; }
.worm-title { display: block; width: min(430px,90%); height: auto; margin: 0 auto; }
.worm-heading p { margin: 4px 0 16px; color: var(--worm-muted); }
.worm-difficulty { display: inline-flex; }
.worm-board { position: relative; width: min(100%,456px); margin: 14px auto 0; border: 2px solid var(--worm-ink); border-radius: 12px; overflow: hidden; touch-action: none; user-select: none; background: var(--worm-board-bg); }
.worm-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
.worm-grid.cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)); }
.worm-cell { position: relative; min-width: 0; min-height: 0; aspect-ratio: 1; padding: 0; border: 0; border-right: 1px solid var(--worm-grid-border); border-bottom: 1px solid var(--worm-grid-border); border-radius: 0; background: transparent; color: var(--worm-ink); font-weight: 800; font-size: clamp(14px,4vw,22px); touch-action: none; }
.worm-cell:nth-child(even) { background: var(--worm-cell-alternate); }
.worm-cell:focus-visible { outline: 3px solid var(--difficulty-color); outline-offset: -4px; z-index: 2; }
.worm-cell .worm-clue { display: inline-grid; place-items: center; width: 52%; height: 52%; border-radius: 50%; background: var(--worm-clue-bg); border: 2px solid var(--worm-clue-border); }
.worm-cell.visited .worm-clue { visibility: hidden; }
#worm-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.worm-progress { text-align: center; font-variant-numeric: tabular-nums; margin: 12px 0; color: var(--worm-muted); }
.worm-card #status { min-height: 24px; text-align: center; margin: 8px 0 16px; }
.worm-card { --worm-panel-width: 456px; }
.worm-card:not(:fullscreen) { width: 100%; max-width: calc(var(--worm-panel-width) + 42px); margin-inline: auto; }
.worm-card .puzzle-header { padding-inline: 0; flex-wrap: wrap; }
.worm-card .worm-toolbar { grid-template-columns: repeat(3,minmax(0,1fr)); }
.worm-card .worm-toolbar, .worm-card .stats-option, .worm-card .statistics,
#game-shell.worm-card:fullscreen .worm-toolbar {
  width: min(100%,var(--worm-panel-width)); margin-inline: auto;
}
.worm-card .statistics .scoreboard > div { padding: 16px; }
.worm-card .statistics-levels, .worm-card .statistics-footer { padding: 16px; }
.worm-card .statistics .local-summary > div { background: var(--difficulty-color-light); }
.worm-card .statistics .local-summary dt { color: var(--difficulty-color-dark); }
.worm-card .worm-bonuses { padding: 16px; border-bottom: 1px solid var(--site-stat-border); }
.worm-card .worm-bonuses .local-summary > div { background: var(--site-stat-panel); }
.worm-card .worm-bonuses .local-summary dt { color: var(--worm-stat-text); }
.worm-bonuses small { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; }
.worm-bonuses details { margin-top: 14px; font-size: 13px; line-height: 1.6; }
.worm-bonuses summary { cursor: pointer; color: var(--worm-stat-text); }
.worm-card .worm-bonuses .local-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
.worm-example { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; }
.worm-example span { display: grid; place-items: center; width: 36px; height: 36px; background: #d7edff; border-radius: 50%; font-weight: 700; }
.next-game { padding: 14px 4px; }
.worm-card:fullscreen { padding: 16px; overflow-y: auto; }
.worm-card:fullscreen .worm-board { width: min(90vw,60vh,456px); }
@media(max-width:999px) { .worm-title { width: min(330px,85%); } .worm-heading { margin-bottom: 14px; } }
@media(max-width:360px) { .worm-card { padding-inline: 4px; } }

/* Keep the level selector centred and touch-friendly at every site breakpoint. */
.worm-heading .worm-difficulty { width: auto; height: auto; justify-self: center; display: inline-flex; padding: 0; background: transparent; }
.worm-heading .worm-difficulty button { min-width: 82px; min-height: 44px; padding: 8px 14px; font-size: 14px; }

/* The approved mockup uses separate soft tiles, a warm surface and glossy number balls. */
.worm-card { background: linear-gradient(145deg,#fffefb,var(--worm-clue-bg) 65%,#fcf7e8); border-color: #e8e2ce; box-shadow: 0 8px 28px #77683112; }
.worm-board { border: 0; border-radius: 0; overflow: visible; background: transparent; }
.worm-cell, .worm-cell:nth-child(even) { border: 0; background: transparent; overflow: visible; color: var(--worm-ink); }
.worm-cell::before { content: ""; position: absolute; inset: 2px; z-index: 0; border: 1px solid #bbccd1; border-radius: 8px; background: linear-gradient(135deg,#edf2f1,#f8f8f2); box-shadow: inset 0 0 0 2px #ffffffaa,0 1px 2px #263b6012; }
.worm-cell:disabled { opacity: 1; cursor: default; color: var(--worm-ink); }
.worm-cell:focus-visible { outline: 0; z-index: auto; }
.worm-cell:focus-visible::before { outline: 3px solid var(--difficulty-color); outline-offset: -3px; }
.worm-cell .worm-clue { position: relative; z-index: 1; width: 64%; height: 64%; border: 2px solid var(--difficulty-color-light); background: radial-gradient(circle at 30% 20%,#fff,var(--difficulty-color-light) 65%,var(--difficulty-color)); box-shadow: inset 1px 2px 2px #ffffffd9,0 2px 3px #35618f30; font-size: clamp(18px,4.5vw,27px); }
.worm-toolbar button:not(#fullscreen) { background: #fffef9; border: 1px solid #eee8d6; box-shadow: 0 3px 6px #7266400b; }
.worm-toolbar button:disabled { box-shadow: none; opacity: .5; }
.worm-tutorial { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.worm-tutorial figure { margin: 0; min-width: 0; padding: 8px; background: var(--worm-clue-bg); border: 1px solid #e8e2ce; border-radius: 12px; }
.worm-tutorial figcaption { text-align: center; font-weight: 700; margin-bottom: 8px; }
.worm-tutorial img { display: block; width: 100%; height: auto; }
.worm-card .pause-screen { border: 1px solid #e8e2ce; background: var(--worm-clue-bg); }

.worm-heading .worm-difficulty button {
  background: var(--difficulty-color-light); color: #102447;
  border: 1px solid var(--difficulty-color-light);
  box-shadow: inset 0 1px 1px #fff9, 0 2px 4px #10244712;
}
.worm-heading .worm-difficulty button[aria-pressed="true"] {
  background: var(--difficulty-color); color: white;
  text-shadow: 0 1px 2px #102447aa;
  box-shadow: inset 0 2px 1px #fff5, inset 0 -2px 2px #10244720, 0 3px 7px #10244722;
}
.worm-heading .worm-difficulty button:focus-visible { outline: 2px solid var(--difficulty-color-dark); outline-offset: 2px; }
.worm-cell.visited::before { border-color: var(--difficulty-color); background: linear-gradient(140deg,var(--difficulty-color-soft),var(--difficulty-color-light)); }
.worm-cell.start-cell .worm-clue { color: white; border-color: var(--difficulty-color-light); background: radial-gradient(circle at 30% 20%,var(--difficulty-color-light),var(--difficulty-color) 65%,var(--difficulty-color-dark)); text-shadow: 0 1px 2px #0b2a5977; }
.worm-progress { color: var(--difficulty-color-dark); }
.worm-card.solved { border-color: #e8e2ce; }
.worm-card.solved #status { color: #102447; font-weight: 700; background: transparent; }
.worm-cell.worm-complete::before { border-color: var(--completion-color); background: linear-gradient(140deg,#fff,var(--completion-light)); }
.worm-card { position: relative; }
.worm-complete .worm-number { transform-box: fill-box; transform-origin: center; animation: worm-pop 180ms ease-out; }
@keyframes worm-pop { 50% { transform: scale(1.1); } }
/* The worm itself celebrates: faster pulses, then local, round droplets. */
#worm-svg { transition: opacity 50ms linear; }
.worm-blink #worm-svg { opacity: .25; }
.worm-cell.worm-complete::before { transition: filter 50ms linear; }
.worm-blink .worm-cell.worm-complete::before { filter: saturate(.2) brightness(1.1); }
[data-worm-part].worm-bursting { transform-box: fill-box; transform-origin: center; animation: worm-burst 420ms ease-out forwards; }
.worm-cell.worm-bursting::before { animation: worm-tile-burst 420ms ease-out forwards; }
.worm-burst-droplet { transform-box: view-box; animation: worm-droplet 420ms ease-out forwards; }
@keyframes worm-burst {
  0% { transform: scale(1); opacity: 1; }
  25% { transform: scale(1.18); opacity: 1; }
  65%,100% { transform: scale(.15); opacity: 0; }
}
@keyframes worm-tile-burst { 25% { filter: brightness(1.2); } 100% { filter: saturate(.25); } }
@keyframes worm-droplet {
  from { opacity: 0; transform: translate(0,0); }
  25% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--burst-x),var(--burst-y)); }
}
@media (prefers-reduced-motion: reduce) {
  .worm-complete .worm-number, [data-worm-part].worm-bursting, .worm-cell.worm-bursting::before { animation: none; }
  #worm-svg { transition: none; }
  .worm-blink #worm-svg { opacity: 1; }
  .worm-blink .worm-cell.worm-complete::before { filter: none; }
  .worm-burst-droplet { display: none; }
}

/* Keep both help actions directly beside the timer, including on mobile. */
.worm-card .worm-puzzle-tools { flex-direction: row; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
.worm-puzzle-tools .help-controls { gap: 8px; padding-left: 10px; }
.worm-puzzle-tools .help-controls button { min-width: 36px; min-height: 44px; }
.worm-puzzle-tools .help-controls #show-solution { justify-content: center; gap: 5px; }
.worm-puzzle-tools .help-controls #puzzle-help { padding-left: 8px; }
.worm-puzzle-tools .help-controls #sound-toggle { min-width: 44px; min-height: 44px; padding: 7px; border: 0; border-radius: 10px; color: #315e36; }
.worm-puzzle-tools #sound-toggle[aria-pressed="true"] { background: #e8f1df; }
.worm-puzzle-tools #sound-toggle:hover:not(:disabled) { background: #dcebcf; }
.worm-puzzle-tools #sound-toggle:disabled { opacity: .5; }
@media(max-width:600px) {
  .worm-card .puzzle-header { flex-wrap: wrap; }
  .worm-card .worm-puzzle-tools { margin-left: auto; }
}
@media(max-width:420px) {
  .worm-card .worm-puzzle-tools { width: 100%; justify-content: flex-end; gap: 6px; }
  .worm-puzzle-tools .help-controls { gap: 4px; padding-left: 4px; }
}

@media (max-width:999px) { .worm-content { padding-top: 22px; } }

/* Same compact statistics disclosure as SUMTILO, sized for the worm board. */
.worm-card .statistics { position: relative; margin-top: 18px; border: 0; border-top: 1px solid #dce3e8; border-radius: 0; overflow: visible; background: transparent; }
.worm-card .statistics .scoreboard { padding: 14px 0 10px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.worm-card .statistics .scoreboard > div { display: block; padding: 0 8px; border-top: 0; }
.worm-card .statistics .scoreboard dt { font-size: 12px; color: #506583; }
.worm-card .statistics .scoreboard dd { margin: 4px 0 0; font-size: 23px; text-align: left; color: #112c4c; }
.worm-card .statistics #total-points.not-saved { font-size: 13px; }
.worm-statistics-details > summary { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 44px; padding: 6px 8px; list-style: none; color: #263f60; border-radius: 9px; cursor: pointer; }
.worm-statistics-details > summary::-webkit-details-marker { display: none; }
.worm-statistics-details > summary:hover { background: #e9eff5; }
.worm-statistics-details > summary:focus-visible { outline: 2px solid #125ac4; outline-offset: 2px; }
.worm-statistics-details > summary .icon { width: 18px; height: 18px; }
.worm-statistics-details > summary .icon-chevron { width: 14px; height: 14px; }
.worm-statistics-details[open] > summary .icon-chevron { transform: rotate(90deg); }
.worm-statistics-content { margin-top: 12px; border: 1px solid #dce5ed; border-radius: 14px; overflow: hidden; background: #ffffffa6; }
.worm-card .statistics .worm-bonuses .local-summary > div { background: #edf3f8; }
.worm-card .statistics .worm-bonuses .local-summary dd { font-size: 22px; }
.worm-card .statistics #stage-bonus-progress { font-size: 16px; }
.worm-card .statistics .stats-option { margin: 0; padding: 12px 20px; }
.worm-card .statistics .storage-language-note { margin: 0; padding: 0 20px 16px; }
.worm-card .statistics .statistics-footer { padding: 12px 20px; }
@media(max-width:599px) {
  .worm-card .statistics .scoreboard dt { font-size: 11px; }
  .worm-card .statistics .scoreboard dd { font-size: 21px; }
  .worm-card .statistics #total-points.not-saved { font-size: 12px; }
  .worm-card .statistics .worm-bonuses { padding: 10px; }
  .worm-card .statistics .worm-bonuses .local-summary { grid-template-columns: 1fr; }
  .worm-card .statistics .stats-option { padding: 12px; font-size: 12px; }
  .worm-card .statistics .stats-option input { flex: 0 0 18px; }
  .worm-card .statistics .storage-language-note { padding-inline: 12px; }
}

/* The existing burst finishes before this opaque, leafy reward card arrives. */
.worm-card .game-reward {
  width: min(calc(100% - 28px),350px);
  padding: 44px 22px 18px;
  border: 3px solid #679539;
  border-radius: 22px;
  background: linear-gradient(145deg,#fffef6,#f7f3df);
  color: #25452b;
  box-shadow: inset 0 0 0 2px #e7edc8,inset 0 -3px 2px #78933a1a,0 3px 0 #3f682d,0 12px 28px #1c3e314a;
  animation: worm-reward-arrive 260ms ease-out both;
}
.worm-reward-mascot { position: absolute; z-index: 1; top: -74px; left: 50%; width: 144px; height: 115px; transform: translateX(-50%); }
.worm-reward-mascot img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 2px #31582c30); }
.worm-reward-mascot::before, .worm-reward-mascot::after { content: ""; position: absolute; top: 79px; width: 32px; height: 17px; border: 1px solid #658b32; border-radius: 2px 90% 2px 90%; background: linear-gradient(140deg,#c4df7e,#78ad3d); box-shadow: inset 0 1px 1px #effac6; }
.worm-reward-mascot::before { left: 9px; transform: rotate(12deg); }
.worm-reward-mascot::after { right: 9px; transform: scaleX(-1) rotate(12deg); }
.worm-card .game-reward strong { margin-bottom: 14px; color: #28572c; font-size: clamp(24px,4vw,32px); line-height: 1.15; text-transform: none; text-shadow: none; }
.worm-card .game-reward dl { font-size: 16px; line-height: 1.4; }
.worm-card .game-reward dl > div { margin-top: 0; padding: 9px 0; border-top: 1px solid #dce1c7; }
.worm-card .game-reward dd { flex: 0 0 auto; }
.worm-card .game-reward .reward-total { align-items: center; gap: 6px; margin-top: 10px; padding: 10px 12px; border: 1px solid #aac276; border-radius: 12px; background: linear-gradient(135deg,#e8f2ca,#cce49d); box-shadow: inset 0 1px 1px #f7ffe9; color: #254e28; font-size: 18px; }
@keyframes worm-reward-arrive {
  from { opacity: 0; transform: translate(-50%,calc(-50% + 10px)) scale(.98); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@media(max-width:599px) {
  .worm-card .game-reward { padding: 34px 12px 12px; border-width: 2px; border-radius: 18px; }
  .worm-reward-mascot { top: -57px; width: 110px; height: 88px; }
  .worm-reward-mascot::before, .worm-reward-mascot::after { top: 60px; width: 26px; height: 14px; }
  .worm-reward-mascot::before { left: 3px; }
  .worm-reward-mascot::after { right: 3px; }
  .worm-card .game-reward strong { margin-bottom: 10px; font-size: 24px; }
  .worm-card .game-reward dl { font-size: clamp(12px,3.4vw,15px); }
  .worm-card .game-reward dl > div { padding-block: 7px; }
  .worm-card .game-reward .reward-total { margin-top: 8px; padding: 8px; font-size: 15px; }
}
@media(prefers-reduced-motion:reduce) {
  .worm-card .game-reward { animation: none; }
}