/* ============================================================
   VICTORY CORLENA - base.css
   Design tokens, reset, app shell layout, boot splash.
   Identity: light surfaces, teal + violet accents, navy ink.
   ============================================================ */

:root {
  /* Surfaces */
  --bg:        #F4F6FC;
  --bg-2:      #E9EDF9;
  --surface:   #FFFFFF;
  --surface-2: #F7F9FE;
  --surface-3: #EEF2FB;
  --line:      #E2E7F4;
  --line-2:    #D3DAEC;

  /* Ink */
  --ink:   #101736;
  --ink-2: #48527A;
  --ink-3: #8991B0;
  --ink-4: #B4BACE;

  /* Brand */
  --teal:    #14B8A6;
  --teal-d:  #0D8B80;
  --teal-l:  #E4FAF7;
  --violet:  #7C5CFF;
  --violet-d:#5B3BE0;
  --violet-l:#EEEAFF;

  /* Support */
  --amber:  #FFB020;
  --amber-l:#FFF3DC;
  --coral:  #FF7A66;
  --coral-l:#FFEDE9;
  --mint:   #22C77A;
  --mint-l: #E1F8ED;
  --rose:   #F0518A;
  --sky:    #0EA5E9;

  /* Essence palette (12 sortable colours) */
  --e0:  #14B8A6;
  --e1:  #7C5CFF;
  --e2:  #FF7A66;
  --e3:  #FFB020;
  --e4:  #3B82F6;
  --e5:  #F0518A;
  --e6:  #22C77A;
  --e7:  #A855F7;
  --e8:  #0EA5E9;
  --e9:  #EF4444;
  --e10: #84CC16;
  --e11: #64748B;

  /* Shape + depth */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --sh-1: 0 2px 8px rgba(16, 23, 54, .06);
  --sh-2: 0 8px 22px rgba(16, 23, 54, .09);
  --sh-3: 0 16px 40px rgba(16, 23, 54, .16);

  --pad: 16px;
  --top-h: 58px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--bg-2);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; padding: 0; }
a { color: var(--teal-d); text-decoration: none; }

/* ---------- App shell ---------- */

#device {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100%;
  height: 100%;
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 60px rgba(16, 23, 54, .12);
}

#stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .55;
}
.blob--teal   { width: 260px; height: 260px; top: -90px;  left: -70px;  background: #9FF0E5; }
.blob--violet { width: 300px; height: 300px; top: 18%;    right: -120px; background: #CFC2FF; }
.blob--amber  { width: 220px; height: 220px; bottom: -80px; left: -60px; background: #FFE0AE; opacity: .45; }

#app-root {
  position: relative;
  z-index: 1;
  height: 100%;
}

#modal-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
}
#modal-layer.show { display: block; }

#toast-layer {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(18px + var(--safe-b));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

#fly-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

/* ---------- Screen frame ---------- */

.screen {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.screen__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--pad) calc(26px + var(--safe-b));
}

.screen-enter { animation: screenIn .26s cubic-bezier(.22, .9, .3, 1) forwards; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Boot splash ---------- */

#boot {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(165deg, #FBFDFF 0%, #F1F4FD 55%, #ECE8FE 100%);
  transition: opacity .35s ease, visibility .35s ease;
}
#boot.hide { opacity: 0; visibility: hidden; }

.boot__mark { filter: drop-shadow(0 12px 26px rgba(124, 92, 255, .22)); animation: bootPop .6s cubic-bezier(.2, .9, .3, 1.3) forwards; }
@keyframes bootPop { from { transform: scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }

.boot__title {
  margin-top: 14px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--ink);
}
.boot__title span { color: var(--teal-d); }

.boot__sub {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.boot__bar {
  margin-top: 18px;
  width: 168px;
  height: 6px;
  border-radius: 99px;
  background: #DFE5F4;
  overflow: hidden;
}
.boot__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--teal), var(--violet));
  animation: bootBar 1.05s ease forwards;
}
@keyframes bootBar { to { width: 100%; } }

/* ---------- Utility ---------- */

.hidden { display: none !important; }
.center { text-align: center; }
.row { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.row--gap { gap: 10px; }
.grow { flex: 1; min-width: 0; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.h1 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.h2 { font-size: 18px; font-weight: 800; margin: 0; }
.h3 { font-size: 15px; font-weight: 700; margin: 0; }
.tiny { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.small { font-size: 13px; color: var(--ink-2); }

@media (min-width: 481px) {
  body { background: #E4E9F6; padding: 0; }
  #device { height: 100vh; max-height: 100vh; }
}