/* ==========================================================================
   TRIUMPH MARVION - base.css
   Tokens, reset, the phone-shaped stage, the stadium backdrop and the boot
   splash. Everything else builds on the variables declared here.

   PALETTE: emerald and teal carry the game, gold is used sparingly for
   rewards, stars and the trophy end of the ladder, and a deep navy sits under
   both so the greens read as pitch-under-floodlights rather than neon.
   ========================================================================== */

:root {
  /* --- surfaces --- */
  --bg:          #04120F;
  --bg-2:        #071B17;
  --navy:        #08182B;
  --navy-2:      #0C2440;
  --surface:     #0A241E;
  --surface-2:   #0F312A;
  --surface-3:   #143C33;
  --line:        rgba(255, 255, 255, .10);
  --line-2:      rgba(255, 255, 255, .06);

  /* --- brand --- */
  --emerald:     #12876B;
  --emerald-b:   #1EC08F;
  --emerald-d:   #0B5745;
  --teal:        #12A79E;
  --teal-b:      #35D6D0;
  --teal-d:      #0A6A67;
  --gold:        #E8C15A;
  --gold-b:      #FFDE8A;
  --gold-d:      #A8842A;

  /* --- text --- */
  --text:        #EAF6F1;
  --text-2:      #B6D6CC;
  --muted:       #7FA79C;
  --dim:         #5B7C74;

  /* --- state --- */
  --good:        #2FCB8A;
  --warn:        #E8A93E;
  --bad:         #E2604F;

  /* --- geometry --- */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;

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

  --shadow-1: 0 2px 10px rgba(0, 0, 0, .30);
  --shadow-2: 0 8px 26px rgba(0, 0, 0, .42);
  --shadow-3: 0 16px 44px rgba(0, 0, 0, .52);

  --ease: cubic-bezier(.22, .8, .3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: block; }
b, strong { font-weight: 700; }

/* ==========================================================================
   THE STAGE - a portrait phone area, centred inside a frame on desktop
   ========================================================================== */
#device {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

@media (min-width: 560px) and (min-height: 720px) {
  body {
    background:
      radial-gradient(120% 90% at 50% 0%, #0B2A22 0%, #04120F 55%, #020A08 100%);
    display: grid;
    place-items: center;
    padding: 18px;
  }
  #device {
    height: min(940px, calc(100vh - 36px));
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--shadow-3), 0 0 0 1px rgba(0, 0, 0, .6);
  }
}

/* ==========================================================================
   STADIUM BACKDROP - behind every screen
   ========================================================================== */
#stage-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(110% 70% at 50% -8%, #0F3A2E 0%, #08231D 42%, var(--bg) 78%),
    linear-gradient(180deg, var(--navy) 0%, var(--bg) 40%);
}

/* Floodlight beams */
.bg-beam {
  position: absolute;
  top: -26%;
  width: 62%;
  height: 92%;
  filter: blur(26px);
  opacity: .32;
}
.bg-beam--l {
  left: -22%;
  background: linear-gradient(150deg, rgba(53, 214, 208, .30), transparent 62%);
  transform: rotate(-13deg);
}
.bg-beam--r {
  right: -22%;
  background: linear-gradient(210deg, rgba(30, 192, 143, .28), transparent 62%);
  transform: rotate(13deg);
}

/* Pitch stripes and the halfway line at the bottom of the stage */
.bg-pitch {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -6%;
  height: 54%;
  opacity: .30;
  background:
    repeating-linear-gradient(90deg,
      rgba(18, 135, 107, .22) 0 34px,
      rgba(11, 87, 69, .22) 34px 68px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%);
          mask-image: linear-gradient(180deg, transparent, #000 55%);
  transform: perspective(340px) rotateX(52deg);
  transform-origin: bottom center;
}
.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(0, 0, 0, .55) 100%);
}

/* ==========================================================================
   LAYERS
   ========================================================================== */
#app-root {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
#toast-layer {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 20px;
}
#modal-layer { position: absolute; inset: 0; z-index: 70; pointer-events: none; }
#modal-layer > * { pointer-events: auto; }
#fx-layer { position: absolute; inset: 0; z-index: 50; pointer-events: none; }

/* ==========================================================================
   BOOT SPLASH - painted in HTML so the first frame is never blank
   ========================================================================== */
#boot-splash {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(100% 70% at 50% 25%, #0F3B2E 0%, #071E18 55%, #030D0B 100%);
  transition: opacity .5s var(--ease), visibility .5s;
}
#boot-splash.hide { opacity: 0; visibility: hidden; }

.boot-badge {
  filter: drop-shadow(0 10px 26px rgba(30, 192, 143, .35));
  animation: bootPulse 2.4s var(--ease) infinite;
}
@keyframes bootPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.03); }
}

.boot-title {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--text);
  text-align: center;
  line-height: 1.15;
}
.boot-title span {
  display: block;
  color: var(--gold);
  font-size: 30px;
  letter-spacing: .2em;
}
.boot-sub {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.boot-bar {
  width: 168px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .10);
  overflow: hidden;
  margin-top: 8px;
}
.boot-bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--emerald-b), var(--gold));
  animation: bootBar 1.15s var(--ease) infinite;
}
@keyframes bootBar {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(255%); }
}
.boot-tip {
  font-size: 11.5px;
  color: var(--dim);
  letter-spacing: .04em;
}

/* ==========================================================================
   SHARED ANIMATION
   ========================================================================== */
.screen-enter { animation: screenIn .26s var(--ease) both; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.pop-in { animation: popIn .3s var(--ease) both; }
@keyframes popIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

body.reduce-motion .screen-enter,
body.reduce-motion .pop-in { animation: none !important; }
body.reduce-motion * { transition-duration: .01ms !important; }

@media (prefers-reduced-motion: reduce) {
  .screen-enter, .pop-in { animation: none !important; }
  .bg-beam, .boot-badge { animation: none !important; }
}

/* Scrollbars: present but unobtrusive. */
.screen__scroll::-webkit-scrollbar { width: 6px; }
.screen__scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 99px;
}
.screen__scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }

::selection { background: rgba(30, 192, 143, .35); }