/* ════════════════════════════════════════════════════════════════════
   DIRECTION ★ — "SYNTHESIS" · monumental hero + playful chrome
   ════════════════════════════════════════════════════════════════════ */
.dir-synthesis {
  --disp: 'Oswald', 'Alegreya Sans', sans-serif;
  --sans: 'Alegreya Sans', system-ui, sans-serif;
  --serif: 'Alegreya', Georgia, serif;
  --pad: clamp(18px, 5vw, 78px);
  background:
    radial-gradient(1200px 560px at 82% -10%, var(--terra-soft), transparent 58%),
    radial-gradient(820px 460px at 2% 6%, var(--gold-soft), transparent 52%),
    var(--bg);
  color: var(--fg); font-family: var(--sans);
}
.dir-synthesis.density-compact { --pad: clamp(16px, 3.5vw, 54px); }

/* ── NAV (playful pill) ── */
/* Nav sits near the top now that the dev harness is hidden; taller + roomier so
   the brand, links, theme picker and action icons don't feel stacked. */
/* z-index 60 now genuinely wins: #site-banners-wrap dropped from 1100 to 40
   and stopped being sticky, so the pinned pill is never parked under it
   (F-021). Everything that must sit ABOVE the nav — overlays, modals,
   loaders — lives at 4000+. */
.syn-nav { padding: 14px var(--pad) 10px; position:sticky; top:0; z-index:60; }
/* Opaque backdrop strip so scrolled content never bleeds through the floating
   pill or its surrounding gaps — the nav reads as a clean fixed header. At the
   page top it matches the background (invisible); on scroll it masks content. */
.syn-nav::before {
  content:''; position:absolute; left:0; right:0; top:0; bottom:0;
  background:linear-gradient(var(--bg) 62%, color-mix(in srgb, var(--bg) 55%, transparent) 86%, transparent);
  z-index:-1; pointer-events:none;
}
.syn-nav__in {
  /* flex-wrap is the overflow guard of last resort: if a long display
     name or a future button still overruns the pill, the action row
     drops to a second line INSIDE the pill instead of giving the whole
     page 291px of horizontal scroll (F-020). */
  display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-width:0;
  background:color-mix(in srgb, var(--card) 95%, transparent); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:999px; padding:13px 16px 13px 26px;
  box-shadow:0 10px 30px var(--shadow);
}
.syn-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); }
.syn-brand__mark { width:28px; height:28px; color:var(--fg); }
.syn-brand__wm { font-weight:800; font-size:19px; letter-spacing:-.01em; }
.syn-brand__wm span { color:var(--terra); }
.syn-nav__links { display:flex; align-items:center; gap:7px; margin-left:8px; flex:1 1 auto; min-width:0; flex-wrap:wrap; }
.syn-nav__lnk { font-size:13.5px; font-weight:600; color:var(--fg-70); text-decoration:none; padding:8px 11px; border-radius:999px; transition:.16s; }
.syn-nav__lnk:hover { background:var(--sink); color:var(--fg); }
.syn-nav__lnk.active { background:var(--terra-soft); color:var(--terra-dk); }
/* Agora link — distinct, glowing, with an icon */
.syn-nav__lnk--agora { display:inline-flex; align-items:center; gap:6px; color:var(--gold); background:var(--gold-soft); border:1px solid color-mix(in srgb,var(--gold) 32%, transparent); box-shadow:0 0 10px color-mix(in srgb,var(--gold) 26%, transparent); }
.syn-nav__lnk--agora.active { color:var(--gold); }
.syn-nav__ico { width:15px; height:15px; display:inline-block; color:currentColor; } .syn-nav__ico svg { width:100%; height:100%; display:block; }
@media (prefers-reduced-motion: no-preference){ .syn-nav__lnk--agora { animation: syn-agora-glow 2.6s ease-in-out infinite; } }
@keyframes syn-agora-glow {
  0%,100% { box-shadow: 0 0 0 1px color-mix(in srgb,var(--gold) 26%, transparent), 0 0 5px color-mix(in srgb,var(--gold) 18%, transparent); }
  50%     { box-shadow: 0 0 0 1px color-mix(in srgb,var(--gold) 55%, transparent), 0 0 14px color-mix(in srgb,var(--gold) 46%, transparent); }
}
/* Promo panel — reverse coloring so it stands out from the showcase beside it */
.syn-classes__showw .syn-promo { background:linear-gradient(155deg, var(--terra-dk), var(--terra)); border-color:transparent; color:#fff; box-shadow:0 14px 34px color-mix(in srgb,var(--terra) 30%, transparent); }
.syn-classes__showw .syn-promo .syn-promo__kick { color:color-mix(in srgb,#fff 82%, transparent); }
.syn-classes__showw .syn-promo .syn-promo__ttl,
.syn-classes__showw .syn-promo .syn-promo__desc { color:#fff; }
.syn-classes__showw .syn-promo .syn-promo__artillu { color:#fff; }
.syn-classes__showw .syn-promo .syn-promo__cta { background:#fff; color:var(--terra-dk); }
.syn-classes__showw .syn-promo .syn-promo__cta:hover { background:color-mix(in srgb,#fff 88%, var(--gold)); }
.syn-classes__showw .syn-promo .syn-promo__dot { background:color-mix(in srgb,#fff 38%, transparent); }
.syn-classes__showw .syn-promo .syn-promo__dot.on { background:#fff; }
.syn-nav__act { display:flex; align-items:center; gap:9px; min-width:0; }

/* ── Theme / colours picker in the nav (next to Ἀγορά) ── */
.syn-theme { position:relative; display:inline-flex; }
.syn-theme__btn { display:inline-flex; align-items:center; gap:6px; background:var(--sink); border:1px solid var(--line); border-radius:999px; padding:6px 10px; cursor:pointer; color:var(--fg); transition:.16s; }
.syn-theme__btn:hover { border-color:var(--terra); }
.syn-theme__sw { width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.syn-theme__cv { font-size:10px; opacity:.6; }
.syn-theme__menu { position:absolute; top:calc(100% + 10px); right:0; width:min(95vw, 1160px); max-height:min(85vh, 760px); overflow-y:auto; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 50px var(--shadow); padding:16px; display:none; z-index:60; }
.syn-theme.open .syn-theme__menu { display:block; }
.syn-theme__sec { font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--fg-50); margin:10px 2px 6px; }
.syn-theme__sec:first-child { margin-top:2px; }
.syn-theme__grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(136px, 1fr)); gap:8px; }
.syn-theme__opt { display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:10px; border:1px solid transparent; background:var(--sink); cursor:pointer; color:var(--fg); text-align:left; font-family:inherit; }
.syn-theme__opt:hover { border-color:var(--line-bold); }
.syn-theme__opt.on { border-color:var(--terra); background:var(--terra-soft); }
.syn-theme__optsw { width:20px; height:20px; flex:none; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.syn-theme__optnm { font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* N-06 — κλειδωμένο θέμα: ίδια γλώσσα με τον κλειδωμένο δείκτη από κάτω
   (.syn-theme__curopt.locked / .syn-theme__curprice), ώστε το μενού να λέει
   το ίδιο πράγμα με τον ίδιο τρόπο σε δύο σειρές. */
.syn-theme__opt { position:relative; }
.syn-theme__opt.locked { opacity:.55; }
.syn-theme__opt.locked .syn-theme__optnm { padding-right:34px; }
.syn-theme__optprice { position:absolute; top:50%; right:6px; transform:translateY(-50%); font-size:9px; font-weight:700; color:var(--fg-50); letter-spacing:.02em; pointer-events:none; }
.syn-theme__opt.shake { animation:synShake .42s; }
.syn-theme__lang { display:flex; gap:6px; }
.syn-theme__lang button { flex:1; padding:7px 0; border-radius:9px; border:1px solid var(--line); background:var(--sink); color:var(--fg-70); font-weight:700; font-size:12px; cursor:pointer; letter-spacing:.06em; }
.syn-theme__lang button.on { border-color:var(--terra); background:var(--terra-soft); color:var(--terra-dk); }
/* cursor picker (shape + icon) inside the theme menu */
.syn-theme__cur { display:grid; grid-template-columns:repeat(auto-fill, minmax(52px, 1fr)); gap:6px; margin:0 0 2px; }
.syn-theme__curopt { position:relative; display:grid; place-items:center; aspect-ratio:1; border:1px solid var(--line); border-radius:10px; background:var(--sink); color:var(--terra); cursor:pointer; padding:0; transition:border-color .15s, box-shadow .15s; }
.syn-theme__curopt:hover { border-color:var(--line-bold); }
.syn-theme__curopt.on { border-color:var(--terra); box-shadow:inset 0 0 0 1.5px var(--terra); }
.syn-theme__curopt.locked { opacity:.55; }
.syn-theme__curgl { width:22px; height:22px; display:grid; place-items:center; font-size:14px; line-height:1; color:var(--fg-50); }
.syn-theme__curopt .syn-theme__curgl svg { width:100%; height:100%; display:block; }
.syn-theme__curprice { position:absolute; bottom:1px; right:3px; font-size:8px; font-weight:700; color:var(--fg-50); }
.syn-theme__curopt.shake { animation:synShake .42s; }
@keyframes synShake { 10%,90%{transform:translateX(-1px)} 30%,70%{transform:translateX(2px)} 50%{transform:translateX(-2px)} }
/* NOTE — there is no responsive rule for .syn-theme__menu, deliberately.
   dir-synthesis.js `placeMenu()` owns its geometry at every width: it
   sizes to min(1160px, 100vw − 24px), right-aligns to the button and
   then clamps inside a 12px gutter, re-running on resize/scroll. The
   `@media (max-width: 880px)` rule that used to live here was already
   dead code — every property it set (position/left/right/width) is
   overwritten by an inline style the moment the menu opens. Verified
   open inside the nav drawer at 360 · 480 · 768 · 1024 · 1280: 0px of
   page overflow, menu fully on screen. (F-006 · F-020) */
/* ── "Σύντομα" / "Κλειδωμένο" tile badges — F-019 escape hatch ──────────
   These two badges are built in js/dir-synthesis.js (soonBadge / lockBadge)
   with their whole treatment in an INLINE style attribute, uppercase
   included — so «Σύντομα» rendered «ΣΥΝΤΟΜΑ» and «Κλειδωμένο» rendered
   «ΚΛΕΙΔΩΜΕΝΟ», tonos gone. An inline style can only be overridden with
   !important, hence the shape of this rule. The badges' own inline
   letter-spacing (.09em) already carries the small/wide look, so nothing
   else is needed here.

   THE REAL FIX is one word in js/dir-synthesis.js (drop
   `text-transform:uppercase;` from both style strings, lines ~35 and ~86)
   — that file belongs to another agent this round, so this rule holds the
   line until then. Delete it when the JS is fixed. */
.syn-soon-badge, .syn-lock-badge { text-transform: none !important; }

/* ── F-019 escape hatch, part 2: uppercase authored INSIDE JS ───────────
   Four more Greek labels are uppercased from JavaScript — three from
   injected <style> blocks, one from an inline style attribute — in files
   that belong to other agents this round. Each renders real Greek and
   loses its tonos:

     .sc-tutor__who   js/ai-tutor.js:60             «Βοηθός» → «ΒΟΗΘΟΣ»
     .sym-hv-ttl      js/human-verify.js:93         «Επαλήθευση»
     .ax-ai h4        js/autoelegxos-ui.js:265      «Ενδεικτική κρίση …»
     .tp-group        js/latin-texts-launchers.js:218  «Ενότητες 1–15»

   An injected <style> lands after this file, and an inline style beats
   any stylesheet, so !important is the only lever CSS has. Each of these
   already carries its own letter-spacing, so nothing else is needed.

   THE REAL FIX is deleting `text-transform:uppercase` at those four
   lines. Delete this block when that lands.

   NOT covered here, because they carry no class to aim at — report them
   to their owners: the second tutor label (js/ai-tutor.js:89, a classless
   span) and the four Live-Arena category headers written with
   `hdr.style.cssText` (js/live-arena.js:1058 · 1123 · 1296 · 1396). */
.sc-tutor__who,
.sym-hv-ttl,
.ax-ai h4,
#latin-textpicker-overlay .tp-group { text-transform: none !important; }

.syn-live { display:inline-flex; align-items:center; gap:6px; background:var(--gold-soft); color:var(--gold); border:0; font-family:var(--sans); font-weight:700; font-size:13px; padding:9px 15px; border-radius:999px; cursor:pointer; }
.syn-btn { font-family:var(--sans); font-weight:700; font-size:13.5px; padding:10px 15px; border-radius:999px; cursor:pointer; border:0; transition:.16s; }
.syn-btn--ghost { background:transparent; color:var(--fg); }
.syn-btn--ghost:hover { background:var(--sink); }
.syn-btn--solid { background:var(--terra-dk); color:#fff; box-shadow:0 6px 18px var(--terra-soft); }
.syn-btn--solid:hover { transform:translateY(-1px); }
/* cluster is transparent on desktop (children sit directly in the bar); becomes a drawer on mobile */
.syn-nav__cluster { display:contents; }
.syn-burger { display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:44px; height:44px; margin-left:auto; padding:0; border:1px solid var(--line); border-radius:13px; background:var(--sink); cursor:pointer; flex:none; }
.syn-burger:hover { border-color:var(--terra); }
.syn-burger__b { display:block; width:18px; height:2px; background:var(--fg); border-radius:2px; transition:transform .22s ease, opacity .18s ease; }
.syn-nav.is-open .syn-burger__b:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.syn-nav.is-open .syn-burger__b:nth-child(2){ opacity:0; }
.syn-nav.is-open .syn-burger__b:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ── HERO (monumental + playful CTAs) ── */
.syn-hero { position:relative; display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px,5vw,68px); align-items:stretch; padding:clamp(40px,6vw,82px) var(--pad) clamp(30px,4vw,52px); }
.syn-hero__l, .syn-hero__r { position:relative; z-index:1; }
/* ancient-greek meander frame — runs the FULL height down each outer edge,
   wrapping the page περιφεριακά like a border */
.syn-hero__deco { position:absolute; top:0; bottom:0; height:auto; transform:none; display:flex; opacity:.26; pointer-events:none; z-index:0; }
.syn-hero__deco--l { left:0; }
.syn-hero__deco--r { right:0; }
.syn-mdr { width:26px; height:100%;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='60'%20viewBox='0%200%2040%2060'%20fill='none'%20stroke='%23C9A44A'%20stroke-width='2'%3E%3Cpath%20d='M0%2050L0%2014L30%2014L30%2038L14%2038L14%2026L22%2026L22%2032'/%3E%3Cline%20x1='0'%20y1='54'%20x2='40'%20y2='54'%20stroke-width='1.4'/%3E%3Cline%20x1='0'%20y1='10'%20x2='40'%20y2='10'%20stroke-width='1.4'/%3E%3C/svg%3E") repeat-y left top/100% auto;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); }
.syn-hero__deco--r .syn-mdr { transform:scaleX(-1); }
.orn-subtle .syn-hero__deco { display:none; }
.syn-hero__ix { display:flex; align-items:center; gap:11px; font-family:var(--disp); font-weight:500; font-size:13px; letter-spacing:.18em; color:var(--muted); margin-bottom:20px; }
.syn-hero__no { color:var(--terra); } .syn-hero__sl { color:var(--line-bold); }
.syn-hero__h1 { font-family:var(--disp); font-weight:600; font-size:clamp(46px,7.2vw,92px); line-height:.93; letter-spacing:.005em; margin:0 0 24px; }
.syn-line { display:block; overflow:hidden; }
.syn-word { display:inline-block; }
.syn-word.accent { color:var(--terra); }
.syn-hero__lede { font-family:var(--serif); font-size:clamp(16px,1.5vw,20px); line-height:1.55; color:var(--fg-70); max-width:30em; margin:0 0 28px; }
.syn-hero__cta { display:flex; gap:13px; flex-wrap:wrap; }
.syn-cta { font-family:var(--sans); font-weight:700; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px; border:0; }
.syn-cta--solid { background:var(--terra-dk); color:#fff; box-shadow:0 10px 28px var(--terra-soft); will-change:transform; }
.syn-cta--solid:hover { box-shadow:0 16px 36px var(--terra-soft); }
.syn-cta__ar { transition:transform .18s; } .syn-cta--solid:hover .syn-cta__ar { transform:translateX(4px); }
.syn-cta--ghost { background:var(--card); color:var(--fg); border:1.5px solid var(--line-bold); }
.syn-cta--ghost:hover { border-color:var(--terra); color:var(--terra-dk); }
.syn-cta__play { font-size:11px; }
.syn-hero__strip { grid-column:1 / -1; display:flex; flex-wrap:nowrap; gap:8px; margin-top:10px; padding-top:20px; border-top:1px solid var(--line); overflow-x:auto; scrollbar-width:thin; }
.syn-hero__strip .syn-chiplet { flex:none; }
.syn-chiplet { font-family:var(--disp); font-weight:400; font-size:11px; letter-spacing:.1em; color:var(--muted); border:1px solid var(--line); padding:5px 12px; border-radius:999px; }

/* spec card */
.syn-hero__r { position:relative; display:flex; align-items:stretch; justify-content:center; }
.syn-spec { position:relative; width:min(100%,420px); height:100%; min-height:460px; background:var(--raise); border:1px solid var(--line-bold); border-radius:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:30px; overflow:hidden; }
.syn-spec__glow { position:absolute; width:70%; height:50%; top:6%; background:radial-gradient(circle, var(--terra-soft), transparent 70%); filter:blur(10px); }
.syn-spec__illu { width:46%; color:color-mix(in srgb,var(--fg) 84%,var(--terra)); position:relative; z-index:1; }
.syn-spec__illu svg { width:100%; height:100%; }
.syn-spec__t { position:absolute; width:12px; height:12px; border:2px solid var(--terra); z-index:2; }
.syn-spec__t--tl{ top:12px; left:12px; border-right:0; border-bottom:0; } .syn-spec__t--tr{ top:12px; right:12px; border-left:0; border-bottom:0; }
.syn-spec__t--bl{ bottom:12px; left:12px; border-right:0; border-top:0; } .syn-spec__t--br{ bottom:12px; right:12px; border-left:0; border-top:0; }
.syn-spec__rows { width:100%; display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; }
.syn-spec__row { display:flex; align-items:center; gap:10px; font-family:var(--disp); }
.syn-spec__k { font-size:11px; letter-spacing:.14em; color:var(--muted); }
.syn-spec__dot { flex:1; height:1px; background:var(--line); }
.syn-spec__v { font-size:13px; letter-spacing:.04em; color:var(--fg); }
.syn-rail { position:absolute; right:-12px; top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:right center; width:188px; height:30px; opacity:.5;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='60'%20viewBox='0%200%2040%2060'%20fill='none'%20stroke='%23C9A44A'%20stroke-width='2'%3E%3Cpath%20d='M0%2050L0%2014L30%2014L30%2038L14%2038L14%2026L22%2026L22%2032'/%3E%3Cline%20x1='0'%20y1='54'%20x2='40'%20y2='54'%20stroke-width='1.4'/%3E%3Cline%20x1='0'%20y1='10'%20x2='40'%20y2='10'%20stroke-width='1.4'/%3E%3C/svg%3E") repeat-x left center/auto 100%; }
.orn-subtle .syn-rail, .orn-subtle .syn-spec__t, .orn-subtle .syn-join__rail, .orn-subtle .syn-foot__rule { display:none; }
/* equipped profile seal, perched standing on top of the spec card — changes with the user's avatar */
/* Acroterion seal — a quiet rooftop ornament that BLENDS into the backdrop
   rather than shouting. Colour is a translucent tint of the theme foreground
   (via color-mix), so it stays a low-contrast watermark in every theme (faint
   dark on light themes, faint light on dark ones) and adapts automatically.
   It warms to terra + lifts on hover so it's still clearly interactive. */
.syn-spec__owl { position:absolute; top:0; left:50%; width:74px; height:74px; transform:translate(-50%,-80%); color:color-mix(in srgb, var(--fg) 24%, transparent); z-index:4; padding:0; border:0; background:none; cursor:pointer; filter:drop-shadow(0 2px 5px color-mix(in srgb, var(--fg) 12%, transparent)); transition:transform .2s ease, color .2s ease, filter .2s ease; }
.syn-spec__owl:hover { transform:translate(-50%,-86%) scale(1.06); color:var(--terra); filter:drop-shadow(0 6px 12px rgba(0,0,0,.28)); }
.syn-spec__owl svg { width:100%; height:100%; display:block; }

/* ── CLASS CHIPS ── */
.syn-classes { padding:8px var(--pad) clamp(8px,2vw,16px); }
.syn-classes__lbl { display:flex; align-items:center; gap:13px; font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--muted); margin-bottom:14px; }
.syn-classes__ln { width:40px; height:2px; background:var(--terra); }
.syn-classes__row { display:flex; flex-wrap:wrap; gap:11px; }
.syn-chip { display:inline-flex; align-items:center; gap:10px; padding:9px 18px 9px 9px; border-radius:999px; border:2px solid var(--ca-mid); background:var(--card); cursor:pointer; font-family:var(--sans); color:var(--fg); transition:transform .16s, box-shadow .16s, background .16s; }
.syn-chip:hover { transform:translateY(-2px); box-shadow:0 8px 20px var(--shadow); }
.syn-chip__rom { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--ca-soft); color:var(--ca-ink); font-family:var(--disp); font-weight:600; font-size:13px; }
.syn-chip__nm { font-weight:700; font-size:14px; }
.syn-chip.active { background:var(--ca); border-color:var(--ca); box-shadow:0 10px 24px var(--ca-mid); }
.syn-chip.active .syn-chip__rom { background:rgba(255,255,255,.25); color:#fff; }
.syn-chip.active .syn-chip__nm { color:#fff; }

/* grouped chips — three side-by-side columns w/ dividers BETWEEN them */
.syn-classes__lbl { margin-bottom:16px; }

/* section header — kicker + subtitle on the left, catalogue stats on the right */
.syn-classes__head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:20px; }
.syn-classes__lead { max-width:46ch; }
.syn-classes__lead .syn-classes__lbl { margin-bottom:9px; }
.syn-classes__hint { margin:0; font-family:var(--serif); font-size:15px; line-height:1.5; color:var(--fg-70); text-wrap:pretty; }
.syn-classes__stats { display:flex; align-items:center; gap:clamp(12px,1.6vw,20px); flex:none; }
.syn-cstat { display:flex; flex-direction:column; gap:2px; }
.syn-cstat__v { font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.6vw,30px); line-height:1; color:var(--terra-dk); letter-spacing:.01em; }
.syn-cstat__l { font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--muted); }
.syn-cstat__div { width:1px; height:34px; background:var(--line); }
@media (max-width: 600px){
  .syn-classes__head { align-items:flex-start; }
  .syn-classes__stats { gap:14px; }
  .syn-cstat__v { font-size:22px; }
}

.syn-cgroups { display:flex; align-items:stretch; justify-content:flex-start; gap:clamp(18px,2.4vw,30px); }
.syn-cgroup { display:flex; flex-direction:column; gap:9px; }
.syn-cdiv { flex:none; width:1px; align-self:stretch; background:var(--line); }
.syn-cgroup__h { font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.13em; color:var(--terra); margin-bottom:3px; }
.syn-cgroup .syn-classes__row { display:flex; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:8px; }
.syn-cgroup .syn-chip { width:auto; justify-content:flex-start; padding:6px 14px 6px 6px; gap:9px; }
.syn-cgroup .syn-chip__rom { width:24px; height:24px; font-size:12px; }
.syn-cgroup .syn-chip__nm { white-space:nowrap; font-size:13px; }
.syn-chip__rom--gl { padding:4px; } .syn-chip__rom--gl svg { width:100%; height:100%; }

/* "Build your own class" — fills the gap right of the grammar column, feels rewarding */
.syn-cadd { flex:1 1 auto; align-self:stretch; min-width:230px; display:flex; align-items:center; gap:18px; text-align:left;
  padding:20px 24px; border-radius:18px; cursor:pointer;
  background:linear-gradient(135deg, color-mix(in oklab, var(--terra) 16%, var(--raise)), var(--raise));
  border:1.5px dashed color-mix(in oklab, var(--terra) 55%, var(--line-bold));
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease, background .22s ease; }
.syn-cadd:hover { transform:translateY(-3px); border-color:var(--terra);
  background:linear-gradient(135deg, color-mix(in oklab, var(--terra) 26%, var(--raise)), var(--raise));
  box-shadow:0 16px 34px color-mix(in oklab, var(--terra) 26%, transparent); }
.syn-cadd__plus { flex:none; width:48px; height:48px; display:grid; place-items:center; border-radius:14px;
  font-family:var(--disp); font-size:30px; font-weight:300; line-height:1; color:#fff;
  background:var(--terra); box-shadow:0 8px 18px color-mix(in oklab, var(--terra) 45%, transparent); }
.syn-cadd__tx { display:flex; flex-direction:column; gap:4px; flex:1; }
.syn-cadd__h { font-family:var(--disp); font-weight:600; font-size:17px; color:var(--ink); letter-spacing:.01em; }
.syn-cadd__s { font-size:13px; line-height:1.45; color:var(--muted); }
.syn-cadd__cta { flex:none; align-self:center; font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.04em;
  color:var(--terra); padding:8px 16px; border-radius:999px; border:1.5px solid color-mix(in oklab, var(--terra) 45%, transparent);
  transition:background .18s ease, color .18s ease; }
.syn-cadd:hover .syn-cadd__cta { background:var(--terra); color:#fff; border-color:var(--terra); }
@media (max-width: 720px){
  .syn-cgroups { flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px; }
  .syn-cdiv { display:none; }
  .syn-cgroup .syn-classes__row { flex-direction:row; flex-wrap:wrap; }
}

/* ── SUBJECT BLOCKS (rounded card + module header) ── */
.syn-subjects { padding:clamp(20px,3vw,34px) var(--pad) 8px; display:flex; flex-direction:column; gap:clamp(22px,3vw,38px); }
.syn-subj { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:clamp(18px,2.5vw,28px); box-shadow:0 10px 30px var(--shadow); }
.syn-subj__hd { display:flex; align-items:center; gap:15px; padding-bottom:16px; margin-bottom:18px; border-bottom:2px solid var(--ca); }
.syn-subj__no { font-family:var(--disp); font-weight:600; font-size:26px; color:var(--ca); line-height:1; }
.syn-subj__badge { display:grid; place-items:center; width:54px; height:54px; flex:none; border-radius:16px; background:var(--ca-soft); color:var(--ca-ink); }
.syn-subj__illu { width:34px; height:34px; } .syn-subj__illu svg{ width:100%; height:100%; }
.syn-subj__tx { flex:1; min-width:0; }
.syn-subj__ttl { font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.6vw,30px); letter-spacing:.02em; margin:0 0 2px; }
.syn-subj__sum { font-family:var(--serif); font-size:15px; color:var(--fg-70); margin:0; }
.syn-subj__all { display:inline-flex; align-items:center; gap:9px; flex:none; text-decoration:none; font-weight:700; font-size:13px; color:var(--ca-ink); background:var(--ca-soft); padding:9px 9px 9px 16px; border-radius:999px; white-space:nowrap; }
.syn-subj__all:hover { background:var(--ca-mid); }
.syn-subj__cnt { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--ca); color:#fff; font-size:12px; }
/* grid-auto-rows:1fr → every ROW is the same height, so a two-line title in one
   card no longer makes that whole band taller than the next one. */
.syn-subj__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); grid-auto-rows:1fr; gap:13px; }

.syn-tile { position:relative; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:18px; overflow:hidden; text-decoration:none; color:var(--fg); transition:transform .16s, box-shadow .16s, border-color .16s; }
.syn-tile:hover { transform:translateY(-4px); box-shadow:0 16px 32px var(--shadow); border-color:var(--ca-mid); }
.syn-tile__ban { display:grid; place-items:center; height:96px; background:var(--ca-tint); position:relative; overflow:hidden; }
.syn-tile__ban::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, var(--ca-soft), transparent 60%); }
.syn-tile__illu { width:54px; height:54px; color:var(--ca-ink); position:relative; z-index:1; } .syn-tile__illu svg{ width:100%; height:100%; }
.syn-tile__body { padding:13px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1 1 auto; }
.syn-tile__ban { flex:0 0 auto; }
.syn-tile__nm { font-weight:700; font-size:15px; line-height:1.15; }
.syn-tile__mt { font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--muted); }
.syn-tile__play { position:absolute; right:11px; top:84px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--ca); color:#fff; font-size:11px; padding-left:2px; box-shadow:0 6px 14px var(--ca-mid); transform:scale(.85); opacity:0; transition:.18s; }
.syn-tile:hover .syn-tile__play { transform:scale(1); opacity:1; }
/* ── auto-cycling band dots (Games Catalogue / Live) ── */
.syn-cdots { display:flex; justify-content:center; gap:8px; margin-top:18px; }
.syn-cdot { width:8px; height:8px; padding:0; border:0; border-radius:999px; cursor:pointer; background:var(--line-bold,rgba(120,110,90,.35)); opacity:.5; transition:width .2s, opacity .2s, background .2s; }
.syn-cdot:hover { opacity:.85; }
.syn-cdot.on { width:22px; opacity:1; background:var(--ca,var(--terra)); }
/* live spotlight — the auto-advancing "active" product */
.syn-tile--spot { border-color:var(--ca); box-shadow:0 0 0 2px var(--ca) inset, 0 18px 34px var(--ca-mid); }
.syn-tile--spot .syn-tile__play { opacity:1; transform:scale(1); }

/* ── ENGINES ── */
.syn-engines { padding:clamp(28px,4vw,50px) 0 clamp(18px,3vw,28px); }
.syn-engines__hd { padding:0 var(--pad); margin-bottom:16px; }
.syn-engines__no { font-family:var(--disp); font-weight:600; font-size:18px; color:var(--terra); margin-right:8px; }
.syn-engines__ttl { display:inline; font-family:var(--disp); font-weight:600; font-size:clamp(24px,3vw,34px); letter-spacing:.02em; margin:0; }
.syn-engines__sub { font-family:var(--serif); font-size:16px; color:var(--fg-70); margin:5px 0 0; }
.syn-engines__scroll { display:flex; gap:14px; overflow-x:auto; padding:6px var(--pad) 18px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.syn-eng { scroll-snap-align:start; flex:0 0 198px; background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; text-decoration:none; color:var(--fg); transition:transform .16s, box-shadow .16s; }
.syn-eng:hover { transform:translateY(-4px); box-shadow:0 16px 34px var(--shadow); }
.syn-eng__ban { display:grid; place-items:center; height:104px; background:var(--ca-tint); }
.syn-eng__illu { width:56px; height:56px; color:var(--ca-ink); } .syn-eng__illu svg{ width:100%; height:100%; }
.syn-eng__nm { display:block; font-weight:700; font-size:16px; padding:13px 15px 0; }
.syn-eng__mt { display:block; font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--muted); padding:3px 15px 16px; }

/* ── JOIN ── */
.syn-join { padding:clamp(20px,3vw,30px) var(--pad) clamp(34px,5vw,54px); }
.syn-join__card { position:relative; display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:linear-gradient(120deg, var(--terra-soft), var(--gold-soft)); border:1px solid var(--line); border-radius:26px; padding:clamp(22px,3vw,36px); overflow:hidden; }
.syn-join__rail { position:absolute; left:0; top:0; width:100%; height:20px; opacity:.3;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='60'%20viewBox='0%200%2040%2060'%20fill='none'%20stroke='%23C9A44A'%20stroke-width='2'%3E%3Cpath%20d='M0%2050L0%2014L30%2014L30%2038L14%2038L14%2026L22%2026L22%2032'/%3E%3Cline%20x1='0'%20y1='54'%20x2='40'%20y2='54'%20stroke-width='1.4'/%3E%3Cline%20x1='0'%20y1='10'%20x2='40'%20y2='10'%20stroke-width='1.4'/%3E%3C/svg%3E") repeat-x left center/auto 100%; }
.syn-join__bolt { font-size:40px; filter:saturate(1.3); }
.syn-join__tx { flex:1; min-width:200px; }
.syn-join__no { font-family:var(--disp); font-weight:500; font-size:11px; letter-spacing:.2em; color:var(--terra-dk); margin-bottom:6px; }
.syn-join__ttl { font-family:var(--disp); font-weight:600; font-size:clamp(24px,2.8vw,34px); letter-spacing:.02em; }
.syn-join__sub { font-family:var(--serif); font-size:15px; color:var(--fg-70); margin:4px 0 0; }
.syn-join__form { display:flex; gap:10px; }
.syn-join__pin { font-family:var(--sans); font-weight:800; letter-spacing:.22em; font-size:17px; text-align:center; width:168px; padding:13px 14px; border:2px solid var(--line-bold); border-radius:14px; background:var(--card); color:var(--fg); }
.syn-join__pin:focus { outline:none; border-color:var(--terra); }

/* ── FOOTER ── */
.syn-foot { padding:0 var(--pad) 26px; }
.syn-foot__rule { display:block; width:100%; height:22px; opacity:.45; margin:0 0 26px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='60'%20viewBox='0%200%2040%2060'%20fill='none'%20stroke='%23C9A44A'%20stroke-width='2'%3E%3Cpath%20d='M0%2050L0%2014L30%2014L30%2038L14%2038L14%2026L22%2026L22%2032'/%3E%3Cline%20x1='0'%20y1='54'%20x2='40'%20y2='54'%20stroke-width='1.4'/%3E%3Cline%20x1='0'%20y1='10'%20x2='40'%20y2='10'%20stroke-width='1.4'/%3E%3C/svg%3E") repeat-x left center/auto 100%; }
.syn-foot__top { display:flex; gap:clamp(28px,6vw,80px); flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--line); }
.syn-foot__brand { display:flex; gap:12px; align-items:flex-start; flex:1; min-width:230px; }
.syn-foot__mark { width:32px; height:32px; color:var(--fg); }
.syn-foot__wm { font-weight:800; font-size:20px; } .syn-foot__wm span { color:var(--terra); }
.syn-foot__tag { font-family:var(--serif); font-style:italic; color:var(--fg-70); margin:4px 0 0; font-size:14px; }
.syn-foot__col { display:flex; flex-direction:column; gap:10px; min-width:130px; }
.syn-foot__col h4 { font-size:11px; letter-spacing:.12em; color:var(--muted); margin:0 0 3px; }
.syn-foot__col a { font-size:13.5px; font-weight:500; color:var(--fg-70); text-decoration:none; cursor:pointer; } .syn-foot__col a:hover { color:var(--terra-dk); }
.syn-foot__bot { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:18px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.syn-foot__pro { background:var(--terra-dk); color:#fff; border:0; font-family:var(--sans); font-weight:700; font-size:13px; padding:10px 18px; border-radius:999px; cursor:pointer; }
.syn-foot__social { display:flex; gap:9px; margin-left:auto; margin-right:14px; }
.syn-soc { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-bold); color:var(--fg-70); transition:.16s; }
@media (pointer: coarse) {
  .syn-soc { position: relative; }
  .syn-soc::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; }
}
.syn-soc:hover { border-color:var(--terra); color:var(--terra-dk); transform:translateY(-2px); }
.syn-soc svg { width:19px; height:19px; }

/* subject marquee (rolling band) */
.syn-mq { padding:clamp(28px,4vw,50px) 0 clamp(18px,3vw,30px); overflow:hidden; }
.syn-mq__hd { display:flex; align-items:baseline; gap:8px; padding:0 var(--pad); margin-bottom:18px; }
.syn-mq__row { position:relative; overflow:hidden; padding:6px 0; -webkit-mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.syn-mq__track { display:flex; gap:13px; width:max-content; will-change:transform; }
.syn-mq__track--a { animation:mq-a 46s linear infinite; }
.syn-mq__track--b { animation:mq-b 54s linear infinite; }
.syn-mq:hover .syn-mq__track { animation-play-state:paused; }
@keyframes mq-a { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes mq-b { from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
/* Reduced-motion: the rolling band is core to the home's identity, so instead
   of dead-stopping it (which also exposed manual scrollbars) we keep the loop
   but SLOW it right down to a calm drift — motion is reduced, not removed. */
@media (prefers-reduced-motion: reduce){ .syn-mq__track--a{ animation-duration:150s; } .syn-mq__track--b{ animation-duration:170s; } .syn-mq__row{ overflow:hidden; } }
.syn-mq__card { display:flex; align-items:center; gap:13px; flex:0 0 auto; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:13px 18px 13px 13px; text-decoration:none; color:var(--fg); transition:transform .16s, box-shadow .16s, border-color .16s; }
.syn-mq__card:hover { transform:translateY(-3px); border-color:var(--ca-mid); box-shadow:0 12px 28px var(--shadow); }
.syn-mq__ic { display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:13px; background:var(--ca-tint); color:var(--ca-ink); }
.syn-mq__ic svg { width:30px; height:30px; }
.syn-mq__nm { display:block; font-family:var(--disp); font-weight:600; font-size:18px; letter-spacing:.01em; }
.syn-mq__meta { display:block; font-size:10.5px; font-weight:600; letter-spacing:.06em; color:var(--muted); margin-top:2px; }

/* accent intensity */
.dir-synthesis.accent-bold { background: radial-gradient(1200px 560px at 82% -10%, color-mix(in srgb,var(--terra) 22%, transparent), transparent 58%), radial-gradient(820px 460px at 2% 6%, var(--gold-soft), transparent 52%), var(--bg); }

@media (max-width: 940px){
  /* ── hero stacks & actually fits ── */
  .syn-hero { grid-template-columns:1fr; }
  .syn-hero__l, .syn-hero__r { min-width:0; }   /* stop grid blow-out past the viewport */
  .syn-hero__r { order:-1; }
  .syn-spec { width:min(100%,330px); height:auto; min-height:0; aspect-ratio:4/5; }
  .syn-hero__h1 { font-size:clamp(34px,8vw,72px); }

  /* tap-target + legibility polish */
  .syn-chiplet { font-size:12px; padding:6px 13px; }
  /* class-chip groups: stop flex min-content blow-out, let chips wrap */
  .syn-classes__col, .syn-cgroups, .syn-cgroup, .syn-cgroup .syn-classes__row, .syn-cgroup__h, .syn-cadd { min-width:0; max-width:100%; }
  .syn-cgroup .syn-classes__row { flex-direction:row; flex-wrap:wrap; }
}

/* ════════════════════════════════════════════════════════════════════
   NAV — where the bar stops fitting.   (F-020)
   ────────────────────────────────────────────────────────────────────
   MEASURED, not guessed. The bar's content — brand + wordmark, the
   Πλοήγηση launcher, three links, the theme picker, and an action row
   of Live / search / notifications / guide / profile / Είσοδος /
   Εγγραφή — is RIGID: `.syn-nav__links` was `flex:1 1 0%` with
   `min-width:auto`, so its floor was its min-content and nothing in the
   bar could shrink. It measured 1263px, and with the pill's 26px left
   padding plus the page's `--pad` (5vw) the full bar needed a **1357px
   viewport**.

   The burger engaged only below 940px. So every width from 941 to 1356
   painted a bar that could not fit, and the page — not the nav — took
   the overflow: 291px of horizontal scroll at 1024, 124px at 1200,
   48px at 1280. The whole tablet band scrolled sideways.

   The fix is the burger breakpoint, set to --bp-nav, plus
   ~82px shaved off the bar's spacing so it fits its own band with room:

     · gaps and horizontal paddings tightened in the BASE rules, not in
       a band — the bar now only ever renders above 1360px, so a
       separate band would have been one more breakpoint for nothing.
       Content 1263 → 1181; at 1361 there is 86px of headroom, at 1440
       there is 161px.
     · below 1360 the whole cluster becomes the drawer the phone layout
       already used.

   Why the drawer rather than shedding items: fitting 1024 would mean
   dropping the wordmark AND the Live button AND every gap for ~10px of
   headroom. The drawer keeps every item reachable at every width.

   ── B-05 · THE 1357px FIGURE WAS STALE, AND 1280 NOW FITS ──────────
   That number was measured before the base spacing was tightened here.
   Re-measured after: `.syn-nav__in` is rigid at **1150px**, which needs a
   **1269px** viewport — so a 1280-wide laptop fits the full bar with room,
   and --bp-nav came down from 1360 to 1280 (the media queries below and in
   student.css use 1279px, one below it, so 1280 gets the bar).

   And the guess that removing English would help was BACKWARDS: forced to
   English the same bar measures ~1095px, i.e. NARROWER. «Πλοήγηση ·
   Παιχνίδια · Αρχική · Ἀγορά · Είσοδος · Εγγραφή» are longer than
   «Navigation · Games · Home · Agora · Sign in · Sign up». Greek is the
   wide case, and it is the only case now.

   `flex-wrap:wrap` on `.syn-nav__in` is the belt-and-braces: if some
   future label still overruns, the action row drops to a second line
   INSIDE the pill instead of scrolling the page.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1279px){
  /* ── nav → burger + slide-down drawer ── */
  .syn-burger { display:inline-flex; }
  .syn-nav__in { gap:12px; padding:9px 12px 9px 18px; }
  .syn-nav__cluster {
    display:none; position:absolute; top:calc(100% + 9px); left:var(--pad); right:var(--pad);
    flex-direction:column; align-items:stretch; gap:10px;
    background:var(--card); border:1px solid var(--line); border-radius:18px;
    padding:14px; box-shadow:0 26px 64px var(--shadow); z-index:60; max-height:78vh; overflow:auto;
  }
  .syn-nav.is-open .syn-nav__cluster { display:flex; }
  .syn-nav__links { display:flex; flex-direction:column; gap:4px; margin:0; flex:none; }
  .syn-nav__lnk { padding:13px 14px; font-size:15px; border-radius:13px; }
  .syn-nav__lnk--agora { justify-content:flex-start; }
  .syn-nav__act { flex-direction:column; align-items:stretch; gap:8px; border-top:1px solid var(--line); padding-top:12px; }
  .syn-nav__act .syn-live, .syn-nav__act .syn-btn { width:100%; justify-content:center; padding:13px 18px; font-size:15px; min-height:46px; }
  .syn-prof { width:46px; height:46px; align-self:flex-start; }
  .syn-screens { width:100%; }
  .syn-screens__btn { width:100%; justify-content:center; min-height:46px; font-size:14px; }
  /* Screens mega-menu → an in-drawer sheet (no more off-screen overflow).
     .syn-screens ancestor added so these beat the base rule that follows in source order. */
  .syn-screens .syn-screens__menu--mega {
    display:none; position:static; width:100%; max-width:none; box-shadow:none; border:0;
    padding:8px 0 2px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; max-height:none; transform:none; transition:none;
  }
  .syn-screens .syn-screens__menu--mega.open { display:grid; opacity:1; transform:none; pointer-events:auto; }
  .syn-screens .syn-screens__menu--mega .syn-screens__item { min-width:0; }
  .syn-screens .syn-screens__menu--mega .syn-screens__item, .syn-screens__lbl { overflow-wrap:anywhere; }
  .syn-screens .syn-screens__menu--mega .syn-screens__col--tags,
  .syn-screens .syn-screens__menu--mega .syn-screens__col--t { grid-column:1 / -1; }
  /* The drawer spans the full width on a phone, but at 1000–1360 a
     full-bleed sheet is absurd — cap it and hang it off the burger. */
  .syn-nav__cluster { left:auto; width:min(calc(100% - var(--pad) * 2), 420px); }
  /* (.syn-mentor__pop / .guide-fab follow the same --bp-nav step; they
     live with the rest of the mentor widget in css/student.css.) */
}

/* ── nav: Screens launcher + profile ── */
.syn-screens { position:relative; }
.syn-screens__btn { display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:600; font-size:13px; color:var(--fg); background:var(--sink); border:1px solid var(--line); padding:8px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.syn-screens__btn:hover { border-color:var(--terra); }
.syn-screens__grid { color:var(--terra); }
.syn-screens__cv { font-size:10px; color:var(--muted); }
.syn-screens__menu { position:absolute; top:calc(100% + 9px); left:0; width:232px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px var(--shadow); padding:7px; display:grid; gap:2px; z-index:60; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .16s, transform .16s; max-height:74vh; overflow:auto; }
.syn-screens__menu.open { opacity:1; transform:none; pointer-events:auto; }
.syn-screens__item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; border:0; background:none; color:var(--fg); font-family:var(--sans); font-weight:600; font-size:13px; cursor:pointer; text-align:left; }
.syn-screens__item:hover { background:var(--sink); }
.syn-screens__item.active { background:var(--terra-soft); color:var(--terra-dk); }
.syn-screens__ico { width:20px; text-align:center; color:var(--terra); font-size:14px; }
/* mega-panel — grouped columns covering every site area */
.syn-screens__menu--mega { width:max-content; max-width:min(640px,92vw); display:grid; grid-template-columns:repeat(3,minmax(168px,1fr)); gap:6px 16px; padding:16px; }
.syn-screens__menu--mega .syn-screens__col { display:flex; flex-direction:column; gap:2px; }
.syn-screens__menu--mega .syn-screens__col--tags { grid-column:1 / -1; }
.syn-screens__lbl { font-family:var(--disp,'Oswald',sans-serif); font-weight:600; font-size:9.5px; letter-spacing:.16em; color:var(--muted); padding:6px 8px 4px; }
.syn-screens__col + .syn-screens__col .syn-screens__lbl { margin-top:0; }
.syn-screens__menu--mega .syn-screens__item { padding:7px 9px; font-size:12.5px; }
.syn-screens__tags { display:flex; flex-wrap:wrap; gap:6px; padding:2px 8px 2px; }
.syn-screens__tag { padding:5px 11px; border:1px solid var(--line-bold); border-radius:999px; background:var(--bg); color:var(--fg); font-family:var(--sans); font-weight:600; font-size:11.5px; cursor:pointer; transition:.14s; }
.syn-screens__tag:hover { border-color:var(--terra); color:var(--terra-dk); background:var(--terra-soft); }
.syn-prof { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--terra-soft); border:1px solid var(--line); cursor:pointer; padding:0; }
.syn-prof:hover { border-color:var(--terra); }
.syn-prof__av { font-family:var(--disp); font-weight:600; font-size:13px; color:var(--terra-dk); }
.syn-prof__av[data-illu] { width:24px; height:24px; } .syn-prof__av[data-illu] svg{ width:100%; height:100%; color:var(--terra-dk); }

@media (max-width: 600px){
  .syn-join__card { justify-content:center; text-align:center; }
  /* The pin field is a fixed 168px and the button ~135px; with the card's
     own padding that is 313px of content in a 305px box at 390 — 8px of
     the join button clipped by .syn-join__card's overflow:hidden. Let the
     row wrap and let the field flex instead of holding a fixed width. */
  .syn-join__form { width:100%; justify-content:center; flex-wrap:wrap; }
  .syn-join__pin { width:auto; flex:1 1 150px; min-width:0; max-width:100%; }
}

/* ════ HERO VISUAL variants ════ */
.syn-hero__l > .syn-show, .syn-hero__l > .syn-mono, .syn-hero__l > .syn-hero__min { margin: 6px 0 26px; }

/* showcase carousel */
.syn-show { position:relative; }

/* class section: groups (left) · right column keeps its original ~480px width;
   showcase + promo stacked, EACH split text-left / design-right (no wider) */
.syn-classes__split { display:grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(20px,3vw,40px); align-items:start; }
.syn-classes__col { min-width:0; }
.syn-classes__showw { min-width:0; display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(14px,1.6vw,18px); align-items:stretch; }
.syn-classes__showcase { display:flex; flex-direction:column; gap:16px; }
/* SHOWCASE — text LEFT, design RIGHT (its original landscape shape) */
.syn-classes__showw .syn-show {
  display:grid; grid-template-columns: 1fr clamp(60px,6.5vw,92px); column-gap: clamp(10px,1.1vw,16px); align-content:center; overflow:hidden;
  padding: clamp(16px,1.6vw,22px); border:1px solid var(--line-bold); border-radius:18px;
  background: linear-gradient(180deg, var(--card), var(--bg)); box-shadow: 0 12px 34px var(--shadow);
}
.syn-classes__showw .syn-show__body { grid-column:1; grid-row:1; margin-top:0; gap:6px; }
.syn-classes__showw .syn-show__try { grid-column:1; grid-row:2; align-self:start; justify-self:start; margin-top:12px; }
.syn-classes__showw .syn-show__dots { grid-column:1; grid-row:3; margin-top:12px; }
.syn-classes__showw .syn-show__art { grid-column:2; grid-row:1 / span 3; align-self:center; justify-self:center; height:clamp(70px,7.5vw,98px); width:100%; margin:0; overflow:hidden; }
.syn-classes__showw .syn-show__slide svg { max-width: 84px; }
.syn-classes__showw .syn-show__nm { font-size: clamp(18px,1.7vw,23px); }
.syn-classes__showw .syn-show__desc { font-size:13.5px; }
/* PROMO — text LEFT, design RIGHT (same landscape shape, same width) */
.syn-classes__showw .syn-promo--split { display:grid; grid-template-columns: 1fr clamp(60px,6.5vw,92px); column-gap: clamp(10px,1.1vw,16px); align-items:center; overflow:hidden; }
.syn-classes__showw .syn-promo--split .syn-promo__cta { white-space:nowrap; padding:10px 14px; font-size:12.5px; }
.syn-classes__showw .syn-promo--split .syn-promo__txt { min-width:0; display:flex; flex-direction:column; gap:12px; }
.syn-classes__showw .syn-promo--split .syn-promo__hd { gap:5px; }
.syn-classes__showw .syn-promo--split .syn-promo__cta { margin-top:2px; }
.syn-classes__showw .syn-promo--split .syn-promo__dots { margin-top:0; }
.syn-promo__art { display:grid; place-items:center; align-self:stretch; }
.syn-promo__artillu { display:block; width:100%; max-width:84px; color:var(--terra-dk); }
.syn-promo__artillu svg { width:100%; height:auto; }
@media (max-width: 940px) {
  .syn-classes__split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .syn-classes__showw { grid-template-columns: 1fr; }
  /* larger touch targets for the footer link columns on phones */
  .syn-foot__col { gap:4px; }
  .syn-foot__col a { padding-block:8px; }
}
@media (max-width: 480px) {
  .syn-classes__showw .syn-show,
  .syn-classes__showw .syn-promo--split { grid-template-columns: 1fr; }
  .syn-classes__showw .syn-show__art,
  .syn-promo__art { grid-column:1; grid-row:auto; justify-self:start; height:auto; }
  .syn-classes__showw .syn-show__body,
  .syn-classes__showw .syn-show__try,
  .syn-classes__showw .syn-show__dots { grid-column:1; grid-row:auto; }
}
.syn-show__edit { position:absolute; top:0; right:0; z-index:5; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--sage) 40%, transparent); background:color-mix(in srgb, var(--sage) 16%, var(--card)); color:var(--sage); font-family:var(--sans); font-weight:700; font-size:11.5px; cursor:pointer; box-shadow:0 4px 14px var(--shadow); transition:transform .16s, background .16s; }

/* promo card — rotating Anodos / Agora / How-to-play carousel (warm, contrasts the showcase) */
.syn-promo--carousel { gap:14px; }
.syn-promo__main { display:flex; align-items:center; gap:10px; }
.syn-promo__ico { width:30px; height:30px; flex:none; color:var(--terra-dk); }
.syn-promo__ico svg { width:100%; height:100%; }
.syn-promo__cta { display:inline-flex; align-items:center; gap:9px; align-self:flex-start; padding:11px 17px; border-radius:12px; border:0; background:var(--terra); color:#fff; font-family:var(--sans); font-weight:700; font-size:13.5px; cursor:pointer; transition:transform .15s, background .15s; }
.syn-promo__cta:hover { transform:translateY(-1px); background:var(--terra-dk); }
.syn-promo__ca { font-weight:800; }
.syn-promo__dots { display:flex; gap:7px; margin-top:auto; padding-top:4px; }
.syn-promo__dot { width:22px; height:5px; border-radius:99px; border:0; padding:0; cursor:pointer; background:color-mix(in srgb, var(--terra-dk) 24%, transparent); transition:background .18s, width .18s; }
@media (pointer: coarse) {
  .syn-promo__dot { position: relative; }
  .syn-promo__dot::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:44px; width:calc(100% + 7px); }
}
.syn-promo__dot.on { width:30px; background:var(--terra); }
.syn-promo { padding: clamp(16px,1.6vw,20px); border:1px solid var(--line-bold); border-radius:18px; background: linear-gradient(180deg, var(--terra-soft), var(--bg)); display:flex; flex-direction:column; gap:12px; }
.syn-promo__hd { display:flex; flex-direction:column; gap:5px; }
.syn-promo__kick { font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.16em; color:var(--terra-dk); }
.syn-promo__ttl { margin:0; font-family:var(--serif); font-weight:700; font-size:clamp(20px,2.1vw,26px); line-height:1.1; color:var(--fg); }
.syn-promo__desc { margin:0; font-family:var(--serif); font-size:13.5px; line-height:1.45; color:var(--fg-70); text-wrap:pretty; }
.syn-promo__row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.syn-promo__b { display:flex; align-items:center; gap:8px; padding:11px 12px; border-radius:12px; border:1.5px solid var(--line-bold); background:var(--card); color:var(--fg); font-family:var(--sans); font-weight:700; font-size:14px; cursor:pointer; transition:border-color .16s, transform .16s; }
.syn-promo__b:hover { border-color:var(--terra); transform:translateY(-1px); }
.syn-promo__bi { width:22px; height:22px; flex:none; color:var(--terra-dk); }
.syn-promo__bl { flex:1; text-align:left; }
.syn-promo__ba { color:var(--terra-dk); font-weight:800; }
.syn-promo__guides { display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:12px; border:1px dashed color-mix(in srgb, var(--terra-dk) 50%, transparent); background:transparent; color:var(--terra-dk); font-family:var(--sans); font-weight:700; font-size:13.5px; cursor:pointer; transition:background .16s; }
.syn-promo__guides:hover { background:var(--terra-soft); }
.syn-promo__gi { width:19px; height:19px; flex:none; }
.syn-promo__gl { flex:1; text-align:left; }
@media (max-width: 600px) {
  .syn-promo__row { grid-template-columns:1fr; }
}
.syn-show__edit:hover { transform:translateY(-1px); background:color-mix(in srgb, var(--sage) 26%, var(--card)); }
.syn-show__editq { font-size:12px; line-height:1; }
.syn-show__art { position:relative; height: clamp(150px, 22vw, 240px); }
.syn-show__slide { position:absolute; inset:0; display:grid; place-items:center; color: color-mix(in srgb, var(--fg) 78%, var(--terra)); opacity:0; transform: scale(.9) rotate(-4deg); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
.syn-show__slide svg { width: 100%; height: 100%; max-width: 240px; }
.syn-show__slide.on { opacity:1; transform:none; }
.syn-show__body { display:flex; flex-direction:column; gap:5px; margin-top:10px; }
.syn-show__kind { align-self:flex-start; font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.16em; padding:4px 10px; border-radius:999px; }
.syn-show__kind--mode { color:var(--terra-dk); background:var(--terra-soft); }
.syn-show__kind--news { color:var(--sage); background:color-mix(in srgb,var(--sage) 16%,transparent); }
.syn-show__nm { font-family:var(--disp); font-weight:600; font-size:clamp(24px,3.2vw,36px); letter-spacing:.01em; line-height:1; }
.syn-show__desc { font-family:var(--serif); font-size:15px; color:var(--fg-70); line-height:1.4; max-width:26em; }
.syn-show__try { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:12px; background:var(--terra-dk); color:#fff; border:0; font-family:var(--sans); font-weight:700; font-size:14px; padding:11px 20px; border-radius:999px; cursor:pointer; box-shadow:0 8px 22px var(--terra-soft); transition:transform .16s; }
.syn-show__try:hover { transform:translateY(-2px); }
.syn-show__arr { transition:transform .18s; } .syn-show__try:hover .syn-show__arr { transform:translateX(3px); }
.syn-show__dots { display:flex; gap:7px; margin-top:14px; }
.syn-show__dot { width:22px; height:5px; border-radius:3px; border:0; background:var(--line-bold); cursor:pointer; padding:0; transition:.2s; }
@media (pointer: coarse) {
  .syn-show__dot { position: relative; }
  .syn-show__dot::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:44px; width:calc(100% + 7px); }
}
.syn-show__dot.on { background:var(--terra); width:34px; }

/* monogram */
.syn-mono { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.syn-mono__mark { width: clamp(90px,14vw,150px); height: clamp(90px,14vw,150px); color:var(--fg); }
.syn-mono__wm { font-family:var(--disp); font-weight:600; font-size:clamp(40px,6vw,72px); letter-spacing:.02em; line-height:.9; }
.syn-mono__wm span { color:var(--terra); }
.syn-mono__sub { font-family:var(--serif); font-style:italic; font-size:18px; color:var(--fg-70); }

/* minimal */
.syn-hero__min { height: 12px; }
.syn-hero__minrule { display:block; width:70px; height:3px; background:var(--terra); }

/* ════ interactive SPEC card ════ */
.syn-spec__art { position:relative; width:100%; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; padding:0; }
.syn-spec__art:hover .syn-spec__illu { transform: translateY(-4px) scale(1.03); }
.syn-spec__art:hover .syn-spec__taphint { opacity:1; transform:none; }
@media (hover: none) { .syn-spec__taphint { opacity:1; transform:none; } }
.syn-spec__illu { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.syn-spec__taphint { position:absolute; bottom:6px; left:50%; transform:translateX(-50%) translateY(4px); font-family:var(--disp); font-size:10px; letter-spacing:.14em; color:var(--terra-dk); background:var(--terra-soft); padding:5px 11px; border-radius:999px; opacity:0; transition:.2s; white-space:nowrap; }
.syn-spec__ticker { min-height:56px; display:flex; align-items:center; }
.syn-tick { width:100%; }
.syn-tick--fact { display:flex; flex-direction:column; gap:3px; text-align:left; }
.syn-tick__lbl { font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.16em; color:var(--terra); }
.syn-tick__tx { font-family:var(--serif); font-size:13.5px; line-height:1.35; color:var(--fg-70); }
.syn-tick--live { display:flex; align-items:center; gap:9px; }
.syn-tick__k { color:var(--terra); font-size:15px; }
.syn-tick__v { font-family:var(--disp); font-weight:600; font-size:24px; color:var(--gold); }
.syn-tick__l { font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--muted); }

/* ════ acroteria gallery overlay ════ */
.acro-ov { position:fixed; inset:0; z-index:9600; display:grid; place-items:center; padding:24px; background:color-mix(in srgb, #07080c 64%, transparent); backdrop-filter:blur(3px); opacity:0; transition:opacity .2s; }
.acro-ov.in { opacity:1; }
.acro-box { width:min(560px,96vw); max-height:88vh; overflow:auto; background:var(--card); border:1px solid var(--line-bold); border-radius:20px; box-shadow:0 40px 90px rgba(0,0,0,.5); }
.acro-box__bar { position:sticky; top:0; display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--card); border-bottom:1px solid var(--line); z-index:1; }
.acro-box__ttl { display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:600; font-size:16px; letter-spacing:.03em; }
.acro-box__ic { width:22px; height:22px; color:var(--gold); } .acro-box__ic svg{ width:100%; height:100%; }
.acro-box__kleos { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted); }
.acro-box__kleos b { color:var(--gold); font-family:var(--disp); font-size:15px; }
.acro-box__kic { width:18px; height:18px; color:var(--gold); } .acro-box__kic svg{ width:100%; height:100%; }
.acro-box__x { background:var(--sink); border:1px solid var(--line); color:var(--fg); width:32px; height:32px; border-radius:8px; font-size:18px; cursor:pointer; }
@media (pointer: coarse) {
  .acro-box__x { position: relative; }
  .acro-box__x::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; }
}
.acro-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:11px; padding:16px; }
.acro-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; border:1px solid var(--line); border-radius:16px; background:var(--bg); }
.acro-card.eq { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 10px 24px var(--shadow); }
.acro-card.locked { opacity:.72; }
.acro-card.shake { animation: acro-shake .4s; }
@keyframes acro-shake { 0%,100%{transform:none} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.acro-card__art { display:grid; place-items:center; width:64px; height:64px; border-radius:14px; background:var(--terra-soft); color:var(--terra-dk); }
.acro-card.locked .acro-card__art { background:var(--sink); color:var(--muted); filter:grayscale(.5); }
.acro-card__illu { width:42px; height:42px; } .acro-card__illu svg{ width:100%; height:100%; }
.acro-card__nm { font-family:var(--disp); font-weight:500; font-size:13px; letter-spacing:.02em; }
.acro-card__btn { font-family:var(--sans); font-weight:700; font-size:11.5px; padding:7px 12px; border-radius:999px; border:1px solid var(--line-bold); background:var(--card); color:var(--fg); cursor:pointer; }
.acro-card__btn.on { background:var(--gold); border-color:transparent; color:#1a1407; }
.acro-card__btn--buy { border-color:var(--gold); color:var(--gold); }
.acro-box__foot { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--card); border-top:1px solid var(--line); font-size:12px; color:var(--muted); flex-wrap:wrap; }
.acro-box__temple { display:inline-flex; align-items:center; gap:5px; background:var(--terra-dk); color:#fff; border:0; font-family:var(--sans); font-weight:700; font-size:13px; padding:10px 16px; border-radius:999px; cursor:pointer; }

/* acro detail pane (click a piece to check it out) */
.acro-detail { display:flex; gap:16px; align-items:center; margin:14px 16px 0; padding:16px; background:var(--sink); border:1px solid var(--line); border-radius:16px; }
.acro-detail.shake { animation: acro-shake .4s; }
.acro-detail__art { display:grid; place-items:center; width:84px; height:84px; flex:none; border-radius:16px; background:var(--terra-soft); color:var(--terra-dk); }
.acro-detail__art.locked { background:var(--card); color:var(--muted); filter:grayscale(.5); }
.acro-detail__illu { width:54px; height:54px; } .acro-detail__illu svg{ width:100%; height:100%; }
.acro-detail__b { flex:1; min-width:0; }
.acro-detail__nm { font-family:var(--disp); font-weight:600; font-size:20px; letter-spacing:.02em; }
.acro-detail__lore { font-family:var(--serif); font-style:italic; font-size:14px; color:var(--fg-70); margin:4px 0 10px; line-height:1.4; }
.acro-detail__act { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.acro-detail__price { font-family:var(--disp); font-weight:600; font-size:13px; color:var(--gold); }
.acro-detail__btn { font-family:var(--sans); font-weight:700; font-size:13px; padding:9px 18px; border-radius:999px; border:1px solid var(--line-bold); background:var(--card); color:var(--fg); cursor:pointer; }
.acro-detail__btn.on { background:var(--gold); border-color:transparent; color:#1a1407; }
.acro-detail__btn--buy { background:var(--terra-dk); border-color:transparent; color:#fff; }
.acro-card { cursor:pointer; }
.acro-card.sel { outline:2px solid var(--terra); outline-offset:1px; }
.acro-card__tag { font-size:10px; font-weight:700; letter-spacing:.03em; color:var(--muted); }
.acro-card.eq .acro-card__tag { color:var(--gold); }

/* ════════════════════════════════════════════════════════════════════
   GAME TAGS — interactive hero strip, tag pages, admin tag/reward editors
   ════════════════════════════════════════════════════════════════════ */
/* hero-strip chiplets are now buttons that open a tag page */
.syn-chiplet--tag { display:inline-flex; align-items:center; gap:7px; background:none; cursor:pointer; transition:border-color .16s, color .16s, transform .16s, background .16s; }
.syn-chiplet--tag:hover { border-color:var(--terra); color:var(--terra-dk); transform:translateY(-1px); }
.syn-chiplet--tag:active { transform:none; }
.syn-chiplet--tag.on { border-color:transparent; background:var(--ca,var(--terra)); color:#fff; }
.syn-chiplet__n { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:color-mix(in srgb, currentColor 16%, transparent); font-size:9.5px; font-weight:700; letter-spacing:0; }

/* tag page (symposion/<tag>) */
.tagpg__tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.tagpg__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.tagpg__empty { display:flex; flex-direction:column; align-items:center; gap:14px; padding:54px 22px; text-align:center; color:var(--muted); border:1px dashed var(--line-bold); border-radius:18px; }
.tagpg__empty-ic { width:60px; height:60px; color:var(--terra-dk); opacity:.55; } .tagpg__empty-ic svg { width:100%; height:100%; }
.tagpg__empty p { margin:0; font-family:var(--serif); font-size:15px; }

/* admin — tag manager */
.sc-tagmgr { display:flex; flex-wrap:wrap; gap:8px; }
.sc-tagchip { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--line-bold); border-radius:999px; background:var(--card); font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--fg); }
.sc-tagchip__n { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--sink); color:var(--ca,var(--terra-dk)); font-size:10px; font-weight:700; }
.sc-tagchip__x { border:0; background:none; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; padding:0 0 0 2px; }
.sc-tagchip__x:hover { color:var(--terra-dk); }
.sc-tagchip--custom { border-color:var(--ca,var(--terra)); }
.sc-tagchip--add { cursor:pointer; border-style:dashed; color:var(--terra-dk); }
.sc-tagchip--add:hover { background:var(--terra-soft); }

/* admin — games × tags grid */
.sc-tagrows { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.sc-tagrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.sc-tagrow__g { display:flex; align-items:center; gap:9px; min-width:172px; flex:0 0 auto; }
.sc-tagrow__ic { width:26px; height:26px; color:var(--ca,var(--terra-dk)); flex:none; } .sc-tagrow__ic svg { width:100%; height:100%; }
.sc-tagrow__nm { font-family:var(--disp); font-weight:500; font-size:14px; }
.sc-tagrow__tags { display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.sc-tagtoggle { padding:5px 11px; border:1px solid var(--line-bold); border-radius:999px; background:var(--bg); color:var(--muted); font-family:var(--sans); font-weight:600; font-size:11.5px; cursor:pointer; transition:.14s; }
.sc-tagtoggle:hover { border-color:var(--terra); color:var(--fg); }
.sc-tagtoggle.on { background:var(--ca,var(--terra)); border-color:transparent; color:#fff; }

/* admin — level rewards editor */
.sc-rewards { display:flex; flex-direction:column; gap:12px; }
.sc-rwd { border:1px solid var(--line); border-radius:16px; background:var(--card); padding:14px; }
.sc-rwd__h { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sc-rwd__lv { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-family:var(--disp); font-size:11px; letter-spacing:.08em; }
.sc-rwd__lvi { width:54px; padding:6px 8px; border:1px solid var(--line-bold); border-radius:8px; background:var(--bg); color:var(--fg); font-family:var(--sans); font-weight:700; font-size:14px; }
.sc-rwd__ttl { flex:1; min-width:120px; padding:8px 11px; border:1px solid var(--line-bold); border-radius:10px; background:var(--bg); color:var(--fg); font-family:var(--serif); font-weight:600; font-size:15px; }
.sc-rwd__del { border:0; background:var(--sink); color:var(--muted); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:16px; flex:none; }
.sc-rwd__del:hover { color:var(--terra-dk); }
.sc-rwd__list { display:flex; flex-direction:column; gap:8px; }
.sc-rwd__row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sc-rwd__ic { width:34px; height:34px; flex:none; border:1px solid var(--line-bold); border-radius:9px; background:var(--bg); color:var(--ca,var(--terra-dk)); font-size:16px; cursor:pointer; display:grid; place-items:center; }
.sc-rwd__lbl { flex:1; min-width:140px; padding:8px 11px; border:1px solid var(--line-bold); border-radius:10px; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:13.5px; }
.sc-rwd__type { flex:0 0 auto; width:auto; min-width:120px; padding:8px 10px; }
.sc-rwd__x { border:0; background:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; flex:none; }
.sc-rwd__x:hover { color:var(--terra-dk); }
.sc-rwd__addr { align-self:flex-start; margin-top:2px; border:1px dashed var(--line-bold); background:none; color:var(--terra-dk); font-family:var(--sans); font-weight:600; font-size:12px; padding:7px 12px; border-radius:999px; cursor:pointer; }
.sc-rwd__addr:hover { background:var(--terra-soft); }
.sc-rwd__foot { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

/* promo title scaled to match the showcase ("navigation") panel beside it */
.syn-classes__showw .syn-promo__ttl { font-size: clamp(18px,1.7vw,23px); }
.syn-classes__showw .syn-promo__kick { font-size: 10px; }

/* refresh control on game-reading admin panels */
.sc-tagrow__bar, .sc-refreshbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:18px 0 8px; }
.sc-refreshbar { justify-content:flex-end; margin:0 0 12px; }
.sc-refresh { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--line-bold); border-radius:999px; background:var(--card); color:var(--fg); font-family:var(--sans); font-weight:600; font-size:12px; cursor:pointer; transition:.16s; }
.sc-refresh:hover { border-color:var(--ca,var(--terra)); color:var(--ca-ink,var(--terra-dk)); }
.sc-refresh__ic { font-size:14px; line-height:1; transition:transform .4s ease; }
.sc-refresh:hover .sc-refresh__ic { transform:rotate(180deg); }
.sc-refresh:active .sc-refresh__ic { transform:rotate(360deg); }

/* premium acroteria — gilded card + star badge (Agora grid & home overlay) */
.sc-acro, .acro-card { position:relative; }
.sc-acro--premium, .acro-card--premium {
  border-color:var(--gold);
  background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 12%, var(--card)), var(--card));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 42%,transparent), 0 12px 28px var(--shadow);
}
.sc-acro--premium .sc-acro__art, .acro-card--premium .acro-card__art {
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gold) 55%,transparent);
  color:var(--gold);
}
.sc-acro__prem, .acro-card__prem {
  position:absolute; top:7px; right:8px; z-index:2; color:var(--gold); font-size:13px; line-height:1;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--gold) 60%,transparent));
  pointer-events:none;
}
.acro-card__prem { top:9px; right:9px; }

/* ΚΛΕΙΔΩΜΕΝΟ ΠΛΑΚΙΔΙΟ. Ξεθωριάζει, δεν εξαφανίζεται: το περιεχόμενο
   υπάρχει ολόκληρο και θα ξεκλειδώσει με το νέο ΦΕΚ. Ένα πλακίδιο που
   κρύβεται θα έκανε τον μαθητή να νομίζει ότι δεν φτιάχτηκε ποτέ. */
.syn-tile--locked{opacity:.66;filter:saturate(.72)}
.syn-tile--locked:hover,.syn-tile--locked:focus-visible{opacity:.9;filter:none}
.syn-tile--locked .syn-tile__nm::after{content:" ⟡";color:var(--sym-stone,#8C7F6B);font-size:.85em}