:root {
  color-scheme: light;
  --ink: #713a16;
  --orange: #e97519;
  --gold: #f7b329;
  --cream: #fff8dc;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  font-family: "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  background: #f6c45d url("assets/autumn-bg.webp") center / cover no-repeat;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 247, 211, .24);
  pointer-events: none;
}

.game {
  position: relative;
  z-index: 1;
  height: 100dvh;
  width: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 1.5vh, 16px);
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.topbar {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 14px;
  border: 2px solid rgba(239, 128, 22, .45);
  border-radius: 18px;
  background: rgba(255, 252, 233, .84);
  box-shadow: 0 6px 18px rgba(130, 65, 13, .13);
  backdrop-filter: blur(5px);
}

.title-wrap { min-width: 0; }
h1 { margin: 0; font-size: clamp(1.25rem, 3.1vh, 2rem); line-height: 1.05; }
.title-wrap p { margin: 3px 0 0; font-size: clamp(.8rem, 1.8vh, 1rem); }

.controls { display: flex; align-items: center; gap: 8px; flex: none; }
.score {
  min-width: 98px;
  padding: 8px 11px;
  border-radius: 13px;
  background: #fff2b8;
  font-size: clamp(.85rem, 2vh, 1rem);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

button {
  border: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.controls button {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid #ef9b24;
  border-radius: 13px;
  color: #8a451a;
  background: #fff9df;
  font-size: 1.55rem;
  box-shadow: 0 3px 0 #d98218;
}

.controls button:active { transform: translateY(2px); box-shadow: 0 1px 0 #d98218; }
.controls button:focus-visible, .card:focus-visible, #play-again:focus-visible { outline: 4px solid #2c79da; outline-offset: 2px; }

.board {
  width: min(1180px, 100%);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 17px);
}

.card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: clamp(3px, .45vw, 6px) solid #ef9b20;
  border-radius: clamp(14px, 2vw, 24px);
  background: #fff;
  box-shadow: 0 6px 0 rgba(155, 76, 18, .28), 0 10px 22px rgba(124, 62, 14, .18);
  isolation: isolate;
}

.card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(5px, 1vw, 13px);
  background: rgba(255,255,255,.97);
}

.card-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: #f5b12d;
}

.fragment {
  position: absolute;
  width: 25.5%;
  height: 34%;
  left: var(--left);
  top: var(--top);
  background-image: url("assets/leaves-cover.webp");
  background-size: 400% 300%;
  background-position: var(--bg-x) var(--bg-y);
  transform: translate(0, 0) rotate(0) scale(1.03);
  opacity: 1;
  will-change: transform, opacity;
}

.card.open .fragment,
.card.matched .fragment {
  animation: burst-away .54s cubic-bezier(.2,.7,.25,1) forwards;
  animation-delay: var(--delay);
}

.card.closing .fragment {
  animation: gather-back .42s ease-out both;
  animation-delay: var(--delay-in);
}

.card.matched { border-color: #e5a719; box-shadow: 0 3px 0 rgba(155, 76, 18, .18); }
.card.matched .cover { pointer-events: none; }

@keyframes burst-away {
  75% { opacity: .9; }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.5); opacity: 0; }
}

@keyframes gather-back {
  from { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.5); opacity: 0; }
  to { transform: translate(0,0) rotate(0) scale(1.03); opacity: 1; }
}

.victory {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(255, 244, 198, .18);
  backdrop-filter: blur(1px);
}
.victory[hidden] { display: none; }
#fireworks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.victory-card {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(22px, 5vw, 40px);
  border: 4px solid #f29a20;
  border-radius: 28px;
  background: rgba(255, 252, 228, .96);
  box-shadow: 0 18px 55px rgba(113,58,22,.25);
  animation: pop-in .46s cubic-bezier(.2,1.4,.4,1) both;
}
.victory-leaf { font-size: clamp(3rem, 10vw, 6rem); animation: leaf-dance 1.2s ease-in-out infinite alternate; }
.victory h2 { margin: 5px 0 18px; font-size: clamp(1.55rem, 5vw, 2.6rem); }
#play-again { padding: 12px 24px; border-radius: 15px; color: white; background: #df6815; box-shadow: 0 4px 0 #9e4210; font-size: 1.05rem; }
@keyframes pop-in { from { transform: scale(.35); opacity: 0; } }
@keyframes leaf-dance { to { transform: rotate(12deg) scale(1.08); } }

@media (max-aspect-ratio: 4/3) {
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 570px) {
  .game { gap: 7px; padding-left: 7px; padding-right: 7px; }
  .topbar { padding: 6px 8px; border-radius: 14px; }
  .title-wrap p { display: none; }
  .score { min-width: 82px; padding: 7px 8px; }
  .controls { gap: 5px; }
  .controls button { width: 37px; height: 37px; border-radius: 11px; }
  .board { gap: 7px; }
  .card { border-width: 3px; border-radius: 13px; box-shadow: 0 4px 0 rgba(155,76,18,.25); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}