/* Per-game theming: app.js stamps at boot and in
setGame(); the :root[data-theme=...] blocks at the bottom override ONLY the
custom properties (plus a few colour/border/gradient flourishes). The bare
:root below keeps the original palette, so a missing attribute regresses to
exactly the pre-theming look. Layout is untouched in every theme. */
:root{
--ink:#ece3cf; --dim:#b7a583; --faint:#96855f;
--up:#5ccf7c; --up-bg:rgba(92,207,124,.13);
--down:#f0685f; --down-bg:rgba(240,104,95,.13);
--gold:#e3b23c; --gold-bg:rgba(227,178,60,.13); --line:#3a2c14;
--page:#0d0a06; --panel:#15100a; --panel2:#1f1710;
/* derived surfaces/accents — MarketWyrm gold-on-black base */
--line-strong:#5a441f; --on-gold:#241800; --input-bg:#0c0803;
--seg-on:#241a0d; --hover-bg:#1c1409;
--row-line:#1c150c; --row-line2:#151009; --row-hover:#140e06;
--ico-bg:#221a10; --inset-bg:#0f0b06; --tip-bg:#1a130b;
--warn:#f0a35f; --warn-bg:rgba(240,163,95,.13); --backdrop:rgba(6,4,2,.74); --emph:#ffd873;
/* --accent is the selection/action hue everywhere a component needs one
(checkbox accent, admin chart line, progress fills). It was referenced in
four places and declared nowhere — those components rendered invisible. */
--accent:var(--gold);
/* chart palette — chartColors() in app.js reads these once per draw; the
.t-leg legend chips and the canvas must stay in lockstep through them */
--ch-price:#e3b23c; --ch-grid:#241a0d; --ch-label:#96855f;
--ch-res:#a98cd8; --ch-sup:#6fbf5a; --ch-exit:var(--down); --ch-proj:#b7a06a;
/* bid / ask get their own hues — they used to borrow exit-red and support-green */
--ch-bid:#4fd1c5; --ch-ask:#ff8fa3;
--ch-up:var(--up); --ch-down:var(--down);
--ch-fill:rgba(227,178,60,.08); --ch-tag-bg:rgba(13,10,6,.9);
--ch-cross:rgba(210,192,150,.4); --ch-ring:#0d0a06;
--mono:ui-monospace,"Cascadia Code","SF Mono","Roboto Mono",Menlo,monospace;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
/* --- tokens added with the OKLCH palettes (both themes inherit these) --- */
/* Neutral delta: 0.0% is NOT a gain. Themes override with their own --faint. */
--flat:#96855f;
/* Quiet gold: headings/decoration. --gold stays for ACTION only, so the CTA
is the brightest gold on screen instead of being outshone by inert labels. */
--gold-quiet:#b79345;
/* Elevation. On dark UI depth reads as LIGHTNESS, so --edge (a top catchlight)
does most of the work and the shadows only ground the surface. Negative
spread is deliberate: it keeps the shadow under the card, not smeared. */
--edge:inset 0 1px 0 rgba(255,255,255,.05);
--sh-1:0 2px 8px -2px rgba(0,0,0,.45);
--sh-2:0 8px 22px -6px rgba(0,0,0,.5);
--sh-3:0 20px 44px -12px rgba(0,0,0,.6);
/* Type scale. Replaces 25 ad-hoc sizes, 12 of which sat inside three sub-1px
bands (9/9.5/10/10.5, 11/11.5, 12/12.5) — differences nobody can see but
every one of which had to be maintained. Seven steps, one unit.
1 micro-label · 2 meta · 3 secondary UI · 4 table body · 5 body
6 heading · 7 display / hero numerals.
The auth card deliberately opts out: it scales in em from a viewport-keyed
root so the whole panel resizes as one unit. Do not tokenise it. */
--fs-1:10.5px; --fs-2:11.5px; --fs-3:12.5px; --fs-4:13.5px;
--fs-5:14.5px; --fs-5b:16.5px; --fs-6:19px; --fs-7:23px;
/* --fs-5b closes the 14.5 → 19 hole that kept inviting 16/17/18px inventions. */
/* Radius scale. Was 12 values with no segmented tray concentric with its own
buttons; OSRS squares them off for the stone look. */
--r-1:4px; --r-2:7px; --r-3:9px; --r-4:12px;
/* Pills: one token instead of eleven literal 999px radii — so OSRS can square
them with the rest of its scale (below). */
--r-pill:999px;
/* Brand glow (mascot / gate art / sign-in card) — per theme, so the OSRS
bronze skin doesn't carry RS3's yellow halo. */
--glow:rgba(227,178,60,.14);
/* Loading sheen — must be LIGHTER than --panel2 or the shimmer inverts. */
--skel-sheen:#3a2e20;
/* SMA overlays. One hue per window, identical in both themes — the same
reasoning as --ch-res: an indicator must not change meaning per skin. */
--ch-sma7:#62b6e0; --ch-sma30:#e08fcf; --ch-sma90:#cfcfcf;
--ch-rsi:#bda0ff;
/* (retoned 2026-08-19: MA90 used to be the resistance purple and MA30 sat on the
price gold — an indicator must not look like a level or like the price. MA90 is
a neutral grey; bid/ask are teal/pink AND dashed, so no two lines share a look) */
/* Motion. Four durations by role, three easings. Never animate `all`, never
width/height — a 250-row table cannot afford layout animation. */
--dur-1:110ms; --dur-2:180ms; --dur-3:240ms; --dur-4:380ms;
--ease-out:cubic-bezier(.22,.61,.36,1);
--ease-emph:cubic-bezier(.16,.84,.28,1);
--ease-in:cubic-bezier(.45,0,1,1);
}
/* Per-theme catchlight: neutral on obsidian, warm on stone. */
:root[data-theme="rs3"]{--edge:inset 0 1px 0 rgba(255,255,255,.055);--skel-sheen:#3a3a42;--glow:rgba(230,183,49,.12)}
:root[data-theme="osrs"]{--edge:inset 0 1px 0 rgba(255,236,190,.06);
/* real bevels are square: rounded corners smear the four-colour border trick */
--r-1:2px; --r-2:3px; --r-3:4px; --r-4:6px; --r-pill:3px;
--skel-sheen:#5a4733;--glow:rgba(228,162,80,.12)}
*{box-sizing:border-box}
/* The hidden attribute must beat every display rule (v1 lesson: #loginview's
flex kept the login form on screen after signing in). */
[hidden]{display:none!important}
html,body{margin:0;height:100%}
/* Use a real scrollbar only when needed. Reserving an empty lane on short
pages left the header/footer rule and background short of the right edge. */
html{scrollbar-gutter:auto}
body{background:var(--page);color:var(--ink);font-family:var(--sans);
font-size:var(--fs-5);line-height:1.5;-webkit-font-smoothing:antialiased}
button,select,input{font-family:inherit;font-size:var(--fs-5);color:var(--ink)}
button{cursor:pointer;border-radius:var(--r-3);border:1px solid var(--line);
background:var(--panel2);padding:8px 14px}
button:hover{border-color:var(--line-strong)}
/* A real disabled treatment: opacity:.4 dropped labels under 3:1. Colour and
surface carry the state instead, so it stays legible while clearly inert. */
button:disabled{cursor:default;color:var(--faint);background:var(--inset-bg);
border-color:var(--line);box-shadow:none;filter:saturate(.35)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* Links, link-cards and the brand get the same gold ring as controls (they
showed the UA blue ring); text selection stops being UA blue on a gold UI. */
a:focus-visible,.pick:focus-visible,.cat-tile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
a:not([class]):focus-visible{border-radius:var(--r-1)}
.brand:focus-visible{outline-offset:4px}
::selection{background:var(--gold);color:var(--on-gold)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
button.ghost{background:transparent}
select,input{background:var(--input-bg);border:1px solid var(--line);border-radius:var(--r-3);padding:8px 10px}
/* :not(:focus-visible) is load-bearing — the bare `outline:none` that used to be
here deleted the ONLY focus ring in the app, leaving keyboard users a 1px
border tint. Mouse focus stays clean; keyboard focus keeps the ring above. */
input:focus:not(:focus-visible),select:focus:not(:focus-visible){outline:none}
input:focus,select:focus{border-color:var(--gold)}
::placeholder{color:var(--faint);opacity:1}
/* Links default to the action gold (they fell to UA blue wherever a component
didn't set its own colour — e.g. inside prose in the gate cards). */
a{color:var(--gold)} a:hover{color:var(--emph)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)}
/* Neutral delta. Zero movement is not a gain — app.js picks this class at 0. */
.flat{color:var(--flat)}
/* ---- interaction states -------------------------------------------------
The generic `button:hover{border-color:var(--line-strong)}` above DOWNGRADES
every gold control (gold -> dim olive) and is a no-op on the six borderless
ones (tabs, game switch, modal close). These rules restore the intent: gold
things brighten, quiet things gain a surface, everything presses. */
.tabs :is(button,a):not(.on):hover,.games :is(button,a):not(.on):hover,
.mchips :is(button,a):not(.on):hover,.menu button:hover,
.ch-tf:not(.on):hover,.ch-chip:not(.on):hover,.ch-mode:not(.on):hover,.wy-seg button:not(.on):hover,
.wy-rng:not(.on):hover,.t-back:hover{
background:var(--hover-bg);color:var(--ink);border-color:var(--line-strong)}
.mclose:hover{color:var(--ink);background:var(--hover-bg)}
.btn-signin:hover,.msecondary:hover{
border-color:var(--emph);color:var(--emph);background:var(--gold-bg)}
/* .t-follow (not .on) is now a solid CTA, so it brightens like .mprimary; the
.on chip's own hover (unfollow → red) is defined with the .t-follow rules. */
.mprimary:hover,.t-follow:not(.on):hover{
background:var(--emph);border-color:var(--emph)}
/* Press feedback existed only in OSRS, so the DEFAULT theme was the silent one
— including on touch, where there is no hover to fall back on. */
button:active{transform:translateY(1px)}
.mprimary:active{filter:brightness(.94)}
button,tbody tr,.pick,.cat-tile,.t-item,.mchips :is(button,a){
-webkit-tap-highlight-color:var(--gold-bg)}
/* Motion: explicit property lists only — never `all`, never width/height. */
button,.tabs :is(button,a),.games :is(button,a),.mchips :is(button,a),.menu button,
.btn-signin,.mprimary,.msecondary,.t-follow,.mclose,.acct-chip,
select,input,tbody tr,.t-item,.pick,.cat-tile,a{
transition:background-color var(--dur-1) var(--ease-out),
color var(--dur-1) var(--ease-out),
border-color var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out),
transform var(--dur-1) var(--ease-out),
filter var(--dur-1) var(--ease-out)}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
}
/* The header is viewport chrome, not part of any page or advertising grid.
Its controls keep a small safe edge on every route while the page-specific
content, tab and ad layouts begin below it. */
.hdr{display:flex;align-items:center;gap:14px;min-height:70px;
/* viewport-fit=cover + a translucent status bar (index.html) means the bar
draws UNDER the notch unless it pads the top inset itself. --apphdr-h is
measured live, so the sticky tab bar follows the taller header. */
padding:calc(9px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 9px max(20px,env(safe-area-inset-left));
background:var(--panel);border-bottom:1px solid var(--line);
box-shadow:var(--sh-2);
position:sticky;top:0;z-index:55;flex-wrap:wrap}
.logo{font-size:var(--fs-6);font-weight:500;letter-spacing:-.01em}
/* Shared header brand: the owner's complete v2 wordmark, dragon and market
orb. It is never cropped; CSS scales the 512×256 web derivative as one unit
across the shared shell. */
.brand{display:flex;align-items:center;gap:11px;flex:none}
/* The original 1774×887 PNG remains in design-assets/brand; the 512×256 WebP
keeps the 48px header render sharp without shipping the 2.2 MB source. */
.brand-logo{height:65px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
@media(max-width:760px){.brand-logo{height:53px}}
.games{display:flex;background:var(--panel2);border-radius:var(--r-3);padding:3px}
.games :is(button,a){background:transparent;border:none;color:var(--dim);padding:6px 13px;
border-radius:var(--r-2);font-size:var(--fs-4);box-shadow:none;text-decoration:none}
.games :is(button,a).on{background:var(--seg-on);color:var(--ink)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.search-wrap{position:relative;min-width:200px}
/* The static pages put the search input straight into .hdr-right (no wrap
element): let it flex and shrink so the "Open the app" link beside it never
has to fold. */
.hdr-right>.search{flex:1 1 200px;min-width:0;width:auto}
.search{width:100%;background:var(--input-bg)}
/* typeahead dropdown: anchored to the input's right edge so it can grow
leftwards on desktop without leaving the viewport */
.search-dd{position:absolute;top:calc(100% + 6px);right:0;width:max(100%,320px);z-index:60;
background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-3);
box-shadow:var(--edge),var(--sh-3);max-height:min(380px,60vh);overflow-y:auto;padding:4px}
.search-dd .dd-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
background:none;border:none;box-shadow:none;padding:7px 9px;border-radius:var(--r-2)}
.search-dd .dd-row:hover,.search-dd .dd-row.on{background:var(--hover-bg)}
.search-dd .dd-row .mi-ico{width:26px;height:26px;flex-shrink:0}
.search-dd .dd-row .mi-ico img{width:22px;height:22px}
.search-dd .dd-row span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-dd .dd-empty{color:var(--faint);font-size:var(--fs-3);padding:9px}
/* search results page rows click through to the item */
.srch-t tbody tr{cursor:pointer}
.search-board{max-width:1180px;margin:0 auto}
.search-head{align-items:center}
.search-title{display:flex;align-items:center;gap:11px;min-width:0}
.search-title img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 8px var(--glow))}
.search-title span{display:flex;flex-direction:column;gap:1px;min-width:0}
.search-title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:9px 14px;border-top:1px solid var(--row-line);border-bottom:1px solid var(--line);
background:var(--inset-bg)}
.search-pager{padding:0;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.search-pager button{padding:6px 12px;font-size:var(--fs-3)}
.back{background:transparent;border:none;color:var(--dim);font-size:var(--fs-5);padding:6px 4px;box-shadow:none}
.back:hover{color:var(--ink)}
.acct-slot{display:flex}
.btn-signin{background:transparent;border:1px solid var(--gold);color:var(--gold);
border-radius:var(--r-3);padding:8px 16px;font-size:var(--fs-4);font-weight:500;
white-space:nowrap;flex:none} /* "Open the app" on the static pages was folding onto two lines */
.acct{position:relative}
.acct-chip{display:flex;align-items:center;gap:8px;background:var(--panel2);
border:1px solid var(--line);border-radius:var(--r-3);padding:5px 10px 5px 6px;font-size:var(--fs-4)}
.acct-chip .av{width:24px;height:24px;border-radius:var(--r-2);background:var(--gold-bg);
color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:500;font-size:var(--fs-3)}
.acct-chip .cv{color:var(--faint);font-size:var(--fs-2)}
.menu{position:absolute;top:44px;right:0;width:190px;background:var(--panel2);
border:1px solid var(--line);border-radius:var(--r-3);padding:6px;z-index:30;
box-shadow:var(--edge),var(--sh-2)}
.menu[hidden]{display:none}
.menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;
border:none;padding:8px 10px;border-radius:var(--r-2);font-size:var(--fs-4);color:var(--dim);box-shadow:none}
.menu button .ico{color:var(--faint);width:16px;height:16px;margin-right:0}
.menu button:hover .ico{color:var(--gold)}
.acct-chip .cv.ico{width:12px;height:12px;margin-left:2px}
.menu button:hover{background:var(--hover-bg);color:var(--ink)}
.menu .sep{height:1px;background:var(--line);margin:5px 6px}
.subbar{display:flex;align-items:center;gap:16px;
padding:10px max(20px,calc((100% - 1500px) / 2));
border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
/* App chrome layering: top bar (55) > tab bar (50) > detail overlay (40), so
the whole header stays visible and clickable on every view, item pages
included. The account dropdown (.menu, z 30 INSIDE the bar's context) must
outrank the tab bar, which is why the two bars can't share one z value.
--apphdr-h / --chrome-h are measured live in app.js (the bars wrap and grow
on narrow screens). Phones skip the sticky tab bar — their tabs are the
fixed bottom nav (see the 640px block). */
@media(min-width:641px){
.subbar{position:sticky;top:var(--apphdr-h,70px);z-index:50}
}
.tabs{display:flex;gap:2px;background:var(--panel2);border-radius:var(--r-3);padding:3px}
.tabs :is(button,a){background:transparent;border:none;color:var(--dim);padding:7px 15px;
border-radius:var(--r-2);font-weight:500;box-shadow:none;text-decoration:none}
.tabs :is(button,a).on{background:var(--seg-on);color:var(--ink)}
/* ---- icon set: the inline sprite at the top of the page, used via