/* ════════════════════════════════════════════════════════════════════
   SymposiON — Home Revamp · PROTOTYPE HARNESS
   The dark control chrome that hosts the live home screen. This is NOT
   part of the design — it's the comparison shell (direction switcher,
   theme picker, language, tweaks).
   ════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #0c0d10;
  font-family: 'Montserrat', 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;
}

/* ── Harness bar ─────────────────────────────────────────────────── */
.harness {
  /* Retired: the dev "themes/tweaks" top bar is hidden in production. Theme +
     colour selection now lives in the main nav (next to Ἀγορά). The node still
     builds for admins (so window.symApplyTheme stays defined) but never shows. */
  display: none !important;
  position: sticky; top: 0; z-index: 9000;
  align-items: center; gap: 18px;
  height: 54px; padding: 0 16px;
  background: linear-gradient(#16181d, #101216);
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.4);
  color: #cdd2da;
  font-size: 13px;
}
.harness__brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; letter-spacing: 0.02em; color: #eef1f5; white-space: nowrap;
}
.harness__brand svg { width: 20px; height: 20px; color: #c9a44a; }
.harness__brand b { color: #fff; font-weight: 700; }
.harness__brand small {
  color: #6b7280; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; font-size: 9.5px; padding-left: 9px; margin-left: 3px;
  border-left: 1px solid #2a2e36;
}
.harness__spacer { flex: 1; }

/* ── Direction segmented switcher ────────────────────────────────── */
.dirswitch {
  display: flex; align-items: stretch; gap: 3px;
  background: #0a0b0e; border: 1px solid #23262e; border-radius: 11px; padding: 3px;
}
.dirswitch__btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 5px 14px 6px; border: 0; background: transparent; cursor: pointer;
  border-radius: 8px; color: #9aa1ac; font-family: inherit; line-height: 1.1;
  transition: background .18s, color .18s;
}
.dirswitch__btn:hover { color: #d7dce3; }
.dirswitch__btn .k { font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.65; }
.dirswitch__btn .n { font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; }
.dirswitch__btn.active {
  background: linear-gradient(#2a2e37, #20242c); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.4);
}
.dirswitch__btn.active .k { color: #c9a44a; opacity: 1; }

/* ── Generic harness controls ────────────────────────────────────── */
.hctl {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  background: #181b21; border: 1px solid #272b33; border-radius: 8px;
  color: #c4cad2; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s; white-space: nowrap;
}
.hctl:hover { border-color: #3a404a; color: #eef1f5; }
.hctl.on { border-color: #c9a44a; color: #f1e2bd; background: #221d12; }
.hctl__dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); }
.hctl svg { width: 15px; height: 15px; }

.hlang { display: inline-flex; background: #0a0b0e; border: 1px solid #272b33; border-radius: 8px; overflow: hidden; }
.hlang button {
  border: 0; background: transparent; color: #7e8590; font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 7px 11px; cursor: pointer;
}
.hlang button.active { background: #2a2e37; color: #fff; }

/* ── Theme picker popover ────────────────────────────────────────── */
.hpop { position: relative; }
.theme-menu {
  position: absolute; top: calc(100% + 9px); right: 0;
  width: max-content; max-width: min(1320px, 97vw); max-height: 90vh; 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; text-transform: uppercase;
  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; text-transform: uppercase; 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); transition: background .35s; }
#sym-home { position: relative; }

/* ── Tweaks panel ────────────────────────────────────────────────── */
.tweaks {
  position: fixed; top: 66px; right: 14px; z-index: 9400; width: 252px;
  background: #14161b; border: 1px solid #2a2e36; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55); color: #cdd2da; overflow: hidden;
  opacity: 0; transform: translateX(12px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.tweaks.open { opacity: 1; transform: none; pointer-events: auto; }
.tweaks__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #23262e;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: #eef1f5;
}
.tweaks__hd button { border: 0; background: transparent; color: #757b86; cursor: pointer; font-size: 16px; line-height: 1; }
.tweaks__body { padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 14px; }
.tweak { display: flex; flex-direction: column; gap: 7px; }
.tweak__lbl { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a9099; font-weight: 600; }
.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; }

@media (max-width: 1024px) {
  .dirswitch__btn .k { display: none; }
  .harness__brand small { display: none; }
}
@media (max-width: 720px) {
  .harness { gap: 10px; overflow-x: auto; }
  .tweaks { display: none; }
}

/* ── Tweaks: wrapping segmented (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%; }
#symc-ring.hot .rc { transform: scale(1.55); color: var(--terra); transition: transform .8s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s; }
#symc-ring.hot .rc { transform: scale(1.7); border-color: var(--terra); background: var(--terra-soft); }
#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; text-transform: uppercase; 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; text-transform: uppercase; 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); }