/* Hootscape ui.css — owl-oak OSRS chrome materials, HUD components and the #game region layout (DESIGN_BRIEF §2.3, §3.1, §3.2).
   Materials: .stone .bark .btn .tabstrip/.tab .slot .orb .toast .scroll .hollow-knot .corner-owl .ticker .hover-text .party-strip .xp-drop .hitsplat
   Layout: #game is the container (container-type: size); every region is absolutely positioned inside it.
   Compact (≤1280 wide) overrides sit at the bottom of this file; the phone layout (≤640) lives in mobile.css. */

/* =====================================================================
   1. Materials
   ===================================================================== */

/* --- Stone: 2px bevel over --stone-fill with the generated ±6 luminance noise (chrome.js sets --noise) --- */
.stone {
  position: relative;
  background-color: var(--stone-fill);
  background-image: var(--noise);
  background-repeat: repeat;
  border: 2px solid;
  border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
  box-shadow: 0 0 0 1px var(--stone-lo), inset 0 0 0 1px rgba(0,0,0,.18);
  color: var(--txt-orange);
}
.stone-flat { background-color: var(--stone-fill); background-image: var(--noise); }
.stone-sunk { border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo); }
.stone-dark { background-color: var(--stone-base); }

/* --- Hollow knots: the four corners carry a 6x6 pixel knot (two --owl-eye glints = an owl in the hollow).
       ::before/::after draw the top corners; applyChrome() appends <i class="knots"> for the bottom pair. --- */
:root {
  --knot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23241E16' d='M1 0h4v1H1zM0 1h1v4H0zM5 1h1v4H5zM1 5h4v1H1z'/%3E%3Cpath fill='%233A2A17' d='M1 1h4v4H1z'/%3E%3Cpath fill='%236B5230' d='M2 1h2v1H2zM2 4h2v1H2z'/%3E%3Cpath fill='%23FFD966' d='M1 2h1v1H1zM4 2h1v1H4z'/%3E%3C/svg%3E");
  --owl-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23241E16' d='M1 0h1v1H1zM6 0h1v1H6zM0 1h1v5H0zM7 1h1v5H7zM1 6h1v1H1zM6 6h1v1H6zM2 7h4v1H2z'/%3E%3Cpath fill='%236B5230' d='M1 1h6v5H1zM2 6h4v1H2z'/%3E%3Cpath fill='%23FFD966' d='M2 2h1v1H2zM5 2h1v1H5z'/%3E%3Cpath fill='%23B8701C' d='M3 4h2v1H3z'/%3E%3Cpath fill='%234F3B22' d='M2 5h1v1H2zM5 5h1v1H5z'/%3E%3C/svg%3E");
  --owl-shut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23241E16' d='M1 0h1v1H1zM6 0h1v1H6zM0 1h1v5H0zM7 1h1v5H7zM1 6h1v1H1zM6 6h1v1H6zM2 7h4v1H2z'/%3E%3Cpath fill='%236B5230' d='M1 1h6v5H1zM2 6h4v1H2z'/%3E%3Cpath fill='%233A2A17' d='M2 2h1v1H2zM5 2h1v1H5z'/%3E%3Cpath fill='%23B8701C' d='M3 4h2v1H3z'/%3E%3Cpath fill='%234F3B22' d='M2 5h1v1H2zM5 5h1v1H5z'/%3E%3C/svg%3E");
  --claw-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 3' width='16' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23241E16' d='M1 0h1v1H1zM3 0h2v1H3zM6 0h1v1H6zM0 1h1v1H0zM2 1h1v1H2zM5 1h1v1H5zM7 1h1v1H7zM0 2h8v1H0z'/%3E%3Cpath fill='%236B5230' d='M1 1h1v1H1zM3 1h2v1H3zM6 1h1v1H6z'/%3E%3C/svg%3E");
  --claw-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 3' width='16' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23241E16' d='M0 0h8v1H0zM0 1h1v1H0zM2 1h1v1H2zM5 1h1v1H5zM7 1h1v1H7zM1 2h1v1H1zM3 2h2v1H3zM6 2h1v1H6z'/%3E%3Cpath fill='%233A2A17' d='M1 1h1v1H1zM3 1h2v1H3zM6 1h1v1H6z'/%3E%3C/svg%3E");
  --arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23FFB43A' d='M3 2h2v1H3zM2 3h4v1H2zM1 4h6v1H1z'/%3E%3Cpath fill='%23241E16' d='M3 1h2v1H3zM2 2h1v1H2zM5 2h1v1H5zM1 3h1v1H1zM6 3h1v1H6zM0 4h1v1H0zM7 4h1v1H7zM1 5h6v1H1z'/%3E%3C/svg%3E");
  --arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23FFB43A' d='M1 3h6v1H1zM2 4h4v1H2zM3 5h2v1H3z'/%3E%3Cpath fill='%23241E16' d='M1 2h6v1H1zM0 3h1v1H0zM7 3h1v1H7zM1 4h1v1H1zM6 4h1v1H6zM2 5h1v1H2zM5 5h1v1H5zM3 6h2v1H3z'/%3E%3C/svg%3E");
}
.hollow-knot::before, .hollow-knot::after, .knots::before, .knots::after {
  content: ""; position: absolute; width: 12px; height: 12px; background: var(--knot) no-repeat; background-size: 12px 12px;
  image-rendering: pixelated; pointer-events: none; z-index: 3;
}
.hollow-knot::before { left: -1px; top: -1px; }
.hollow-knot::after { right: -1px; top: -1px; transform: scaleX(-1); }
.knots { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.knots::before { left: -1px; bottom: -1px; transform: scaleY(-1); }
.knots::after { right: -1px; bottom: -1px; transform: scale(-1); }

/* --- Blinking corner owl: 8x8 glyph bottom-right, blinks every 7–13 s (applyChrome randomises the vars per panel) --- */
.corner-owl {
  position: absolute; right: 13px; bottom: 1px; width: 16px; height: 16px; pointer-events: none; z-index: 3;
  background: var(--owl-open) no-repeat; background-size: 16px 16px; image-rendering: pixelated;
  animation: owl-blink var(--blink-period, 10s) steps(1) infinite; animation-delay: var(--blink-delay, 0s);
}
@keyframes owl-blink { 0%, 96.5% { background-image: var(--owl-open); } 96.6%, 99.4% { background-image: var(--owl-shut); } 99.5%, 100% { background-image: var(--owl-open); } }

/* --- Bark: owl-oak with vertical grain (chrome.js sets --bark-grain to a jittered pixel tile) --- */
.bark {
  position: relative;
  background-color: var(--bark);
  background-image: var(--bark-grain);
  background-repeat: repeat;
  border: 2px solid;
  border-color: var(--bark-grain-hi) var(--bark-grain-lo) var(--bark-grain-lo) var(--bark-grain-hi);
  color: var(--txt-orange);
}
.bark-plain { background-color: var(--bark); background-image: var(--bark-grain); }

/* --- Buttons: bark planks; amber 1px top highlight on hover, inverted bevel on :active --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 28px; padding: 0 12px; line-height: 1;
  background-color: var(--bark); background-image: var(--bark-grain);
  border: 2px solid; border-color: var(--bark-grain-hi) var(--bark-grain-lo) var(--bark-grain-lo) var(--bark-grain-hi);
  box-shadow: 0 0 0 1px var(--stone-lo);
  color: var(--txt-orange); font: var(--fs-body)/1 var(--font-ui); text-shadow: 1px 1px 0 var(--outline-ink);
  cursor: pointer; white-space: nowrap; user-select: none;
}
.btn:hover, .btn:focus-visible { color: var(--txt-yellow); box-shadow: 0 0 0 1px var(--stone-lo), inset 0 1px 0 var(--amber); outline: none; }
.btn:active, .btn.pressed { border-color: var(--bark-grain-lo) var(--bark-grain-hi) var(--bark-grain-hi) var(--bark-grain-lo); box-shadow: 0 0 0 1px var(--stone-lo), inset 0 -1px 0 var(--amber-deep); transform: translateY(1px); }
.btn:disabled, .btn.disabled { color: var(--txt-grey); cursor: default; box-shadow: 0 0 0 1px var(--stone-lo); }
.btn-big { min-height: 44px; padding: 0 20px; font-size: var(--fs-header); }
.btn-wide { width: 100%; }
.btn-sq { width: 28px; min-width: 28px; padding: 0; }
.btn-accept { color: var(--txt-green); }
.btn-decline { color: var(--txt-red); }
.btn-row { display: flex; gap: 8px; align-items: center; }
.btn-group { display: inline-flex; }
.btn-group .btn + .btn { margin-left: -1px; }
.btn.active { background-color: var(--bark-grain-lo); color: var(--txt-yellow); border-color: var(--bark-grain-lo) var(--bark-grain-hi) var(--bark-grain-hi) var(--bark-grain-lo); }

/* --- Tab strips: bark, 7 tabs of 41x40 per strip --- */
.tabstrip {
  display: flex; height: var(--tab-h); width: 100%;
  background-color: var(--bark); background-image: var(--bark-grain);
  border: 2px solid; border-color: var(--bark-grain-hi) var(--bark-grain-lo) var(--bark-grain-lo) var(--bark-grain-hi);
  box-shadow: 0 0 0 1px var(--stone-lo);
}
.tab {
  position: relative; flex: 0 0 var(--tab-w); width: var(--tab-w); height: calc(var(--tab-h) - 4px);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-right: 1px solid var(--bark-grain-lo); color: var(--txt-orange);
}
.tab:last-child { border-right: 0; flex: 1 1 auto; }
.tab:hover { box-shadow: inset 0 1px 0 var(--amber); }
.tab.active { background-color: var(--stone-fill); background-image: var(--noise); box-shadow: inset 2px 2px 0 var(--stone-lo), inset -1px -1px 0 var(--stone-hi); }
.tabstrip-top .tab.active::after, .tabstrip-bottom .tab.active::before { content: ""; position: absolute; left: 4px; right: 4px; height: 2px; background: var(--amber); }
.tabstrip-top .tab.active::after { bottom: 0; }
.tabstrip-bottom .tab.active::before { top: 0; }
.tab .icon, .tab-icon { width: 30px; height: 30px; image-rendering: pixelated; }
.tab.unread::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; background: var(--txt-yellow); box-shadow: 0 0 0 1px var(--outline-ink); animation: blink-dot 1s steps(1) infinite; }
@keyframes blink-dot { 50% { opacity: 0; } }
.tab-key { position: absolute; left: 2px; bottom: -1px; font-size: var(--fs-min); line-height: 1; color: var(--txt-grey); text-shadow: 1px 1px 0 var(--outline-ink); display: none; }
.show-keys .tab-key { display: block; }

/* --- Inventory slots 48x44, no border, --slot-hover on hover --- */
.slot {
  position: relative; width: var(--slot-w); height: var(--slot-h); display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 2px;
}
.slot:hover { background: var(--slot-hover); }
.slot.selected { outline: 1px solid var(--txt-white); outline-offset: -1px; }
.slot.dragging { opacity: .45; }
.slot .icon, .slot-icon { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.slot .qty { position: absolute; left: 3px; top: 1px; font-size: var(--fs-body); line-height: 1; color: var(--txt-yellow); text-shadow: 1px 1px 0 var(--outline-ink); pointer-events: none; }
.slot .qty.k { color: var(--txt-white); }
.slot .qty.m { color: var(--txt-green); }
.slot.empty { cursor: default; }
.slot.noted .icon { filter: drop-shadow(1px 1px 0 var(--chat-paper)); }

/* --- Orbs: 36px ring + fill + numeral pill (OSRS layout: numeral left of the disc) --- */
.orb { position: relative; width: var(--orb); height: var(--orb); cursor: pointer; --fill: 1; --orb-colour: var(--hit-red); --orb-empty: #2B2219; }
.orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--stone-fill); background-image: var(--noise);
  border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
  box-shadow: 0 0 0 1px var(--stone-lo);
}
.orb-fill {
  position: absolute; inset: 5px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(to top, var(--orb-colour) 0 calc(var(--fill) * 100%), var(--orb-empty) calc(var(--fill) * 100%) 100%);
  box-shadow: inset 0 0 0 1px var(--stone-lo), inset 0 2px 3px rgba(255,255,255,.18);
}
.orb-fill::after { content: ""; position: absolute; left: 22%; top: 12%; width: 30%; height: 18%; border-radius: 50%; background: rgba(255,255,255,.28); }
.orb-icon { position: absolute; inset: 5px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.orb-icon .icon { width: 16px; height: 16px; image-rendering: pixelated; }
.orb-num {
  position: absolute; right: calc(100% - 6px); top: 50%; transform: translateY(-50%);
  min-width: 30px; height: 22px; padding: 0 5px 0 4px; display: flex; align-items: center; justify-content: center;
  background: var(--stone-fill); background-image: var(--noise);
  border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi); border-radius: 11px 4px 4px 11px;
  box-shadow: 0 0 0 1px var(--stone-lo);
  font-size: var(--fs-orb); line-height: 1; color: var(--txt-green); text-shadow: 1px 1px 0 var(--outline-ink); z-index: -1;
}
.orb-hp { --orb-colour: var(--hit-red); }
.orb-prayer { --orb-colour: #B9C7D8; }
.orb-run { --orb-colour: var(--amber); }
.orb-spec { --orb-colour: var(--dusk-ember); }
.orb-roost { --orb-colour: var(--owl-eye); width: var(--orb-roost); height: var(--orb-roost); }
.orb.low .orb-num { color: var(--txt-yellow); }
.orb.critical .orb-num { color: var(--txt-red); animation: blink-dot .6s steps(1) infinite; }
.orb.off .orb-fill { filter: saturate(.25) brightness(.7); }
.orb.on .orb-ring { box-shadow: 0 0 0 1px var(--stone-lo), 0 0 6px 1px var(--amber); }
/* Roost orb: circular ETA ring drawn with a conic gradient (--eta 0..1) */
.orb-roost .orb-eta { position: absolute; inset: 1px; border-radius: 50%; background: conic-gradient(var(--amber) calc(var(--eta, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%); pointer-events: none; }
/* Prayer metronome: a 600 ms sweeping arc, visible whenever a monster targets you */
.orb-prayer .metronome { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, var(--txt-cyan) 0 40deg, transparent 40deg); -webkit-mask: radial-gradient(circle, transparent 72%, #000 73%); mask: radial-gradient(circle, transparent 72%, #000 73%); animation: sweep .6s linear infinite; pointer-events: none; display: none; }
.orb-prayer.targeted .metronome { display: block; }
@keyframes sweep { to { transform: rotate(360deg); } }

/* --- Tooltip: small stone slip (Roost orb 200x64) --- */
.tooltip {
  position: absolute; z-index: 40; min-width: 120px; max-width: 260px; padding: 4px 8px; pointer-events: none;
  background-color: var(--stone-base); background-image: var(--noise);
  border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi); box-shadow: 0 0 0 1px var(--stone-lo), 2px 2px 0 rgba(0,0,0,.5);
  color: var(--txt-white); font-size: var(--fs-body); line-height: 1.1; white-space: pre-line;
}
.tooltip-roost { width: 200px; min-height: 64px; }
.tooltip b { color: var(--txt-orange); font-weight: normal; }

/* --- Toasts: 480x40 stone slips, 120 ms slide, stack of 3 --- */
.toast {
  position: relative; display: flex; align-items: center; gap: 8px; width: var(--toast-w); height: var(--toast-h); padding: 0 10px 0 6px; margin-bottom: 4px;
  background-color: var(--stone-fill); background-image: var(--noise);
  border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi); box-shadow: 0 0 0 1px var(--stone-lo), 2px 2px 0 rgba(0,0,0,.45);
  color: var(--txt-white); font-size: var(--fs-body); line-height: 1; white-space: nowrap; overflow: hidden;
  animation: toast-in var(--t-toast) ease-out;
}
.toast .icon { width: 28px; height: 28px; flex: 0 0 28px; image-rendering: pixelated; }
.toast .toast-kind { color: var(--txt-orange); }
.toast .toast-text { color: var(--txt-white); overflow: hidden; text-overflow: ellipsis; }
.toast.out { animation: toast-out var(--t-toast) ease-in forwards; }
.toast-achievement .toast-kind { color: var(--amber); }
.toast-diary .toast-kind { color: var(--txt-green); }
.toast-quest .toast-kind { color: var(--txt-yellow); }
.toast-owllink .toast-kind { color: var(--txt-owllink); }
@keyframes toast-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-12px); opacity: 0; } }

/* --- Talon scrollbars: 16px, --scroll-track, plank arrow buttons, thumb with claw ends --- */
/* NB: no scrollbar-width/scrollbar-color here: in Chromium those standard properties switch the ::-webkit-scrollbar talons off */
.scroll { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
@supports not selector(::-webkit-scrollbar) { .scroll { scrollbar-width: auto; scrollbar-color: var(--bark) var(--scroll-track); } }
.scroll::-webkit-scrollbar { width: var(--scrollbar); height: var(--scrollbar); }
.scroll::-webkit-scrollbar-track { background: var(--scroll-track); box-shadow: inset 1px 0 0 var(--stone-lo), inset -1px 0 0 var(--bark-grain-hi); }
.scroll::-webkit-scrollbar-thumb {
  background-color: var(--bark); background-image: var(--claw-top), var(--claw-bottom), var(--bark-grain); background-repeat: no-repeat, no-repeat, repeat; background-position: center top, center bottom, 0 0;
  border: 1px solid var(--stone-lo); box-shadow: inset 1px 1px 0 var(--bark-grain-hi), inset -1px -1px 0 var(--bark-grain-lo); min-height: 28px;
}
.scroll::-webkit-scrollbar-thumb:hover { box-shadow: inset 1px 1px 0 var(--amber), inset -1px -1px 0 var(--bark-grain-lo); }
.scroll::-webkit-scrollbar-button:single-button { display: block; width: var(--scrollbar); height: var(--scrollbar); background-color: var(--bark); background-image: var(--bark-grain); border: 1px solid var(--stone-lo); box-shadow: inset 1px 1px 0 var(--bark-grain-hi), inset -1px -1px 0 var(--bark-grain-lo); }
.scroll::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: var(--arrow-up), var(--bark-grain); background-repeat: no-repeat, repeat; background-position: center, 0 0; }
.scroll::-webkit-scrollbar-button:single-button:vertical:increment { background-image: var(--arrow-down), var(--bark-grain); background-repeat: no-repeat, repeat; background-position: center, 0 0; }
.scroll::-webkit-scrollbar-button:double-button, .scroll::-webkit-scrollbar-button:horizontal { display: none; }
.scroll::-webkit-scrollbar-corner { background: var(--scroll-track); }
/* JS fallback (applyChrome adds .scroll-js + a .talon overlay when ::-webkit-scrollbar is unsupported) */
.scroll-js { scrollbar-width: none; -ms-overflow-style: none; padding-right: var(--scrollbar); }
.scroll-js::-webkit-scrollbar { display: none; }
.talon { position: absolute; top: 0; right: 0; bottom: 0; width: var(--scrollbar); background: var(--scroll-track); box-shadow: inset 1px 0 0 var(--stone-lo); z-index: 2; user-select: none; }
.talon-up, .talon-down { position: absolute; left: 0; width: var(--scrollbar); height: var(--scrollbar); background-color: var(--bark); background-image: var(--arrow-up), var(--bark-grain); background-repeat: no-repeat, repeat; background-position: center, 0 0; border: 1px solid var(--stone-lo); cursor: pointer; }
.talon-up { top: 0; }
.talon-down { bottom: 0; background-image: var(--arrow-down), var(--bark-grain); }
.talon-thumb { position: absolute; left: 0; width: var(--scrollbar); min-height: 28px; background-color: var(--bark); background-image: var(--claw-top), var(--claw-bottom), var(--bark-grain); background-repeat: no-repeat, no-repeat, repeat; background-position: center top, center bottom, 0 0; border: 1px solid var(--stone-lo); box-shadow: inset 1px 1px 0 var(--bark-grain-hi), inset -1px -1px 0 var(--bark-grain-lo); cursor: grab; }
.talon-thumb:active { cursor: grabbing; }

/* --- Night Shift ticker: stone strip, orange text --- */
.ticker {
  display: flex; align-items: center; gap: 8px; width: var(--ticker-w); height: var(--ticker-h); padding: 0 8px 0 6px;
  background-color: var(--stone-fill); background-image: var(--noise);
  border: 2px solid; border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi); box-shadow: 0 0 0 1px var(--stone-lo);
  color: var(--txt-orange); font-size: var(--fs-body); line-height: 1; white-space: nowrap; overflow: hidden; cursor: pointer;
}
.ticker .icon { width: 16px; height: 16px; flex: 0 0 16px; image-rendering: pixelated; }
.ticker .ticker-label { color: var(--txt-orange); }
.ticker .ticker-route { color: var(--txt-cyan); }
.ticker .ticker-count { color: var(--txt-white); }
.ticker .ticker-time { color: var(--txt-yellow); margin-left: auto; font-variant-numeric: tabular-nums; }
.ticker:hover { box-shadow: 0 0 0 1px var(--stone-lo), inset 0 1px 0 var(--amber); }
.ticker.idle .ticker-label { color: var(--txt-grey); }

/* --- Hover action text: yellow verb + cyan object, OSRS top-left --- */
.hover-text { font-size: var(--fs-body); line-height: 1; color: var(--txt-yellow); pointer-events: none; white-space: nowrap; 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); }
.hover-text .verb { color: var(--txt-yellow); }
.hover-text .obj { color: var(--txt-cyan); }
.hover-text .npc { color: var(--txt-yellow); }
.hover-text .player { color: var(--txt-white); }
.hover-text .item { color: var(--txt-orange); }
.hover-text .more { color: var(--txt-white); }
.hover-text .lvl { color: var(--txt-green); }
.hover-text .lvl.above { color: var(--txt-red); }

/* --- Party strip: 240 wide, 28px per member, max 5 --- */
.party-strip { width: var(--party-w); display: flex; flex-direction: column; gap: 2px; }
.party-member { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px 30px; grid-template-rows: 17px 9px; column-gap: 5px; align-items: center; height: var(--party-row); padding: 1px 4px; background: rgba(36,30,22,.72); border: 1px solid var(--stone-lo); box-shadow: inset 1px 1px 0 rgba(110,92,63,.5); cursor: pointer; }
.party-member:hover { background: rgba(36,30,22,.9); box-shadow: inset 0 0 0 1px var(--amber-deep); }
.party-member .pm-role { grid-column: 1; grid-row: 1 / 3; width: 16px; height: 16px; image-rendering: pixelated; }
.party-member .pm-name { grid-column: 2; grid-row: 1; font-size: var(--fs-body); line-height: 17px; color: var(--txt-party); text-shadow: 1px 1px 0 var(--outline-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party-member .pm-name.leader::before { content: "\2655 "; color: var(--amber); }
.party-member .pm-bars { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 2px; }
.party-member .pm-bar { height: 3px; background: var(--stone-lo); }
.party-member .pm-bar i { display: block; height: 100%; width: calc(var(--v, 1) * 100%); }
.party-member .pm-hp i { background: var(--txt-green); }
.party-member .pm-hp.low i { background: var(--txt-red); }
.party-member .pm-pray i { background: var(--txt-cyan); }
.party-member .pm-action { grid-column: 3; grid-row: 1 / 3; width: 16px; height: 16px; image-rendering: pixelated; }
.party-member .pm-dist { grid-column: 4; grid-row: 1 / 3; font-size: var(--fs-body); line-height: 1; color: var(--txt-grey); text-align: right; text-shadow: 1px 1px 0 var(--outline-ink); }
.party-member .pm-ready { position: absolute; right: 36px; top: -1px; color: var(--txt-green); font-size: var(--fs-min); line-height: 1; }
.party-member.pinged { animation: ping-flash .5s steps(2) 3; }
@keyframes ping-flash { 50% { box-shadow: inset 0 0 0 2px var(--txt-yellow); } }

/* --- XP drops: skill icon 16px + white number, rise 1.5 px/frame (90 px/s) for 2 s --- */
.xp-drop { position: absolute; display: flex; align-items: center; justify-content: flex-end; gap: 4px; right: 0; top: 0; white-space: nowrap; pointer-events: none; color: var(--txt-white); font-size: var(--fs-body); line-height: 1; 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); animation: xp-rise var(--t-xp) linear forwards; }
.xp-drop .icon { width: 16px; height: 16px; image-rendering: pixelated; }
.xp-drop.combined { color: var(--txt-yellow); }
@keyframes xp-rise { 0% { transform: translateY(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-180px); opacity: 0; } }

/* --- Hitsplats (world overlay; the canvas draws its own, these are the DOM twins for panels/previews) --- */
.hitsplat { position: absolute; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--txt-white); font-size: var(--fs-body); line-height: 1; text-shadow: 1px 1px 0 var(--outline-ink); pointer-events: none; clip-path: polygon(50% 0, 62% 24%, 88% 12%, 76% 38%, 100% 50%, 76% 62%, 88% 88%, 62% 76%, 50% 100%, 38% 76%, 12% 88%, 24% 62%, 0 50%, 24% 38%, 12% 12%, 38% 24%); animation: hit-hold var(--t-hitsplat) steps(1) forwards; }
.hitsplat-red { background: var(--hit-red); }
.hitsplat-blue { background: var(--hit-blue); }
.hitsplat-poison { background: var(--hit-poison); }
.hitsplat-heal { background: var(--hit-heal); }
.hitsplat-max { box-shadow: inset 0 0 0 2px var(--txt-yellow); color: var(--txt-yellow); }
@keyframes hit-hold { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }

/* --- Overhead chat / examine twins (for DOM previews; the canvas atlas renders the real ones) --- */
.overhead { position: absolute; color: var(--txt-yellow); 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); white-space: nowrap; pointer-events: none; }
.nameplate { color: var(--txt-white); } .nameplate.npc { color: var(--txt-yellow); } .nameplate.bot { color: var(--txt-bot); }

/* --- Icon placeholders (dev page + before art loads) --- */
.icon { display: inline-block; flex: none; }
.icon-16 { width: 16px; height: 16px; } .icon-20 { width: 20px; height: 20px; } .icon-32 { width: 32px; height: 32px; } .icon-64 { width: 64px; height: 64px; }

/* --- Progress bars (xp underline, hp bars) --- */
.bar { position: relative; height: 4px; background: var(--stone-lo); }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v, 0) * 100%); background: var(--txt-yellow); }
.bar-green i { background: var(--txt-green); } .bar-red i { background: var(--txt-red); } .bar-cyan i { background: var(--txt-cyan); } .bar-amber i { background: var(--amber); }

/* --- Slider (settings): bark rail with an amber knob --- */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; background: var(--scroll-track); border: 1px solid var(--stone-lo); box-shadow: inset 1px 1px 0 rgba(0,0,0,.5); cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 20px; background-color: var(--bark); background-image: var(--bark-grain); border: 1px solid var(--stone-lo); box-shadow: inset 1px 1px 0 var(--bark-grain-hi), inset 0 -2px 0 var(--amber); }
.slider::-moz-range-thumb { width: 14px; height: 20px; border-radius: 0; background-color: var(--bark); border: 1px solid var(--stone-lo); box-shadow: inset 1px 1px 0 var(--bark-grain-hi), inset 0 -2px 0 var(--amber); }

/* --- Checkbox / toggle: OSRS-style square with an amber tick --- */
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--txt-orange); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check i { width: 18px; height: 18px; background: var(--stone-lo); border: 1px solid var(--stone-hi); box-shadow: inset 1px 1px 0 rgba(0,0,0,.5); display: inline-flex; align-items: center; justify-content: center; color: var(--amber); font-size: var(--fs-min); line-height: 1; }
.check input:checked + i::after { content: "\2714"; }
.check:hover { color: var(--txt-yellow); }

/* --- Text inputs (login + settings + chat) --- */
.field { display: flex; align-items: center; height: 28px; padding: 0 6px; background: var(--stone-lo); border: 1px solid var(--stone-base); box-shadow: inset 1px 1px 0 rgba(0,0,0,.6), inset -1px -1px 0 rgba(110,92,63,.35); color: var(--txt-white); font-size: var(--fs-body); }
.field:focus-within { box-shadow: inset 1px 1px 0 rgba(0,0,0,.6), 0 0 0 1px var(--amber-deep); }
.field input { flex: 1; min-width: 0; outline: none; color: var(--txt-white); caret-color: var(--txt-yellow); }
.field input::placeholder { color: var(--txt-grey); }

/* --- Divider planks --- */
.rule { height: 2px; background: var(--stone-lo); box-shadow: 0 1px 0 var(--stone-hi); margin: 6px 0; }
.rule-bark { height: 4px; background-color: var(--bark); background-image: var(--bark-grain); border-top: 1px solid var(--bark-grain-hi); border-bottom: 1px solid var(--bark-grain-lo); }

/* =====================================================================
   2. Layout: #game regions (desktop 1600x1000 reference, §3.1)
   ===================================================================== */
#game { position: fixed; inset: 0; overflow: hidden; background: var(--sky-top); container-type: size; container-name: game; }
#game > * { position: absolute; }
#world { inset: 0; width: 100%; height: 100%; z-index: 0; cursor: crosshair; }
#ticker { left: 8px; top: 8px; z-index: 5; }
#hover { left: 8px; top: 44px; z-index: 5; pointer-events: none; }
#party { left: 8px; top: 72px; width: var(--party-w); z-index: 5; }
#party:empty { display: none; }
#hud-minimap { right: 0; top: 0; width: var(--minimap-w); height: var(--minimap-h); z-index: 6; }
#orbs { right: calc(var(--minimap-w) - 44px); top: 0; width: 44px; height: 256px; z-index: 7; }
#xpdrops { right: var(--xp-right); top: var(--xp-y); width: var(--xp-w); height: 300px; z-index: 4; pointer-events: none; }
#xpdrops.centre { left: calc(50cqw - 120px); right: auto; top: 40px; width: 240px; }
#xpdrops.centre .xp-drop { left: 0; right: 0; justify-content: center; }
#rail { right: 0; top: var(--rail-top); width: var(--rail-w); height: var(--rail-h); z-index: 6; display: flex; flex-direction: column; }
#chat { left: 0; bottom: 0; width: var(--chat-w); height: var(--chat-h); min-height: var(--chat-min); max-height: var(--chat-max); z-index: 6; display: flex; flex-direction: column; }
#toasts { left: var(--toast-x); top: 8px; width: var(--toast-w); z-index: 8; pointer-events: none; }
#toasts .toast { pointer-events: auto; }
#dim { inset: 0; z-index: 1; background: var(--modal-dim); display: none; pointer-events: none; } /* the world dims 40% behind modals; the chrome stays lit */
#game.modal-open #dim, #game.map-open #dim { display: block; }
#modal-root { inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; pointer-events: none; }
#modal-root > * { pointer-events: auto; }
#modal-root:not(:empty), #modal-root.open { display: flex; }
#menu-root { inset: 0; z-index: 30; pointer-events: none; }
#menu-root > * { pointer-events: auto; }
#tabbar, #sheet-root, #chat-ticker { display: none; } /* phone only (mobile.css) */

/* Orb column: HP y40, Prayer y84, Run y128, Spec y172 (36px); Roost 44px at y212, x-4 */
#orbs .orb { position: absolute; left: 4px; }
#orbs .orb-hp { top: 40px; }
#orbs .orb-prayer { top: 84px; }
#orbs .orb-run { top: 128px; }
#orbs .orb-spec { top: 172px; }
#orbs .orb-roost { top: 212px; left: 0; }

/* Minimap HUD: eye disc 176px centred at (168,108) in the box; compass (12,12); world-map button (244,208) */
#hud-minimap { pointer-events: none; }
#hud-minimap > * { pointer-events: auto; }
.eye { position: absolute; left: calc(var(--eye-cx) - var(--eye-disc) / 2); top: calc(var(--eye-cy) - var(--eye-disc) / 2); width: var(--eye-disc); height: var(--eye-disc); border-radius: 50%; cursor: pointer;
  background: var(--sclera); box-shadow: 0 0 0 3px var(--sclera), 0 0 0 4px var(--stone-lo), 0 3px 8px rgba(0,0,0,.6); }
.eye-iris { position: absolute; inset: 3px; border-radius: 50%; background: repeating-conic-gradient(var(--iris-stroke-dk) 0 3deg, var(--iris) 3deg 8deg, var(--iris-stroke-lt) 8deg 10deg, var(--iris) 10deg 15deg); box-shadow: inset 0 0 0 1px var(--iris-stroke-dk), inset 0 0 6px rgba(0,0,0,.5); }
.eye-map, .eye-pupil { position: absolute; inset: 11px; border-radius: 50%; overflow: hidden; background: var(--grass-night); box-shadow: inset 0 0 0 1px var(--iris-stroke-dk); }
.eye-map canvas { width: 100%; height: 100%; }
.eye-lid { position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; overflow: hidden; }
.eye-lid::before, .eye-lid::after { content: ""; position: absolute; left: 0; right: 0; height: 50%; background: var(--lid); transform: scaleY(0); transition: transform 120ms ease-in; }
.eye-lid::before { top: 0; transform-origin: top; }
.eye-lid::after { bottom: 0; transform-origin: bottom; }
.eye.blink .eye-lid::before, .eye.blink .eye-lid::after { transform: scaleY(1); }
.eye.dilated .eye-map, .eye.dilated .eye-pupil { inset: 7px; transition: inset 200ms; }
.eye.constricted .eye-map, .eye.constricted .eye-pupil { inset: 16px; transition: inset 200ms; }
.eye-glint { position: absolute; left: 24%; top: 14%; width: 10%; height: 7%; border-radius: 50%; background: rgba(255,255,255,.55); pointer-events: none; }
.compass { position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--bark); background-image: var(--bark-grain); border: 2px solid; border-color: var(--bark-grain-hi) var(--bark-grain-lo) var(--bark-grain-lo) var(--bark-grain-hi); box-shadow: 0 0 0 1px var(--stone-lo); color: var(--txt-yellow); font-size: var(--fs-header); line-height: 1; text-shadow: 1px 1px 0 var(--outline-ink); cursor: pointer; }
.compass::before { content: "N"; }
.btn-map { position: absolute; left: 244px; top: 208px; width: 32px; height: 32px; padding: 0; min-height: 0; }
.btn-map .icon { width: 20px; height: 20px; }
.hud-clock { position: absolute; left: 244px; top: 12px; width: 32px; text-align: center; font-size: var(--fs-body); color: var(--txt-grey); text-shadow: 1px 1px 0 var(--outline-ink); line-height: 1; }

/* Rail: bark strip / stone content / bark strip; Tab collapses it to a 24px bark spine */
#rail .tabstrip { flex: 0 0 var(--tab-h); }
#rail .panel { flex: 1 1 auto; min-height: 0; }
#rail.collapsed { width: 24px; }
#rail.collapsed .tabstrip, #rail.collapsed .panel { display: none; }
#rail.collapsed::before { content: ""; position: absolute; inset: 0; background-color: var(--bark); background-image: var(--bark-grain); border: 2px solid; border-color: var(--bark-grain-hi) var(--bark-grain-lo) var(--bark-grain-lo) var(--bark-grain-hi); }
.rail-spine { display: none; }

/* =====================================================================
   3. Compact layout at ≤1280 wide (§3.2)
   ===================================================================== */
@container game (max-width: 1280px) {
  /* custom properties go on #game's children: a container query never matches the container itself */
  #game > * { --minimap-w: 240px; --minimap-h: 208px; --eye-disc: 144px; --eye-cx: 140px; --eye-cy: 92px; --orb: 32px; --orb-roost: 40px;
          --rail-w: 272px; --rail-h: 496px; --rail-top: 216px; --tab-w: 38px; --tab-h: 36px; --panel-h: 424px;
          --chat-w: 480px; --chat-h: 180px; --xp-x0: 920px; --xp-x1: 1000px; --xp-right: 280px; --xp-w: 80px; --toast-x: calc(50cqw - 240px); }
  #orbs { right: calc(var(--minimap-w) - 40px); width: 40px; }
  #orbs .orb-hp { top: 32px; } #orbs .orb-prayer { top: 68px; } #orbs .orb-run { top: 104px; } #orbs .orb-spec { top: 140px; } #orbs .orb-roost { top: 174px; left: 0; }
  .btn-map { left: 196px; top: 168px; }
  .hud-clock { left: 196px; }
  #rail .panel { overflow-y: auto; }
}