/* 2048 Super — design system v3 ("the page is the dungeon")
   Built from the game's own art in /assets/game: stone wall, stone beams, wooden
   signage, the gold-cornered plate, the gold pill frame, the crimson button.
   Cascade layers, oklch tokens, container queries, scroll-driven animation,
   popover + anchor positioning. No framework, no build step. */

@layer reset, tokens, base, chrome, components, utilities;

@view-transition { navigation: auto; }

@layer tokens {
  :root {
    color-scheme: dark;
    --bg:      #120f14;
    --navy:    #1b2230;             /* the quest / score panel fill */
    --navy-2:  #232c3d;
    --stone:   #2a2930;             /* empty cell */
    --stone-2: #1c1b21;             /* board floor */
    --line:    #4a4250;
    --ink:     #f1e6cf;             /* cream */
    --ink-2:   #cdbb9a;
    --ink-3:   #9a8b70;
    --gold:    #f0c14f;
    --gold-2:  #ffe08a;
    --gold-3:  #a9731d;
    --gold-4:  #5a3a10;
    --red:     #b6222e;             /* the SPIN NOW button */
    --red-2:   #e0463f;
    --ember:   #ff6a3d;
    --teal:    #4fc3cf;
    --green:   #7fc85f;

    --font-display: "Grenze", "Iowan Old Style", "Palatino", Georgia, serif;
    --font-body: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;

    --t--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
    --t-0:  clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
    --t-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --t-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --t-3:  clamp(2rem, 1.6rem + 2vw, 3rem);
    --t-4:  clamp(2.6rem, 1.8rem + 4vw, 4.6rem);

    --gutter: clamp(1rem, 4vw, 2.5rem);
    --wrap: 74rem;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-spring: linear(0, .32 8.6%, .62 16.4%, .86 24.8%, 1.02 33.5%, 1.07 40%, 1.06 46%, 1.01 58%, .995 70%, 1);
    --shadow-1: 0 2px 0 rgba(0,0,0,.5), 0 18px 40px -16px rgba(0,0,0,.85);
    --title-shadow: 0 2px 0 var(--gold-4), 0 3px 0 #2a1a06, 0 8px 18px rgba(0,0,0,.7);
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; }
  img, svg { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  h1, h2, h3, p, ul, dl, dd { margin: 0; }
  ul { padding: 0; list-style: none; }
}

@layer base {
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    min-height: 100dvh; display: flex; flex-direction: column;
    background: var(--bg) url("/assets/game/wall.webp") center top / 100% auto repeat-y;
    color: var(--ink); font-family: var(--font-body); font-weight: 500;
    font-size: var(--t-0); line-height: 1.6; overflow-x: clip;
  }
  /* the dungeon at night: darken the wall, keep the torchlight */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(60rem 36rem at 50% -8rem, rgba(255, 176, 64, .16), transparent 70%),
      linear-gradient(180deg, rgba(10, 8, 14, .80), rgba(10, 8, 14, .86) 40%, rgba(10, 8, 14, .90));
  }
  main { flex: 1; }

  h1, h2, h3, .display {
    font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: .01em; text-wrap: balance;
    color: var(--gold); text-shadow: var(--title-shadow);
  }
  h1 { font-size: var(--t-4); }
  h2 { font-size: var(--t-3); }
  h3 { font-size: var(--t-1); }
  p { text-wrap: pretty; }
  a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: .18em; }
  a:hover { color: var(--gold-2); }
  :focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: rgba(240, 193, 79, .4); }

  .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
  .skip { position: absolute; left: -100vw; top: 0; padding: .5rem 1rem; background: var(--gold); color: #1a1308; z-index: 100; }
  .skip:focus { left: var(--gutter); }
}

/* ---------- site chrome: a stone beam with the wordmark, nav and the red button ---------- */
@layer chrome {
  .site-head {
    position: sticky; top: 0; z-index: 50;
    background: #1d1d24 url("/assets/game/beam.webp") center / 100% 100% no-repeat;
    box-shadow: 0 10px 30px -8px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.06);
  }
  .site-head .bar { display: flex; align-items: center; gap: .75rem 1.25rem; min-height: 4.25rem; }
  .progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); box-shadow: 0 0 10px var(--gold);
    transform-origin: 0 50%; scale: 0 1;
  }
  @supports (animation-timeline: scroll()) { .progress { animation: progress linear both; animation-timeline: scroll(root); } }
  @keyframes progress { to { scale: 1 1; } }

  .wordmark {
    display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto;
    font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: .02em;
  }
  /* the icon is a badge hanging over the beam's lower edge, bigger than the bar is tall */
  .wordmark img { width: 64px; height: 64px; margin-block: .35rem -1.3rem; border-radius: 15px; box-shadow: 0 0 0 3px var(--gold-3), 0 0 0 5px #1d130b, 0 10px 20px rgba(0,0,0,.75); position: relative; z-index: 2; }
  .wordmark { transition: opacity .3s var(--ease-out); }
  /* on the home page the hero emblem is the logo: the header's copy steps aside until it scrolls away */
  .home-top .wordmark { opacity: 0; pointer-events: none; }
  .wordmark b { color: var(--gold); text-shadow: 0 2px 0 var(--gold-4); }
  .wordmark em { font-style: normal; font-weight: 700; color: var(--ink); margin-left: .35em; letter-spacing: .1em; text-transform: uppercase; font-size: .72em; }

  .nav-links { display: flex; gap: .1rem; }
  .nav-links a, #menu a {
    color: var(--ink-2); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em;
    padding: .45rem .7rem; border-radius: .4rem; position: relative;
  }
  .nav-links a:hover { color: var(--gold-2); }
  .nav-links a[aria-current="page"] { color: var(--gold); }
  .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 2px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }

  .menu-btn { display: none; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .5rem; color: var(--gold); border: 2px solid var(--gold-3); background: rgba(0,0,0,.3); anchor-name: --menu; }
  #menu {
    position: fixed; inset: auto; top: 4.75rem; right: var(--gutter); margin: 0;
    display: grid; gap: .1rem; min-width: 13rem; padding: .6rem;
    background: var(--navy); border: 3px solid transparent; border-radius: .4rem;
    border-image: url("/assets/game/plate.webp") 120 / 22px / 0 stretch;
    box-shadow: var(--shadow-1); opacity: 0; translate: 0 -.4rem;
    transition: opacity .18s var(--ease-out), translate .18s var(--ease-out), display .18s allow-discrete, overlay .18s allow-discrete;
  }
  #menu:popover-open { opacity: 1; translate: 0 0; }
  @starting-style { #menu:popover-open { opacity: 0; translate: 0 -.4rem; } }
  #menu::backdrop { background: transparent; }
  @supports (position-anchor: --menu) { #menu { position-anchor: --menu; top: anchor(bottom); right: anchor(right); margin-top: .6rem; } }
  #menu a { display: block; }
  #menu a[aria-current="page"] { color: var(--gold); }
  #menu .menu-cta { color: var(--gold-2); border-top: 1px solid var(--line); margin-top: .25rem; padding-top: .7rem; }
  @media (max-width: 47.99rem) { .nav-links { display: none; } .menu-btn { display: grid; } }

  .site-foot {
    margin-top: clamp(3rem, 8vw, 6rem); color: var(--ink-3); font-size: var(--t--1);
    background: #121118; box-shadow: inset 0 3px 0 var(--gold-3), inset 0 4px 0 #2a1d0c;
  }
  .site-foot .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-block: 1.6rem 2rem; }
  .site-foot nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
  .site-foot a { color: var(--ink-2); text-decoration: none; }
  .site-foot a:hover { color: var(--gold-2); }
}

/* ---------- shared components ---------- */
@layer components {
  .eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
    text-shadow: 0 1px 0 var(--gold-4); margin-bottom: .5rem;
  }

  /* a wooden sign with a title on it */
  .sign { position: relative; display: grid; place-items: center; width: min(100%, 34rem); }
  .chapter-head:has(.sign), .page-head { animation: none; }   /* a hanging sign does not slide in: it would come loose from its beam */
  .sign img { width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(0,0,0,.6)); }
  .sign h1, .sign h2 {
    position: absolute; inset: 29% 6% 6%; display: grid; place-items: center; text-align: center;
    color: var(--ink); text-shadow: 0 2px 0 #3a2310, 0 3px 0 #1d1108, 0 6px 12px rgba(0,0,0,.6);
    text-transform: uppercase; letter-spacing: .04em; margin: 0;
  }
  .sign h1 { font-size: clamp(2rem, 2.4vw + 1.2rem, 3.6rem); }
  .sign h2 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.5rem); }

  /* the gold-cornered plate the game uses for quests and the score */
  .panel {
    position: relative; background: linear-gradient(180deg, var(--navy-2), var(--navy)) padding-box;
    border: 26px solid transparent; border-radius: .5rem;
    border-image: url("/assets/game/plate.webp") 120 / 26px / 0 stretch;
    box-shadow: var(--shadow-1);
  }
  .panel::before {   /* darker stone inside the frame */
    content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: .6rem;
    background: rgba(12, 12, 18, .7);
  }

  /* the crimson button with gold letters (SPIN NOW) */
  .btn-red {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
    color: var(--gold-2); text-decoration: none; text-shadow: 0 1px 0 #4a0a10;
    background: linear-gradient(180deg, #d2333a, var(--red) 55%, #8d1621);
    border: 2px solid var(--gold-3); border-radius: .5rem; padding: .7rem 1.2rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.35), 0 4px 0 #4d0d14, 0 12px 24px -8px rgba(0,0,0,.8);
    transition: transform .08s, filter .15s;
  }
  .btn-red:hover { filter: brightness(1.1); color: var(--gold-2); }
  .btn-red:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 #4d0d14; }
  .btn-red.big { font-size: 1.35rem; padding: .9rem 1.5rem; }
  .btn-red.big small { display: block; font-family: var(--font-body); font-weight: 600; font-size: .68rem; letter-spacing: .02em; text-transform: none; color: var(--ink); opacity: .85; margin-top: .3rem; }
  .btn-red:disabled { filter: saturate(.5) brightness(.8); cursor: wait; }

  /* the gold pill frame from the menu kit */
  .btn-gold {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gold); text-shadow: 0 1px 0 var(--gold-4);
    border: 14px solid transparent; border-image: url("/assets/game/btn-pill.webp") 128 340 / 14px 40px / 0 stretch;
    background: rgba(0,0,0,.35) padding-box; padding: .05rem .6rem; min-height: 2.6rem;
    transition: filter .15s, transform .08s;
  }
  .btn-gold:hover { filter: brightness(1.15); }
  .btn-gold:active { transform: translateY(2px); }

  .link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; margin-top: .75rem; }
  .link-arrow::after { content: "→"; transition: translate .15s var(--ease-out); }
  .link-arrow:hover::after { translate: .25rem 0; }

  /* a stone beam between chapters */
  /* a stone beam between chapters. In beam.webp the slab itself runs from 15% to 73% of the
     image height; the rest is its soft shadow. A wooden sign right under a beam hangs from it:
     the section loses its top padding and the sign is pulled up so the chain tops sit behind
     the slab's lower edge. */
  .beam {
    --beam-h: clamp(2.6rem, 6vw, 4.5rem);
    position: relative; z-index: 2;
    width: 100%; height: var(--beam-h); object-fit: fill; display: block; pointer-events: none;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.7));
  }
  .beam + .chapter:has(> .wrap > .chapter-head .sign) { padding-top: 0; }
  /* 26.8% of the beam is shadow under the slab: pull the sign up by that, plus 3px so only the chain's cut end hides behind the stone */
  .beam + .chapter:has(> .wrap > .chapter-head .sign) .chapter-head { margin-top: calc(clamp(2.6rem, 6vw, 4.5rem) * -0.268 - 3px); }

  /* a page title right under the site header hangs from the header's stone beam the same way */
  .page-head { position: relative; z-index: 1; }
  main > .page-head:first-child { padding-top: 0; margin-top: -3px; }   /* the header is opaque to its bottom edge: tuck just the chain ends under it */
  .site-head { z-index: 50; }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
    }
  }
  @keyframes rise { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: 0 0; } }
}

@layer components {
  /* ============================== launch panel + forms (every page) ============================== */
  .cta { padding-block: clamp(2rem, 6vw, 4rem) 0; }
  .cta-card { display: grid; gap: 1.25rem; align-items: center; padding: .75rem 1rem; }
  @media (min-width: 48rem) { .cta-card { grid-template-columns: auto 1fr; gap: 1.25rem 2rem; } .launch-form { grid-column: 1 / -1; } }
  @media (min-width: 64rem) { .cta-card { grid-template-columns: auto 1fr minmax(20rem, 24rem); } .launch-form { grid-column: auto; } }
  .launch-form { display: grid; gap: .6rem; }
  .launch-row { display: flex; flex-wrap: wrap; gap: .6rem; }
  .launch-row input {
    flex: 1 1 12rem; min-height: 3.2rem; padding: .6rem 1rem; border-radius: .5rem; font: inherit; color: var(--ink);
    background: rgba(0,0,0,.45); border: 2px solid var(--gold-3); box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
  }
  .launch-row input::placeholder { color: var(--ink-3); }
  .launch-row input:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 3px rgba(240, 193, 79, .25); }
  .launch-row .btn-red { flex: 0 0 auto; }
  .form-note { color: var(--ink-3); font-size: var(--t--1); margin: 0; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .status { display: none; margin: 0; padding: .6rem .9rem; border-radius: .4rem; font-size: var(--t--1); border: 1px solid var(--line); background: rgba(0,0,0,.4); }
  .status[data-kind="ok"] { display: block; border-color: var(--gold-3); color: var(--gold-2); }
  .status[data-kind="err"] { display: block; border-color: var(--red-2); color: #ffb3a3; }
  .status[data-kind="info"] { display: block; color: var(--ink-2); }
  .app-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 0 0 2px var(--gold-3), 0 12px 30px rgba(0,0,0,.7); }
  .cta-card h2 { font-size: var(--t-2); }
  .cta-card p { color: var(--ink); margin-top: .4rem; max-width: 46ch; }


  /* form fields, game style */
  .field { display: grid; gap: .35rem; font-size: var(--t--1); color: var(--ink-2); }
  .field b { color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .03em; }
  .field input, .field select, .field textarea {
    width: 100%; min-height: 3rem; padding: .6rem .9rem; border-radius: .5rem; font: inherit; color: var(--ink);
    background: rgba(0,0,0,.45); border: 2px solid var(--gold-3); box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
  }
  .field textarea { min-height: 9rem; resize: vertical; }
  .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
  .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 3px rgba(240, 193, 79, .25); }
  .field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    background-position: calc(100% - 1.3rem) 55%, calc(100% - .9rem) 55%; background-size: .4rem .4rem; background-repeat: no-repeat; }
  .field select option { background: var(--navy); }
  .form-row { display: grid; gap: .9rem; }
  @media (min-width: 40rem) { .form-row { grid-template-columns: 1fr 1fr; } }

  /* page head: the wooden sign, centred, with one line under it */
  .page-head { display: grid; justify-items: center; text-align: center; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem); }
  .page-head .sub { color: var(--ink-2); font-size: var(--t-1); margin-top: .8rem; line-height: 1.45; max-width: 40rem; }
  .narrow { max-width: 50rem; }
}

@layer utilities {
  /* the header's red button gives way to the menu button on phones (must outrank .btn-red's display) */
  @media (max-width: 47.99rem) { .head-cta { display: none; } }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}