/* ============================================================
   VICTORY SOLMERA - base.css
   Design tokens, reset, app shell and the boot splash.
   Identity: aqua/teal accents, white surfaces, deep navy structure.
   ============================================================ */

:root {
  /* Surfaces */
  --bg:        #EEF3F8;
  --bg-2:      #E2EAF2;
  --surface:   #FFFFFF;
  --surface-2: #F5F9FC;
  --surface-3: #E9F1F7;
  --line:      #DCE6EF;
  --line-2:    #C6D6E4;

  /* Ink */
  --ink:   #0A1E38;
  --ink-2: #40587A;
  --ink-3: #7E96B4;
  --ink-4: #AFC1D4;

  /* Brand - aqua / teal */
  --aqua:   #16D9C6;
  --aqua-l: #D9FAF5;
  --teal:   #0FB5A6;
  --teal-d: #0A8A80;
  --teal-l: #E2FBF7;

  /* Structure - deep navy */
  --navy:   #0A1E38;
  --navy-2: #123252;
  --navy-3: #1D4A75;
  --navy-l: #E3ECF5;

  /* Support */
  --amber:  #F5A524;
  --amber-l:#FFF2DA;
  --coral:  #FF6B5A;
  --coral-l:#FFEAE7;
  --mint:   #22C77A;
  --mint-l: #DEF7EA;
  --violet: #7C6CFF;
  --violet-l:#EBE8FF;

  /* Board */
  --cell-fill:  #0A1E38;
  --cell-blank: #FFFFFF;
  --cell-alt:   #F2F7FB;
  --cell-mark:  #9CB2C8;
  --cell-miss:  #FF6B5A;
  --grid-line:  #D2DFEA;
  --grid-blk:   #7E96B4;

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

  --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; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 10px; }

/* ---------- 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(10, 30, 56, .14);
}

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

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  opacity: .40;
}
.blob--aqua  { width: 280px; height: 280px; background: #7FF0E4; top: -90px; left: -70px; }
.blob--navy  { width: 320px; height: 320px; background: #9FC2E6; bottom: -140px; right: -100px; opacity: .34; }
.blob--amber { width: 200px; height: 200px; background: #FFD79B; top: 42%; right: -80px; opacity: .26; }

#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: 55;
  pointer-events: none;
}

/* ---------- Screens ---------- */

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

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

.screen__scroll--home { padding-top: calc(10px + var(--safe-t)); }

.screen-enter { animation: screenIn .26s ease both; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

#device.noanim .screen-enter { animation: none; }

/* ---------- Top bar ---------- */

.top {
  flex: 0 0 auto;
  min-height: var(--top-h);
  padding: calc(8px + var(--safe-t)) 8px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--navy);
  color: #fff;
  box-shadow: var(--sh-1);
  position: relative;
  z-index: 5;
}
.top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--aqua), var(--teal) 40%, transparent);
}
.top__btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: #fff;
  flex: 0 0 auto;
}
.top__btn:active { background: rgba(255,255,255,.12); }
.top__btn svg { width: 22px; height: 22px; }
.top__spacer { width: 40px; flex: 0 0 auto; }
.top__titles { flex: 1; min-width: 0; text-align: center; }
.top__title {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top__sub {
  font-size: 11.5px;
  color: #9FC2DE;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

#boot {
  position: absolute;
  inset: 0;
  z-index: 90;
  background: linear-gradient(160deg, #0A1E38 0%, #123252 55%, #0E4A56 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: opacity .38s ease;
}
#boot.hide { opacity: 0; pointer-events: none; }
.boot__mark { filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.boot__title {
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 3px;
}
.boot__title span { color: var(--aqua); }
.boot__sub {
  color: #8FB6D6;
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.boot__bar {
  width: 148px; height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
  margin-top: 6px;
}
.boot__bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--aqua), #fff);
  animation: bootBar 1.1s ease-in-out infinite;
}
@keyframes bootBar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(280%); }
}

/* ---------- Utilities ---------- */

.pad { padding: 4px 0 8px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.row { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.row--gap { gap: 8px; }
[hidden] { display: none !important; }