/* Terminal theme. Locally bundled OFL font; no runtime font service. */
@font-face {
  font-family: 'Pixelify Sans';
  src: url('assets/fonts/PixelifySans.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
}
/* Pixelify Sans joins "fi" into one glyph by default, so "The Underfirmament" read "The
   UnderArmament" (owner, 26 September 2026). Nothing in the game or on the site wants ligatures.
   Every `font` shorthand resets this longhand, hence the importance. */
*,::before,::after{font-variant-ligatures:no-common-ligatures!important}
/* Paint and geometry are separate. See docs/UI-SYSTEM.md. */
:root {
  --ui-scale: 1;
  /* The desktop plate's height with a two-line objective, and the Settings square beside it. */
  --plate-square:calc(68px * var(--ui-scale));
  /* The window's height for layout: 100dvh equals 100vh on a desktop and follows a phone's browser bars. The one viewport-height unit in the game stylesheets. */
  --app-height: 100dvh;
  /* The safe area a phone's camera band and home bar leave; zero on a desktop, set on touch devices below. */
  --safe-top: 0px;
  --safe-right: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --font-ui: Bahnschrift, 'Trebuchet MS', sans-serif;
  --font-detail: var(--font-ui);
  --font-card: var(--font-ui);
  --font-screen: 'Pixelify Sans', monospace;
  /* The dark behind the world on the floors and rooms: `VOID` in client/frame.ts as the canvas
     shows it (its channels times 255). The loading screen wears it, so the world comes in on it. */
  --world-void: #070908;
  --text: #e8e2d2;
  --muted: #9a9c90;
  --panel-body: #cfc6a6;
  --gold: #f0b448;
  /* Souls: the pale blue wisp and the lamp's glass (Soulburst's colour in joker-vfx.ts). */
  --soul: #8dbdcf;
  --paper: #efe6cf;
  --ink: #2a2d28;
  /* A conversation on the chat's paper: the speaker's name, narration and the continue line. */
  --dialogue-name: #8a3b22;
  --dialogue-note: #5d5440;
  --dialogue-continue: #2c4f8f;
  /* What a pointed-at line of a conversation turns to: the continue line, an option. */
  --dialogue-accent: #a2401c;
  --desk: #3a3d38;
  /* The screens' ground. Darker since 2 October 2026 (owner, after playing the glass: "dark"; it was #101812). */
  --screen-ground: #0b110d;
  --surface-inset: var(--screen-ground);
  /* The ground of a screen under the glass. The glass lays two faint layers of light over all
     of it, the haze and the colour grille, which showed the ground above as 15 22 18, the colour
     it had before "Dark" (owner, 3 October 2026: "without it its darker"). From this ground the
     glass shows 11 17 13, the Dark he picked, and nothing else of the look changes. */
  --glass-ground: #060b07;
  --frame-edge: #565a53;
  --panel-texture: repeating-conic-gradient(#3f423d 0 25%, transparent 0 50%);
  /* The panels on the desk (the dock, the plate, the trays, the dialogs, the inspector, the chat):
     slightly rounded and with no shadow behind them (owner, 3 October 2026, from an A/B of the
     corners and of the hard 3px shadow they had: "rounded 4px with no shadow"). */
  --panel-radius: 4px;
  --panel-shadow: none;
  --screen-edge: #1c241c;
  --screen-text: #e8e2d2;
  --screen-muted: #bfc0b3;
  --screen-rule: #b98a3a55;
  --screen-box-edge: #b98a3a66;
  --skill-xp-height: calc(8px * var(--ui-scale));
  --terminal-foot-height: calc(18px * var(--ui-scale));
  --screen-shadow: inset 1px 1px 0 #000;
  --screen-shadow-deep: inset 0 0 8px #000;
  /* The lines of a screen without the glass, drawn under its content. */
  --lines-under: repeating-linear-gradient(0deg, transparent 0 2px, #00000022 2px 3px);
  --screen-lines: var(--lines-under);
  /* The tube's glass over a screen (owner, 2 October 2026: look B of the CRT study, "Phosphor +
     glow 80%"): the lines lie over the pictures and text, the edges darken, a sheen top left, a
     haze that lifts the blacks. --crt is the strength of all of it; 0 is the bare screen. */
  --crt: .8;
  --screen-radius: 9px;
  /* A small screen's corners: the plate's, the health box, a toast, a tooltip. */
  --screen-radius-small: 6px;
  /* The colour grille in the glass: faint red, green and blue stripes of light, as the study page
     drew them, at --grille of the page's strength (owner, in play: "Light"). */
  --grille: .6;
  /* The scan lines' strength (owner, in play: "Lighter"). At 1, as first built, they stood out
     over the pale cards ("a bit strong", "over the cards very visibly"): a line takes a sixth
     off what is under it, which is little on the dark ground and a clear stripe on paper. */
  --lines: .65;
  --glass-grille: repeating-linear-gradient(90deg, rgb(255 60 60 / calc(.045 * var(--crt) * var(--grille))) 0 1px, rgb(60 255 90 / calc(.045 * var(--crt) * var(--grille))) 1px 2px, rgb(70 90 255 / calc(.045 * var(--crt) * var(--grille))) 2px 3px);
  --glass:
    linear-gradient(118deg, rgb(255 255 255 / calc(.05 * var(--crt))) 0%, transparent 24%),
    radial-gradient(125% 95% at 50% 46%, transparent 52%, rgb(0 0 0 / calc(.4 * var(--crt))) 100%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgb(0 0 0 / calc(.2 * var(--crt) * var(--lines))) 2px 3px),
    var(--glass-grille),
    linear-gradient(rgb(118 168 140 / calc(.035 * var(--crt))), rgb(118 168 140 / calc(.035 * var(--crt))));
  --glass-shadow: inset 0 0 0 1px #000, inset 0 2px 9px #000000bf;
  /* Light bleeding from what the screen shows. Under the glass it is a bloom of the screen's
     whole picture (ui-layout.css, `ScreenBloom`; owner, 2 October 2026: "bloom for the screen,
     keep the cards on today's halo"), so text and pictures take no glow of their own: these two
     are nothing here. A touch device, whose browser does not run an SVG filter as a backdrop,
     gives each its halo instead (below): a text's is drawn behind the letters, which stay sharp. */
  --screen-glow: none;
  --picture-glow: opacity(1);
  --text-halo: 0 0 6px color-mix(in srgb, currentColor calc(46% * var(--crt)), transparent);
  --picture-halo: drop-shadow(0 0 7px rgb(205 215 230 / calc(.28 * var(--crt))));
  /* A lit card's paper bleeding into the dark round it: the study page's halo on a held card (a
     box-shadow blurred 16px, which is a drop-shadow of 8px: at 16px it spread twice as far, and
     the owner found it "a bit too strong"). */
  --card-glow: drop-shadow(0 0 8px rgb(239 230 207 / calc(.3 * var(--crt))));
  --positive: #8fd18a;
  --negative: #d47a6a;
  --health-fill: #7f9a72;
  --health-edge: #5f7a58;
  --rest-fill: #6f9a8a;
  --rest-text: #8fd18a;
  --ember-edge: #e8a23c;
  --ember-glow: #ff9a2ecc;
  --ember-halo: #ff7a1a55;
  --joker-frame: #a8702a;
  --joker-lozenge: repeating-conic-gradient(from 0deg, #e8a23c 0 25%, #f5e4bb 0 50%);
  --rarity-common: #9a927a;
  --rarity-uncommon: #5f7a58;
  --rarity-rare: #726191;
  --steel: #a64148;
  --guard: #306983;
  --rune: #726191;
  --control-bg: #4a4e48;
  --control-edge: #22241f;
  --control-hover: #61665e;
  --control-selected: #2e312d;
  --control-primary: #f0b448;
  --control-primary-edge: #7a5a20;
  --control-primary-highlight: #ffe3a0;
  --control-danger: #8a4a40;
  --control-danger-edge: #4a2a24;
  --control-danger-highlight: #a35a4e;
  --control-raised-shadow: inset 1px 1px 0 #6a6e66;
  --control-pressed-shadow: inset -1px -1px 0 #6a6e66;
  --control-primary-shadow: inset 1px 1px 0 #ffe3a0, 2px 2px 0 #0f1a16aa;
  --control-danger-shadow: inset 1px 1px 0 #a86a60;
  --control-go: #5f8f55;
  --control-go-edge: #2c4a2a;
  --control-go-highlight: #76a86b;
  --control-go-shadow: inset 1px 1px 0 #8fd18a88;
  --focus: #f0cf76;
  --card-edge: #5a574a;
  --card-inset: #b8b09c;
  --card-shadow: #7a7360;
  /* A card that cannot play for want of something it spends (a rune card with no runes). */
  --card-wanting: #a8453e;
  --card-selected: var(--paper);
  --card-selected-edge: var(--gold);
  --card-hover: #fff5d6;
  --card-hover-edge: var(--gold);
  --card-selected-hover: #fff0bb;
  --card-selected-hover-edge: var(--gold);
  --kit-well: var(--surface-inset);
  --kit-edge: var(--frame-edge);
  --kit-grid: #b98a3a33;
  --kit-gold: var(--gold);
  --kit-text: var(--text);
  --kit-muted: var(--muted);
  --kit-tint: #f0b44822;
  --card-focus: #fff0b5;
  /* Cursors. Keywords until src/client/cursors.ts draws the Paper set and overrides these on the root. */
  --cursor-pointer: default;
  --cursor-interact: pointer;
  --cursor-grab: grab;
  --cursor-drag: grabbing;
  --cursor-busy: wait;

  /* The menu column (owner, 22 September 2026: wider, so the Build cards are a fifth larger) and the most an open menu grows downward on a tall screen. */
  --dock: calc(416px * var(--ui-scale));
  --menu-max-height: calc(840px * var(--ui-scale));
  /* The HUD holds its size (owner, 25 September 2026: "a game does not do this to the UI"): a card
     is one size at a UI scale, whatever the window or the chat does, and the band is built from
     it. Only Settings' UI scale changes them. */
  --card-width: calc(138px * var(--ui-scale));
  --card-height: calc(var(--card-width) * 7 / 5);
  --card-gap: 8px;
  --pile-width: 34px;
  /* The chat and a conversation are one box of one size, so talking moves nothing. 440px until
     26 September 2026, when the owner found it took too much room. */
  --chat-width: calc(400px * var(--ui-scale));
  /* The room the hand needs beside the chat: its three positions, a pile's width either side
     (the right side's effects may reach past it, into the empty world), and the paddings. */
  --hand-need: calc(3 * var(--card-width) + 2 * var(--card-gap) + 2 * (var(--pile-width) + var(--card-gap)) + 32px);
  --bottom: calc(var(--card-height) + 66px);
  /* The chat's box, and a conversation's: the band less #dialogue's padding. A phone's sheet is
     the same box (owner, 26 September 2026: one layout on both). */
  --talk-height: calc(var(--card-height) + 50px);
  /* The hand's content height: the band less #combat's and #hand's vertical padding (the effects are sized from it). */
  --hand-height: calc(var(--bottom) - 34px);
  --panel-gap: 8px;
  --editor-card: calc(134px * var(--ui-scale));
  --bag-cell: calc(56px * var(--ui-scale));
  --item-cell: calc(56px * var(--ui-scale));
  --tray-width: calc(310px * var(--ui-scale));
  --tree-width: min(calc(760px * var(--ui-scale)),calc(100vw - var(--dock) - 3 * var(--panel-gap)));
  --card-tray-width: min(calc(900px * var(--ui-scale)),calc(100vw - var(--dock) - 3 * var(--panel-gap)));
  --card-tray-side: calc(260px * var(--ui-scale));
  --button-height: calc(32px * var(--ui-scale));
  --tab-height: calc(40px * var(--ui-scale));
  --toolbar-height: calc(42px * var(--ui-scale));
  --tray-heading-height: calc(54px * var(--ui-scale));
  --tray-detail-height: calc(100px * var(--ui-scale));
  --candidate-status-height: calc(36px * var(--ui-scale));
  --status-height: calc(34px * var(--ui-scale));
  --build-footer-height: calc(var(--status-height) + var(--button-height) + 20px);
}
/* A touch device: a halo for each text and picture in place of the bloom. */
:root[data-touch] { --screen-glow: var(--text-halo); --picture-glow: var(--picture-halo); }
/* Compact height preserves world space; text/card scale remains user controlled. */
@media (max-height: 760px) {
  :root {
    --bag-cell: calc(32px * var(--ui-scale));
    --editor-card: calc(122px * var(--ui-scale));
    --tray-width: calc(288px * var(--ui-scale));
    --tab-height: calc(32px * var(--ui-scale));
    --toolbar-height: calc(36px * var(--ui-scale));
    --tray-detail-height: calc(64px * var(--ui-scale));
    --build-footer-height: calc(var(--status-height) + var(--button-height) + 16px);
  }
}
@media (max-width: 1000px) {
  :root {
    --dock: calc(368px * var(--ui-scale));
    --item-cell: calc(52px * var(--ui-scale));
    --tray-width: calc(288px * var(--ui-scale));
  }
}
/* Touch devices (device.ts marks the root): the insets the browser reports for this phone. */
:root[data-touch]{--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)}
/* The phone layout (docs/MOBILE-PLAN.md section 7), set by device.ts on a touch device in
   portrait. It resets every token the desktop breakpoints above change (a phone matches
   max-width 1000px and, when short, max-height 760px), so a desktop breakpoint edit cannot move
   the phone. Sizes are CSS px; text in calc(… * --ui-scale) grows with the phone's 120% default. */
:root[data-layout="portrait"]{
  --gutter:8px;
  --dock:100vw;
  --menu-max-height:none;
  /* The location plate and the tabs row under it (owner's pick A1). */
  --plate-height:58px;
  --tab-height:46px;
  /* Where the tabs' box starts under the plate: in the world and when a menu sheet is open. */
  --plate-band:calc(var(--safe-top) + 4px + var(--plate-height) + 6px);
  --top-strip:calc(var(--plate-band) + var(--tab-height) + 8px);
  /* The hand: four faces across the width, each overlapping the one before by its frame. */
  --overlap:6px;
  --phone-card:calc((100vw - 14px + 2 * var(--overlap)) / 4);
  --bottom:calc(var(--phone-card) * 7 / 5 + 30px);
  --hand-height:calc(var(--phone-card) * 7 / 5 + 20px);
  --button-height:44px;
  --toolbar-height:54px;
  --editor-card:calc((100vw - 2 * var(--gutter) - 48px) / 3);
  --bag-cell:calc(56px * var(--ui-scale));
  --item-cell:calc(52px * var(--ui-scale));
  --tray-width:100%;
  --tree-width:100%;
  --card-tray-width:100%;
  --tray-detail-height:112px;
  --build-footer-height:calc(var(--status-height) + var(--button-height) + 20px);
}