/* Coordinated artwork for the setting picker, card backs, and board. */
.memory-page { --card-art:url('/assets/images/memory-match/design/botanical-back.svg');--style-edge:#284f40; }
.memory-page .setting-picker { margin:12px 0 32px; }
.memory-page .setting-picker .choose-heading { align-items:end; }
.memory-page .setting-picker .choose-heading>p { text-align:right;line-height:1.6;font-size:12px;color:var(--muted); }
.memory-page .style-choices { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin:0;padding:0;border:0; }
.memory-page .style-choice { position:relative;display:flex;flex-direction:column;min-width:0;cursor:pointer;padding:6px 6px 12px;border:1px solid #d9d1bd;border-radius:13px;background:#fffcf5;box-shadow:0 3px 8px #3e41200b;transition:transform .18s,box-shadow .18s; }
.memory-page .style-choice:hover { transform:translateY(-3px);box-shadow:0 7px 15px #3e412015; }
.memory-page .style-choice input { position:absolute;opacity:0;width:1px;height:1px; }
.memory-page .style-choice:has(input:checked) { border-color:var(--style-edge);box-shadow:0 0 0 2px var(--style-edge);background:#fffaf0; }
.memory-page .style-choice:has(input:focus-visible) { outline:3px solid #a96d3b;outline-offset:5px; }
.memory-page .style-choice:has(input:disabled) { opacity:.65;cursor:wait; }
.memory-page .style-art { display:block;position:relative;aspect-ratio:1;overflow:hidden;border-radius:8px;background:#f4ecda; }
.memory-page .style-art>img:first-child { width:100%;height:100%;object-fit:cover; }
.memory-page .style-choice:has(input[value="classic"]) .style-art>img:first-child { padding:14px;object-fit:contain;background:#edf0df; }
.memory-page .style-art .style-back-swatch { position:absolute;bottom:6px;right:6px;width:29%;height:29%;border-radius:4px;border:2px solid #fffaf0;transform:rotate(9deg);box-shadow:0 2px 4px #102c3150; }
.memory-page .style-choice strong { display:block;font-size:11px;line-height:1.3;margin:12px 3px 0;padding-right:12px;color:#3b493d;font-weight:600; }
.memory-page .style-check { visibility:hidden;position:absolute;right:8px;bottom:11px;font-size:12px;color:var(--style-edge);font-weight:700; }
.memory-page .style-choice:has(input:checked) .style-check { visibility:visible; }
.memory-page .style-summary { margin:15px 0 0;font-size:11px;line-height:1.5;min-height:17px;color:#68715f; }
.memory-page .setting-hero { display:none;position:absolute;inset:0; }
.memory-page:not([data-card-style="classic"]) .setting-hero { display:block; }
.memory-page:not([data-card-style="classic"]) .hero-art>.art-card { display:none; }
.memory-page .hero-style-cover { position:absolute;width:240px;height:240px;object-fit:cover;top:15px;left:4%;transform:rotate(-7deg);border:7px solid #fffcf1;border-radius:18px;box-shadow:0 2px 0 #c3b491,0 16px 24px #243b3026; }
.memory-page .hero-style-back { position:absolute;width:160px;height:160px;object-fit:cover;bottom:8px;right:0;transform:rotate(13deg);border:5px solid #fffcf1;border-radius:14px;box-shadow:0 2px 0 #c3b491,0 12px 20px #243b3026; }
.memory-page .card .card-back { background-color:var(--style-edge);background-image:var(--card-art);border-color:var(--style-edge); }
.memory-page .demo-card:not(.demo-revealed) { background-color:var(--style-edge);background-image:var(--card-art);border-color:var(--style-edge); }
.memory-page .board-room { background-color:#f8f2e6; }
.memory-page:not([data-card-style="classic"])[data-theme="matched"] .board-room::after { opacity:.15; }
.memory-page .pause-panel { background:#fffcf2ed;border:1px solid #d8cba9;border-radius:16px;box-shadow:0 8px 35px #263f2a15;max-width:calc(100% - 32px); }
@media(max-width:1000px) {
  .memory-page .style-choices { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .memory-page .style-choice strong { font-size:12px; }
  .memory-page .hero-style-cover { width:205px;height:205px;top:24px;left:0; }
  .memory-page .hero-style-back { width:140px;height:140px; }
}
@media(max-width:600px) {
  .memory-page .setting-picker .choose-heading { align-items:start;flex-direction:column;gap:8px; }
  .memory-page .setting-picker .choose-heading>p { text-align:left;font-size:11px; }
  .memory-page .setting-picker .choose-heading>p br { display:none; }
  .memory-page .style-choices { grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
  .memory-page .style-choice { padding:4px 4px 10px;border-radius:10px; }
  .memory-page .style-choice strong { font-size:10px;min-height:26px;margin-top:9px;padding-right:0; }
  .memory-page .style-check { right:7px;bottom:auto;top:7px;width:19px;height:19px;display:grid;place-items:center;background:#fffaf0;border-radius:50%; }
  .memory-page .style-summary { font-size:10px;min-height:30px; }
}
@media(prefers-reduced-motion:reduce) { .memory-page .style-choice { transition:none; } }
.reduce-motion .memory-page .style-choice { transition:none; }