/* ================================================================
   Victory Dungeon landing — styles
   Design tokens mirror the Figma file (node 40:798 / 40:819 / 40:843).
   ================================================================ */

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      /* Colours (from Figma) */
      --color-bg-body: #0a0a0a;
      --color-text-main: #fffded; /* colors/text_main */
      --color-text-muted: rgba(255, 255, 255, 0.85);
      --color-white: #fff;
      --color-banner-bg: rgba(243, 241, 237, 0.98);

      /* Green PLAY NOW button — exact Figma tokens */
      --btn-outer: #668600;
      --btn-inner: #389200;
      --btn-border: #b9dc54;
      --btn-inset-shadow: #50b900;
      --btn-inset-highlight: rgba(88, 196, 0, 0.7);

      /* Text shadows */
      --shadow-label: 0 3.545px 0 rgba(0, 0, 0, 0.3);
      --shadow-label-sm: 0 2px 0 rgba(0, 0, 0, 0.3);
      --shadow-gem-count: 0 1.352px 0 rgba(0, 0, 0, 0.5);
      /* VICTORY word — dual drop shadow straight from Figma */
      --shadow-victory: 0 4px 0 rgba(45, 19, 19, 0.7), 0 1.5px 0 #b77c2d;
      /* Join title — white text with near-black shadow stack */
      --shadow-join: 0 4px 0 rgba(31, 13, 13, 0.7), 0 1.5px 0 #1d1408;

      /* Typography */
      --font-main: 'Roboto Condensed', 'Arial Narrow', sans-serif;

      /* Radii */
      --r-banner: 9px;
      --r-btn: 8px;
      --r-bubble: 8px;
    }

    html {
      -webkit-text-size-adjust: 100%;
      height: 100%;
    }

    body {
      font-family: var(--font-main);
      /* Figma uses the Roboto Condensed "wdth:75" variant — approximate with
         condensed stretch on supporting browsers. */
      font-stretch: 75%;
      background: var(--color-bg-body);
      color: var(--color-text-main);
      -webkit-font-smoothing: antialiased;
      min-height: 100%;
      overflow: hidden;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    /* Main container */
    .landing {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100dvh;
      overflow: hidden;
      background-color: #1A2C14;
    }

    .banner {
      transform: translateX(-50%) translateY(-200%);
    }

    .bg-overlay {
      position: fixed;
      width: 200%;
      height: 292px;
      bottom: 0;
      overflow: hidden;
      transform: translateX(-25%) translateY(50%);
      border-radius: 300%;
      filter: blur(57px);
      z-index: 1;
      background: #1a2615;
    }