/* ══════════════════════════════════════════════════════════
   The Etheria frame around Metropolis 3000.
   The city itself (top bar, dock, panels inside the game) keeps
   its brass city-hall look; everything around it — the start
   menu, challenge and daily screens, end screens — wears the
   realm's language from realm/realm.css, so arriving here from
   the World feels like stepping into another district of Etheria.
   ══════════════════════════════════════════════════════════ */

/* start screen: the realm's night, the game's own logo */
#startScreen{
  background:radial-gradient(70% 55% at 85% 0%,rgba(122,168,255,.16),transparent 60%),
             radial-gradient(60% 50% at 0% 10%,rgba(45,226,196,.16),transparent 60%),var(--er-night);
  font-family:var(--er-body);
}
#startScreen .ss-tag{color:var(--er-muted);font-family:var(--er-body)}
#startScreen .ss-hint,#startScreen .ss-foot{color:rgba(234,251,248,.45)}
#startScreen .ss-lede{color:var(--er-muted);font-family:var(--er-body)}

/* tabs become the realm's segmented control */
#startScreen .ss-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--er-line);background:rgba(6,23,28,.6);margin:0 auto 14px}
#startScreen .ss-tab{border:0;border-radius:999px;top:0;padding:10px 18px;font:600 13.5px/1 var(--er-body);letter-spacing:0;color:var(--er-muted);background:none}
#startScreen .ss-tab.is-on{background:rgba(45,226,196,.16);color:var(--er-text);box-shadow:inset 0 0 0 1px rgba(45,226,196,.4)}
#startScreen .ss-tab em{color:var(--er-peach)}
#startScreen .ss-inner{display:flex;flex-direction:column;align-items:stretch}
#startScreen .ss-inner > .ss-tabs{align-self:center}

/* panes are realm panels */
#startScreen .ss-pane{
  border-radius:26px;border:1px solid rgba(234,251,248,.14);
  background:radial-gradient(120% 70% at 100% 0%,rgba(122,168,255,.14),transparent 60%),radial-gradient(90% 60% at 0% 0%,rgba(45,226,196,.12),transparent 60%),#0A2228;
  box-shadow:0 40px 120px rgba(0,0,0,.55);padding:22px;
}
#startScreen .ss-form label{color:var(--er-muted);font-family:var(--er-body)}
#startScreen .ss-form input,#startScreen .ss-form select{background:rgba(6,23,28,.7);border:1px solid var(--er-line);border-radius:12px;color:var(--er-text);font-family:var(--er-body)}
#startScreen .ss-form input:focus,#startScreen .ss-form select:focus{outline:2px solid var(--er-mint);border-color:transparent}
#startScreen #ssPreview{border-radius:18px;border:1px solid var(--er-line)}

/* the realm's buttons replace the old ones (realm.css styles .er-btn; this only clears the legacy look) */
#startScreen .er-btn.btn-primary,#startScreen .er-btn.btn-ghost{border-radius:999px}
#startScreen .btn-big{height:auto;min-height:56px;padding:12px 30px;flex-direction:column;gap:2px;line-height:1.15}
#startScreen .btn-big small{color:rgba(6,23,28,.7);font-weight:500}
#startScreen .ss-newbie .btn-big b{color:var(--er-night)}

/* challenge cards are realm cards */
#startScreen .ch-card{border-radius:20px;border:1px solid rgba(234,251,248,.12);background:rgba(234,251,248,.035);font-family:var(--er-body);transition:transform .2s var(--er-ease),border-color .2s,background .2s}
#startScreen .ch-card:hover{border-color:rgba(45,226,196,.5);background:rgba(45,226,196,.06)}
#startScreen .ch-card.done{border-color:rgba(45,226,196,.35)}
#startScreen .ch-top b{font:700 15px/1.2 var(--er-display);letter-spacing:-.01em;color:var(--er-text)}
#startScreen .ch-brief{color:var(--er-muted)}
#startScreen .ch-meta{color:var(--er-peach)}
#startScreen .dl-date{color:var(--er-mint);letter-spacing:.16em}
#startScreen .dl-box h3{font:700 30px/1.1 var(--er-display);letter-spacing:-.02em;color:var(--er-text)}
#startScreen .dl-streak{color:var(--er-peach)}

/* end screen */
#endScreen{background:rgba(3,12,15,.6)}
/* style.css loads after the kit and styles .es-card too, so restate the realm panel here */
#endScreen .es-card{
  width:min(580px,100%);padding:30px 26px 26px;border-radius:26px;border:1px solid rgba(234,251,248,.14);
  background:radial-gradient(120% 70% at 100% 0%,rgba(122,168,255,.16),transparent 60%),radial-gradient(90% 60% at 0% 0%,rgba(45,226,196,.14),transparent 60%),#0A2228;
  box-shadow:0 40px 120px rgba(0,0,0,.6);font-family:var(--er-body);color:var(--er-text);
}
#endScreen .es-card.lost{background:radial-gradient(120% 70% at 100% 0%,rgba(255,179,138,.14),transparent 60%),#0A2228}
#endScreen .es-card h2.es-title{font:700 clamp(26px,5vw,36px)/1.1 var(--er-display);letter-spacing:-.02em;margin:10px 0 4px;color:var(--er-text)}
#endScreen .es-card.lost .es-title{color:#FFC9BD}
#endScreen .es-lead{max-width:440px;margin:6px auto 0;font-size:14.5px;line-height:1.55}
#endScreen .er-stats .er-stat b{font-size:17px}

/* the realm bar lives in the city's top bar while you play */
#topbar .tb-realm{padding:0 6px 0 8px}
#topbar .tb-realm:empty{display:none}
#topbar .er-bar{height:40px}
@media (max-width:760px){
  #topbar .er-bar .er-pill.shards,#topbar .er-bar .er-lv{display:none}
  #topbar .er-bar{padding:2px}
  #topbar .er-orb{width:30px;height:30px}
}