/* W.I.G. tokens. The game wears the website's system (theme/assets/mp-tokens.css
   and mp-brutal.css, the 2026-08-10 store handoff): white pages, ink text,
   3px ink borders, hard offset shadows with zero blur, Passion One for display,
   Instrument Sans for everything else, JetBrains Mono only for codes and labels.
   Quin's call, 2026-09-03: the game has to look like mulletparty.com. */

@font-face { font-family: "Passion One"; src: url("../fonts/PassionOne-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Passion One"; src: url("../fonts/PassionOne-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  /* colour, the store's values */
  --ink: #17102B;
  --deep: #0E0A1C;
  --white: #FFFFFF;
  --body: #4A4458;             /* secondary copy on white */
  --pink: #FF3D8A;             /* the one primary button per screen, earned I, stamps, MOTHERF*CKER */
  --pink-deep: #D6216B;        /* pink text on white (AA) */
  --pink-tint: #FFE3F0;
  --pink-wash: #FFF5F9;
  --violet: #7B5CFF;           /* MISCHIEF, offset shadows */
  --violet-wash: #F4F1FF;
  --cyan: #22D3EE;             /* MEEK only; accent, never a surface */
  --mint: #22E5A2;             /* live dot, paid, REDEEMED, earned G */
  --mint-deep: #0E8A5F;        /* mint text on white */
  --mint-wash: #DFFBF0;
  --blue: #2B6BFF;             /* host-only controls, links */
  --blue-wash: #E9F0FF;
  --ink-75: rgba(23, 16, 43, .75);
  --ink-55: rgba(23, 16, 43, .55);
  --ink-35: rgba(23, 16, 43, .35);
  --ink-12: rgba(23, 16, 43, .12);
  /* on the ink card (the scoreboard) */
  --white-55: rgba(255, 255, 255, .55);
  --white-35: rgba(255, 255, 255, .35);
  --white-28: rgba(255, 255, 255, .28);
  --white-12: rgba(255, 255, 255, .12);

  /* type */
  --display: "Passion One", "Arial Narrow", sans-serif;
  --sans: "Instrument Sans", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* shape and space */
  --pad: 18px;
  --status: 12px;
  --radius: 14px;
  --radius-card: 16px;
  --radius-lg: 24px;
  --border: 3px solid var(--ink);
  --border-thin: 2px solid var(--ink);
  --shadow: 5px 5px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --tap: 44px;

  /* motion */
  --ease: cubic-bezier(.2, .9, .2, 1);
  --t-tile: 240ms;
  --t-stamp: 160ms;
  --t-wipe: 320ms;
  --t-fade: 120ms;
  --t-ticker: 28s;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body { min-height: 100%; background: var(--white); color: var(--ink); font: 400 16px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--blue); }
a:hover { color: var(--pink); }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--pink); color: #fff; }

/* ---------- type ---------- */
.w-display, .w-h1, .w-h2, .w-title, .w-code { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .92; letter-spacing: 0; }
.w-h1 { font-size: 46px; }
.w-h2 { font-size: 40px; }
.w-h2--sm { font-size: 34px; }
.w-h2--lg { font-size: 46px; }
.w-h2 .pink, .w-h1 .pink { color: var(--pink); }
.w-body { font: 400 16px/1.45 var(--sans); }
.w-body--lg { font-size: 17px; }
.w-hint { font: 400 14px/1.4 var(--sans); color: var(--body); }
.w-strong { font-weight: 700; }
.w-label { font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--body); }
.w-label--xs { font-size: 10px; letter-spacing: .16em; }
.w-code { font-size: 48px; letter-spacing: .04em; }
.w-code--host { font-size: 96px; }
.w-mono { font-family: var(--mono); }

/* ---------- buttons: pills with a hard shadow, one pink primary per screen ---------- */
.w-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 62px; padding: 0 22px;
  background: var(--pink); color: var(--ink);
  border: var(--border); border-radius: 999px; box-shadow: var(--shadow);
  font: 700 19px/1 var(--sans); letter-spacing: -.01em;
  user-select: none; transition: transform .12s ease, box-shadow .12s ease;
}
.w-btn:active, .w-btn:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.w-btn--tall { min-height: 68px; font-size: 21px; }
.w-btn--xl { min-height: 72px; font-size: 22px; }
.w-btn--ink { background: var(--ink); color: #fff; box-shadow: 5px 5px 0 var(--pink); }
.w-btn--ink:active, .w-btn--ink:hover { box-shadow: 2px 2px 0 var(--pink); }
.w-btn--white { background: #fff; color: var(--ink); }
.w-btn.is-busy, .land__go.is-busy { opacity: .6; cursor: progress; }
.w-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: var(--shadow); }
.w-btn--quiet { background: #fff; color: var(--ink); min-height: var(--tap); padding: 0 16px; font: 700 14px/1 var(--sans); box-shadow: var(--shadow-sm); border-width: 2px; }
.w-btn--blue { background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--blue); min-height: var(--tap); padding: 0 16px; font: 700 14px/1 var(--sans); }
.w-link { display: inline-flex; align-items: center; min-height: var(--tap); font: 700 15px/1 var(--sans); color: var(--blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; background: none; border: 0; padding: 0; }
.w-link:hover { color: var(--pink); }
.w-link--dim { color: var(--body); font-weight: 600; }

/* ---------- cards, wells, inputs ---------- */
.w-card, .w-well { background: #fff; color: var(--ink); border: var(--border); border-radius: var(--radius-card); padding: 16px; box-shadow: 6px 6px 0 var(--shadow-c, var(--ink)); }
.w-well { --shadow-c: var(--violet); }
.w-input { width: 100%; min-height: 60px; padding: 0 16px; background: #fff; border: var(--border); border-radius: 14px; color: var(--ink); font: 700 20px/1 var(--sans); box-shadow: var(--shadow-sm); }
.w-input::placeholder { color: var(--ink-35); font-weight: 600; }
.w-input:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* code cells: 4 letters, auto-advance, auto-uppercase */
.w-cells { display: flex; gap: 8px; }
.w-cell {
  flex: 1 1 0; min-width: 0; width: 100%; height: 56px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: var(--border); border-radius: 12px; box-shadow: var(--shadow-sm);
  font: 700 24px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); text-align: center; caret-color: var(--pink); padding: 0;
}
.w-cell::placeholder { color: var(--ink-35); }
.w-cell--lg { height: 72px; font-size: 32px; }
.w-cell.is-filled { background: var(--pink-tint); box-shadow: 3px 3px 0 var(--pink); }
.w-cell:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* ---------- letter tiles: outlines on white, fills when earned ---------- */
.w-tiles { display: flex; gap: 6px; }
.w-tile {
  width: 44px; height: 52px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink-35); border-radius: 10px;
  color: var(--ink-35); font: 700 26px/1 var(--sans);
}
.w-tiles--dense .w-tile { width: 40px; height: 48px; font-size: 24px; }
.w-tiles--mini .w-tile { width: 32px; height: 40px; font-size: 20px; }
.w-tile.is-earned { border: 2px solid var(--ink); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); animation: w-drop var(--t-tile) var(--ease) both; }
.w-tile.is-earned.w-tile--w { background: #fff; }
.w-tile.is-earned.w-tile--i { background: var(--pink); }
.w-tile.is-earned.w-tile--g { background: var(--mint); }
@keyframes w-drop { from { transform: translateY(-100%); opacity: 0; } }

/* ---------- tier pills, the 6a colours ---------- */
.w-pill {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 5px 9px; border-radius: 999px;
  font: 800 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.w-pill--meek { background: var(--cyan); color: var(--ink); }
.w-pill--mischief { background: var(--violet); color: #fff; }
.w-pill--mf { background: var(--pink); color: #fff; }
.w-pill--outline { background: #fff; border: 2px solid var(--pink); color: var(--pink-deep); }   /* OWES PROOF */
.w-pill--mint { background: var(--mint); color: var(--ink); }
.w-pill--blue { background: var(--blue); color: #fff; }                                              /* YOU RUN THIS */
.w-pill--ghost { background: #fff; border: 2px solid var(--ink); color: var(--ink); }

/* ---------- stickers: the store's rotated labels ---------- */
.w-sticker { display: inline-flex; align-items: center; padding: 8px 13px; border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); background: #fff; color: var(--ink); font: 800 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.w-sticker--pink { background: var(--pink); color: #fff; transform: rotate(2deg); }
.w-sticker--mint { background: var(--mint); color: var(--ink); transform: rotate(-3deg); }
.w-sticker--violet { background: var(--violet); color: #fff; transform: rotate(-1deg); }
.w-sticker--ink { background: var(--ink); color: #fff; transform: rotate(-2deg); }

/* ---------- stamps: one per screen ---------- */
.w-stamp {
  display: inline-flex; padding: 8px 14px;
  border: 3px solid var(--pink); border-radius: 6px; color: var(--pink-deep); background: #fff;
  font: 700 22px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  transform: rotate(-5deg);
  animation: w-slam var(--t-stamp) var(--ease) both;
}
.w-stamp--mint { border-color: var(--mint-deep); color: var(--mint-deep); }
.w-stamp--ink { border-color: var(--ink); color: var(--ink); }
@keyframes w-slam { from { transform: rotate(-5deg) scale(1.3); } to { transform: rotate(-5deg) scale(1); } }

/* titles */
.w-title { font-size: 60px; line-height: .88; }
.w-wussy { position: relative; display: inline-block; }
.w-wussy .w { position: relative; display: inline-block; }
.w-wussy .w::after { content: ""; position: absolute; left: -4%; right: -4%; top: 50%; height: 3px; background: var(--pink); }
.w-wussy .p { position: absolute; left: -4px; top: -9px; color: var(--pink); transform: rotate(-12deg); font-size: .55em; }

/* ---------- live dot and pulses ---------- */
.w-live { display: inline-flex; align-items: center; gap: 6px; font: 800 11px/1 var(--sans); letter-spacing: .12em; color: var(--mint-deep); }
.w-live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px var(--mint-wash); animation: w-pulse 2s ease-in-out infinite; }
.w-pulse { animation: w-pulse 2s ease-in-out infinite; }
@keyframes w-pulse { 50% { opacity: .35; } }

/* ---------- ticker: the store's ink marquee ---------- */
.w-ticker { overflow: hidden; white-space: nowrap; background: var(--ink); color: #fff; padding: 11px 0; border-top: var(--border); border-bottom: var(--border); }
.w-ticker__reel { display: inline-block; font: 700 18px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; animation: w-ticker var(--t-ticker) linear infinite; }
.w-ticker__reel span { padding: 0 16px; }
.w-ticker__reel span:nth-child(5n+2) { color: var(--pink); }
.w-ticker__reel span:nth-child(5n+4) { color: var(--mint); }
@keyframes w-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- the third-letter wipe ---------- */
.w-wipe { position: fixed; inset: 0; background: var(--pink); z-index: 100; transform-origin: left; animation: w-wipe var(--t-wipe) var(--ease) both; pointer-events: none; }
@keyframes w-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- app frame ---------- */
.w-screen { min-height: 100dvh; display: flex; flex-direction: column; padding: var(--status) var(--pad) 30px; gap: 16px; }
.w-screen__foot { margin-top: auto; padding-top: 8px; display: grid; gap: 12px; }
.w-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); }
.w-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font: 700 14px/1 var(--sans); color: var(--ink); }
.w-step { font: 700 11px/1 var(--mono); letter-spacing: .14em; color: var(--body); text-transform: uppercase; text-align: right; }

/* the brand strip every screen wears, injected by app.js */
.w-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px var(--pad) 8px; border-bottom: var(--border); background: #fff; }
.w-brand__mark { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.w-brand__mark img { width: 44px; height: 44px; margin: -6px 0 -8px; }
.w-brand__word { font: 400 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.w-brand__word span { color: var(--pink); }
.w-brand__tag { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); background: var(--mint); color: var(--ink); font: 800 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.w-brand__tag--code { font-family: var(--mono); letter-spacing: .12em; }

/* ---------- reduced motion: everything becomes a 120ms fade ---------- */
@media (prefers-reduced-motion: reduce) {
  .w-tile.is-earned, .w-stamp { animation: w-fade var(--t-fade) ease-out both; }
  .w-wipe { animation: w-flash var(--t-fade) ease-out both; }
  .w-ticker__reel, .w-live::before, .w-pulse { animation: none; }
  .w-btn { transition: none; }
  @keyframes w-fade { from { opacity: 0; } }
  @keyframes w-flash { from { opacity: 1; } to { opacity: 0; } }
}