/* Tresu: the user's ivory and three sea-blue shades, shared by both page entries.
   Paint only: scenery, specimen art, pencil marks and paper images stay intact. */
:root {
  --theme-surface:#f6f4eb;
  --theme-mist:#91c8e4;
  --theme-soft:#749bc2;
  --theme-primary:#4682a9;
  --theme-on-primary:#ffffff;
  --theme-ink:#142c3c;
  --theme-muted:#183044;
  --theme-accent:#142c3c;
  --theme-border:#56788f;
  --theme-line:#c6d6df;
  --ink:var(--theme-ink);
  --muted:var(--theme-muted);
  --accent:var(--theme-accent);
  --accent-soft:var(--theme-mist);
  --paper:var(--theme-surface);
}
body,body[data-scene=meadow] {
  --accent:var(--theme-accent);
  --accent-soft:var(--theme-mist);
  background-color:var(--theme-surface);
  color:var(--theme-ink);
  accent-color:var(--theme-accent);
}
::selection{background:var(--theme-soft);color:var(--theme-ink)}
button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible {
  outline-color:var(--theme-accent);
}
.brand{gap:8px;font-size:26px;letter-spacing:.02em;flex-shrink:0}
.brand-mark{width:52px;height:52px;flex:0 0 auto;background:none;border:0;border-radius:0;transform:none}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;transform:translateY(-3px) scale(1.12);transform-origin:center}
.tresu-logo{display:block;width:36px;height:36px;object-fit:contain;flex:0 0 auto}
.shell-atlas-brand{display:flex;align-items:center;gap:10px}
@media(max-width:760px){.brand{gap:6px;font-size:22px}.brand-mark{width:44px;height:44px}.brand small{font-size:9px}.shell-atlas-brand .tresu-logo{width:32px;height:32px}}
.brand small{color:var(--theme-muted);letter-spacing:0;line-height:1.6;margin-top:3px}
.main-nav,.header-tools .icon-button{background:#f6f4ebd9;color:var(--theme-ink);border-color:#ffffffb8}
.nav-item.selected{background:var(--theme-mist);color:var(--theme-ink);box-shadow:0 2px 8px #142c3c12}
.header-tools .icon-button:hover,.scenery-return:hover{background:var(--theme-mist)}
.header-tools .icon-button[aria-pressed=true]{background:var(--theme-mist)}
.scenery-return{background:#f6f4ebdb;color:var(--theme-ink)}

/* The focus panel keeps its frosted translucency. */
.focus-card {
  background:linear-gradient(135deg,#f6f4ebd4,#91c8e4a8);
  border-color:#ffffffbd;
  box-shadow:0 18px 60px #142c3c24,inset 0 1px 0 #ffffff70,inset 0 0 0 4px #ffffff0d;
}
.card-topline,.timer,.active-task,.task-field{color:var(--theme-ink)}
.focus-card .card-caption,.focus-card #timer-subtitle,.focus-card .focus-rule,
.focus-card .discovery-note,.focus-card .preview-button,.focus-card .task-field small,
.focus-card .duration-options button,.focus-commitment,.is-focusing .focus-rule{color:var(--theme-muted)}
.live-dot{background:var(--theme-accent);box-shadow:0 0 0 5px #4682a926}
@keyframes breathe{50%{box-shadow:0 0 0 7px #4682a92e}}
.duration-options{background:#f6f4ebb8}
.focus-card .duration-options button.selected{background:var(--theme-soft);color:var(--theme-on-primary)}
.focus-card .duration-options button:hover{background:var(--theme-mist)}
.focus-card .task-field input,.custom-duration input {
  background:#f6f4ebb8;color:var(--theme-ink);border-color:var(--theme-border);
}
.focus-card .task-field input::placeholder{color:var(--theme-muted)}
.primary-button{background:var(--theme-primary);color:var(--theme-on-primary);box-shadow:0 6px 20px #4682a91c}
.primary-button:hover{background:var(--theme-ink);color:var(--theme-surface)}
.primary-button:active{background:var(--theme-primary)}
.progress-track{background:#91c8e47a}
.progress-track>span{background:var(--theme-accent)}
.preview-button{border-color:#4682a92e}
.text-button{color:var(--theme-accent)}
.scene-choice{background:#f6f4ebd9;border-color:#f6f4ebc9;color:var(--theme-ink)}
.scene-choice.selected{background:#c7e5f2dc;border-color:#bfd6e0}
.scene-choice-text small{color:var(--theme-muted)}
.scene-choice-check{color:var(--theme-ink);border-color:var(--theme-border)}
.scene-choice.selected .scene-choice-check{background:var(--theme-primary);color:var(--theme-on-primary);border-color:var(--theme-accent)}
.scene-choice:hover{background:#e1eff6e8;border-color:#b6ceda}
.scene-choice.selected:hover{background:#d6eaf5ed}
.is-focusing .live-dot{background:var(--theme-accent)}
.place-story{color:#fff;text-shadow:0 1px 10px #142c3c70,0 1px 2px #142c3c33}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .focus-card{background:#f6f4ebf5}
}

/* Small sheets, collection controls and history. */
.sheet-dialog,.detail-dialog,.reward-dialog{background-color:var(--theme-surface);color:var(--theme-ink)}
.sheet-dialog::backdrop,.detail-dialog::backdrop,.reward-dialog::backdrop{background:#142c3c66}
.sheet-tabs button{color:var(--theme-muted)}
.sheet-tabs button.selected{background:var(--theme-soft);color:var(--theme-on-primary);border-color:var(--theme-accent)}
.floating-close{background:var(--theme-mist);color:var(--theme-ink)}
.section-kicker,.sheet-footnote,.history-row>span,.locked small{color:var(--theme-muted)}
.sheet-tabs,.sheet-header,.history-row{border-color:var(--theme-line)}
.sheet-intro,.specimen-number,.specimen-count,.empty-message,.empty-slot,.history-row small{color:var(--theme-muted)}
.collection-grid{background-color:var(--theme-mist);border-color:var(--theme-line)}
.collection-grid .specimen-card{background-color:var(--theme-surface);border-color:var(--theme-line)}
.flower-collection{background-color:var(--theme-mist);border-color:var(--theme-line)}
.new-label{background:var(--theme-mist);color:var(--theme-accent);border-color:var(--theme-border)}
.toast{background:var(--theme-ink);color:var(--theme-surface)}

/* Atlas: keep the drawing paper and clear laminate; recolor its chrome. */
.shell-atlas-dialog {
  --sa-ink:var(--theme-ink);--sa-muted:var(--theme-muted);
  --sa-line:var(--theme-line);--sa-accent:var(--theme-accent);
  --sa-paper:var(--theme-surface);
  background:var(--theme-surface);color:var(--theme-ink);
}
.shell-atlas-header{background:var(--theme-mist);border-color:var(--theme-line)}
.shell-atlas-footer{background:var(--theme-soft);border-color:var(--theme-line)}
.shell-paper-top{background:var(--theme-surface);color:var(--theme-muted)}
.shell-atlas-dialog button:focus-visible,.shell-atlas-dialog input:focus-visible,
.shell-atlas-legacy summary:focus-visible{outline-color:var(--theme-accent)}
.shell-atlas-close{background:#e9ece1!important;border:0!important}
.shell-atlas-close:hover{background:#dce5df!important}
.shell-atlas-demo{background:var(--theme-surface);color:var(--theme-accent);border-color:var(--theme-border)}
.shell-atlas-real{border-bottom-color:var(--theme-border)!important}
.shell-atlas-tools,.shell-atlas-legacy,.shell-atlas-page-end{border-color:var(--theme-line)}
.shell-atlas-search input{background:var(--theme-surface);border-color:var(--theme-border)}
.shell-atlas-search input::placeholder{color:var(--theme-muted)}
.shell-atlas-categories>button{background:var(--theme-mist);border-color:var(--theme-border)}
.shell-atlas-categories>button[aria-pressed=true]{background:var(--theme-primary);color:var(--theme-on-primary);border-color:var(--theme-accent)}
.shell-atlas-categories>button:hover{border-color:var(--theme-accent)}
.shell-atlas-filters input{accent-color:var(--theme-accent)}
.shell-atlas-card-group,.shell-atlas-card-note,.shell-atlas-card-habitat,
.shell-atlas-latin,.shell-atlas-cover-note,.shell-atlas-cover-bottom,
.shell-atlas-page-end,.shell-atlas-empty>span,.shell-atlas-empty p,
.shell-atlas-footer>p,.shell-atlas-legacy,.specimen-edition,.specimen-unrecorded,
.specimen-collection-state{color:var(--theme-muted)}
.shell-atlas-cover-link{border-bottom-color:var(--theme-border)!important}
.shell-atlas-card:hover{border-color:var(--theme-border)!important}
.shell-atlas-card.is-new{outline-color:var(--theme-accent)}
.shell-atlas-card.is-new .shell-atlas-card-top>span:last-child,
.shell-atlas-card.is-discovered:not(.is-new) .shell-atlas-card-top>span:last-child,
.specimen-collection-state .is-discovered{color:var(--theme-accent)}
.shell-atlas-button{background:var(--theme-mist)!important;border-color:var(--theme-border)!important}
.shell-atlas-button>span{color:var(--theme-muted)}
.shell-atlas-button-primary{background:var(--theme-primary)!important;color:var(--theme-on-primary)!important;border-color:var(--theme-accent)!important}
.shell-atlas-button-primary>span{color:var(--theme-on-primary)}
.shell-atlas-button:hover{box-shadow:inset 0 0 0 1px var(--theme-accent)}
.specimen-paper{color:var(--theme-ink)}
.specimen-index{border-right-color:var(--theme-accent)}
.specimen-index>span:first-child{background:var(--theme-primary);color:var(--theme-on-primary)}
.specimen-range,.specimen-facts,.specimen-facts>div+div{border-color:var(--theme-border)}
.specimen-view-toggle{background:var(--theme-mist)!important;border-color:var(--theme-border)!important}
#collection-dialog,#detail-dialog,#collection-dialog:not(.is-collection) .specimen-card{color:var(--theme-ink);background-color:var(--theme-surface)}
#collection-dialog:not(.is-collection) .specimen-card .specimen-number{color:var(--theme-muted)}

/* The same receipt identities and paper inserts, with ivory and blue surroundings. */
.tresu-round-dialog{background:var(--theme-surface);color:var(--theme-ink);border-color:var(--theme-mist)}
.tresu-round-dialog::backdrop{background:#142c3c90}
.tresu-round-dialog button:focus-visible{outline-color:var(--theme-accent)}
.round-shells-kicker,.round-shells-mode,.round-shell-number,.round-shells-footer>p{color:var(--theme-muted)}
.round-shells-close{background:var(--theme-mist);border-color:var(--theme-border)}
.round-shells-meta,.round-shells-footer{border-color:var(--theme-line)}
.round-shell-amount{color:var(--theme-accent)}
.round-shell-new{background:var(--theme-mist);color:var(--theme-accent);border-color:var(--theme-border)}
.round-shells-footer{background:var(--theme-soft)}
.round-shells-footer>p{color:var(--theme-on-primary)}
.round-shells-footer button{background:var(--theme-surface);border-color:var(--theme-border)}
.round-shells-footer .round-shells-primary{background:var(--theme-primary);color:var(--theme-on-primary);border-color:var(--theme-accent)}

/* Overlay controls only: the tide renderer's water/sand/foam are untouched. */
.tresu-tide-dialog .tresu-tide-close{background:#f6f4ebed;color:var(--theme-ink);border-color:var(--theme-border)}
.tresu-tide-dialog .tresu-tide-close:focus-visible{outline-color:var(--theme-accent)}
body .controls .control,.back{background:#f6f4ebed;border-color:var(--theme-border);color:var(--theme-ink)}
body .controls #done,#receipt-atlas{background:var(--theme-primary);color:var(--theme-on-primary)}
body[data-phase] .caption,body[data-phase] .bottom,body[data-phase] .hint,.wordmark{color:var(--theme-ink)}
.timeline input{accent-color:var(--theme-accent)}
.timeline input::-webkit-slider-runnable-track{background:#4682a955}
.timeline input::-webkit-slider-thumb{background:var(--theme-accent)}
#receipt-dialog{background:var(--theme-surface);color:var(--theme-ink)}
#receipt-dialog small,#receipt-description,.receipt-item span{color:var(--theme-muted)}
#close-receipt{background:var(--theme-mist);color:var(--theme-ink)}
.receipt-item{border-color:var(--theme-line)}
#receipt-dialog button:focus-visible{outline-color:var(--theme-accent)}
.harvest-dialog{background-color:var(--theme-surface);color:var(--theme-ink)}
.harvest-header{background:linear-gradient(var(--theme-surface),#f6f4ebe8)}
.harvest-footer{background:linear-gradient(#f6f4ebe8,var(--theme-surface))}
.harvest-close,.harvest-skip{background:var(--theme-mist);color:var(--theme-ink);border-color:var(--theme-border)}
.harvest-done{background:var(--theme-primary);color:var(--theme-on-primary)}
.harvest-tally,.harvest-status{color:var(--theme-muted)}

/* Capsule and moving glow adapted from the user-supplied Uiverse.io button
   by Wendell47. Only the home start action uses this treatment. */
#start-button {
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;isolation:isolate;overflow:hidden;z-index:0;
  padding:15px 30px;border:0;border-radius:10rem;
  background:var(--theme-mist);color:var(--theme-on-primary);
  font-weight:600;cursor:pointer;
  box-shadow:0 0 7px -5px #142c3c80;
  transition:background .18s ease,transform .15s ease,box-shadow .18s ease;
}
#start-button>span:not(.hoverEffect),#start-button>svg{position:relative;z-index:2;pointer-events:none}
#start-button .hoverEffect{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}
#start-button .hoverEffect>span{
  width:10rem;height:10rem;flex-shrink:0;border-radius:40rem;
  background:linear-gradient(90deg,#4682a9 0%,#749bc2 49%,#91c8e4 100%);
  filter:blur(20px);opacity:.6;animation:tresu-button-glow 6s linear infinite;
  transition:width .4s ease,height .4s ease;
}
#start-button:hover{background:var(--theme-surface);color:var(--theme-on-primary);transform:none;box-shadow:0 3px 12px #142c3c18}
#start-button:hover .hoverEffect>span{width:8rem;height:8rem}
#start-button:active{transform:scale(.97)}
@keyframes tresu-button-glow{to{transform:rotate(360deg)}}

/* White lettering on the user's medium/deep blue fills. */
.focus-card .duration-options button.selected,.sheet-tabs button.selected,
.shell-atlas-categories>button[aria-pressed=true],.shell-atlas-button-primary,
.round-shells-primary,.primary-button,.harvest-done{
  text-shadow:0 1px 1px #142c3c59;
}

/* Atlas content fills the window, without the old brand and demo bars. */
.shell-atlas-dialog>.shell-atlas-close,
.shell-atlas-dialog.showing-detail>.shell-atlas-close{
  position:absolute;top:18px;right:22px;z-index:10;
  width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
  display:grid;place-items:center;box-shadow:none;
}
.shell-atlas-close svg{width:24px;height:24px;fill:none;stroke:var(--theme-ink);stroke-width:1.5;stroke-linecap:round}
.shell-atlas-dialog .specimen-view-toggle,.shell-atlas-dialog.showing-detail .shell-atlas-back{min-height:44px}
.shell-atlas-dialog button:active{filter:brightness(.96)}
.shell-atlas-heading{padding-right:54px;align-items:flex-start}
.shell-atlas-context-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
.shell-atlas-context-actions .shell-atlas-flower-link{
  display:inline-flex;align-items:center;gap:18px;min-height:44px;
  padding:8px 14px!important;border:1px solid var(--theme-border);
  border-radius:999px;background:var(--theme-surface);color:var(--theme-ink);
  font-size:12px!important;
}
.shell-atlas-context-actions .shell-atlas-flower-link:hover{background:var(--theme-mist)}
.shell-atlas-context-actions:empty{display:none}
.shell-paper-top{padding-right:58px;min-height:44px}
@media(max-width:760px){
  .shell-atlas-dialog>.shell-atlas-close,
  .shell-atlas-dialog.showing-detail>.shell-atlas-close{top:14px;right:14px}
  .shell-atlas-heading{position:relative;padding-top:42px;padding-right:0;gap:12px}
  .shell-atlas-context-actions{margin-top:12px}
  .shell-atlas-context-actions .shell-atlas-flower-link{font-size:12px!important;padding:8px 13px!important}
  .shell-paper-top{padding-right:52px}
}
@media(prefers-reduced-motion:reduce){
  #start-button,#start-button .hoverEffect>span{transition:none}
  #start-button .hoverEffect>span{animation:none}
  #start-button:active{transform:none}
}

/* Phone uses the right-hand icon controls; desktop retains the brand. */
@media(max-width:760px){
  .header>.brand{display:none}
  .header-tools{margin-left:auto;gap:7px}
}