/* ==========================================================================
   TRIUMPH SOREVIA - base.css
   Tokens, reset, app shell, top bar, typography.
   Mobile-first portrait: designed at 360x640, comfortable to 520px wide.
   ========================================================================== */

:root {
  /* ---- surfaces: deep navy foundation ---- */
  --bg-abyss:  #050B1A;
  --bg-deep:   #08122A;
  --bg-navy:   #0C1B3D;
  --surface:   #13254D;
  --surface-2: #1A3060;
  --surface-3: #224079;
  --surface-4: #2B5197;

  /* ---- hairlines ---- */
  --line:    rgba(111, 176, 255, .17);
  --line-2:  rgba(111, 176, 255, .30);
  --line-3:  rgba(111, 176, 255, .48);

  /* ---- brand ---- */
  --blue:    #2F7BFF;
  --blue-l:  #6FB0FF;
  --blue-ll: #A8CEFF;
  --blue-d:  #1247B4;
  --blue-dd: #0C2E77;
  --cyan:    #35D6F5;
  --gold:    #FFC94D;
  --gold-l:  #FFE39A;
  --gold-d:  #C48A00;
  --green:   #35D07F;
  --red:     #FF5B6E;
  --purple:  #A870FF;
  --pink:    #FF63B0;
  --orange:  #FF8A3D;

  /* ---- text ---- */
  --txt:   #FFFFFF;
  --txt-2: #B4C8E8;
  --txt-3: #7C95C2;
  --txt-4: #52689A;

  /* ---- geometry ---- */
  --r-xs: 8px;
  --r-s:  12px;
  --r-m:  16px;
  --r-l:  22px;
  --r-xl: 28px;
  --pad:  16px;

  --topbar-h: 56px;
  --shadow-1: 0 2px 10px rgba(2, 8, 24, .45);
  --shadow-2: 0 10px 30px rgba(2, 8, 24, .55);
  --shadow-3: 0 18px 50px rgba(2, 8, 24, .7);

  --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-abyss);
  color: var(--txt);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ------------------------------------------------------------ app shell -- */
#device {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(120% 62% at 50% -12%, rgba(47, 123, 255, .30) 0%, rgba(47, 123, 255, 0) 60%),
    radial-gradient(90% 50% at 12% 6%, rgba(53, 214, 245, .14) 0%, rgba(53, 214, 245, 0) 55%),
    linear-gradient(180deg, var(--bg-navy) 0%, var(--bg-deep) 42%, var(--bg-abyss) 100%);
  isolation: isolate;
}

@media (min-width: 560px) {
  body { background: #030713; padding: 0; }
  #device {
    height: min(920px, 100dvh);
    margin-top: max(0px, calc((100dvh - 920px) / 2));
    border-radius: 28px;
    border: 1px solid rgba(111, 176, 255, .16);
    box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
  }
}

/* Stadium atmosphere: floodlight wash and a hint of pitch stripes. */
#stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#stage-bg .bg-beam {
  position: absolute;
  top: -34%;
  width: 46%;
  height: 92%;
  background: linear-gradient(180deg, rgba(111, 176, 255, .17), rgba(111, 176, 255, 0) 72%);
  filter: blur(14px);
}
#stage-bg .bg-beam--l { left: -12%; transform: rotate(17deg); }
#stage-bg .bg-beam--r { right: -12%; transform: rotate(-17deg); }
#stage-bg .bg-pitch {
  position: absolute;
  left: -20%; right: -20%; bottom: -6%;
  height: 46%;
  background:
    repeating-linear-gradient(90deg,
      rgba(53, 208, 127, .045) 0 26px,
      rgba(53, 208, 127, .015) 26px 52px);
  transform: perspective(420px) rotateX(62deg);
  transform-origin: bottom center;
  opacity: .8;
}
#stage-bg .bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 40%, rgba(0, 0, 0, 0) 40%, rgba(3, 7, 19, .55) 100%);
}

#app-root {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------- screens -- */
.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

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

.screen__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--pad);
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 176, 255, .3) transparent;
}
.screen__scroll::-webkit-scrollbar { width: 5px; }
.screen__scroll::-webkit-scrollbar-thumb { background: rgba(111, 176, 255, .28); border-radius: 4px; }
.screen__pad { height: calc(28px + var(--safe-b)); }

/* Gameplay manages its own layout and must not scroll. */
.screen--game .screen__scroll { overflow: hidden; padding: 0; display: flex; flex-direction: column; }

/* -------------------------------------------------------------- topbar -- */
.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) var(--pad) 0;
  background: linear-gradient(180deg, rgba(12, 27, 61, .96), rgba(12, 27, 61, 0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.topbar__title {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__right { display: flex; align-items: center; gap: 8px; }
.topbar__spacer { width: 4px; }

.iconbtn {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(26, 48, 96, .7);
  color: var(--txt-2);
  cursor: pointer;
  transition: transform .12s ease, background .16s ease, color .16s ease;
}
.iconbtn:active { transform: scale(.92); background: var(--surface-3); color: var(--txt); }
.iconbtn .ic { width: 20px; height: 20px; }

/* ---------------------------------------------------------- typography -- */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.012em; }
p { margin: 0; }

.sect {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin: 22px 2px 11px;
}
.sect h2 { font-size: 17px; }
.sect__right { font-size: 12px; color: var(--txt-3); font-weight: 700; }

.muted   { color: var(--txt-3); }
.dim     { color: var(--txt-4); }
.small   { font-size: 12px; }
.tiny    { font-size: 11px; }
.b       { font-weight: 800; }
.center  { text-align: center; }
.gold    { color: var(--gold); }
.cyanc   { color: var(--cyan); }
.greenc  { color: var(--green); }
.redc    { color: var(--red); }
.bluec   { color: var(--blue-l); }

.label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-3);
}

.ic { width: 18px; height: 18px; display: inline-block; vertical-align: -.18em; flex: none; }

/* ---------------------------------------------------------- animation --- */
.rise-in { animation: riseIn .38s cubic-bezier(.22, .9, .3, 1) both; }
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

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

/* --------------------------------------------------------- boot splash -- */
#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(90% 55% at 50% 30%, rgba(47, 123, 255, .28), rgba(47, 123, 255, 0) 68%),
    linear-gradient(180deg, #0C1B3D, #050B1A);
  transition: opacity .5s ease, visibility .5s ease;
}
#boot-splash.hide { opacity: 0; visibility: hidden; }
.boot-badge { animation: bootPulse 2.1s ease-in-out infinite; }
@keyframes bootPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 16px rgba(47, 123, 255, .5)); }
  50%      { transform: scale(1.045); filter: drop-shadow(0 0 30px rgba(53, 214, 245, .7)); }
}
.boot-title {
  font-size: 27px;
  font-weight: 900;
  letter-spacing: .13em;
  text-align: center;
  line-height: 1.12;
}
.boot-title span { display: block; color: var(--blue-l); }
.boot-sub {
  font-size: 11.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--txt-3);
  font-weight: 700;
}
.boot-bar {
  width: 172px; height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
  margin-top: 6px;
}
.boot-bar i {
  display: block; height: 100%; width: 36%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  animation: bootBar 1.25s ease-in-out infinite;
}
@keyframes bootBar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}
.boot-tip { font-size: 12px; color: var(--txt-4); }

/* ------------------------------------------------------------- layers --- */
#toast-layer {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(20px + var(--safe-b));
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 18px;
}
#modal-layer {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: none;
}
#modal-layer.show { display: block; }
#fx-layer {
  position: absolute;
  inset: 0;
  z-index: 85;
  pointer-events: none;
  overflow: hidden;
}