/* THE GAME'S LETTERING -- the ONE look for words over the play picture. Owner, 2026-10-03: "the ui with the boxes should be
   replaced even the gradient tip box should not be there unless stylized"; and 2026-10-04: "whenever we add new ui you keep using
   the block around text format that i have repeadetly told you to stop using for example the quest stuff in the tutorial the pet
   naming box stuff etc".

   So: words on the picture are COMIC LETTERING -- the fill drawn over a heavy ink outline (paint-order: stroke fill) and a hard ink
   drop -- and never a panel, a card, a border, a rail, a pill or a gradient scrim behind them. The letters' own outline is what makes
   them read on sky, grass and asphalt (ART-DIRECTION §3 rule 1, one heavy dark outline; rule 2, no gradients). The fishing take, the
   mission arrow's distance, JAMMED!, the tip card and the toast were the first; the quest card, the call-out, Vic's / the first
   pet's card, the soundtrack line, the compass and the pet's name tag use this file.

   A NEW piece of UI imports this file and uses these classes (or the --ink tokens, src/ui/components/ink-tokens.css): .ink-eyebrow, .ink-title, .ink-text, .ink-num, .ink-big, .ink-key,
   .ink-button (+ .primary), .ink-field, and dialog.ink-card for a card that pops up over play. One change here reaches all of them.
   scripts/hud-lettering-browser-check.cjs walks the play screen in its states and fails on any visible WORDS sitting on a
   background, a border, a box-shadow or a backdrop filter; a glyph (an icon button, a count badge, the record's note) is not words.
   Allowed boxes are only those a picture needs: a comic speech balloon with its tail on a speaker, the map's own canvas. */
@import './ink-tokens.css';
.ink-eyebrow{font:900 11px/1.3 var(--ink-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-yellow);
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.ink-title{font:900 24px/1.1 var(--ink-face);color:var(--ink-cream);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;
  text-shadow:var(--ink-drop)}
.ink-text{font:700 15px/1.45 var(--ink-sans);color:var(--ink-cream);-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill;
  text-shadow:1px 2px 0 var(--ink)}
/* THE SIZES the HUD's readouts were each re-typing (2026-10-29 count of the 90 sheets that draw an ink stroke: a 34px count with a 6px
   stroke, a 22px word with a 5px one, a 13px key letter with a 4px one were the commonest). A NEW readout takes one of these instead of
   typing its own font, stroke and drop: .ink-num a number you read at a glance (ammo, score, a count), .ink-big a word that stands on
   its own (a prompt, a call), .ink-key the key after an action word (key-hint.ts draws it; key-hint.css hides it on touch). */
.ink-num{font:900 34px/1 var(--ink-face);font-variant-numeric:tabular-nums;color:var(--ink-cream);-webkit-text-stroke:6px var(--ink);
  paint-order:stroke fill;text-shadow:var(--ink-drop)}
.ink-big{font:900 22px/1 var(--ink-face);color:var(--ink-cream);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;
  text-shadow:var(--ink-drop)}
.ink-key{font:900 13px/1 var(--ink-face);color:var(--ink-yellow);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
/* a button is a WORD you press: no backing, no border; it leans and goes yellow under the pointer or the keyboard, and the keyboard's
   focus is the word going yellow -- never a box drawn round it, never an underline under it */
.ink-button{appearance:none;width:auto;margin:0;min-height:44px;padding:6px 4px;background:none;border:0;border-radius:0;box-shadow:none;
  cursor:pointer;white-space:nowrap;font:900 19px/1 var(--ink-face);color:var(--ink-cream);-webkit-text-stroke:5px var(--ink);
  paint-order:stroke fill;text-shadow:var(--ink-drop);transition:transform .12s,color .12s}
.ink-button.primary{color:var(--ink-pink);font-size:23px}
.ink-button:hover:not(:disabled){background:none;color:var(--ink-yellow);transform:rotate(-2deg) scale(1.07)}
.ink-button:focus-visible{outline:none;color:var(--ink-yellow)}
.ink-button:active:not(:disabled){transform:translateY(2px)}
.ink-button:disabled{opacity:.45;cursor:default;transform:none;background:none}
/* a text field is the typed word itself, big, on one THIN faint line -- no box round it, and never a thick bar under it (owner, 2026-10-09:
   "make a rule to never use an underline like that again", the creator's 4 px yellow bars under Stand and Neutral) */
.ink-field{display:flex;flex-direction:column;align-items:center;gap:2px}
.ink-field>span{font:900 11px/1.3 var(--ink-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-yellow);
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.ink-field input{width:min(360px,100%);box-sizing:border-box;margin:0;padding:2px 4px 4px;background:none;border:0;
  border-bottom:1px solid #fff8dc59;border-radius:0;box-shadow:none;outline:none;text-align:center;
  font:900 30px/1.15 var(--ink-face);color:var(--ink-cream);caret-color:var(--ink-yellow);-webkit-text-stroke:6px var(--ink);
  paint-order:stroke fill;text-shadow:var(--ink-drop)}
/* focus is the thin line lighting yellow, never the page's focus ring drawn round the field as a box */
.ink-field input:focus,.ink-field input:focus-visible{outline:none;border-bottom-color:var(--ink-yellow)}
/* the offered name is selected so typing replaces it: the selected letters go yellow, no block behind them */
.ink-field input::selection{background:transparent;color:var(--ink-yellow)}
/* a card that pops up over play (a dialog): the words stand on the picture, the picture dimmed flat behind them */
dialog.ink-card{background:none;border:0;border-radius:0;box-shadow:none;padding:0;color:var(--ink-cream);overflow:visible}
dialog.ink-card::backdrop{background:#0b0d1299}
/* while a card is up (the game is paused under it) the HUD's own words stand down, so nothing reads through the dim behind the card's
   lettering -- the picture and the card, as the talk view and the intro have it */
body:has(dialog.ink-card[open])>*:not(#game):not(dialog):not(script){visibility:hidden}
@media(max-height:500px){
  .ink-title{font-size:19px;-webkit-text-stroke:5px var(--ink)}
  .ink-text{font-size:13px;-webkit-text-stroke:3px var(--ink)}
  .ink-button{min-height:40px;font-size:16px;-webkit-text-stroke:4px var(--ink)}
  .ink-button.primary{font-size:19px}
  .ink-field input{font-size:22px;-webkit-text-stroke:5px var(--ink)}
  .ink-num{font-size:28px;-webkit-text-stroke:5px var(--ink)}
  .ink-big{font-size:18px;-webkit-text-stroke:4px var(--ink)}
}