/* ============================================================
   base.css — Reset, CSS variables, themes, body, app grid
   World Archery palette: Brilliant Rose #EB539E · Havelock Blue #63A6DB
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0 }

/* ---- Dark theme (default) ---- */
:root {
  --gold:  #EB539E;               /* World Archery Brilliant Rose */
  --gp:    rgba(235,83,158,.1);
  --gb:    rgba(235,83,158,.25);
  --bg:    #020003;               /* World Archery Black Russian */
  --bg2:   #07040e;
  --bg3:   #0d091a;
  --bg4:   #150e26;
  --bo:    rgba(255,255,255,.07);
  --hi:    rgba(255,255,255,.04);
  --tx:    #f0eaf8;               /* cool near-white with purple tint */
  --t2:    #6e6278;
  --t3:    #3c3445;
  --gn:    #4caf82;
  --rd:    #B1362F;               /* World Archery Well Read */
  --bl:    #63A6DB;               /* World Archery Havelock Blue */
  --tb-bg: rgba(2,0,3,.94);
}

/* ---- Light theme ---- */
html[data-theme="light"] {
  --gold:  #C41E7E;
  --gp:    rgba(196,30,126,.08);
  --gb:    rgba(196,30,126,.22);
  --bg:    #f0edf5;
  --bg2:   #faf8fc;
  --bg3:   #e6e0ef;
  --bg4:   #d8d0e5;
  --bo:    rgba(0,0,0,.08);
  --hi:    rgba(255,255,255,.7);
  --tx:    #1a1020;
  --t2:    #5c5268;
  --t3:    #9a90a4;
  --gn:    #1e7a48;
  --rd:    #B1362F;
  --bl:    #2560b0;
  --tb-bg: rgba(240,237,245,.94);
}

/* ---- Theme transitions ---- */
body, .sb, .tb, .main,
.pn, .bar, .ni, .btn,
.ef input, .ef select, .ef textarea {
  transition: background-color .25s, border-color .25s, color .25s;
}

/* ---- Atmospheric background (dark only) ---- */
body {
  font-family: "DM Sans", sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(235,83,158,.07) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 95% 105%, rgba(99,166,219,.04) 0%, transparent 55%);
  color: var(--tx);
  height: 100vh; height: 100svh;
  overflow: hidden;
}
html[data-theme="light"] body { background-image: none }

/* ---- App grid ---- */
.app { display: grid; grid-template-columns: 214px 1fr; grid-template-rows: 52px 1fr; height: 100vh; height: 100svh; overflow: hidden }

/* ---- Main content area & screens ---- */
.main { grid-column: 2; grid-row: 2; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px) }
.sc   { display: none; flex-direction: column; gap: 16px; padding: 20px }
.sc.on { display: flex }

/* ---- Custom scrollbar ---- */
::-webkit-scrollbar { width: 3px; height: 3px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px }
::-webkit-scrollbar-thumb:hover { background: var(--t3) }

/* ---- Selection ---- */
::selection { background: rgba(235,83,158,.25); color: var(--tx) }