/* Beyond the Last Hearth: painted interface kit (hearth-oil).
   Bible: design/style-bible/interface.md · preview: kit.html · assets: manifest.json

   Every surface is made of the same paint as the cards: slate washed in cold oil, worn umber leather,
   ragged brush-stroke edges. Amber is the only warm colour and means "yours / active / safe", as in the art.
   Icons, plates and frames are bone-white painted glyphs turned into alpha masks; CSS tints them.

   CLASSES (stable; the showcase builds on these names)
   .hk-table            page backdrop: soot + fog texture, vignette. Put on <body> or the game root.
   .hk-frame            painted border around anything (9-slice). Modifiers: --amber (selected/yours), --bone (light)
   .hk-panel            slate panel with painted border; .hk-panel--quiet without border
   .hk-btn              painted leather plate button: ALWAYS an .hk-icon inside, label optional and short.
                        --primary (amber, the one main action), --danger, --quiet. [disabled] or .is-disabled
   .hk-iconbtn          round painted button, icon only, 44 px touch target; needs aria-label. --primary, --sm (36 px)
   .hk-icon             icon mask tinted by currentColor. Name: .hk-i-<name> (see manifest icons). --lg, --sm
   .hk-chip             stat chip: icon + number (+ optional /max). --hp, --st, --mp, --xp, --warn
   .hk-bar              painted stroke bar; set style="--v: 0.6". --hp, --st, --mp. .hk-bar--thin
   .hk-card             card face: .hk-card__art (img), .hk-card__name, .hk-card__badge (number), .hk-card__mark (icon)
                        --enemy, --boss, --item, --spell, --place; states .is-selected, .is-target, .is-spent
   .hk-sheet            detail view (tap a card): bottom sheet on phone, centred on desktop. Open: .is-open on
                        .hk-sheet and on its .hk-scrim. Parts: __close, __art, __title, __kind, __chips, __body, __actions
   .hk-scrim            dark layer behind a sheet; tap closes
   .hk-toast            short message with icon, top centre; add .is-in to show
   .hk-dock             bottom action bar inside thumb reach, safe-area aware; holds .hk-btn / .hk-iconbtn
   .hk-divider          painted horizontal stroke
   .hk-sr               visually hidden text for screen readers
*/
/* Fonts are self-hosted (works offline on the LAN): Cinzel and Alegreya, SIL Open Font License 1.1,
   licences in fonts/OFL-*.txt. Latin subset (covers German umlauts and ß); both are variable fonts. */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/cinzel-latin.woff2?v=37543dc7dab5") format("woff2"); }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/alegreya-latin.woff2?v=34d902fd33b2") format("woff2"); }

:root {
  /* palette sampled from the hearth-oil set (see art.md) */
  --hk-night: #0c0d0f; --hk-soot: #1a1c1e; --hk-stone: #2d2f30; --hk-slate: #455056; --hk-ash: #7a8080;
  --hk-fog: #8fa0a7; --hk-fog-pale: #b7cad1;
  --hk-bone: #ece4d4; --hk-bone-dim: #b8b0a2; --hk-bone-faint: #8a857c;
  --hk-amber: #d69c5c; --hk-amber-hi: #f3c582; --hk-ember: #be865b;
  --hk-blood: #a8402f; --hk-stamina: #d2c49f; --hk-mana: #8fb8cf;
  --hk-title: "Cinzel", "Trajan Pro", Palatino, Georgia, serif;
  --hk-text: "Alegreya", "Iowan Old Style", Palatino, Georgia, serif;
  --hk-frame-slice: 16;      /* px of the 240 px frame image that are border (manifest frames[].slice) */
  --hk-frame-w: 6px;         /* drawn border width; cards use --hk-card-frame */
  --hk-card-frame: 4px;
  --hk-tap: 44px;            /* minimum touch target */
}

/* ---------- backdrop ---------- */
.hk-table {
  color: var(--hk-bone); font-family: var(--hk-text); font-size: 16px; line-height: 1.35;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(143, 160, 167, .10), transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .65) 100%),
    var(--hk-night);   /* no texture tile here: a page backdrop is one painting (showcase assets/bg), a tile repeats visibly */
}

/* ---------- frames and panels ---------- */
.hk-frame, .hk-panel, .hk-card, .hk-sheet, .hk-toast {
  border: var(--hk-frame-w) solid transparent;
  border-image: url("frames/frame-ash.webp?v=e763be59fc5a") var(--hk-frame-slice) / var(--hk-frame-w) / 0 round;
}
.hk-frame--amber, .hk-card.is-selected { border-image-source: url("frames/frame-amber.webp?v=0d3aaa1fa1a5"); }
.hk-frame--bone { border-image-source: url("frames/frame-bone.webp?v=e97db8e9bfad"); }

.hk-panel {
  padding: 10px 12px;
  background:
    linear-gradient(rgba(20, 22, 24, .55), rgba(12, 13, 15, .78)),
    url("textures/slate.webp?v=77eaf512bb2d") 0 0 / 256px,
    var(--hk-stone);
  background-clip: padding-box;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .55);
}
.hk-panel--quiet { border: 0; border-image: none; padding: 8px; }

.hk-divider {
  height: 7px; border: 0; margin: 8px 0; background: var(--hk-ash); opacity: .7;
  -webkit-mask: url("masks/stroke.webp?v=503300f9929a") center / 100% 100% no-repeat; mask: url("masks/stroke.webp?v=503300f9929a") center / 100% 100% no-repeat;
}

/* ---------- icons ---------- */
.hk-icon {
  display: inline-block; flex: none; width: 1.35em; height: 1.35em; vertical-align: -0.3em;
  background-color: currentColor;
  -webkit-mask: var(--hk-icon) center / contain no-repeat; mask: var(--hk-icon) center / contain no-repeat;
}
.hk-icon--sm { width: 1em; height: 1em; vertical-align: -0.15em; }
.hk-icon--lg { width: 1.9em; height: 1.9em; }
.hk-i-health { --hk-icon: url("icons/health.webp?v=d5c83211c53c"); } .hk-i-stamina { --hk-icon: url("icons/stamina.webp?v=6241ea3365ae"); }
.hk-i-mana { --hk-icon: url("icons/mana.webp?v=17b6adff8f19"); } .hk-i-attack { --hk-icon: url("icons/attack.webp?v=7e508cd3352f"); }
.hk-i-block { --hk-icon: url("icons/block.webp?v=4d5925e909bc"); } .hk-i-ward { --hk-icon: url("icons/ward.webp?v=e12f3df7bcc4"); }
.hk-i-door { --hk-icon: url("icons/door.webp?v=e64854ae2ebf"); } .hk-i-inventory { --hk-icon: url("icons/inventory.webp?v=2144f644180d"); }
.hk-i-craft { --hk-icon: url("icons/craft.webp?v=6f78c4ab491d"); } .hk-i-settings { --hk-icon: url("icons/settings.webp?v=85f47cbf9f1d"); }
.hk-i-sound { --hk-icon: url("icons/sound.webp?v=2d8dbef06142"); } .hk-i-close { --hk-icon: url("icons/close.webp?v=8e3ec31a0acc"); }
.hk-i-info { --hk-icon: url("icons/info.webp?v=1d42ed265688"); } .hk-i-map { --hk-icon: url("icons/map.webp?v=6240a2da8982"); }
.hk-i-rest { --hk-icon: url("icons/rest.webp?v=7867e2b8a75b"); } .hk-i-torch { --hk-icon: url("icons/torch.webp?v=569c8f090805"); }
.hk-i-level { --hk-icon: url("icons/level.webp?v=d360fcf4d828"); } .hk-i-time { --hk-icon: url("icons/time.webp?v=df38336fbcd7"); }
.hk-i-night { --hk-icon: url("icons/night.webp?v=5c69efb4fb78"); } .hk-i-back { --hk-icon: url("icons/back.webp?v=0f5cab86fd63"); }
.hk-i-take { --hk-icon: url("icons/take.webp?v=ecdedf7b5704"); } .hk-i-drop { --hk-icon: url("icons/drop.webp?v=f595b1c78c80"); }
.hk-i-flee { --hk-icon: url("icons/flee.webp?v=153fbbd2fb03"); } .hk-i-heal { --hk-icon: url("icons/heal.webp?v=ad2a999fab91"); }
.hk-i-death { --hk-icon: url("icons/death.webp?v=1226210c7721"); } .hk-i-blunt { --hk-icon: url("icons/blunt.webp?v=f496d6a805cd"); }
.hk-i-deck { --hk-icon: url("icons/deck.webp?v=b8f34d23ae9b"); } .hk-i-fire { --hk-icon: url("icons/fire.webp?v=e1dbe681e718"); }
.hk-i-xp { --hk-icon: url("icons/xp.webp?v=214cc5e6155f"); } .hk-i-menu { --hk-icon: url("icons/menu.webp?v=2ec615652683"); }

/* ---------- buttons ---------- */
.hk-btn, .hk-iconbtn {
  appearance: none; border: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  color: var(--hk-bone); font: 600 13px/1 var(--hk-title); letter-spacing: .06em; text-transform: uppercase;
  background:
    linear-gradient(rgba(255, 236, 200, .08), rgba(0, 0, 0, .28)),
    url("textures/umber.webp?v=d5e58909ddf9") center / 200px,
    #3a2c22;
  transition: filter .12s, transform .08s;
}
.hk-btn {
  min-height: var(--hk-tap); min-width: var(--hk-tap); padding: 0 18px;
  -webkit-mask: url("masks/plate.webp?v=70bbb975dac7") center / 100% 100% no-repeat; mask: url("masks/plate.webp?v=70bbb975dac7") center / 100% 100% no-repeat;
}
.hk-btn .hk-icon { width: 20px; height: 20px; }
.hk-btn--primary, .hk-iconbtn--primary {
  color: #23170e;
  background: linear-gradient(rgba(255, 230, 180, .25), rgba(120, 60, 10, .25)), url("textures/umber.webp?v=d5e58909ddf9") center / 200px, var(--hk-amber);
  background-blend-mode: normal, soft-light, normal;
}
.hk-btn--danger { background: linear-gradient(rgba(255, 220, 200, .1), rgba(0, 0, 0, .3)), url("textures/umber.webp?v=d5e58909ddf9") center / 200px, #6e2a20; background-blend-mode: normal, soft-light, normal; }
.hk-btn--quiet { background: url("textures/slate.webp?v=77eaf512bb2d") center / 200px, var(--hk-stone); color: var(--hk-bone-dim); }
.hk-btn:hover, .hk-iconbtn:hover { filter: brightness(1.12); }
.hk-btn:active, .hk-iconbtn:active { filter: brightness(.82); transform: translateY(1px) scale(.98); }
.hk-btn:focus-visible, .hk-iconbtn:focus-visible { outline: none; filter: brightness(1.25) drop-shadow(0 0 0 var(--hk-amber)); }
.hk-btn:disabled, .hk-btn.is-disabled, .hk-iconbtn:disabled, .hk-iconbtn.is-disabled {
  cursor: default; filter: grayscale(1) brightness(.6); color: var(--hk-bone-faint);
}
.hk-iconbtn {
  width: var(--hk-tap); height: var(--hk-tap); padding: 0; position: relative;
  -webkit-mask: url("masks/round.webp?v=3dcfd20d5d2b") center / 100% 100% no-repeat; mask: url("masks/round.webp?v=3dcfd20d5d2b") center / 100% 100% no-repeat;
}
.hk-iconbtn .hk-icon { width: 24px; height: 24px; }
.hk-iconbtn--sm { width: 36px; height: 36px; }
.hk-iconbtn--sm .hk-icon { width: 20px; height: 20px; }
.hk-iconbtn--ghost { background: rgba(12, 13, 15, .55); }

/* ---------- stat chips and bars ---------- */
.hk-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px 0 7px;
  font: 700 15px/1 var(--hk-text); color: var(--hk-bone); font-variant-numeric: tabular-nums;
  background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .55)), url("textures/slate.webp?v=77eaf512bb2d") center / 160px, var(--hk-stone);
  -webkit-mask: url("masks/plate.webp?v=70bbb975dac7") center / 100% 100% no-repeat; mask: url("masks/plate.webp?v=70bbb975dac7") center / 100% 100% no-repeat;
}
.hk-chip .hk-icon { width: 18px; height: 18px; color: var(--hk-chip-c, var(--hk-bone-dim)); }
.hk-chip small { font-size: 11px; color: var(--hk-bone-faint); font-weight: 500; }
.hk-chip--hp { --hk-chip-c: var(--hk-blood); } .hk-chip--st { --hk-chip-c: var(--hk-stamina); }
.hk-chip--mp { --hk-chip-c: var(--hk-mana); } .hk-chip--xp { --hk-chip-c: var(--hk-amber); }
.hk-chip--warn { --hk-chip-c: var(--hk-amber-hi); color: var(--hk-amber-hi); }

.hk-bar {
  --v: 1; position: relative; height: 12px; min-width: 60px; background: rgba(8, 9, 10, .85);
  -webkit-mask: url("masks/stroke.webp?v=503300f9929a") center / 100% 100% no-repeat; mask: url("masks/stroke.webp?v=503300f9929a") center / 100% 100% no-repeat;
}
.hk-bar::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(clamp(0, var(--v), 1) * 100%);
  background: linear-gradient(rgba(255, 255, 255, .22), rgba(0, 0, 0, .25)), url("textures/fog.webp?v=94c45a225f80") 0 0 / 120px, var(--hk-bar-c, var(--hk-bone-dim));
  background-blend-mode: normal, multiply, normal; transition: width .35s ease-out;
}
.hk-bar--hp { --hk-bar-c: var(--hk-blood); } .hk-bar--st { --hk-bar-c: var(--hk-stamina); } .hk-bar--mp { --hk-bar-c: var(--hk-mana); }
.hk-bar--thin { height: 7px; }

/* ---------- card face ---------- */
.hk-card {
  --w: 120px; position: relative; flex: none; width: var(--w); aspect-ratio: 5 / 7; overflow: hidden; padding: 0;
  border-width: var(--hk-card-frame); border-image-width: var(--hk-card-frame);
  background: var(--hk-soot); background-clip: padding-box; color: var(--hk-bone); cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
}
.hk-card__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hk-card__name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 6px 6px; text-align: center;
  font: 600 calc(var(--w) * .095) / 1.1 var(--hk-title); letter-spacing: .03em;
  background: linear-gradient(transparent, rgba(10, 11, 12, .82) 45%, rgba(10, 11, 12, .95));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hk-card__badge {
  position: absolute; top: 4px; left: 4px; min-width: calc(var(--w) * .26); height: calc(var(--w) * .26); display: grid; place-items: center;
  font: 700 calc(var(--w) * .15) / 1 var(--hk-text); color: var(--hk-bone);
  background: url("textures/umber.webp?v=d5e58909ddf9") center / 80px, #3a2c22;
  -webkit-mask: url("masks/round.webp?v=3dcfd20d5d2b") center / 100% 100% no-repeat; mask: url("masks/round.webp?v=3dcfd20d5d2b") center / 100% 100% no-repeat;
}
.hk-card__mark { position: absolute; top: 6px; right: 6px; width: calc(var(--w) * .17); height: calc(var(--w) * .17); color: var(--hk-bone-dim); filter: drop-shadow(0 1px 2px #000); }
.hk-card--enemy .hk-card__badge { background-color: #5e2219; background-blend-mode: soft-light; }
.hk-card--boss .hk-card__badge { background-color: #7a2a1d; background-blend-mode: soft-light; color: var(--hk-amber-hi); }
.hk-card--boss { border-image-source: url("frames/frame-bone.webp?v=e97db8e9bfad"); }
.hk-card--spell .hk-card__badge { background-color: #2c4552; background-blend-mode: soft-light; }
.hk-card--item .hk-card__badge { background-color: #4a3a2a; background-blend-mode: soft-light; }
.hk-card.is-target { box-shadow: 0 0 0 2px rgba(214, 156, 92, .55), 0 0 22px rgba(214, 156, 92, .45); }
.hk-card.is-spent { filter: grayscale(.85) brightness(.55); }

/* ---------- detail sheet ---------- */
.hk-scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(5, 6, 7, .62); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.hk-scrim.is-open { opacity: 1; pointer-events: auto; }
.hk-sheet {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 82vh; max-height: 82dvh; overflow: auto;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(20, 22, 24, .4), rgba(12, 13, 15, .85)), url("textures/slate.webp?v=77eaf512bb2d") 0 0 / 256px, var(--hk-stone);
  background-clip: padding-box; box-shadow: 0 -10px 30px rgba(0, 0, 0, .6);
  transform: translateY(105%); visibility: hidden; overscroll-behavior: contain;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s .26s;
}
.hk-sheet.is-open { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.hk-sheet__close { position: absolute; top: 8px; right: 8px; }
.hk-sheet__head { display: flex; gap: 12px; align-items: flex-end; padding-right: 44px; }
.hk-sheet__art { width: 38%; max-width: 180px; aspect-ratio: 1; object-fit: cover; flex: none; border: 6px solid transparent;
  border-image: url("frames/frame-ash.webp?v=e763be59fc5a") var(--hk-frame-slice) / 6px / 0 round; }
.hk-sheet__title { margin: 0; font: 600 20px/1.15 var(--hk-title); color: var(--hk-bone); }
.hk-sheet__kind { margin: 2px 0 6px; font: italic 500 14px/1.2 var(--hk-text); color: var(--hk-bone-faint); }
.hk-sheet__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hk-sheet__body { margin: 12px 0; font-size: 16px; line-height: 1.45; color: var(--hk-bone-dim); }
.hk-sheet__body b { color: var(--hk-bone); }
.hk-sheet__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hk-sheet__actions .hk-btn { flex: 1 1 140px; }
@media (min-width: 760px) {
  .hk-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 460px; max-height: 80vh;
    transform: translate(-50%, -46%) scale(.96); opacity: 0; pointer-events: none; transition: transform .2s, opacity .2s, visibility 0s .2s; }
  .hk-sheet.is-open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; transition: transform .2s, opacity .2s; }
}

/* ---------- toast ---------- */
.hk-toast {
  position: fixed; z-index: 50; left: 50%; top: calc(10px + env(safe-area-inset-top)); max-width: min(92vw, 420px);
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 15px;
  background: linear-gradient(rgba(20, 22, 24, .5), rgba(12, 13, 15, .85)), url("textures/slate.webp?v=77eaf512bb2d") 0 0 / 200px, var(--hk-stone);
  background-clip: padding-box; box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
  transform: translate(-50%, -140%); opacity: 0; transition: transform .25s, opacity .25s; pointer-events: none;
}
.hk-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.hk-toast .hk-icon { color: var(--hk-amber); width: 22px; height: 22px; }

/* ---------- dock ---------- */
.hk-dock {
  position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(8, 9, 10, .85) 30%), url("textures/soot.webp?v=6d57833793de") 0 0 / 300px;
}
.hk-dock .hk-btn--primary { flex: 1 1 auto; max-width: 260px; }

.hk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .hk-sheet, .hk-toast, .hk-scrim, .hk-bar::before, .hk-btn, .hk-iconbtn { transition: none; }
}