/* DiveDex — Design tokens */

@import url('vendor/fonts.css');

:root {
  /* base palette */
  --abyss: #050B14;
  --navy-deep: #071827;
  --navy: #0B2A44;
  --navy-mid: #102B46;
  --navy-soft: #16385a;

  /* accents */
  --aqua: #31D7FF;
  --cyan: #82ECFF;
  --seafoam: #63FFD2;
  --gold: #D7B46A;
  --gold-soft: #E5C883;
  --coral: #FF7A6B;
  --violet: #8B7BFF;

  /* foreground */
  --ink: #EAF5FF;
  --ink-2: #B7CCDE;
  --ink-3: #7A93AB;
  --ink-4: #4E6779;

  /* glass */
  --glass-bg: linear-gradient(180deg, rgba(130,236,255,0.07), rgba(130,236,255,0.018));
  --glass-bg-strong: linear-gradient(180deg, rgba(130,236,255,0.11), rgba(130,236,255,0.03));
  --hairline: 1px solid rgba(130,236,255,0.12);
  --hairline-strong: 1px solid rgba(130,236,255,0.20);

  /* type */
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --font-ui: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* shadow */
  --glow-aqua: 0 0 18px rgba(49,215,255,0.45), 0 0 2px rgba(49,215,255,0.8);
  --glow-gold: 0 0 22px rgba(215,180,106,0.55), 0 0 2px rgba(229,200,131,0.9);
  --glow-seafoam: 0 0 18px rgba(99,255,210,0.45);
}

/* Reset within phone */
.dd-app, .dd-app * { box-sizing: border-box; }
.dd-app {
  font-family: var(--font-ui);
  color: var(--ink);
  height: 100%;
  width: 100%;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #163b5f 0%, #0a1d33 38%, var(--abyss) 100%);
}
.dd-app::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 35% at 80% 20%, rgba(49,215,255,0.10), transparent 70%),
    radial-gradient(40% 30% at 10% 80%, rgba(99,255,210,0.07), transparent 70%);
  z-index: 0;
}
.dd-app::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.7 0 0 0 0 0.85 0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.55; mix-blend-mode: overlay;
  z-index: 0;
}

/* Scroll container. The TopBar (sticky, top:0) owns the safe-area-inset-top
   itself, so we don't double-pad here. border-box keeps any inline
   padding-bottom (used by individual screens to clear the bottom nav) inside
   the 100% height instead of pushing the scrollport below the viewport. */
.dd-screen { box-sizing: border-box; position: relative; z-index: 1; height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.dd-screen::-webkit-scrollbar { display: none; }

/* Hide browser spin-arrows on number inputs so they don't clash with our steppers */
.dd-app input[type=number]::-webkit-inner-spin-button,
.dd-app input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dd-app input[type=number] { -moz-appearance: textfield; }

/* Glass primitives */
.dd-glass {
  background: var(--glass-bg);
  border: var(--hairline);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-radius: 20px;
}
.dd-glass-strong { background: var(--glass-bg-strong); border: var(--hairline-strong); }

/* Sonar pulse */
@keyframes dd-sonar {
  0%   { transform: scale(0.6); opacity: 0.75; }
  100% { transform: scale(2.4); opacity: 0; }
}
.dd-sonar-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(49,215,255,0.55);
  animation: dd-sonar 3.2s cubic-bezier(.2,.7,.3,1) infinite;
}
.dd-sonar-ring.delay-1 { animation-delay: 1.07s; }
.dd-sonar-ring.delay-2 { animation-delay: 2.14s; }

/* Shimmer for legendary */
@keyframes dd-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.dd-shimmer {
  background: linear-gradient(90deg, #D7B46A 0%, #FBE6A6 25%, #D7B46A 50%, #FBE6A6 75%, #D7B46A 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dd-shimmer 4s linear infinite;
}

/* Iridescent for mythic */
.dd-iridescent {
  background: conic-gradient(from 0deg at 50% 50%, #82ECFF, #63FFD2, #D7B46A, #FF7A6B, #8B7BFF, #82ECFF);
}

/* XP bar fill animation */
@keyframes dd-fill { from { width: 0%; } }
.dd-xpfill { animation: dd-fill 1.6s cubic-bezier(.2,.7,.3,1) both; }

/* Toast */
@keyframes dd-toast-in {
  0% { transform: translateY(20px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.dd-toast { animation: dd-toast-in 0.4s cubic-bezier(.2,.7,.3,1) both; }

/* Reveal */
@keyframes dd-reveal {
  0% { transform: scale(0.7) rotate(-4deg); opacity: 0; filter: blur(8px); }
  60% { transform: scale(1.04) rotate(1deg); filter: blur(0); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.dd-reveal { animation: dd-reveal 0.7s cubic-bezier(.2,.7,.3,1) both; }

/* Buttons */
.dd-btn {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.005em;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, filter 0.12s, box-shadow 0.18s;
}
.dd-btn:active { transform: scale(0.98); filter: brightness(1.08); }

.dd-btn-primary {
  background: linear-gradient(180deg, #4DDFFF 0%, #1FB6E6 100%);
  color: #021321;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 14px 30px -8px rgba(49,215,255,0.55),
    0 2px 8px rgba(49,215,255,0.25);
}
.dd-btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  border: 1px solid rgba(130,236,255,0.18);
}

/* Chip */
.dd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
  background: rgba(130,236,255,0.08);
  border: 1px solid rgba(130,236,255,0.14);
  color: var(--ink-2);
}
.dd-chip-aqua { background: rgba(49,215,255,0.14); border-color: rgba(49,215,255,0.3); color: #c8f5ff; }
.dd-chip-gold { background: rgba(215,180,106,0.13); border-color: rgba(215,180,106,0.32); color: #ffe6ac; }
.dd-chip-coral { background: rgba(255,122,107,0.12); border-color: rgba(255,122,107,0.30); color: #ffc8c0; }
.dd-chip-foam { background: rgba(99,255,210,0.12); border-color: rgba(99,255,210,0.28); color: #b3ffe5; }

/* Number tabular */
.dd-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Section title */
.dd-h-section { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.dd-h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; }
.dd-h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }

/* Rarity */
.dd-rarity-common    { --r-color: #B7CCDE; --r-glow: rgba(183,204,222,0.35); }
.dd-rarity-uncommon  { --r-color: #63FFD2; --r-glow: rgba(99,255,210,0.4); }
.dd-rarity-rare      { --r-color: #31D7FF; --r-glow: rgba(49,215,255,0.5); }
.dd-rarity-epic      { --r-color: #8B7BFF; --r-glow: rgba(139,123,255,0.5); }
.dd-rarity-legendary { --r-color: #D7B46A; --r-glow: rgba(215,180,106,0.55); }
.dd-rarity-mythic    { --r-color: #82ECFF; --r-glow: rgba(130,236,255,0.5); }