/* Hootscape theme.css — design tokens (DESIGN_BRIEF §2.1), fonts (§2.2), base reset.
   Load order: theme.css → ui.css → panels.css → login.css → mobile.css.
   The game is always dark; there is no prefers-color-scheme variant here (that belongs to the hiscores/404 web pages only).
   Fonts arrive through a <link> that public/js/ui/chrome.js loadFonts() injects (Google Fonts, display=swap). */

:root {
  /* ---- Chrome: warm stone and owl-oak bark ---- */
  --stone-base: #3E3529;
  --stone-hi: #6E5C3F;
  --stone-lo: #241E16;
  --stone-fill: #4A3F31;
  --bark: #4F3B22;
  --bark-grain-hi: #6B5230;
  --bark-grain-lo: #3A2A17;
  --parchment: #D9C4A0;
  --parchment-ink: #3B2A14;
  --parchment-red: #8E1B1B;
  --parchment-rule: #B89C6A;
  --chat-paper: #BFB8A8;
  --menu-bg: #000000;
  --menu-head: #5D5447;
  --slot-hover: rgba(255,255,255,.12);
  --amber: #FFB43A;
  --amber-deep: #B8701C;
  --gilt: #E7C56A; /* coins only */
  --scroll-track: #5A3A28;

  /* ---- Text (OSRS semantics) ---- */
  --txt-orange: #FF981F;
  --txt-yellow: #FFFF00;
  --txt-cyan: #00FFFF;
  --txt-white: #FFFFFF;
  --txt-red: #EF1020;
  --txt-green: #00FF00;
  --txt-grey: #9F9F9F;
  --txt-party: #7E3EFF;
  --txt-clan: #C77DFF;
  --txt-owllink: #FFC857;
  --txt-bot: #FF5C8A;
  --txt-input: #0000FF;

  /* ---- Hitsplats ---- */
  --hit-red: #C80000;
  --hit-blue: #2456C8;
  --hit-poison: #2A8C2A;
  --hit-heal: #3FB84F;

  /* ---- World (night family; mirrored for the canvas in chrome.js PALETTE) ---- */
  --sky-top: #0A0F2B;
  --sky-horizon: #1B2550;
  --moon: #F2EFD8;
  --moonlight: #AFC3FF;
  --grass-night: #2B4B2A;
  --grass-lit: #4F7A3B;
  --dirt: #8A6F4B;
  --road: #6E6E6E;
  --water: #1E3F6E;
  --water-spec: #7FB2FF;
  --canopy: #1F3A22;
  --canopy-lit: #5C8A3A;
  --torch: #FF8C1A;
  --owl-eye: #FFD966;
  --firefly: #C9F23F;
  --sand: #B8945A;
  --sand-moon: #6E5A3A;
  --wild-ash: #3A3326;
  --wild-ash-hi: #595048;
  --marsh: #3F5A3A;
  --marsh-fog: rgba(170,200,180,.25);
  --lava: #E85D2B;
  --snow: #DDE6EE;
  --dusk-rose: #8C5A7A;
  --dusk-ember: #E07A4F;
  --owlery-cyan: #2FB7B0;

  /* ---- Owl-eye minimap ---- */
  --iris: #D98A1E;
  --iris-stroke-dk: #B5700F;
  --iris-stroke-lt: #F2B04B;
  --sclera: #F4ECD8;
  --lid: #3E3529;

  /* ---- Equipment palette swaps ---- */
  --eq-bronze: #A0714F;
  --eq-iron: #7A7A7A;
  --eq-steel: #B8B8B8;
  --eq-black: #2E2E2E;
  --eq-mithril: #3F5FA8;
  --eq-adamant: #2E7A4F;
  --eq-rune: #4A8FBF;
  --eq-dragon: #B23A2F;

  /* ---- Typography ---- */
  --font-ui: "VT323", "Courier New", monospace;
  --font-display: "Pixelify Sans", "VT323", "Courier New", monospace;
  --font-blackletter: "UnifrakturCook", serif;
  --fs-body: 18px;
  --fs-header: 20px;
  --fs-orb: 22px;
  --fs-min: 18px;
  --outline-ink: #241E16;

  /* ---- Material textures (chrome.js overrides --noise and --bark-grain with generated pixel tiles) ---- */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
  --bark-grain: repeating-linear-gradient(90deg, var(--bark-grain-hi) 0 1px, transparent 1px 3px, var(--bark-grain-lo) 3px 4px, transparent 4px 6px);

  /* ---- Motion ---- */
  --t-toast: 120ms;
  --t-xp: 2s;
  --t-hitsplat: 1s;
  --t-report: 300ms;
  --t-stamp: 300ms;
  --t-blink: 7s; /* corner-owl blink base; applyChrome randomises --blink-period 7–13s and --blink-delay */

  /* ---- Layout (desktop 1600x1000 reference, §3.1; compact and phone overrides live in ui.css / mobile.css) ---- */
  --tile: 32px;
  --rail-w: 288px;
  --rail-h: 544px;
  --rail-top: 256px;
  --tab-w: 41px;
  --tab-h: 40px;
  --panel-h: 464px;
  --minimap-w: 288px;
  --minimap-h: 248px;
  --eye-disc: 176px;
  --eye-cx: 168px; /* relative to the HUD box: (1480-1312) */
  --eye-cy: 108px;
  --orb: 36px;
  --orb-roost: 44px;
  --orb-x: 1312px;
  --chat-w: 560px;
  --chat-h: 200px;
  --chat-min: 160px;
  --chat-max: 400px;
  --chat-line: 16px;
  --chat-tabs: 24px;
  --chat-input: 24px;
  --toast-w: 480px;
  --toast-h: 40px;
  --toast-x: 560px;
  --modal-w: 520px;
  --modal-h: 360px;
  --modal-dim: rgba(0,0,0,.4);
  --slot-w: 48px;
  --slot-h: 44px;
  --ticker-w: 368px;
  --ticker-h: 28px;
  --party-w: 240px;
  --party-row: 28px;
  --xp-x0: 1216px;
  --xp-x1: 1300px;
  --xp-right: 300px; /* 1600 - x1: the drop column is anchored to the right edge so it hugs the orbs at any width */
  --xp-w: 84px;     /* x1 - x0 */
  --xp-y: 64px;
  --map-border: 48px;
  --scrollbar: 16px;
}

/* ---------- Font faces are loaded by chrome.js loadFonts(); this block is the no-JS fallback request ---------- */
/* <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=Pixelify+Sans:wght@700&family=UnifrakturCook:wght@700&display=swap"> */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
html { background: #000; color: var(--txt-orange); font: var(--fs-body)/1.1 var(--font-ui); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow: hidden; position: fixed; inset: 0; background: var(--sky-top); overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; font-family: var(--font-ui); font-size: var(--fs-body); }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; }
button { cursor: pointer; }
img, canvas, svg { display: block; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.pixel, .pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }
input[type="text"], input[type="password"], input[type="search"], textarea { user-select: text; -webkit-user-select: text; }
a { color: var(--txt-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--amber-deep); color: var(--txt-white); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type scale ---------- */
.ui, .t-body { font-family: var(--font-ui); font-size: var(--fs-body); }
.t-header { font-family: var(--font-ui); font-size: var(--fs-header); }
.t-orbnum { font-family: var(--font-ui); font-size: var(--fs-orb); }
.display, .t-display { font-family: var(--font-display); font-weight: 700; letter-spacing: .5px; }
.outline, .t-outline { text-shadow: 1px 0 0 var(--outline-ink), -1px 0 0 var(--outline-ink), 0 1px 0 var(--outline-ink), 0 -1px 0 var(--outline-ink), 1px 1px 0 var(--outline-ink), -1px -1px 0 var(--outline-ink), 1px -1px 0 var(--outline-ink), -1px 1px 0 var(--outline-ink); }
.t-shadow { text-shadow: 1px 1px 0 var(--outline-ink); }
.t-italic { font-style: italic; }
.t-center { text-align: center; }
.t-right { text-align: right; }
.t-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Text colour utilities (OSRS semantics) ---------- */
.t-orange { color: var(--txt-orange); }
.t-yellow { color: var(--txt-yellow); }
.t-cyan { color: var(--txt-cyan); }
.t-white { color: var(--txt-white); }
.t-red { color: var(--txt-red); }
.t-green { color: var(--txt-green); }
.t-grey { color: var(--txt-grey); }
.t-party { color: var(--txt-party); }
.t-clan { color: var(--txt-clan); }
.t-owllink { color: var(--txt-owllink); }
.t-bot { color: var(--txt-bot); }
.t-input { color: var(--txt-input); }
.t-amber { color: var(--amber); }
.t-gilt { color: var(--gilt); } /* coins only */
.t-ink { color: var(--parchment-ink); }
.t-ink-red { color: var(--parchment-red); }
.t-owl-eye { color: var(--owl-eye); }

/* ---------- Equipment tint utilities ---------- */
.eq-bronze { color: var(--eq-bronze); } .eq-iron { color: var(--eq-iron); } .eq-steel { color: var(--eq-steel); } .eq-black { color: var(--eq-black); }
.eq-mithril { color: var(--eq-mithril); } .eq-adamant { color: var(--eq-adamant); } .eq-rune { color: var(--eq-rune); } .eq-dragon { color: var(--eq-dragon); }

/* ---------- Reduced motion: the world still moves (brief §2.6) but chrome flourishes calm down ---------- */
@media (prefers-reduced-motion: reduce) {
  .corner-owl, .levelup-star, .tab.unread, .chat-tab.unread { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}