/* The public tap game (docs/19). Standalone: the ADMIN stylesheet does not
   apply here. The look follows the SHOP's storefront (ejerbeslutning
   14/10-2026): light, white background, black text, Inter, pill buttons,
   soft grey cards. Bitcoin gold is reserved for the coin and the record.
   No CDN: Inter (the shop's typeface) ships LOCALLY from /p/fonts/, the
   variable file, OFL licensed, fetched once like the flags and brand
   icons, so every visitor sees the storefront's letters. */
@font-face {
  font-family: "Inter";
  src: url("/p/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #ffffff;
  --card: #f2f2f0;        /* EXACTLY the shop's light grey (ejer 15/10-2026) */
  --line: #e8e8e6;
  --text: #121212;
  --muted: #6b6b68;
  --btc: #f7931a;
  --btc-deep: #c97312;
  --pill: #121212;        /* storefront-style primary: black pill */
  --pill-text: #ffffff;
  --bad-line: #dfaaa3;    /* weak red: a field that failed validation */
  --ok-line: #a9cfab;     /* weak green: a field filled in correctly */
}

* { box-sizing: border-box; }
/* The hidden attribute always wins, whatever display a class sets (the
   house rule from the admin stylesheet). */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  touch-action: manipulation;          /* no double-tap zoom mid-game */
  -webkit-user-select: none;
  user-select: none;
  overflow-x: hidden;
}

/* The particle/confetti layer sits over everything and never eats a tap. */
#fx { position: fixed; inset: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 10; }

header.site { padding: 24px 16px 8px; }
header.site .logo { height: 30px; display: block; }

main { width: 100%; max-width: 460px; padding: 10px 16px 24px;
       display: flex; flex-direction: column; gap: 14px; }

/* The shop's own card look (ejerrettelse 15/10-2026): no border, rounded
   corners, and the exact storefront grey; depth comes from the surface
   colour alone. */
.card { background: var(--card);
        border-radius: 20px; padding: 24px 18px; text-align: center; }

.center-note { color: var(--muted); padding: 30px 6px; font-size: 15px; }

/* The competition up front (ejerrettelse 14/10-2026): what this IS and
   what can be won, before anything else. "Weekly giveaway" stands ABOVE
   the chip as plain text (ejerrettelse 15/10-2026), so the chip carries
   only the prize. */
.prize-kicker { color: var(--muted); text-transform: uppercase;
                letter-spacing: 1.5px; font-size: 11px; font-weight: 600;
                margin: 0 0 6px; }
.prize-chip {
  /* Black with white text (ejerrettelse 15/10-2026); gold stays with the
     coin and the record. */
  display: inline-block; background: var(--pill); color: var(--pill-text);
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; border-radius: 999px; padding: 7px 14px;
  margin: 0 0 12px;
}

h1 { font-size: 26px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.3px; }
/* The game card carries no visible title (ejerrettelse 14/10-2026): the
   chip and the tab say what this is. The heading stays for screen readers. */
#game h1 { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip-path: inset(50%); margin: 0; }
/* Before the first tap the HUD and timer are GONE, not just invisible
   (ejerrettelse 15/10-2026: too much air above the coin). The coin sits
   high on the start screen and slides down when the round begins; it is
   so large that the finger stays well inside it. */
#game.pre .hud, #game.pre .timer-row { display: none; }
#game.pre .coin { margin-top: 6px; }
.sub { color: var(--muted); margin: 0 0 16px; font-size: 14px; line-height: 1.55; }
.sub strong { color: var(--text); }

/* ---- HUD ---- */
.hud { display: flex; justify-content: center; gap: 34px; margin-bottom: 10px; }
.hud-cell { display: flex; flex-direction: column; align-items: center; }
.hud-num { font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums;
           line-height: 1.1; }
.hud-label { color: var(--muted); font-size: 11px; text-transform: uppercase;
             letter-spacing: 1.2px; }
/* The countdown runs IN LINE with the bar (ejerrettelse 15/10-2026):
   small, regular weight, two decimals, to the right of the status bar. */
.timer-row { display: flex; align-items: center; gap: 10px;
             margin: 0 8px 20px; }
.timer { flex: 1; height: 6px; border-radius: 3px; background: var(--line);
         overflow: hidden; }
.timer-count { font-size: 13px; font-weight: 400; color: var(--muted);
               font-variant-numeric: tabular-nums; min-width: 42px;
               text-align: right; }
.timer-fill { height: 100%; width: 100%; background: var(--btc);
              border-radius: 3px; }

/* ---- The coin ---- */
.coin {
  display: block; margin: 0 auto;
  width: min(62vw, 250px); height: min(62vw, 250px);
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 10px 22px rgba(201, 115, 18, 0.28));
  perspective: 700px;              /* the stage for the 3D tilt */
}
/* The tilting layer (ejerrettelse 14/10-2026): the coin's perspective
   follows the cursor, and the glare below moves with it, so the gold
   reads as a polished surface catching the light. */
.coin-3d {
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: 50%;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform 0.12s ease-out;
  will-change: transform;
}
.coin-glare {
  position: absolute; inset: 3%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 34%) var(--gy, 26%),
    rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.22) 18%,
    rgba(255, 255, 255, 0) 46%);
  mix-blend-mode: screen;
}
.coin svg { width: 100%; height: 100%; display: block; }
/* The tap hop (ejerrettelse 15/10-2026, afløser geléen: for voldsom):
   the coin lifts a touch off the surface on every tap and settles back. */
.coin.hop { animation: hop 0.2s cubic-bezier(0.25, 0.6, 0.35, 1); }
@keyframes hop {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}
.coin:focus-visible { outline: 3px solid var(--btc); outline-offset: 6px;
                      border-radius: 50%; }
.hint { color: var(--muted); font-size: 14px; margin: 16px 0 2px;
        min-height: 20px; }

/* ---- Waiting dots ---- */
.dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor;
          animation: dot 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 70%, 100% { opacity: 0.25; } 35% { opacity: 1; } }

/* ---- Result ---- */
.record-banner {
  background: var(--btc); color: #1a1205;
  font-size: 20px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; border-radius: 999px; padding: 12px 18px;
  margin: 0 0 14px; animation: pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; }
                 100% { transform: scale(1); opacity: 1; } }
.result-score { font-size: 64px; font-weight: 800; margin: 0;
                font-variant-numeric: tabular-nums; line-height: 1.05; }
/* The prize's value stands where the hidden score would (ejerbeslutning
   15/10-2026): the number an anonymous player sees is what the free
   t-shirt is WORTH, live from the shop, in bitcoin gold like the record. */
.prize-value { margin: 2px 0 0; }
.prize-amount { font-size: 56px; font-weight: 800; margin: 0; line-height: 1.1;
                color: var(--btc); font-variant-numeric: tabular-nums; }
.prize-label { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.result-taps { font-size: 16px; font-weight: 600; color: var(--muted);
               margin-left: 8px; }
.result-msg { font-size: 15px; line-height: 1.5; margin: 10px 0 18px;
              min-height: 22px; }
.result-msg .msg-flag { height: 12px; margin: 0 1px 0 4px; vertical-align: -1px;
                        border-radius: 2px; }

/* ---- Save-score form ---- */
#r-form { margin: 0 0 16px; }
.form-title { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.form-row { display: flex; gap: 8px; }
.form-row input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px;
  border-radius: 999px; border: 1px solid #d6d6d3;
  background: #ffffff; color: var(--text); font-size: 15px;
  font-family: inherit;
}
.form-row input:focus { outline: 2px solid var(--text); outline-offset: -1px; }
/* Validation colours (ejerbeslutning 15/10-2026): a field filled in
   correctly turns weak green at once; a field that failed the submit
   check turns weak red and gets the focus, first failure first. The
   focus ring follows the field's state (ejerrettelse samme dag: the
   black ring must never cover the red while the field is still wrong). */
.form-row input.field-good { border-color: var(--ok-line); }
.form-row input.field-bad { border-color: var(--bad-line); }
.form-row input.field-good:focus { outline-color: var(--ok-line); }
.form-row input.field-bad:focus { outline-color: var(--bad-line); }

/* Country autocomplete: free text, suggestions with a flag on the left. */
.country-box { position: relative; flex: 1; min-width: 0; display: flex; }
.country-box input { width: 100%; }
.country-box .cflag { position: absolute; left: 14px; top: 50%;
                      transform: translateY(-50%); height: 13px;
                      border-radius: 2px; pointer-events: none; }
.country-box.has-flag input { padding-left: 38px; }
.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: #ffffff; border: 1px solid #d6d6d3; border-radius: 14px;
  overflow: hidden; text-align: left;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.suggest button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font-size: 14px; font-family: inherit; color: var(--text); text-align: left;
}
.suggest button:hover, .suggest button.hot { background: var(--card); }
.suggest img { height: 13px; border-radius: 2px; flex: none; }
.suggest .alias { color: var(--muted); }

.form-row-mail { margin-top: 8px; }
.form-actions { display: flex; gap: 8px; margin-top: 10px; }
.form-note { color: var(--muted); font-size: 12px; min-height: 16px; margin: 8px 0 0; }
/* The consent wording: small and light grey, with the privacy link
   continuing the same sentence flow (ejerrettelse 14/10-2026). */
.consent { color: #a2a29e; font-size: 11px; line-height: 1.5;
           text-align: left; margin: 10px 2px 0; }
.consent a { color: #a2a29e; }

/* ---- Buttons: storefront pills ---- */
.btn-main {
  flex: 1; height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--pill); color: var(--pill-text);
  font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn-main:active { opacity: 0.85; }
.btn-plain {
  height: 48px; padding: 0 18px; border: 1px solid #d6d6d3;
  border-radius: 999px; background: none; color: var(--text);
  font-size: 15px; font-family: inherit; cursor: pointer;
}
/* Play again is deliberately SECONDARY (ejerrettelse 14/10-2026): the
   primary action after a round is "Show my score", the consent CTA. */
#r-again {
  display: inline-block; height: 38px; padding: 0 20px; margin-top: 14px;
  border: 1px solid #d6d6d3; border-radius: 999px; background: none;
  color: var(--muted); font-size: 14px; font-family: inherit; cursor: pointer;
}
#r-again:active { color: var(--text); }

/* ---- The record card (no top 10; the record IS the competition) ---- */
.record-card { text-align: center; }
.record-label { color: var(--muted); text-transform: uppercase;
                letter-spacing: 1.5px; font-size: 11px; font-weight: 600;
                margin: 0 0 6px; }
.record-label .week { text-transform: none; letter-spacing: 0; font-weight: 400; }
.record-value { font-size: 44px; font-weight: 800; margin: 0; line-height: 1.1;
                color: var(--btc); font-variant-numeric: tabular-nums; }
.record-holder { font-size: 15px; margin: 4px 0 0; min-height: 20px; }
.record-holder img { height: 13px; border-radius: 2px; margin-left: 5px;
                     vertical-align: -1px; }
/* The legal line stands as PLAIN small print on the page, never in a box
   (ejerrettelse 15/10-2026), and the front shows no record: the record
   card first appears with the result, where the chase begins. */
.legal { color: var(--muted); font-size: 11px; line-height: 1.6;
         text-align: center; margin: 0; }
.legal a { color: var(--muted); }

footer.site { padding: 4px 16px 28px; font-size: 13px; text-align: center; }
/* The house tagline (brugerbeslutning 14/10-2026): carried through all
   material, followed by the shop CTA with AIR between them (ejerrettelse
   15/10-2026). */
footer.site .tagline { margin: 0 0 18px; font-size: 15px; font-weight: 700;
                       color: var(--text); letter-spacing: 0.2px; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site strong { color: var(--text); }
/* The shop teaser (ejerrettelse 15/10-2026): up to three overlapping
   product thumbnails above the CTA line, live from the shop, muted on
   purpose: it must invite a click, never upstage the game. Each
   thumbnail clicks through to ITS product (ejerrettelse samme dag). */
.shop-cta { display: inline-block; }
.shop-thumbs { display: flex; justify-content: center; margin-bottom: 8px; }
.shop-thumbs:empty { display: none; }
.shop-thumbs img { width: 66px; height: 66px; border-radius: 50%;
                   object-fit: cover; background: var(--card); display: block;
                   border: 2px solid var(--bg);
                   box-shadow: 0 0 0 1px var(--line); }
.shop-thumbs a + a { margin-left: -16px; }
.shop-line { display: block; line-height: 1.6; }

/* ---- The double opt-in note (docs/19 etape 2): the one thing left
   between a signup and the draw, so it must be unmissable. ---- */
.confirm-note {
  margin: 0 0 16px; padding: 14px 16px; text-align: left;
  background: #fdf4e6; border-radius: 14px;   /* no borders on boxes (ejer) */
}
.confirm-note-text { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.confirm-note .btn-plain { height: 36px; font-size: 13px; color: var(--muted); }
.confirm-note .form-note { min-height: 0; margin-top: 6px; }

/* A pill button that is really a link (the confirm page's way back). */
a.btn-link { display: inline-flex; align-items: center; justify-content: center;
             text-decoration: none; line-height: 1; }

/* ---- The terms page (docs/19 afsnit 4): quiet reading typography. ---- */
.terms { text-align: left; }
.terms h1 { font-size: 22px; }
.terms h2 { font-size: 14px; margin: 18px 0 6px; }
.terms p, .terms li { font-size: 13px; line-height: 1.6; color: var(--text); }
/* Links in the terms text are underlined, never browser blue (ejer-
   rettelse 15/10-2026); the back-to-game pill below is not affected. */
.terms p a, .terms li a { color: inherit; text-decoration: underline; }
.terms ul { margin: 4px 0; padding-left: 20px; }
.terms .muted { color: var(--muted); }
.terms .countries { color: var(--muted); font-size: 12px; line-height: 1.7; }