/* amber.fun base: tokens, type, and the pieces every page shares. The look (DESIGN.md, 20 Oct): honey ground, ink
   for text and the one action, cream for Drop and panels, amber for coins only, red and green for flags only. */
:root {
  --honey: #F39A22; --honey-deep: #E0861A; --honey-lite: #F7B456;
  --ink: #14100C; --ink-2: #221B15; --cream: #FFF4DF; --paper: #FFFAF0;
  --amber: #FFB42A; --risk: #E5484D; --risk-ink: #B4232A; --clean: #22A06B; --clean-ink: #157A50; --warn: #C27A00;
  --line: rgba(20, 16, 12, .12); --line-2: rgba(20, 16, 12, .2);
  --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 160ms; --mid: 200ms;
  --r: 12px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 500 15px/1.5 var(--text); color: var(--ink); background: var(--honey); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
::selection { background: var(--ink); color: var(--cream); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the thin live status bar */
.status { position: relative; z-index: 5; height: 32px; display: flex; align-items: center; gap: 22px; padding: 0 clamp(16px, 3.5vw, 56px); background: var(--ink); color: #CFC6B8; font: 500 12px/1 var(--mono); white-space: nowrap; overflow: hidden; }
.status b { color: var(--cream); font-weight: 600; font-variant-numeric: tabular-nums; }
.status .dot { display: inline-flex; align-items: center; gap: 7px; }
.status .dot i { width: 7px; height: 7px; border-radius: 50%; background: #8a8175; }
.status .dot[data-s="live"] { color: #6EE2A4; } .status .dot[data-s="live"] i { background: #3DDC84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .18); animation: pulse 2.4s var(--ease) infinite; }
.status .dot[data-s="reconnecting"], .status .dot[data-s="connecting"] { color: #F3C96B; } .status .dot[data-s="reconnecting"] i, .status .dot[data-s="connecting"] i { background: #F3C96B; }
.status .dot[data-s="off"] { color: #FF8B8E; } .status .dot[data-s="off"] i { background: var(--risk); }
.status .sp { margin-left: auto; display: flex; gap: 14px; }
.status a { color: #CFC6B8; } .status a:hover { color: var(--cream); }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(61, 220, 132, 0); } }

/* the logo lock-up */
.lock { display: inline-flex; align-items: center; gap: 9px; }
.lock .wm { font: 800 30px/1 var(--display); letter-spacing: -0.035em; }
.lock .tld { font: 500 13px/1 var(--mono); opacity: .6; align-self: flex-end; padding-bottom: 4px; margin-left: -5px; }

/* buttons: one construction, two weights */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r); font: 700 16px/1 var(--text); white-space: nowrap; transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.ink { background: var(--ink); color: var(--cream); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 8px 20px -10px rgba(20, 16, 12, .7); }
.btn.ink:hover { background: #2A221B; }
.btn.ghost { box-shadow: inset 0 0 0 1.5px rgba(20, 16, 12, .35); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: rgba(20, 16, 12, .04); }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
.btn[disabled], .btn.off { opacity: .55; cursor: default; pointer-events: none; }
.btn .soon { font: 600 11px/1 var(--mono); padding: 4px 6px; border-radius: 6px; background: rgba(20, 16, 12, .1); letter-spacing: .04em; }

kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; font: 600 11px/1 var(--mono); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; font: 600 12px/1 var(--text); border: 1px solid var(--line); background: #fff; white-space: nowrap; transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.chip.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
button.chip:hover:not(.on) { border-color: var(--line-2); }
.chip .n { font: 600 11px/1 var(--mono); opacity: .6; }

/* flags: red for risk, amber-brown for a warning, green for a clean read, ink for info */
.flag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 7px; font: 600 12px/1 var(--text); white-space: nowrap; }
.flag em { font: 700 12px/1 var(--mono); font-style: normal; font-variant-numeric: tabular-nums; }
.flag.risk { background: rgba(229, 72, 77, .12); color: var(--risk-ink); }
.flag.warn { background: rgba(243, 154, 34, .16); color: #8A4B00; }
.flag.ok { background: rgba(34, 160, 107, .12); color: var(--clean-ink); }
.flag.info { background: rgba(20, 16, 12, .06); color: rgba(20, 16, 12, .75); }
.flag.wait { background: rgba(20, 16, 12, .05); color: rgba(20, 16, 12, .5); }
.flag.wait i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blinkdot 1.2s steps(2) infinite; }
@keyframes blinkdot { 50% { opacity: .2; } }

.coin { flex: none; display: block; }
.coin svg { width: 100%; height: 100%; }

/* numbers that change in place */
.tick { animation: tick .6s var(--ease); }
@keyframes tick { 0% { background: rgba(255, 180, 42, .45); } 100% { background: transparent; } }

/* placeholders while loading, never spinners */
.ph { border-radius: 6px; background: linear-gradient(90deg, rgba(20, 16, 12, .06), rgba(20, 16, 12, .11), rgba(20, 16, 12, .06)); background-size: 200% 100%; animation: ph 1.4s linear infinite; }
@keyframes ph { to { background-position: -200% 0; } }

[data-copy] { cursor: copy; }
[data-copy].copied { color: var(--clean-ink) !important; }

/* the honest small print */
.fine { font: 500 12px/1.6 var(--mono); opacity: .66; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }