:root {
  --bg: #121213;
  --fg: #f5f5f5;
  --border: #3a3a3c;
  --border-active: #6a6a6c;
  --correct: #4be05f;
  --present: #ffcc33;
  --absent: #3a3a3c;
  --eaten-bg: #1e1e1f;
  --accent: #7ac142;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 24px;
  user-select: none;
}

.topbar {
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px 4px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.logo {
  margin: 0;
  height: 44px;
  width: auto;
  display: block;
}

.icon-btn {
  position: absolute;
  right: 16px;
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 6px;
  width: 34px;
  height: 34px;
  font-size: 1.1rem;
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--border-active); }

.tagline {
  color: #9a9a9c;
  font-size: 0.85rem;
  margin: 8px 0 4px;
  text-align: center;
  padding: 0 16px;
}

.worm-name {
  display: block;
  text-align: center;
  margin: 10px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.worm-name:hover { text-decoration: underline; }

.site-footer {
  color: #6a6a6c;
  font-size: 0.78rem;
  text-align: center;
  padding: 18px 16px 10px;
}
.site-footer a {
  color: #9a9a9c;
  text-decoration: underline;
}
.site-footer a:hover { color: var(--fg); }

main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}

.board {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.tile-outlines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
  overflow: visible;
}

.tile-outline {
  fill: none;
  stroke: transparent;
  stroke-width: 0.7;
  stroke-linejoin: round;
  transition: stroke 0.2s, filter 0.2s;
  vector-effect: non-scaling-stroke;
}

.tile-outline.correct {
  stroke: var(--correct);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 3px rgba(75, 224, 95, 0.85));
}
.tile-outline.present {
  stroke: var(--present);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 3px rgba(255, 204, 51, 0.85));
}

.tile {
  --letter-scale: 1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(clamp(0.85rem, 4vw, 1.6rem) * var(--letter-scale));
  font-weight: 700;
  text-transform: uppercase;
  color: #f5f1e6;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
  transition: transform 0.15s;
}

.tile.pop { animation: pop 0.12s ease-in-out; }

@keyframes pop {
  0% { transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -50%) scale(1.08); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.tile.flip {
  animation: flip 0.5s ease forwards;
}

@keyframes flip {
  0% { transform: translate(-50%, -50%) rotateX(0deg); }
  50% { transform: translate(-50%, -50%) rotateX(90deg); }
  100% { transform: translate(-50%, -50%) rotateX(0deg); }
}

.tile.eaten {
  color: transparent;
}

.broken-tiles {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.broken-tile-piece {
  position: absolute;
  inset: 0;
  background-image: url("assets/broken-tiles.png");
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.broken-tile-piece.visible {
  opacity: 1;
}

.tile.chomp {
  animation: chomp 0.35s ease;
}

@keyframes chomp {
  0% { transform: translate(-50%, -50%) scale(1); }
  30% { transform: translate(-50%, -50%) scale(0.75) rotate(-4deg); }
  60% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.tile.shake {
  animation: tile-shake 0.4s ease;
}

@keyframes tile-shake {
  0%, 100% { transform: translate(-50%, -50%) translateX(0); }
  20% { transform: translate(-50%, -50%) translateX(-6px); }
  40% { transform: translate(-50%, -50%) translateX(6px); }
  60% { transform: translate(-50%, -50%) translateX(-4px); }
  80% { transform: translate(-50%, -50%) translateX(4px); }
}

.board-stage {
  position: relative;
  flex: none;
  width: min(500px, 94vw);
  aspect-ratio: 1289 / 1220;
  background-image: url("assets/tilted-grid.png");
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  overflow: hidden;
}

.ground {
  display: none;
}

.worm-hole {
  --hole-scale: 1;
  position: absolute;
  width: 10%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18,12,7,0.88) 0%, rgba(18,12,7,0.55) 45%, rgba(18,12,7,0) 75%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
  pointer-events: none;
  z-index: 5;
}

.worm-hole.showing {
  transform: translate(-50%, -50%) scale(var(--hole-scale));
}

.worm-anchor {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 7;
  transition: left 1.4s cubic-bezier(.45,.05,.55,.95), top 1.4s cubic-bezier(.45,.05,.55,.95), transform 1.4s cubic-bezier(.45,.05,.55,.95);
}

.worm-pop {
  transform: translateY(14px) scale(0);
  transition: transform 0.42s cubic-bezier(.34,1.56,.64,1);
}

.worm-anchor.showing .worm-pop {
  transform: translateY(0) scale(1);
}

.worm-wiggle {
  position: relative;
}

.worm-eating {
  display: none;
  position: absolute;
  left: -54px;
  top: -70px;
  width: 90px;
  height: 140px;
  background: url("assets/worm-frames.png") no-repeat;
  background-size: 630px 420px;
  background-position: -8.57px -145.76px;
  /* Each chew frame has a band of loose debris floating above the worm's
     head — cropped off here so it doesn't read as a hat. */
  clip-path: inset(19% 0 0 0);
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.45));
}

.worm-anchor.showing.chomp .worm-eating {
  display: block;
  animation:
    eating-pop 0.5s cubic-bezier(.22,1.45,.48,1) both,
    worm-chew-frames 1.8s steps(1) both;
}

.worm-anchor.showing.retreating .worm-eating {
  display: block;
  animation: worm-retreat-frames 1.4s steps(1) both;
}

@keyframes eating-pop {
  0% { transform: scale(0.55); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Each of the 7 chew frames is hand-corrected here so the worm's body stays
   anchored in place — the source frames drift, which otherwise reads as the
   worm sliding backwards (and the frame "widening") as it cycles. */
@keyframes worm-chew-frames {
  0%,    16.65%  { background-position: -11.57px -148.9px; }
  16.66%, 33.32%  { background-position: -98.08px -148.29px; }
  33.33%, 49.99%  { background-position: -181.53px -146.23px; }
  50%,    66.65%  { background-position: -267.33px -145.9px; }
  66.66%, 83.32%  { background-position: -353.87px -144.34px; }
  83.33%, 99.99%  { background-position: -438.12px -143.23px; }
  100%            { background-position: -528.5px -145.1px; }
}

/* Bottom row of the sheet: the worm sinking back down into its hole. */
@keyframes worm-retreat-frames {
  0%,    16.65%  { background-position: -14px -256.57px; }
  16.66%, 33.32%  { background-position: -103.53px -260.57px; }
  33.33%, 49.99%  { background-position: -196.03px -261.57px; }
  50%,    66.65%  { background-position: -283.47px -264.57px; }
  66.66%, 83.32%  { background-position: -370.82px -268.57px; }
  83.33%, 99.99%  { background-position: -456.79px -267.57px; }
  100%            { background-position: -542.62px -271.57px; }
}

/* Top row of the sheet (worm first emerging from the hole) — measured but
   not yet wired into an animation:
   [-4,-20], [-89,-21], [-177,-21], [-265,-23], [-355,-19], [-441,-20], [-531,-16] */

.keyboard {
  width: 100%;
  max-width: 500px;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.key-row {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.key {
  flex: 1;
  max-width: 42px;
  height: 48px;
  background: #818384;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.key.wide { max-width: 66px; font-size: 0.65rem; }
.key.correct { background: var(--correct); }
.key.present { background: var(--present); }
.key.absent { background: #3a3a3c; color: #8a8a8c; }

.message {
  min-height: 22px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  margin: 6px 0 0;
}

.grid-toast {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 12;
  margin: 0;
  background: rgba(0,0,0,0.88);
  border: 1px solid var(--border-active);
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.grid-toast.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.modal-backdrop.hidden { display: none; }

.modal {
  position: relative;
  background: #1e1e1f;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
  max-width: 340px;
  width: 90%;
  text-align: center;
  overflow: hidden;
}

.modal-worm {
  display: block;
  height: 110px;
  width: auto;
  margin: -4px auto 6px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

.modal h2 { margin: 0 0 6px; font-size: 1.4rem; }
.modal p#modal-subtitle { color: #b5b5b7; margin: 0 0 14px; font-size: 0.9rem; }

.share-grid {
  background: #101011;
  border-radius: 6px;
  padding: 12px;
  font-size: 1.1rem;
  line-height: 1.3;
  white-space: pre;
  margin: 0 0 16px;
}

.modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.share-toast {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 6px);
  background: rgba(0,0,0,0.9);
  border: 1px solid var(--border-active);
  color: var(--fg);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.share-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.primary-btn, .secondary-btn {
  padding: 10px 16px;
  border-radius: 6px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
}

.primary-btn { background: var(--accent); color: #10310a; }
.secondary-btn { background: transparent; color: var(--fg); border: 1px solid var(--border-active); }

@media (max-width: 400px) {
  .tile { width: 48px; height: 48px; font-size: 1.5rem; }
  .worm { width: 48px; height: 48px; font-size: 1.5rem; }
}