/* ════════════════════════════════════════════════════════════════════
   SymposiON — Home Revamp · SHELL
   Τα βασικά του κελύφους: reset, ορατό focus πληκτρολογίου, το μενού
   θεμάτων και το segmented control.
   ════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #0c0d10;
  font-family: 'Alegreya Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Global keyboard focus (WCAG 2.4.7) ──────────────────────────────
   Many controls use `outline:none` with only a faint border swap, which
   leaves keyboard users without a visible focus indicator. Restore a
   clear, theme-aware ring for any focusable element navigated by keyboard. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--terra-dk, #8a5a18);
  outline-offset: 2px;
}
/* search field (defined in css/system.css) currently has no focus state */
.sys-search__in:focus-visible {
  outline: 2px solid var(--terra-dk, #8a5a18);
  outline-offset: 2px;
}

/* ── Theme picker popover ────────────────────────────────────────── */
.theme-menu {
  /* Viewport-anchored (fixed), not button-anchored, so the wide theme gallery
     can never run off the LEFT edge (its left column was getting clipped). The
     `top` is set from the trigger button's position in js/app.js when it opens;
     84px is the fallback for the deep-link (?menu=themes) open. */
  position: fixed; top: 84px; right: 14px;
  width: max-content; max-width: min(1100px, 94vw); max-height: calc(100vh - 100px); overflow: auto;
  background: #14161b; border: 1px solid #2a2e36; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6); padding: 16px 18px; z-index: 9500;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .16s, transform .16s;
}
.theme-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.theme-menu__hd {
  font-size: 9.5px; letter-spacing: 0.2em;
  color: #6b7280; padding: 2px 4px 12px; font-weight: 600;
}
/* horizontal "window": each theme group is its own column, all visible at once (no scroll) */
.theme-menu__cols { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; row-gap: 16px; }
.theme-menu__col { display: flex; flex-direction: column; min-width: 146px; }
.theme-menu__grid { display: grid; grid-template-columns: 1fr; gap: 4px; align-content: start; }
.theme-menu__grid--two { grid-template-columns: 1fr 1fr; }
.theme-menu__col:has(.theme-menu__grid--two) { min-width: 300px; }
.theme-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 8px;
  border: 1px solid transparent; background: #1b1e24; cursor: pointer; text-align: left;
  color: #cdd2da; font-family: inherit; transition: border-color .14s, background .14s; position: relative;
}
.theme-opt:hover { background: #20242b; border-color: #343a44; }
.theme-opt.active { border-color: #c9a44a; background: #221d12; }
.theme-opt__sw { width: 19px; height: 19px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.theme-opt__nm { font-size: 11.5px; font-weight: 600; line-height: 1.12; }
.theme-opt__ds { display: none; }
.theme-opt br { display: none; }
.theme-menu__sec { font-size: 8.5px; letter-spacing: 0.16em; color: #5d636d; padding: 0 4px 6px; font-weight: 600; min-height: 13px; }
.theme-menu__sec--cursor { padding-top: 12px; margin-top: 12px; border-top: 1px solid #23262e; }

/* ── Stage that holds the live home screen ───────────────────────── */
.stage { background: var(--sym-bg, #f7f3ea); min-height: calc(100vh - 54px); min-height: calc(100dvh - 54px); transition: background .35s; }
#sym-home { position: relative; }

/* ── Segmented control ───────────────────────────────────────────── */
.seg { display: flex; background: #0a0b0e; border: 1px solid #23262e; border-radius: 8px; padding: 3px; gap: 3px; }
.seg button {
  flex: 1; border: 0; background: transparent; color: #9aa1ac; font-family: inherit;
  font-size: 11px; font-weight: 600; padding: 6px 4px; border-radius: 6px; cursor: pointer; transition: .14s;
}
.seg button.active { background: #2a2e37; color: #fff; }

/* ── Segmented: wrapping (cursor picker) ── */
.seg--wrap { flex-wrap: wrap; }
.seg--wrap button { flex: 1 1 44%; }

/* ── Theme picker: locked / unlockable ── */
.theme-opt { position: relative; }
.theme-opt--locked .theme-opt__sw { filter: grayscale(.4) brightness(.92); }
.theme-opt--locked .theme-opt__nm { color: #aeb4bd; }
.theme-opt__lock { position: absolute; right: 7px; top: 7px; font-size: 10px; opacity: .7; }
.theme-opt.unlocking { border-color: #e8c766; box-shadow: 0 0 0 1px #e8c766, 0 0 18px rgba(232,199,102,.5); }
.theme-opt__price { position: absolute; right: 7px; top: 7px; font-size: 9px; font-weight: 700; letter-spacing: .02em; color: #e0b24c; background: rgba(224,178,76,.12); border: 1px solid rgba(224,178,76,.4); border-radius: 999px; padding: 1px 6px; }
.theme-opt--locked .theme-opt__sw { filter: grayscale(.4) brightness(.92); }
.theme-opt.shake { animation: theme-shake .42s; }
@keyframes theme-shake { 0%,100%{transform:none} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ════════════════════════════════════════════════════════════════════
   REIMAGINED CURSOR — accent ring + themed glyph (laurel / stylus / owl)
   ════════════════════════════════════════════════════════════════════ */
body.symc-on .stage, body.symc-on .stage * { cursor: none !important; }
#symc-ring, #symc-glyph { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 100000; opacity: 0; }
body.symc-show #symc-ring, body.symc-show #symc-glyph { opacity: 1; }
/* While a Ver1 game overlay is open, the custom stage cursor (z-index 100000)
   would float over the game and the native pointer would be hidden, making
   in-game controls unusable. Suppress the custom cursor + mouse-FX trail and
   restore the native cursor for the duration of the game. */
body.syn-game-open #symc-ring,
body.syn-game-open #symc-glyph,
body.syn-game-open #sym-mousefx { display: none !important; }
body.syn-game-open.symc-on .stage,
body.syn-game-open.symc-on .stage * { cursor: auto !important; }
.game-overlay, .game-overlay * { cursor: auto; }
#symc-ring { transition: opacity .25s; }
#symc-ring .rc { display: block; width: 38px; height: 38px; margin: -19px 0 0 -19px; color: color-mix(in srgb, var(--terra) 62%, transparent); transition: transform .2s; }
#symc-ring .rc svg { display: block; width: 100%; height: 100%; }
/* Hover feedback = the ring grows + takes the accent colour. No box fill:
   `.rc` is a square 38×38 element (no border-radius), so a background here
   painted a square behind the circular cursor over any interactive element. */
#symc-ring.hot .rc { transform: scale(1.7); color: var(--terra); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
#symc-glyph { color: var(--terra); transition: opacity .25s; }
#symc-glyph svg { position: absolute; width: 22px; height: 22px; left: -11px; top: -11px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); transition: transform .2s; }
#symc-ring.hot ~ #symc-glyph svg { transform: scale(.78) rotate(-8deg); }

/* ── Theme panel: cursor picker ── */
.theme-menu__cursors { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-menu__cursors .cursor-opt { flex: 0 0 auto; }
.cursor-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; border: 1px solid transparent; background: #1b1e24; cursor: pointer; color: #cdd2da; font-family: inherit; text-align: left; }
.cursor-opt:hover { background: #20242b; border-color: #343a44; }
.cursor-opt.active { border-color: #c9a44a; background: #221d12; }
.cursor-opt__gl { width: 20px; height: 20px; flex: none; color: #c9a44a; display: flex; align-items: center; justify-content: center; }
.cursor-opt__gl svg { width: 100%; height: 100%; }
.cursor-opt__gl--sys { font-size: 14px; }
.cursor-opt__nm { font-size: 11.5px; font-weight: 600; }
.cursor-opt { position: relative; }
.cursor-opt.locked .cursor-opt__nm { color: #9aa0aa; }
.cursor-opt__price { font-size: 8px; font-weight: 700; color: #e0b24c; background: rgba(224,178,76,.12); border: 1px solid rgba(224,178,76,.4); border-radius: 999px; padding: 0 4px; }
.cursor-opt.premium { border-color: rgba(224,178,76,.5); }
.cursor-opt.premium .cursor-opt__gl { color: #e8c766; }
.cursor-opt.shake { animation: theme-shake .42s; }

/* SymLoader — branded loading overlay */
.sym-loader { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; background: color-mix(in srgb, #0a0a0c 62%, transparent); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.sym-loader.on { opacity: 1; pointer-events: auto; }
.sym-loader__box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sym-loader__mark { width: 60px; height: 60px; color: #f1e9d6; animation: sym-spin 1.1s cubic-bezier(.5,.1,.5,.9) infinite; }
.sym-loader__svg { width: 100%; height: 100%; }
.sym-loader__txt { font-family: var(--disp,'Oswald',sans-serif); font-weight: 600; font-size: 11px; letter-spacing: .2em; color: #cdd2da; }
@keyframes sym-spin { to { transform: rotate(360deg); } }

/* ── Theme menu: seasonal badges ── */
.theme-menu__sec { display: flex; align-items: center; gap: 8px; }
.theme-menu__now { margin-left: auto; font-size: 8.5px; letter-spacing: .12em; color: #e0b24c; font-weight: 700; }
.theme-opt__now { position: absolute; right: 7px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #e0b24c; box-shadow: 0 0 8px #e0b24c; }

/* ── Seasonal effects (GSAP-positioned; CSS fallback for --css) ── */
.season-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 56; }
.season-p { position: absolute; top: 0; left: 0; line-height: 1; will-change: transform; }
.season-p--css { top: -6%; opacity: 0; animation: season-fall var(--dur,10s) linear var(--delay,0s) infinite; }
@keyframes season-fall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  8% { opacity: .85; } 92% { opacity: .85; }
  100% { transform: translate3d(var(--drift,20px), 110vh, 0) rotate(var(--rot,200deg)); opacity: 0; }
}
.season-fx--christmas .season-p { color: #cfe6ff; text-shadow: 0 0 6px rgba(255,255,255,.6); }
.season-fx--carnival .season-p { color: #E3BB4B; }
.season-fx--carnival .season-p:nth-child(3n) { color: #D4499A; }
.season-fx--carnival .season-p:nth-child(3n+1) { color: #5E73D6; }
@media (prefers-reduced-motion: reduce) { .season-fx { display: none; } }
#cosmetic-fx { z-index: 54; }
#throw-fx { z-index: 99998; }
#throw-fx .throw-p { will-change: transform, opacity; text-shadow: 0 0 8px currentColor; }

/* circle cursor: hide glyph, keep ring */
body.symc-ringonly #symc-glyph { display: none; }
body.symc-noshape #symc-ring { display: none; }
body.symc-noicon #symc-glyph { display: none; }
#symc-glyph svg { color: var(--terra); }
body.symc-season #symc-ring .rc { color: var(--gold); }

/* ════════════════════════════════════════════════════════════════════
   THEMED SCROLLBARS — one look, everywhere
   ────────────────────────────────────────────────────────────────────
   Every scrollable region (shell, game overlays, theory panels, level
   pickers) used the raw OS scrollbar, which reads as a foreign grey slab
   on the brand surfaces. These rules key the bar to the ACTIVE theme's
   tokens, so it flips with the palette exactly like the rest of the UI.
   Fallbacks keep it sane before a theme class lands on <body>.
   ════════════════════════════════════════════════════════════════════ */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sym-terra, #2E7BB5) 46%, transparent) transparent;
}
body, body * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sym-terra, #2E7BB5) 46%, transparent) transparent;
}

/* WebKit / Blink */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--sym-fg, #1E1810) 5%, transparent);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sym-terra, #2E7BB5) 42%, transparent);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  transition: background .18s;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--sym-terra, #2E7BB5) 74%, transparent);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Compact variant for dense inner panels (level rails, lesson chapter nav) */
.sym-scroll-slim { scrollbar-width: thin; }
.sym-scroll-slim::-webkit-scrollbar { width: 8px; height: 8px; }
.sym-scroll-slim::-webkit-scrollbar-thumb { border-width: 2px; }

/* ══════════════════════════════════════════════════════════════════════
   READING-THEME SWITCHER (js/study-theme.js)
   Top-right of every Θεωρία / μελέτη panel: ☀ light · ☾ dark · ◐ site.
   Theme-token driven, so it reads correctly on whichever surface it is
   currently sitting on.
   ══════════════════════════════════════════════════════════════════════ */
.sym-stheme {
  position: fixed; top: 18px; right: 72px; z-index: 12;
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sym-bg-panel, #fff) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--sym-fg, #1E1810) 14%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.45);
}
.sym-stheme--inline { position: static; }
.sym-stheme__b {
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--sym-fg-muted, #8C7F6B);
  font-size: 14px; line-height: 1; transition: .16s;
}
.sym-stheme__b:hover { color: var(--sym-fg, #1E1810); background: color-mix(in srgb, var(--sym-fg, #1E1810) 7%, transparent); }
.sym-stheme__b.on {
  background: var(--sym-terra-dk, #205C8C); color: #fff;
  box-shadow: 0 3px 10px -4px var(--sym-terra, #2E7BB5);
}
@media (max-width: 720px) {
  .sym-stheme { top: 12px; right: 58px; padding: 2px; }
  .sym-stheme__b { width: 27px; height: 27px; font-size: 13px; }
}