/* Ice controls: the existing mist forest seen through a bevelled ice lens.
 * Hover light crosses once; press responds immediately. No timers or listeners.
 * Keep selection/correctness semantics and the trees' spatial layout intact.
 */
:root {
  --ice-fill: linear-gradient(165deg, #ffffffd9 0%, #f3fbff99 42%, #cae4f48c 52%, #edfaffb8 100%);
  --ice-ink: #194664;
  --ice-edge: #eafaffd9;
  --ice-shadow: inset 0 1px 0 #fff, inset 1px 0 0 #ffffffa6,
    inset 0 -2px 2px #7caac04a, inset -1px 0 0 #a8cde28c,
    0 4px 10px #2858771f;
}

/* App and modal scopes beat historical dark-theme overrides without changing
 * DOM structure, hit targets, click delegation, or keyboard semantics. */
:is(#app, #modal-root) :is(button:not(.theme-tree):not(.toggle), a.primary-btn, a.secondary-btn, a.text-btn) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ice-fill) !important;
  color: var(--ice-ink) !important;
  border: 1px solid var(--ice-edge) !important;
  border-radius: 13px;
  box-shadow: var(--ice-shadow) !important;
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  text-shadow: 0 1px 0 #ffffff52;
  transition: box-shadow 180ms ease-out, border-color 180ms ease-out,
    background-color 180ms ease-out, scale 120ms ease-out;
  touch-action: manipulation;
}

:is(#app, #modal-root) :is(.primary-btn, .nav-item.active) {
  --ice-fill: linear-gradient(165deg, #e4faffeb 0%, #b5e5f5bf 38%, #73c6e3bd 53%, #cef0facc 100%);
  --ice-ink: #103e59;
  --ice-edge: #d4f5ff;
}
:is(#app, #modal-root) :is(.secondary-btn, .account-btn, .icon-btn, .text-btn) {
  --ice-fill: linear-gradient(160deg, #ffffffd9, #f1f9fd8c 43%, #cce3f19c 55%, #ffffffc2);
}
:is(#app, #modal-root) .text-btn { padding: 7px 11px; }
:is(#app, #modal-root) .icon-btn { min-width: 34px; min-height: 34px; }
:is(#app, #modal-root) .nav-item { border-radius: 16px; }
:is(#app, #modal-root) .nav-item.active { font-weight: 650; }
#modal-root .modal button.modal-close { position: absolute; top: 16px; right: 16px; }
:is(#app, #modal-root) button:is(.knowledge-node, .forest-tree, .planet-node):not(.toggle) { position: absolute; }
:is(#app, #modal-root) button:is(.knowledge-node, .tree-relation, .source-link) small { color: #425e73; }

/* Broad clickable theme cards retain their woodland, beneath the ice skin. */
:is(#app, #modal-root) :is(.theme-card, .catalog-theme) {
  --ice-fill: linear-gradient(145deg, #fffffff0, #eff8fcce 38%, #cce8f48c 59%, #effaffbd),
    var(--mist-image) var(--crop, 50% 55%) / auto 165%;
  border-radius: 16px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:is(#app, #modal-root) :is(.theme-card, .catalog-theme, .catalog-scene, .account-option) {
  --ice-shadow: inset 0 1px 0 #fff, inset 1px 0 0 #ffffff99,
    inset 0 -2px 3px #659db83b, 0 8px 20px #28587721;
}
:is(#app, #modal-root) :is(.answer-option.chosen, .share-topic.selected, .account-option.chosen) {
  --ice-fill: linear-gradient(155deg, #e0f5ff, #a7d4ebd9 48%, #d3effbdd);
  --ice-edge: #598cad;
  --ice-ink: #103e59;
  --ice-shadow: inset 0 1px 0 #fff, inset 0 -2px 2px #639bb76b, 0 3px 8px #28587724;
}
:is(#app, #modal-root) .answer-option.correct {
  --ice-fill: linear-gradient(160deg, #f0fcf3, #d0eddd 52%, #e6f8ed);
  --ice-edge: #528e69;
  --ice-ink: #20583c;
}
:is(#app, #modal-root) .answer-option.incorrect {
  --ice-fill: linear-gradient(160deg, #fff7f3, #f0dcd7 52%, #faebe5);
  --ice-edge: #b56b5f;
  --ice-ink: #83382c;
}

/* Inset top bevel is static; the thin specular streak is interaction-only. */
:is(#app, #modal-root) :is(button:not(.theme-tree):not(.toggle), a.primary-btn, a.secondary-btn, a.text-btn)::before {
  content: '';
  position: absolute;
  inset: 1px 2px auto;
  height: 45%;
  border-radius: inherit;
  background: linear-gradient(180deg, #ffffff70, #ffffff00);
  pointer-events: none;
  z-index: -1;
}
:is(#app, #modal-root) :is(button:not(.theme-tree):not(.toggle), a.primary-btn, a.secondary-btn, a.text-btn)::after,
.theme-tree-copy::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 45%;
  height: 200%;
  background: linear-gradient(90deg, transparent, #ffffff14 22%, #ffffff91 50%, #e2faff38 70%, transparent);
  opacity: 0;
  transform: translateX(0) skewX(-24deg);
  pointer-events: none;
  z-index: 2;
}

/* A tree is a spatial object, not a rectangular button: freeze only its label. */
.theme-tree-copy {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #effaffeb, #b9dce9c9 48%, #e4f6ffdb);
  border: 1px solid #dcf5ffcf;
  box-shadow: var(--ice-shadow);
  backdrop-filter: blur(10px);
}
.theme-tree-copy strong, .theme-tree-copy small { color: #183f58; }
.theme-tree.selected .theme-tree-copy { border-color: #ffe3a7; box-shadow: inset 0 1px 0 #fff, 0 4px 12px #14314d45; }

@media (hover: hover) and (pointer: fine) {
  :is(#app, #modal-root) :is(button:not(.theme-tree):not(.toggle), a.primary-btn, a.secondary-btn, a.text-btn):hover:not(:disabled):not([aria-disabled='true']) {
    border-color: #ffffff !important;
    box-shadow: inset 0 1px 0 #fff, inset 1px 0 1px #ffffffd9,
      inset 0 -2px 3px #7dabc47a, 0 7px 18px #22557930 !important;
  }
  :is(#app, #modal-root) :is(button:not(.theme-tree):not(.toggle), a.primary-btn, a.secondary-btn, a.text-btn):hover:not(:disabled):not([aria-disabled='true'])::after,
  .theme-tree:hover .theme-tree-copy::after {
    animation: ice-light-pass 680ms cubic-bezier(.2, .65, .3, 1) both;
  }
}
@keyframes ice-light-pass {
  0% { transform: translateX(0) skewX(-24deg); opacity: 0; }
  18% { opacity: .75; }
  78% { opacity: .5; }
  100% { transform: translateX(430%) skewX(-24deg); opacity: 0; }
}
:is(#app, #modal-root) :is(button:not(.theme-tree):not(.toggle), a.primary-btn, a.secondary-btn, a.text-btn):active:not(:disabled):not([aria-disabled='true']) {
  scale: .98;
  box-shadow: inset 0 2px 5px #426e874a, inset 0 -1px 0 #fff, 0 2px 5px #2858771a !important;
  transition-duration: 70ms;
}
:is(#app, #modal-root) :is(button, a.primary-btn, a.secondary-btn, a.text-btn):focus-visible {
  outline: 3px solid #1262ae;
  outline-offset: 3px;
}
:is(#app, #modal-root) button:disabled {
  cursor: not-allowed;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 #ffffffb3 !important;
}
:is(#app, #modal-root) button:disabled::after { animation: none; opacity: 0; }
.toggle { background: linear-gradient(#91adbf, #bed6e4); box-shadow: inset 0 1px 3px #21476559, 0 1px 0 #fff; }
.toggle.on { background: linear-gradient(#2879a2, #69b9db); }
.toggle > span { background: linear-gradient(145deg, #fff, #c4e2f0); box-shadow: inset 0 1px 0 #fff, 0 2px 4px #21476540; }

@media (prefers-reduced-motion: reduce) {
  :is(#app, #modal-root) :is(button, a.primary-btn, a.secondary-btn, a.text-btn) { transition: none; }
  :is(#app, #modal-root) :is(button, a.primary-btn, a.secondary-btn, a.text-btn)::after,
  .theme-tree-copy::after { animation: none !important; }
  :is(#app, #modal-root) :is(button, a.primary-btn, a.secondary-btn, a.text-btn):active { scale: 1 !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :is(#app, #modal-root) :is(button:not(.theme-tree):not(.toggle), a.primary-btn, a.secondary-btn, a.text-btn),
  .theme-tree-copy {
    background: #e8f4fb !important;
    color: #143b56 !important;
    border-color: #5281a1 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :is(#app, #modal-root) .answer-option.correct { background: #e3f3e8 !important; color: #20583c !important; border-color: #528e69 !important; }
  :is(#app, #modal-root) .answer-option.incorrect { background: #f9e9e6 !important; color: #83382c !important; border-color: #b56b5f !important; }
  :is(#app, #modal-root) :is(button, a.primary-btn, a.secondary-btn, a.text-btn)::after { display: none; }
}
@media (forced-colors: active) {
  :is(#app, #modal-root) :is(button, a.primary-btn, a.secondary-btn, a.text-btn) { border: 1px solid ButtonText !important; box-shadow: none !important; }
  :is(#app, #modal-root) :is(button, a.primary-btn, a.secondary-btn, a.text-btn)::before,
  :is(#app, #modal-root) :is(button, a.primary-btn, a.secondary-btn, a.text-btn)::after { display: none; }
}