:root {
  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5f1e8;
  background: #101827;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: clamp(12px, 3vw, 32px);
  min-height: 100vh;
  background: radial-gradient(ellipse at top left, #223549 0, #101827 65%);
}
button { font: inherit; }
[hidden] { display: none !important; }

.layout {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}
.intro, .game-shell { min-width: 0; }
.eyebrow {
  margin: 0 0 8px;
  color: #aadfcd;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
h1 {
  margin: 0;
  font-size: clamp(2.4rem, 9vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.065em;
}
h1 span { color: #ffd280; }
.tagline { margin: 12px 0 6px; font-size: 1.1rem; font-weight: 650; }
.description { max-width: 34ch; margin: 0; color: #c1ccdc; line-height: 1.55; }
.legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  color: #c1ccdc;
  font-size: 0.8rem;
}
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch--moving { background: #ffd280; }
.swatch--stack { margin-left: 10px; background: #6cdbb7; }

.game-shell {
  padding: clamp(12px, 3vw, 22px);
  background: #192437;
  border: 1px solid #40516b;
  border-radius: 20px;
  box-shadow: 0 20px 60px #00000035;
}
.scorebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.score, .width-stat { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.score span, .width-stat span { color: #c1ccdc; font-size: 0.75rem; }
.score strong { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.width-stat { text-align: right; }
.width-stat strong { color: #ffd280; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.playfield {
  position: relative;
  height: clamp(220px, 44vh, 420px);
  height: clamp(220px, 44svh, 420px);
  border: 1px solid #50617a;
  border-radius: 12px;
  background: linear-gradient(#101827, #142536);
  touch-action: manipulation;
  user-select: none;
  cursor: pointer;
}
.blocks {
  position: absolute;
  inset: 12px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  background: linear-gradient(to right, #ffffff12 1px, transparent 1px) 0 0 / calc(100% / 7) 100%;
  border-right: 1px solid #ffffff12;
  pointer-events: none;
}
.block {
  min-width: 0;
  margin: 2px 1px;
  border: 1px solid #b2f3dc;
  border-radius: 4px;
  background: #6cdbb7;
  box-shadow: inset 0 -3px 0 #00000020;
}
.block--foundation { background: #8195b3; border-color: #becce0; }
.block--moving {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #172033;
  background: #ffd280;
  border: 2px solid #fff0cc;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 16px #ffd28030, inset 0 -3px 0 #00000020;
}
.block--missed { background: #ff9d9d; border-color: #ffe0e0; }
.playfield[data-state="gameover"] { border-color: #ff9d9d; cursor: default; }
.game-over {
  position: absolute;
  top: 16px;
  left: 12px;
  right: 12px;
  padding: 14px 8px;
  border: 1px solid #ffbaba;
  border-radius: 8px;
  background: #2b2030f5;
  text-align: center;
  pointer-events: none;
}
.game-over h2 { margin: 0 0 4px; color: #ffbaba; font-size: 1.5rem; }
.game-over p { margin: 3px 0; font-size: 0.9rem; }
.game-status { min-height: 3em; margin: 12px 0; color: #e2e9f3; font-size: 0.88rem; line-height: 1.5; }

.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.button {
  min-height: 54px;
  padding: 10px 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  font-weight: 750;
}
.button span { display: block; margin-top: 3px; font-size: 0.68rem; font-weight: 550; }
.button--drop { background: #ffd280; color: #172033; }
.button--restart { background: #26364d; border-color: #7d90ad; color: #f5f1e8; }
.button:disabled { cursor: default; opacity: 0.55; }
.button:active:not(:disabled) { transform: translateY(1px); }
:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }
.instructions { margin: 14px 0 0; color: #c1ccdc; font-size: 0.78rem; line-height: 1.55; }
.seedline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 14px 0 0; color: #aebed2; font-size: 0.72rem; }
.seedline strong { color: #f5f1e8; overflow-wrap: anywhere; }
.noscript { color: #ffbaba; }
.footer { color: #aebed2; text-align: center; font-size: 0.75rem; }

@media (hover: hover) {
  .button--drop:hover:not(:disabled) { background: #ffe0a6; }
  .button--restart:hover:not(:disabled) { background: #344863; }
}
@media (min-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: 32px 60px; }
  .intro { padding-bottom: 40px; }
  .tagline { margin-top: 24px; font-size: 1.4rem; }
  .description { margin-top: 12px; }
  .legend { margin-top: 28px; }
  .playfield { height: 420px; }
  .footer { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
  .layout { gap: 14px; }
  .description { font-size: 0.85rem; }
  .legend { margin-top: 10px; }
}

/* Rung one: the rating prompt on the game-over panel. The panel itself is
   pointer-events: none so a tap anywhere on it still reaches the playfield;
   the rating block is the one part of it that must catch the tap. */
.rating { margin-top: 1rem; pointer-events: auto; }
.rating-buttons { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.rating-button {
  font: inherit; font-size: 1.25rem; padding: 0.5rem 0.9rem; cursor: pointer;
  border: 1px solid currentColor; border-radius: 0.5rem; background: transparent; color: inherit;
}
.rating-button:disabled { opacity: 0.5; cursor: default; }