:root { --cursor-default: url('data:image/png;base64,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') 2 2, default; --cursor-action: url('data:image/png;base64,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') 2 2, pointer; } html, body { cursor: var(--cursor-default); } /* Above every HUD window, floating number and lifted action bar: the badge is part of the pointer, so nothing the pointer travels over may cover it. */ .world-cursor-badge { position: fixed; inset: 0 auto auto 0; z-index: 140; width: 28px; height: 28px; object-fit: contain; pointer-events: none; user-select: none; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 68%)); transform-origin: 0 0; } .world-cursor-badge[data-state='pressed'] { filter: drop-shadow(0 1px 0 rgb(0 0 0 / 72%)); } /* Same badge, less weight: the armed skill stays named while the spot under the pointer says it cannot take the cast. */ .world-cursor-badge[data-legality='blocked'] { opacity: 0.42; filter: saturate(0.25) drop-shadow(0 1px 1px rgb(0 0 0 / 68%)); } /* The HUD gauge: every proportional readout is this one box, so a monster at 40% looks the same overhead, in the target frame and in the party rail. No surface may invent its own track-and-fill. Knobs a surface may set on `.hud-gauge`: --gauge-h row height, a whole number of HUD pixels (--gp) --gauge-clip the box's outline; `none` for a bar too narrow to notch --gauge-ring the state edge inside the ink outline — this is how a gauge shows state; transparent at rest --gauge-ring-w the edge width data-band a banded state — health or carried load — which paints the edge from the same table the fill reads and on `.hud-gauge-fill`: --gauge-fill the share filled, as a percentage (hud-gauge.ts writes it) background the fill's paint data-band the band's fill paint */ .hud-gauge { --gauge-h: calc(7 * var(--gp)); --gauge-clip: var(--pixel-notch); --gauge-ring: transparent; --gauge-ring-w: var(--gp); position: relative; width: 100%; height: max(var(--gauge-h), calc(var(--type-metadata-readable-size) * 1.2 + 2 * var(--gp))); box-sizing: border-box; background: var(--pixel-night); border: var(--gp) solid var(--pixel-ink); overflow: hidden; clip-path: var(--gauge-clip); } /* The state edge and end caps ride a pseudo-element above the fills; an inset shadow paints on the background layer and a full gauge would bury it. */ .hud-gauge::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 0 var(--gauge-ring-w) var(--gauge-ring); background: linear-gradient( 180deg, rgb(255 255 255 / 30%) 0 var(--gp), transparent var(--gp) calc(100% - 2 * var(--gp)), rgb(0 0 0 / 22%) calc(100% - 2 * var(--gp)) calc(100% - var(--gp)), rgb(0 0 0 / 40%) calc(100% - var(--gp)) ), linear-gradient( 90deg, var(--pixel-lilac) 0 var(--gp), var(--pixel-slate) var(--gp) calc(2 * var(--gp)), var(--pixel-ink) calc(2 * var(--gp)) calc(3 * var(--gp)) ) left / calc(3 * var(--gp)) 100% no-repeat, linear-gradient( 90deg, var(--pixel-ink) 0 var(--gp), var(--pixel-slate) var(--gp) calc(2 * var(--gp)), var(--pixel-dusk) calc(2 * var(--gp)) calc(3 * var(--gp)) ) right / calc(3 * var(--gp)) 100% no-repeat; } .hud-gauge--sm { --gauge-h: calc(5 * var(--gp)); } /* Progression strips are a line, not a row: one lit row and narrower caps. */ .hud-gauge--xs { --gauge-h: calc(4 * var(--gp)); height: var(--gauge-h); } .hud-gauge--xs::after { background: linear-gradient(180deg, rgb(255 255 255 / 30%) 0 var(--gp), rgb(0 0 0 / 30%) var(--gp)), linear-gradient( 90deg, var(--pixel-lilac) 0 var(--gp), var(--pixel-ink) var(--gp) calc(2 * var(--gp)) ) left / calc(2 * var(--gp)) 100% no-repeat, linear-gradient( 90deg, var(--pixel-ink) 0 var(--gp), var(--pixel-dusk) var(--gp) calc(2 * var(--gp)) ) right / calc(2 * var(--gp)) 100% no-repeat; } /* Registered so the share animates and the drawn width snaps to the grid every frame. */ @property --gauge-fill { syntax: ''; inherits: false; initial-value: 0%; } .hud-gauge-fill { position: absolute; inset: 0 auto 0 0; z-index: 1; /* The fill ends on a whole HUD pixel: any nonzero share shows at least one, and only a full share covers the track. */ width: max( min(var(--gp), calc(var(--gauge-fill, 0%) * 10000)), min( round(nearest, var(--gauge-fill, 0%), var(--gp)), calc(round(up, 100%, var(--gp)) - var(--gp)) ), calc((var(--gauge-fill, 0%) - 100%) * 10000 + 100%) ); height: 100%; background: var(--hud-hp-healthy-fill); box-shadow: inset calc(-1 * var(--gp)) 0 0 rgb(255 255 255 / 35%); transition: --gauge-fill 0.2s ease-out; } /* Health is banded, not a fixed red: the colour is the triage read, the same everywhere. The percentage carries the number. */ .hud-gauge-fill[data-band='healthy'] { background: var(--hud-hp-healthy-fill); } .hud-gauge-fill[data-band='hurt'] { background: var(--hud-hp-hurt-fill); } .hud-gauge-fill[data-band='execute'] { background: var(--hud-hp-execute-fill); } /* Load is banded by what it costs, not how full the bag looks, so an unencumbered bag is pewter. One table keeps the panel and the inventory footer in agreement. */ .hud-gauge-fill[data-band='light'] { background: var(--hud-load-light-fill); } .hud-gauge-fill[data-band='heavy'] { background: var(--hud-load-heavy-fill); } .hud-gauge-fill[data-band='overloaded'] { background: var(--hud-load-overloaded-fill); } /* The worst band adds a one-pixel diagonal hatch so overload reads in greyscale and to red-blind players. */ .hud-gauge-fill[data-band='overloaded']::after { --hatch: conic-gradient(at var(--gp) var(--gp), transparent 270deg, rgb(0 0 0 / 28%) 0); content: ''; position: absolute; inset: 0; background: var(--hatch) 0 calc(2 * var(--gp)) / calc(3 * var(--gp)) calc(3 * var(--gp)), var(--hatch) var(--gp) var(--gp) / calc(3 * var(--gp)) calc(3 * var(--gp)), var(--hatch) calc(2 * var(--gp)) 0 / calc(3 * var(--gp)) calc(3 * var(--gp)); } .hud-gauge[data-band='heavy'] { --gauge-ring: var(--hud-load-heavy-ring); } .hud-gauge[data-band='overloaded'] { --gauge-ring: var(--hud-load-overloaded-ring); } /* High contrast swaps the resting ring for white, but an edge that carries meaning keeps its colour; stated at this specificity so the blanket white edge below does not erase the band. */ body.high-contrast .hud-gauge[data-band='heavy'] { --gauge-ring: var(--hud-load-heavy-ring); } body.high-contrast .hud-gauge[data-band='overloaded'] { --gauge-ring: var(--hud-load-overloaded-ring); } /* Recent-damage ghost: JS snaps it up on a heal and lets it lag on a hit, so the strip shows the last hit's size. */ .hud-gauge-fill--ghost { z-index: 0; background: var(--hud-hp-ghost-fill); transition: --gauge-fill 0.4s ease-out; } body.reduce-flashing .hud-gauge-fill--ghost { transition: none; } .hud-gauge-label, .hud-gauge-pct { position: absolute; inset-block: 0; z-index: 5; display: flex; align-items: center; font: var(--type-weight-strong) var(--type-metadata-readable-size) / var(--type-leading-solid) var(--type-metadata-readable-family); -webkit-font-smoothing: var(--type-metadata-readable-smoothing); color: #fff; text-shadow: var(--hud-vitals-text-shadow); font-variant-numeric: tabular-nums; letter-spacing: 0.2px; white-space: nowrap; pointer-events: none; } .hud-gauge-label { inset-inline: 0; justify-content: center; padding-inline: calc(4 * var(--gp)); overflow: hidden; text-overflow: ellipsis; } /* Current/max and percentage take separate columns; long readings ellipsise, never wrap. */ .hud-gauge--split { display: flex; align-items: center; } .hud-gauge--split .hud-gauge-label { position: relative; inset: auto; flex: 1; min-width: 0; display: block; text-align: start; padding-inline-end: calc(2 * var(--gp)); line-height: max( calc(var(--gauge-h) - 2 * var(--gp)), calc(var(--type-metadata-readable-size) * 1.2) ); } .hud-gauge--split .hud-gauge-pct { position: relative; inset: auto; flex: none; padding-inline-end: calc(4 * var(--gp)); } .hud-gauge-max { white-space: pre; } .hud-gauge-pct { inset-inline: auto calc(4 * var(--gp)); justify-content: flex-end; } .hud-gauge--sm .hud-gauge-label, .hud-gauge--sm .hud-gauge-pct { font-size: var(--type-glyph-readable-size); font-family: var(--type-glyph-readable-family); -webkit-font-smoothing: var(--type-glyph-readable-smoothing); font-weight: var(--type-weight-label); letter-spacing: 0.03em; text-shadow: 0 var(--gp) 0 var(--pixel-ink); } /* No reading must not look like an empty bar: a lighter track, a paler edge and a dash, none of them a hue. */ .hud-gauge--unknown { --gauge-ring: var(--pixel-lilac); background: var(--pixel-dusk); } .hud-gauge--unknown .hud-gauge-label { color: var(--pixel-lilac); text-shadow: none; } @media (prefers-reduced-motion: reduce) { .hud-gauge, .hud-gauge-fill { transition: none !important; } } body.reduce-motion .hud-gauge, body.reduce-motion .hud-gauge-fill { transition: none !important; } /* High contrast gives every gauge a white inner edge; an edge that carries meaning (rank, cast tier) keeps its colour. */ body.high-contrast .hud-gauge { --gauge-ring: rgba(255, 255, 255, 0.82); } /* ===== The cast bar ==================================================== Every windup the HUD draws is this one instrument: the focused target's in its frame and the character's own under their feet. The skill's icon in a notched chip, then a gauge (hud-gauge.css) in the cast's colour. Same parts, same height; the target's gauge also carries the name and the clock, which the player casting their own skill already knows. Knobs on `.hud-cast`: --cast-fill the fill's paint; data-tier picks it from the tier table --cast-h the bar's height, a whole number of HUD pixels and on `.hud-cast-fill`: --cast-p the share drawn (0–1), rounded down to whole HUD pixels Structure:
… (optional) … (optional)
*/ .hud-cast { --cast-h: max( calc(9 * var(--gp)), round(up, calc(var(--type-metadata-readable-size) * 1.2 + 2 * var(--gp)), var(--gp)) ); --cast-fill: var(--cast-strong); display: grid; grid-template-columns: var(--cast-h) minmax(0, 1fr); column-gap: var(--gp); align-items: center; height: var(--cast-h); } .hud-cast[data-tier='routine'] { --cast-fill: var(--cast-routine); } .hud-cast[data-tier='strong'] { --cast-fill: var(--cast-strong); } .hud-cast[data-tier='signature'] { --cast-fill: var(--cast-signature); } .hud-cast[data-tier='critical'] { --cast-fill: var(--cast-critical); } /* A windup that broke, or that hits are pushing back, outranks its tier. */ .hud-cast.interrupted { --cast-fill: var(--danger); } .hud-cast.pushback { --cast-fill: var(--warn); } .hud-cast-icon { display: block; box-sizing: border-box; width: var(--cast-h); height: var(--cast-h); border: var(--gp) solid var(--pixel-ink); background: var(--pixel-night); object-fit: contain; clip-path: var(--pixel-notch); } .hud-cast-track { --gauge-h: var(--cast-h); --gauge-ring: color-mix(in srgb, var(--cast-fill) 62%, var(--pixel-ink)); } /* A block, so a long name ends in an ellipsis (a flex label just overflows), short of the clock. */ .hud-cast-track .hud-gauge-label { display: block; /* The row inside the gauge's one-pixel border. */ line-height: calc(var(--cast-h) - 2 * var(--gp)); text-align: center; } .hud-cast-track.hud-gauge--split .hud-gauge-label { text-align: start; } body.high-contrast .hud-cast-track { --gauge-ring: color-mix(in srgb, var(--cast-fill) 82%, #fff); } .hud-cast-fill { --cast-p: 0; width: round(down, calc(var(--cast-p) * 100%), var(--gp)); /* A step toward ink, so a bright tier reads as a fill and not a slab under the white name. */ background: color-mix(in srgb, var(--cast-fill) 78%, var(--pixel-ink)); transition: none; } /* Ront typography design system. * The interface face is a pixel font drawn on a 9px grid. It is sharp only when * each of its pixels covers a whole number of screen pixels, so this file names a * logical size for every pixel role and rounds it up to the next size that is * sharp on the screen in front of the player. No text is drawn smaller than its role: * small 12px numbers in gauges, timers, key hints, metadata * text 14px labels, body text, chat, quest lines * reading 18px names, headings, window titles * 3x/4x/5x 27-45px display titles, the pre-game wordmark * Small and text roles use a smooth face: the pixel face has no sharp 9-18px size at 1x. * --font-ui-compact bold only small and text roles * --font-ui regular, bold names, numbers, body text, titles * --font-ui-large bold only headings * Silkscreen, the display voice for titles, draws at 8/9 size on its own 8px grid. * A role's size, family and smoothing travel together: a rule that sets * `--type-X-size` sets `--type-X-family` and `--type-X-smoothing` beside it. * text-size.ts is the only writer of the two inputs: `--type-scale`, the player's * Text size times a desktop HUD's growth past 1x, and `--type-device-ratio`, * screen pixels per CSS pixel. A box that holds text sizes itself from these * roles, never from `--ui-scale` or `--gp`. */ :root { --font-display: 'Silkscreen', 'Ront UI', monospace; --font-ui: 'Ront UI', 'Ront UI Small', monospace; --font-ui-small: 'Ront UI Small', 'Ront UI', monospace; --font-ui-large: 'Ront UI Large', 'Ront UI', monospace; --font-ui-compact: 'Ront UI Compact', 'Ront UI', sans-serif; --type-grid: 9px; --type-scale: 1; --type-device-ratio: 1; /* One face pixel on one screen pixel: every size is a whole number of these. The 0.01px keeps a size that already is one, but reads a hair over after the division, from rounding up a whole step. */ --type-step: calc(var(--type-grid) / var(--type-device-ratio)); --type-small-size: calc(12px * var(--type-scale)); --type-text-size: calc(14px * var(--type-scale)); --type-compact-size: round( up, calc(1.5 * var(--type-grid) * var(--type-scale) - 0.01px), var(--type-step) ); --type-reading-size: round( up, calc(2 * var(--type-grid) * var(--type-scale) - 0.01px), var(--type-step) ); --type-tier-3x: round( up, calc(3 * var(--type-grid) * var(--type-scale) - 0.01px), var(--type-step) ); --type-tier-4x: round( up, calc(4 * var(--type-grid) * var(--type-scale) - 0.01px), var(--type-step) ); --type-tier-5x: round( up, calc(5 * var(--type-grid) * var(--type-scale) - 0.01px), var(--type-step) ); /* Cockpit roles share the compact and reading sizes; hierarchy comes from weight, colour and case. */ --type-ornament-size: var(--type-small-size); --type-ornament-family: var(--font-ui-compact); --type-ornament-smoothing: antialiased; --type-badge-size: var(--type-small-size); --type-badge-family: var(--font-ui-compact); --type-badge-smoothing: antialiased; --type-glyph-size: var(--type-small-size); --type-glyph-family: var(--font-ui-compact); --type-glyph-smoothing: antialiased; --type-micro-size: var(--type-small-size); --type-micro-family: var(--font-ui-compact); --type-micro-smoothing: antialiased; --type-metadata-size: var(--type-small-size); --type-metadata-family: var(--font-ui-compact); --type-metadata-smoothing: antialiased; --type-label-size: var(--type-text-size); --type-label-family: var(--font-ui-compact); --type-label-smoothing: antialiased; --type-relative-secondary-size: var(--type-text-size); --type-relative-secondary-family: var(--font-ui-compact); --type-relative-secondary-smoothing: antialiased; --type-body-compact-size: var(--type-text-size); --type-body-compact-family: var(--font-ui-compact); --type-body-compact-smoothing: antialiased; --type-body-size: var(--type-text-size); --type-body-family: var(--font-ui-compact); --type-body-smoothing: antialiased; --type-prose-size: var(--type-text-size); --type-prose-family: var(--font-ui-compact); --type-prose-smoothing: antialiased; --type-heading-size: var(--type-reading-size); --type-heading-family: var(--font-ui-large); --type-heading-smoothing: none; --type-section-heading-size: var(--type-reading-size); --type-section-heading-family: var(--font-ui-large); --type-section-heading-smoothing: none; /* Titles take the weight their own rule asks for; display roles step up the grid. */ --type-window-title-size: var(--type-reading-size); --type-window-title-family: var(--font-ui); --type-window-title-smoothing: none; --type-title-size: var(--type-reading-size); --type-title-family: var(--font-ui); --type-title-smoothing: none; --type-callout-size: var(--type-reading-size); --type-callout-family: var(--font-ui); --type-callout-smoothing: none; --type-screen-heading-size: var(--type-reading-size); --type-screen-heading-family: var(--font-ui); --type-screen-heading-smoothing: none; --type-display-size: var(--type-tier-3x); --type-display-family: var(--font-ui); --type-display-smoothing: none; --type-death-heading-size: var(--type-tier-3x); --type-death-heading-family: var(--font-ui); --type-death-heading-smoothing: none; --type-overlay-heading-size: var(--type-tier-3x); --type-overlay-heading-family: var(--font-ui); --type-overlay-heading-smoothing: none; --type-screen-display-size: var(--type-tier-3x); --type-screen-display-family: var(--font-ui); --type-screen-display-smoothing: none; --type-screen-hero-size: var(--type-tier-3x); --type-screen-hero-family: var(--font-ui); --type-screen-hero-smoothing: none; --type-hero-size: var(--type-tier-3x); --type-hero-family: var(--font-ui); --type-hero-smoothing: none; --type-gameover-size: var(--type-tier-4x); --type-gameover-family: var(--font-ui); --type-gameover-smoothing: none; /* Composition roles for story and entry screens. */ --type-narrative-lead-size: var(--type-reading-size); --type-narrative-lead-family: var(--font-ui); --type-narrative-lead-smoothing: none; --type-prologue-lead-size: var(--type-reading-size); --type-prologue-lead-family: var(--font-ui); --type-prologue-lead-smoothing: none; --type-cinematic-title-size: var(--type-tier-4x); --type-cinematic-title-family: var(--font-ui); --type-cinematic-title-smoothing: none; --type-pregame-hero-size: var(--type-tier-5x); --type-pregame-hero-family: var(--font-display); --type-pregame-hero-smoothing: none; --type-pregame-title-size: var(--type-reading-size); --type-pregame-title-family: var(--font-ui); --type-pregame-title-smoothing: none; --type-pregame-heading-size: var(--type-tier-3x); --type-pregame-heading-family: var(--font-display); --type-pregame-heading-smoothing: none; --type-pregame-body-size: var(--type-reading-size); --type-pregame-body-family: var(--font-ui); --type-pregame-body-smoothing: none; --type-pregame-metadata-size: var(--type-small-size); --type-pregame-metadata-family: var(--font-ui-compact); --type-pregame-metadata-smoothing: antialiased; --type-pregame-badge-size: var(--type-small-size); --type-pregame-badge-family: var(--font-ui-compact); --type-pregame-badge-smoothing: antialiased; /* Named floors and bounds from the fractional ramp. Every role is now at or above its floor, so each one is its base role. */ --type-badge-readable-size: var(--type-badge-size); --type-badge-readable-family: var(--type-badge-family); --type-badge-readable-smoothing: var(--type-badge-smoothing); --type-glyph-readable-size: var(--type-glyph-size); --type-glyph-readable-family: var(--type-glyph-family); --type-glyph-readable-smoothing: var(--type-glyph-smoothing); --type-micro-readable-size: var(--type-micro-size); --type-micro-readable-family: var(--type-micro-family); --type-micro-readable-smoothing: var(--type-micro-smoothing); --type-metadata-readable-size: var(--type-metadata-size); --type-metadata-readable-family: var(--type-metadata-family); --type-metadata-readable-smoothing: var(--type-metadata-smoothing); --type-label-readable-size: var(--type-label-size); --type-label-readable-family: var(--type-label-family); --type-label-readable-smoothing: var(--type-label-smoothing); --type-body-compact-readable-size: var(--type-body-compact-size); --type-body-compact-readable-family: var(--type-body-compact-family); --type-body-compact-readable-smoothing: var(--type-body-compact-smoothing); --type-body-readable-size: var(--type-body-size); --type-body-readable-family: var(--type-body-family); --type-body-readable-smoothing: var(--type-body-smoothing); --type-prose-readable-size: var(--type-prose-size); --type-prose-readable-family: var(--type-prose-family); --type-prose-readable-smoothing: var(--type-prose-smoothing); --type-badge-bounded-size: var(--type-badge-size); --type-badge-bounded-family: var(--type-badge-family); --type-badge-bounded-smoothing: var(--type-badge-smoothing); --type-glyph-bounded-size: var(--type-glyph-size); --type-glyph-bounded-family: var(--type-glyph-family); --type-glyph-bounded-smoothing: var(--type-glyph-smoothing); /* Handheld layouts fold and scroll; they share the readable logical ramp. */ --type-handheld-glyph-size: var(--type-small-size); --type-handheld-glyph-family: var(--font-ui-compact); --type-handheld-glyph-smoothing: antialiased; --type-handheld-micro-size: var(--type-small-size); --type-handheld-micro-family: var(--font-ui-compact); --type-handheld-micro-smoothing: antialiased; --type-handheld-metadata-size: var(--type-small-size); --type-handheld-metadata-family: var(--font-ui-compact); --type-handheld-metadata-smoothing: antialiased; --type-handheld-label-size: var(--type-text-size); --type-handheld-label-family: var(--font-ui-compact); --type-handheld-label-smoothing: antialiased; --type-handheld-body-compact-size: var(--type-text-size); --type-handheld-body-compact-family: var(--font-ui-compact); --type-handheld-body-compact-smoothing: antialiased; --type-handheld-body-size: var(--type-text-size); --type-handheld-body-family: var(--font-ui-compact); --type-handheld-body-smoothing: antialiased; --type-handheld-prose-size: var(--type-text-size); --type-handheld-prose-family: var(--font-ui-compact); --type-handheld-prose-smoothing: antialiased; --type-handheld-heading-size: var(--type-reading-size); --type-handheld-heading-family: var(--font-ui-large); --type-handheld-heading-smoothing: none; --type-handheld-title-size: var(--type-reading-size); --type-handheld-title-family: var(--font-ui); --type-handheld-title-smoothing: none; --type-handheld-screen-heading-size: var(--type-reading-size); --type-handheld-screen-heading-family: var(--font-ui); --type-handheld-screen-heading-smoothing: none; /* Approved emphasis. The face has a regular and a bold; every weight between answers with one of them, never a synthesized smear. */ --type-weight-normal: 400; --type-weight-regular: 500; --type-weight-medium: 600; --type-weight-strong: 700; --type-weight-label: 700; --type-weight-display: 700; --type-weight-emphasis: 700; /* Leading follows content density rather than surface ownership. */ --type-leading-solid: 1; --type-leading-tight: 1.2; --type-leading-compact: 1.3; --type-leading-body: 1.4; --type-leading-reading: 1.55; font-family: var(--font-ui); font-synthesis: none; /* macOS otherwise antialiases the glyph edges on a fractional x. */ -webkit-font-smoothing: none; } /* Text no rule sizes would otherwise draw at the browser's 16px (13.33px in a button), which no cut is drawn for. `rem` stays on the root's 16px. */ body { font-size: var(--type-body-size); font-family: var(--type-body-family); -webkit-font-smoothing: var(--type-body-smoothing); } button, input, select, textarea { font-size: inherit; font-family: inherit; } /* Numeric columns keep their rhythm without introducing another typeface. */ .type-data { font-variant-numeric: tabular-nums; } :root { --bg: #091013; --panel: #11191d; --panel-2: #192327; --panel-raised: #202c30; --accent: #c9a45e; --accent-2: #9e7138; --gold: #d9a441; --gold-value: #ffe066; --gold-ink: #ffe0a0; --gold-label: #f0d999; --text: #eee9de; --muted: #98a4a3; --danger: #d85b48; --ui-line: #344247; --ui-line-soft: rgba(133, 151, 153, 0.2); --ui-line-bright: rgba(188, 201, 196, 0.34); --ui-surface: #0d1417; --ui-surface-raised: #161f22; /* Hard offset shadow, no penumbra; blur stays 0 everywhere so the edge reads as a drawn line. */ --ui-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55); --ui-frame-fill: #151f23; --ui-frame-shadow: inset 2px 2px 0 rgba(236, 228, 205, 0.07), inset -2px -2px 0 rgba(0, 0, 0, 0.4); /* A surface with its own tone (only the death card) restates these three, inheriting the rest. */ --ui-frame-glow: rgba(201, 164, 94, 0.08); --ui-tick-fill: linear-gradient(180deg, #ead8a5 0 55%, var(--accent-2) 55% 100%); --ui-tick-glow: rgba(201, 164, 94, 0.2); --ui-head-rule-lead: rgba(201, 164, 94, 0.42); --ui-control-fill: #0a1013; --ui-control-fill-hover: #253031; --ui-control-line: rgba(133, 151, 153, 0.28); --ui-control-line-hover: rgba(201, 164, 94, 0.58); /* Focus bracket drawn inside the piece so a notched piece's clip can't cut it off. */ --ui-focus-ring: inset 0 0 0 var(--gp) var(--bg), inset 0 0 0 calc(2 * var(--gp)) var(--accent); /* How far a control sinks while held; a scrolling panel reserves this room to avoid scrollbar flicker. */ --ui-press-travel: 1px; /* Device insets as one token set; surfaces read these rather than env() itself. */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --good: #6fd06a; --info: #3498db; --skillmsg: #b48ce0; --warn: var(--accent-2); --grid-line: var(--ui-line); --row-hover: rgba(255, 255, 255, 0.04); --hotbar-h: calc(96px * var(--ui-scale)); /* Accessibility UI scale: applyUiScale() overrides it on :root; HUD sizes scale off it via calc(). */ --ui-scale: 1; --hud-edge: round(calc(12px * var(--ui-scale)), 1px); --hud-safe-top: max(var(--hud-edge), var(--safe-top)); --hud-safe-right: max(var(--hud-edge), var(--safe-right)); --hud-safe-bottom: max(var(--hud-edge), var(--safe-bottom)); --hud-safe-left: max(var(--hud-edge), var(--safe-left)); --hud-dock-row-right: calc( var(--hud-safe-right) + mod(100vw - var(--hud-safe-left) - var(--hud-safe-right), 2px) ); --hud-gap: round( calc(8px * var(--ui-scale)), 1px ); /* whole px; the row's right is an even width */ /* Mobile Safari auto-inflates text, which would double up with sizes derived from the accessibility scale. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } * { box-sizing: border-box; } /* Every scrolling surface wears the slim brass bar; both properties inherit from the root, so a shadow-root surface wanting a different bar must restate it. */ :root { --ui-scrollbar-thumb: rgba(201, 164, 94, 0.45); --ui-scrollbar-track: rgba(7, 12, 14, 0.5); scrollbar-width: thin; scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* The page is a game: a press is a gesture, not text selection. Surfaces needing a caret opt back in below; `browser-menu-lock` handles menus CSS cannot reach. */ html, body, #app { margin: 0; height: 100%; background: var(--bg); color: var(--text); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Anything a caret goes into keeps selection working: an inherited `none` breaks `select()` on iOS. A shadow-rendered field must restate it. */ input, textarea, select, [contenteditable]:not([contenteditable='false']) { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; } #app { display: flex; align-items: center; justify-content: center; } .screen { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .panel { padding: calc(12px * var(--ui-scale)) calc(14px * var(--ui-scale)); width: calc(360px * var(--type-scale, 1)); } .panel h1 { margin: 0 0 calc(8px * var(--ui-scale)); font-size: var(--type-title-size); font-family: var(--type-title-family); -webkit-font-smoothing: var(--type-title-smoothing); letter-spacing: 0.15px; } .panel .subtitle { color: var(--muted); font-size: var(--type-body-size); font-family: var(--type-body-family); -webkit-font-smoothing: var(--type-body-smoothing); margin-bottom: 20px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: var(--type-body-compact-size); font-family: var(--type-body-compact-family); -webkit-font-smoothing: var(--type-body-compact-smoothing); color: var(--muted); margin-bottom: 6px; } .field input { width: 100%; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--ui-control-line); color: var(--text); font-size: var(--type-prose-size); font-family: var(--type-prose-family); -webkit-font-smoothing: var(--type-prose-smoothing); } .field input:focus { outline: none; border-color: var(--accent); } .status { margin-top: 14px; font-size: var(--type-body-size); font-family: var(--type-body-family); -webkit-font-smoothing: var(--type-body-smoothing); min-height: 18px; } .status.error { color: var(--danger); } .status.info { color: var(--muted); } .char-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .char-card { background: var(--panel-2); border: 1px solid var(--ui-control-line); padding: 14px; cursor: var(--cursor-action); text-align: center; transition: border-color 0.15s, transform 0.1s; } .char-card:hover { border-color: var(--accent); transform: translateY(-2px); } .char-card .name { font-weight: var(--type-weight-medium); margin-bottom: 4px; } .char-card .meta { font-size: var(--type-body-compact-size); font-family: var(--type-body-compact-family); -webkit-font-smoothing: var(--type-body-compact-smoothing); color: var(--muted); } .char-card.empty { color: var(--muted); cursor: var(--cursor-default); opacity: 0.5; } #game-canvas { width: 100vw; height: 100vh; display: block; } .hud { position: fixed; top: 12px; left: 12px; background: #0a0e14; border: 2px solid var(--ui-line-soft); padding: 10px 14px; font-size: var(--type-body-size); font-family: var(--type-body-family); -webkit-font-smoothing: var(--type-body-smoothing); pointer-events: none; } .hud .row { margin: 2px 0; } .hud .label { color: var(--muted); } /* Containers do not capture clicks, so the canvas under them stays usable for movement. */ .overlay { position: fixed; pointer-events: none; z-index: 10; } /* A dock pins to one corner; a rail stacks widgets with a shared gap. Dragged widgets gain .hud-layout-detached and leave the flow. */ /* A rail widget whose reveal moment (onboarding-disclosure.ts) has not arrived. Important beats the widget's own visibility logic; the system behind it keeps running. */ .hud-disclosure-hidden { display: none !important; } /* One gold swell when the reveal arrives mid-session; removed on animationend (hud.ts). */ .hud-disclosure-revealed { animation: hud-disclosure-reveal 1.2s ease-out 2; } @keyframes hud-disclosure-reveal { 0%, 100% { filter: none; } 50% { filter: brightness(1.25) drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 60%, transparent)); } } .hud-dock-row { position: fixed; display: grid; align-items: start; gap: var(--hud-gap); pointer-events: none; z-index: 10; } .hud-dock-row--top { top: var(--hud-safe-top); left: var(--hud-safe-left); right: var(--hud-dock-row-right); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } :root:not([data-ui-profile='handheld']) .hud-dock-row--top { grid-template-columns: minmax(0, 1fr) minmax(var(--hud-center-width, 0px), auto) minmax(0, 1fr); } /* Only the centre column drops under the toolbar; side clusters carry tall rails that would reach the bottom docks. */ .hud-layout-editing .hud-dock--topCenter { margin-top: max( 0px, calc(var(--hud-layout-bar-reserve, 0px) + var(--hud-gap) - var(--hud-safe-top)) ); } .hud-dock-row--bottom { right: var(--hud-dock-row-right); bottom: var(--hud-safe-bottom); left: var(--hud-safe-left); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; z-index: 30; } .hud-dock { display: flex; align-items: flex-start; gap: var(--hud-gap); min-width: 0; /* A dock parked at its lane's edge is sized by content and would grow past the lane over its neighbour; the lane is the budget. */ max-width: 100%; pointer-events: none; } /* Each top dock stops above the measured bottom dock; growing lists scroll within the remaining room. */ .hud-dock-row--top > .hud-dock { --hud-dock-room: 100dvh; max-block-size: calc(var(--hud-dock-room) - var(--hud-gap)); min-block-size: 0; } .hud-dock-row--top > .hud-dock--topLeft { --hud-dock-room: var(--hud-dock-left-room, 100dvh); } .hud-dock-row--top > .hud-dock--topCenter { --hud-dock-room: var(--hud-dock-center-room, 100dvh); } .hud-dock-row--top > .hud-dock--topRight { --hud-dock-room: var(--hud-dock-right-room, 100dvh); } /* A rail holds its size unless a member can give ground; shrinking fixed shells would spill out. */ .hud-dock-row--top .hud-rail { max-block-size: 100%; min-block-size: 0; flex-shrink: 0; } .hud-dock-row--top .hud-rail:has(> [data-hud-widget='questTracker']) { flex-shrink: 1; } :root:not([data-ui-profile='handheld']) .hud-dock-row--top .hud-rail:has(> [data-hud-widget='partyFrames']) { flex-shrink: 1; } .hud-dock--topCenter { align-items: center; justify-self: center; } .hud-dock--topRight { align-items: flex-end; justify-self: end; } .hud-dock--bottomLeft { width: 100%; min-width: 0; align-items: flex-start; align-self: end; justify-self: start; } .hud-dock--bottomCenter { align-items: center; align-self: end; justify-self: center; } .hud-dock--bottomRight { align-items: flex-end; align-self: end; justify-self: end; } .hud-rail { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hud-gap); pointer-events: none; /* Size to the widest widget so a widget sizing against 100% still measures its own width. */ width: max-content; max-width: 100%; } .hud-rail:empty { display: none; } .hud-dock--topRight .hud-rail, .hud-dock--bottomRight .hud-rail { align-items: flex-end; } /* A centre rail is as wide as its widest widget so narrower ones centre on it; otherwise an NPC conversation would drag the action bars off centre. */ .hud-dock--topCenter .hud-rail, .hud-dock--bottomCenter .hud-rail { align-items: center; } .hud-dock--bottomLeft .hud-rail { width: 100%; min-width: 0; } .hud-dock--bottomLeft .chat-wrap.hud-railed:not(.hud-layout-detached):not(.is-collapsed) { width: min(var(--chat-w, calc(340px * var(--ui-scale))), 100%); min-width: 0; max-width: 100%; } /* A railed widget contributes height only; the rail owns where it lands, so its own anchor is dropped. */ .hud-railed:not(.hud-layout-detached) { position: relative; top: auto; left: auto; right: auto; bottom: auto; transform: none; flex: 0 0 auto; } .hud-dock-row--top .hud-rail > [data-hud-widget='questTracker'].hud-railed:not(.hud-layout-detached) { flex-shrink: 1; min-block-size: 0; } .hud-layout-detached { position: fixed; } :root:not([data-ui-profile='handheld']) .hud-dock-row--top .hud-rail > [data-hud-widget='partyFrames'].hud-railed:not(.hud-layout-detached) { flex-shrink: 1; min-block-size: calc(24 * var(--gp)); } .hud-layout-seat { flex: 0 0 auto; visibility: hidden; pointer-events: none; } .hud-safe-area-probe { position: fixed; inset: 0; z-index: -1; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); visibility: hidden; pointer-events: none; } .overlay button, .overlay input, .inv-cell, .npc-menu-item, .hot-slot { pointer-events: auto; cursor: var(--cursor-action); } .panel-box { background: #0a0e14; border: 2px solid var(--ui-line-soft); } :root { /* Cast-danger tier accents, one table for every surface that draws a windup. */ --cast-routine: #9ba7b8; --cast-strong: #d7aa38; --cast-signature: #db8cff; --cast-critical: #f05c50; --hud-vitals-track: #05090c; /* Gauge bands are quantized: hard steps, not a ramp. */ --hud-sp-fill: linear-gradient(90deg, #276e8c 0 45%, #4ba8c2 45% 100%); --hud-exp-fill: linear-gradient(180deg, #ffd98a 0 40%, var(--accent) 40% 72%, #b9822c 72% 100%); --hud-hp-ghost-fill: linear-gradient(90deg, #7a1f17 0 50%, #a3392f 50% 100%); /* Health bands: one table so a band is the same colour on every bar, ally, target frame and plate. */ --hud-hp-healthy-fill: linear-gradient(180deg, #6ee06e 0 40%, #3fae3f 40% 72%, #2b8a2b 72% 100%); --hud-hp-hurt-fill: linear-gradient(180deg, #f2d268 0 40%, #e0a020 40% 72%, #b87a12 72% 100%); /* Hotter than hurt on purpose so nearly dead separates from wounded at a glance. */ --hud-hp-execute-fill: linear-gradient(180deg, #ffa24a 0 40%, #f0561f 40% 72%, #b83a10 72% 100%); /* Load bands: unpaid weight is pewter, not green, so amber/danger mean only that this load costs movement. */ --hud-load-light-fill: linear-gradient(180deg, #a3b0bb 0 40%, #6c7c88 40% 72%, #4d5b66 72% 100%); --hud-load-heavy-fill: linear-gradient(180deg, #f2d268 0 40%, #e0a020 40% 72%, #b87a12 72% 100%); --hud-load-overloaded-fill: linear-gradient( 180deg, #ec8a72 0 40%, var(--danger) 40% 72%, #9c3a2c 72% 100% ); /* The band edge, brighter than its fill so the ring reads as an outline; `light` keeps the resting ring. */ --hud-load-heavy-ring: #e8bb46; --hud-load-overloaded-ring: #ef7359; --hud-hp-healthy-line: #3fae3f; --hud-hp-hurt-line: #e0a020; --hud-hp-execute-line: #f0561f; --hud-hp-line: var(--hud-hp-healthy-line); --hud-vitals-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9); } /* Health hairlines state their band including the default; the property inherits, so a healthy hairline inside a hurt one would take its colour. */ [data-hp-band='healthy'] { --hud-hp-line: var(--hud-hp-healthy-line); } [data-hp-band='hurt'] { --hud-hp-line: var(--hud-hp-hurt-line); } [data-hp-band='execute'] { --hud-hp-line: var(--hud-hp-execute-line); } .ront-frame { border: 1px solid var(--ui-line-soft); } .ront-ring { border: 1px solid color-mix(in srgb, var(--ui-line) 76%, transparent); } .hud-guild { display: flex; align-items: center; gap: calc(4px * var(--ui-scale)); min-width: 0; padding-left: calc(6px * var(--ui-scale)); border-left: 1px solid color-mix(in srgb, var(--ui-line) 70%, transparent); } .hud-guild-emblem { width: calc(19px * var(--ui-scale)); height: calc(19px * var(--ui-scale)); flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(197, 211, 232, 0.34); background: rgba(4, 7, 12, 0.78); box-shadow: 0 1px 0px rgba(0, 0, 0, 0.55); } .hud-guild-emblem img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; } .hud-guild-copy { display: grid; gap: calc(1px * var(--ui-scale)); min-width: 0; } .hud-guild-label { color: color-mix(in srgb, var(--muted) 72%, transparent); font-size: var(--type-badge-size); font-family: var(--type-badge-family); -webkit-font-smoothing: var(--type-badge-smoothing); font-weight: var(--type-weight-label); line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; } .hud-guild-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--type-micro-size); font-family: var(--type-micro-family); -webkit-font-smoothing: var(--type-micro-smoothing); font-weight: var(--type-weight-medium); line-height: 1.15; text-shadow: 0 1px 0px #000, 0 0 5px rgba(0, 0, 0, 0.9); } /* The character's own vitals and progression are the shared `.hud-gauge`; only the fill colour is theirs. */ .hud-gauge-fill.sp { background: var(--hud-sp-fill); } .hud-gauge-fill.exp { background: var(--hud-exp-fill); box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.5); } /* An ally's status strip, in their row and in the focus panel alike. */ .pf-buffs { display: flex; flex-wrap: wrap; gap: 2px; } .party-focus { width: max(200px, calc(210px * var(--ui-scale))); pointer-events: auto; background: rgba(7, 12, 14, 0.76); border: 1px solid var(--ui-line-soft); padding: calc(9px * var(--ui-scale)); display: flex; flex-direction: column; gap: calc(5px * var(--ui-scale)); box-shadow: 0 8px 0px rgba(0, 0, 0, 0.24); } .party-focus.pf-oor, .party-focus.pf-offline { opacity: 0.72; } .party-focus.pf-dead, .party-focus.pf-lowhp { box-shadow: inset calc(3px * var(--ui-scale)) 0 var(--danger), 0 8px 0px rgba(0, 0, 0, 0.35); } .party-focus:hover { filter: brightness(1.08); } .pf-focus-head { display: flex; align-items: center; gap: calc(6px * var(--ui-scale)); min-width: 0; } .pf-focus-copy { min-width: 0; flex: 1; } .pf-focus-name { color: var(--text); font-size: var(--type-body-compact-readable-size); font-family: var(--type-body-compact-readable-family); -webkit-font-smoothing: var(--type-body-compact-readable-smoothing); font-weight: var(--type-weight-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-focus-meta, .pf-focus-state { color: var(--muted); font-size: var(--type-metadata-readable-size); font-family: var(--type-metadata-readable-family); -webkit-font-smoothing: var(--type-metadata-readable-smoothing); line-height: 1.15; } .pf-focus-close, .pf-focus-action { border: 1px solid #354050; background: rgba(19, 26, 36, 0.92); color: var(--text); min-height: calc(22px * var(--ui-scale)); } .pf-focus-close { width: calc(22px * var(--ui-scale)); padding: 0; line-height: 1; } .pf-focus-close img { display: block; width: calc(16px * var(--ui-scale)); height: calc(16px * var(--ui-scale)); margin: auto; object-fit: contain; } .pf-focus-action { width: 100%; padding: calc(4px * var(--ui-scale)) calc(7px * var(--ui-scale)); font-size: var(--type-label-size); font-family: var(--type-label-family); -webkit-font-smoothing: var(--type-label-smoothing); font-weight: var(--type-weight-label); } .pf-focus-action:hover:not(:disabled), .pf-focus-close:hover { border-color: var(--accent); background: rgba(27, 36, 48, 0.95); } .pf-focus-action:disabled { color: var(--muted); cursor: var(--cursor-default); opacity: 0.75; } /* Window-toggle dock — the single consolidated command bar that opens the standard windows. Its default bottom-right anchor shares the action bar's baseline and the minimap's right edge; player layout customization can detach it to any other saved position. */ .menu-buttons { position: fixed; right: var(--hud-safe-right); bottom: var(--hud-safe-bottom); z-index: 30; display: flex; align-items: center; gap: 6px; /* The commands grow with the rest of the HUD. Handheld sizes its buttons for the thumb and resets this to 1. */ --menu-scale: var(--ui-scale); --menu-pad-block: round(calc(6px * var(--ui-scale)), 1px); --menu-pad-inline: round(calc(6px * var(--ui-scale)), 1px); padding: var(--menu-pad-block) var(--menu-pad-inline); pointer-events: auto; background: rgba(7, 12, 14, 0.72); border: 1px solid var(--ui-line-soft); box-shadow: 0 8px 0px rgba(0, 0, 0, 0.28); } /* Placement stays on `.menu-buttons` alone. Restating it here would carry two classes, tying with the rail's own two-class claim and winning on source order — the dock would keep `position: fixed` inside a rail, drop out of flow, and land at its static position below the screen edge. */ .menu-buttons.is-collapsible { gap: 0; overflow: visible; isolation: isolate; background: transparent; border: 0; box-shadow: none; } .menu-buttons.is-collapsible:not(.is-collapsed) { z-index: 48; background: transparent; border: 0; box-shadow: none; } /* The command panel is placed in dock-local pixels: JavaScript picks the corner it grows from and clamps it inside the visible viewport, so the panel never depends on a transition landing to sit where it belongs. */ .menu-buttons.is-collapsible .menu-items { position: absolute; top: var(--menu-panel-y, 0px); left: var(--menu-panel-x, 0px); z-index: 42; display: grid; grid-template-columns: repeat(var(--menu-panel-columns, 3), auto); align-items: center; justify-items: center; gap: calc(6px * var(--menu-scale, 1)); /* Bounds only for a viewport no arrangement of the grid fits; unset otherwise, so nothing can clip a panel that had the room. */ max-width: var(--menu-panel-max-width, none); max-height: var(--menu-panel-max-height, none); /* The panel scrolls, so it clips: its rows keep the room a lit command's halo hop and shake need (pixel-chrome.css). */ padding: max(var(--menu-pad-block), var(--pixel-halo-reach, 0px)) max(var(--menu-pad-inline), var(--pixel-halo-reach, 0px)); overflow: auto; overscroll-behavior: contain; background: rgba(7, 12, 14, 0.86); border: 1px solid var(--ui-line-soft); box-shadow: 0 10px 0px rgba(0, 0, 0, 0.42); } .menu-buttons[data-menu-open-x='left'][data-menu-open-y='up'] .menu-items { transform-origin: bottom right; } .menu-buttons[data-menu-open-x='left'][data-menu-open-y='down'] .menu-items { transform-origin: top right; } .menu-buttons[data-menu-open-x='right'][data-menu-open-y='up'] .menu-items { transform-origin: bottom left; } .menu-buttons[data-menu-open-x='right'][data-menu-open-y='down'] .menu-items { transform-origin: top left; } .menu-collapse-btn { z-index: 43; } .hud-layout-editing .hud-layout-widget { outline: 2px solid color-mix(in srgb, var(--gold) 85%, transparent); outline-offset: 3px; opacity: 0.72; cursor: move; pointer-events: auto !important; touch-action: none; user-select: none; } .hud-layout-editing .hud-layout-widget.hud-layout-dragging { cursor: grabbing; } .hud-layout-editing .hud-layout-widget.hud-layout-custom { outline-color: var(--accent); box-shadow: none; } .hud-layout-editing .hud-layout-widget.hud-layout-keyboard-focus { outline: 3px solid rgba(74, 163, 255, 0.9); } .hud-layout-editing.hud-layout-snap::before { content: ''; position: fixed; inset: 0; z-index: 9; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--gold) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--gold) 14%, transparent) 1px, transparent 1px); background-size: 8px 8px; } .hud-layout-handle { position: fixed; display: none; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; } .hud-layout-bar { top: 12px; left: 50%; z-index: 63; transform: translateX(-50%); align-items: center; gap: 8px; padding: 5px 6px 5px 10px; pointer-events: auto; background: rgba(10, 14, 20, 0.9); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); box-shadow: 0 10px 0px rgba(0, 0, 0, 0.38); } .hud-layout-title { color: var(--text); font-size: var(--type-body-compact-size); font-family: var(--type-body-compact-family); -webkit-font-smoothing: var(--type-body-compact-smoothing); font-weight: var(--type-weight-label); } .hud-layout-action { border: 1px solid rgba(116, 132, 156, 0.42); background: rgba(255, 255, 255, 0.04); color: var(--text); padding: 4px 9px; font-size: var(--type-body-compact-size); font-family: var(--type-body-compact-family); -webkit-font-smoothing: var(--type-body-compact-smoothing); font-weight: var(--type-weight-strong); } .hud-layout-action:hover { border-color: color-mix(in srgb, var(--gold) 70%, transparent); color: var(--accent); } /* Copy, restore-default and confirm are their icons. Padding is set so the box lands on the same height as the snap toggle beside them, which is still a word because its label carries the state it is in. */ .hud-layout-icon-action { display: grid; place-items: center; padding: 2px; } .hud-layout-icon-action .hud-layout-icon { display: block; width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75)); } .hud-layout-icon-action:disabled .hud-layout-icon, .hud-layout-icon-action[aria-disabled='true'] .hud-layout-icon { opacity: 0.45; } /* A word is its own thumb target; an 18px mark is not. On handheld the icons take the same square as other icon controls, and the snap toggle rises to meet them so the row stays one line. The bar is taller for it, but only in layout mode, which is the one mode whose bar is allowed to cost height. */ [data-ui-profile='handheld'] .hud-layout-action { min-height: var(--hud-touch-min); } [data-ui-profile='handheld'] .hud-layout-icon-action { width: var(--hud-touch-min); min-width: var(--hud-touch-min); height: var(--hud-touch-min); } [data-ui-profile='handheld'] .hud-layout-icon-action .hud-layout-icon { width: 24px; height: 24px; } .hud-layout-action:disabled, .hud-layout-action[aria-disabled='true'] { cursor: var(--cursor-default); border-color: rgba(116, 132, 156, 0.26); color: rgba(214, 223, 237, 0.68); background: rgba(255, 255, 255, 0.025); } .hud-layout-action:disabled:hover, .hud-layout-action[aria-disabled='true']:hover { border-color: rgba(116, 132, 156, 0.26); color: rgba(214, 223, 237, 0.68); } .hud-layout-action[aria-pressed='true'] { border-color: color-mix(in srgb, var(--gold) 75%, transparent); background: color-mix(in srgb, var(--gold) 14%, transparent); color: #ffe6a6; } .hud-layout-editing.hud-layout-precision .hud-layout-action[aria-pressed='true'] { border-color: rgba(74, 163, 255, 0.78); background: rgba(74, 163, 255, 0.13); color: #b8e4ff; } .hud-layout-action.primary { background: color-mix(in srgb, var(--gold) 18%, transparent); border-color: color-mix(in srgb, var(--gold) 75%, transparent); color: #ffe6a6; } .hud-layout-bar textarea[data-hud-layout-debug='fallback'] { width: min(52vw, 280px); height: 4.5rem; margin: 0; padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: rgba(10, 14, 20, 0.92); color: var(--text); font-size: var(--type-metadata-size); font-family: var(--type-metadata-family); -webkit-font-smoothing: var(--type-metadata-smoothing); line-height: 1.3; pointer-events: auto; } .hud-layout-placeholder { min-width: 132px; min-height: 28px; display: flex; align-items: center; justify-content: center; padding: 5px 9px; border: 1px dashed color-mix(in srgb, var(--gold) 65%, transparent); color: var(--accent); background: rgba(10, 14, 20, 0.62); font-size: var(--type-label-size); font-family: var(--type-label-family); -webkit-font-smoothing: var(--type-label-smoothing); font-weight: var(--type-weight-label); } /* Thin divider fencing the system/Options button off from the window toggles. It takes a row of its own so the commands above it keep the grid's columns. */ .menu-divider { grid-column: 1 / -1; justify-self: stretch; height: 1px; margin: 2px 4px; background: linear-gradient( 90deg, transparent, rgba(109, 124, 146, 0.62) 18%, rgba(109, 124, 146, 0.62) 82%, transparent ); } .menu-btn { --plate-line: var(--pixel-ink); --plate-face: var(--pixel-night); --plate-rim: var(--pixel-rim); position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; width: calc(42px * var(--menu-scale, 1)); height: calc(42px * var(--menu-scale, 1)); padding: 0; overflow: hidden; background: none; border: 0; color: var(--muted); cursor: var(--cursor-action); box-shadow: none; transition: color 0.12s ease, filter 0.12s ease; } /* The fold trigger's plate over a night face (hud-fold.css says why it is a pseudo-element); a state repaints --plate-*. */ .menu-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border: var(--gp) solid var(--plate-line); background: var(--plate-face); box-shadow: var(--plate-rim); clip-path: var(--pixel-notch); pointer-events: none; } .menu-glyph { display: grid; place-items: center; width: calc(34px * var(--menu-scale, 1)); height: calc(34px * var(--menu-scale, 1)); background: transparent; } .menu-icon { display: block; width: calc(34px * var(--menu-scale, 1)); height: calc(34px * var(--menu-scale, 1)); object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75)); } .menu-label { display: none; flex: 1 1 auto; min-width: 0; overflow: hidden; padding-right: calc(16px * var(--ui-scale)); color: var(--text); font-size: var(--type-body-compact-size); font-family: var(--type-body-compact-family); -webkit-font-smoothing: var(--type-body-compact-smoothing); font-weight: var(--type-weight-strong); line-height: 1.1; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .menu-btn:hover { color: var(--text); filter: brightness(1.15); } .menu-btn:active { filter: brightness(0.92); } /* An open window's command: the accent outline over a lifted face. */ .menu-btn[aria-pressed='true'] { color: var(--accent); --plate-line: var(--accent); --plate-face: var(--pixel-dusk); } .menu-btn:focus-visible { outline: none !important; box-shadow: none !important; --plate-rim: inset 0 0 0 var(--gp) var(--pixel-ink), inset 0 0 0 calc(2 * var(--gp)) var(--accent); } /* Hotkey badge: runtime layer, not baked into icon art. The hotbar's key plate: notched ink, a lit top row, sized by its text. */ .menu-key { position: absolute; right: calc(2 * var(--gp)); bottom: calc(2 * var(--gp)); min-width: calc(7 * var(--gp)); height: auto; box-sizing: border-box; padding: 0 calc(2 * var(--gp)); background: var(--pixel-ink); color: #e9edf4; font-size: var(--type-glyph-size); font-family: var(--type-glyph-family); -webkit-font-smoothing: var(--type-glyph-smoothing); font-weight: var(--type-weight-label); line-height: var(--type-leading-tight); text-align: center; box-shadow: inset 0 var(--gp) 0 var(--pixel-dusk); clip-path: var(--pixel-notch); pointer-events: none; } .menu-btn:hover .menu-key, .menu-btn[aria-pressed='true'] .menu-key { color: #ffe2a0; } .target-panel { background: rgba(10, 14, 20, 0.82); border: 1px solid var(--ui-line-soft); padding: 6px 16px; } /* The one button family for in-game surfaces: a button states a variant (primary=brass/go, secondary=matte, ghost=steps aside, danger=destroys), never its own paint. Pre-game keeps .menu-button; the hotbar slot is its own grammar. Pixel material from pixel-chrome.css. */ .ron-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(3 * var(--gp)); box-sizing: border-box; min-height: calc(14 * var(--gp)); padding: 0 calc(6 * var(--gp)); background: var(--pixel-dusk); border: var(--gp) solid var(--pixel-ink); color: var(--pixel-cream); font-size: var(--type-body-size); font-family: var(--type-body-family); -webkit-font-smoothing: var(--type-body-smoothing); font-weight: var(--type-weight-strong); line-height: round(up, 1.2em, calc(2 * var(--gp))); text-align: center; cursor: var(--cursor-action); position: relative; box-shadow: inset var(--gp) var(--gp) 0 var(--pixel-slate), inset calc(-1 * var(--gp)) calc(-1 * var(--gp)) 0 var(--pixel-night); clip-path: var(--pixel-notch); transition: none; } .ron-btn:hover:not(:disabled):not([aria-disabled='true']):not(.is-loading):not([data-locked]) { border-color: var(--pixel-ink); background: color-mix(in srgb, var(--pixel-slate) 45%, var(--pixel-dusk)); color: var(--pixel-cream); box-shadow: inset var(--gp) var(--gp) 0 var(--pixel-lilac), inset calc(-1 * var(--gp)) calc(-1 * var(--gp)) 0 var(--pixel-night); } .ron-btn:active:not(:disabled):not([aria-disabled='true']):not(.is-loading):not([data-locked]) { transform: translateY(var(--gp)); } .ron-btn:focus-visible { outline: none !important; box-shadow: var(--ui-focus-ring) !important; } .ron-btn:disabled, .ron-btn[aria-disabled='true'] { opacity: 0.5; cursor: var(--cursor-default); } /* Locked: gated by the game, not off. A flat muted plate reads as not yet where a dimmed one reads as broken. It is an attribute so identity stays stable. */ .ron-btn[data-locked], .ron-btn[data-locked]:disabled { opacity: 1; background: var(--pixel-night); color: var(--pixel-lilac); box-shadow: inset 0 0 0 var(--gp) var(--pixel-dusk); cursor: var(--cursor-default); } .ron-btn--primary, .ron-btn--primary:hover:not(:disabled):not([aria-disabled='true']):not(.is-loading):not( [data-locked] ) { background: var(--pixel-ochre); color: var(--pixel-ink); box-shadow: inset var(--gp) var(--gp) 0 var(--pixel-honey), inset calc(-1 * var(--gp)) calc(-1 * var(--gp)) 0 color-mix(in srgb, var(--pixel-ochre) 60%, var(--pixel-ink)); } .ron-btn--primary:hover:not(:disabled):not([aria-disabled='true']):not(.is-loading):not( [data-locked] ) { background: color-mix(in srgb, var(--pixel-honey) 35%, var(--pixel-ochre)); } .ron-btn--ghost, .ron-btn--ghost:hover:not(:disabled):not([aria-disabled='true']):not(.is-loading):not( [data-locked] ) { background: var(--pixel-night); color: var(--pixel-lilac); box-shadow: inset 0 0 0 var(--gp) var(--pixel-dusk); } .ron-btn--ghost:hover:not(:disabled):not([aria-disabled='true']):not(.is-loading):not( [data-locked] ) { color: var(--pixel-cream); box-shadow: inset 0 0 0 var(--gp) var(--pixel-slate); } .ron-btn--danger, .ron-btn.is-confirming, .ron-btn--danger:hover:not(:disabled):not([aria-disabled='true']):not(.is-loading):not( [data-locked] ), .ron-btn.is-confirming:hover:not(:disabled):not([aria-disabled='true']):not(.is-loading):not( [data-locked] ) { background: color-mix(in srgb, var(--pixel-debuff) 45%, var(--pixel-night)); color: var(--pixel-cream); box-shadow: inset var(--gp) var(--gp) 0 var(--pixel-debuff), inset calc(-1 * var(--gp)) calc(-1 * var(--gp)) 0 var(--pixel-ink); } .ron-btn--sm { min-height: calc(12 * var(--gp)); padding: 0 calc(4 * var(--gp)); font-size: var(--type-label-size); font-family: var(--type-label-family); -webkit-font-smoothing: var(--type-label-smoothing); } .ron-btn--block { width: 100%; } /* Busy: the press was taken and the game is working. The label stays in place, invisible, so the button does not shift under the cursor. */ .ron-btn.is-loading { pointer-events: none; color: transparent; } .ron-btn.is-loading::after { content: ''; width: calc(6 * var(--gp)); height: calc(6 * var(--gp)); /* The border spinner tumbles when squared; the kit paint stays round, stated here to outrank the pixel-chrome sweep. */ border-radius: 50% !important; border: var(--gp) solid var(--pixel-dusk); border-top-color: var(--accent); animation: ui-spin 700ms linear infinite; } /* The one spin keyframe every spinner shares; private copies drift into divergent timing. */ @keyframes ui-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ron-btn.is-loading::after { animation-duration: 1600ms; } } body.reduce-motion .ron-btn.is-loading::after, body.reduce-flashing .ron-btn.is-loading::after { animation-duration: 1600ms; } body.high-contrast .ron-btn { border-color: #8fa0b5; } body.high-contrast .ron-btn--ghost { background: #0a0e14; } body.high-contrast .ron-btn:disabled, body.high-contrast .ron-btn[aria-disabled='true'] { border-color: #6f7d92; } /* The key that presses this button, worn inside it. Place-specific keycaps stay where they live. */ .ron-btn__key { display: grid; place-items: center; min-width: calc(9 * var(--gp)); height: calc(9 * var(--gp)); padding: 0 calc(2 * var(--gp)); border: var(--gp) solid var(--pixel-dusk); background: var(--pixel-ink); color: var(--pixel-lilac); font-size: var(--type-metadata-size); font-family: var(--type-metadata-family); -webkit-font-smoothing: var(--type-metadata-smoothing); font-weight: var(--type-weight-label); font-variant-numeric: tabular-nums; line-height: 1; } .ron-btn:hover .ron-btn__key, .ron-btn:focus-visible .ron-btn__key { border-color: var(--accent); color: var(--accent); } /* The one dropdown family: native