/* Memory: wooden tiles on a garden table. Card backs are sage green with a stitched border; faces are white with
   one bold shape. Cards turn with a short flip (none when reduced motion is asked for). */
:root { --page: #eaf0ea; --card: #ffffff; --ink: #172017; --soft: #556255; --line: #cdd9cd; --field: #e1e9e1; --act: #2f6b3a; --on-act: #ffffff; --stop: #b3261e; --back: #5d8a5f; --wide: 640px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #101410; --card: #1a201a; --ink: #e9f0e9; --soft: #a0b0a0; --line: #2c372c; --field: #101410; --act: #8fd19a; --on-act: #0b2410; --stop: #ff8a80; --back: #3f6b44; color-scheme: dark; }
}
.top, .picks { justify-content: space-between; align-items: center; }
.board { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(6px, 2vw, 12px); perspective: 900px; }
.tile { aspect-ratio: 3 / 4; min-height: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; position: relative; transform-style: preserve-3d; transition: transform .3s; cursor: pointer; }
.tile.up, .tile.done { transform: rotateY(180deg); }
.tile .face, .tile .back { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; }
.tile .back { background: var(--back); border: 3px solid #fff; outline: 2px dashed rgb(255 255 255 / .45); outline-offset: -9px; }
.tile .face { background: #fff; transform: rotateY(180deg); border: 1px solid var(--line); }
.tile .face svg { width: 66%; height: 66%; }
.tile.done .face { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } }
.won { border: 2px solid var(--act); } .won button { justify-self: start; }