: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); }
.icon-btn.stats-btn { font-size: 1rem; }
.icon-btn.world-btn {
  right: auto;
  left: 16px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.stats-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 10px;
}
.stats-tab {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #9a9a9c;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 14px;
  cursor: pointer;
}
.stats-tab.active { color: var(--fg); border-color: var(--accent); }

.world-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.world-link:hover { text-decoration: underline; }
.world-link[hidden] { display: none; }

.stats-versus {
  margin: 0 0 14px;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
}
.stats-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 6px;
  margin-bottom: 16px;
}
.stat-num { font-size: 1.5rem; font-weight: 700; }
.stat-label { font-size: 0.7rem; color: #9a9a9c; line-height: 1.2; }
.stats-modal h3 { margin: 0 0 8px; font-size: 0.9rem; text-align: left; }
.stats-dist { margin-bottom: 18px; }
.dist-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 0.8rem; }
.dist-row .dist-n { width: 10px; text-align: right; }
.dist-bar {
  background: #3a3a3c;
  color: #fff;
  min-width: 18px;
  padding: 1px 6px;
  text-align: right;
  font-weight: 700;
  border-radius: 2px;
}
.dist-bar.empty { min-width: 0; width: 4px; padding: 1px 0; background: #2a2a2b; }
.dist-bar.last { background: var(--correct); color: #10310a; }

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

.mode-btn {
  display: block;
  margin: 2px auto 0;
  padding: 3px 12px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: default;
}
.mode-btn:not(:disabled) { cursor: pointer; }
.mode-btn:not(:disabled):hover { border-color: var(--border-active); }

.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 {
  --letter-scale: 1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(clamp(1.2rem, 5.6vw, 2.2rem) * 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;
}

.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: 5 / 6;
  border-radius: 14px;
  overflow: hidden;
}

.ground {
  display: none;
}

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

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

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

.key-spacer { flex: 0.5; }

.key {
  flex: 1;
  min-width: 0;
  padding: 0;
  height: clamp(46px, 7.2vh, 58px);
  background: #818384;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.key.wide { flex: 1.5; font-size: 0.75rem; }
.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-trophy {
  position: absolute;
  right: 22px;
  top: 52px;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
  transform-origin: 50% 100%;
  animation: trophy-pop 0.6s cubic-bezier(.34,1.56,.64,1) 0.25s both;
}
.stats-modal .modal-trophy { top: 16px; right: 20px; width: 48px; height: 48px; }
.modal-trophy.hidden { display: none; }

@keyframes trophy-pop {
  0% { transform: scale(0) rotate(-20deg); }
  100% { transform: scale(1) rotate(8deg); }
}

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

/* War of the Words — first playable visual pass.  These are deliberately CSS-built
   placeholders: the shield blocks and letter HP can be tuned before final art lands. */
:root {
  --bg: #031426;
  --fg: #f6fbff;
  --border: #31587b;
  --border-active: #38d9ff;
  --correct: #72d84b;
  --present: #f6cf20;
  --absent: #303b4d;
  --accent: #39d9ff;
  --font: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

body {
  background: radial-gradient(ellipse at 50% 10%, #0b3152 0, #031426 43%, #010a15 100%);
  min-height: 100svh;
  padding-bottom: 14px;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: url("assets/background.webp") center / cover no-repeat; image-rendering: pixelated; }
.topbar { max-width: 600px; border: 0; padding: 20px 16px 0; z-index: 1; }
.logo { color: #a6f75a; height: auto; margin: 0; font: 900 clamp(1.55rem, 7vw, 2.7rem)/.75 var(--font); letter-spacing: -2px; text-shadow: 3px 3px 0 #063219, 0 0 18px rgba(125, 255, 86, .24); }
.logo span { display: inline-block; color: #39d9ff; font-size: .43em; line-height: .86; letter-spacing: 0; text-align: center; vertical-align: .22em; text-shadow: 2px 2px 0 #05263d; }
.icon-btn { width: 44px; height: 44px; border: 2px solid var(--accent); border-radius: 10px; color: var(--fg); background: rgba(2, 20, 38, .72); box-shadow: 0 0 12px rgba(57, 217, 255, .18); font: 900 1.7rem var(--font); }
.icon-btn.stats-btn { font-size: 1.45rem; }
.tagline { color: #75dff9; font-size: .76rem; font-weight: 700; letter-spacing: .04em; margin: 9px 0 3px; z-index: 1; }
.mode-btn { color: #a6f75a; border-color: #407e4d; background: rgba(3, 20, 38, .65); z-index: 1; }

.battlefield { position: relative; isolation: isolate; width: min(530px, 94vw); height: clamp(155px, 25vh, 225px); margin: 10px auto 0; border-bottom: 3px solid #176a9a; overflow: hidden; z-index: 1; }
.ufo { position: absolute; left: -130px; top: 8px; width: 70px; height: 28px; background: center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 8px #149cce); opacity: 0; }
.ufo i { position: absolute; left: 28px; top: 28px; width: 4px; height: 90px; background: linear-gradient(#a6f75a, transparent); opacity: .5; }
@keyframes mothership-run { from { left: -130px; opacity: 1; } to { left: calc(100% + 30px); opacity: 1; } }
.ufo.passing { animation: mothership-run 7s linear both; }
.fleet { position: absolute; left: 8px; top: 34px; width: 0; height: 0; transition: transform .12s steps(2, end); }
.frame-b .alien { background-image: var(--fb); }
.alien { position: absolute; width: 36px; height: 27px; background: var(--fa) center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 4px currentColor); }
.shield-line { position: absolute; bottom: 7px; left: 7%; right: 7%; display: flex; justify-content: space-between; }
.shield { width: 62px; height: 32px; background: center / 100% 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 5px rgba(57,217,255,.5)); }

main { flex: none; padding: 16px 0 9px; z-index: 1; }
.board-stage { width: min(390px, 89vw); aspect-ratio: 5 / 6; background: rgba(1, 13, 27, .72); border: 0; border-radius: 0; overflow: visible; }
.board { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, 1fr); gap: 7px; inset: auto; height: 100%; pointer-events: none; }
.row { display: contents; }
.tile { position: relative; inset: auto; width: auto !important; height: auto !important; left: auto !important; top: auto !important; transform: none; font-size: clamp(1.4rem, 7vw, 2.3rem); border: 3px solid #31587b; background: rgba(6, 26, 46, .88); text-shadow: 0 0 12px rgba(255,255,255,.3); }
/* Graded tiles use the pixel-art tile sprites; the frame follows the tile's remaining hp (3 = intact). */
.tile.correct, .tile.present, .tile.absent { background: transparent; border-color: transparent; isolation: isolate; }
.tile.correct::before, .tile.present::before, .tile.absent::before { content: ""; position: absolute; z-index: -1; left: -7.3%; top: -7.3%; width: 128.1%; height: 117.2%; background: var(--tile-art) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.tile.absent { --tile-kind: absent; }
.tile.present { --tile-kind: present; }
.tile.correct { --tile-kind: correct; }
.tile.absent[data-hp="3"] { --tile-art: url("assets/tiles/absent-0.webp"); }
.tile.absent[data-hp="2"] { --tile-art: url("assets/tiles/absent-1.webp"); }
.tile.absent[data-hp="1"] { --tile-art: url("assets/tiles/absent-2.webp"); }
.tile.present[data-hp="3"] { --tile-art: url("assets/tiles/present-0.webp"); }
.tile.present[data-hp="2"] { --tile-art: url("assets/tiles/present-1.webp"); }
.tile.present[data-hp="1"] { --tile-art: url("assets/tiles/present-2.webp"); }
.tile.correct[data-hp="3"] { --tile-art: url("assets/tiles/correct-0.webp"); }
.tile.correct[data-hp="2"] { --tile-art: url("assets/tiles/correct-1.webp"); }
.tile.correct[data-hp="1"] { --tile-art: url("assets/tiles/correct-2.webp"); }
/* A destroyed (eaten) tile leaves its broken remnant behind. */
.tile.eaten::before { display: block; background-size: 100% 100%; background-repeat: no-repeat; }
.tile.eaten.absent::before { background-image: url("assets/tiles/absent-3.webp"); }
.tile.eaten.present::before { background-image: url("assets/tiles/present-3.webp"); }
.tile.eaten.correct::before { background-image: url("assets/tiles/correct-3.webp"); }
body.jammed .tile.eaten.present::before, body.jammed .tile.eaten.correct::before { background-image: url("assets/tiles/absent-3.webp"); }
.tile.eaten.shatter::before { animation: tile-crumble .35s ease-out; }
@keyframes tile-crumble { from { opacity: .3; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
.tile.hit, .shield.hit { animation: impact .42s ease; }
@keyframes impact { 45% { filter: brightness(2.6); transform: scale(.9); } }
.tile.pop { animation: word-pop .12s ease-in-out; }
.tile.flip { animation: word-flip .5s ease forwards; }
@keyframes word-pop { 50% { transform: scale(1.08); } }
@keyframes word-flip { 50% { transform: scaleY(0); } }
.grid-toast { top: 50%; }
.keyboard { max-width: 540px; z-index: 1; }
.key { background: #314158; border-radius: 5px; box-shadow: inset 0 -3px rgba(0,0,0,.22); }
.key.correct { background: #4ea93d; }.key.present { background: #d7af19; }.key.absent { background: #252f3e; }
.message, .site-footer { z-index: 1; color: #75dff9; }
.site-footer { margin-top: 8px; font-size: .66rem; }
.modal { background: #071b30; border-color: #31587b; }.share-grid { background: #031426; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; }.primary-btn { background: #72d84b; }
.alien-shot { position: fixed; z-index: 30; width: 3px; height: 12px; margin-left: -1px; pointer-events: none; background: #a6f75a; box-shadow: 0 0 8px #a6f75a; image-rendering: pixelated; animation: bolt 1s linear both; }
@keyframes bolt { from { transform: translateY(0); } to { transform: translateY(var(--dist)); } }
@media (max-height: 760px) { .battlefield { height: 135px; }.board-stage { width: min(330px, 84vw); }.key { height: 43px; } }

.logo img { display: block; width: min(340px, calc(100vw - 140px)); height: auto; image-rendering: pixelated; }

/* While the mothership is on screen it jams the clues: green and yellow tiles and keys read as grey. */
body.jammed .tile.correct[data-hp="3"], body.jammed .tile.present[data-hp="3"] { --tile-art: url("assets/tiles/absent-0.webp"); }
body.jammed .tile.correct[data-hp="2"], body.jammed .tile.present[data-hp="2"] { --tile-art: url("assets/tiles/absent-1.webp"); }
body.jammed .tile.correct[data-hp="1"], body.jammed .tile.present[data-hp="1"] { --tile-art: url("assets/tiles/absent-2.webp"); }
body.jammed .key.correct, body.jammed .key.present { background: #252f3e; }
.site-footer a { color: #9ad9ee; }
.icon-btn.world-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1.4rem; }

/* Short phone screens: squeeze the chrome so the board and keyboard both fit without scrolling.
   The board is sized from the height left over once everything else has taken its share. */
@media (max-height: 1100px) {
  .tagline { display: none; }
  .topbar { padding-top: 10px; }
  .battlefield { height: 150px; margin-top: 6px; }
  .shield-line { bottom: 3px; }
  .shield { height: 28px; }
  main { padding: 10px 0 6px; }
  :root { --board-w: min(340px, 80vw, max(220px, calc((100svh - 455px) * 5 / 6))); }
  .board { gap: 5px; }
  .keyboard { gap: 6px; }
  .key { height: 44px; }
  .message { min-height: 0; margin: 2px 0 0; }
  .site-footer { padding-top: 10px; }
}

/* The battlefield is exactly as wide as the board so the shields line up over the tiles. */
:root { --board-w: min(340px, 80vw); }
@media (max-height: 1100px) { :root { --board-w: min(340px, 80vw, max(220px, calc((100svh - 455px) * 5 / 6))); } }
.board-stage { width: var(--board-w); }
.battlefield { width: min(94vw, max(var(--board-w), 290px)); }
.shield-line { left: 4%; right: 4%; }

/* Wider sky for the invaders; the shields stay lined up over the board, and the tile columns get a little more breathing room. */
.battlefield { width: min(94vw, 530px); }
.shield-line { left: 50%; right: auto; width: var(--board-w); transform: translateX(-50%); padding: 0 2%; box-sizing: border-box; }
.board { column-gap: 10px; }

/* Phones turned sideways: there's no room for the battlefield, board and keyboard at once, so ask for portrait. */
.rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .rotate-hint { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(3, 20, 38, .97); color: #b9edff; font-size: 1rem; font-weight: 700; text-align: center; padding: 20px; }
  .rotate-hint .icon { font-size: 2.6rem; display: inline-block; animation: rotate-nudge 2s ease-in-out infinite; }
  .rotate-hint p { margin: 0; }
}
@keyframes rotate-nudge { 0%, 30% { transform: rotate(-90deg); } 70%, 100% { transform: rotate(0deg); } }