@font-face { font-family: 'Fraunces'; font-weight: 300; font-style: normal; font-display: swap; src: url('../fonts/fraunces-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/fraunces-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/fraunces-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fonts/fraunces-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }

:root {
  --paper: #f6ecdc;
  --paper-dim: rgba(246, 236, 220, 0.72);
  --paper-faint: rgba(246, 236, 220, 0.45);
  --ink: #1d140d;
  --bark: rgba(28, 18, 11, 0.58);
  --bark-solid: #2a1b10;
  --ember: #e2763a;
  --maple: #c8452a;
  --gold: #e9b04f;
  --me: #f3d9a4;      /* your wind: pale gold */
  --them: #a9d3e8;    /* the other wind: cool sky blue */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #2a1b10;
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#veil {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 60%, rgba(20, 12, 6, 0) 40%, rgba(20, 12, 6, 0.55) 100%);
  opacity: 0; transition: opacity 0.6s ease;
}
body.menu-open #veil { opacity: 1; }
.hidden { display: none !important; }
.ico { width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }

/* ---------- screens ---------- */
#screens { position: fixed; inset: 0; pointer-events: none; }
.screen {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: calc(24px + var(--safe-t)) calc(20px + var(--safe-r)) calc(24px + var(--safe-b)) calc(20px + var(--safe-l));
  pointer-events: auto; overflow-y: auto;
}
.center { text-align: center; max-width: 520px; width: 100%; }
.kicker {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--paper-dim);
}
.wordmark {
  font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 13vw, 112px); line-height: 0.95;
  letter-spacing: -0.02em; margin: 10px 0 18px; color: var(--paper);
  text-shadow: 0 2px 30px rgba(40, 20, 6, 0.35);
}
.title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 7vw, 52px); margin: 8px 0 12px; line-height: 1.05; }
.lede { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--paper-dim); margin: 0 auto 20px; max-width: 30em; font-weight: 300; }
.quiet { font-size: 13px; color: var(--paper-faint); margin: 14px 0 0; }
.loadline { width: 180px; height: 1px; background: rgba(246, 236, 220, 0.2); margin: 26px auto 0; overflow: hidden; }
.loadline i { display: block; height: 100%; width: 0; background: var(--paper); transition: width 0.25s ease; }

.menu {
  width: 100%; max-width: 560px; margin-right: auto; margin-left: max(0px, calc(8vw - 40px));
  text-shadow: 0 1px 14px rgba(30, 15, 5, 0.45);
}
@media (max-width: 760px) { .menu { margin: 0 auto; } }
.menu .lede { margin-left: 0; }
.rules { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; }
.rules li { display: flex; gap: 12px; align-items: baseline; font-size: 14px; color: var(--paper-dim); line-height: 1.4; }
.rules li > span:first-child { color: var(--gold); font-size: 16px; }
.rules b { color: var(--paper); font-weight: 600; }

.name { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); }
.name input {
  font-family: var(--serif); font-size: 20px; color: var(--paper); background: transparent; border: 0;
  border-bottom: 1px solid rgba(246, 236, 220, 0.3); padding: 4px 2px; width: 200px; outline: none; letter-spacing: 0; text-transform: none;
  user-select: text; -webkit-user-select: text;
}
.name input:focus { border-bottom-color: var(--paper); }
.name input::placeholder { color: rgba(246, 236, 220, 0.35); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.center .actions { justify-content: center; }
.actions.col { flex-direction: column; align-items: center; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.primary, .ghost {
  display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 13px 22px; font-size: 15px;
  font-weight: 500; letter-spacing: 0.01em; transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}
.primary { background: var(--paper); color: var(--ink); border: 1px solid var(--paper); box-shadow: 0 6px 30px rgba(30, 14, 4, 0.25); }
.primary:hover { background: #fff7ea; }
.ghost { background: rgba(28, 18, 11, 0.32); color: var(--paper); border: 1px solid rgba(246, 236, 220, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ghost:hover { border-color: rgba(246, 236, 220, 0.7); }
.primary:active, .ghost:active { transform: scale(0.97); }
.primary:disabled, .ghost:disabled { opacity: 0.45; cursor: default; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 12px;
  background: rgba(28, 18, 11, 0.3); border: 1px solid rgba(246, 236, 220, 0.22); color: var(--paper-dim);
}
.settings { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.link { background: none; border: 0; color: var(--paper-dim); text-decoration: underline; padding: 0; font-size: 13px; }

.panel {
  background: var(--bark); border: 1px solid rgba(246, 236, 220, 0.14); border-radius: 22px; padding: 30px 26px 26px;
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 20px 80px rgba(20, 10, 3, 0.4);
}
.linkbox { display: flex; gap: 8px; margin: 4px auto 18px; max-width: 420px; }
.linkbox input {
  flex: 1; min-width: 0; background: rgba(246, 236, 220, 0.08); border: 1px solid rgba(246, 236, 220, 0.2); border-radius: 10px;
  color: var(--paper); padding: 9px 11px; font: 13px var(--sans); user-select: all; -webkit-user-select: all;
}

.versus { display: flex; justify-content: center; align-items: stretch; gap: 14px; margin: 6px 0 18px; }
.versus .side { flex: 1; max-width: 190px; padding: 14px 10px; border-radius: 14px; background: rgba(246, 236, 220, 0.06); }
.versus .side.win { background: rgba(246, 236, 220, 0.13); }
.versus .nm { font-size: 13px; color: var(--paper-dim); display: flex; align-items: center; justify-content: center; gap: 7px; }
.versus .sc { font-family: var(--serif); font-size: 40px; font-weight: 400; margin-top: 4px; font-variant-numeric: tabular-nums; }
.versus .side.me .dot { background: var(--me); }
.versus .side.them .dot { background: var(--them); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.stats { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 14px; margin: 0 auto; max-width: 340px; font-size: 13px; text-align: left; }
.stats dt { color: var(--paper-faint); }
.stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--paper-dim); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
.score {
  position: absolute; top: calc(14px + var(--safe-t)); padding: 8px 14px 9px; border-radius: 14px;
  background: linear-gradient(rgba(28, 18, 11, 0.42), rgba(28, 18, 11, 0.28));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); min-width: 120px;
}
.score.me { left: calc(14px + var(--safe-l)); }
.score.them { right: calc(14px + var(--safe-r)); text-align: right; }
.score .who { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim); display: flex; gap: 7px; align-items: center; }
.score.them .who { justify-content: flex-end; }
.score.me .dot { background: var(--me); box-shadow: 0 0 10px var(--me); }
.score.them .dot { background: var(--them); box-shadow: 0 0 10px var(--them); }
.score .num { font-family: var(--serif); font-size: 34px; line-height: 1.05; font-weight: 400; }
.score.bump .num b { color: #ffb08a; }
.score.gain .num b { color: #fff4d6; }
#hud-clock {
  position: absolute; top: calc(18px + var(--safe-t)); left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-size: 26px; padding: 4px 14px; border-radius: 12px; color: var(--paper);
  text-shadow: 0 1px 12px rgba(30, 15, 5, 0.6);
}
#hud-clock.low { color: #ffcf9a; }
#minimap {
  position: absolute; left: calc(14px + var(--safe-l)); bottom: calc(14px + var(--safe-b)); width: 132px; height: 132px;
  border-radius: 50%; opacity: 0.92;
}
#hud-center {
  position: absolute; top: 34%; left: 0; right: 0; text-align: center; font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 12vw, 104px); text-shadow: 0 2px 40px rgba(30, 15, 5, 0.5); opacity: 0; transition: opacity 0.3s ease;
}
#hud-center.show { opacity: 1; }
#hud-center small { display: block; font-family: var(--sans); font-size: 14px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--paper-dim); margin-top: 6px; }
#hud-feed { position: absolute; top: calc(92px + var(--safe-t)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#hud-feed .msg {
  font-size: 14px; padding: 7px 14px; border-radius: 999px; background: rgba(28, 18, 11, 0.45); color: var(--paper);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: feed 2.6s ease forwards;
}
#hud-feed .msg b { font-weight: 600; }
#hud-feed .msg.good b { color: var(--me); }
#hud-feed .msg.bad b { color: #ffab85; }
@keyframes feed { 0% { opacity: 0; transform: translateY(-6px); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#hud-hint {
  position: absolute; bottom: calc(26px + var(--safe-b)); left: 50%; transform: translateX(-50%); font-size: 14px; color: var(--paper-dim);
  text-shadow: 0 1px 10px rgba(30, 15, 5, 0.7); text-align: center; transition: opacity 0.6s ease; max-width: 80vw;
}
#hud-pointer { position: absolute; width: 0; height: 0; }
#hud-pointer .arrow {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--them); box-shadow: 0 0 12px rgba(169, 211, 232, 0.7);
}
#hud-pointer .arrow::after {
  content: ''; position: absolute; left: 50%; top: -9px; margin-left: -5px; border: 5px solid transparent; border-bottom: 7px solid var(--them);
  transform-origin: 5px 18px; transform: rotate(var(--a, 0deg));
}
.round {
  position: absolute; top: calc(78px + var(--safe-t)); right: calc(14px + var(--safe-r)); width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(28, 18, 11, 0.35); border: 1px solid rgba(246, 236, 220, 0.2);
  color: var(--paper-dim); pointer-events: auto; font-size: 15px;
}
.gust {
  position: absolute; right: calc(22px + var(--safe-r)); bottom: calc(26px + var(--safe-b)); width: 96px; height: 96px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: auto;
  background: rgba(246, 236, 220, 0.14); border: 1px solid rgba(246, 236, 220, 0.4); color: var(--paper);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 26px; touch-action: none;
}
.gust em { font-style: normal; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.gust .ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); }
.gust .ring circle { fill: none; stroke: var(--me); stroke-width: 3; stroke-dasharray: 289; stroke-dashoffset: 0; stroke-linecap: round; }
.gust.cooling { opacity: 0.55; }
#stick { position: absolute; width: 0; height: 0; }
#stick::before {
  content: ''; position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid rgba(246, 236, 220, 0.3);
}
#stick i { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: rgba(246, 236, 220, 0.35); }
@media (max-width: 600px) {
  .score { min-width: 0; padding: 6px 11px 7px; }
  .score .num { font-size: 26px; }
  #hud-clock { font-size: 20px; top: calc(16px + var(--safe-t)); }
  #minimap { width: 96px; height: 96px; bottom: auto; top: calc(88px + var(--safe-t)); }
  .round { top: calc(70px + var(--safe-t)); }
  .lede { font-size: 16px; }
}

/* the gust gauge on a computer: smaller, out of the way, with its key */
.gust kbd { display: none; font: 600 10px var(--sans); letter-spacing: 0.08em; color: var(--paper-faint); }
.gust.desk { width: 74px; height: 74px; font-size: 20px; pointer-events: auto; }
.gust.desk em { display: none; }
.gust.desk kbd { display: block; }
.gust.ready { animation: ready 0.6s ease-out; }
@keyframes ready { 0% { box-shadow: 0 0 0 0 rgba(243, 217, 164, 0.7); } 100% { box-shadow: 0 0 0 18px rgba(243, 217, 164, 0); } }
#hud-tag {
  position: absolute; transform: translate(-50%, -100%); font-size: 12px; letter-spacing: 0.04em; white-space: nowrap;
  color: var(--them); text-shadow: 0 1px 8px rgba(20, 10, 3, 0.8); pointer-events: none;
}
#hud-pops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pop {
  position: absolute; transform: translate(-50%, -50%); font-family: var(--serif); font-size: 22px; color: var(--me);
  text-shadow: 0 1px 10px rgba(30, 15, 5, 0.6); animation: pop 1.1s ease-out forwards;
}
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, -30%); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -180%); } }