:root {
  color-scheme: light;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  color: #243246;
  background: #fff8e8;
  font-synthesis: none;
  --green: #28a745;
  --green-dark: #197733;
  --red: #d9363e;
  --ink: #243246;
  --cream: #fff8e8;
  --yellow: #ffd24a;
  -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--cream);
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 15% 6%, rgb(255 210 74 / 28%) 0 70px, transparent 71px),
    radial-gradient(circle at 96% 35%, rgb(83 187 255 / 17%) 0 90px, transparent 91px),
    var(--cream);
}

button { font: inherit; }
button:focus-visible { outline: 4px solid #156fca; outline-offset: 4px; }

.app { min-height: 100dvh; }

.screen {
  width: min(100%, 560px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.home-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.logo {
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  margin-bottom: 18px;
  color: white;
  background: var(--green);
  border: 7px solid white;
  border-radius: 34px;
  box-shadow: 0 10px 0 #16732f, 0 14px 28px rgb(31 72 45 / 20%);
  rotate: -4deg;
}

.logo span { font-size: 76px; font-weight: 1000; transform: translateY(-4px); }
.eyebrow { margin: 0; color: #c05223; font-size: .92rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }

h1 { margin: 0; font-size: clamp(2.4rem, 12vw, 4.5rem); font-weight: 1000; line-height: .98; letter-spacing: -.045em; }
.home-screen h1 { margin-top: 7px; color: var(--ink); }
.intro { margin: 22px 0 34px; font-size: clamp(1.2rem, 5vw, 1.55rem); font-weight: 650; line-height: 1.45; }

.button {
  display: inline-flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 20px;
  color: white;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 7px 0 var(--button-shadow), 0 12px 20px rgb(36 50 70 / 17%);
  touch-action: manipulation;
  transition: translate 80ms ease, box-shadow 80ms ease;
}

.button:active { translate: 0 5px; box-shadow: 0 2px 0 var(--button-shadow); }
.button-start { width: min(100%, 390px); padding: 15px 30px; background: var(--green); --button-shadow: var(--green-dark); font-size: 1.35rem; }
.safety { margin: 32px 0 0; color: #667085; font-size: .9rem; font-weight: 650; line-height: 1.5; }

.game-screen { display: flex; flex-direction: column; gap: 16px; }
.game-header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; }
.mini-logo { display: grid; width: 50px; height: 50px; place-items: center; color: white; background: var(--green); border-radius: 15px; font-size: 34px; font-weight: 1000; box-shadow: 0 5px 0 var(--green-dark); }
.score { display: flex; align-items: baseline; gap: 7px; padding: 8px 15px; background: white; border: 2px solid #eadfca; border-radius: 999px; box-shadow: 0 4px 0 #eadfca; }
.score-number { color: var(--green-dark); font-size: 1.65rem; font-weight: 1000; }
.score-label { font-weight: 800; }

.target-card {
  display: flex;
  flex: 1;
  min-height: 340px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 18px 24px;
  overflow: hidden;
  text-align: center;
  background: white;
  border: 3px solid #eadfca;
  border-radius: 32px;
  box-shadow: 0 8px 0 #eadfca, 0 18px 30px rgb(67 55 33 / 10%);
}

.target-art,
.result-art {
  color-scheme: light;
  background: #dff3ff;
  border-radius: 24px;
}
.target-art { width: min(100%, 360px); height: auto; max-height: 260px; }
.find-label { margin: -2px 0 5px; color: #778196; font-size: 1rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.target-card h1 { max-width: 100%; font-size: clamp(2rem, 9vw, 3.2rem); }

.game-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding-top: 4px; }
.button-check { width: 100%; min-height: 82px; gap: 12px; background: var(--green); --button-shadow: var(--green-dark); font-size: clamp(1.8rem, 8vw, 2.4rem); }
.button-check span { font-size: 1.25em; }
.button-link { min-height: 50px; padding: 8px 20px; border: 0; color: #40516a; background: transparent; border-radius: 14px; font-size: 1.05rem; font-weight: 850; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.button-end { align-self: center; min-height: 48px; margin-top: 2px; padding: 8px 19px; border: 2px solid #efb0b3; color: #b1262d; background: #fff5f5; border-radius: 14px; font-weight: 850; cursor: pointer; }

.result-screen { display: flex; flex-direction: column; align-items: center; text-align: center; }
.result-badge { display: grid; width: 70px; height: 70px; place-items: center; margin: 6px 0 16px; color: #885a00; background: var(--yellow); border: 5px solid white; border-radius: 50%; box-shadow: 0 6px 0 #d9a800; font-size: 40px; }
.result-screen h1 { margin-top: 8px; color: var(--green-dark); }
.result-message { margin: 10px 0 22px; font-size: 1.35rem; font-weight: 800; }
.result-list { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.result-card { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 4px; padding: 8px 7px 12px; background: white; border: 2px solid #eadfca; border-radius: 20px; box-shadow: 0 4px 0 #eadfca; }
.result-card span { font-size: .94rem; font-weight: 850; }
.result-art { width: 100%; height: 102px; border-radius: 14px; }
.empty-result { grid-column: 1 / -1; padding: 34px 18px; color: #667085; background: white; border: 2px dashed #d8cdb8; border-radius: 20px; font-weight: 750; line-height: 1.5; }
.result-actions { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 8px; padding: 30px 0 4px; }

@media (min-width: 440px) {
  .result-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-height: 700px) {
  .game-screen { gap: 11px; padding-top: max(14px, env(safe-area-inset-top)); }
  .target-card { min-height: 270px; padding-bottom: 15px; }
  .target-art { max-height: 200px; }
  .button-check { min-height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}