/* ============================================================
   WIN ELNOVAR - base.css
   Design tokens, reset, device frame, stadium backdrop, boot splash.

   Palette brief: cream / white base, deep green-blue structure,
   gold for rewards and highlights.
   ============================================================ */

:root {
  /* --- cream / white base --- */
  --cream:        #FAF5EA;
  --cream-2:      #F3ECDC;
  --cream-3:      #EAE0CB;
  --paper:        #FFFDF7;
  --white:        #FFFFFF;

  /* --- deep green-blue structure --- */
  --deep:         #0E5C56;
  --deep-2:       #0A403C;
  --deep-3:       #062926;
  --deep-soft:    #14776F;
  --deep-line:    #1C8C82;
  --ink:          #082421;
  --ink-2:        #17423E;
  --ink-3:        #4B6B67;

  /* --- gold accents --- */
  --gold:         #C99A2E;
  --gold-2:       #E8B84B;
  --gold-3:       #F6DFA0;
  --gold-deep:    #8F6B14;

  /* --- semantic --- */
  --good:         #2E9E6B;
  --warn:         #D98324;
  --bad:          #C1462F;
  --info:         #2C7A9B;

  /* --- surfaces --- */
  --surface:      #FFFDF7;
  --surface-2:    #F6EFE0;
  --border:       rgba(14, 92, 86, .16);
  --border-2:     rgba(14, 92, 86, .28);
  --shadow-sm:    0 1px 2px rgba(8, 36, 33, .08), 0 2px 8px rgba(8, 36, 33, .06);
  --shadow-md:    0 4px 14px rgba(8, 36, 33, .12), 0 10px 28px rgba(8, 36, 33, .10);
  --shadow-lg:    0 10px 30px rgba(8, 36, 33, .18), 0 24px 60px rgba(8, 36, 33, .16);
  --shadow-gold:  0 6px 18px rgba(201, 154, 46, .34);

  /* --- geometry --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --pad: 16px;
  --gap: 12px;

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

  --font: "Trebuchet MS", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Bahnschrift", "DIN Alternate", "Segoe UI", Roboto, sans-serif;

  --dur: 220ms;
  --ease: cubic-bezier(.22, .68, .32, 1);
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #06231F;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overscroll-behavior: none; touch-action: manipulation; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--deep); text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
img, svg { display: block; max-width: 100%; }

/* Default size for every Icons.get() glyph. Component rules such as
   `.btn svg` are more specific and override this; the point is that an icon
   dropped anywhere without a rule can never stretch to its parent's width. */
.ic { width: 20px; height: 20px; flex: 0 0 auto; }

::-webkit-scrollbar { width: 0; height: 0; }

/* ============================================================
   Device frame - portrait phone, centred on wider screens
   ============================================================ */
#device {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, var(--cream) 42%, var(--cream-2) 100%);
  isolation: isolate;
}

@media (min-width: 560px) and (min-height: 720px) {
  body { padding: 18px 0; background: radial-gradient(90% 70% at 50% 0%, #0F4F49 0%, #06231F 70%); }
  html, body { height: 100%; }
  #device {
    height: calc(100% - 36px);
    max-height: 940px;
    border-radius: 30px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(250, 245, 234, .12);
  }
}

/* ============================================================
   Stadium backdrop
   ============================================================ */
#stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#stage-bg .pitch-arc {
  position: absolute;
  left: 50%;
  bottom: -46%;
  width: 150%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid rgba(14, 92, 86, .10);
  background: radial-gradient(closest-side, rgba(14, 92, 86, .05), transparent 72%);
}

#stage-bg .pitch-line--half {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14, 92, 86, .14), transparent);
}

#stage-bg .bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .5;
}
#stage-bg .bloom--gold { width: 46%; aspect-ratio: 1; right: -12%; top: -8%;  background: rgba(232, 184, 75, .40); }
#stage-bg .bloom--deep { width: 54%; aspect-ratio: 1; left: -18%; top: 22%;  background: rgba(20, 119, 111, .22); }

/* ============================================================
   Screen host
   ============================================================ */
#app-root {
  position: relative;
  z-index: 1;
  height: 100%;
  display: block;
}

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

.screen__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px var(--pad) calc(24px + var(--safe-b));
  scroll-behavior: smooth;
}

.screen__scroll--flush { padding-left: 0; padding-right: 0; }

.screen-enter { animation: screenIn 260ms var(--ease) both; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============================================================
   Layers
   ============================================================ */
#modal-layer, #toast-layer, #fly-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
#toast-layer { z-index: 60; }
#fly-layer   { z-index: 55; }
#modal-layer.is-open { pointer-events: auto; }

/* ============================================================
   Boot splash
   ============================================================ */
#boot {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, #14776F 0%, var(--deep) 38%, var(--deep-3) 100%);
  color: var(--cream);
  transition: opacity 380ms var(--ease), visibility 380ms;
}
#boot.hide { opacity: 0; visibility: hidden; }

.boot__mark { animation: bootPop 620ms var(--ease) both; }
@keyframes bootPop {
  from { opacity: 0; transform: scale(.86) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.boot__title {
  font-family: var(--font-num);
  font-size: 30px;
  letter-spacing: .16em;
  font-weight: 700;
}
.boot__title span { color: var(--gold-2); }

.boot__sub {
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(250, 245, 234, .66);
}

.boot__bar {
  margin-top: 8px;
  width: 148px;
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(250, 245, 234, .18);
  overflow: hidden;
}
.boot__bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-2));
  animation: bootSlide 1100ms var(--ease) infinite;
}
@keyframes bootSlide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

/* ============================================================
   Typography helpers
   ============================================================ */
.t-num   { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.t-up    { text-transform: uppercase; letter-spacing: .12em; }
.t-mute  { color: var(--ink-3); }
.t-deep  { color: var(--deep); }
.t-gold  { color: var(--gold-deep); }
.t-c     { text-align: center; }
.t-xs    { font-size: 11px; }
.t-sm    { font-size: 12.5px; }
.t-md    { font-size: 14px; }
.t-lg    { font-size: 17px; }
.t-xl    { font-size: 22px; }
.t-b     { font-weight: 700; }
.t-sb    { font-weight: 600; }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.row-b   { display: flex; align-items: center; justify-content: space-between; }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }
.gap-4   { gap: 4px; }
.gap-6   { gap: 6px; }
.gap-8   { gap: 8px; }
.gap-10  { gap: 10px; }
.gap-12  { gap: 12px; }
.gap-16  { gap: 16px; }
.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; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.hidden { display: none !important; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }