/* ==========================================================================
   Screens, panels, buttons, ribbons, chips                    owner: P0-1
   ========================================================================== */
/* ---------- screens ---------- */
.screen{
  position:fixed;inset:0;display:grid;overflow-y:auto;overscroll-behavior:contain;
  padding-block:calc(env(safe-area-inset-top,0px) + 24px) calc(env(safe-area-inset-bottom,0px) + 24px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
}
.screen-inner{margin:auto;width:100%}

/* ---------- a sticker panel: paper, thick ink outline, hard offset shadow, white top lip ---------- */
.panel{
  background:var(--g-paper);color:var(--ink);
  border:var(--line) solid var(--ink);border-radius:var(--r-panel);
  box-shadow:var(--lip),var(--drop);
}

/* ---------- scrolling (owner, 2026-10-25: "i dsont like right top/bottom radius being clipped or different here also
   dont like the scroll barr design") ----------
   One scrollbar everywhere: a thin rounded ink thumb on a clear track, no arrow buttons. Chrome, Edge and Safari draw it
   from ::-webkit-scrollbar; Firefox from scrollbar-width and -color (Chrome would add arrow buttons for those). Touch
   screens keep their own: it takes no room and shows only while scrolling. A rounded panel scrolls an element inside
   it, never its own box, so its four corners stay alike; that scroller's content fades out under its top and bottom
   edges, over its own padding (--fade), so nothing is faded at rest. */
@media (hover:hover) and (pointer:fine){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
  ::-webkit-scrollbar-track{margin:4px}
  ::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:99px;background:var(--ink-3) padding-box}
  ::-webkit-scrollbar-thumb:hover{background-color:var(--ink-2)}
  ::-webkit-scrollbar-button{display:none}
}
@supports not selector(::-webkit-scrollbar){ *{scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent} }
:where(.pv-scroll,.cs-scroll,.bl-scroll,.tp-in){
  --fade:10px;
  -webkit-mask:linear-gradient(transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent),linear-gradient(#000 0 0) 100% 0/14px 100% no-repeat;
  mask:linear-gradient(transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent),linear-gradient(#000 0 0) 100% 0/14px 100% no-repeat;
}

/* ---------- buttons: pills filled with a palette gradient, Lilita in white with an ink stroke ---------- */
.btn{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:999px;
  border:var(--line) solid var(--ink);
  font:400 var(--t-btn)/1 var(--f-display);letter-spacing:.02em;
  color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;
  background:var(--g-gold);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(120,60,10,.22),var(--drop);
  /* the lift and its drop move on one curve, so the button's floor never moves; the release springs back (--pop) */
  transition:transform .2s var(--pop),box-shadow .2s var(--pop),filter .14s ease;
  touch-action:manipulation;
}
/* hover lifts only under a real pointer: a tap on a phone would leave the button stuck up */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(120,60,10,.22),0 8px 0 var(--ink);filter:brightness(1.05)}
}
/* the press sinks fast (60 ms) and lands on the same floor: travel + pressed drop = the resting drop */
.btn:active{transform:translateY(var(--press-y,4px));box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(120,60,10,.22),0 2px 0 var(--ink);transition-duration:.06s;transition-timing-function:var(--out)}
.btn:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.btn.big{min-height:62px;padding:0 34px;font-size:var(--t-btn-l)}
.btn.ghost{
  background:var(--g-paper);color:var(--ink);-webkit-text-stroke:0;
  box-shadow:inset 0 3px 0 #fff,inset 0 -4px 0 rgba(120,80,40,.14),var(--drop);font-size:var(--t-btn);
}
@media (hover:hover) and (pointer:fine){
  .btn.ghost:hover{box-shadow:inset 0 3px 0 #fff,inset 0 -4px 0 rgba(120,80,40,.14),0 8px 0 var(--ink)}
}
/* the same three shadows as at rest, so the press animates instead of snapping */
.btn.ghost:active{box-shadow:inset 0 3px 0 #fff,inset 0 -2px 0 rgba(120,80,40,.14),0 2px 0 var(--ink)}
.btn.danger{background:var(--g-terracotta);color:#fff;-webkit-text-stroke:5px var(--ink)}
.btn:disabled{cursor:progress;filter:saturate(.55) brightness(.96);transform:none}
@media (hover:hover) and (pointer:fine){
  .btn:disabled:hover{box-shadow:inset 0 3px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(120,60,10,.22),var(--drop)}
}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- ribbons: a short banner with notched tails, for eyebrows and Latin headers ---------- */
.ribbon{
  --rb:var(--g-terracotta);
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;justify-self:start;align-self:start;width:max-content;max-width:calc(100% - 20px);
  padding:6px 16px 7px;margin-inline:12px;border:var(--line-s) solid var(--ink);border-radius:8px;
  background:var(--rb);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),var(--drop-s);
  font:400 var(--t-name-s)/1 var(--f-display);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:#fff;-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill;white-space:nowrap;
}
.ribbon::before,.ribbon::after{
  content:"";position:absolute;top:7px;bottom:-6px;width:18px;z-index:-1;
  background:var(--rb);border:var(--line-s) solid var(--ink);filter:brightness(.75);
}
.ribbon::before{left:-14px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,42% 50%)}
.ribbon::after{right:-14px;clip-path:polygon(0 0,100% 0,58% 50%,100% 100%,0 100%)}
.ribbon.gold{--rb:var(--g-gold)}
.ribbon.blue{--rb:var(--g-blue)}
.ribbon.dark{--rb:linear-gradient(180deg,#8a6a86,#5a3f52 55%,#3d2a3f)}
.ribbon.imperial{--rb:var(--g-imperial)}

/* ---------- small type, chips and key caps ---------- */
.eyebrow{font:var(--w-strong) var(--t-caption)/1.2 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 6px;border-radius:999px;
  border:var(--line-s) solid var(--ink);background:var(--paper);box-shadow:var(--drop-s);
  font:var(--w-strong) var(--t-body)/1.2 var(--f-ui);color:var(--ink);white-space:nowrap;
}
.chip .ic{width:22px;height:22px}
kbd{
  display:inline-block;min-width:1.6em;padding:1px 6px 2px;border-radius:7px;text-align:center;
  border:2.5px solid var(--ink);background:var(--paper);box-shadow:0 3px 0 var(--ink);
  font:400 var(--t-tag)/1.2 var(--f-display);color:var(--ink);letter-spacing:.02em;
}
/* display text straight over the scene: white with a thick ink stroke and a hard drop */
.outlined{color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}

@media (max-width:600px){
  .btn{min-height:48px;padding:0 20px;font-size:var(--t-name);-webkit-text-stroke:4px var(--ink)}
  .btn.big{min-height:54px;font-size:var(--t-h);padding:0 26px}
  .btn.ghost{font-size:var(--t-name)}
  .ribbon{font-size:var(--t-tag);padding:5px 13px 6px;-webkit-text-stroke:2.5px var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}

/* ---- P0-1 additions (.frame, .medallion, .ribbon, .slot, .tip, .bar-framed, .ghost) go below ---- */

/* ---- UI audit (docs/ui-audit.md): readable small type, and the outline, press, motion and layer tokens ----
   kit.css loads after base.css, so these win over base.css's :root. */
:root{
  --ink-3:#765968;     /* labels and captions: was #8b6f7c (4.2:1 on paper); now 5.7:1 on paper, 4.6:1 on paper-2 */
  --gold-ink:#98500a;  /* gold words and numbers on paper: 5.6:1 (paper), 4.5:1 (paper-2). --gold-lo stays for fills */
  --line-xs:2.5px;     /* pills, price tags, key caps (--line 4 px: panels, buttons; --line-s 3 px: tiles, chips) */
  --press-y:4px;       /* how far a pressed button sinks: the resting drop less the 2 px pressed drop */
  --dur-press:60ms; --dur-hover:140ms; --dur-release:200ms; --dur-pop:280ms; --dur-enter:240ms; --dur-exit:160ms;
  --z-nav:3; --z-hud-over:5; --z-panel:30; --z-tip:60; --z-modal:70;
}
@media (max-width:600px){ :root{ --press-y:2px; } }

/* ---- The weight pass (2026-10-21, owner: "make it all feel clean and intentional"): one scale for type, outlines,
   radii and spacing. The rules:
   - one thing is clearly biggest per object: a screen's title, a card's name, a node's icon;
   - type: Lilita for titles and names only (--t-*), Nunito 600 for body, 800 for emphasis and for small-caps labels
     (--t-label, uppercase, tracked). No 900 body text, no 700/800/900 mixed in one block;
   - outlines: --line (4) and --line-s (3) for what you press (buttons, tiles, tabs, nodes); --line-xs (2.5) for
     panels that only hold things; --line-2 (2) for tags and badges; a plain hairline (--hair) for rows and rules;
   - drops: --drop / --drop-s under what you press; --drop-xs (3 px) under quiet panels; none under tags;
   - colour: gold means a price or something to spend; a branch's colour means learned; blue means selected. */
:root{
  --t-title:44px; --t-h:24px; --t-name:18px; --t-name-s:15px;
  --t-body:14px; --t-caption:12.5px; --t-label:11px;
  --w-body:600; --w-strong:800;
  --line-2:2px; --hair:rgba(90,63,82,.16);
  --drop-xs:0 3px 0 var(--ink);
  --r-pill:999px; --r-tile-lg:16px; --r-tile:12px; --r-cap:8px; --r-card:20px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
}
/* a small-caps label: the one style for a caption over a group */
.lab{font:var(--w-strong) var(--t-label)/1.2 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
@media (max-width:600px){ :root{ --t-title:36px; --t-h:21px; } }

/* ---- Typography and states (2026-10-21; docs/ui-audit.md, "Typography and states"; owner: "make sure it's all neat",
   "states need to be optically clean", "keep text and hierarchies clean"): one scale, one label, one ring.
   Every font size in the stylesheets is one of these. The exceptions: the hero type over the arena (the logo, a fighter's
   name, the banners), which is fluid; the numbers that float over the fighters; the draft card's three sizes (--nm, --hs,
   --ks), which scale with the card's width.
   - Nunito: --t-micro 10.5 (the floor), --t-label 11, --t-caption 12.5, --t-body 14, --t-lead 16. Weights 600 (--w-body)
     and 800 (--w-strong) only.
   - Lilita: --t-tag 12.5, --t-name-s 15, --t-name 18, --t-btn 21, --t-h 24, --t-btn-l 28, --t-display 34, --t-title 44.
   - a small-caps label: Nunito 800, --t-label (or --t-micro where it must be smaller), uppercase, --ls-caps, --ink-3;
   - white words with an ink outline only from --t-name-s (15 px) up; a smaller count or price on gold or paper is ink;
   - numbers that change are tabular;
   - states: what you press lifts 2 px under a pointer and sinks onto its drop when pressed; what is chosen wears the
     pick ring (--ring-pick: a paper gap and a gold ring) and stays where it was; keyboard focus is one blue ring
     (--focus-ring at --focus-off); disabled is flat paper with muted words and no drop, never see-through. */
:root{
  --t-micro:10.5px; --t-tag:12.5px; --t-lead:16px; --t-btn:21px; --t-btn-l:28px; --t-display:34px;
  --ls-caps:.07em;
  --ring-pick:0 0 0 3px var(--paper),0 0 0 6px var(--gold-lo);
  --focus-ring:4px solid var(--player); --focus-off:3px;
}
@media (max-width:600px){ :root{ --t-display:28px; } }
body{font-synthesis:none}
/* lines of words end on two words or more (no orphan word); a chip that wraps, wraps evenly */
:is(.howto-card p,.modal-body,.set-label small,.death-note,.menu-sub,.cs-line,.cs-tx,.rbw-desc,.tp-line,.ru-line,.ar-teaser small,.ag-omens li,.coach-txt){text-wrap:pretty}
.ru-rw span{text-wrap:balance}