/* RackUI styles (rackui.js). Load after fightui.css: the gear cards use its card face (.fu-card, .fu-cn, .fu-nm) and
   its drag ghost and "why not" note. Every rule sits under the .ru root; sizes come from rackui.js layout().
   Ported from demo/variants/mockups/rack/rack.css. */
.ru { z-index: 32; pointer-events: none; }
/* the root lets taps through to the game; open layers take them (the kit sets this only on wide screens) */
.ru .hk-sheet.is-open, .ru .hk-scrim.is-open { pointer-events: auto; }
.ru .ru-scrim { z-index: 40; }
.ru .ru-scrim2 { z-index: 44; }
.ru .ru-detail { z-index: 45; }
.ru .ru-detail .hk-sheet__actions { flex-wrap: wrap; }
.ru .ru-detail { max-height: 70vh; max-height: 70dvh; }

/* gear cards: one size for slots and rack; corner plates scale with the card and sit tight */
.ru .fu-card.ru-gear { --w: var(--ru-gw); --h: var(--ru-gh); --c: clamp(22px, calc(var(--w) * .28), 32px); }
.ru .fu-card.ru-gear .fu-cn { padding: 0 3px 0 0; gap: 0; }
.ru .fu-card.ru-gear .fu-cn-bl { left: -2px; }
.ru .fu-cn b .ru-pl { font-size: .62em; vertical-align: .25em; margin-right: -1px; }
.ru .fu-card.ru-gear .fu-nm { font-size: clamp(11px, calc(var(--w) * .14), 15px); white-space: normal; text-overflow: clip; line-height: 1.05;  hyphens: manual; overflow-wrap: break-word; letter-spacing: 0; padding-left: 2px; padding-right: 2px; }
.ru .fu-card.ru-gear.is-worn { border-image-source: url("assets/ui/frames/frame-amber.webp?v=0d3aaa1fa1a5"); }
.ru .fu-card.ru-gear.is-empty { background: rgba(12, 13, 15, .55); border-image-source: url("assets/ui/frames/frame-soot.webp?v=b80f68770006"); box-shadow: none; }
.ru .fu-card.ru-gear.is-empty .fu-nm { background: none; padding-bottom: 8px; color: var(--hk-bone-faint); top: 0; display: grid; place-items: center; }
/* the piece last tapped stays marked while its tap view is open and after it closes */
.ru .fu-card.ru-gear.is-sel { box-shadow: 0 0 0 2px var(--hk-amber-hi), 0 0 16px rgba(214, 156, 92, .55), 0 6px 16px rgba(0, 0, 0, .55); }
.ru .fu-card.ru-gear.is-lifted { opacity: .3; }
/* while dragging: where the piece can go (its slot, or the rack for a worn piece) */
.ru .fu-card.ru-gear.is-fit { outline: 2px dashed rgba(214, 156, 92, .85); outline-offset: 2px; }
.ru .ru-store.is-fit { outline: 2px dashed rgba(214, 156, 92, .6); outline-offset: 2px; border-radius: 8px; }
.ru .ru-store.is-drop-ok { outline: 2px solid var(--hk-amber-hi); background: rgba(214, 156, 92, .12); }
.ru .ru-store.is-drop-no { outline: 2px solid #8d1f14; }

/* ---------- the Rack sheet: fills the screen; nothing in it scrolls ---------- */
.ru .ru-sheet { z-index: 41; inset: var(--ru-in); width: auto; height: auto; max-width: none; max-height: none; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  overflow: hidden; touch-action: none; padding: var(--ru-pad); box-sizing: border-box; display: flex; flex-direction: column; }
.ru[data-fu-mode="desk"] .ru-sheet { inset: auto; left: 50%; top: 50%; width: var(--ru-w); height: var(--ru-h); transform: translate(-50%, -50%); }
.ru .ru-head { flex: none; height: var(--ru-hh); display: flex; align-items: center; gap: 10px; box-sizing: border-box; }
.ru .ru-head .ru-art { height: calc(var(--ru-hh) - 6px); aspect-ratio: 1; object-fit: cover; border: 3px solid transparent; border-image: url("assets/ui/frames/frame-ash.webp?v=e763be59fc5a") 16 / 3px / 0 round; }
.ru .ru-head .hk-sheet__kind { margin: 0; }
/* phone held upright: the Rack covers the screen, so its head keeps the fullscreen control's place */
.ru .ru-fs { flex: none; width: 44px; height: 44px; margin-left: auto; }
.ru[data-fu-mode="port"] .ru-head .hk-sheet__kind { display: none; }
/* belt slots carry no label: keep the label row so both views lay out alike */
.ru .ru-belt .ru-sl { visibility: hidden; }
.ru[data-fu-mode="land"] .ru-head .hk-sheet__title { font-size: 18px; }
.ru .ru-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
/* the close X's bottom row (game.css .hk-foot), at the foot of a sheet that does not scroll */
.ru .ru-sheet > .hk-foot { flex: none; position: static; margin: 8px 0 var(--ru-fy) var(--ru-fx); padding: 0; background: none; box-shadow: none; }
.ru[data-fu-mode="land"] .ru-body { flex-direction: row; gap: 20px; }
.ru .ru-store { flex: 1 1 auto; min-width: 0; }
.ru .ru-h3 { display: flex; align-items: center; gap: 6px; height: var(--ru-shw); margin: 0; box-sizing: border-box; font: 600 14px var(--hk-title); letter-spacing: .05em; color: var(--hk-bone-dim); }
.ru .ru-store .ru-h3 { height: var(--ru-shk); }
.ru .ru-n { font: 700 15px var(--hk-text); color: var(--hk-bone); }
.ru .ru-pager { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.ru .ru-pager .hk-iconbtn { width: 44px; height: 44px; }
.ru .ru-pager .hk-iconbtn[disabled] { opacity: .3; cursor: default; }
.ru .ru-next .hk-icon { transform: scaleX(-1); }
.ru .ru-pg { min-width: 40px; text-align: center; font: 700 15px var(--hk-text); color: var(--hk-bone); }
.ru .ru-slots { display: grid; grid-template-columns: repeat(var(--ru-wc), var(--ru-gw)); gap: var(--ru-gap); justify-content: start; }
.ru .ru-slot { display: grid; grid-template-rows: 14px var(--ru-gh); gap: 3px; justify-items: center; }
.ru .ru-sl { font: 600 12px/14px var(--hk-title); letter-spacing: .04em; color: var(--hk-bone-faint); white-space: nowrap; }
.ru .ru-stored { display: grid; grid-template-columns: repeat(var(--ru-kc), var(--ru-gw)); grid-auto-rows: var(--ru-gh); gap: var(--ru-gap); align-content: start;
  height: calc(var(--ru-kr) * var(--ru-gh) + (var(--ru-kr) - 1) * var(--ru-gap)); }
.ru .ru-empty { color: var(--hk-bone-faint); margin: 0; font: 500 15px var(--hk-text); }
/* a pack item on the Pack shelf: the board pack's own tile (screens/board.js packTiles), the size of the cards beside it */
.ru .ru-stored > .slot { width: var(--ru-gw); height: var(--ru-gh); flex: none; }
.ru .ru-stored > .slot b { right: 4px; bottom: 4px; padding: 2px 6px; border-radius: 4px; font-size: 18px; background: rgba(8, 9, 10, .72); }

/* ---------- the character's Gear and Skills screens (ported from demo/variants/mockups/character-sheet/cs.css): the head
   holds who and the screen's name; Gear is the figure with its slots (and the Rack's shelf at the Hearth), Skills the
   weapon's two moves, the slots and Known. Every card on a screen has the one size layout() gives it. ---------- */
.cs .ru-head.cs-head { gap: 6px; align-items: center; }
.cs .cs-who { appearance: none; border: 0; background: none; padding: 0 4px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: inherit; font: inherit; }
.cs .cs-who .cs-pl { font: 600 15px/1 var(--hk-title); letter-spacing: .05em; color: var(--hk-bone); white-space: nowrap; }
.cs .cs-who .cs-lv { display: inline-flex; align-items: center; gap: 2px; font: 700 16px/1 var(--hk-text); color: var(--hk-amber-hi); }
.cs .cs-who .cs-lv .hk-icon { width: 18px; height: 18px; }
.cs .cs-title { flex: 1 1 auto; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 17px/1 var(--hk-title); letter-spacing: .05em; color: var(--hk-bone); white-space: nowrap; }
.cs .cs-title .hk-icon { width: 22px; height: 22px; color: var(--hk-amber-hi); }
.cs[data-fu-mode="land"] .cs-who .cs-pl { display: none; }
.cs[data-fu-mode="desk"] .cs-who .cs-pl { font-size: 18px; }
.cs[data-fu-mode="desk"] .cs-title { font-size: 20px; }

/* the body under the head: two panes side by side on wide screens, stacked on a phone held upright */
.cs .ru-body { flex-direction: row; gap: 20px; align-items: flex-start; }
.cs[data-fu-mode="port"] .ru-body { flex-direction: column; gap: 10px; align-items: stretch; }
.cs[data-cs-place="road"] .ru-body.cs-gear { justify-content: center; }
.cs[data-fu-mode="port"] .ru-body.cs-gear { align-items: center; }
.cs .ru-slot { display: block; width: var(--ru-gw); height: var(--ru-gh); }
.cs .ru-h3 .cs-shpic { width: 24px; height: 24px; border-radius: 3px; object-fit: cover; flex: none; }
.cs .ru-h3 > .hk-icon { width: 18px; height: 18px; flex: none; color: var(--hk-bone-faint); }
/* the Gear shelves, the Rack above the Pack (the Pack alone on the road): stacked beside the figure, or under it on a
   phone held upright; each takes a dragged piece anywhere on it */
.cs .cs-shelves { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.cs .cs-shh { gap: 4px; overflow: hidden; }
.cs .cs-shl { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; white-space: nowrap; color: var(--hk-bone); }
.cs .cs-shl .hk-icon { width: 18px; height: 18px; flex: none; color: var(--hk-bone-faint); }
.cs .cs-shl .ru-n { font-size: 13px; }
.cs .cs-shh.is-tight .cs-shpic, .cs .cs-shh.is-tight .cs-shl > .hk-icon { display: none; }
.cs .cs-shh.is-tighter .ru-pg { display: none; }
.cs .cs-shh.is-tighter { gap: 2px; }
/* a shelf (the Rack, Known): a framed box the size of its grid */
.cs .ru-store { align-self: stretch; padding: 0 8px 8px; box-sizing: border-box; background: rgba(10, 11, 12, .5); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(236, 228, 212, .08); }
.cs[data-fu-mode="port"] .ru-store { width: 100%; }

/* Gear: the figure in the middle column, the slots in the columns either side (rackui.js places each one) */
.cs .cs-doll { flex: none; display: grid; gap: var(--ru-gap); grid-template-columns: repeat(var(--cs-sc), var(--ru-gw)) var(--cs-fw) repeat(var(--cs-sc), var(--ru-gw)); grid-auto-rows: var(--ru-gh); }
.cs .cs-doll .ru-slot { position: relative; z-index: 1; }
.cs .cs-figure { appearance: none; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; position: relative; z-index: 0; overflow: visible; min-width: 0; }
.cs .cs-figure .cs-fig { position: absolute; top: 0; height: 100%; width: auto; left: 50%; transform: translateX(-50%); pointer-events: none;
  -webkit-mask: radial-gradient(ellipse 58% 54% at 50% 48%, #000 62%, transparent 100%); mask: radial-gradient(ellipse 58% 54% at 50% 48%, #000 62%, transparent 100%); }
/* an empty slot: a faint outline of what goes there, its name under it */
.cs .fu-card.ru-gear.is-empty .cs-sg { position: absolute; inset: 0 0 26% 0; display: grid; place-items: center; color: var(--hk-bone-faint); }
.cs .fu-card.ru-gear.is-empty .cs-sg .hk-icon { width: 40%; height: 40%; opacity: .55; }
.cs .fu-card.ru-gear.is-empty .fu-nm { top: auto; display: block; font-weight: 500; padding-bottom: 6px; }
.cs .fu-card.ru-gear.is-locked .cs-sg { opacity: .7; }
.cs .fu-card.ru-gear .fu-cn.is-lvl { background-color: #3a2a18; }
.cs .fu-card.ru-gear .fu-cn.is-lvl .hk-icon { color: var(--hk-amber-hi); }
.cs .cs-gear .ru-store { flex: 1 1 auto; }

/* Active: the hand's cards (the weapon's two moves and Block) and the slots on one side, Known on the other */
.cs .cs-pane { flex: none; display: flex; flex-direction: column; gap: 10px; }
.cs .cs-row { display: flex; gap: var(--ru-gap); flex-wrap: nowrap; }
/* the hand's row on a phone held upright: the spare weapon's cards wrap onto a line of their own */
.cs .cs-br { display: none; }
.cs[data-fu-mode="port"] .cs-wrow .cs-row { flex-wrap: wrap; }
.cs[data-fu-mode="port"] .cs-wrow .cs-br { display: block; flex-basis: 100%; height: 0; margin-top: calc(-1 * var(--ru-gap)); }   /* its own line takes no second gap */
.cs .cs-active .ru-store { flex: 1 1 auto; }
/* a short screen: the slots on the left; the hand's cards above Known on the right */
.cs[data-fu-mode="land"] .ru-body.cs-active { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 20px; row-gap: 10px; align-items: start; }
.cs[data-fu-mode="land"] .cs-active .cs-pane { display: contents; }
.cs[data-fu-mode="land"] .cs-active .cs-slots { grid-column: 1; grid-row: 1 / 3; }
.cs[data-fu-mode="land"] .cs-active .cs-wrow { grid-column: 2; grid-row: 1; }
.cs[data-fu-mode="land"] .cs-active .cs-known { grid-column: 2; grid-row: 2; align-self: stretch; }
.cs .fu-card.ru-gear.ru-mv .fu-pic { object-position: 50% 30%; }
.cs .fu-card.ru-gear.ru-mv.is-empty { cursor: default; opacity: .75; }
/* an open slot: an iron socket with a plus, a drop target; a locked one is the level it opens at */
.cs .fu-card.ru-mv.cs-free:not(.is-locked) { cursor: pointer; opacity: 1; border-style: dashed; }
.cs .fu-card.ru-mv .cs-plus { font: 700 calc(var(--ru-gw) * .42) / 1 var(--hk-display, serif); color: var(--hk-bone-faint); }
.cs .fu-card.ru-mv.cs-free .cs-sg { inset: 0; }
.cs .fu-card.ru-mv.cs-free .fu-off { left: 50%; top: 50%; }
/* a slotted skill in Known: dimmed, with the check of "in a slot" */
.cs .fu-card.ru-mv.is-in { filter: saturate(.45) brightness(.62); }
.cs .fu-card.ru-mv.is-in::after { content: "\2713"; position: absolute; z-index: 4; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font: 700 calc(var(--ru-gw) * .4) / 1 var(--hk-text); color: var(--hk-bone); text-shadow: 0 1px 3px #000; pointer-events: none; }
/* Swap in: every filled slot lights, waiting for the tap that names the one it replaces */
.cs .fu-card.ru-mv.is-swap { outline: 2px solid var(--hk-amber-hi); outline-offset: 1px; animation: cs-swap 1.1s ease-in-out infinite alternate; }
@keyframes cs-swap { to { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .cs .fu-card.ru-mv.is-swap { animation: none; } }
.cs .fu-cn.is-new { background-color: #3a2a18; }
.cs .fu-cn.is-new .hk-icon { color: var(--hk-amber-hi); }
/* a weapon move card: the move's name over the weapon's name; the second move is the same painting closer in */
.cs .cs-wm .fu-nm { padding-top: 12px; }
.cs .cs-wm .fu-nm b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs .cs-wm .fu-nm small { display: block; font: 500 clamp(10px, calc(var(--w) * .11), 13px) / 1.15 var(--hk-text); color: var(--hk-bone-faint); letter-spacing: 0; overflow: hidden; }
.cs .cs-wm.is-second .fu-pic { object-position: 50% 62%; transform: scale(1.18); }
.cs .cs-wm.is-spare { filter: saturate(.7) brightness(.82); }
/* a weapon's two moves on any sheet that shows the weapon (RackUI.weaponCards): the move cards above, in a row of
   their own that carries the card scope with it; not the fight's or the Rack's full-screen root */
.fu.fu-wmrow { position: static; inset: auto; z-index: auto; pointer-events: auto; display: flex; gap: 10px; margin: 4px 0 12px;
  --ru-gw: clamp(84px, min(27vw, 24vh), 124px); --ru-gh: calc(var(--ru-gw) * 1.4); }
.fu.fu-wmrow div.fu-card { cursor: default; }
.fu.fu-wmrow div.fu-card:active { transform: none; }