:root {
  color-scheme: light;
  --paper: #f4f0e5;
  --white: #fffdf7;
  --ink: #20342d;
  --muted: #728078;
  --line: #d9d5c8;
  --green: #386b4d;
  --green-dark: #284b39;
  --coral: #df654a;
  --yellow: #eccb61;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Trebuchet MS', 'Gill Sans', sans-serif;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(#d8d1bd 0.65px, transparent 0.65px);
  background-size: 13px 13px;
  font-family: var(--sans);
}

button, a { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.topbar {
  position: relative;
  z-index: 20;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px clamp(16px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 20px;
}

.wordmark strong { color: var(--coral); }

.wordmark-stamp {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 900;
  transform: rotate(-8deg);
}

.round-button {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: white;
  box-shadow: 0 3px 0 var(--green-dark);
  cursor: pointer;
}

.round-button svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.round-button:not(:disabled):hover { background: var(--green-dark); }
.round-button:not(:disabled):active { box-shadow: none; transform: translateY(3px); }
.round-button:disabled { background: #e4e3da; color: #a4a99f; box-shadow: none; cursor: not-allowed; }
.next-button:not(:disabled) { animation: next-ready 1.4s ease-in-out infinite; }

.reset-button {
  position: absolute;
  top: 50%;
  left: clamp(16px, 5vw, 64px);
  width: 40px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
}

.reset-button:hover { border-color: var(--coral); color: var(--coral); }
.reset-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.confirm-dialog {
  width: min(340px, calc(100vw - 32px));
  padding: 26px 22px 24px;
  border: 0;
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 18px 50px #20342d40;
  text-align: center;
}

.confirm-dialog::backdrop { background: #20342d80; }
.confirm-icon { width: 54px; height: 54px; fill: none; stroke: var(--coral); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.confirm-dialog p { margin: 10px 0 22px; font-size: 16px; font-weight: 700; }
.confirm-actions { display: flex; justify-content: center; gap: 28px; }
.round-button.is-quiet { background: #e4e3da; color: var(--ink); box-shadow: 0 3px 0 #c8c9bf; }
.round-button.is-quiet:hover { background: #d9d8ce; }
.round-button.is-danger { background: var(--coral); box-shadow: 0 3px 0 #b44a33; }
.round-button.is-danger:hover { background: #c95540; }

.language-picker { position: absolute; top: 50%; right: clamp(16px, 5vw, 64px); transform: translateY(-50%); }
.language-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px 5px 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--white);
  cursor: pointer;
}

.language-button:hover, .language-button[aria-expanded="true"] { border-color: var(--green); }
.flag { width: 30px; height: 20px; flex: none; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px #0002; }
.flag svg { display: block; width: 100%; height: 100%; }
.caret { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease; }
.language-button[aria-expanded="true"] .caret { transform: rotate(180deg); }
.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 24px #20342d26;
}

.language-option { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 6px; background: none; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.language-option:hover, .language-option:focus-visible { background: #eef3ec; outline: none; }
.language-option[aria-checked="true"] { color: var(--green); }
.language-option[aria-checked="true"]::after { margin-left: auto; content: "✓"; font-weight: 900; }

button:focus-visible, a:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.app-shell { width: min(1100px, 100%); margin: 0 auto; padding: 24px clamp(16px, 4vw, 48px) 48px; }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(30px, 4vw, 42px); font-weight: 500; }

.world-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.world-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
  animation: pop-in 360ms both;
}

.world-card:hover { border-color: var(--green); transform: translateY(-2px); }
.world-card:active { transform: translateY(0); }
.world-preview {
  height: 136px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #eef4e9;
}

.world-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.world-copy { display: grid; gap: 9px; padding: 11px 4px 3px; }
.world-name { font-size: 16px; font-weight: 900; text-transform: uppercase; }
.world-progress { height: 8px; overflow: hidden; border-radius: 8px; background: #e4e3da; }
.world-progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--green); transition: width 240ms ease; }
.world-progress.is-done .world-progress-fill { background: var(--coral); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

.picker-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.picker-toolbar h1 { font-size: 30px; text-transform: uppercase; }
.puzzle-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.puzzle-card {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
  animation: pop-in 260ms both;
}

.puzzle-card:hover { border-color: var(--green); transform: translateY(-2px); }
.puzzle-preview { position: relative; display: block; overflow: hidden; aspect-ratio: 1.2; background: #e9f3ef; }
.puzzle-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.puzzle-name { display: block; overflow: hidden; margin-top: 7px; font-size: 11px; font-weight: 900; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.puzzle-check { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 14px; font-weight: 900; }

.play-screen { width: min(940px, 100%); margin: 0 auto; }
.play-heading { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.play-heading h1 { flex: 1; min-width: 0; overflow: hidden; text-align: center; font-size: clamp(34px, 5vw, 52px); font-weight: 700; letter-spacing: 0.02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.found-bar { position: relative; width: clamp(110px, 22vw, 200px); height: 32px; flex: none; overflow: hidden; border-radius: 99px; background: #e4e3da; }
.found-bar.is-instant .found-fill { transition: none; }
.found-fill { position: absolute; inset: 0 auto 0 0; display: block; width: calc(var(--found, 0) * 100%); height: 100%; border-radius: inherit; background: var(--coral); transition: width 240ms ease; }
.found-text { position: relative; display: grid; height: 100%; place-items: center; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.level-steps { display: flex; gap: 5px; margin: -8px 0 16px; }
.level-step { height: 8px; flex: 1; border-radius: 99px; background: #e4e3da; }
.level-step.is-done { background: var(--green); }
.level-step.is-current { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--coral); }

.game-board {
  padding: clamp(12px, 2.5vw, 24px);
  border: 1px solid #d4d0c2;
  border-radius: 7px;
  background: var(--white);
  box-shadow: 3px 4px 0 #e2ddcf;
}

.picture-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(8px, 2vw, 22px); }
.picture-panel { min-width: 0; margin: 0; }
.artboard {
  position: relative;
  width: min(100%, 624px);
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 360 / 300;
  border: 2px solid #36443c;
  background: #fff;
}

.artboard img { display: block; width: 100%; height: 100%; user-select: none; }

.spot-target {
  position: absolute;
  z-index: 1;
  width: var(--target-size, 16%);
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: crosshair;
  transform: translate(-50%, -50%);
}

.spot-target:hover, .spot-target:focus-visible { border-color: white; outline: 3px solid var(--coral); background: #df654a20; }
.spot-target.is-found { border-color: var(--coral); background: #df654a26; cursor: default; outline: none; pointer-events: none; }
.spot-target.is-found::after {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: white;
  content: "✓";
  font-size: 12px;
  font-weight: 900;
}

.game-footer { display: flex; justify-content: center; margin-top: 18px; }
.game-footer .found-bar { width: min(320px, 100%); }
.play-heading h1, .game-board { transition: opacity 700ms ease; }
.play-screen.is-leaving h1, .play-screen.is-leaving .game-board { opacity: 0; }
.game-board.is-shaking { animation: nudge 280ms ease; }

@keyframes pop-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes next-ready { 50% { box-shadow: 0 3px 0 var(--green-dark), 0 0 0 7px #386b4d33; } }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

@media (max-width: 700px) {
  .topbar { min-height: 44px; gap: 10px; padding: 4px 14px; }
  .wordmark { font-size: 18px; }
  .wordmark-stamp { width: 28px; height: 28px; font-size: 13px; }
  .flag { width: 27px; height: 18px; }
  .round-button { width: 48px; height: 48px; }
  .round-button svg { width: 26px; height: 26px; }
  .app-shell { padding-top: 16px; padding-bottom: 16px; }
  .level-steps { margin: -4px 0 12px; }
  .play-heading { margin-bottom: 12px; }
  .play-heading h1 { font-size: clamp(22px, 7vw, 30px); }
  .world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .world-card { padding: 7px; }
  .world-preview { height: clamp(94px, 31vw, 130px); }
  .world-copy { gap: 8px; padding: 9px 3px 3px; }
  .world-name { font-size: 15px; }
  .puzzle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .puzzle-card { padding: 7px; }
  .puzzle-name { font-size: 12px; }
  .picker-toolbar h1 { font-size: 24px; }
  .play-heading { gap: 12px; }
  .picture-pair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* Both pictures fit one screen: about 215px of the height is header, heading and found bar. */
  .artboard { width: min(100%, calc((100dvh - 215px) * 0.6)); }
  .game-board { padding: 8px; }
  .game-footer { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}