#solitaire-panel { --solitaire-gold:var(--gold-primary,#cfb179); --solitaire-ink:var(--bg-space,#010b15); --solitaire-muted:var(--text-muted,#b8c4c9); }
#solitaire-panel .solitaire-modes { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;margin-block:22px 32px; }
#solitaire-panel button.solitaire-mode { display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;min-height:44px;min-width:0;padding:0 0 10px;border:0;border-radius:0;background:transparent;text-align:center;box-shadow:none;transform:none; }
#solitaire-panel .solitaire-mode:first-child { grid-column:1/-1;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:22px;text-align:left;padding:4px 12px 20px;border-bottom:1px solid var(--border-gold,rgba(211,179,113,.3)); }
#solitaire-panel .solitaire-mode-cover { display:block;width:100%;max-width:148px;aspect-ratio:2/3;height:auto;object-fit:contain;border-radius:7px;box-shadow:0 12px 22px #0009;transition:transform 200ms ease-out,box-shadow 200ms ease-out; }
#solitaire-panel .solitaire-mode:first-child .solitaire-mode-cover { width:96px; }
#solitaire-panel .solitaire-mode-copy { display:flex;flex-direction:column;gap:4px;min-width:0; }
#solitaire-panel .solitaire-mode[aria-pressed=true] { background:transparent;box-shadow:none; }
#solitaire-panel .solitaire-mode[aria-pressed=true] .solitaire-mode-cover { outline:1px solid #f4d49a;outline-offset:4px;box-shadow:0 16px 28px #000c; }
#solitaire-panel .solitaire-mode[aria-pressed=true] .solitaire-mode-name { color:#ecd6a9; }
#solitaire-panel .solitaire-mode:not(:disabled):hover .solitaire-mode-cover { transform:translateY(-3px);box-shadow:0 18px 30px #000c; }
#solitaire-panel .solitaire-mode-name { color:var(--text-main,#f8fdfe);font-family:'Cormorant Garamond',Georgia,serif;font-size:25px;font-weight:600;line-height:1.1;text-wrap:balance; }
#solitaire-panel .solitaire-mode-caption { color:var(--solitaire-muted);font-size:12px;line-height:1.5; }
#solitaire-panel .solitaire-rules { margin-block:0 16px; }
#solitaire-panel .solitaire-rule-text { margin:0 0 10px;font-size:15px;line-height:1.6;max-width:66ch; }
#solitaire-panel .solitaire-symbolic-note { color:var(--solitaire-muted);font-size:12px;line-height:1.5;margin:8px 0 0; }
#solitaire-panel .solitaire-stage { color:var(--solitaire-gold);font-size:16px; }
#solitaire-panel #solitaire-notice { font-size:14px;line-height:1.5;min-height:1.5em;color:var(--solitaire-muted); }
#solitaire-panel .solitaire-board { display:grid;gap:0;max-width:480px;margin:20px auto 24px;padding:2px;background:var(--solitaire-ink);border:1px solid var(--solitaire-gold);box-shadow:0 10px 28px #0005; }
#solitaire-panel .solitaire-board[data-columns="5"] { grid-template-columns:repeat(5,minmax(0,1fr)); }
#solitaire-panel .solitaire-board[data-columns="3"] { grid-template-columns:repeat(3,minmax(0,1fr));max-width:450px; }
#solitaire-panel .solitaire-board[data-columns="2"] { grid-template-columns:repeat(2,minmax(0,1fr));max-width:360px; }
#solitaire-panel button.solitaire-card { position:relative;display:block;aspect-ratio:1;width:100%;min-width:0;min-height:0;margin:0;padding:0;overflow:hidden;color:var(--text-main,#f8fdfe);background:var(--solitaire-ink);border:0;border-radius:0;box-shadow:none;transform:none;touch-action:manipulation;transition:box-shadow 120ms; }
#solitaire-panel .solitaire-card svg { display:block;width:100%;height:100%;pointer-events:none; }
#solitaire-panel .solitaire-divider { stroke:#010b15;stroke-width:1.7;fill:none; }
#solitaire-panel .solitaire-card.is-matched { box-shadow:inset 0 0 0 2px var(--solitaire-gold); }
#solitaire-panel .solitaire-card.is-hint { z-index:1;outline:3px solid #f4d49a;outline-offset:-3px; }
#solitaire-panel button.solitaire-card:disabled { opacity:1;cursor:default; }
#solitaire-panel .solitaire-card.is-locked .solitaire-tile-number { background:var(--solitaire-gold);color:var(--solitaire-ink); }
#solitaire-panel .solitaire-card:not(:disabled):hover { background:var(--solitaire-ink);transform:none;box-shadow:inset 0 0 0 2px #f4d49a; }
#solitaire-panel .solitaire-tile-number { position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;min-width:17px;height:17px;padding-inline:2px;border:1px solid #b3956a88;border-radius:50%;background:#010b15e8;color:#f8efd5;font:10px/1.2 system-ui,sans-serif;pointer-events:none; }
#solitaire-panel .solitaire-art-board { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;max-width:480px;margin:20px auto 26px; }
#solitaire-panel .solitaire-art-card { position:relative;min-width:0;border:1px solid var(--solitaire-gold);background:var(--solitaire-ink);box-shadow:0 8px 18px #0005; }
#solitaire-panel .solitaire-art-half { position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden; }
#solitaire-panel button.solitaire-art-half { min-height:44px;padding:0;border:0;border-radius:0;background:var(--solitaire-ink);margin:0;box-shadow:none;transform:none;touch-action:manipulation; }
#solitaire-panel .solitaire-art-half img { position:absolute;left:0;top:0;display:block;width:100%;height:200%;max-width:none;object-fit:fill;pointer-events:none; }
#solitaire-panel .solitaire-art-half--lower img { top:-100%; }
#solitaire-panel .solitaire-art-half--lower::after { content:'';position:absolute;inset:0;border-top:1px dashed #ecc88ab3;pointer-events:none; }
#solitaire-panel .solitaire-art-half[aria-pressed=true]::after { border:3px solid #f4d49a; }
#solitaire-panel .solitaire-art-card.is-complete .solitaire-art-half--lower::after { border-top:0; }
#solitaire-panel button.solitaire-art-half:disabled { opacity:1; }
#solitaire-panel .solitaire-art-half:not(:disabled):hover { background:var(--solitaire-ink);transform:none; }
#solitaire-panel .solitaire-art-caption { display:block;min-height:31px;padding:6px 3px;border-top:1px solid var(--border-gold,rgba(211,179,113,.3));color:var(--solitaire-muted);font-size:12px;line-height:1.5;text-align:center; }
#solitaire-panel .is-complete .solitaire-art-caption { color:var(--solitaire-gold); }
#solitaire-panel .solitaire-results { margin-block:20px 4px; }
#solitaire-panel .solitaire-results h4 { margin:0 0 12px;font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;line-height:1.2; }
#solitaire-panel .solitaire-empty { padding:16px 0;margin:0;border-block:1px solid var(--border-gold,rgba(211,179,113,.3));color:var(--solitaire-muted);font-size:15px;line-height:1.6; }
#solitaire-panel .solitaire-findings { display:flex;flex-wrap:wrap;gap:8px;margin-block:12px 22px; }
#solitaire-panel button.solitaire-finding { display:flex;gap:8px;align-items:center;min-height:48px;padding:4px 10px 4px 4px;border-radius:3px;border:1px solid var(--border-gold,rgba(211,179,113,.3));background:transparent;box-shadow:none;text-align:left;font-size:14px; }
#solitaire-panel .solitaire-finding[aria-pressed=true] { border-color:var(--solitaire-gold);background:var(--surface-elevated,#101e31); }
#solitaire-panel .solitaire-finding-thumb { display:block;width:38px;height:38px;object-fit:cover; }
#solitaire-panel .solitaire-reading { display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:0;padding:22px 0;border-top:1px solid var(--border-gold,rgba(211,179,113,.3)); }
#solitaire-panel .solitaire-reading-visual { display:flex;justify-content:center;align-self:start; }
#solitaire-panel .solitaire-reading-image { display:block;width:100%;max-width:280px;height:auto;border:1px solid #b3956a80;box-shadow:0 12px 24px #0005; }
#solitaire-panel .solitaire-reading-copy { min-width:0; }
#solitaire-panel .solitaire-reading-copy .solitaire-reading-title { font-size:32px;margin-bottom:4px;color:var(--text-main,#f8fdfe); }
#solitaire-panel .solitaire-theme { margin:0 0 16px;color:var(--solitaire-gold);font-size:15px; }
#solitaire-panel .solitaire-reading-copy p { font-size:16px;line-height:1.65; }
#solitaire-panel .solitaire-question { padding-left:14px;border-left:2px solid var(--solitaire-gold);font-weight:500; }
#solitaire-panel .solitaire-step { color:var(--solitaire-muted); }
#solitaire-panel .solitaire-reading-copy .solitaire-source,#solitaire-panel .solitaire-reading-copy .solitaire-lens { font-size:12px;color:var(--solitaire-muted); }
#solitaire-panel .solitaire-eyebrow { color:var(--solitaire-gold);font-size:13px; }
#solitaire-panel .solitaire-tools { display:flex;flex-wrap:wrap;gap:10px;margin-block:18px; }
#solitaire-panel button.solitaire-control { min-height:44px;padding:10px 14px;border-radius:4px;background:transparent;border:1px solid var(--border-gold,rgba(211,179,113,.3));color:var(--text-main,#f8fdfe);box-shadow:none; }
#solitaire-panel button.solitaire-control--primary { border-color:var(--solitaire-gold);background:var(--surface-elevated,#101e31); }
#solitaire-panel .solitaire-story { padding:18px 0;border-top:1px solid var(--border-gold,rgba(211,179,113,.3)); }
#solitaire-panel .solitaire-story p { font-size:15px;line-height:1.6; }
#solitaire-panel :is(.solitaire-card,.solitaire-art-half,.solitaire-mode,.solitaire-control,.solitaire-finding):focus-visible { position:relative;z-index:2;outline:3px solid var(--focus-cabinet,#f0ce8d);outline-offset:3px; }
#solitaire-panel .solitaire-card:focus-visible,#solitaire-panel .solitaire-art-half:focus-visible { outline-offset:-3px; }
@media (min-width:700px) { #solitaire-panel .solitaire-reading { grid-template-columns:minmax(170px,.8fr) minmax(0,1.2fr); } }
@media (max-width:360px) { #solitaire-panel .solitaire-modes { gap:7px; }#solitaire-panel button.solitaire-mode { padding:9px; }#solitaire-panel .solitaire-mode-name { font-size:18px; }#solitaire-panel .solitaire-art-board { gap:18px 10px; } }
@media (prefers-reduced-motion:reduce) { #solitaire-panel button { transition:none; } }
.year-reflection { margin-block:24px; padding-block:16px; border-block:1px solid var(--border); }
.year-reflection h4 { font-size:1.1rem; margin-top:0; }

/* Finished deck objects are previews and result art. The playable triangular
   halves retain their exact geometry and remain free of ornamental frames. */
#solitaire-panel .solitaire-deck-preview { margin-block:20px 22px;border-block:1px solid var(--border-gold,rgba(211,179,113,.3)); }
#solitaire-panel .solitaire-deck-summary { min-height:58px;padding:15px 0;cursor:pointer;color:var(--solitaire-gold);font:500 17px/1.5 var(--font-sans,system-ui,sans-serif); }
#solitaire-panel .solitaire-deck-summary-note { display:block;margin-left:21px;color:var(--solitaire-muted);font-size:13px; }
#solitaire-panel .solitaire-deck-preview-body { padding:0 0 22px; }
#solitaire-panel .solitaire-deck-note { color:var(--solitaire-muted);font-size:14px;line-height:1.65;max-width:65ch; }
#solitaire-panel .solitaire-face-choices { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-block:18px 26px; }
#solitaire-panel button.solitaire-face-choice { min-height:44px;min-width:0;padding:9px 10px;border:1px solid var(--border-gold,rgba(211,179,113,.3));border-radius:3px;background:transparent;box-shadow:none;color:var(--text-main,#f8fdfe);font-size:15px;line-height:1.4; }
#solitaire-panel .solitaire-face-choice[aria-pressed=true] { border-color:#e8c990;background:#13263b;color:#f4dfb6; }
#solitaire-panel .solitaire-deck-pair { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px;max-width:540px;margin:0 auto 22px; }
#solitaire-panel .solitaire-deck-sample { margin:0;min-width:0; }
#solitaire-panel .solitaire-deck-card { display:block;width:100%;height:auto;aspect-ratio:2/3;border-radius:8px;box-shadow:0 15px 28px #0009; }
#solitaire-panel .solitaire-deck-sample figcaption { margin-top:12px;color:var(--solitaire-muted);font-size:13px;line-height:1.5;text-align:center;text-wrap:balance; }
#solitaire-panel :is(.solitaire-deck-summary,.solitaire-face-choice):focus-visible { outline:3px solid var(--focus-cabinet,#f0ce8d);outline-offset:4px; }
#solitaire-panel ::selection { background:#a38651;color:#020b17; }
@media(min-width:520px) { #solitaire-panel .solitaire-face-choices { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(min-width:900px) {
  #solitaire-panel .solitaire-modes { grid-template-columns:repeat(5,minmax(0,1fr));gap:20px; }
  #solitaire-panel .solitaire-mode:first-child { grid-column:auto;display:flex;gap:12px;padding:0 0 10px;border:0;text-align:center; }
  #solitaire-panel .solitaire-mode:first-child .solitaire-mode-cover { width:100%; }
  #solitaire-panel .solitaire-mode-name { font-size:25px; }
}
@media(max-width:360px) {
  #solitaire-panel .solitaire-modes { gap:24px 12px; }
  #solitaire-panel button.solitaire-mode { padding:0 0 10px; }
  #solitaire-panel .solitaire-mode:first-child { padding:4px 8px 20px;gap:16px;grid-template-columns:86px minmax(0,1fr); }
  #solitaire-panel .solitaire-mode:first-child .solitaire-mode-cover { width:86px; }
  #solitaire-panel .solitaire-mode-name { font-size:23px; }
  #solitaire-panel .solitaire-deck-pair { gap:12px; }
}
@media(prefers-reduced-motion:reduce) { #solitaire-panel .solitaire-mode-cover { transition:none;transform:none; } }