/* The study surface stays navy; the intentional visit to the cabinet adds brass. */
:root { --brass: #f0c977; --ink: #101e2b; }
:focus-visible { outline: 3px solid #ffda88; outline-offset: 4px; }
[tabindex="-1"]:focus { outline: 2px solid var(--sky); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -80px; left: 20px; z-index: 20; background: var(--text); color: var(--bg); padding: 12px; }
.skip-link:focus { top: 8px; }
.reward-toolbar { margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #081321; }
.reward-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: .95rem; }
.reward-links strong { color: var(--brass); font-variant-numeric: tabular-nums; }
.reward-links .text-button { color: var(--sky-2); }
.sensory-controls { display: grid; grid-template-columns: auto auto; align-items: center; gap: 6px 10px; font-size: .875rem; }
.sensory-controls span { grid-column: 1 / -1; color: var(--muted); max-width: 360px; }
select { font: inherit; color: var(--text); background: #102039; border: 1px solid #64809b; border-radius: 6px; padding: 7px 28px 7px 9px; min-height: 38px; }
.answer-state { display: block; font-size: .875rem; margin-top: 6px; font-weight: 750; }
.selected-answer { border-color: var(--sky); background: #142a40; }
.feedback.recorded { color: var(--text); border-color: var(--line); background: var(--panel-2); }
.feedback p { margin: 8px 0 0; }
.reward-summary { border-left: 3px solid var(--brass); padding: 8px 16px; margin-top: 16px; font-size: .95rem; line-height: 1.6; background: #101e2a; }
.reward-summary p { margin: 4px 0; }
.earned-prizes { color: var(--brass); }
.earned-art { display: flex; flex-wrap: wrap; gap: 8px; }
.earned-art img { object-fit: contain; }
.difficulty-reason { color: var(--muted); font-size: .875rem; }
.keyboard-hint, footer { color: var(--muted); }
.question-meta span { font-size: .8rem; }
.prize-counter { padding: clamp(16px, 3vw, 32px); background: #0b1725; border: 1px solid #76613f; border-radius: 18px; }
.counter-heading { padding: 10px 0 20px; border-bottom: 3px double #76613f; }
.counter-heading .eyebrow { color: var(--brass); }
.counter-heading h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.6rem, 6vw, 4rem); letter-spacing: -.03em; line-height: 1.1; color: #ffdf9a; }
.counter-heading > p:not(.eyebrow) { line-height: 1.5; margin-bottom: 0; }
.virtual-notice { color: var(--muted); font-size: .875rem; }
.counter-totals { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0; gap: 20px; }
.counter-totals div + div { border-left: 1px solid var(--line); padding-left: 20px; }
.counter-totals dt { color: var(--muted); font-size: .875rem; }
.counter-totals dd { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; margin: 5px 0 0; color: var(--brass); font-variant-numeric: tabular-nums; }
.counter-totals dd span { font-size: 1rem; color: var(--muted); }
.goal-empty { color: var(--muted); font-size: .95rem; }
.prize-goal { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid #796640; border-radius: 10px; background: #15212b; }
.prize-goal > div { flex: 1; }
.prize-goal p { margin: 7px 0; font-size: .9rem; }
progress { width: min(100%, 360px); accent-color: var(--brass); height: 10px; }
.catalog-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 22px; }
.catalog-nav .active { color: var(--ink); background: var(--brass); border-color: var(--brass); }
.prize-counter h2 { font-size: 1.4rem; }
.prize-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
.prize-card { display: flex; flex-direction: column; border: 1px solid #374653; border-bottom: 5px solid #80633c; border-radius: 10px 10px 3px 3px; overflow: hidden; background: #101f2e; }
.prize-art { display: grid; place-items: center; height: 180px; background: #e7e1d3; border-bottom: 1px solid #374653; }
.prize-art img { display: block; width: 170px; height: 170px; object-fit: contain; }
.prize-copy { padding: 18px; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
.prize-copy h3 { font-family: Georgia, 'Times New Roman', serif; font-size: 1.35rem; line-height: 1.2; margin: 0 0 10px; }
.prize-description { color: #bac8d6; font-size: .875rem; line-height: 1.55; margin: 0 0 14px; }
.prize-cost { font-weight: 800; color: var(--brass); font-size: 1.1rem; margin: auto 0 6px; }
.prize-status { font-size: .875rem; line-height: 1.5; margin: 0 0 12px; }
.prize-date { color: var(--muted); font-size: .875rem; margin: 0; }
.catalog-label { display: inline-block; color: #beeed8; font-size: .875rem; line-height: 1.5; margin-bottom: 10px; }
.redeem-review { font-size: .875rem; width: 100%; margin-top: 2px; }
.goal-button { color: #b9dfff; margin-top: 10px; font-size: .875rem; min-height: 32px; }
.prize-card.owned { border-bottom-color: #62a68d; }
.empty-collection { padding: 32px 22px; border: 1px dashed #59697a; color: var(--muted); line-height: 1.6; }
.session-note { color: var(--muted); font-size: .875rem; line-height: 1.5; margin: 26px 0; }
.point-rules { margin: 20px 0; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; color: #bdcede; font-size: .95rem; line-height: 1.65; }
summary { cursor: pointer; color: var(--text); }
.point-rules table { width: min(100%, 480px); border-collapse: collapse; text-align: left; }
.point-rules caption { text-align: left; font-weight: 700; margin: 12px 0; }
.point-rules th, .point-rules td { border-bottom: 1px solid #344a60; padding: 8px; }
.exam-rewards { padding: 18px; margin: 24px 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; line-height: 1.6; }
.exam-rewards .earned-art { justify-content: center; }
.exam-review { text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.exam-review li { padding: 16px 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.storage-warning { color: #ffe4ac; border: 1px solid #987844; background: #302518; border-radius: 8px; padding: 14px; line-height: 1.5; }
.counter-notice { color: #c6ffe0; border: 1px solid #497e65; background: #102a21; padding: 16px; border-radius: 10px; line-height: 1.5; }
dialog { width: min(470px, calc(100% - 24px)); max-height: calc(100dvh - 40px); overflow-y: auto; border: 2px solid var(--brass); border-radius: 16px; background: #0d1a2b; color: var(--text); padding: 26px; box-shadow: 0 20px 80px #0008; }
dialog::backdrop { background: #0009; }
dialog h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; }
.redemption-art { display: block; margin: 10px auto; background: #e7e1d3; border-radius: 12px; }
dialog p { line-height: 1.5; }
body[data-celebration="standard"][data-fresh-reward="true"] .reward-summary,
body[data-celebration="standard"][data-fresh-reward="true"] .exam-rewards { animation: reward-fade 300ms ease-out; }
body[data-celebration="celebratory"][data-fresh-reward="true"] .reward-summary,
body[data-celebration="celebratory"][data-fresh-reward="true"] .exam-rewards { animation: reward-fade 600ms ease-out; }
body[data-celebration="celebratory"][data-fresh-reward="true"] .earned-art img { animation: prize-reveal 800ms ease-out; }
@keyframes reward-fade { from { opacity: .55; } to { opacity: 1; } }
@keyframes prize-reveal { from { transform: scale(.9); } to { transform: scale(1); } }
body[data-celebration="calm"] *, body[data-celebration="calm"] *::before, body[data-celebration="calm"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body[data-celebration="calm"] .answer-button:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .answer-button:hover { transform: none; }
}
@media (max-width: 850px) { .prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .site-header { flex-wrap: wrap; }
  .reward-toolbar { align-items: stretch; flex-direction: column; }
  .sensory-controls { grid-template-columns: minmax(0, 1fr); }
  .sensory-controls select { max-width: 100%; width: 100%; }
  .prize-grid { gap: 14px; }
  .prize-copy { padding: 13px; }
  .prize-copy h3 { font-size: 1.2rem; }
  .prize-art { height: 140px; }
  .prize-art img { width: 130px; height: 130px; }
  .prize-goal { flex-wrap: wrap; gap: 10px; }
  .counter-totals { gap: 10px; }
  .counter-totals div + div { padding-left: 10px; }
  .counter-totals dt { font-size: .8rem; }
  .result-card { padding: 24px 16px; }
}
@media (max-width: 420px) {
  .prize-grid { grid-template-columns: 1fr; }
  .counter-totals { grid-template-columns: 1fr 1fr; }
  .counter-totals div:last-child { border: 0; padding-left: 0; }
  .prize-art { height: 160px; }
  .prize-art img { width: 150px; height: 150px; }
}