/* ════════════════════════════════════════════════════════════════════════════
   HÄSSLON WIDGET – styles
   v0.12: one design system in the look of the first-start screen "Wähle dein Hässlon":
   dark warm wood, copper edges, recessed panels, serif titles, subtle light – a small pixel game,
   not a web form. All colours are tokens on .hs (the dashboard theme may override them).

   Depth:   level 1  .hs (wood)          level 2  .hs-panel (recessed / framed)
            level 3  .hs-card, .hs-btn, inputs (lifted a little)
   Type:    serif (Georgia) = character / titles · sans = controls / information
   Colour:  wood browns · copper · muted gold · beige text · orange accent
            red ONLY for danger/warnings · green ONLY for success / valid placement
   Pixel art is never smoothed: every sprite/item image is image-rendering: pixelated; glows and
   shadows go on the container, never on the sprite itself.
   ════════════════════════════════════════════════════════════════════════════ */
.hs {
  /* palette */
  --hs-wood-0: #120b07;      /* darkest: grooves, input wells */
  --hs-wood-1: #1c120b;      /* level 1 */
  --hs-wood-2: #26180f;      /* level 2 */
  --hs-wood-3: #2f1e13;      /* level 3 */
  --hs-wood-hi: #3a2415;
  --hs-copper: #5b3a22;      /* edges */
  --hs-copper-hi: #8a5530;
  --hs-gold: #ffb36b;        /* titles */
  --hs-gold-muted: #f0d2a8;
  --hs-text: #ecdcc6;        /* beige body text */
  --hs-muted: #a8927c;
  --hs-faint: #7c6552;
  --hs-accent: #ff6a1a;      /* the existing warm orange */
  --hs-danger: #d8483a;
  --hs-danger-bg: #4a1812;
  --hs-good: #6fc265;
  --hs-bg: var(--hs-wood-1);
  --hs-panel: var(--hs-wood-2);
  --hs-border: var(--hs-copper);
  --hs-room-wall: #2a2230;
  --hs-room-floor: #3b2a22;
  /* rarity – only edges / badges, never whole cards */
  --hs-r-common: #8d7f70;    /* Ranzig */
  --hs-r-uncommon: #8fbf6a;  /* Brauchbar */
  --hs-r-rare: #6fa3d8;      /* Ordentlich */
  --hs-r-epic: #ff8a3d;      /* Heftig */
  --hs-r-special: #c58ae6;   /* Merkwürdig */
  /* type */
  --hs-serif: Georgia, 'Times New Roman', serif;
  --hs-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* v0.18.2: no own height limit any more – the HOST scrolls the whole widget (exactly one vertical scroll owner).
     --hs-max-height is ignored (kept only so old host CSS doesn't break anything). */

  font: 13px/1.35 var(--hs-sans);
  color: var(--hs-text);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  max-width: 100%;
  user-select: none;
  border-radius: 10px;
  overflow: clip; /* clips the lantern glow at the rounded edge – NOT a scroll area */
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(0deg, rgba(255,190,120,.03) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--hs-wood-hi), var(--hs-wood-1) 45%, #150d08);
  box-shadow: inset 0 0 0 2px var(--hs-wood-0), inset 0 0 0 4px var(--hs-copper), inset 0 0 40px rgba(0,0,0,.55);
}
.hs--offline { opacity: .6; }
.hs [hidden] { display: none !important; }
.hs *, .hs *::before, .hs *::after { box-sizing: border-box; }

/* ── v0.26.5-rc3 START / LOADING SCREEN (start-screen.js): covers the widget until the first data is loaded. The content
   underneath is already built but invisible (keeps its layout – no jump when the cover goes). ── */
.hs[data-boot="loading"] > :not(.hs-start), .hs[data-boot="ready"] > :not(.hs-start), .hs[data-boot="error"] > :not(.hs-start) { visibility: hidden; }
.hs-start {
  position: absolute; inset: 0; z-index: 200;
  display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(40px, 14vh, 160px) 16px 24px; min-height: 360px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,150,70,.16), transparent 55%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, var(--hs-wood-hi), var(--hs-wood-1) 45%, #150d08);
}
.hs-start-card {
  width: min(420px, 100%); padding: 22px 22px 20px; text-align: center;
  background: var(--hs-wood-2); border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--hs-wood-0), inset 0 0 0 4px var(--hs-copper), 0 10px 30px rgba(0,0,0,.45);
}
.hs-start-name { font: 700 26px/1.15 var(--hs-serif); color: var(--hs-gold); overflow-wrap: anywhere; }
.hs-start-meta { margin-top: 6px; color: var(--hs-gold-muted); font-size: 14px; display: flex; justify-content: center; gap: 8px; }
.hs-start-sep { color: var(--hs-faint); }
.hs-start-line { margin: 16px 0 18px; font: italic 15px/1.4 var(--hs-serif); color: var(--hs-text); min-height: 2.8em; }
.hs-start-bar { height: 10px; border-radius: 5px; background: var(--hs-wood-0); box-shadow: inset 0 0 0 1px var(--hs-copper); overflow: hidden; }
.hs-start-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hs-copper-hi), var(--hs-accent)); }
.hs-start-go { margin-top: 18px; min-width: 160px; font-size: 15px; padding: 9px 18px; }
.hs-start-go:disabled { opacity: .55; cursor: progress; }
.hs-start-msg { margin: 14px 0 0; font-size: 14px; color: var(--hs-text); } /* hotfix1: "Hässlon konnte nicht geladen werden." */
.hs-start-msg[hidden] { display: none; }
.hs-adv-loaderr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* hotfix1: the adventure section's own load error */

/* v0.26.5-rc3 GUILD MISSION CARD: head (Platz · state … difficulty right) · the task (one line per part) · its own reward
   line · the parts with their progress as one unbroken unit ("0/1") – everything left-aligned, wraps cleanly when narrow */
.hs .hs-guild-order .hs-guild-slot-head { align-items: center; }
.hs .hs-guild-order .hs-guild-slot-head .hs-guild-size { margin-left: auto; flex: none; }
.hs .hs-guild-order > .hs-guild-order-text { display: block; margin: 3px 0 0; overflow-wrap: anywhere; line-height: 1.35; }
.hs .hs-guild-order-part { display: block; }
.hs .hs-guild-order > .hs-guild-reward { display: block; margin: 3px 0 0; font-size: 11.5px; color: var(--hs-gold-muted, #c9a24a); }
.hs .hs-guild-parts { list-style: none; margin: 5px 0 0; padding: 0; font-size: 11.5px; color: var(--hs-muted); display: grid; gap: 1px; }
.hs .hs-guild-part { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; }
.hs .hs-guild-part .hs-guild-part-text { overflow-wrap: anywhere; }
.hs .hs-guild-part .hs-guild-progress { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hs .hs-guild-part.is-done { color: var(--hs-good, #8fd07a); }
.hs .hs-guild-order .hs-guild-slot-pct, .hs .hs-guild-order .hs-guild-slot-bar, .hs .hs-guild-order .hs-guild-slot-actions, .hs .hs-guild-order .hs-guild-howto { margin-left: 0; }

/* v0.26.5-rc3 HOME QoL: the capacity rows "Inventar" / "Futter" (≥ 80 % warm, full / over the warning look – no motion)
   + no text selection / double-tap zoom on the room (the double click on the bowl / the bed) */
.hs-stat--cap[data-level="high"] .hs-stat-val { color: #ffcf6b; }
.hs-stat--cap[data-level="high"] .hs-bar-fill { background: #d9a441; }
.hs-stat--cap[data-level="full"] .hs-stat-val, .hs-stat--cap[data-level="over"] .hs-stat-val { color: #ff8a70; font-weight: bold; }
.hs-stat--cap[data-level="full"] .hs-bar-fill, .hs-stat--cap[data-level="over"] .hs-bar-fill { background: #c0503c; }
.hs-scene { -webkit-user-select: none; user-select: none; touch-action: manipulation; }

/* v0.26.5-rc3 UX "Bestärken / Anmeckern": after an ACCEPTED reaction "Frech +3" beside his head, rises a little and fades
   (≈ 1.8 s; with a real step line ≈ 2.6 s). Kept up here with the base rules: the V2 kit blocks further down stay motion-free. */
.hs--v2 .hs-learn-float { position: absolute; z-index: 8; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  pointer-events: none; animation: hs-learn-up 1.8s ease-out forwards; }
.hs--v2 .hs-learn-float.has-step { animation-duration: 2.6s; }
.hs--v2 .hs-learn-float-main { font-size: 13px; font-weight: bold; color: var(--hs-ui-gold-hi, #ffd66b); background: #1c130be0;
  border: 1px solid var(--hs-ui-edge, #6b4423); border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.hs--v2 .hs-learn-float-step { font-size: 11px; color: #f1e6d0; background: #1c130be0; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
@keyframes hs-learn-up { 0% { opacity: 0; margin-top: 4px; } 12% { opacity: 1; margin-top: 0; } 70% { opacity: 1; } 100% { opacity: 0; margin-top: -18px; } }
@media (prefers-reduced-motion: reduce) { .hs--v2 .hs-learn-float { animation-name: hs-learn-fade; } }
@keyframes hs-learn-fade { 0% { opacity: 0; } 12%, 70% { opacity: 1; } 100% { opacity: 0; } }


/* ── v0.18.2 layout: top (name, room, status) · splitter · bottom (gameplay). The HOST scrolls all of it. ── */
.hs-top {
  flex: none; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 8px 8px; position: relative; z-index: 2;
}
.hs-top::before { /* lantern light from above, like the first-start screen */
  content: ''; position: absolute; inset: -30% 12% auto; height: 60%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,150,60,.13), transparent 70%);
}
.hs-top > * { position: relative; }
.hs-bottom {
  flex: none; /* v0.18.2: grows with its content – no own scrollbar (the host scrolls) */
  display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 40px);
}
/* the splitter = the wooden rail between the two parts (drag: room bigger / smaller, snaps to 1× / 2× / 3×) */
.hs-split {
  flex: none; position: relative; height: 12px; cursor: row-resize; touch-action: none;
  border-top: 3px solid var(--hs-wood-0); box-shadow: inset 0 3px 0 var(--hs-copper), inset 0 8px 8px -6px rgba(0,0,0,.7);
  background: rgba(0,0,0,.18);
}
.hs-split-grip {
  position: absolute; left: 50%; top: 4px; width: 46px; height: 4px; margin-left: -23px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--hs-copper-hi) 0 6px, transparent 6px 9px); opacity: .75;
}
.hs-split:hover .hs-split-grip, .hs-split.is-dragging .hs-split-grip, .hs-split:focus-visible .hs-split-grip { opacity: 1; background: repeating-linear-gradient(90deg, var(--hs-gold) 0 6px, transparent 6px 9px); }
.hs-split:focus-visible { outline: 1px solid var(--hs-accent); outline-offset: -2px; }
/* wide widget (layout.js WIDE_AT): two columns – left name/room/status, right gameplay; still ONE scroll owner */
.hs.hs--wide { display: grid; grid-template-columns: var(--hs-left, minmax(400px, 1.15fr)) minmax(380px, 1fr); align-items: start; }
.hs--wide .hs-split { display: none; }
.hs--wide .hs-bottom { padding-top: 10px; border-left: 3px solid var(--hs-wood-0); box-shadow: inset 3px 0 0 var(--hs-copper); min-height: 100%; background: none; }

/* ════ Design system ═══════════════════════════════════════════════════════ */
.hs-muted { color: var(--hs-muted); font-size: 12px; }
/* level 2: panels */
.hs-panel {
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.34));
  border: 1px solid #0d0805; border-radius: 7px; padding: 8px 10px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.6), inset 0 0 0 1px rgba(91,58,34,.55), 0 1px 0 rgba(255,200,150,.05);
}
.hs-panel--raised {
  background: linear-gradient(180deg, #24170f, #170f0a);
  border: 2px solid #4a2f1c; box-shadow: 0 2px 0 #0c0704, inset 0 1px 0 rgba(255,200,150,.06);
}
.hs-panel--recessed {
  background: var(--hs-wood-0); border: 1px solid #2c1c11; border-radius: 6px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6);
}
.hs-panel--dev { /* test/admin tools: a bit more technical, reddish copper frame */
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.25) 0 6px, rgba(0,0,0,.32) 6px 12px);
  border: 1px dashed #7a3a26; box-shadow: inset 0 0 0 1px rgba(122,58,38,.35);
}
.hs-section-title, .hs-panel-h {
  font: 700 12.5px/1.2 var(--hs-serif); letter-spacing: .08em; text-transform: uppercase;
  color: var(--hs-gold); text-shadow: 0 1px 0 var(--hs-wood-0); margin: 0 0 6px;
  display: flex; align-items: center; gap: 6px;
}
.hs-panel--dev .hs-section-title { color: #e0906a; }
/* level 3: cards */
.hs-card {
  background: linear-gradient(180deg, var(--hs-wood-3), #1a110b);
  border: 2px solid #4a2f1c; border-radius: 6px; color: var(--hs-text); font: inherit;
  box-shadow: 0 2px 0 #0c0704, inset 0 1px 0 rgba(255,200,150,.06);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
button.hs-card { cursor: pointer; }
button.hs-card:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--hs-copper-hi); }
.hs-card--selected, .hs-card.is-active {
  border-color: var(--hs-accent) !important;
  box-shadow: 0 2px 0 #0c0704, 0 0 0 1px rgba(255,106,26,.35), 0 0 12px rgba(255,106,26,.25);
}
.hs-card--disabled { filter: saturate(.4) brightness(.7); }
/* buttons */
.hs-btn {
  font: 600 12.5px/1.2 var(--hs-sans); color: var(--hs-gold-muted); cursor: pointer;
  padding: 6px 10px; border-radius: 5px;
  background: linear-gradient(180deg, #3a2517, #26180f);
  border: 1px solid #0d0805;
  box-shadow: inset 0 0 0 1px var(--hs-copper), inset 0 1px 0 rgba(255,210,160,.12), 0 2px 0 #0a0604;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.hs-btn:hover:not(:disabled) { filter: brightness(1.12); box-shadow: inset 0 0 0 1px var(--hs-copper-hi), inset 0 1px 0 rgba(255,210,160,.16), 0 2px 0 #0a0604; }
.hs-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 1px var(--hs-copper), inset 0 2px 3px rgba(0,0,0,.5), 0 1px 0 #0a0604; }
.hs-btn:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 1px; }
.hs-btn:disabled { cursor: default; color: #8d7662; filter: saturate(.3); opacity: .7; }
.hs-btn--primary {
  color: #fff4e6; background: linear-gradient(180deg, #c9531c, #93300f);
  box-shadow: inset 0 0 0 1px #e07b3c, inset 0 1px 0 rgba(255,220,180,.3), 0 2px 0 #4a130a;
}
.hs-btn--primary:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #ffa060, inset 0 1px 0 rgba(255,220,180,.35), 0 2px 0 #4a130a; }
.hs-btn--danger {
  color: #ffe0d6; background: linear-gradient(180deg, #6a241a, #45140e);
  box-shadow: inset 0 0 0 1px #a04030, inset 0 1px 0 rgba(255,200,180,.15), 0 2px 0 #1f0806;
}
.hs-btn--small { padding: 3px 8px; font-size: 11.5px; }
.hs-btn--icon { padding: 2px 6px; font-size: 13px; line-height: 1.1; }
/* tabs ("Laschen") */
.hs-tabs { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 6px; background: var(--hs-wood-0); box-shadow: inset 0 2px 3px rgba(0,0,0,.6); }
.hs-tab {
  font: 600 11.5px var(--hs-sans); color: var(--hs-muted); cursor: pointer;
  padding: 4px 9px 3px; border-radius: 4px; border: 1px solid transparent; background: transparent;
  display: inline-flex; align-items: center; gap: 5px;
}
.hs-tab:hover { color: var(--hs-gold-muted); background: rgba(91,58,34,.25); }
.hs-tab.is-active {
  color: var(--hs-gold); background: linear-gradient(180deg, #3a2517, #2a1a10);
  border-color: var(--hs-copper); box-shadow: 0 1px 0 #0a0604, inset 0 1px 0 rgba(255,210,160,.12);
}
.hs-tab-count { font-size: 10px; color: var(--hs-faint); font-variant-numeric: tabular-nums; }
/* RC1 (U13) the adventure tabs stay ONE calm row at 320–360 px (only this tab bar – the others are untouched) */
.hs-adv-tabs.hs-tabs { flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow: hidden; } /* never wider than the panel */
/* v0.21.0 Nachbesserung (layout matrix): three EQUAL thirds (flex: 1 1 0) chopped the longest word – "Ausrüstung" lost
   3 px at 360 px and 6 px at 320 px / large font (text-overflow does nothing on a flex box). Now every tab starts at the
   width of its own word and the rest is shared: still one row, the words whole. */
.hs-adv-tabs .hs-tab { flex: 1 1 auto; min-width: 0; justify-content: center; padding: 4px 4px 3px; gap: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-adv-tabs .hs-tab .hs-icon { margin-right: 0; flex: 0 0 auto; }
.hs-adv-tabs .hs-tab-count { flex: 0 0 auto; }
/* RC2 (R2) by the PANEL's own width (a 320-px dashboard tile has a wide viewport – a media query would miss it) */
.hs-adv { container: hsadv / inline-size; }
@container hsadv (max-width: 300px) { /* 320-px tile (panel ~280 px inside); a 360-px tile stays as it was */
  .hs-adv .hs-adv-tabs .hs-tab .hs-icon { display: none; }    /* the words stay whole, the icons step aside */
  .hs-adv .hs-adv-tabs .hs-tab { padding: 4px 2px 3px; font-size: 11px; }
}
@container hsadv (max-width: 235px) { .hs-adv .hs-strat-choices { grid-template-columns: minmax(0, 1fr); } } /* v0.23.0-rc2 the strategies one below the other */
@container hsadv (max-width: 235px) { /* v0.21.0 Nachbesserung: 320-px tile + large font (panel ~215 px): the three words no longer fit in one row – a second row instead of chopped words */
  .hs-adv .hs-adv-tabs.hs-tabs { flex-wrap: wrap; }
}
.hs-tab.is-active .hs-tab-count { color: var(--hs-accent); }
/* badges + rarity */
.hs-badge {
  display: inline-block; font: 600 10px/1.4 var(--hs-sans); letter-spacing: .03em; text-transform: none;
  padding: 0 6px; border-radius: 999px; color: var(--hs-gold); background: var(--hs-wood-0); border: 1px solid var(--hs-copper);
}
.hs-rarity { text-transform: uppercase; font-size: 9px; letter-spacing: .06em; border-color: currentColor; background: transparent; }
.hs-rarity.is-common { color: var(--hs-r-common); }
.hs-rarity.is-uncommon { color: var(--hs-r-uncommon); }
.hs-rarity.is-rare { color: var(--hs-r-rare); }
.hs-rarity.is-epic { color: var(--hs-r-epic); }
.hs-rarity.is-special { color: var(--hs-r-special); }
/* form controls */
.hs-input, .hs-select, .hs select, .hs input[type="text"] {
  font: 600 12.5px var(--hs-sans); color: #ffe3c4; min-width: 0;
  background: var(--hs-wood-0); border: 1px solid #4a2f1c; border-radius: 5px; padding: 5px 8px;
  box-shadow: inset 0 2px 0 rgba(0,0,0,.5);
}
.hs select { appearance: none; padding-right: 24px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--hs-copper-hi) 50%), linear-gradient(135deg, var(--hs-copper-hi) 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.hs-input:focus, .hs select:focus, .hs input[type="text"]:focus { outline: none; border-color: var(--hs-accent); box-shadow: inset 0 2px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(255,106,26,.3); }
.hs-input::placeholder { color: #6e5645; }
.hs select:disabled, .hs-input:disabled { color: var(--hs-faint); cursor: default; }
.hs input[type="checkbox"] { accent-color: var(--hs-accent); }
.hs input[type="range"] { accent-color: var(--hs-accent); }
/* modal confirmation (ui-kit.js confirmDialog) – never window.alert/confirm */
.hs-modal-back {
  position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(8,4,2,.62);
}
.hs-modal { max-width: 320px; width: 100%; padding: 14px 14px 12px; box-shadow: 0 8px 30px rgba(0,0,0,.6), 0 2px 0 #0c0704, inset 0 1px 0 rgba(255,200,150,.08); }
.hs-modal .hs-section-title { font-size: 15px; justify-content: center; }
.hs-modal-text { margin: 0 0 12px; color: var(--hs-text); text-align: center; font-size: 12.5px; }
.hs-modal-row { display: flex; justify-content: center; gap: 8px; }

/* ════ Components ═══════════════════════════════════════════════════════════ */
.hs-header { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.hs-name {
  font: 700 17px/1.1 var(--hs-serif); letter-spacing: .03em; color: var(--hs-gold);
  text-shadow: 0 2px 0 var(--hs-wood-0), 0 0 12px rgba(255,106,26,.3);
}
.hs-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.hs-badges span {
  padding: 1px 7px; border-radius: 999px; font-size: 10.5px; color: var(--hs-muted);
  background: var(--hs-wood-0); border: 1px solid #3a2415;
}
.hs-header .hs-btn--edit { margin-left: 4px; padding: 3px 9px; font-size: 11.5px; }

/* Room scene ----------------------------------------------------------- */
/* .hs-scene is the responsive box; .hs-stage has the room's native pixel size
   (e.g. 384x216) and is scaled by an integer factor from JS. */
.hs-scene {
  position: relative; overflow: hidden; border-radius: 4px; background: #2a2230;
  box-shadow: 0 0 0 2px var(--hs-wood-0), 0 0 0 3px var(--hs-copper), 0 3px 0 3px #0a0604; margin: 3px;
}
.hs-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; --hs-inv: 1; }
.hs-layer { position: absolute; inset: 0; }
.hs-layer--bg     { z-index: 0; }
.hs-layer--rear   { z-index: 1; }
.hs-layer--actors { z-index: 2; }
.hs-layer--front  { z-index: 3; }
.hs-layer--fx     { z-index: 4; pointer-events: none; }
/* v0.26.5-rc2 generic sub-room (widget _enterSubRoom): the full-size actor / front layers let clicks through to the
   room's own clickable objects; the pet and those objects take the pointer themselves */
.hs--subroom .hs-layer--actors, .hs--subroom .hs-layer--front { pointer-events: none; }
.hs--subroom .hs-layer--actors > .hs-pet, .hs--subroom .hs-subobj.is-clickable { pointer-events: auto; }

/* Pixel-perfect everywhere inside the stage (and every item picture outside it). */
.hs-stage img, .hs-stage canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.hs img { image-rendering: pixelated; }
.hs-room-img { position: absolute; left: 0; top: 0; }
.hs-obj { position: absolute; left: 0; top: 0; }

/* Positioned by JS (whole room pixels) so the character's feet sit on its floor point. */
.hs-pet { position: absolute; left: 0; top: 0; will-change: transform; }
.hs-sprite { position: relative; }
.hs-sprite--missing .hs-sprite-canvas { visibility: hidden; }
.hs-sprite--missing {
  background: repeating-linear-gradient(45deg, #444 0 4px, #555 4px 8px);
  outline: 1px dashed var(--hs-accent); outline-offset: -1px;
}
.hs-sprite--missing::after {
  content: attr(data-anim);
  position: absolute; inset: auto 0 4px 0; text-align: center;
  font-size: calc(10px * var(--hs-inv)); color: #fff;
}

/* fx layer: an anchor point at the head; children are placed around it.
   Sizes are multiplied by --hs-inv so text stays normal-sized at any stage scale.
   v0.12: bubbles are positioned by JS (speech-layout.js) – always completely inside the room. */
.hs-overlay { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.hs-bubble, .hs-gbubble {
  position: absolute; left: 0; top: 0; white-space: nowrap; z-index: 3;
  background: #fbf3e4; color: #24160c; border: calc(1px * var(--hs-inv)) solid #3a2415;
  padding: calc(3px * var(--hs-inv)) calc(8px * var(--hs-inv));
  border-radius: calc(7px * var(--hs-inv)); font-size: calc(12px * var(--hs-inv)); line-height: 1.25;
  box-shadow: 0 calc(1px * var(--hs-inv)) 0 rgba(0,0,0,.4);
  --hs-arrow-x: 50%; --hs-arrow-y: 50%;
}
.hs-bubble::after, .hs-gbubble::after { /* little arrow, pointing at the head from whichever side */
  content: ''; position: absolute; width: calc(6px * var(--hs-inv)); height: calc(6px * var(--hs-inv));
  background: inherit; border: inherit; border-width: 0 calc(1px * var(--hs-inv)) calc(1px * var(--hs-inv)) 0;
  left: var(--hs-arrow-x); top: 100%; transform: translate(-50%, -45%) rotate(45deg);
}
.hs-bubble[data-side="below"]::after, .hs-gbubble[data-side="below"]::after { top: 0; transform: translate(-50%, -55%) rotate(225deg); }
.hs-bubble[data-side="right"]::after, .hs-gbubble[data-side="right"]::after { left: 0; top: var(--hs-arrow-y); transform: translate(-55%, -50%) rotate(135deg); }
.hs-bubble[data-side="left"]::after, .hs-gbubble[data-side="left"]::after { left: 100%; top: var(--hs-arrow-y); transform: translate(-45%, -50%) rotate(-45deg); }
/* ── v0.26.4 LIFE V2: who speaks? Resident = warm copper rim, visitor = cool teal rim – the SAME bubble, only the edge
   (and the tail, which inherits the border) is coloured; only while two Hässlons are in the room (data-speaker set by
   the widget's _layoutBubbles). Kein Leuchten, kein Neon – readable parchment stays parchment. ─────────────────────────── */
.hs--v2 .hs-bubble[data-speaker], .hs--v2 .hs-gbubble[data-speaker] {
  border-width: calc(2px * var(--hs-inv));
}
.hs--v2 .hs-bubble[data-speaker]::after, .hs--v2 .hs-gbubble[data-speaker]::after {
  border-width: 0 calc(2px * var(--hs-inv)) calc(2px * var(--hs-inv)) 0;
}
.hs--v2 .hs-bubble[data-speaker="resident"], .hs--v2 .hs-gbubble[data-speaker="resident"] { border-color: #b8702c; }
.hs--v2 .hs-bubble[data-speaker="visitor"], .hs--v2 .hs-gbubble[data-speaker="visitor"] { border-color: #2f8a96; }

/* ── v0.26.4 GILDENMARKEN + GILDENBEDARF (inside the guild section; no timers, no blinking) ────────────────────── */
.hs--v2 .hs-guild-rep-full { margin-top: 4px; font-size: 12px; color: var(--hs-gold-muted, #c9a96a); }
.hs--v2 .hs-guild-marks { display: flex; gap: 6px; align-items: baseline; margin-top: 4px; font-size: 12px; }
.hs--v2 .hs-guild-marks-num { font-weight: 700; color: #e8c37a; }
.hs--v2 .hs-guild-marks-note { margin-top: 2px; font-size: 11px; line-height: 1.3; }
.hs--v2 .hs-guild-supply-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.hs--v2 .hs-guild-ware { padding: 8px; border: 1px solid rgba(232,195,122,.25); border-radius: 6px; background: rgba(0,0,0,.18); }
.hs--v2 .hs-guild-ware.is-locked { opacity: .75; }
.hs--v2 .hs-guild-ware-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.hs--v2 .hs-guild-ware-cost { color: #e8c37a; white-space: nowrap; }
.hs--v2 .hs-guild-ware-desc { margin-top: 3px; font-size: 12px; line-height: 1.35; }
.hs--v2 .hs-guild-ware-stock, .hs--v2 .hs-guild-ware-why, .hs--v2 .hs-guild-ware-lock { margin-top: 3px; font-size: 11px; line-height: 1.3; }
.hs--v2 .hs-guild-ware-lock { color: #e0a060; }
.hs--v2 .hs-guild-ware-mastered { margin-top: 3px; font-size: 12px; color: #9fd08a; }
.hs--v2 .hs-guild-ware-actions, .hs--v2 .hs-guild-ware-weapons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hs--v2 .hs-guild-whet-confirm { flex-basis: 100%; padding: 8px; display: grid; gap: 4px; font-size: 12px; }
.hs--v2 .hs-guild-supply-msg { margin-top: 6px; font-size: 12px; }
.hs--v2 .hs-guild-supply-msg.is-error { color: #ff9a7a; }
.hs--v2 .hs-rankup-rep { margin: 6px 0; text-align: center; font-size: 13px; }
.hs--v2 .hs-rankup-reached { font-weight: 700; }
/* ── v0.26.4-rc2 WUNDEN LECKEN + ÜBERSÄTTIGEN (Versorgung → Napf & Essen; quiet cards, no timers, no blinking) ─────── */
.hs--v2 .hs-sup-heal, .hs--v2 .hs-sup-overfeed { margin: 0 0 8px; padding: 8px; border-radius: 6px; display: grid; gap: 4px; min-width: 0; }
.hs--v2 .hs-sup-overfeed { margin: 8px 0 0; }
.hs--v2 .hs-sup-heal { border: 1px solid rgba(214,96,82,.45); }
.hs--v2 .hs-sup-heal.is-active { border-color: rgba(159,208,138,.45); }
.hs--v2 .hs-sup-heal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hs--v2 .hs-sup-heal-title, .hs--v2 .hs-sup-overfeed-title { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.hs--v2 .hs-sup-heal-hp { font-size: 12px; white-space: nowrap; }
.hs--v2 .hs-sup-heal-text, .hs--v2 .hs-sup-overfeed-text { font-size: 12px; line-height: 1.35; }
.hs--v2 .hs-sup-heal-left, .hs--v2 .hs-sup-heal-floor, .hs--v2 .hs-sup-heal-hint { font-size: 11px; line-height: 1.3; }
.hs--v2 .hs-sup-heal .hs-btn--heal { justify-self: start; }
.hs--v2 .hs-sup-chip--heal { color: #ff9f8f; cursor: pointer; font: inherit; }
.hs--v2 .hs-sup-chip--heal.is-active { color: #9fd08a; }
/* v0.26.5-rc2 the own temporary section "Wunden & Erholung" (above Napf & Essen; not drawn at full health) */
.hs--v2 .hs-sup-sec--heal .hs-sup-heal { margin: 0; }
.hs--v2 .hs-sup-heal-head { align-items: center; flex-wrap: nowrap; }
.hs--v2 .hs-sup-heal-bar { flex: 1 1 auto; min-width: 60px; height: 6px; }
.hs--v2 .hs-sup-heal-bar .hs-bar-fill { background: #d66052; }
.hs--v2 .hs-sup-heal.is-active .hs-sup-heal-bar .hs-bar-fill { background: #9fd08a; }
.hs--v2 .hs-sup-sec[hidden] { display: none; }
.hs--v2 .hs-sup-overfeed-list { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.hs--v2 .hs-sup-overfeed-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.hs--v2 .hs-sup-overfeed-name { font-weight: 700; font-size: 12px; }
.hs--v2 .hs-sup-overfeed-fx { font-size: 11px; flex: 1 1 140px; min-width: 0; }
.hs--v2 .hs-sup-overfeed-row .hs-btn--overfeed { margin-left: auto; }
.hs-flags { position: absolute; left: 12px; top: -2px; font-size: calc(13px * var(--hs-inv)); white-space: nowrap; }
.hs-zzz {
  position: absolute; left: 10px; top: -6px; color: #cfd6ff; font-weight: 700;
  font-size: calc(13px * var(--hs-inv)); animation: hs-float 2s infinite;
}
.hs-zzz span { font-size: .8em; margin-left: 2px; }
@keyframes hs-float { 50% { transform: translateY(-4px); opacity: .6; } }

/* Stats: dark set-in bars ------------------------------------------------ */
.hs-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 3px 12px;
  padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,.28);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(91,58,34,.4);
}
.hs-stat { display: grid; grid-template-columns: 70px 1fr 26px; align-items: center; gap: 6px; }
.hs-stat-label { color: var(--hs-gold-muted); font: 600 11.5px var(--hs-sans); }
.hs-stat-val { text-align: right; font: 600 11px var(--hs-sans); color: var(--hs-text); font-variant-numeric: tabular-nums; }
.hs-bar {
  height: 9px; border-radius: 2px; overflow: hidden; background: var(--hs-wood-0);
  border: 1px solid #4a2f1c; box-shadow: inset 0 1px 0 rgba(0,0,0,.6);
}
.hs-bar-fill { display: block; height: 100%; background: linear-gradient(180deg, #86cf78, #4f9a45); transition: width .4s; }
.hs-stat--hunger .hs-bar-fill,
.hs-stat--chaos .hs-bar-fill { background: linear-gradient(180deg, #f08a3e, #c25a1c); }
.hs-stat--warn .hs-bar-fill { background: linear-gradient(180deg, #e0604c, #a8301f); }
.hs-stat--warn .hs-stat-label { color: #ff8a70; }
/* v0.13 Klogang: same bar, earthy fill, a small notch at 30 % (one "business") */
.hs-bar { position: relative; }
.hs-stat--klogang .hs-bar-fill { background: linear-gradient(180deg, #b58a4a, #7d5626); }
.hs-stat--klogang.hs-stat--ready .hs-stat-label { color: var(--hs-gold); }
.hs-stat--klogang.hs-stat--warn .hs-bar-fill { background: linear-gradient(180deg, #d88a3a, #9c5214); }
.hs-stat--klogang.hs-stat--warn .hs-stat-label { color: #ffb36b; }
.hs-bar-mark { position: absolute; top: -1px; bottom: -1px; width: 1px; background: rgba(255, 220, 170, .55); box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }
.hs-btn--relieve { color: var(--hs-gold); }
/* v0.23.0-rc2 NACHBARSCHAFT: the actions for the picked person (one row per action: button + cost / reason) */
.hs-hood-actions { display: grid; gap: 6px; margin-top: 7px; padding: 7px 8px; border-radius: 6px; background: rgba(0,0,0,.2); border: 1px solid rgba(91,58,34,.55); }
.hs-hood-actions[hidden] { display: none; }
.hs-hood-who { font: 700 12.5px var(--hs-serif); color: var(--hs-gold); overflow-wrap: anywhere; }
.hs-hood-action-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hs-hood-action { display: grid; gap: 2px; min-width: 0; }
.hs-hood-action .hs-btn { width: 100%; min-height: 32px; }
.hs-hood-action-note { font-size: 10.5px; color: var(--hs-muted); overflow-wrap: anywhere; }
.hs-hood-action.is-blocked .hs-hood-action-note { color: #ffcf9e; }
.hs-kg-test { display: inline-flex; flex-wrap: wrap; gap: 6px; }

/* Actions --------------------------------------------------------------- */
.hs-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.hs-actions .hs-btn { padding: 7px 8px; }
.hs-btn--loot, .hs-btn--newspapers { color: var(--hs-gold); }

.hs-status { color: #ff8a70; min-height: 1em; font-size: 12px; }
.hs-status.is-info { color: var(--hs-muted); }
.hs-status:empty { min-height: 0; }
.hs-log { list-style: none; margin: 0; padding: 6px 8px; color: var(--hs-faint); font-size: 11px; border-top: 1px dashed #3a2415; }
.hs-log li { padding: 1px 0; }

/* Room editor ("Einrichten") ------------------------------------------------ */
.hs--editing .hs-actions, .hs--editing .hs-stats, .hs--editing .hs-log { display: none; }
.hs--editing .hs-stage { cursor: crosshair; }
.hs-editor { display: flex; flex-direction: column; gap: 8px; }
.hs-editor-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hs-editor-title { margin: 0; font-size: 14px; }
.hs-editor-spacer { flex: 1; }
.hs-editor-hint { font-size: 12px; color: var(--hs-muted); min-height: 1.3em; }
.hs-editor-hint.is-error { color: #ff8a70; }
.hs-editor-h { font: 700 11px var(--hs-serif); text-transform: uppercase; letter-spacing: .08em; color: var(--hs-muted); cursor: pointer; }
.hs-editor-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; }
.hs-ed-owned { display: grid; gap: 7px; } /* no nested scrolling – the lower widget part scrolls */
.hs-ed-cat { font: 700 12px var(--hs-serif); color: var(--hs-gold-muted); letter-spacing: .03em; margin-top: 2px; }
.hs-ed-unknown summary { list-style: none; }
.hs-ed-unknown summary::before { content: '▸ '; color: var(--hs-copper-hi); }
.hs-ed-unknown[open] summary::before { content: '▾ '; }
.hs-ed-unknown .hs-editor-list { margin-top: 6px; }
/* item cards: picture · name · rarity badge · owned · placed – rarity only as a thin top stripe + badge */
.hs-ed-item, .hs-item-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 5px;
  font: inherit; font-size: 11px; color: var(--hs-text); cursor: pointer; text-align: center;
  background: linear-gradient(180deg, var(--hs-wood-3), #1a110b);
  border: 2px solid #4a2f1c; border-radius: 6px;
  box-shadow: 0 2px 0 #0c0704, inset 0 1px 0 rgba(255,200,150,.06);
  transition: transform .12s ease, border-color .12s ease;
}
.hs-item-card::before { content: ''; position: absolute; left: 6px; right: 6px; top: 2px; height: 2px; border-radius: 1px; background: var(--hs-r, var(--hs-r-common)); opacity: .75; }
.hs-item-card.is-uncommon { --hs-r: var(--hs-r-uncommon); }
.hs-item-card.is-rare { --hs-r: var(--hs-r-rare); }
.hs-item-card.is-epic { --hs-r: var(--hs-r-epic); }
.hs-item-card.is-special { --hs-r: var(--hs-r-special); }
.hs-item-card.is-rare, .hs-item-card.is-epic, .hs-item-card.is-special { border-color: color-mix(in srgb, var(--hs-r) 35%, #4a2f1c); }
.hs-ed-item:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--hs-copper-hi); }
.hs-item-pic {
  width: 56px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 4px;
  background: radial-gradient(ellipse 60% 22% at 50% 88%, rgba(0,0,0,.45), transparent 70%), var(--hs-wood-0);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.hs-ed-item img { max-width: 48px; max-height: 46px; object-fit: contain; image-rendering: pixelated; }
.hs-ed-item .hs-ed-name { font-weight: 600; line-height: 1.15; color: var(--hs-gold-muted); }
.hs-item-card.is-rare .hs-ed-name, .hs-item-card.is-epic .hs-ed-name, .hs-item-card.is-special .hs-ed-name { color: color-mix(in srgb, var(--hs-r) 45%, var(--hs-gold-muted)); }
.hs-item-meta { display: flex; flex-direction: column; line-height: 1.2; }
.hs-item-meta small, .hs-ed-item small { color: var(--hs-muted); font-size: 10px; }
.hs-ed-item.is-active { border-color: var(--hs-accent); box-shadow: 0 2px 0 #0c0704, 0 0 12px rgba(255,106,26,.3); }
.hs-ed-item:disabled { cursor: default; }
.hs-ed-item.is-all-placed { opacity: .75; }
.hs-ed-item.is-locked img { filter: grayscale(1) brightness(.6); }
.hs-ed-item.is-unknown { cursor: default; opacity: .8; }
.hs-ed-placeholder {
  width: 56px; height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; background: #120b07; border: 1px dashed #3a2f28;
  color: #5a4a40; font: 700 22px var(--hs-serif);
}
.hs-editor-preview { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 6px; }
.hs-editor-preview img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.hs-editor-progress { font-size: 11px; color: var(--hs-muted); }
.hs-ghost { position: absolute; left: 0; top: 0; opacity: .8; pointer-events: none;
  filter: drop-shadow(1px 0 0 #5fd35f) drop-shadow(-1px 0 0 #5fd35f) drop-shadow(0 1px 0 #5fd35f) drop-shadow(0 -1px 0 #5fd35f); }
.hs-ghost.is-invalid { filter: drop-shadow(1px 0 0 #e0282e) drop-shadow(-1px 0 0 #e0282e) drop-shadow(0 1px 0 #e0282e) drop-shadow(0 -1px 0 #e0282e) grayscale(.5); }
.hs-obj--selected { filter: drop-shadow(1px 0 0 #ff6a1a) drop-shadow(-1px 0 0 #ff6a1a) drop-shadow(0 1px 0 #ff6a1a) drop-shadow(0 -1px 0 #ff6a1a); }

/* Departure: fade out in the doorway (departure.js) ------------------------ */
.hs-pet { transition: opacity var(--hs-vanish-ms, 450ms) ease-in; }
.hs-pet.is-leaving { opacity: 0; }

/* Cleanup (door piles, protest piles, toilet, foreign scribbles) + prank ------ */
.hs-door-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.hs-door-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.hs-btn--clean { padding: 3px 9px; font-size: 11.5px; }
.hs-prank-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.hs-select--cards { display: none; } /* v0.12: name cards replace the dropdown (it only holds the value) */
.hs-target-cards:not(:empty) + .hs-prank-row { grid-template-columns: 1fr; }
.hs-target-cards:not(:empty) + .hs-prank-row .hs-btn { justify-self: end; }
.hs-prank-hint { font-size: 11px; color: var(--hs-muted); margin-top: 5px; min-height: 1em; }
.hs-sign-label { pointer-events: auto; }
/* v0.26.3-rc4 the small red adventure flag stuck into a Räudig pile: behind the pile (its pole vanishes in it), never
   takes a click (the pile stays the cleanup target), pixel art drawn crisp like the room */
.hs-pile-flag { width: 16px; height: 16px; image-rendering: pixelated; pointer-events: none; transform-origin: 2px 15px; }
.hs--editing .hs-hood { display: none; } /* v0.23.0-rc2 (was .hs-visit + .hs-prank) */
.hs-pet.is-entering { animation: hs-enter 600ms ease-out; }
@keyframes hs-enter { from { opacity: 0; } to { opacity: 1; } }
/* name cards for visit / prank targets */
.hs-target-cards { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.hs-target-cards:empty { display: none; }
.hs-target { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-width: 1px; max-width: 100%; }
.hs-target-av {
  width: 20px; height: 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px var(--hs-serif); color: var(--hs-gold); background: var(--hs-wood-0); box-shadow: inset 0 0 0 1px var(--hs-copper);
}
.hs-target-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Visits: guests in the room + panels ---------------------------------------- */
.hs-guest-tag {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
  font-size: calc(9px * var(--hs-inv)); line-height: 1.2; color: #fbe9d0; background: rgba(18, 11, 7, .72);
  padding: 0 calc(4px * var(--hs-inv)); border-radius: calc(3px * var(--hs-inv));
  box-shadow: 0 0 0 calc(1px * var(--hs-inv)) rgba(91,58,34,.8);
}
.hs-guest.is-leaving { opacity: 0; transition: opacity 450ms ease-in; }
.hs-visit-away { margin-top: 6px; padding: 7px 8px; display: grid; gap: 6px; border-left: 3px solid var(--hs-accent); }
.hs-visit-away-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hs-visit-away-text { font: 700 13px var(--hs-serif); color: var(--hs-gold); }
.hs-visit-away-btns { display: inline-flex; gap: 5px; }
.hs-btn--watch { color: var(--hs-gold); }
.hs-graffiti-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.hs-graffiti-text { text-transform: uppercase; letter-spacing: .08em; font-family: ui-monospace, monospace; }
.hs--editing .hs-guests, .hs--editing .hs-guest { display: none; }

/* Neglect / protest ---------------------------------------------------------- */
.hs-badges .hs-mood-badge { color: #ffb36b; background: #3a2412; }
.hs[data-neglect="2"] .hs-badges .hs-mood-badge { color: #ff8a3d; }
.hs[data-neglect="3"] .hs-badges .hs-mood-badge { color: #fff; background: var(--hs-danger); }
/* "tiredness/zzz shown more clearly": status icons grow with the level */
.hs[data-neglect="1"] .hs-flags { font-size: calc(15px * var(--hs-inv)); }
.hs[data-neglect="2"] .hs-flags, .hs[data-neglect="3"] .hs-flags { font-size: calc(17px * var(--hs-inv)); animation: hs-float 2.4s infinite; }
.hs[data-neglect="3"] .hs-pet:not(.hs-guest) .hs-sprite { filter: saturate(.7) brightness(.92); } /* grey mood */

/* Admin/test tools ------------------------------------------------------------ */
.hs-testtools-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hs-instant { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--hs-muted); cursor: pointer; margin-right: 4px; }
.hs-instant input { margin: 0; }
.hs--instant .hs-instant { color: var(--hs-accent); }
.hs--instant .hs-name::after { content: ' ⚡'; } /* visible reminder while test mode is on */
.hs-reveal-test { display: inline-flex; gap: 4px; }
.hs-reveal-test .hs-select { padding-top: 3px; padding-bottom: 3px; font-size: 11.5px; }
.hs-testtools .hs-btn--preview { text-decoration: none; display: inline-block; }
.hs-btn--reset { color: var(--hs-muted); }
.hs-btn--reset.is-armed { color: #fff; background: linear-gradient(180deg, #a8301f, #6a1a10); box-shadow: inset 0 0 0 1px #e0604c; }

/* v0.21.0 (N) ADMIN: reset another user's savegame (owner only) – inside the test tools panel -------------------- */
.hs-areset { margin-top: 8px; border-top: 1px dashed #7a3a26; padding-top: 6px; min-width: 0; }
.hs-areset-sum { cursor: pointer; font: 700 12px/1.3 var(--hs-serif); letter-spacing: .06em; text-transform: uppercase; color: #e0906a; padding: 2px 0; overflow-wrap: anywhere; }
.hs-areset-sum:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 2px; }
.hs-areset-body { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; min-width: 0; }
.hs-areset-intro, .hs-areset-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--hs-muted); overflow-wrap: anywhere; }
.hs-areset-step { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hs-areset-step-h { font: 700 11.5px/1.2 var(--hs-sans); letter-spacing: .04em; color: var(--hs-gold-muted); }
.hs-areset-search-row { display: flex; gap: 6px; min-width: 0; }
.hs-areset-search { flex: 1 1 auto; width: 0; }
.hs-areset-reload { flex: none; }
.hs-areset-list, .hs-areset-ul, .hs-areset-loglist { list-style: none; margin: 0; padding: 0; }
.hs-areset-list { display: flex; flex-direction: column; gap: 4px; }
.hs-areset-pick { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1px 10px; width: 100%; padding: 5px 8px; text-align: left; }
.hs-areset-pick:hover { border-color: var(--hs-copper-hi); }
.hs-areset-pick.hs-card--selected { border-color: var(--hs-danger); box-shadow: 0 2px 0 #0c0704, inset 0 0 0 1px rgba(216,72,58,.5); }
.hs-areset-who { flex: 1 1 100%; min-width: 0; font: 700 13px/1.25 var(--hs-sans); color: #ffe3c4; overflow-wrap: anywhere; } /* the name is never cut: it has to be typed exactly */
.hs-areset-self { font-weight: 600; color: var(--hs-muted); }
/* v0.25.2 NAMENSWECHSEL: small separate action under each savegame card */
.hs-areset-namechange { margin: 3px 0 2px 8px; }
.hs-areset-namechange-pending { color: var(--hs-copper-hi); font-weight: 600; }
.hs-areset-pet, .hs-areset-seen { min-width: 0; font-size: 11.5px; line-height: 1.3; color: var(--hs-muted); overflow-wrap: anywhere; } /* narrow tile: they wrap below each other */
.hs-areset-warn { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 6px; background: var(--hs-danger-bg); border: 1px solid #7a2a20; min-width: 0; }
.hs-areset-target { font-size: 12.5px; line-height: 1.4; color: var(--hs-text); overflow-wrap: anywhere; }
.hs-areset-target-name { margin: 0 5px; color: #fff; font-size: 13.5px; }
.hs-areset-target-pet { color: var(--hs-gold-muted); }
.hs-areset-block-h { font: 700 12px/1.3 var(--hs-sans); }
.hs-areset-block.is-gone .hs-areset-block-h { color: #ff9c8a; }
.hs-areset-block.is-kept .hs-areset-block-h { color: var(--hs-good); }
.hs-areset-ul { font-size: 12px; line-height: 1.45; color: var(--hs-text); }
.hs-areset-ul li { padding-left: 14px; position: relative; overflow-wrap: anywhere; }
.hs-areset-ul li::before { position: absolute; left: 0; }
.hs-areset-block.is-gone li::before { content: '✖'; color: #ff9c8a; font-size: 10px; top: 2px; }
.hs-areset-block.is-kept li::before { content: '✔'; color: var(--hs-good); font-size: 10px; top: 2px; }
.hs-areset-warn .hs-areset-note { color: var(--hs-gold-muted); }
.hs-areset-ask { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--hs-text); min-width: 0; }
.hs-areset-ask-text { overflow-wrap: anywhere; }
.hs-areset-ask-name { color: #fff; user-select: all; }
.hs-areset-name { width: 100%; }
.hs-areset-hint { min-height: 15px; font-size: 11.5px; }
.hs-areset-hint.is-ok { color: var(--hs-good); }
.hs-areset-hint.is-bad { color: #ff9c8a; }
.hs-areset-yes { display: flex; align-items: flex-start; gap: 6px; font: 700 12.5px/1.35 var(--hs-sans); color: #ffd9cf; cursor: pointer; }
.hs-areset-yes input { margin: 2px 0 0; flex: none; }
.hs-areset-go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hs-areset-go { flex: 1 1 200px; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.hs-areset-go:not(:disabled) { color: #fff; background: linear-gradient(180deg, #b8321f, #7a1c10); box-shadow: inset 0 0 0 1px #e0604c, 0 2px 0 #1f0806; }
.hs-areset-result { font-size: 12.5px; line-height: 1.4; padding: 6px 8px; border-radius: 5px; overflow-wrap: anywhere; background: rgba(0,0,0,.3); color: var(--hs-text); }
.hs-areset-result[data-kind="ok"] { border-left: 3px solid var(--hs-good); }
.hs-areset-result[data-kind="error"] { border-left: 3px solid var(--hs-danger); color: #ffd0c6; }
.hs-areset-log { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hs-areset-loglist { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; line-height: 1.35; color: var(--hs-text); }
.hs-areset-logrow { display: flex; flex-wrap: wrap; gap: 0 6px; padding: 3px 0; border-top: 1px solid rgba(91,58,34,.4); overflow-wrap: anywhere; }
.hs-areset-log-when { color: var(--hs-muted); flex: none; }
.hs-areset-log-detail { flex: 1 1 100%; color: var(--hs-muted); }
.hs-areset-logrow.is-failed .hs-areset-log-detail { color: #ff9c8a; }

/* Name + rename pencil ------------------------------------------------------- */
.hs-namebox { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.hs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14em; }
.hs-name-edit {
  background: none; border: 0; padding: 0 2px; cursor: pointer; font: inherit; font-size: 12px;
  color: var(--hs-muted); opacity: .55; line-height: 1;
}
.hs-name-edit:hover, .hs-name-edit:focus-visible { opacity: 1; color: var(--hs-accent); }
.hs-name-input { width: 11em; color: var(--hs-gold); font: 700 14px var(--hs-serif); border-color: var(--hs-accent); padding: 1px 6px; }

/* First-start screen "Wähle dein Hässlon" (onboarding.js) -------------------- */
.hs--onboarding > :not(.hs-onb) { display: none !important; }
.hs-onb {
  --wood-1: #2a1a10; --wood-2: #3a2415; --stone: #1b1714;
  position: relative; border-radius: 8px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(0deg, rgba(255,190,120,.035) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--wood-2), var(--wood-1) 60%, var(--stone));
  box-shadow: inset 0 0 0 2px #120b07, inset 0 0 0 4px #5b3a22, inset 0 0 40px rgba(0,0,0,.6);
  padding: 18px 16px 16px;
  image-rendering: pixelated;
}
.hs-onb::before { /* warm lantern light from above */
  content: ''; position: absolute; inset: -40% 10% auto; height: 70%;
  background: radial-gradient(ellipse at center, rgba(255,150,60,.18), transparent 70%); pointer-events: none;
}
.hs-onb-frame { position: relative; display: flex; flex-direction: column; gap: 14px; }
.hs-onb-head { text-align: center; }
.hs-onb-title {
  margin: 0; font: 700 22px/1.15 Georgia, 'Times New Roman', serif; letter-spacing: .06em; text-transform: uppercase;
  color: #ffb36b; text-shadow: 0 2px 0 #120b07, 0 0 14px rgba(255,106,26,.45);
}
.hs-onb-sub { margin: 4px 0 0; color: #c9ab8c; font-style: italic; font-size: 13px; }
.hs-onb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.hs-onb-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
  padding: 8px 8px 10px; font: inherit; color: var(--hs-text); text-align: center;
  background: linear-gradient(180deg, #24170f, #170f0a);
  border: 2px solid #4a2f1c; border-radius: 6px;
  box-shadow: 0 3px 0 #0c0704, inset 0 1px 0 rgba(255,200,150,.06);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hs-onb-card:hover { transform: translateY(-2px); border-color: #8a5530; }
.hs-onb-card:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 2px; }
.hs-onb-card.is-selected {
  border-color: var(--hs-accent); transform: translateY(-3px);
  box-shadow: 0 3px 0 #0c0704, 0 0 0 1px rgba(255,106,26,.35), 0 0 18px rgba(255,106,26,.35);
}
.hs-onb-stage { /* little stone floor the preview stands on */
  width: 100%; height: 132px; display: flex; justify-content: center; align-items: flex-end; overflow: hidden;
  background: radial-gradient(ellipse 50% 14% at 50% 88%, rgba(0,0,0,.45), transparent 70%);
}
.hs-onb-sprite { margin-bottom: -20px; } /* 160x160 canvas; feet sit near its bottom third */
.hs-onb-sprite canvas { image-rendering: pixelated; display: block; }
.hs-onb-card-name { font: 700 14px Georgia, serif; color: #f0d2a8; letter-spacing: .02em; }
.hs-onb-card.is-selected .hs-onb-card-name { color: #ffb36b; }
.hs-onb-card-blurb { font-size: 11.5px; color: #a8927c; min-height: 2.6em; }
.hs-onb-name { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
.hs-onb-label { grid-column: 1 / -1; font: 700 14px Georgia, serif; color: #f0d2a8; }
.hs-onb-input {
  font: 600 15px system-ui, sans-serif; color: #ffe3c4; background: #120b07;
  border: 2px solid #4a2f1c; border-radius: 5px; padding: 8px 10px;
  box-shadow: inset 0 2px 0 rgba(0,0,0,.5);
}
.hs-onb-input:focus { outline: none; border-color: var(--hs-accent); }
.hs-onb-input::placeholder { color: #6e5645; }
.hs-onb-count { font-size: 11px; color: #8d7662; font-variant-numeric: tabular-nums; }
.hs-onb-count.is-over { color: var(--hs-danger); }
/* v0.26.6-rc1 hotfix: the looks still loading / failed (+ "Erneut versuchen") – inside the card area, never a dead end */
.hs-onb-wait { grid-column: 1 / -1; margin: 18px 0; text-align: center; color: #c9ab8c; font-style: italic; font-size: 13px; }
.hs-onb-wait p { margin: 0 0 10px; }
.hs-onb-retry { font-style: normal; }
.hs-onb-error { min-height: 1em; color: #ff7a5c; font-size: 12px; text-align: center; }
.hs-onb-go {
  align-self: center; min-width: 60%; cursor: pointer;
  font: 700 15px Georgia, serif; letter-spacing: .04em; color: #fff4e6;
  padding: 10px 18px; border-radius: 6px; border: 2px solid #120b07;
  background: linear-gradient(180deg, #d4561c, #9c2b12);
  box-shadow: 0 3px 0 #4a130a, inset 0 1px 0 rgba(255,220,180,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  transition: transform .1s ease, filter .15s ease;
}
.hs-onb-go:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.hs-onb-go:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #4a130a; }
.hs-onb-go:disabled { cursor: default; filter: grayscale(.7) brightness(.6); }
@media (prefers-reduced-motion: reduce) { .hs-onb-card, .hs-onb-go { transition: none; } }

/* "Sauber machen" – wipe mini game; the progress panel sits in the sticky top, right under the room */
.hs--cleaning .hs-scene { cursor: none; touch-action: none; }         /* rag instead of the cursor; no scrolling on touch */
.hs--cleaning .hs-actions { opacity: .5; pointer-events: none; }
.hs-rag { position: absolute; left: 0; top: 0; width: 16px; height: 16px; pointer-events: none; z-index: 5;
  image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.5)); }
.hs-rag.is-pressed { filter: drop-shadow(0 0 0 rgba(0,0,0,.5)) brightness(.9); transform-origin: center; }
.hs-dustlayer { position: absolute; inset: 0; pointer-events: none; }
.hs-dust {
  position: absolute; width: 2px; height: 2px; background: #6b5238; box-shadow: 1px 1px 0 #3b2a1c;
  animation: hs-dust 650ms ease-in forwards;
}
.hs-dust:nth-child(3n) { background: #8f7a5a; }
@keyframes hs-dust { to { transform: translate(var(--dx, 0), 14px); opacity: 0; } }
.hs-clean { padding: 6px 8px; }
.hs-clean-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; }
.hs-clean-title { font: 700 13px var(--hs-serif); color: var(--hs-gold-muted); letter-spacing: .03em; }
.hs-clean-bar { height: 10px; background: var(--hs-wood-0); border: 1px solid var(--hs-copper); border-radius: 2px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.6); }
.hs-clean-fill { display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, #e07b2c 0 6px, #c7631d 6px 8px); transition: width .15s linear; }
.hs-clean-pct { font-size: 11px; color: #c9ab8c; font-variant-numeric: tabular-nums; min-width: 3em; text-align: right; }
.hs-clean-hint { margin-top: 4px; font-size: 11px; color: var(--hs-muted); }
@media (prefers-reduced-motion: reduce) { .hs-dust { display: none; } }

/* Visit scenes ------------------------------------------------------------------ */
.hs-guest-fx { position: absolute; width: 0; height: 0; pointer-events: none; }
.hs-emote {
  position: absolute; left: 12px; top: -14px; font-size: calc(15px * var(--hs-inv)); line-height: 1; pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.5));
}
.hs-guest-fx .hs-emote { left: 10px; top: -4px; }
.hs-emote.is-pop { animation: hs-pop 1.9s ease-out; }
@keyframes hs-pop { 0% { transform: scale(.2) translateY(4px); opacity: 0; } 12% { transform: scale(1.25); opacity: 1; } 22% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
.hs-scenebar { padding: 6px 8px; display: grid; gap: 5px; }
.hs-scene-debug { margin: 0; font: 10px/1.35 ui-monospace, monospace; white-space: pre-wrap; opacity: .75; }
.hs-scenebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hs-scenebar-title { font: 700 13px var(--hs-serif); color: var(--hs-gold); letter-spacing: .03em; }
.hs-scenebar-who { font-size: 11.5px; color: #c9ab8c; }
.hs-scenebar-say { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hs-scenebar-label { font-size: 11px; color: var(--hs-faint); margin-right: 2px; }
.hs-chip {
  font: 600 11.5px var(--hs-sans); color: var(--hs-gold-muted); background: var(--hs-wood-0); cursor: pointer;
  border: 1px solid var(--hs-copper); border-radius: 999px; padding: 2px 9px;
}
.hs-chip:hover:not(:disabled) { border-color: var(--hs-accent); color: var(--hs-gold); }
.hs-chip:disabled { opacity: .45; cursor: default; }
/* watching someone else's room: own-room controls step back */
.hs--spectate .hs-actions, .hs--spectate .hs-reports, .hs--spectate .hs-guests,
/* v0.23.0-rc2 Nachbarschaft: the person list + actions step back, the box of the running visit (back / recall) stays */
.hs--spectate .hs-hood .hs-target-search-row, .hs--spectate .hs-hood .hs-target-cards, .hs--spectate .hs-hood .hs-pager, .hs--spectate .hs-hood .hs-target-picked,
.hs--spectate .hs-hood .hs-hood-actions, .hs--spectate .hs-hood .hs-hood-hint,
.hs--spectate .hs-stats, .hs--spectate .hs-btn--edit { display: none !important; }
.hs--spectate .hs-scene { box-shadow: 0 0 0 2px var(--hs-wood-0), 0 0 0 4px var(--hs-accent), 0 3px 0 4px #0a0604; }

/* Wall layer: room background < WALL (decorations, graffiti) < floor objects < pets < front < fx/UI */
.hs-layer--wall { z-index: 0; }
.hs-wallmark { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
/* v0.25.0 compact wall decor: drawn at 2/3 of the PNG (width/height set inline) – nearest neighbour, never smoothed */
.hs-obj--wall, .hs-ghost { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; max-width: none; max-height: none; }
/* editor: where wall items may hang */
.hs-wallzone { position: absolute; left: 0; top: 0; pointer-events: none; box-sizing: border-box; }
.hs-wallzone.is-ok { background: rgba(90, 200, 110, .18); outline: 1px dashed rgba(120, 230, 140, .9); outline-offset: -1px; }
.hs-wallzone.is-forbidden { background: repeating-linear-gradient(45deg, rgba(224, 60, 50, .28) 0 3px, rgba(224, 60, 50, .1) 3px 6px); outline: 1px solid rgba(224, 60, 50, .8); outline-offset: -1px; }

/* Toilet spot (toilet-view.js): used bucket/pot get three little wavy lines; an empty paper toilet is faint */
.hs-obj.is-toilet-empty { opacity: .55; filter: grayscale(.4); }
.hs-toilet-mark { position: absolute; left: 0; top: 0; width: 12px; height: 10px; pointer-events: none; z-index: 900; display: flex; gap: 2px; }
.hs-toilet-mark i { width: 2px; height: 8px; background: #8fa86a; opacity: .7; animation: hs-stink 1.6s ease-in-out infinite; }
.hs-toilet-mark i:nth-child(2) { animation-delay: .4s; }
.hs-toilet-mark i:nth-child(3) { animation-delay: .8s; }
@keyframes hs-stink { 0%, 100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(-3px); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .hs-toilet-mark i { animation: none; } .hs-btn, .hs-card, .hs-ed-item { transition: none; } }

/* Responsive: narrow tiles -------------------------------------------------------- */
@media (max-width: 420px) {
  .hs-top { padding: 8px 8px 6px; }
  .hs-bottom { padding: 8px; }
  .hs-editor-list { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .hs-name { font-size: 15px; }
}

/* ── v0.14 Bekanntschaften (relations-view.js) ───────────────────────────── */
.hs-rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hs-rel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hs-rel-head {
  flex: 1 1 220px; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px;
  background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; color: inherit; font: inherit; cursor: pointer; text-align: left;
}
.hs-rel-head:hover, .hs-rel-row.is-open .hs-rel-head { border-color: rgba(255,106,26,.45); }
.hs-rel-icon { width: 18px; text-align: center; }
.hs-rel-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hs-rel-when { margin-left: auto; color: var(--hs-muted); font-size: .85em; white-space: nowrap; }
.hs-rel-label--buddy, .hs-rel-label--best_buddy { color: #bff0b0; background: #20361c; }
.hs-rel-label--known { color: #d9e6ff; background: #1f2a3c; }
.hs-rel-label--annoyed { color: #ffd59a; background: #3b2a12; }
.hs-rel-label--feud, .hs-rel-label--archenemy { color: #fff; background: var(--hs-danger-bg); }
.hs-rel-detail { flex-basis: 100%; padding: 6px 10px; display: grid; gap: 3px; font-size: .9em; }
.hs-rel-line { color: var(--hs-muted); }
.hs-rel-tags, .hs-rel-admin { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }
.hs-rel-tag { color: #ffb36b; background: #3a2412; }
.hs-rel-counters { font-size: .8em; word-break: break-word; }
.hs-rel-cooldown { white-space: pre-line; font-size: .9em; margin: 2px 0 6px; }
.hs-rel-debug { margin-top: 4px; opacity: .8; }
.hs-rel-debug-title { cursor: pointer; font-size: .8em; }
.hs-rel-empty { color: var(--hs-muted); font-size: .9em; }
.hs-rel-loot { margin-top: 6px; }
.hs-rel-loot-title { font-weight: 700; font-size: .9em; margin-bottom: 2px; }
.hs-rel-loot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .88em; color: var(--hs-muted); }
.hs-rel-loot-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
/* v0.14 Rachezug reveal: the stolen piece above his head (pixel art, no smoothing) */
.hs-carry { position: absolute; left: 0; top: 6px; transform: translateX(-50%); z-index: 2; max-width: 40px; max-height: 32px; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }
/* v0.14: the pile on a used toilet (toilet-view.js) – gone with "Zeitung wegräumen" / "Ausleeren" */
.hs-toilet-pile { position: absolute; left: 0; top: 0; image-rendering: pixelated; pointer-events: none; }
/* v0.15: the catch sheet under a bucket / pot / corner toilet (floor layer, under the toilet and the pets) */
.hs-toilet-underlay { position: absolute; left: 0; top: 0; image-rendering: pixelated; pointer-events: none; }
.hs-toilet-none span { color: #ffb36b; font-weight: 700; }

/* ── v0.15 RAIDS & AUSFLÜGE (raids.js) ─────────────────────────────────── */
.hs-raids > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } /* Nachbesserung: the badge may drop under the title */
/* v0.26.3-rc4 Versorgung & Saustall + Nachbarschaft fold like every main section (<details>, the same ▸ arrow) */
.hs-loo > summary::-webkit-details-marker, .hs-hood > summary::-webkit-details-marker { display: none; }
.hs-loo > summary, .hs-hood > summary { list-style: none; cursor: pointer; }
.hs-loo > summary::before, .hs-hood > summary > .hs-section-title::before { content: '▸'; color: var(--hs-accent); transition: transform .15s; }
.hs-loo[open] > summary::before, .hs-hood[open] > summary > .hs-section-title::before { transform: rotate(90deg); }
.hs-raids > summary::-webkit-details-marker { display: none; }
.hs-raids > summary::before { content: '▸'; color: var(--hs-accent); transition: transform .15s; }
.hs-raids[open] > summary::before { transform: rotate(90deg); }
/* v0.21.0 "Unterwegs · max. 14:23" · Nachbesserung: it was one rigid pill (nowrap, flex: 0 0 auto) and stuck 34 px out of
   a 320-px tile with the large font. Now the head wraps: the pill goes on its own line (right-aligned) when it does not
   fit next to the title, and as a last resort its text may break – it never leaves the tile. */
.hs-raids-badge { margin-left: auto; color: #ffb36b; background: #3a2412; flex: 0 1 auto; min-width: 0; max-width: 100%; text-align: right; overflow-wrap: anywhere; }
.hs-raids-run { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; margin: 6px 0; font-weight: 700; }
.hs-raids-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 6px; }
.hs-raid-card { display: grid; gap: 4px; padding: 8px 10px; border-radius: 6px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.07); }
.hs-raid-card.is-running { border-color: rgba(255,106,26,.6); }
.hs-raid-card.is-highlight { box-shadow: 0 0 0 2px var(--hs-accent); }
.hs-raid-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hs-raid-name { font-weight: 700; }
.hs-raid-desc { color: var(--hs-muted); font-size: .88em; line-height: 1.3; }
.hs-raid-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.hs-raid-status { color: var(--hs-muted); font-size: .85em; }

/* ── v0.16 Hässlons Chronik (chronik-view.js) ──────────────────────────── */
.hs-chronik > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.hs-chronik > summary::-webkit-details-marker { display: none; }
.hs-chronik > summary::before { content: '▸'; color: var(--hs-accent); transition: transform .15s; }
.hs-chronik[open] > summary::before { transform: rotate(90deg); }
.hs-chronik-body { display: grid; gap: 8px; margin-top: 6px; }
.hs-chronik-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hs-chronik-metaitem { display: grid; }
.hs-chronik-metalabel { color: var(--hs-muted); font-size: .8em; }
.hs-chronik-metavalue { font-weight: 700; }
.hs-chronik-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.hs-chronik-tab.is-active { background: var(--hs-accent); color: #1c0e05; border-color: var(--hs-accent); }
.hs-chronik-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.hs-stat-card { padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.07); display: grid; gap: 1px; }
.hs-stat-card-label { color: var(--hs-muted); font-size: .72em; text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; }
.hs-stat-card-value { font-size: 1.35em; font-weight: 700; line-height: 1.1; }
.hs-stat-card-sub { color: #ffb36b; font-size: .72em; font-style: italic; }
.hs-chronik-subtitle { font-weight: 700; margin: 4px 0 2px; }
.hs-chronik-record, .hs-chronik-user { display: grid; gap: 1px; padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.07); }
.hs-chronik-record { grid-template-columns: 1fr auto; gap: 8px; }
.hs-chronik-record-label, .hs-chronik-user-facts { color: var(--hs-muted); font-size: .88em; }
.hs-chronik-user-head { display: flex; align-items: center; gap: 6px; }
.hs-chronik-user-name { font-weight: 700; }
.hs-chronik-foot { display: flex; justify-content: flex-end; }
.hs-chronik-admin summary { cursor: pointer; color: var(--hs-muted); font-size: .85em; }
.hs-chronik-admin-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.hs-chronik-key { width: 160px; } .hs-chronik-val { width: 70px; }
.hs-chronik-raw { overflow-x: auto; overflow-y: visible; /* v0.18.2: no nested vertical scroll */ font-size: .72em; background: rgba(0,0,0,.3); padding: 6px; border-radius: 4px; white-space: pre-wrap; word-break: break-all; }

/* v0.16: newspaper stock in the status bar (click -> "Zeitungen sammeln") ------ */
.hs-badges .hs-news-badge {
  font: inherit; font-size: 11px; line-height: 1.4; padding: 1px 7px; border-radius: 999px; cursor: pointer;
  color: var(--hs-text, #e8dcc8); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  white-space: nowrap;
}
.hs-badges .hs-news-badge:hover, .hs-badges .hs-news-badge:focus-visible { border-color: var(--hs-accent); outline: none; }
.hs-badges .hs-news-badge.is-empty { color: #fff; background: var(--hs-danger); border-color: var(--hs-danger); font-weight: 700; }
/* the name keeps its room; the badges wrap onto a second line instead of squeezing it */
.hs-header .hs-namebox { flex: 0 0 auto; max-width: 50%; }
.hs-header .hs-badges { flex: 1 1 0; min-width: 0; }

/* ── v0.17: status block – newspapers as a row, health, level/XP/power ─────────────── */
button.hs-stat { all: unset; display: grid; grid-template-columns: 70px 1fr 38px; align-items: center; gap: 6px; cursor: pointer; }
button.hs-stat:focus-visible { outline: 1px solid var(--hs-accent); outline-offset: 2px; }
.hs-stat--news .hs-bar-fill { background: linear-gradient(180deg, #d8c9a6, #a8946a); }
.hs-stat--news.is-empty .hs-stat-label, .hs-stat--news.is-empty .hs-stat-val { color: #ff8a70; }
.hs-stat--news .hs-stat-val, .hs-stat--wide .hs-stat-val { white-space: nowrap; }
.hs-stat--wide { grid-template-columns: 70px 1fr 38px; }
.hs-stat--health .hs-bar-fill { background: linear-gradient(180deg, #e0735c, #b1402b); }
.hs-stat--health.hs-stat--critical .hs-stat-label { animation: hs-float 1.6s infinite; }
.hs-level {
  all: unset; grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px;
  cursor: pointer; padding-top: 3px; margin-top: 1px; border-top: 1px solid rgba(91,58,34,.45);
}
.hs-level:focus-visible { outline: 1px solid var(--hs-accent); outline-offset: 2px; }
.hs-level-lv { font: 700 12px var(--hs-serif); color: var(--hs-gold); min-width: 34px; }
.hs-level-bar { height: 6px; }
.hs-level-bar .hs-bar-fill { background: linear-gradient(180deg, #e6c36a, #b0862c); }
.hs-level-xp { font: 600 10.5px var(--hs-sans); color: var(--hs-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-level-power { font: 700 11.5px var(--hs-sans); color: var(--hs-text); white-space: nowrap; }

/* ── v0.17: compact pagination (never a long row of numbers) ─────────────────────── */
.hs-pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 6px; }
.hs-pager[hidden] { display: none; }
.hs-pager-btn {
  min-width: 24px; height: 22px; padding: 0 6px; border-radius: 4px; cursor: pointer;
  font: 600 11px var(--hs-sans); color: var(--hs-muted); background: var(--hs-wood-0); border: 1px solid rgba(91,58,34,.7);
}
.hs-pager-btn:hover:not(:disabled) { color: var(--hs-gold); border-color: var(--hs-copper); }
.hs-pager-btn.is-active { color: var(--hs-gold); border-color: var(--hs-accent); }
.hs-pager-btn:disabled { opacity: .4; cursor: default; }
.hs-pager-info { font: 600 11px var(--hs-sans); color: var(--hs-muted); min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }

/* visit / prank name cards: a fixed grid, at most two rows, then pages */
.hs-target-cards--grid { display: grid; grid-template-columns: repeat(var(--hs-target-cols, 2), minmax(0, 1fr)); }
.hs-target-cards--grid .hs-target { min-width: 0; }
.hs-target-cards--grid:empty { display: none; }

/* relationships: collapsible head with count */
details.hs-rel > summary, .hs-adv > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.hs-rel > summary::-webkit-details-marker, .hs-adv > summary::-webkit-details-marker { display: none; }
details.hs-rel > summary::before, .hs-adv > summary::before { content: '▸'; color: var(--hs-accent); transition: transform .15s; }
details.hs-rel[open] > summary::before, .hs-adv[open] > summary::before { transform: rotate(90deg); }
details.hs-rel[open] > summary { margin-bottom: 6px; }

/* ── v0.17: adventure panel ───────────────────────────────────────────────────── */
.hs-adv-badge.is-new { color: #fff; background: var(--hs-accent); }
.hs-adv-body { display: grid; gap: 7px; margin-top: 6px; }
.hs-adv-summary { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 600 11.5px var(--hs-sans); color: var(--hs-text); }
/* v0.24.0 the status line sits in the section head (second row) – visible open AND folded; plain text, not a title */
.hs-adv > summary { flex-wrap: wrap; }
.hs-adv-status { flex: 1 0 100%; min-width: 0; text-transform: none; letter-spacing: normal; text-shadow: none; font: 600 11.5px/1.3 var(--hs-sans); color: var(--hs-text); }
.hs-adv-status[hidden] { display: none; }
.hs-adv-status .hs-adv-summary { margin: 0; }
/* v0.25.2 the status line sits on ONE line: items centred, the "Stärke" icon centred on its text (it hung below the
   baseline with the generic vertical-align: -3px) – same inline-flex pattern as the other icon + text pairs */
.hs-adv-summary { align-items: center; }
.hs-adv-pow { display: inline-flex; align-items: center; }
.hs-adv-pow .hs-icon { vertical-align: 0; margin-right: 4px; }
.hs-adv-lv { color: var(--hs-gold); font-family: var(--hs-serif); }
.hs-adv-xp { color: var(--hs-muted); }
.hs-adv-hp--low { color: #ffb36b; }
.hs-adv-hp--critical { color: #ff8a70; }
.hs-adv-content { display: grid; gap: 6px; min-width: 0; }
.hs-adv-running, .hs-adv-warn { font-size: 12px; padding: 6px 8px; border-radius: 5px; }
.hs-adv-warn { color: #ffcf9e; background: rgba(160, 70, 20, .25); border: 1px solid rgba(255,138,112,.35); }
.hs-adv-warn--critical { color: #ffb3a3; }
.hs-adv-areas, .hs-adv-gear, .hs-adv-bag, .hs-adv-report-lines, .hs-adv-report-found { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
/* v0.23.0-rc2 COMPACT AREA CHOICE: "Meine Stärke" once; one compact row per area (the row IS the button); only the
   selected area opens its panel (details, strategy choice, Losschicken) – no dropdown, no popup */
.hs-adv-mypower { font: 700 12px var(--hs-serif); color: var(--hs-gold); }
.hs-adv-areas-hint { font-size: 11px; color: var(--hs-muted); font-style: italic; }
.hs-adv-area { display: grid; min-width: 0; border-radius: 6px; background: rgba(0,0,0,.22); border: 1px solid rgba(91,58,34,.5); overflow: hidden; }
.hs-adv-area.is-open { border-color: rgba(232,190,90,.75); background: rgba(0,0,0,.3); box-shadow: inset 3px 0 0 var(--hs-gold); }
.hs-adv-area-head { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; width: 100%; min-width: 0; padding: 7px 9px; }
.hs-adv-area-head:hover { background: rgba(255,255,255,.04); }
.hs-adv-area-head:focus-visible { outline: 2px solid var(--hs-gold); outline-offset: -2px; }
.hs-adv-area-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; min-width: 0; }
.hs-adv-area-name { font: 700 12.5px var(--hs-serif); color: var(--hs-gold); min-width: 0; overflow-wrap: anywhere; }
.hs-adv-area-facts { font-size: 11px; color: var(--hs-muted); }
.hs-adv-diff { font-size: 10px; flex: 0 0 auto; }
.hs-adv-diff--leicht { color: #9fdc8f; }
.hs-adv-diff--mittel { color: #e6c36a; }
.hs-adv-diff--schwer { color: #ffb36b; }
.hs-adv-diff--sehr-schwer { color: #ff8a70; }
.hs-adv-area-panel { display: grid; gap: 5px; min-width: 0; padding: 7px 9px 9px; border-top: 1px solid rgba(91,58,34,.5); }
.hs-adv-area-desc, .hs-adv-area-more, .hs-adv-area-note { font-size: 11px; color: var(--hs-muted); overflow-wrap: anywhere; }
.hs-adv-area-desc { color: var(--hs-text); }
.hs-adv-area-note { font-style: italic; }
.hs-adv-area-risk { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
/* v0.20.0 encounter-chain run: record, strategy, Losschicken, live status */
.hs-adv-area-record { font-size: 11px; color: var(--hs-gold); }
.hs-adv-area-warn { font-size: 11px; color: #ffcf9e; overflow-wrap: anywhere; } /* RC1 (G3) */
.hs-adv-go { display: flex; gap: 6px; min-width: 0; }
.hs-adv-go .hs-btn--adv-start { flex: 1 1 auto; min-height: 32px; }
.hs-strat { display: grid; gap: 4px; min-width: 0; }
.hs-strat-head { font: 700 11.5px var(--hs-serif); color: var(--hs-text); }
.hs-strat-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.hs-strat-opt { all: unset; box-sizing: border-box; display: grid; gap: 1px; align-content: start; min-width: 0; min-height: 34px; padding: 5px 7px; border-radius: 5px; cursor: pointer;
  border: 1px solid rgba(91,58,34,.65); background: rgba(0,0,0,.18); }
.hs-strat-opt:hover { background: rgba(255,255,255,.06); }
.hs-strat-opt:focus-visible { outline: 2px solid var(--hs-gold); outline-offset: 1px; }
.hs-strat-opt.is-selected { border-color: var(--hs-gold); background: rgba(232,190,90,.13); }
.hs-strat-opt.is-disabled { cursor: not-allowed; opacity: .55; }
.hs-strat-opt-name { font: 700 12px var(--hs-serif); color: var(--hs-gold); }
.hs-strat-opt-short { font-size: 10.5px; color: var(--hs-muted); overflow-wrap: anywhere; }
.hs-strat-help { display: grid; gap: 1px; font-size: 10.5px; color: var(--hs-muted); overflow-wrap: anywhere; padding: 4px 6px; border-radius: 4px; background: rgba(0,0,0,.18); }
.hs-strat-help.is-unavailable { color: #ffcf9e; }.hs-adv-running--run { display: grid; gap: 4px; }
.hs-adv-run-head { font-weight: 700; }
.hs-adv-run-meta, .hs-adv-run-pct { font-size: 11px; color: var(--hs-muted); }
.hs-adv-run-bar { height: 6px; border-radius: 3px; background: rgba(0,0,0,.35); overflow: hidden; }
.hs-adv-run-fill { height: 100%; background: var(--hs-gold); transition: width .4s ease; }
.hs-adv-run-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 11px; overflow-wrap: anywhere; }
.hs-tip-special { color: #8fc3ff; }
.hs-adv-risk { font-size: 10px; }
.hs-adv-risk--low .hs-adv-risk { color: #9fdc8f; }
.hs-adv-risk--medium .hs-adv-risk { color: #e6c36a; }
.hs-adv-risk--high .hs-adv-risk { color: #ffb36b; }
.hs-adv-risk--extreme .hs-adv-risk { color: #ff8a70; }
.hs-adv-slot, .hs-adv-bag-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; padding: 4px 6px; border-radius: 4px; background: rgba(0,0,0,.18); }
.hs-adv-slot-text { display: grid; gap: 1px; min-width: 0; }
.hs-adv-slot-name { font-size: 10.5px; color: var(--hs-muted); text-transform: uppercase; letter-spacing: .06em; }
.hs-adv-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.hs-adv-qty { color: var(--hs-muted); font-variant-numeric: tabular-nums; }
.hs-adv-bonus { font-size: 10.5px; color: #9fdc8f; }
.hs-adv-parts { font-size: 11px; display: grid; gap: 1px; }
.hs-adv-part { color: var(--hs-text); }
.hs-adv-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.hs-adv-filters .hs-chip { border-color: rgba(91,58,34,.8); color: var(--hs-muted); background: var(--hs-wood-0); }
.hs-adv-filters .hs-chip.is-active { border-color: var(--hs-accent); color: var(--hs-gold); }
.hs-rarity--common { color: var(--hs-text); }
.hs-rarity--uncommon { color: #9fdc8f; }
.hs-rarity--rare { color: #8fc3ff; }
.hs-rarity--epic { color: #e6a3ff; }
.hs-rarity--none { color: var(--hs-faint); }

/* ── v0.17.1 "Aussehen": owned cosmetics, compact grid (3 per row, 2 rows per page) ─────── */
.hs-looks > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.hs-looks > summary::-webkit-details-marker { display: none; }
.hs-looks > summary::before { content: '▸'; color: var(--hs-accent); transition: transform .15s; }
.hs-looks[open] > summary::before { transform: rotate(90deg); }
.hs-looks-body { display: grid; gap: 8px; margin-top: 6px; }
.hs-looks-slot { display: grid; gap: 5px; }
.hs-looks-slot-title { font: 600 11px var(--hs-sans); color: var(--hs-muted); text-transform: uppercase; letter-spacing: .06em; }
.hs-looks-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.hs-looks-card { display: grid; gap: 1px; padding: 5px 6px; text-align: left; min-width: 0; border-width: 1px; }
.hs-looks-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-looks-rarity { font-size: 10px; color: var(--hs-muted); }
.hs-looks-rarity--rare { color: #8fc3ff; }
.hs-looks-rarity--very_rare { color: #e6a3ff; }
.hs-looks-rarity--legendary { color: #ffd166; }
.hs-looks-worn { font-size: 10px; color: #9fdc8f; }
.hs-looks-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hs-looks-preview { font-size: 12px; color: var(--hs-gold); margin-right: auto; }
/* v0.24.0 GRUNDAUSSEHEN – the base look: picture cards (the sprite at 1:1, never squeezed), 2 per row on small widths */
.hs-looks-base-hint { font-size: 11px; }
.hs-looks-base-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; }
.hs-looks-base-card { justify-items: center; text-align: center; padding: 4px 4px 5px; }
.hs-looks-base-card .hs-looks-name { max-width: 100%; }
.hs-looks-base-pic { display: block; width: 80px; height: 80px; flex: 0 0 auto; }
.hs-looks-base-pic img { display: block; width: 80px; height: 80px; image-rendering: pixelated; }
.hs-looks-base-blurb { font-size: 10px; color: var(--hs-muted); line-height: 1.25; overflow-wrap: anywhere; }
.hs-looks-base-card[aria-disabled="true"] { opacity: .7; cursor: progress; }
@media (max-width: 300px) { .hs-looks-base-grid { grid-template-columns: minmax(0, 1fr); } }
/* 30.10.2026 Farben (test phase): one swatch row per part */
.hs-looks-tint-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 4px 0; min-width: 0; }
.hs-looks-tint-label { flex: 0 0 100%; font: 600 11px/1.3 var(--hs-sans); color: var(--hs-muted); }
.hs-looks-swatch { width: 26px; height: 26px; padding: 0; border: 2px solid #3a2216; border-radius: 6px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.hs-looks-swatch:hover, .hs-looks-swatch:focus-visible { outline: 2px solid var(--hs-copper-hi); outline-offset: 1px; }
.hs-looks-swatch.is-on { border-color: var(--hs-gold); outline: 2px solid var(--hs-gold); outline-offset: 1px; cursor: default; }
.hs-looks-swatch:disabled { opacity: .6; cursor: progress; }

/* ── v0.17.2 Hässlon icons (registry: icons/registry.js). Real PNGs pixel-sharp; placeholders small + muted ── */
.hs-icon { display: inline-block; vertical-align: -3px; margin-right: 5px; flex: none; image-rendering: pixelated; }
img.hs-icon { object-fit: contain; }
.hs-icon--glyph { line-height: 1; font-style: normal; filter: saturate(.75); }
.hs-stat-label { display: inline-flex; align-items: center; min-width: 0; white-space: nowrap; }
.hs-stat, button.hs-stat, .hs-stat--wide { grid-template-columns: 84px 1fr 38px; }
.hs-stat:not(.hs-stat--wide):not(.hs-stat--news) { grid-template-columns: 84px 1fr 26px; }
.hs-tab .hs-icon, .hs-chip .hs-icon { margin-right: 4px; }

/* v0.17.3 painted icons (batch 01): 64 px art shown at 16–20 px – smooth downscaling looks cleaner than pixelated */
img.hs-icon { image-rendering: auto; filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)); }
.hs-section-title img.hs-icon, .hs-raid-name img.hs-icon { vertical-align: -7px; margin: -3px 6px -3px 0; }
.hs-tab img.hs-icon { vertical-align: -4px; }

/* ── v0.18 Klogang + newspapers grouped in the status block ─────────────────────────────── */
.hs-stat-group--loo {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 3px 12px;
  padding: 3px 6px; margin: 1px -6px 0; border-radius: 5px;
  background: rgba(181, 138, 74, .10); box-shadow: inset 0 0 0 1px rgba(181, 138, 74, .28);
}
.hs-stat--klogang.hs-stat--critical .hs-bar-fill { background: linear-gradient(180deg, #e0604c, #a8301f); }
.hs-stat--klogang.hs-stat--critical .hs-stat-label { color: #ff8a70; animation: hs-float 1.6s infinite; }

/* ── v0.18 KLO & SAUSTALL panel (loo-view.js) ─────────────────────────────────────────── */
.hs-loo[hidden] { display: none; }
.hs-loo-body { display: flex; flex-direction: column; gap: 6px; }
.hs-loo-values { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hs-loo-chip { font: 600 11.5px var(--hs-sans); padding: 2px 7px; border-radius: 4px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(91,58,34,.45); font-variant-numeric: tabular-nums; }
.hs-loo-kg.is-warn { color: #ffb36b; box-shadow: inset 0 0 0 1px rgba(216,138,58,.7); }
.hs-loo-kg.is-critical { color: #ff8a70; box-shadow: inset 0 0 0 1px rgba(224,96,76,.85); }
.hs-loo-np.is-empty { color: #ff8a70; }
.hs-loo-warn { font: 600 11px var(--hs-sans); color: #ffb36b; }
.hs-loo-warn.is-critical { color: #ff8a70; }
.hs-loo-spot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12px; }
.hs-loo-spot-none { color: var(--hs-gold); }
.hs-loo-spot-state.is-ready { color: #86cf78; }
.hs-loo-spot-state.is-used { color: #ffb36b; }
.hs-loo-spot-state.is-partial { color: #d8c46a; } /* v0.25.2 used, room left on the sheet */
.hs-loo-fill { margin-left: 6px; font-size: 11.5px; color: var(--hs-muted); }
.hs-loo-fill.is-full { color: #ffb36b; font-weight: 600; }
.hs-loo-nopaper { color: #ff8a70; }
/* v0.26.5-rc2 Zeitungslager line (V2 view only – the element never exists for legacy) */
.hs-loo-store { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px; font-size: 11.5px; line-height: 1.3; }
.hs-loo-store-over { color: #ffb36b; }
.hs-loo-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hs-loo-running { font-size: 12px; padding: 3px 8px; border-radius: 4px; }
.hs-loo-piles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hs-loo-pile { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.hs-loo.is-highlight { outline: 2px solid var(--hs-gold); outline-offset: 1px; }

/* ── v0.21.0 VERSORGUNG & SAUSTALL (supply-view.js) – the same panel (.hs-loo), now three foldable sections:
   Napf & Essen · Kloplatz & Zeitungen · Saustall & Aufräumen. Food comes first and reads a little stronger; an urgent
   Klogang marks only ITS section (before v0.21 the whole panel glowed). Sizes follow the panel's own width. ── */
.hs-loo { container: hssup / inline-size; }
.hs-sup-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; }
.hs-sup-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.hs-sup-chip { font-size: 12px; color: var(--hs-gold); box-shadow: inset 0 0 0 1px rgba(181,138,74,.6); }
.hs-sup-chip--bowl.is-warn { color: #ff8a70; box-shadow: inset 0 0 0 1px rgba(224,96,76,.85); }
.hs-sup-group--loo .hs-loo-chip { font-size: 11px; }
.hs-sup-acc { display: grid; gap: 4px; }
.hs-sup-sec { border-radius: 6px; background: rgba(0,0,0,.2); box-shadow: inset 0 0 0 1px rgba(91,58,34,.5); min-width: 0; }
.hs-sup-sec.is-open { background: rgba(0,0,0,.26); }
.hs-sup-sec.is-warn { box-shadow: inset 0 0 0 1px rgba(216,138,58,.6); }
.hs-sup-sec.is-critical { box-shadow: inset 0 0 0 1px rgba(224,96,76,.8); }
.hs-sup-head {
  all: unset; box-sizing: border-box; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--hs-text);
}
.hs-sup-head::before { content: '▸'; color: var(--hs-accent); transition: transform .15s; flex: 0 0 auto; }
.hs-sup-head[aria-expanded="true"]::before { transform: rotate(90deg); }
.hs-sup-head:hover { background: rgba(91,58,34,.22); }
.hs-sup-head:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: -1px; }
.hs-sup-title { font: 700 12px/1.25 var(--hs-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--hs-gold-muted); }
.hs-sup-sec--bowl .hs-sup-title { color: var(--hs-gold); }
.hs-sup-title img.hs-icon { vertical-align: -4px; margin: -2px 5px -2px 0; }
.hs-sup-status { margin-left: auto; font: 600 11px/1.25 var(--hs-sans); color: var(--hs-muted); text-align: right; min-width: 0; }
.hs-sup-sec.is-good .hs-sup-status { color: #86cf78; }
.hs-sup-sec.is-mid .hs-sup-status, .hs-sup-sec.is-warn .hs-sup-status { color: #ffb36b; }
.hs-sup-sec.is-critical .hs-sup-status { color: #ff8a70; }
.hs-sup-panel { padding: 2px 8px 8px; display: grid; gap: 6px; min-width: 0; }
.hs-sup-panel[hidden], .hs-sup-slot[hidden], .hs-fill-host[hidden] { display: none; }
.hs-sup-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hs-sup-bowlrow { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; }
.hs-sup-bowl-label { font-weight: 700; color: var(--hs-gold-muted); }
.hs-sup-bowlbar .hs-bar-fill { background: linear-gradient(180deg, #e6c36a, #b0862c); }
.hs-sup-bowl-val { font: 600 11.5px var(--hs-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* v0.26.6-rc1-polish1 NAPF V2: "Im Napf: 2× Brotkanten, 1× Käserinde" under the bar; the value line may wrap on a phone */
.hs-sup-bowlrow .hs-sup-bowl-inside { grid-column: 1 / -1; font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
@media (max-width: 420px) { .hs-sup-bowl-val { white-space: normal; text-align: right; } }
.hs-sup-facts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; }
.hs-sup-fact { font-variant-numeric: tabular-nums; }
.hs-sup-fact.is-sated { color: #86cf78; }
.hs-sup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hs-sup-alert { font-size: 12px; font-weight: 600; color: #ff8a70; }
/* v0.26.3-rc4 no bowl placed: a small empty state instead of the bowl bar + "Napf füllen" (no warning box) */
.hs-sup-nobowl { display: grid; gap: 1px; padding: 2px 0; }
.hs-sup-nobowl-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.hs-sup-nobowl-title { font-size: 13px; font-weight: 600; }
.hs-sup-nobowl-hint { font-size: 12px; line-height: 1.35; }
.hs-sup-chip--bowl.is-none { opacity: .8; }
.hs-sup-why { font-size: 11.5px; color: #ffb36b; }
.hs-sup-hint { font-size: 11px; }
.hs-sup-note { font-size: 12px; color: #86cf78; }
/* v0.22.0 SAUSTALL & AUFRÄUMEN – the one list of everything to clean up (own piles, Kloplatz, door piles, scribbles).
   Narrow tiles: the label takes the row, the button wraps under it, right-aligned – never sideways. */
.hs-mess-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; }
.hs-mess-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 8px; font-size: 12px; min-width: 0; }
.hs-mess-label { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.hs-mess-row > .hs-btn { margin-left: auto; }
.hs-mess-pager { margin-top: 2px; }
.hs-sup-empty { font-size: 12px; }
/* v0.21.0 AUFRÄUM-QUEUE – the order list in the docking slot of "Saustall & Aufräumen" (cleanup-view.js).
   Narrow tiles (320 / 360 px): the label takes the free row, state + "Rausnehmen" wrap below it – never sideways. */
.hs-sup-slot { min-width: 0; }
.hs-cq { display: grid; gap: 5px; padding: 6px 8px; min-width: 0; border: 1px solid rgba(214, 178, 110, .28); border-radius: 6px; background: rgba(0, 0, 0, .16); }
.hs-cq-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.hs-cq-title { font: 700 12px/1.2 var(--hs-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--hs-gold); }
.hs-cq-count { font-size: 11px; }
.hs-cq-hint { font-size: 11px; }
.hs-cq-wait { font-size: 11.5px; color: #ffb36b; overflow-wrap: anywhere; }
/* v0.26.7-proto3 ALS NÄCHSTES: the one action that waits for the list */
.hs-cq-next { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: #ffd56b; min-width: 0; }
.hs-cq-next-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hs-cq-next-cancel { flex: 0 0 auto; }
.hs-cq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; }
.hs-cq-row { display: grid; gap: 3px; min-width: 0; padding: 3px 0; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 12px; }
.hs-cq-row:first-child { border-top: 0; }
.hs-cq-main { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.hs-cq-pos { flex: none; font: 700 11.5px var(--hs-sans); font-variant-numeric: tabular-nums; color: var(--hs-gold-muted); white-space: nowrap; }
.hs-cq-label { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.hs-cq-state { flex: none; font-size: 11.5px; white-space: nowrap; opacity: .8; }
.hs-cq-row.is-running .hs-cq-state { color: #86cf78; opacity: 1; font-weight: 600; }
.hs-cq-row.is-paused .hs-cq-state { color: #ffb36b; opacity: 1; }
.hs-cq-remove { flex: none; padding: 2px 8px; font-size: 11px; }
.hs-cq-bar { height: 5px; }
.hs-cq-bar .hs-bar-fill { transition: width .5s linear; }
.hs-cq-row.is-paused .hs-cq-bar .hs-bar-fill { background: linear-gradient(180deg, #d8a45a, #9c6a24); }
/* where "Wegmachen" stood: the state of its queued task */
.hs-btn.is-queued, .hs-btn.is-queued:disabled { opacity: 1; cursor: default; font-style: italic; white-space: nowrap; border-style: dashed; color: var(--hs-gold-muted); background: transparent; }
.hs-btn.is-queued[data-queued="running"] { color: #86cf78; font-style: normal; }
.hs-door-list li { flex-wrap: wrap; }
.hs-door-list li > span { min-width: 0; flex: 1 1 140px; overflow-wrap: anywhere; }
.hs-loo-pile { flex-wrap: wrap; }
/* "Napf füllen" – food, pieces, the numbers before anything happens */
.hs-fill { display: grid; gap: 6px; padding: 8px; font-size: 12px; min-width: 0; }
.hs-fill-title { font: 700 12.5px/1.2 var(--hs-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--hs-gold); }
.hs-fill-label { font-weight: 700; color: var(--hs-gold-muted); }
.hs-fill-foods { display: grid; gap: 3px; }
.hs-fill-food {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1px 8px; padding: 4px 6px; border-radius: 5px; cursor: pointer; min-width: 0;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.07);
}
.hs-fill-food:hover { border-color: var(--hs-copper-hi); }
.hs-fill-food.is-selected { border-color: rgba(255,106,26,.65); background: rgba(255,106,26,.07); }
.hs-fill-food:has(input:focus-visible) { outline: 2px solid var(--hs-accent); outline-offset: 1px; }
.hs-fill-food input { margin: 0; flex: 0 0 auto; }
.hs-fill-food-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.hs-fill-food.is-off .hs-fill-food-name { color: var(--hs-muted); }
.hs-fill-food-val { color: var(--hs-gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-fill-food-fit { font-size: 11px; white-space: nowrap; min-width: 4.6em; text-align: right; }
.hs-fill-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.hs-fill-stepper { display: inline-flex; align-items: center; gap: 3px; }
.hs-fill .hs-fill-step { min-width: 26px; height: 26px; padding: 0 7px; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.hs-fill .hs-fill-max { font-size: 11px; }
.hs input.hs-fill-num { width: 3.4em; height: 26px; padding: 0 2px; text-align: center; font: 700 12.5px var(--hs-sans); color: #ffe3c4; min-width: 0;
  background: var(--hs-wood-0); border: 1px solid #4a2f1c; border-radius: 5px; box-shadow: inset 0 2px 0 rgba(0,0,0,.5); -moz-appearance: textfield; appearance: textfield; }
.hs input.hs-fill-num::-webkit-outer-spin-button, .hs input.hs-fill-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hs input.hs-fill-num:focus { outline: none; border-color: var(--hs-accent); box-shadow: inset 0 2px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(255,106,26,.3); }
.hs-fill-of { margin-left: 3px; white-space: nowrap; }
.hs-fill-rows { margin: 0; display: grid; gap: 2px; padding: 5px 7px; border-radius: 5px; background: var(--hs-wood-0); box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.hs-fill-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hs-fill-row dt { color: var(--hs-muted); }
.hs-fill-row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hs-fill-row--after dd { color: #86cf78; }
.hs-fill-row--after.is-refused dd { color: #ffb36b; }
.hs-fill-why { font-size: 11.5px; color: #ffb36b; }
.hs-fill-why.is-error { color: #ff8a70; font-weight: 600; }
.hs-fill-why[hidden] { display: none; }
.hs-fill-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
@container hssup (max-width: 420px) { /* phone-sized tiles: every food row is name + value, "passt n×" on its own line */
  .hs-fill-food { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hs-fill-food-fit { grid-column: 2 / -1; text-align: left; min-width: 0; }
}
@container hssup (max-width: 260px) { /* 320-px tile with the large font option (zoom 1.3): name, value, "passt n×" stacked */
  .hs-fill-food { grid-template-columns: auto minmax(0, 1fr); }
  .hs-fill-food-val, .hs-fill-food-fit { grid-column: 2; }
}
@container hssup (max-width: 330px) { /* the 320-px tile (panel ~300 px inside) */
  .hs-sup-chip { font-size: 11.5px; }
  .hs-sup-title { font-size: 11.5px; letter-spacing: .05em; }
  .hs-sup-head { padding: 6px; }
  .hs-sup-panel { padding: 2px 6px 7px; }
  .hs-fill { padding: 7px 6px; }
}
/* (E1) the Satt note in the status block, right after "Leben" */
.hs-sated { display: flex; align-items: center; justify-self: start; align-self: center; position: relative; cursor: help; max-width: 100%;
  font: 600 11px/1.3 var(--hs-sans); color: #a5e495; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(70,120,58,.22); box-shadow: inset 0 0 0 1px rgba(111,194,101,.5); }
.hs-sated[hidden] { display: none; }
.hs-sated img.hs-icon { vertical-align: -3px; margin-right: 4px; }
/* the empty Kloplatz: a faint dashed mark on the floor (only where no newspaper lies yet) */
.hs-toilet-anchor { position: absolute; left: 0; top: 0; width: 26px; height: 12px; border: 1px dashed rgba(230, 200, 140, .55); border-radius: 50%; pointer-events: none; }
/* editor: the Kloplatz entry (its own mode – the newspaper is no furniture) */
.hs-ed-spot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 6px; margin-bottom: 6px; border-radius: 5px; background: rgba(181,138,74,.10); box-shadow: inset 0 0 0 1px rgba(181,138,74,.28); font-size: 12px; }
.hs-ed-spot-label { color: var(--hs-gold); margin-right: auto; }

/* ── v0.25.2 FUNKTIONS-SLOT (slot-view.js): the Klo card + the "Klo wechseln" picker ───────────────────────────── */
.hs-slot { flex: 1 1 100%; display: grid; gap: 4px; margin-top: 4px; padding: 6px 7px; border-radius: 5px; background: rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px rgba(181,138,74,.28); }
.hs-slot-title { font: 700 11px/1.2 var(--hs-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--hs-gold); }
.hs-slot-body { display: flex; align-items: center; gap: 8px; }
.hs-slot-pic { flex: 0 0 48px; height: 44px; display: grid; place-items: center; border-radius: 4px; background: rgba(0,0,0,.22); }
.hs-slot-pic img { max-width: 44px; max-height: 40px; image-rendering: pixelated; }
.hs-slot-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; line-height: 1.3; }
.hs-slot-name { font-weight: 700; color: #ffe3c4; overflow-wrap: anywhere; }
.hs-slot-tier { font-size: 11px; font-weight: 600; color: #b9a98f; }
.hs-slot-tier.is-uncommon { color: #86cf78; }
.hs-slot-tier.is-rare { color: #6fb2ff; }
.hs-slot-tier.is-epic { color: #c88cff; }
.hs-slot-effect { color: #e9d8bf; }
.hs-slot-fill { font-weight: 700; color: #e9d8bf; }
.hs-slot-fill.is-full { color: #ffb36b; }
.hs-slot-hint { font-size: 11.5px; }
.hs-slot-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-slot-picker-host { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(12,7,4,.62); }
.hs-slot-picker { width: min(100%, 360px); padding: 8px; font-family: var(--hs-sans); } /* no own scroll area (one scroll owner) – a few toilets fit */
.hs-slot-picker-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.hs-slot-picker-note { margin-bottom: 6px; font-size: 12px; color: #ffb36b; }
.hs-slot-picker-list { display: grid; gap: 6px; }
.hs-slot-option { display: flex; align-items: center; gap: 8px; padding: 6px; }
.hs-slot-option .hs-slot-info { flex: 1 1 auto; }
.hs-slot-active { font: 700 11px/1 var(--hs-sans); letter-spacing: .08em; color: #86cf78; }
.hs-editor--spot .hs-ed-chips, .hs-editor--spot .hs-ed-owned, .hs-editor--spot .hs-ed-unknown, .hs-editor--spot .hs-editor-progress, .hs-editor--spot .hs-ed-remove, .hs-editor--spot .hs-ed-save { display: none; }

/* ── v0.18.1 head status pictures (head-status.js) – size follows the old emoji size (incl. neglect levels) ── */
.hs-flags { display: flex; gap: 1px; align-items: center; }
.hs-flags img.hs-icon { width: 1.8em; height: 1.8em; margin: 0 -1px; vertical-align: middle; }
.hs-loo-chip .hs-icon { vertical-align: -3px; margin-right: 4px; }

/* ── v0.18.4 OPTIONEN: font size + speech bubble size (options.js) ────────────────────────────
   ONE variable: --hs-font-scale (1 / 1.15 / 1.3) zooms every text area of the widget – NOT the room stage
   (the pixel art keeps its whole-number zoom). Text wraps; the host still scrolls (no inner scrollbar). */
.hs { --hs-font-scale: 1; --hs-bubble-scale: 1; }
.hs-header, .hs-options, .hs-stats, .hs-clean, .hs-scenebar, .hs-status, .hs-bottom { zoom: var(--hs-font-scale); }
.hs-btn--options { margin-left: auto; padding: 3px 9px; font-size: 11.5px; }
/* v0.24.0 HÄSSLON-HILFE: the button sits left of "Optionen" (it takes the auto margin then) */
.hs-btn--help { margin-left: auto; padding: 3px 9px; font-size: 11.5px; }
.hs-header .hs-btn--help + .hs-btn--options { margin-left: 4px; }
.hs-help { display: grid; gap: 6px; padding: 8px; min-width: 0; }
.hs-help-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hs-help-title { margin: 0; }
.hs-help-searchrow { display: grid; gap: 3px; min-width: 0; }
.hs-help-label { font-size: 11px; color: var(--hs-muted); }
.hs-help-search { width: 100%; min-width: 0; box-sizing: border-box; }
.hs-help-count { font-size: 11px; min-height: 1em; }
.hs-help-list { display: grid; gap: 4px; min-width: 0; }
.hs-help-cat { min-width: 0; }
.hs-help-cat-head { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 8px; text-align: left;
  background: rgba(0,0,0,.18); border: 1px solid #4a2f1c; border-radius: 5px; color: var(--hs-gold); font: 700 12.5px/1.25 var(--hs-sans); cursor: pointer; }
.hs-help-cat-head::before { content: '▸'; color: var(--hs-accent); margin-right: 2px; transition: transform .15s; }
.hs-help-cat.is-open > .hs-help-cat-head::before { transform: rotate(90deg); }
.hs-help-cat-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hs-help-cat-count { flex: 0 0 auto; font-weight: 400; font-size: 11px; }
.hs-help-cat-label { font: 600 11px var(--hs-sans); color: var(--hs-muted); text-transform: uppercase; letter-spacing: .06em; margin: 4px 0 2px; }
.hs-help-qs { list-style: none; margin: 3px 0 0; padding: 0 0 0 6px; display: grid; gap: 2px; }
.hs-help-q { display: block; width: 100%; text-align: left; padding: 5px 6px; background: none; border: 0; border-radius: 4px; color: var(--hs-text);
  font: 600 12.5px/1.3 var(--hs-sans); cursor: pointer; overflow-wrap: anywhere; }
.hs-help-q::before { content: '› '; color: var(--hs-accent); }
.hs-help-q[aria-expanded="true"] { background: rgba(232,194,106,.10); color: var(--hs-gold); }
.hs-help-q:hover { background: rgba(255,255,255,.05); }
.hs-help-a { padding: 2px 8px 8px 14px; font-size: 12.5px; line-height: 1.4; display: grid; gap: 6px; justify-items: start; min-width: 0; }
.hs-help-a[hidden] { display: none; }
.hs-help-a p { margin: 0; overflow-wrap: anywhere; }
.hs-btn--help-go { margin-top: 2px; max-width: 100%; white-space: normal; text-align: left; }
.hs-help-none { font-size: 12.5px; padding: 6px 2px; overflow-wrap: anywhere; }
.hs-help-unavailable { font-size: 11.5px; }
/* "Hier ist es." – a calm frame for ~2 s, no blinking */
.hs-help-flash { outline: 2px solid var(--hs-gold); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(232,194,106,.25); transition: outline-color .4s, box-shadow .4s; }
@media (prefers-reduced-motion: reduce) { .hs-help-flash, .hs-help-cat-head::before { transition: none; } }
.hs-header .hs-btn--options + .hs-btn--edit { margin-left: 4px; }
.hs-options { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.hs-opt-title { margin: 0; }
.hs-opt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.hs-opt-label { min-width: 9em; color: var(--hs-gold-muted); font-size: 12px; }
.hs-opt-choices { display: flex; flex-wrap: wrap; gap: 4px; }
.hs-opt-reset { align-self: flex-start; }
.hs-header { flex-wrap: wrap; row-gap: 4px; }
/* speech bubbles: medium / large are really bigger (padding, radius, font) and wrap instead of one long line */
.hs[data-bubble="medium"] .hs-bubble, .hs[data-bubble="medium"] .hs-gbubble,
.hs[data-bubble="large"] .hs-bubble, .hs[data-bubble="large"] .hs-gbubble {
  font-size: calc(12px * var(--hs-inv) * var(--hs-bubble-scale));
  padding: calc(4px * var(--hs-inv) * var(--hs-bubble-scale)) calc(9px * var(--hs-inv) * var(--hs-bubble-scale));
  border-radius: calc(8px * var(--hs-inv) * var(--hs-bubble-scale));
  white-space: normal; width: max-content; max-width: 240px; line-height: 1.3; text-wrap: pretty;
}
.hs[data-bubble="large"] .hs-bubble, .hs[data-bubble="large"] .hs-gbubble { max-width: 280px; }
.hs[data-bubble="medium"] .hs-bubble::after, .hs[data-bubble="large"] .hs-bubble::after,
.hs[data-bubble="medium"] .hs-gbubble::after, .hs[data-bubble="large"] .hs-gbubble::after {
  width: calc(7px * var(--hs-inv) * var(--hs-bubble-scale)); height: calc(7px * var(--hs-inv) * var(--hs-bubble-scale));
}

/* ── v0.18.4 status bar colours (bar-tone.js): green = good · yellow/orange = middle · red = bad ───────── */
.hs .hs-stat.hs-tone--good .hs-bar-fill { background: linear-gradient(180deg, #86cf78, #4f9a45); }
.hs .hs-stat.hs-tone--mid .hs-bar-fill { background: linear-gradient(180deg, #f0c85a, #c98a22); }
.hs .hs-stat.hs-tone--bad .hs-bar-fill, .hs .hs-stat.hs-tone--critical .hs-bar-fill { background: linear-gradient(180deg, #e0604c, #a8301f); }
.hs .hs-stat.hs-tone--good .hs-stat-label { color: var(--hs-gold-muted); }
.hs .hs-stat.hs-tone--bad .hs-stat-label, .hs .hs-stat.hs-tone--critical .hs-stat-label { color: #ff8a70; }
.hs .hs-stat.hs-tone--critical .hs-stat-label { animation: hs-float 1.6s infinite; }

/* v0.18.4 ADVENTURE ITEM TOOLTIP – hover, keyboard focus, tap (li.is-tip-open). Text wraps; never wider than the row. */
.hs-has-tip { position: relative; flex-wrap: wrap; }
button.hs-adv-item--tip { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: help; }
button.hs-adv-item--tip:focus-visible { outline: 2px solid #e8c26a; outline-offset: 2px; border-radius: 2px; }
.hs-adv-tip { display: none; position: absolute; left: 4px; right: 4px; top: calc(100% + 2px); z-index: 30; padding: 6px 8px;
  border-radius: 6px; background: #1d1712; border: 1px solid rgba(232,194,106,.55); box-shadow: 0 4px 12px rgba(0,0,0,.5);
  font-size: 12px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; pointer-events: none; }
.hs-has-tip:has(:focus-visible) > .hs-adv-tip, .hs-has-tip.is-tip-open > .hs-adv-tip { display: block; } /* polish3: keyboard focus only */
@media (hover: hover) { .hs-has-tip:hover > .hs-adv-tip { display: block; } } /* polish3: no sticky touch hover */
.hs-has-tip:hover, .hs-has-tip:has(:focus-visible), .hs-has-tip.is-tip-open { z-index: 31; }
.hs-tip-name { font-weight: 700; }
.hs-tip-meta { opacity: .75; font-size: 11px; margin-bottom: 3px; }
.hs-tip-desc { font-style: italic; }
.hs-tip-bonus { margin-top: 3px; color: #b9e27a; }

/* v0.18.4 sleeping badge in the visit / prank target list */
.hs-target.is-sleeping { position: relative; }
.hs-target-zzz { position: absolute; top: -7px; right: 4px; font-size: 9px; line-height: 12px; font-weight: 700; letter-spacing: -.3px;
  color: #b9c8ff; background: #1f1a2e; border: 1px solid rgba(159,183,255,.5); border-radius: 6px; padding: 0 4px; white-space: nowrap; pointer-events: none; }
.hs-target.is-sleeping .hs-target-av { opacity: .7; }
/* v0.18.4 options: the chosen size is clearly marked */
.hs-options .hs-chip.is-active, .hs-options .hs-chip[aria-pressed="true"] { border-color: var(--hs-accent); color: var(--hs-gold); background: rgba(232,194,106,.18); box-shadow: inset 0 0 0 1px var(--hs-accent); }
/* v0.18.4 a big bubble that would not fit into a small room steps down for this one line (widget fitBubble) */
.hs .hs-bubble[data-fit="medium"], .hs .hs-gbubble[data-fit="medium"] { --hs-bubble-scale: 1.25; }
.hs .hs-bubble[data-fit="small"], .hs .hs-gbubble[data-fit="small"] { --hs-bubble-scale: 1; }
/* v0.18.4 large text in a narrow tile: grids and tool rows shrink instead of pushing out sideways */
.hs-raids-cards { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.hs-reveal-test { flex-wrap: wrap; max-width: 100%; }


/* v0.18.5 merchant: an event banner, sell marks, the sale report */
.hs-adv-wallet { color: var(--hs-gold); font-size: 11px; }
.hs-adv-merchant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; padding: 6px 8px; border-radius: 6px;
  background: rgba(0,0,0,.18); border: 1px dashed rgba(232,194,106,.25); font-size: 12px; }
.hs-adv-merchant.is-here { border-style: solid; border-color: var(--hs-accent); background: rgba(232,194,106,.08); }
.hs-adv-merchant-state { flex: 1 1 12em; min-width: 0; }
.hs-adv-merchant.is-here .hs-adv-merchant-state { color: var(--hs-gold); font-weight: 700; }
.hs-deal--great > div:first-child { color: #b9e27a; }
.hs-deal--ripoff > div:first-child { color: #f0a080; }
.hs-adv-bag-row.is-sell-marked { box-shadow: inset 2px 0 0 var(--hs-accent); }
.hs-adv-selltag { font-size: 10px; padding: 0 4px; border-radius: 4px; border: 1px solid rgba(232,194,106,.5); color: var(--hs-gold-muted); }
.hs-btn--adv-mark { font-size: 10.5px; padding: 2px 6px; white-space: nowrap; }
.hs-btn--adv-mark.is-on { border-color: var(--hs-accent); }
/* v0.21.0 (G3) "Zum Verkauf: N" – a small stepper in the inventory row: [−] [N] [+] von 10 [Alle].
   The row may wrap: on a narrow tile (320 / 360 px) the stepper drops under the item name, right-aligned. */
.hs-adv-bag-row { flex-wrap: wrap; row-gap: 4px; }
.hs-adv-bag-row > .hs-adv-item { flex: 1 1 7em; min-width: 0; text-align: left; overflow-wrap: anywhere; }
/* Nachbesserung: the stepper was one rigid, unbreakable line (flex: none) – wider than a 320 / 360-px tile with a larger
   font, so the list grew past the tile edge and "x12" read "x1". Now: the list column can not grow with its content,
   the stepper may shrink and wrap, and on a narrow row its label goes on a line of its own (container query on the row). */
.hs-adv-bag { grid-template-columns: minmax(0, 1fr); }
.hs-adv-bag-row { container: hsbag / inline-size; }
/* v0.22.0 HANDEL tab – rules ("Behalten: [−] [X] [+]") and the sales plan. Rows wrap; nothing is wider than the tile. */
.hs-adv-selltag.is-refused { border-style: dashed; color: var(--hs-muted); cursor: help; white-space: nowrap; }
.hs-btn--adv-tradelink { font-size: 10.5px; padding: 1px 6px; }
.hs-trade-intro { font-size: 11px; margin: 0 0 6px; overflow-wrap: anywhere; }
.hs-trade-sum { display: grid; gap: 2px; padding: 6px 8px; margin-bottom: 8px; font-size: 11.5px; overflow-wrap: anywhere; }
.hs-trade-sum-items, .hs-trade-sum-value { font-weight: 700; color: var(--hs-gold); }
.hs-trade-note { font-size: 10.5px; }
.hs-trade-head { font: 700 11px var(--hs-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--hs-muted); margin: 8px 0 4px; }
.hs-trade-none { font-size: 11px; }
.hs-trade-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.hs-trade-row { position: relative; display: grid; gap: 4px; padding: 5px 7px; border: 1px solid #3a2415; border-radius: 6px; min-width: 0; }
.hs-trade-row.is-active { box-shadow: inset 2px 0 0 var(--hs-accent); }
.hs-trade-top, .hs-trade-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-width: 0; font-size: 11px; }
.hs-trade-top > .hs-adv-item { flex: 1 1 7em; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.hs-trade-stock { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--hs-muted); }
.hs-trade-sellable.is-on, .hs-trade-total { color: var(--hs-gold-muted); font-weight: 700; }
.hs-trade-facts > .hs-btn { margin-left: auto; }
.hs-trade-wait { font-size: 10.5px; }
.hs-btn--trade-remove { justify-self: end; font-size: 10.5px; padding: 1px 7px; }
.hs-btn--trade-enable { font-size: 10.5px; padding: 1px 7px; }
.hs-trade-keep { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; font-size: 11px; color: var(--hs-gold-muted); }
.hs-trade-keep-label { margin-right: 4px; white-space: nowrap; font-weight: 700; }
.hs-trade-keep .hs-trade-step { min-width: 26px; height: 26px; padding: 0 5px; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.hs input.hs-trade-num { width: 3.6em; height: 26px; padding: 0 2px; text-align: center; font: 700 12px var(--hs-sans); color: var(--hs-gold); min-width: 0;
  background: var(--hs-wood-0); border: 1px solid var(--hs-accent); border-radius: 5px; box-shadow: inset 0 2px 0 rgba(0,0,0,.5);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.hs input.hs-trade-num::-webkit-outer-spin-button, .hs input.hs-trade-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hs input.hs-trade-num:focus { outline: none; box-shadow: inset 0 2px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(255,106,26,.3); }
/* while the stepper is used (hover / focus) the item tooltip stays away – it would cover the next row */
.hs-has-tip > .hs-trade-keep:hover ~ .hs-adv-tip, .hs-has-tip > .hs-trade-keep:focus-within ~ .hs-adv-tip { display: none; }
/* v0.21.0 (G4) the merchant's reaction bubble in the hub (what he bought / refused) – a little wider, his colours */
.hs-hub-bubble--merchant { max-width: 220px; background: #ffe9b0; border-color: #8a5a1c; font-weight: 600; }
.hs-hub-wrap.is-small .hs-hub-bubble--merchant { max-width: 170px; }

/* v0.18.6 time of what others left behind (central formatter time-format.js) */
.hs-when { color: var(--hs-muted); font-size: .92em; white-space: nowrap; }

/* v0.18.6 the thief's note on the floor + the note window */
.hs-theft-note { position: absolute; left: 0; top: 0; width: 14px; height: 10px; padding: 0; border: 1px solid #6b5436; border-radius: 1px;
  background: repeating-linear-gradient(to bottom, #f4ead2 0 2px, #d9c9a4 2px 3px); transform-origin: center; cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.45); transform: translate(var(--nx, 0px), var(--ny, 0px)) rotate(-8deg); }
.hs-theft-note:not(.is-read)::after { content: ''; position: absolute; right: -3px; top: -3px; width: 4px; height: 4px; border-radius: 50%; background: #e24a2a; }
.hs-theft-note:hover, .hs-theft-note:focus-visible { outline: 1px solid var(--hs-gold); transform: translate(var(--nx, 0px), var(--ny, 0px)) rotate(0deg); }
/* v0.26.6-rc1 RETOURPOST: a newspaper parcel that came back – room pixels, "KLICK MICH" tag */
.hs-return-parcel { position: absolute; left: 0; top: 0; width: 20px; height: 14px; padding: 0; border: 1px solid #5a5040; border-radius: 1px; cursor: pointer;
  background: #ddd5bf repeating-linear-gradient(0deg, #0000 0 2px, #6b624f40 2px 3px); box-shadow: 0 1px 0 rgba(0,0,0,.5);
  transform: translate(var(--nx, 0px), var(--ny, 0px)) rotate(-4deg); }
.hs-return-parcel::before { content: ''; position: absolute; left: 8px; top: -1px; width: 3px; height: 14px; background: #b8904a; }
.hs-return-parcel .hs-parcel-tag { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 2px; white-space: nowrap; font: 700 5px/1 sans-serif;
  color: #1c130b; background: #ffd66b; border: 1px solid #1c130b; border-radius: 1px; padding: 1px 2px; animation: hsParcelBob 1.4s infinite; pointer-events: none; }
@keyframes hsParcelBob { 50% { transform: translateX(-50%) translateY(-2px); } }
.hs-return-parcel:hover, .hs-return-parcel:focus-visible { outline: 1px solid var(--hs-gold); }
.hs-return-parcel.is-opening { animation: hsParcelOpen .6s forwards; }
@keyframes hsParcelOpen { 40% { transform: translate(var(--nx, 0px), var(--ny, 0px)) rotate(8deg) scale(1.2); } to { transform: translate(var(--nx, 0px), var(--ny, 0px)) scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hs-return-parcel .hs-parcel-tag, .hs-return-parcel.is-opening { animation: none; } }
.hs-btn--mess-alt { margin-left: 4px; }
.hs-note-dialog { max-width: min(320px, 92%); }
.hs-note-row { display: grid; grid-template-columns: 7em 1fr; gap: 4px 8px; margin: 3px 0; font-size: 12.5px; }
.hs-note-label { font-weight: 700; color: var(--hs-gold-muted); letter-spacing: .03em; }
.hs-note-value { overflow-wrap: anywhere; }
.hs-note-plan { margin: 8px 0 4px; padding: 6px 8px; background: #f4ead2; color: #2a1b0f; border-radius: 3px; transform: rotate(-.6deg); }
.hs-note-plan .hs-note-label { color: #6b4a22; }
.hs-note-plantext { font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 13px; }
.hs-note-home .hs-note-value { color: #b9e27a; font-weight: 700; }
.hs-note-recover { width: 100%; margin-top: 6px; }
.hs-note-block { font-size: 12px; color: #f0b27a; margin-top: 4px; }

/* v0.18.6 status tooltips (hover / keyboard focus / tap) */
.hs-has-stattip { position: relative; }
.hs-has-stattip:focus-visible { outline: 2px solid #e8c26a; outline-offset: 1px; border-radius: 3px; }
.hs-stat-tipbox { display: none; position: absolute; left: 0; top: calc(100% + 3px); z-index: 40; width: max-content; max-width: min(260px, 80vw);
  padding: 6px 8px; border-radius: 6px; background: #1d1712; border: 1px solid rgba(232,194,106,.55); box-shadow: 0 4px 12px rgba(0,0,0,.5);
  font-size: 12px; line-height: 1.35; font-weight: 400; color: #f1e4c8; white-space: pre-line; text-align: left; pointer-events: none; }
/* polish3: keyboard focus (:focus-visible) – a mouse / touch focus no longer keeps a tip open after the pointer left */
.hs-has-stattip:focus-visible > .hs-stat-tipbox, .hs-has-stattip:has(:focus-visible) > .hs-stat-tipbox, .hs-has-stattip.is-tip-open > .hs-stat-tipbox { display: block; }
/* hover only where a real pointer hovers – a phone's "sticky hover" after a tap would keep the tip open (a 2nd tap
   could not close it); touch uses the tap toggle (.is-tip-open) */
@media (hover: hover) { .hs-has-stattip:hover > .hs-stat-tipbox { display: block; } }
.hs-level .hs-has-stattip { cursor: help; }
.hs-level-power .hs-stat-tipbox, .hs-level-xp .hs-stat-tipbox { left: auto; right: 0; }
/* v0.26.6-rc1-polish3 ONE TOOLTIP (tooltip.js): a host's own gold box stays closed while a descendant with its own tip
   (another host or a converted title) is the hover / focus target – the nearest tip wins, never two at once */
.hs-has-stattip:has(.hs-has-stattip:hover, [data-hs-tip]:hover, [data-own-tip]:hover) > .hs-stat-tipbox,
.hs-has-tip:has(.hs-has-tip:hover, [data-hs-tip]:hover, [data-own-tip]:hover) > .hs-adv-tip { display: none !important; }
/* the floating gold tooltip for every former native title – same look as the status / item tips, fixed to the viewport
   (placed + clamped by tooltip.js), never takes the pointer (no flicker) */
.hs-tipfloat { position: fixed; z-index: 2147483000; left: 0; top: 0; max-width: min(280px, calc(100vw - 16px)); box-sizing: border-box;
  padding: 6px 8px; border-radius: 6px; background: #1d1712; border: 1px solid rgba(232,194,106,.55); box-shadow: 0 4px 12px rgba(0,0,0,.5);
  font: 400 12px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; color: #f1e4c8; white-space: pre-line; overflow-wrap: break-word; text-align: left; pointer-events: none; }
.hs-tipfloat[hidden] { display: none; }

/* v0.18.7 Raumlog "Was war hier los?" – collapsed by default, newest at the bottom, no own scroll area */
.hs-roomlog { margin: 6px 0; padding: 4px 8px; font-size: 12px; }
.hs-roomlog-head { cursor: pointer; font-weight: 700; list-style-position: inside; }
.hs-roomlog-unread { margin-left: 4px; font-size: 10px; font-weight: 600; opacity: .85; }
.hs-roomlog-list { list-style: none; margin: 4px 0; padding: 0; }
.hs-roomlog-row { padding: 1px 0; line-height: 1.35; overflow-wrap: anywhere; }
.hs-roomlog-time { opacity: .6; font-variant-numeric: tabular-nums; }
.hs-roomlog-who { font-weight: 700; }
.hs-roomlog--act, .hs-roomlog--event { font-style: italic; opacity: .9; }
.hs-roomlog-empty { opacity: .6; font-style: italic; }
.hs-roomlog-tools { display: flex; gap: 6px; justify-content: flex-end; }
.hs--editing .hs-roomlog, .hs--spectate .hs-roomlog { display: none; }

/* v0.18.7 bubble manager: guest bubbles live in the fx layer (above every figure / name tag); a tag in the way yields */
.hs-gbubble--fx { position: absolute; left: 0; top: 0; }
.hs-guest-tag.is-yielding { visibility: hidden; }
.hs-perf { margin: 6px 0; padding: 4px 8px; font-size: 11px; }
.hs-perf summary { cursor: pointer; opacity: .8; }
.hs-perf-body { margin: 4px 0 0; font: 10px/1.4 ui-monospace, monospace; white-space: pre-wrap; }

/* v0.18.7 Füttern-Auswahl (real food, one piece) */
.hs-feed-pick { margin: 6px 0; padding: 6px 8px; display: grid; gap: 6px; font-size: 12px; }
.hs-feed-head { font-weight: 700; }
.hs-feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hs-feed-item { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1px 8px; text-align: left; } /* v0.21.0 wraps on a 320-px tile (name · +value · words) */
.hs-feed-effect { font-size: 11px; white-space: nowrap; margin-left: auto; }
.hs-feed-value { color: var(--hs-gold); font-weight: 700; font-variant-numeric: tabular-nums; } /* v0.21.0 (B) the real number */
.hs-feed-none { font-weight: 700; }
.hs-feed-cancel { justify-self: end; }
.hs-tip-food { margin-top: 3px; opacity: .9; }

/* v0.18.7 Menü-Reihenfolge: only the ORDER changes (DOM order) – widths / wrapping stay with the layout above */
.hs-order-bar { display: inline-flex; gap: 3px; margin-left: auto; padding-left: 6px; }
.hs-order-bar .hs-btn { min-width: 26px; padding: 2px 6px; }
.hs-order-handle { cursor: grab; touch-action: none; }
.hs--arranging .hs-bottom > .is-dragging { outline: 2px dashed var(--hs-accent, #d9a441); opacity: .85; }
.hs--arranging .hs-bottom > details > summary { cursor: default; }
.hs-opt-order { gap: 6px; flex-wrap: wrap; }

/* ── v0.18.7 BERICHTE: ONE viewer, ONE parchment card for all four report types ─────────────────────────────────
   Every report type uses exactly these classes (reports-view.js reportCardEl). The type modifiers
   (.hs-report--general / --adventure / --visitor / --trade) only set the accent colour (seal, title, thin edge) –
   never the paper, the layout, the spacing or the font sizes. No fixed width: the card grows with its content. */
/* v0.22.0 the fold triangle of BERICHTE – the same one (and the same <details> mechanism) as Raids, Abenteuer, Chronik … */
.hs-reports > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.hs-reports > summary::-webkit-details-marker { display: none; }
.hs-reports > summary::before { content: '▸'; color: var(--hs-accent); transition: transform .15s; }
.hs-reports[open] > summary::before { transform: rotate(90deg); }
.hs-reports-badge { margin-left: 6px; font-size: 10px; opacity: .85; }
.hs-report-tabs { margin: 4px 0 6px; }
.hs-report-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.hs-report-open { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
  padding: 5px 8px; border-radius: 4px; background: rgba(239, 224, 194, .06); color: var(--hs-text, #eadcc4); }
.hs-report-open:hover, .hs-report-open:focus-visible { background: rgba(239, 224, 194, .12); outline: 1px solid rgba(232, 194, 106, .45); }
.hs-report-row-icon { font-size: 12px; }
.hs-report-when { font-size: 11px; color: #cdb99a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hs-report-row-title { font: 700 12px var(--hs-serif); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-report-row.is-unread .hs-report-row-title { color: var(--hs-gold, #f3c46b); }
/* v0.21.0 (G1/G2) trade rows say what was sold ("Hub · 3× Beleidigter Zweig für 6 Kupfer") – up to two lines, so a narrow tile still shows item + price */
.hs-report--trade .hs-report-row-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; letter-spacing: 0; }
.hs-report-new { font-size: 10px; padding: 0 5px; border-radius: 3px; border: 1px solid currentColor; color: var(--hs-gold, #f3c46b); }
.hs-report-empty { padding: 6px 0; }
.hs-report-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 8px; margin: 4px 0; font-size: 12px; }

.hs-report-card {
  --hs-report-accent: #7a5a2e;
  --hs-report-ink: #2f1f10; --hs-report-ink-soft: #5b4128;
  position: relative; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%;
  display: grid; gap: 8px; padding: 10px 12px 12px;
  background: linear-gradient(180deg, #f4e7cb 0%, #ecdbb8 100%);            /* opaque parchment – the room never shows through */
  color: var(--hs-report-ink); font: 12.5px/1.5 var(--hs-serif);
  border-radius: 4px; border-left: 3px solid var(--hs-report-accent);
  box-shadow: 0 2px 0 rgba(0,0,0,.55), inset 0 0 0 1px rgba(90, 60, 30, .35), inset 0 0 22px rgba(140, 100, 50, .22);
  overflow-wrap: anywhere; word-break: normal;
}
.hs-report--general { --hs-report-accent: #7a5a2e; }
.hs-report--adventure { --hs-report-accent: #8a3a22; }
.hs-report--visitor { --hs-report-accent: #2f5a7a; }
.hs-report--trade { --hs-report-accent: #8a6a14; }
.hs-report-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hs-report-date { font: 11px var(--hs-sans, sans-serif); color: var(--hs-report-ink-soft); font-variant-numeric: tabular-nums; }
.hs-report-header { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(90, 60, 30, .35); }
.hs-report-seal { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; line-height: 1;
  background: #fbf3e0; box-shadow: inset 0 0 0 2px var(--hs-report-accent); }
.hs-report-titles { min-width: 0; }
.hs-report-title { margin: 0; font: 700 14px/1.25 var(--hs-serif); letter-spacing: .04em; text-transform: uppercase; color: var(--hs-report-accent); }
.hs-report-sub { font-size: 11.5px; color: var(--hs-report-ink-soft); font-style: italic; }
.hs-report-body { display: grid; gap: 8px; }
.hs-report-section { display: grid; gap: 3px; }
.hs-report-h { margin: 0; font: 700 11.5px var(--hs-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--hs-report-ink-soft); }
/* v0.21.0-rc1 the three parts of an adventure report (Aufbruch · Unterwegs · Rückkehr / Ergebnis) */
.hs-report-h--group { font-size: 12.5px; color: var(--hs-report-ink, inherit); border-top: 1px solid currentColor; padding-top: 6px; opacity: .9; }
.hs-report-p { margin: 0; }
.hs-report-p.is-closing, .hs-report-quote { font-style: italic; }
.hs-report-p.is-strong { font-weight: 700; }
.hs-report-p.is-muted, .hs-report-list .is-muted { color: var(--hs-report-ink-soft); }
.hs-report-list { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.hs-report-list li::marker { color: var(--hs-report-accent); }
.hs-report-list .is-bad { color: #8a2a14; }
.hs-report-list .is-talk { font-style: italic; }
.hs-report-note { font-size: 11.5px; color: var(--hs-report-ink-soft); }
.hs-report-quote { margin: 0; padding-left: 8px; border-left: 2px solid rgba(90, 60, 30, .35); }
.hs-report-card .hs-rarity--common { color: var(--hs-report-ink); }
.hs-report-card .hs-rarity--uncommon { color: #2f6b2a; }
.hs-report-card .hs-rarity--rare { color: #245a9a; }
.hs-report-card .hs-rarity--epic { color: #7a2f99; }
.hs-report-special { padding: 6px 8px; border-radius: 4px; background: rgba(176, 134, 44, .16); border: 1px dashed rgba(120, 80, 20, .55); display: grid; gap: 2px; }
.hs-report-special-h { font: 700 11.5px var(--hs-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--hs-report-accent); }
.hs-report-special--cosmetic { background: rgba(230, 163, 255, .16); border-color: rgba(122, 47, 153, .5); }
/* v0.20.0 encounter-chain report */
.hs-report-special--record { background: rgba(214, 160, 40, .28); border-style: solid; border-color: rgba(150, 100, 10, .7); }
.hs-report-special--record .hs-report-special-h { font-size: 13px; color: #7a4a00; }
.hs-report-list .is-strong { font-weight: 700; }
.hs-report-list .is-hit { color: var(--hs-report-ink-soft); }
.hs-report-list .is-mini { font-style: italic; }
.hs-report-list .is-loot { font-weight: 600; }
.hs-report-sig { margin-top: 2px; padding-top: 6px; border-top: 1px dashed rgba(90, 60, 30, .35); font-style: italic; color: var(--hs-report-ink-soft); }
.hs-report-sig-name { font-family: "Comic Sans MS", "Comic Neue", cursive; font-size: 1.1em; color: var(--hs-report-ink); transform: rotate(-2deg); transform-origin: left center; display: inline-block; }
.hs-report-sig-name s { opacity: .6; }
.hs-report-foot { display: flex; justify-content: flex-end; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(90, 60, 30, .25); }
/* buttons on the parchment stay clearly buttons (dark wood on light paper) */
.hs-report-card .hs-btn { color: #fbeed2; }
.hs-report-delete { background: #6e2a17; }

.hs--editing .hs-reports { display: none; }
/* v0.18.7 hotfix: while dragging a section – no text selection, no scroll gesture, the dragged part clearly marked */
.hs--dragging, .hs--dragging * { user-select: none; cursor: grabbing; }
.hs--arranging .hs-bottom > .is-dragging { position: relative; z-index: 2; box-shadow: 0 6px 16px rgba(0,0,0,.55); }
.hs--arranging .hs-bottom > .is-dragging::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 3px; border-radius: 2px; background: var(--hs-accent, #d9a441); }

/* ── v0.19.0 HUB – a PLACE: replaces the room at the same spot; compact bar, map first ─────────────────────────── */
/* v0.19.0 hotfix: [Zimmer] [Hub · 5/8] – two views of the same main area, directly at the scene (not in the status) */
.hs-viewtabs { display: flex; gap: 0; margin: 2px 0 4px; border-bottom: 1px solid var(--hs-border); }
.hs-viewtab { font: inherit; font-size: 12px; font-weight: 700; line-height: 18px; padding: 3px 12px; cursor: pointer; white-space: nowrap;
  color: var(--hs-muted); background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 7px 7px 0 0; margin-bottom: -1px; }
.hs-viewtab:hover { color: #ffcf8a; }
.hs-viewtab.is-active { color: #ffcf8a; background: var(--hs-panel); border-color: var(--hs-border); }
.hs-viewtab--hub.is-full { color: #ff9a6b; }
.hs-hubscene { display: flex; flex-direction: column; gap: 4px; }
.hs-hub-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 26px; }
.hs-hub-title { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hs-accent); }
.hs-hub-count { font-weight: 700; }
.hs-hub-count::before, .hs-hub-time::before { content: '· '; color: var(--hs-muted); font-weight: 400; }
.hs-hub-count.is-full { color: #ff9a6b; }
.hs-hub-time { font-size: 12px; color: var(--hs-muted); }
.hs-hub-bar-actions { margin-left: auto; display: flex; gap: 6px; }
.hs-hub-merchant-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 12px; line-height: 16px; color: #ffcf8a; }
.hs-hub-merchant-main { font-weight: 700; min-width: 0; } /* Nachbesserung: was nowrap – "Lumpensammler · 29:55 · bedient gerade …" stuck 26 px out of a 320-px tile */
.hs-hub-merchant-bonus { color: var(--hs-muted); }
.hs-hub-host { position: relative; width: 100%; }
.hs-hub-target-hint { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 5; pointer-events: none; width: max-content; max-width: 92%; text-align: center;
  font-size: 12px; font-weight: 700; color: #2a1a0c; background: #ffcf8a; border-radius: 8px; padding: 2px 8px; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.hs-hub-social { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hs-hub-say.is-active { outline: 2px solid var(--hs-accent); background: #3a2412; }
.hs-hub-wrap { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--hs-border); border-radius: 8px;
  background: radial-gradient(ellipse at 50% 60%, #2b3a22 0%, #1b1712 78%); --hub-inv: 1; }
.hs-hub-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; image-rendering: pixelated; }
.hs-hub-ground { position: absolute; left: 0; top: 0; z-index: 0; image-rendering: pixelated; }
/* real PixelLab props: placed by the map's anchors (hub-art.js), y-sorted via z-index = front corner of the footprint */
.hs-hub-prop { position: absolute; left: 0; top: 0; line-height: 0; pointer-events: none; visibility: hidden; }
.hs-hub-prop.is-loaded { visibility: visible; }
.hs-hub-prop-img { display: block; image-rendering: pixelated; transform-origin: 50% 50%; }
.hs-hub-prop.is-fallback { visibility: visible; font-size: 30px; line-height: 1; margin: -30px 0 0 -15px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.hs-hub-actor, .hs-hub-merchant { position: absolute; left: 0; top: 0; will-change: transform; }
.hs-hub-actor.is-target { cursor: crosshair; }
.hs-hub-actor.is-target .hs-sprite { filter: drop-shadow(0 0 2px var(--hs-accent)) drop-shadow(0 0 4px var(--hs-accent)); }
.hs-hub-actor.is-target::before { content: ''; position: absolute; left: 40px; top: 66px; width: 46px; height: 16px; transform: translate(-50%, -50%);
  border: 2px solid var(--hs-accent); border-radius: 50%; pointer-events: none; }
.hs-hub-stage.is-targeting .hs-hub-actor.is-self { opacity: .6; }
/* label layer: names + bubbles above every prop; counter-scaled, so on screen they keep their size on small tiles */
.hs-hub-labels { position: absolute; left: 0; top: 0; z-index: 5000; pointer-events: none; }
.hs-hub-label { position: absolute; left: 0; top: 0; will-change: transform; }
/* v0.22.0 a permanent NPC name tag (the Lumpensammler) lives in the STAGE at its NPC's depth (z-index set by hub-view.js),
   not in the label layer: a Hässlon in front of him covers the tag, never the other way round */
.hs-hub-label--depth { pointer-events: none; }
.hs-hub-name { position: absolute; left: 0; top: 2px; transform: translateX(-50%) scale(var(--hub-inv)); transform-origin: 50% 0; white-space: nowrap;
  max-width: 11em; overflow: hidden; text-overflow: ellipsis;
  font-size: 10px; line-height: 13px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); padding: 0 4px; border-radius: 5px; }
.hs-hub-label.is-self .hs-hub-name { color: #ffcf8a; }
.hs-hub-label--merchant .hs-hub-name { color: #2a1a0c; background: #e8c77a; }
.hs-hub-stage.is-targeting .hs-hub-label.is-target .hs-hub-name { pointer-events: auto; cursor: crosshair; outline: 2px solid var(--hs-accent); }
.hs-hub-bubble { position: absolute; left: 0; bottom: calc(var(--hub-head, 66px) + 2px); transform: translateX(-50%) scale(var(--hub-inv)); transform-origin: 50% 100%;
  max-width: 180px; width: max-content; font-size: 12px; line-height: 1.25; color: #2a1a0c; background: #fbeed2; border: 1px solid #6b4a2b;
  border-radius: 8px; padding: 3px 7px; }
.hs-hub-wrap.is-small .hs-hub-bubble { max-width: 150px; font-size: 11px; }
.hs-hub-wrap.is-small .hs-hub-name { max-width: 9em; }
.hs-hub-label--merchant .hs-hub-name, .hs-hub-wrap.is-small .hs-hub-label--merchant .hs-hub-name { max-width: none; }
/* 0.27.0-alpha2 (was: small tile only) EVERY name tag is hidden by default – no wall of overlapping names at the campfire.
   Pointer / keyboard focus on the figure (.is-hover), talking (.is-speaking) and an open dialog (.is-selected) show it;
   in target mode every possible target shows its name again (tap the name or the Hässlon) */
.hs-hub-name { transition: opacity .12s ease-out, visibility .12s; }
.hs-hub-label:not(.is-hover):not(.is-speaking):not(.is-selected) .hs-hub-name { opacity: 0; visibility: hidden; }
.hs-hub-wrap .hs-hub-stage.is-targeting .hs-hub-label.is-target .hs-hub-name { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .hs-hub-name { transition: none; } }
.hs-version { margin-top: 6px; text-align: right; font-size: 11px; color: var(--hs-muted); }
/* v0.19.0 visit / prank targets: what he does, until when, guests */
.hs-target-status { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; line-height: 14px; color: var(--hs-muted); }
.hs-target-status > span { white-space: nowrap; }
/* v0.20.0 visit / prank lists: status bubbles on the card edge, the name alone in its field.
   v0.21.0 (M) the search is no longer right of the title: it sits CENTRED on its own row above the target list
   (.hs-target-search-row); the title row keeps the title alone (+ the order bar while arranging). */
.hs-target-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.hs-target-head .hs-panel-h { flex: 0 0 auto; white-space: nowrap; margin-bottom: 0; } /* the title never gets cut */
.hs-target-search-row { display: flex; justify-content: center; min-width: 0; } /* no height of its own: a hidden field leaves no gap */
.hs-target-search { flex: 0 1 220px; width: 220px; max-width: 100%; min-width: 70px; min-height: 28px; margin-top: 6px; padding: 3px 7px; font-size: 12px; box-sizing: border-box; }
.hs-target-search[hidden] { display: none; }
.hs-target-head + .hs-target-cards, .hs-target-search-row + .hs-target-cards { margin-top: 12px; }
.hs-target-cards--grid { row-gap: 12px; }
.hs-target { position: relative; min-height: 32px; }
.hs-target-name { flex: 1 1 auto; min-width: 0; text-align: left; }
/* Nachbesserung: time + guests bubbles did not fit on a narrow card ("⚔️ max. 15 min" + "👥 2" need ~120 px, a card has
   102 … 157) – the guests bubble was cut off. Now the card is a size container and the ACTIVITY bubble gets shorter
   step by step when guests are shown next to it: first without "max.", then the symbol alone. The full text
   ("spätestens …") stays in the tooltip, the card's title and the "Ausgewählt" line (ui-kit.js targetStatusText). */
.hs-target-cards--grid .hs-target { container: hstarget / inline-size; }
/* v0.26.5-rc2 BADGES INSIDE THE CARD (was: absolute at top -8 px – the badges hung half over the card's top edge, between
   two rows, and looked detached from their person). Now every card is a small grid: avatar | name, and – when the person
   has a status – a RESERVED status row under the name, inside the card and inside the click target. The name keeps the
   whole width of its row (ellipsis only when it really does not fit); rows of the grid stretch to the same height.
   Visit and prank use the same component (ui-kit.js targetCards) – one fix for both. */
.hs-target { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av name"; align-items: center; column-gap: 6px; row-gap: 2px; padding: 4px 8px 4px 4px; text-align: left; }
.hs-target.has-bubbles { grid-template-areas: "av name" "av status"; }
.hs-target > .hs-target-av { grid-area: av; }
.hs-target > .hs-target-name { grid-area: name; display: block; }
.hs-target-cards--grid { align-items: stretch; }
.hs-target-bubbles { position: static; grid-area: status; display: flex; gap: 3px; max-width: 100%; min-width: 0; overflow: hidden; pointer-events: none; }
.hs-target-zzz { top: auto; right: auto; }
.hs-target-bubbles > * { flex: none; }
.hs-target-bubbles > .hs-target-act { flex: 0 1 auto; min-width: 0; overflow: hidden; } /* the last resort: the time gives way, never the guests */
/* widths = the card's CONTENT box (card − 14 px); the row may use content + 6. Measured: "⚔️ max. 15 min" 85, "⚔️ 15 min"
   58, "⚔️ max. 1 h 29 min" 103, "⚔️ 1 h 29 min" 76, guests up to "👥 999" 43, gap 3 – plus 6 px for other emoji fonts. */
@container hstarget (max-width: 130px) { .hs-target-act.with-guests .hs-target-max { display: none; } }
@container hstarget (max-width: 103px) { .hs-target-act.with-guests .hs-target-time { display: none; } }
@container hstarget (max-width: 148px) { .hs-target-act.with-guests.is-long .hs-target-max { display: none; } }
@container hstarget (max-width: 121px) { .hs-target-act.with-guests.is-long .hs-target-time { display: none; } }
.hs-target-bubbles .hs-target-zzz { position: static; }
.hs-target-bubble { font-size: 9.5px; line-height: 12px; white-space: nowrap; color: var(--hs-text); background: #2a1d12; border: 1px solid rgba(200,150,80,.55); border-radius: 6px; padding: 0 4px; }
.hs-target-bubble.hs-target-guests { color: #cfe3ff; border-color: rgba(159,183,255,.5); background: #1f1a2e; }
.hs-target-picked { margin: 2px 0 4px; font-size: 11.5px; color: var(--hs-gold); overflow-wrap: anywhere; }
.hs-target-picked[hidden] { display: none; }
/* RC1 (U1) while arranging, the title row carries the order bar (the search steps aside) */
.hs--arranging .hs-target-search-row .hs-target-search { display: none; }
.hs-target-head .hs-order-bar { margin-left: auto; }
/* RC1 (U2) the status bubbles take the pointer again: the zzzZZZ / activity tooltip is reachable (a click still picks the card) */
.hs-target-bubbles { pointer-events: auto; }
/* RC1 (U12) "Niemand mit diesem Namen." uses the whole row of the card grid */
.hs-target-cards--grid > .hs-muted { grid-column: 1 / -1; }
@media (max-width: 380px) { .hs-hub-time { flex-basis: 100%; order: 3; } .hs-hub-time::before { content: none; } }
/* v0.19.0 the real Lumpensammler (64 × 64 human NPC, 1×, crisp; never scaled with smoothing) */
.hs-hub-merchant-img { display: block; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; pointer-events: none; }

/* ── v0.25.3 HANDEL V1 – THE LUMPENSAMMLER (lumpen-view.js; modal in the style of the Klo-Slot picker) ───────────── */
.hs-hub-merchant.is-clickable { cursor: pointer; }
.hs-hub-merchant.is-clickable:hover .hs-hub-merchant-img, .hs-hub-merchant.is-clickable:focus-visible .hs-hub-merchant-img { filter: drop-shadow(0 0 3px #ffcf8a); }
.hs-hub-label--depth.is-clickable .hs-hub-name { pointer-events: auto; cursor: pointer; }
.hs-hub-merchant.is-inspecting .hs-hub-merchant-img { animation: hs-lumpen-lean 1.4s ease-in-out infinite; transform-origin: 50% 95%; }
.hs-hub-actor.is-nervous .hs-sprite { animation: hs-lumpen-bob .22s ease-in-out infinite alternate; }
.hs-hub-merchant-line .hs-btn--lumpen { margin-left: auto; }
.hs-hub-merchant-line.is-thinking .hs-hub-merchant-main { color: #ffe2a8; }
.hs-adv-lumpen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hs-adv-lumpen-thinking { flex-basis: 100%; }

.hs-lumpen-host { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(12,7,4,.62); }
.hs-lumpen { width: min(100%, 380px); padding: 8px; /* no own scroll area (one scroll owner): the basket pages instead */ font-family: var(--hs-sans); display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; }
.hs-lumpen-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hs-lumpen-always { color: var(--hs-good); font-size: 12px; font-weight: 400; }
.hs-lumpen-top { display: flex; align-items: center; gap: 8px; }
.hs-lumpen-merchant { position: relative; display: inline-block; width: 64px; height: 64px; flex: none; }
.hs-lumpen-merchant-img { display: block; image-rendering: pixelated; transform-origin: 50% 95%; }
.hs-lumpen-wallet { font-size: 12.5px; color: var(--hs-gold-muted); }
.hs-lumpen-wallet.is-counting { color: #ffe08a; font-weight: 700; }
.hs-lumpen-head { font-weight: 700; color: var(--hs-gold); font-size: 13px; }
.hs-lumpen-none, .hs-lumpen-away { font-size: 12.5px; line-height: 1.4; }
.hs-lumpen-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hs-lumpen-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid rgba(138,85,48,.45); border-radius: 6px; background: rgba(0,0,0,.18); }
.hs-lumpen-row.is-picked { border-color: var(--hs-gold); background: rgba(255,179,107,.08); }
.hs-lumpen-row.is-off { opacity: .55; }
.hs-lumpen-icon { font-size: 16px; text-align: center; }
.hs-lumpen-info { display: flex; flex-direction: column; min-width: 0; }
.hs-lumpen-name { font-size: 12.5px; overflow-wrap: anywhere; }
.hs-lumpen-stock { font-size: 11px; }
.hs-lumpen-step { display: inline-flex; align-items: center; gap: 4px; }
.hs-lumpen-step .hs-btn { min-width: 28px; }
.hs-lumpen-count { min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; }
.hs-lumpen-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-lumpen-foot { display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 6px; }
.hs-lumpen-hope { font-weight: 700; color: #ffe2a8; font-size: 13px; }
.hs-lumpen-decides, .hs-lumpen-note { font-size: 11.5px; }
.hs-lumpen-binding { font-size: 11.5px; color: #ffb36b; }
.hs-lumpen-offer { align-self: stretch; margin-top: 2px; }
.hs-lumpen-error { font-size: 12px; color: #ff9a8a; }
/* v0.26.3-rc6 furniture rows (the piece's own sprite) + the last-copy confirmation inside the window */
.hs-lumpen-furn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.hs-lumpen-furn img { max-width: 22px; max-height: 22px; image-rendering: pixelated; object-fit: contain; }
.hs-lumpen-confirm { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid #ffb36b; border-radius: 6px; }
.hs-lumpen-confirm-head, .hs-lumpen-confirm-text { font-size: 13px; overflow-wrap: anywhere; }
.hs-lumpen-confirm-list { margin: 0; padding-left: 18px; font-size: 13px; }
.hs-lumpen-confirm-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.hs-lumpen-error:empty { display: none; }

/* the 10 seconds */
.hs-lumpen-stage { display: flex; flex-direction: column; gap: 6px; }
.hs-lumpen-actors { position: relative; display: flex; align-items: flex-end; justify-content: space-around; min-height: 92px; padding-top: 22px; }
.hs-lumpen-pet { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.hs-lumpen-pet-sprite { display: block; min-width: 40px; min-height: 52px; }
.hs-lumpen-bubble { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); max-width: 160px; width: max-content; padding: 2px 6px; font-size: 11.5px; line-height: 14px; color: #2a1a0c; background: #f3e4c8; border-radius: 8px; box-shadow: 0 1px 0 rgba(0,0,0,.4); animation: hs-lumpen-say .25s ease-out; }
.hs-lumpen-bubble[hidden] { display: none; }
.hs-lumpen-counter { padding: 6px; border: 1px dashed rgba(255,179,107,.45); border-radius: 6px; background: rgba(90,58,34,.35); }
.hs-lumpen-counter-h { font-size: 11px; margin-bottom: 4px; }
.hs-lumpen-goods { display: flex; flex-wrap: wrap; gap: 4px; }
.hs-lumpen-good { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; font-size: 11.5px; border-radius: 10px; background: rgba(0,0,0,.28); animation: hs-lumpen-pop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--i, 0) * 160ms); }
.hs-lumpen-good-icon { display: inline-block; font-size: 15px; }
.hs-lumpen[data-phase="inspect"] .hs-lumpen-good-icon { animation: hs-lumpen-wiggle .7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 110ms); }
.hs-lumpen[data-phase="inspect"] .hs-lumpen-merchant-img { animation: hs-lumpen-lean 1.4s ease-in-out infinite; }
.hs-lumpen[data-phase="count"] .hs-lumpen-merchant-img { animation: hs-lumpen-nod .45s ease-in-out infinite alternate; }
.hs-lumpen[data-phase="nervous"] .hs-lumpen-pet-sprite { animation: hs-lumpen-bob .2s ease-in-out infinite alternate; }
.hs-lumpen[data-phase="nervous"] .hs-lumpen-merchant-img { animation: hs-lumpen-lean 2.2s ease-in-out infinite; }
.hs-lumpen-coins { min-height: 20px; margin-top: 4px; display: flex; gap: 2px; }
.hs-lumpen-coin { display: inline-block; font-size: 15px; animation: hs-lumpen-coin .35s ease-out both; }
.hs-lumpen-meter { height: 8px; border-radius: 4px; background: rgba(0,0,0,.4); overflow: hidden; border: 1px solid rgba(138,85,48,.6); }
.hs-lumpen-meter-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a5530, #ffb36b); transition: width .2s linear; }
.hs-lumpen[data-phase="nervous"] .hs-lumpen-meter-fill { background: linear-gradient(90deg, #ffb36b, #ff6a1a); animation: hs-lumpen-pulse .4s ease-in-out infinite alternate; }
.hs-lumpen-seconds { font-weight: 700; color: #ffe2a8; font-size: 13px; font-variant-numeric: tabular-nums; }
.hs-lumpen-phase { font-size: 11.5px; min-height: 14px; }

/* the result */
.hs-lumpen-result { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.hs-lumpen-group { font-size: 22px; font-weight: 800; letter-spacing: .02em; animation: hs-lumpen-reveal .55s cubic-bezier(.3,1.7,.5,1) both; }
.hs-lumpen-result.is-abgezockt .hs-lumpen-group { color: #ff7a6a; }
.hs-lumpen-result.is-mies .hs-lumpen-group { color: #ffb36b; }
.hs-lumpen-result.is-naja .hs-lumpen-group { color: #e8d9b0; }
.hs-lumpen-result.is-gut .hs-lumpen-group { color: #8fdc7a; }
.hs-lumpen-result.is-glueck .hs-lumpen-group { color: #ffd84a; text-shadow: 0 0 8px rgba(255,216,74,.6); }
.hs-lumpen-got { font-size: 15px; font-weight: 700; color: #ffe2a8; }
.hs-lumpen-hoped { font-size: 12px; }
.hs-lumpen-actors--result { min-height: 76px; padding-top: 0; }
.hs-lumpen-result.is-abgezockt .hs-lumpen-pet-sprite { animation: hs-lumpen-slump .6s ease-out both; }
.hs-lumpen-result.is-gut .hs-lumpen-pet-sprite, .hs-lumpen-result.is-glueck .hs-lumpen-pet-sprite { animation: hs-lumpen-hop .45s ease-out 2; }
.hs-lumpen-talk { text-align: left; }
.hs-lumpen-line { margin: 2px 0; font-size: 12.5px; line-height: 1.35; }
.hs-lumpen-line b { color: var(--hs-gold); font-weight: 700; }
.hs-lumpen-result .hs-lumpen-tools { justify-content: center; }

@keyframes hs-lumpen-pop { 0% { opacity: 0; transform: translateY(-14px) scale(.6); } 60% { opacity: 1; transform: translateY(2px) scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes hs-lumpen-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -16deg; } 75% { rotate: 16deg; } }
@keyframes hs-lumpen-lean { 0%, 100% { rotate: 0deg; } 30% { rotate: -6deg; } 70% { rotate: 5deg; } }
@keyframes hs-lumpen-nod { from { translate: 0 0; } to { translate: 0 2px; } }
@keyframes hs-lumpen-bob { from { translate: 0 0; rotate: -3deg; } to { translate: 0 -3px; rotate: 3deg; } }
@keyframes hs-lumpen-coin { 0% { opacity: 0; translate: 0 -14px; } 70% { opacity: 1; translate: 0 2px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes hs-lumpen-pulse { from { opacity: .75; } to { opacity: 1; } }
@keyframes hs-lumpen-say { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes hs-lumpen-reveal { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes hs-lumpen-slump { from { translate: 0 0; } to { translate: 0 4px; rotate: -4deg; } }
@keyframes hs-lumpen-hop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) {
  .hs-lumpen *, .hs-hub-merchant.is-inspecting .hs-hub-merchant-img, .hs-hub-actor.is-nervous .hs-sprite { animation: none !important; transition: none !important; }
}
@media (max-width: 380px) { .hs-lumpen-host { padding: 8px; } .hs-lumpen { padding: 6px; } .hs-lumpen-row { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px; } }

/* ── v0.25.5 ABENTEUER LIVE-FEED (adventure-feed.js) – a compact wooden panel under "Abenteuer" while a run is on.
   Scene = logical 240 × 100 stage, scaled by JS to 160–200 px height (narrow widgets crop the sides, never scroll).
   Missing images fall back to small CSS shapes (.is-fallback). No inner scroll area, no horizontal overflow. */
.hs-adv-feed { min-width: 0; margin-top: 6px; }
.hs-adv-feed[hidden] { display: none; }
.hs-feed { display: grid; gap: 6px; min-width: 0; padding: 8px 8px 7px; border-radius: 7px; color: var(--hs-text);
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 37px, rgba(0,0,0,.07) 37px 39px), linear-gradient(180deg, #4b2f1b, #2f1d11 70%, #26170d);
  box-shadow: inset 0 0 0 2px var(--hs-wood-0), inset 0 0 0 3px var(--hs-copper-hi), inset 0 3px 0 3px rgba(255,200,140,.07), 0 2px 0 #0a0604; }
.hs-feed[hidden] { display: none; }
.hs-feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 2px; }
.hs-feed-title { font: 700 13px var(--hs-serif); color: var(--hs-gold); text-shadow: 0 1px 0 var(--hs-wood-0); min-width: 0; overflow-wrap: anywhere; }
.hs-feed-pct { font: 700 11.5px var(--hs-serif); color: var(--hs-gold-muted); flex: 0 0 auto; }
.hs-feed-scene { position: relative; overflow: hidden; height: 160px; min-width: 0; border-radius: 4px; background: linear-gradient(180deg, #34484e 0, #50655a 52%, #22351f 52%, #2a4025 75%, #4a3a26 75%, #3c2e20 92%, #2b2016 100%);
  box-shadow: inset 0 0 0 2px var(--hs-wood-0), 0 0 0 1px var(--hs-copper); }
.hs-feed-scene::before { content: ''; position: absolute; inset: 0; background: var(--hs-feed-bg, none) center / cover; filter: brightness(.45) saturate(.7); }
.hs-feed-stage { position: absolute; left: 0; top: 0; width: 240px; height: 100px; transform-origin: 0 0; }
.hs-feed-stage img, .hs-feed-stage canvas { image-rendering: pixelated; display: block; }
.hs-feed-bg, .hs-feed-bg-img, .hs-feed-bg-img img, .hs-feed-bg-fb { position: absolute; left: 0; top: 0; width: 240px; height: 100px; }
/* neutral fallback background (also for areas without their own picture yet): sky, a tree line, the path */
.hs-feed-bg-fb { display: block; background:
  radial-gradient(14px 18px at 22px 58px, #20331f 98%, transparent), radial-gradient(18px 22px at 48px 54px, #1c2d1b 98%, transparent),
  radial-gradient(16px 20px at 196px 56px, #20331f 98%, transparent), radial-gradient(20px 24px at 224px 52px, #1c2d1b 98%, transparent),
  linear-gradient(180deg, #4d6a73 0, #7d9a88 52%, #2f4a2c 52%, #3b5a33 68%, #6b5236 68%, #5a4430 86%, #3f2f20 100%); }
.hs-feed[data-tone="neutral"] .hs-feed-bg-fb { background: linear-gradient(180deg, #4a3f52 0, #786574 52%, #4a3a2a 52%, #5a4630 68%, #6b5236 68%, #5a4430 86%, #3f2f20 100%); }
.hs-feed-hero, .hs-feed-enemy, .hs-feed-fx-item { position: absolute; left: 0; top: 0; will-change: transform; }
.hs-feed-hero.is-flash canvas { filter: brightness(1.9) saturate(.4); }
.hs-feed-hero-sprite { position: relative; }
.hs-feed-enemy[hidden], .hs-feed-fx-item[hidden] { display: none; }
.hs-feed-enemy-img { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); }
.hs-feed-enemy.is-flash .hs-feed-enemy-img { filter: brightness(2) saturate(.3); }
.hs-feed-enemy-fb { display: block; position: relative; width: 22px; height: 16px; border-radius: 55% 45% 35% 35%; background: #7a5a3c;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3), inset 2px 2px 0 rgba(255,220,180,.18); }
.hs-feed-enemy-fb::before { content: ''; position: absolute; left: 4px; top: 4px; width: 3px; height: 3px; background: #fff3dc; box-shadow: 1px 1px 0 #1a100a; }
.hs-feed-enemy-fb.is-boss { width: 34px; height: 24px; background: #5d4a3a; }
.hs-feed-fx-item > img, .hs-feed-fx-item > .hs-feed-glyph, .hs-feed-chest-fb { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); }
.hs-feed-fx-item .hs-feed-glyph { width: auto; height: auto; border: 0; background: none; box-shadow: none; font: 700 10px var(--hs-serif); color: #fff3c4; text-shadow: 0 0 2px #000, 0 1px 0 #000; }
.hs-feed-fx-item .hs-feed-glyph.is-heart { color: #ff8fa3; }
.hs-feed-fx-item .hs-feed-glyph.is-dust { color: #d8c4a0; }
.hs-feed-fx-item .hs-feed-glyph.is-zzz { color: #cfe3ff; }
.hs-feed-chest-fb { display: block; width: 14px; height: 10px; border-radius: 2px 2px 1px 1px; background: linear-gradient(180deg, #a8682e 0 40%, #3a220f 40% 52%, #8a5226 52%); box-shadow: inset 0 0 0 1px #2a170a; }
.hs-feed-pop { position: absolute; transform: translateX(-50%); font: 700 11px var(--hs-serif); color: #ffd36b; text-shadow: 0 0 2px #000, 0 1px 0 #000; line-height: 1; }
/* timeline: START – nodes – ZIEL, the tiny Hässlon standing on it */
.hs-feed-tl { position: relative; height: 66px; min-width: 0; margin: 0 2px; }
.hs-feed-tl-track { position: absolute; left: 22px; right: 22px; top: 38px; height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--hs-copper-hi) 0 6px, transparent 6px 10px); opacity: .85; }
.hs-feed-tl-nodes { position: absolute; inset: 0; }
.hs-feed-tl-end, .hs-feed-node { position: absolute; top: 39px; width: 22px; height: 22px; transform: translate(-50%, -50%); }
.hs-feed-tl-end.is-start { left: 22px; }
.hs-feed-tl-end.is-goal { left: calc(100% - 22px); }
.hs-feed-node { left: calc(22px + (100% - 44px) * var(--x, 0)); }
.hs-feed-tl-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; font: 700 9px var(--hs-serif); letter-spacing: .04em; color: var(--hs-gold-muted); white-space: nowrap; }
.hs-feed-icon, .hs-feed-node-icon { display: block; width: 22px; height: 22px; }
.hs-feed-node-icon img, .hs-feed-node-check img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.hs-feed-node-check { position: absolute; left: 50%; top: 100%; width: 14px; height: 14px; margin-top: 2px; transform: translateX(-50%); }
.hs-feed-glyph { display: grid; place-items: center; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; background: var(--hs-wood-0);
  border: 2px solid var(--hs-copper-hi); font: 700 11px/1 var(--hs-serif); color: var(--hs-gold); box-shadow: 0 1px 0 #0a0604; }
.hs-feed-glyph.is-check { border-color: #2f6b2a; background: #3f8f37; color: #f2ffe9; font-size: 9px; }
.hs-feed-glyph.is-combat { color: #ffb3a3; }
.hs-feed-glyph.is-rest { color: #cfe3ff; }
.hs-feed-glyph.is-mood { color: #ff8fa3; }
.hs-feed-node.is-hidden .hs-feed-glyph { color: var(--hs-muted); border-style: dashed; }
.hs-feed-node.is-skipped { opacity: .4; }
.hs-feed-node.is-bad .hs-feed-node-icon { filter: saturate(.5) brightness(.85); }
.hs-feed-node.is-running .hs-feed-node-icon { animation: hs-feed-pulse 1.1s ease-in-out infinite alternate; }
@keyframes hs-feed-pulse { from { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,179,107,0)); } to { transform: scale(1.2); filter: drop-shadow(0 0 4px rgba(255,179,107,.9)); } }
.hs-feed-marker { position: absolute; top: 5px; left: calc(22px + (100% - 44px) * var(--x, 0)); width: 28px; height: 28px; margin-left: -14px; pointer-events: none; z-index: 2; }
.hs-feed-marker.is-west { transform: scaleX(-1); }
.hs-feed-marker-sprite { position: absolute; left: 0; top: 0; transform: scale(.35); transform-origin: 0 0; }
.hs-feed-marker-sprite canvas { image-rendering: pixelated; }
/* state line + live report */
.hs-feed-state { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 2px; font: 700 11.5px var(--hs-serif); color: var(--hs-text); }
.hs-feed-state-text { min-width: 0; overflow-wrap: break-word; word-break: normal; } /* polish3: was anywhere (letter by letter) */
.hs-feed-bar { flex: 0 0 64px; height: 6px; border-radius: 3px; background: var(--hs-wood-0); box-shadow: inset 0 0 0 1px var(--hs-copper); overflow: hidden; }
.hs-feed-bar-fill { display: block; height: 100%; background: var(--hs-gold); }
.hs-feed-report { display: grid; gap: 4px; min-width: 0; padding: 5px 7px; border-radius: 5px; background: rgba(0,0,0,.28); box-shadow: inset 0 1px 3px rgba(0,0,0,.55); }
.hs-feed-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.hs-feed-line.is-transition { color: var(--hs-muted); font-style: italic; }
.hs-feed-line.is-loot { color: var(--hs-gold); }
.hs-feed-line.is-bad, .hs-feed-line.is-ending { color: #ffb3a3; }
.hs-feed-line.is-more { color: var(--hs-faint); font-size: 10px; }
.hs-feed-line.is-start { color: var(--hs-gold-muted); }
.hs-feed-report-link { justify-self: end; }
@media (prefers-reduced-motion: reduce) {
  .hs-feed-node.is-running .hs-feed-node-icon { animation: none; filter: drop-shadow(0 0 3px rgba(255,179,107,.9)); }
}
.hs-feed-shadow { position: absolute; left: -10px; bottom: 2px; width: 20px; height: 4px; margin-bottom: -1px; border-radius: 50%; background: rgba(0,0,0,.32); }
.hs-feed-enemy.is-boss .hs-feed-shadow { left: -18px; width: 36px; height: 5px; }
.hs-feed-shadow.is-hero { left: 26px; bottom: auto; top: 63px; width: 28px; height: 5px; }
.hs-feed-enemy-img[hidden], .hs-feed-enemy-none { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   v0.25.6 LOOT VISUALS – rarity tokens, the ONE loot card, the loot bag, the ONE reveal animation (loot-card.js)
   Palette = assets/plunder/manifest.json (ranzig wood / pixel style, no neon):
     common     dull grey-brown, almost no glow
     uncommon   moss green, a slight glow
     rare       saturated blue, a clear frame + small sparks
     curiosity  gold with a violet accent, a special frame, a small shimmer
   ════════════════════════════════════════════════════════════════════════════ */
.hs {
  /* the asset palette (assets/plunder/README.md) as --plunder-<rarity>-* tokens; the --hs-loot-* names below read them */
  --plunder-common-border: #6e6252; --plunder-common-light: #8c7f6c; --plunder-common-dark: #4a4136; --plunder-common-inner: #2b2520; --plunder-common-glow: none; --plunder-common-text: #b5a893;
  --plunder-uncommon-border: #5e8a35; --plunder-uncommon-light: #86b350; --plunder-uncommon-dark: #3c5a22; --plunder-uncommon-inner: #222c1a; --plunder-uncommon-glow: 0 0 4px rgba(110, 170, 60, .35); --plunder-uncommon-text: #a9d47a;
  --plunder-rare-border: #3d72b8; --plunder-rare-light: #6a9be0; --plunder-rare-dark: #244a80; --plunder-rare-inner: #1a2438; --plunder-rare-glow: 0 0 6px rgba(70, 130, 215, .5); --plunder-rare-text: #92bcf0;
  --plunder-curiosity-border: #d1a23a; --plunder-curiosity-light: #f4d36e; --plunder-curiosity-dark: #8a6418; --plunder-curiosity-inner: #2a1f35; --plunder-curiosity-glow: 0 0 6px rgba(230, 180, 60, .55), 0 0 2px rgba(140, 80, 190, .6); --plunder-curiosity-text: #f2cf6a; --plunder-curiosity-accent: #8a4fb8; --plunder-curiosity-accent-light: #b98ae0;
  --hs-loot-common: var(--plunder-common-border); --hs-loot-common-light: var(--plunder-common-light); --hs-loot-common-dark: var(--plunder-common-dark); --hs-loot-common-inner: var(--plunder-common-inner); --hs-loot-common-text: var(--plunder-common-text);
  --hs-loot-uncommon: var(--plunder-uncommon-border); --hs-loot-uncommon-light: var(--plunder-uncommon-light); --hs-loot-uncommon-dark: var(--plunder-uncommon-dark); --hs-loot-uncommon-inner: var(--plunder-uncommon-inner); --hs-loot-uncommon-text: var(--plunder-uncommon-text);
  --hs-loot-rare: var(--plunder-rare-border); --hs-loot-rare-light: var(--plunder-rare-light); --hs-loot-rare-dark: var(--plunder-rare-dark); --hs-loot-rare-inner: var(--plunder-rare-inner); --hs-loot-rare-text: var(--plunder-rare-text);
  --hs-loot-curiosity: var(--plunder-curiosity-border); --hs-loot-curiosity-light: var(--plunder-curiosity-light); --hs-loot-curiosity-dark: var(--plunder-curiosity-dark); --hs-loot-curiosity-inner: var(--plunder-curiosity-inner); --hs-loot-curiosity-text: var(--plunder-curiosity-text);
  --hs-loot-curiosity-accent: var(--plunder-curiosity-accent); --hs-loot-curiosity-accent-light: var(--plunder-curiosity-accent-light);
  --hs-loot-neutral: #7a5a3a;
}
.hs-loot--common, .hs-loot-bag--common { --hs-l: var(--hs-loot-common); --hs-l-light: var(--hs-loot-common-light); --hs-l-dark: var(--hs-loot-common-dark); --hs-l-inner: var(--hs-loot-common-inner); --hs-l-text: var(--hs-loot-common-text); --hs-l-glow: 0 0 0 transparent; }
.hs-loot--uncommon, .hs-loot-bag--uncommon { --hs-l: var(--hs-loot-uncommon); --hs-l-light: var(--hs-loot-uncommon-light); --hs-l-dark: var(--hs-loot-uncommon-dark); --hs-l-inner: var(--hs-loot-uncommon-inner); --hs-l-text: var(--hs-loot-uncommon-text); --hs-l-glow: var(--plunder-uncommon-glow); }
.hs-loot--rare, .hs-loot-bag--rare { --hs-l: var(--hs-loot-rare); --hs-l-light: var(--hs-loot-rare-light); --hs-l-dark: var(--hs-loot-rare-dark); --hs-l-inner: var(--hs-loot-rare-inner); --hs-l-text: var(--hs-loot-rare-text); --hs-l-glow: var(--plunder-rare-glow); }
.hs-loot--curiosity, .hs-loot-bag--curiosity { --hs-l: var(--hs-loot-curiosity); --hs-l-light: var(--hs-loot-curiosity-light); --hs-l-dark: var(--hs-loot-curiosity-dark); --hs-l-inner: var(--hs-loot-curiosity-inner); --hs-l-text: var(--hs-loot-curiosity-text); --hs-l-glow: var(--plunder-curiosity-glow); }
.hs-loot-bag--neutral { --hs-l: var(--hs-loot-neutral); --hs-l-light: #a07a52; --hs-l-dark: #4a3420; }
/* the rarity as plain text colour (bag rows, report lines) */
.hs-rarity--curiosity { color: var(--hs-loot-curiosity-text); }
.hs-report-card .hs-rarity--curiosity { color: #8a5a10; }

/* ── the card: [icon] NAME / RARITÄT / flavour / Wert ── */
.hs-loot-card {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: start;
  min-width: 0; max-width: 100%; box-sizing: border-box; padding: 8px 10px 8px 8px; overflow: hidden; isolation: isolate;
  border: 3px solid var(--hs-l); border-radius: 3px; background: var(--hs-l-inner);
  box-shadow: inset 0 0 0 1px var(--hs-l-dark), inset 0 1px 0 1px var(--hs-l-light), var(--hs-l-glow);
  color: var(--hs-text); font: 12px/1.35 var(--hs-sans); text-align: left;
}
.hs-loot-iconwrap { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 2px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--hs-l-dark), inset 0 2px 4px rgba(0, 0, 0, .6); }
.hs-loot-icon { display: grid; place-items: center; width: 64px; height: 64px; }
.hs-loot-icon > img { width: 64px; height: 64px; image-rendering: pixelated; }
.hs-loot-icon.is-furniture > img { width: auto; height: auto; max-width: 64px; max-height: 64px; }
.hs-loot-icon-fb { display: block; width: 26px; height: 26px; border-radius: 3px; background: var(--hs-l); box-shadow: inset -3px -3px 0 var(--hs-l-dark), inset 3px 3px 0 var(--hs-l-light); transform: rotate(-8deg); }
.hs-loot-qty { position: absolute; right: 2px; bottom: 1px; font: 700 10px var(--hs-sans); color: var(--hs-text); text-shadow: 0 1px 0 #000; }
.hs-loot-body { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.hs-loot-badge { justify-self: start; padding: 1px 6px; border-radius: 2px; background: var(--hs-l); color: var(--hs-wood-0); font: 700 10px var(--hs-sans); letter-spacing: .03em; text-transform: uppercase; }
.hs-loot-name { font: 700 14px/1.2 var(--hs-serif); color: var(--hs-gold-muted); }
.hs-loot-rarity { font: 700 10.5px var(--hs-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--hs-l-text); }
.hs-loot-flavor { font-style: italic; color: var(--hs-text); opacity: .92; }
/* v0.26.6-rc1 MÖBEL-UX: the gameplay effect line (loot card · shop offer · editor) */
.hs-loot-effect, .hs-shop-effect, .hs-ed-effect { font-size: 11px; font-weight: 600; color: #9fe39f; line-height: 1.3; }
.hs-ed-effect-note { font-size: 10.5px; color: var(--hs-muted); }
.hs-loot-value { font-size: 11.5px; color: var(--hs-gold); }
.hs-loot--curiosity .hs-loot-rarity { color: var(--hs-loot-curiosity-text); text-shadow: 0 0 1px var(--hs-loot-curiosity-accent); }
.hs-loot--curiosity { border-color: var(--hs-loot-curiosity); box-shadow: inset 0 0 0 1px var(--hs-loot-curiosity-accent), inset 0 1px 0 1px var(--hs-l-light), var(--hs-l-glow); }
/* light / gloss sweep + burst layers (only visible while an animation runs) */
.hs-loot-card::before, .hs-loot-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2; }
.hs-loot-card::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .18) 48%, transparent 60%); background-size: 260% 100%; background-position: 130% 0; }
.hs-loot--uncommon::after { background-image: linear-gradient(105deg, transparent 35%, rgba(190, 240, 140, .22) 48%, transparent 60%); }
.hs-loot--rare::after { background-image: linear-gradient(105deg, transparent 32%, rgba(200, 225, 255, .3) 48%, transparent 64%); }
.hs-loot--curiosity::before { background: radial-gradient(circle at 36px 40px, rgba(255, 226, 130, .75), rgba(185, 138, 224, .45) 32%, transparent 62%); }
.hs-loot--curiosity::after { background-image: linear-gradient(105deg, transparent 30%, rgba(255, 230, 150, .2) 44%, rgba(185, 138, 224, .16) 52%, transparent 66%); }
/* sparks (4 tiny pixel crosses around the icon) */
.hs-loot-fx { position: absolute; left: 8px; top: 8px; width: 72px; height: 72px; pointer-events: none; z-index: 3; }
.hs-loot-spark { position: absolute; width: 3px; height: 3px; opacity: 0; background: var(--hs-l-light); box-shadow: 3px 0 0 var(--hs-l-light), -3px 0 0 var(--hs-l-light), 0 3px 0 var(--hs-l-light), 0 -3px 0 var(--hs-l-light); }
.hs-loot-spark--0 { left: 6px; top: 8px; } .hs-loot-spark--1 { right: 6px; top: 14px; } .hs-loot-spark--2 { left: 14px; bottom: 6px; } .hs-loot-spark--3 { right: 10px; bottom: 12px; }
.hs-loot--curiosity .hs-loot-spark { background: var(--hs-loot-curiosity-light); box-shadow: 3px 0 0 var(--hs-loot-curiosity-light), -3px 0 0 var(--hs-loot-curiosity-accent-light), 0 3px 0 var(--hs-loot-curiosity-accent-light), 0 -3px 0 var(--hs-loot-curiosity-light); }
.hs-loot--common .hs-loot-spark { width: 4px; height: 3px; border-radius: 2px; background: rgba(190, 170, 140, .7); box-shadow: none; } /* = dust */

/* ── REVEAL (mode 'reveal' – plays once) ── */
.hs-loot-card.is-reveal { animation: hs-loot-pop .32s cubic-bezier(.2, 1.4, .4, 1) both; }
.hs-loot--common.is-reveal .hs-loot-spark { animation: hs-loot-dust .6s ease-out .12s both; }
.hs-loot--common.is-reveal .hs-loot-spark--1 { animation-delay: .18s; } .hs-loot--common.is-reveal .hs-loot-spark--2 { animation-delay: .22s; }
.hs-loot--uncommon.is-reveal::after { animation: hs-loot-sweep .7s ease-out .15s both; }
.hs-loot--rare.is-reveal { animation: hs-loot-pop-strong .42s cubic-bezier(.2, 1.5, .4, 1) both, hs-loot-frame-glow 1.1s ease-out .1s both; }
.hs-loot--rare.is-reveal::after { animation: hs-loot-sweep .8s ease-out .3s both; }
.hs-loot--rare.is-reveal .hs-loot-spark { animation: hs-loot-twinkle .55s steps(4) both; }
.hs-loot--rare.is-reveal .hs-loot-spark--0 { animation-delay: .2s; } .hs-loot--rare.is-reveal .hs-loot-spark--1 { animation-delay: .38s; } .hs-loot--rare.is-reveal .hs-loot-spark--2 { animation-delay: .5s; } .hs-loot--rare.is-reveal .hs-loot-spark--3 { animation-delay: .65s; }
.hs-loot--curiosity.is-reveal { animation: hs-loot-pop-strong .45s cubic-bezier(.2, 1.5, .4, 1) both; }
.hs-loot--curiosity.is-reveal::before { animation: hs-loot-burst 1.3s ease-out both; }
.hs-loot--curiosity.is-reveal::after { animation: hs-loot-shimmer 3.6s ease-in-out 1.4s infinite; }
.hs-loot--curiosity.is-reveal .hs-loot-spark { animation: hs-loot-twinkle .6s steps(4) both, hs-loot-twinkle-soft 3.6s steps(4) 1.5s infinite; }
.hs-loot--curiosity.is-reveal .hs-loot-spark--1 { animation-delay: .25s, 2.4s; } .hs-loot--curiosity.is-reveal .hs-loot-spark--2 { animation-delay: .45s, 3.1s; } .hs-loot--curiosity.is-reveal .hs-loot-spark--3 { animation-delay: .7s, 1.9s; }

/* ── IDLE (mode 'idle' – a finished report opened again): calm ── */
.hs-loot--uncommon.is-idle::after { animation: hs-loot-sweep .9s ease-out .5s both; }
.hs-loot--rare.is-idle .hs-loot-spark--1 { animation: hs-loot-spark-rare 7s steps(4) 1.2s infinite; }
.hs-loot--curiosity.is-idle::after { animation: hs-loot-shimmer 6.5s ease-in-out .8s infinite; }
.hs-loot--curiosity.is-idle .hs-loot-spark--0 { animation: hs-loot-spark-rare 6.5s steps(4) 2s infinite; }

@keyframes hs-loot-pop { 0% { transform: scale(.86); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hs-loot-pop-strong { 0% { transform: scale(.74); opacity: 0; } 55% { transform: scale(1.07); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hs-loot-dust { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(-4px, 6px) scale(1.6); } }
@keyframes hs-loot-sweep { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }
@keyframes hs-loot-frame-glow { 0% { box-shadow: inset 0 0 0 1px var(--hs-l-dark), 0 0 0 transparent; } 35% { box-shadow: inset 0 0 0 1px var(--hs-l-light), 0 0 10px rgba(90, 150, 230, .8); } 100% { box-shadow: inset 0 0 0 1px var(--hs-l-dark), inset 0 1px 0 1px var(--hs-l-light), var(--hs-l-glow); } }
@keyframes hs-loot-twinkle { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes hs-loot-twinkle-soft { 0%, 86%, 100% { opacity: 0; } 92% { opacity: .75; } }
@keyframes hs-loot-spark-rare { 0%, 90%, 100% { opacity: 0; } 94% { opacity: .85; } }
@keyframes hs-loot-burst { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes hs-loot-shimmer { 0%, 55% { opacity: 0; background-position: 130% 0; } 60% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }

/* ── the loot bag (scene ~22 × 23, timeline icon 16 × 16) ── */
.hs-loot-bag { position: relative; display: inline-grid; place-items: end center; }
.hs-loot-bag > img { image-rendering: pixelated; display: block; }
.hs-loot-bag--icon { width: 22px; height: 22px; place-items: center; }
.hs-loot-bag--icon > img { width: 16px; height: 16px; }
.hs-loot-bag-fb { display: block; width: 14px; height: 13px; border-radius: 3px 3px 6px 6px; background: var(--hs-l); box-shadow: inset -2px -2px 0 var(--hs-l-dark), inset 2px 2px 0 var(--hs-l-light); position: relative; }
.hs-loot-bag-fb::before { content: ''; position: absolute; left: 4px; top: -3px; width: 6px; height: 3px; background: var(--hs-l-dark); border-radius: 1px; }
.hs-loot-bag--rare:not(.hs-loot-bag--icon), .hs-loot-bag--curiosity:not(.hs-loot-bag--icon) { filter: drop-shadow(0 0 2px var(--hs-l-light)); }
.hs-loot-bag.is-shake { animation: hs-loot-bag-wiggle .9s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hs-loot-bag-wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-7deg); } 80% { transform: rotate(6deg); } 90% { transform: rotate(-3deg); } }
/* feed: the bag in the scene + the reveal card under the timeline */
.hs-feed-fx-item.hs-loot-bag { display: block; width: 0; height: 0; } /* anchor = bottom-centre at the fx point */
.hs-feed-fx-item.hs-loot-bag > img, .hs-feed-fx-item.hs-loot-bag > .hs-loot-bag-fb { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); }
.hs-feed-loot { display: grid; gap: 4px; min-width: 0; }
.hs-feed-loot-head { font: 700 10.5px var(--hs-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--hs-muted); }
.hs-feed-node-icon.hs-loot-bag { width: 22px; height: 22px; }
/* reports: the loot section */
.hs-report-loot { display: grid; gap: 6px; margin: 4px 0 2px; }
/* inventory rows: the small item picture */
.hs-adv-bag-row .hs-loot-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.hs-adv-bag-row .hs-loot-icon > img { width: 16px; height: 16px; }
.hs-adv-bag-row .hs-loot-icon-fb { width: 10px; height: 10px; }
.hs-adv-slots { font-size: 11px; color: var(--hs-muted); margin: 2px 0 4px; }
.hs-adv-slots.is-full { color: #ffb3a3; }
@media (max-width: 420px) {
  .hs-loot-card { grid-template-columns: 56px minmax(0, 1fr); gap: 7px; padding: 6px 8px 6px 6px; }
  .hs-loot-iconwrap, .hs-loot-fx { width: 56px; height: 56px; }
  .hs-loot-icon, .hs-loot-icon > img { width: 48px; height: 48px; }
  .hs-loot-icon.is-furniture > img { max-width: 48px; max-height: 48px; }
  .hs-loot-name { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-loot-card, .hs-loot-card::before, .hs-loot-card::after, .hs-loot-spark, .hs-loot-bag, .hs-loot-bag.is-shake { animation: none !important; transition: none !important; }
  .hs-loot-card::before, .hs-loot-card::after, .hs-loot-spark { opacity: 0 !important; }
}
.hs-feed-line.is-loot.hs-rarity--common { color: var(--hs-loot-common-text); }
.hs-feed-line.is-loot.hs-rarity--uncommon { color: var(--hs-loot-uncommon-text); }
.hs-feed-line.is-loot.hs-rarity--rare { color: var(--hs-loot-rare-text); }
.hs-feed-line.is-loot.hs-rarity--curiosity { color: var(--hs-loot-curiosity-text); }

/* ── v0.25.7 V2 BETA: Lumpensammler SHOP tab · Vorhang-Slot · T2 zone drops ─────────────────────────────────────── */
.hs-lumpen-tabs { display: flex; gap: 4px; }
.hs-lumpen-tab { flex: 1 1 0; }
.hs-lumpen-tab.is-active { background: var(--hs-wood-3, #6b4a2a); color: #ffe7b0; box-shadow: inset 0 -2px 0 var(--hs-gold-muted, #c9a55a); }
.hs-shop-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.hs-shop-head { font-weight: 700; font-size: 13px; }
.hs-shop-countdown { font-size: 11.5px; color: var(--hs-gold-muted, #c9a55a); white-space: nowrap; }
.hs-shop-wallet { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.hs-shop-rule { font-size: 11px; }
.hs-shop-away { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; padding: 4px 6px; border-radius: 3px; background: rgba(0,0,0,.22); }
.hs-shop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.hs-shop-offer { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 3px; background: rgba(0,0,0,.18); }
.hs-shop-offer.is-exclusive { box-shadow: inset 2px 0 0 var(--hs-gold-muted, #c9a55a); }
.hs-shop-offer.is-bought { opacity: .62; }
.hs-shop-pic { width: 36px; height: 32px; display: grid; place-items: center; overflow: hidden; }
.hs-shop-pic img { max-width: 36px; max-height: 32px; image-rendering: pixelated; }
.hs-shop-pic.is-fallback { background: rgba(255,255,255,.06); border-radius: 3px; }
.hs-shop-info { display: flex; flex-direction: column; min-width: 0; }
.hs-shop-name { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-shop-meta { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-shop-effect { display: block; white-space: normal; }
.hs-shop-act { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hs-shop-price { font-size: 11.5px; color: #ffe08a; white-space: nowrap; }
.hs-shop-buy { min-width: 64px; }
.hs-shop-note { font-size: 12px; color: #b9f0a4; }
.hs-adv-lumpen .hs-btn--adv-lumpen-shop { margin-top: 4px; }
@media (max-width: 380px) { .hs-shop-offer { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px; } .hs-shop-pic { width: 30px; } .hs-shop-pic img { max-width: 30px; } .hs-shop-buy { min-width: 56px; } }
/* Vorhang-Slot: wall layer z-order (curtain.js WALL_Z) – graffiti 1 · curtain 2 · wall items 3 */
.hs-layer--wall > .hs-wallmark { z-index: 1; }
.hs-curtain { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; max-width: none; max-height: none; pointer-events: none; }
.hs-curtain-picker-host { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(12,7,4,.62); }
.hs-slot--curtain .hs-slot-pic img { max-width: 48px; max-height: 30px; image-rendering: pixelated; }
.hs-curtain-picker-host .hs-slot-pic img { max-width: 48px; max-height: 30px; image-rendering: pixelated; }
/* T2 zone drop: the rare frame + a gold edge, the marker bag shimmers */
.hs-loot-card.is-t2 { box-shadow: 0 0 0 1px #e8c46a, 0 0 8px rgba(232,196,106,.45); }
.hs-loot-card.is-t2 .hs-loot-badge { background: #e8c46a; }
.hs-loot-bag.is-t2:not(.hs-loot-bag--icon) { filter: drop-shadow(0 0 3px #e8c46a); }
.hs-feed-line.is-loot.hs-rarity--t2, .hs-report-list .hs-rarity--t2 { color: #e8c46a; font-weight: 700; }
.hs-report-card .hs-rarity--t2 { color: #8a5a00; }

/* v0.25.7 ADMIN BETA box (owner only - beta-admin-view.js) + V2 onboarding strip (onboarding-v2.js) */
.hs-beta { display: flex; flex-direction: column; gap: 5px; margin: 0 0 6px; padding: 6px 8px; border: 1px dashed var(--hs-copper-hi, #8a5530); border-radius: 4px; background: rgba(0,0,0,.22); font-size: 12px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.hs-beta.is-beta { border-style: solid; border-color: #c58ae6; background: rgba(76,40,96,.35); }
.hs-beta-head { display: flex; align-items: center; gap: 6px; }
.hs-beta-title { font-weight: 700; color: var(--hs-gold, #ffb36b); }
.hs-beta-tag { font-size: 10px; padding: 0 4px; border-radius: 2px; background: #c58ae6; color: #1b0f22; font-weight: 700; letter-spacing: .04em; }
.hs-beta-mode { color: var(--hs-text, #ecdcc6); line-height: 1.3; }
.hs-beta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.hs-beta-row > .hs-btn { flex: 0 1 auto; white-space: nowrap; }
.hs-beta-confirm { display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 3px; background: var(--hs-danger-bg, #4a1812); }
.hs-beta-warn { line-height: 1.3; }
.hs-beta-typed { max-width: 160px; }
.hs-beta-check { display: flex; align-items: center; gap: 4px; }
.hs-beta-tools { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.08); }
.hs-beta-tools-h { font-weight: 700; color: #d9b8ef; }
.hs-beta-tools > .hs-btn { align-self: flex-start; }
.hs-beta-label { white-space: nowrap; }
.hs-beta-offset { width: 64px; }
.hs-beta-rarity { max-width: 150px; }
.hs--beta .hs-version::after { content: ' \00B7 BETA V2'; color: #c58ae6; font-weight: 700; }
.hs-onb2:not(.hs-onb2--spot) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'face text dots' 'btns btns btns'; align-items: center; gap: 4px 8px; margin: 0 0 6px; padding: 6px 8px; border-radius: 4px; background: rgba(20,12,6,.78); border: 1px solid var(--hs-copper-hi, #8a5530); box-shadow: 0 2px 0 rgba(0,0,0,.35); min-width: 0; max-width: 100%; box-sizing: border-box; }
.hs-onb2[hidden] { display: none; }
.hs-onb2-face { grid-area: face; font-size: 20px; line-height: 1; }
.hs-onb2-text { grid-area: text; font-size: 13px; line-height: 1.35; color: var(--hs-text, #ecdcc6); overflow-wrap: anywhere; }
.hs-onb2-dots { grid-area: dots; font-size: 10.5px; color: var(--hs-muted, #a8927c); white-space: nowrap; }
.hs-onb2-btns { grid-area: btns; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.hs-onb2-loot { font-weight: 700; }
.hs-raid-card.is-pointed { outline: 2px solid var(--hs-accent, #ff6a1a); outline-offset: 1px; animation: hs-onb2-pulse 1.1s ease-in-out 3; }
@keyframes hs-onb2-pulse { 50% { outline-color: #ffe08a; } }
@media (prefers-reduced-motion: reduce) { .hs-raid-card.is-pointed { animation: none; } }
@media (max-width: 420px) { .hs-beta { font-size: 11.5px; padding: 5px 6px; } .hs-onb2 { padding: 5px 6px; } .hs-onb2-text { font-size: 12.5px; } }
.hs-beta-afk { font-size: 11px; color: #d9b8ef; }

/* ── v0.25.8 SOFT CAP · ABENTEUER-RANG · GOBLIN-ABENTEUERGILDE (V2 beta) ───────────────────────────────────────── */
.hs-adv-slots.is-over { color: #ffb3a3; font-weight: 700; letter-spacing: .02em; }
.hs-adv-overfull { margin: 4px 0 6px; padding: 6px 8px; border: 1px dashed var(--hs-danger); background: var(--hs-danger-bg); color: #ffd2c8; font-size: 12px; border-radius: 3px; }
.hs-adv-area.is-locked .hs-adv-area-head { opacity: .72; }
.hs-adv-lock { border-color: var(--hs-copper-hi); color: var(--hs-gold-muted); font-size: 10px; }
.hs-adv-area-locked { margin: 4px 0; color: var(--hs-gold-muted); font-size: 12px; }
.hs-rank-badge { image-rendering: pixelated; image-rendering: crisp-edges; display: inline-block; vertical-align: middle; flex: none; }
.hs-guild { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hs-guild-head { display: flex; align-items: center; gap: 8px; }
.hs-guild-titles { min-width: 0; }
.hs-guild-title { font-family: var(--hs-serif); color: var(--hs-gold); font-size: 14px; font-weight: 700; }
.hs-guild-rank { color: var(--hs-text); font-size: 12px; }
.hs-guild-rep { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.hs-guild-rep-bar { flex: 1; height: 6px; background: var(--hs-wood-0); border: 1px solid var(--hs-copper); min-width: 40px; }
.hs-guild-rep-fill { height: 100%; background: var(--hs-gold); }
.hs-guild-countdown { font-size: 11px; color: var(--hs-muted); font-variant-numeric: tabular-nums; }
.hs-guild-sub { font-size: 11px; color: var(--hs-gold-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.hs-guild-orders, .hs-guild-exam-list, .hs-guild-req, .hs-guild-exam-preview, .hs-rankup-unlocks { list-style: none; margin: 0; padding: 0; }
.hs-guild-order { padding: 5px 6px; border: 1px solid var(--hs-copper); background: var(--hs-wood-1); margin-bottom: 4px; border-radius: 3px; }
.hs-guild-order.is-done { border-color: var(--hs-good); }
.hs-guild-order.is-claimed { opacity: .65; }
.hs-guild-order-top { display: flex; gap: 6px; align-items: baseline; }
.hs-guild-order-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hs-guild-check { font-family: ui-monospace, monospace; color: var(--hs-gold-muted); flex: none; }
.is-done > .hs-guild-check, .is-done .hs-guild-check, .is-ok > .hs-guild-check { color: var(--hs-good); }
.hs-guild-order-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--hs-muted); margin: 2px 0 0 22px; }
.hs-guild-reward { color: var(--hs-gold-muted); }
.hs-guild-progress { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-guild-claim { margin: 4px 0 0 22px; }
.hs-guild-exam, .hs-guild-next { padding: 6px 8px; border: 1px solid var(--hs-copper-hi); border-radius: 3px; background: var(--hs-wood-1); }
.hs-guild-exam-head, .hs-guild-next-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 700; color: var(--hs-gold); font-size: 12px; margin-bottom: 4px; }
.hs-guild-exam-note { font-weight: 400; font-size: 11px; }
/* v0.27.0-proto1 the B / A rank's humorous title (flavour above the plain requirements) */
.hs-guild-next-title { font-style: italic; font-size: 11px; color: var(--hs-muted); margin: -2px 0 4px; }
.hs-guild-exam-task, .hs-guild-req-row { display: flex; gap: 6px; align-items: baseline; font-size: 12px; padding: 1px 0; }
.hs-guild-exam-text, .hs-guild-req-row > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hs-guild-exam-start, .hs-guild-confirm { margin-top: 6px; }
.hs-guild-confirm-text { font-size: 12px; margin-bottom: 4px; }
.hs-guild-exam-preview li { font-size: 11px; color: var(--hs-muted); }
.hs-guild-confirm-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hs-guild-feemissing { margin-top: 6px; padding: 5px 7px; border: 1px dashed var(--hs-copper-hi); color: var(--hs-gold-muted); font-size: 12px; }
.hs-guild-hint { font-size: 12px; margin-top: 4px; }
/* rank-up presentation: small, wood / goblin style, more than a level-up */
.hs-rankup { position: absolute; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 48px 12px 12px; background: rgba(10, 6, 3, .72); }
.hs-rankup-card { width: min(340px, 100%); box-sizing: border-box; padding: 12px 14px; background: var(--hs-wood-2); border: 2px solid var(--hs-copper-hi); box-shadow: 0 0 0 2px var(--hs-wood-0), 0 8px 24px rgba(0,0,0,.6); text-align: center; animation: hs-rankup-in .35s ease-out; }
.hs-rankup-stage { position: relative; height: 96px; display: flex; align-items: center; justify-content: center; }
.hs-rankup-badges { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; }
.hs-rankup-arrow { color: var(--hs-gold); font-size: 18px; font-weight: 700; }
.hs-rankup-old { opacity: .55; }
.hs-rankup-new { animation: hs-rankup-badge .9s cubic-bezier(.2, 1.6, .4, 1) .25s both; }
.hs-rankup-burst { position: absolute; z-index: 1; width: 96px; height: 96px; left: calc(50% - 10px); top: 0; image-rendering: pixelated; opacity: 0; animation: hs-rankup-burst .9s ease-out .3s both; }
.hs-rankup-stamp { position: absolute; z-index: 3; right: 8px; top: 6px; padding: 1px 5px; border: 2px solid #b5452f; color: #d8604a; font: 700 11px var(--hs-serif); letter-spacing: .12em; transform: rotate(-14deg); animation: hs-rankup-stamp .45s ease-in .95s both; }
.hs-rankup-sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hs-rankup-spark { position: absolute; left: 60%; top: 50%; width: 3px; height: 3px; background: var(--hs-gold); opacity: 0; animation: hs-rankup-spark .8s ease-out .35s both; }
.hs-rankup-spark--0 { --dx: -34px; --dy: -30px; } .hs-rankup-spark--1 { --dx: 30px; --dy: -34px; } .hs-rankup-spark--2 { --dx: 40px; --dy: 6px; }
.hs-rankup-spark--3 { --dx: -40px; --dy: 10px; } .hs-rankup-spark--4 { --dx: -12px; --dy: 36px; } .hs-rankup-spark--5 { --dx: 18px; --dy: 34px; }
.hs-rankup-title { margin-top: 6px; font: 700 14px var(--hs-serif); color: var(--hs-gold); letter-spacing: .04em; white-space: pre-wrap; }
.hs-rankup-line { margin: 4px 0 8px; font-size: 12px; color: var(--hs-text); }
.hs-rankup-unlock-head { font-weight: 700; color: var(--hs-good); font-size: 12px; letter-spacing: .06em; }
.hs-rankup-unlocks li { font-size: 12px; padding: 1px 0; }
.hs-rankup-unlocks li::before { content: '+ '; color: var(--hs-good); }
.hs-rankup-ok { margin-top: 10px; }
@keyframes hs-rankup-in { from { transform: translateY(-8px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hs-rankup-badge { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 70% { transform: scale(1.18) rotate(4deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes hs-rankup-burst { 0% { transform: scale(.3); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes hs-rankup-stamp { 0% { transform: rotate(-14deg) scale(2.2); opacity: 0; } 100% { transform: rotate(-14deg) scale(1); opacity: 1; } }
@keyframes hs-rankup-spark { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hs-rankup-card, .hs-rankup-new, .hs-rankup-stamp { animation: none; }
  .hs-rankup-burst, .hs-rankup-sparks { display: none; }
}
.hs-rankup.is-static .hs-rankup-card, .hs-rankup.is-static .hs-rankup-new, .hs-rankup.is-static .hs-rankup-stamp { animation: none; }
.hs-rankup.is-static .hs-rankup-burst, .hs-rankup.is-static .hs-rankup-sparks { display: none; }
.hs-beta-social { flex-wrap: wrap; }
/* v0.25.8 phase 2: the variant of a reached enemy (Mickrig / Zäh) on its feed node */
.hs-feed-variant { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); font-size: 8px; line-height: 1; padding: 1px 2px; border-radius: 2px; white-space: nowrap; pointer-events: none; }
.hs-feed-variant--zaeh { background: var(--hs-danger-bg); color: #ffb3a3; border: 1px solid var(--hs-danger); }
.hs-feed-variant--mickrig { background: var(--hs-wood-0); color: var(--hs-r-uncommon); border: 1px solid var(--hs-copper); }
.hs-shop-offer.is-gear { border-color: var(--hs-copper-hi); }
.hs-shop-gearhead { margin-top: 6px; font-size: 11px; color: var(--hs-gold-muted); text-transform: uppercase; letter-spacing: .04em; }
.hs-shop-pic.is-gear { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.hs-guild-subs { list-style: none; margin: 2px 0 0 22px; padding: 0; font-size: 11px; color: var(--hs-muted); }
.hs-guild-sub-row.is-done { color: var(--hs-good); }
.hs-shop-gearnote { font-size: 12px; margin: 2px 0 4px; }
/* v0.25.8 Gildenstempel – a small wax seal (pixel / house palette, no image file) */
.hs-guild-stamps { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.hs-guild-seal { position: relative; width: 14px; height: 14px; flex: none; background: #8e2b1f; box-shadow: 0 0 0 1px #3a120c, inset 2px 2px 0 #c2483a, inset -2px -2px 0 #5e1a12; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); image-rendering: pixelated; }
.hs-guild-seal::after { content: ''; position: absolute; left: 5px; top: 4px; width: 4px; height: 6px; background: #f0d2a8; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%); }
.hs-guild-stamps.is-today .hs-guild-seal { box-shadow: 0 0 0 1px #3a120c, 0 0 0 2px var(--hs-gold), inset 2px 2px 0 #c2483a, inset -2px -2px 0 #5e1a12; }
.hs-guild-stamps-today { font-size: 11px; }
.hs-guild-stamps-line { font-size: 11px; font-style: italic; }
/* v0.25.8-rc2 click to clean up: the matching entry flashes briefly */
.hs-mess-row.is-cleanup-focus { outline: 2px solid var(--hs-gold); outline-offset: 1px; background: rgba(255, 179, 107, .14); transition: background .3s; }
@media (prefers-reduced-motion: reduce) { .hs-mess-row.is-cleanup-focus { transition: none; } }
.hs-stage .hs-wallmark, .hs-stage .hs-obj[data-id^='prank-'], .hs-stage .hs-obj[data-id^='protest-'] { cursor: pointer; }
/* ════ v0.26.0 V2 DESIGN SYSTEM ═════════════════════════════════════════════════════════════════════════════
   "A rancid goblin fantasy shop that is surprisingly well built." Used wood, metal, leather, parchment, rivets –
   but clear, adult, readable. EVERYTHING here is scoped under .hs--v2 (the widget root of a feature_set 2 savegame,
   haesslon-widget.js _applyView) – a legacy savegame never gets one of these rules.
   Tokens: surface / inset / frame / frame-active / heading / section accent / icon size / ornament line /
   active navigation / hover / focus / success / danger / muted. No UI engine – variables + a handful of classes. */
.hs--v2 {
  --v2-surface: linear-gradient(180deg, #23170f, #170f0a);
  --v2-inset: #100a06;
  --v2-frame: #462c1a;
  --v2-frame-active: #8a5530;
  --v2-heading: #f3c58a;
  --v2-text: var(--hs-text);
  --v2-meta: #9c8670;
  --v2-muted: var(--hs-muted);
  --v2-success: var(--hs-good);
  --v2-danger: var(--hs-danger);
  --v2-hover: rgba(255, 190, 120, .06);
  --v2-focus: #ffc27a;
  --v2-ornament: rgba(240, 210, 168, .14);
  --v2-icon: 24px;
  /* section accent (overridden per main section below); --v2-accent-soft = the same hue, quiet */
  --v2-accent: #8a5530;
  --v2-accent-soft: rgba(138, 85, 48, .22);
  --v2-accent-ink: #e2a46c;
}
/* the section accents – ONE game: small hue shifts on the same wood, never a coloured background */
.hs--v2 .hs-loo { --v2-accent: #7c8443; --v2-accent-soft: rgba(124, 132, 67, .2); --v2-accent-ink: #c9cf8a; }            /* VERSORGUNG: earthy green-brown */
.hs--v2 .hs-raids { --v2-accent: #94723f; --v2-accent-soft: rgba(148, 114, 63, .2); --v2-accent-ink: #e0bf86; }          /* RAIDS: dusty ochre */
.hs--v2 .hs-adv { --v2-accent: #a8432a; --v2-accent-soft: rgba(168, 67, 42, .24); --v2-accent-ink: #f0a083; }             /* ABENTEUER: rust red / copper */
.hs--v2 .hs-guild-sec { --v2-accent: #9b2a21; --v2-accent-soft: rgba(155, 42, 33, .26); --v2-accent-ink: #e8b85a; }      /* GILDE: dark red + gold */
.hs--v2 .hs-looks { --v2-accent: #7d5f78; --v2-accent-soft: rgba(125, 95, 120, .2); --v2-accent-ink: #d7b6cf; }
.hs--v2 .hs-hood { --v2-accent: #557680; --v2-accent-soft: rgba(85, 118, 128, .2); --v2-accent-ink: #a9c7cf; }            /* NACHBARSCHAFT: subtle slate */
.hs--v2 .hs-rel { --v2-accent: #6f6352; --v2-accent-soft: rgba(111, 99, 82, .2); --v2-accent-ink: #cdbda4; }
.hs--v2 .hs-chronik { --v2-accent: #85704b; --v2-accent-soft: rgba(133, 112, 75, .2); --v2-accent-ink: #dcc79c; }
.hs--v2 .hs-reports { --v2-accent: #b59a6a; --v2-accent-soft: rgba(181, 154, 106, .2); --v2-accent-ink: #ecdcb8; }       /* BERICHTE: parchment */

/* MAIN SECTION = level 1: a side rail in the accent, a header band with an ornament line, clearer spacing */
.hs--v2 .hs-bottom { gap: 10px; }
.hs--v2 .hs-bottom > .hs-panel:not(.hs-panel--dev) {
  position: relative; padding: 0 10px 10px 13px; border-radius: 7px;
  border: 1px solid #0d0805; border-left: 3px solid var(--v2-accent);
  background: var(--v2-surface);
}
.hs--v2 .hs-bottom > details.hs-panel:not([open]) { padding-bottom: 0; }
/* v0.26.2: the open-panel shadow is gone – the UI-kit frames carry the depth */
/* HAUPTBEREICH heading: bigger, wider tracking, accent ink, the ornament line underneath */
.hs--v2 .hs-bottom > .hs-panel > .hs-section-title,
.hs--v2 .hs-bottom > .hs-hood > .hs-target-head {
  margin: 0 -10px 8px -13px; padding: 9px 10px 8px 12px; min-height: 26px;
  font: 700 14px/1.2 var(--hs-serif); letter-spacing: .1em; color: var(--v2-heading);
  background: linear-gradient(90deg, var(--v2-accent-soft), transparent 72%);
  border-bottom: 1px solid var(--v2-ornament);
}
.hs--v2 .hs-bottom > .hs-hood > .hs-target-head .hs-section-title { margin: 0; font-size: 14px; letter-spacing: .1em; color: var(--v2-heading); }
.hs--v2 .hs-bottom > details:not([open]) > .hs-section-title { margin-bottom: 0; border-bottom-color: transparent; box-shadow: none; }
.hs--v2 .hs-bottom > .hs-panel > summary.hs-section-title::before { color: var(--v2-accent-ink); }
/* v0.26.2-rc3: the hover gradient that sat here replaced the UI-kit header art (background shorthand) – hover lives in HEADER STATES */
.hs--v2 .hs-bottom > .hs-panel > summary.hs-section-title:focus-visible { outline: 2px solid var(--v2-focus); outline-offset: -2px; }
.hs--v2 .hs-bottom > .hs-panel > .hs-section-title img.hs-icon { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)); }
/* SUBBEREICH / DATEN / FLIESSTEXT / META / BUTTON */
.hs--v2 .hs-v2-sub { font: 700 10.5px/1.2 var(--hs-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--v2-accent-ink); }
.hs--v2 .hs-v2-data { font: 700 13px/1.2 var(--hs-serif); color: var(--v2-text); font-variant-numeric: tabular-nums; }
.hs--v2 .hs-v2-meta { font-size: 11px; color: var(--v2-meta); }
/* active navigation: a tab in a V2 section carries the section accent */
.hs--v2 .hs-bottom [role="tab"][aria-selected="true"]:not(.hs-tab):not(.hs-chronik-tab):not(.hs-lumpen-tab) { box-shadow: inset 0 -2px 0 var(--v2-accent-ink, var(--hs-gold)); } /* v0.26.3-rc4: the kit tab groups have ONE active mark (block "TABS") */
.hs--v2 .hs-bottom button:focus-visible, .hs--v2 .hs-bottom [role="tab"]:focus-visible { outline: 2px solid var(--v2-focus); outline-offset: 1px; }

/* ════ v0.26.0 GOBLIN-ABENTEUERGILDE (main section, V2 only) ══════════════════════════════════════════════ */
.hs-guild-sec > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hs-guild-sec > summary::-webkit-details-marker { display: none; }
.hs-guild-sec > summary::before { content: '▸'; color: var(--hs-accent); transition: transform .15s; }
.hs-guild-sec[open] > summary::before { transform: rotate(90deg); }
.hs-guild-sec-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hs-crest { display: block; flex: none; height: auto; max-width: 100%; }
.hs-crest--head { width: 23px; height: 24px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)); }
.hs-guild-sec-badge { margin-left: auto; }
/* header: [CREST] title / rank / motto – the crest at 1/2 of its file (never upscaled) */
.hs-guild-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px 9px 8px; border-radius: 6px;
  border: 1px solid #4d1a14; background: radial-gradient(ellipse 60% 120% at 0% 50%, rgba(155, 42, 33, .38), transparent 70%), linear-gradient(180deg, #2a1611, #170c08);
  box-shadow: inset 0 0 0 1px rgba(232, 184, 90, .2), 0 2px 0 #0b0604; }
.hs-guild-head::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 184, 90, .45), transparent); }
.hs-guild-crest { width: 58px; height: 60px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .65)); }
.hs-guild-titles { min-width: 0; display: grid; gap: 2px; }
.hs-guild-head .hs-guild-title { font: 700 16px/1.15 var(--hs-serif); letter-spacing: .07em; text-transform: uppercase; color: #ebbd62; text-shadow: 0 1px 0 #0b0604; overflow-wrap: anywhere; }
.hs-guild-head .hs-guild-rank { font: 700 13px/1.2 var(--hs-serif); letter-spacing: .05em; color: var(--hs-gold-muted); }
.hs-guild-motto { font-size: 11.5px; font-style: italic; color: var(--hs-muted); line-height: 1.3; }
/* the blocks: A rank · B Ruf · C stamps · D rotation (one quiet grid), E orders, F exam */
.hs-guild { gap: 8px; }
.hs-guild-status { display: grid; grid-template-columns: minmax(78px, auto) minmax(0, 1fr); gap: 6px; }
.hs-guild-block { min-width: 0; padding: 6px 8px 7px; border-radius: 5px; border: 1px solid #3a2216; background: rgba(0, 0, 0, .26); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45); }
.hs-guild-block-label { margin-bottom: 4px; font: 700 10px/1.2 var(--hs-sans); letter-spacing: .12em; text-transform: uppercase; color: #c79a52; }
.hs-guild-block--rank { grid-row: span 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-color: #5a1f17; background: radial-gradient(circle at 50% 55%, rgba(155, 42, 33, .3), rgba(0, 0, 0, .3) 70%); }
.hs-guild-rankbadge { display: block; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.hs-guild-block--rep, .hs-guild-block--stamps, .hs-guild-block--rotation { grid-column: 2; }
.hs-guild-rep { display: block; }
.hs-guild-rep-num { font: 700 13px var(--hs-serif); color: var(--hs-text); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.hs-guild-block .hs-guild-rep-bar { height: 10px; border-radius: 2px; border: 1px solid #6b4224; background: var(--hs-wood-0); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7); overflow: hidden; }
.hs-guild-block .hs-guild-rep-fill { background: linear-gradient(180deg, #f2c46e, #c98a2e); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3); }
.hs-guild-seals { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 4px; }
.hs-guild-seals .hs-guild-seal:not(.is-earned) { background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px #6a3a2c; }
.hs-guild-seals .hs-guild-seal:not(.is-earned)::after { display: none; }
.hs-guild-seals .hs-guild-seal.is-today { box-shadow: 0 0 0 1px #3a120c, 0 0 0 2px var(--hs-gold), inset 2px 2px 0 #c2483a, inset -2px -2px 0 #5e1a12; }
.hs-guild-block .hs-guild-stamps { flex-wrap: wrap; gap: 2px 8px; }
.hs-guild-block .hs-guild-countdown { font: 700 12px var(--hs-serif); color: var(--hs-text); }
.hs-guild-rot-note { font-size: 10.5px; }
.hs-guild-block--orders, .hs-guild-block--exam { background: rgba(0, 0, 0, .18); }
/* E) orders: "schwer" weighs visibly more than "leicht" (same palette – weight, rail and type, not colour spam) */
.hs-guild-orders { display: grid; gap: 4px; }
.hs-guild-orders .hs-guild-order { margin: 0; }
.hs-guild-order--light { border-color: #3d2a1c; background: rgba(28, 18, 11, .7); }
.hs-guild-order--light .hs-guild-order-text { color: #d9c8b1; }
.hs-guild-order--medium { border-left: 3px solid var(--hs-copper-hi); }
.hs-guild-order--heavy { border-color: #6a2b1d; border-left: 4px solid #b5452f; padding: 7px 8px; background: linear-gradient(90deg, rgba(155, 42, 33, .22), var(--hs-wood-1) 65%); box-shadow: 0 1px 0 #0b0604; }
.hs-guild-order--heavy .hs-guild-order-text { font-weight: 700; font-size: 13px; }
.hs-guild-size { padding: 0 4px; border-radius: 2px; border: 1px solid #4a2f1c; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.hs-guild-order--heavy .hs-guild-size { border-color: #8e3a28; color: #f0a083; font-weight: 700; }
.hs-guild-order.is-done { border-color: var(--hs-good); }
/* F) the exam / next rank */
.hs-guild-block--exam .hs-guild-next, .hs-guild-block--exam .hs-guild-exam { border-color: #7a5a2e; background: linear-gradient(180deg, #24170f, #1a100a); }
.hs-guild-next.is-eligible { border-color: #c9a04a; box-shadow: inset 0 0 0 1px rgba(232, 184, 90, .25); }
.hs-guild-block--intro { display: grid; gap: 6px; }
@media (max-width: 420px) {
  .hs-guild-head { gap: 9px; padding: 7px 8px; }
  .hs-guild-crest { width: 46px; height: 48px; }
  .hs-guild-head .hs-guild-title { font-size: 14px; }
  .hs-guild-status { grid-template-columns: minmax(0, 1fr); }
  .hs-guild-block--rank { grid-row: auto; flex-direction: row; justify-content: flex-start; gap: 12px; }
  .hs-guild-block--rep, .hs-guild-block--stamps, .hs-guild-block--rotation { grid-column: auto; }
  .hs--v2 .hs-bottom > .hs-panel > .hs-section-title { font-size: 13px; letter-spacing: .05em; }
}
/* rank-up: the guild crest behind the badges (quiet, no neon), the GILDE stamp on top */
.hs-rankup-card { border-color: #9b6a2e; box-shadow: 0 0 0 2px #2a0f0b, 0 0 0 3px rgba(155, 42, 33, .7), 0 8px 24px rgba(0, 0, 0, .6); }
.hs-rankup-stage { height: 120px; }
.hs-rankup-crest { position: absolute; z-index: 0; left: 50%; top: 0; width: auto; height: 120px; transform: translateX(-50%); opacity: .2; pointer-events: none; }

/* ════ v0.26.0 V2 ABENTEUER – live window (only .hs-feed.is-v2, built for feature_set 2) ════════════════════ */
.hs-feed.is-v2 { border: 1px solid #4a1f14; box-shadow: none; } /* v0.26.3-rc3: the window frame (border-image, block "ABENTEUER-FENSTER") replaces the inset lines */
.hs-feed.is-v2 .hs-feed-head { padding-bottom: 3px; border-bottom: 1px solid rgba(240, 160, 131, .18); }
.hs-feed.is-v2 .hs-feed-title { font-size: 14px; letter-spacing: .04em; color: #f3c58a; }
.hs-feed.is-v2 .hs-feed-scene { box-shadow: inset 0 0 0 2px #1a0d08, inset 0 0 0 3px rgba(168, 67, 42, .45); }
/* v0.26.1 parallax (replaces the 104 % drift): FAR / MID / NEAR layers over the static picture, 1:1 (never scaled),
   clipped to the 240 × 100 stage; the JS only moves each layer within (-tile, 0] while Hässlon walks */
.hs-feed.is-v2 .hs-feed-plx { position: absolute; inset: 0; overflow: hidden; }
.hs-feed.is-v2 .hs-feed-layer { position: absolute; left: 0; top: 0; height: 100px; background-repeat: repeat-x; background-position: 0 0; image-rendering: pixelated; will-change: transform; }
/* timeline: room under the nodes for check + variant badge (no overlap) */
.hs-feed.is-v2 .hs-feed-tl { height: 80px; }
.hs-feed.is-v2 .hs-feed-variant { bottom: auto; top: calc(100% + 18px); font-size: 8px; }
.hs-feed.is-v2 .hs-feed-state { font-size: 12px; }
/* the live report: ~5 lines, scrolls, follows the bottom (JS) */
.hs-feed.is-v2 .hs-feed-report { gap: 5px; padding: 6px 7px; border: 1px solid #2c1a10; }
.hs-feed-log { max-height: calc(5 * 1.4em + 8px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 2px; font-size: 11.5px; line-height: 1.4; scrollbar-width: thin; scrollbar-color: #6b4224 transparent; }
.hs-feed-log:focus-visible { outline: 2px solid var(--v2-focus, #ffc27a); outline-offset: 1px; }
.hs-feed-log .hs-feed-line { padding-left: 8px; position: relative; }
.hs-feed-log .hs-feed-line::before { content: ''; position: absolute; left: 0; top: .6em; width: 3px; height: 3px; background: rgba(240, 160, 131, .55); }
.hs-feed-log .hs-feed-line.is-transition::before { background: transparent; }
.hs-feed-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.hs-feed-actions[hidden] { display: none; }
.hs-feed-lootslot:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .hs-feed.is-v2 .hs-feed-layer { transform: none !important; will-change: auto; } }

/* ════ v0.26.0 HANDEL V2 – the guide to the Lumpensammler (only drawn for feature_set 2) ════════════════════════ */
.hs-trade-v2 { display: grid; gap: 6px; justify-items: start; padding: 10px 12px; border-radius: 6px; border: 1px solid #4a2f1c;
  background: radial-gradient(ellipse 50% 100% at 100% 0%, rgba(201, 138, 46, .14), transparent 70%), linear-gradient(180deg, #23170f, #170f0a); box-shadow: 0 2px 0 #0b0604, inset 0 1px 0 rgba(255, 200, 150, .05); }
.hs-trade-v2-head { display: flex; align-items: center; gap: 8px; }
.hs-trade-v2-icon { width: 18px; height: 18px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd98a, #c98a2e 55%, #6b4214); box-shadow: 0 1px 0 #0b0604, inset 0 0 0 1px rgba(0, 0, 0, .35); }
.hs-trade-v2-title { font: 700 13px var(--hs-serif); letter-spacing: .12em; color: #f3c58a; }
.hs-trade-v2-line { margin: 0; font-size: 12.5px; color: var(--hs-text); line-height: 1.4; }
.hs-trade-v2-go { margin-top: 2px; }
.hs-trade-v2-state { font-size: 12px; color: var(--hs-gold-muted); }
.hs-trade-v2-state.is-here { color: var(--hs-good); }
.hs-trade-v2-guide { display: grid; gap: 6px; justify-items: start; width: 100%; box-sizing: border-box; padding: 7px 9px; }
.hs-trade-v2-view { display: grid; gap: 4px; justify-items: start; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #4a2f1c; }
.hs-trade-v2-sub { font: 700 10px var(--hs-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--hs-muted); }
.hs-trade-v2-viewnote { font-size: 11px; }
.hs-trade-v2-oldrules { margin-top: 10px; font-size: 11px; }
.hs-btn--hub-enter.is-guided { box-shadow: 0 0 0 2px var(--hs-gold), 0 0 10px rgba(255, 179, 107, .55); }
@media (prefers-reduced-motion: no-preference) { .hs-btn--hub-enter.is-guided { animation: hs-guided 1.2s ease-in-out 2; } }
@keyframes hs-guided { 50% { box-shadow: 0 0 0 3px var(--hs-gold), 0 0 16px rgba(255, 179, 107, .8); } }

/* ════ v0.26.0 EINRICHTEN (V2 polish – same editor, clearer): own accent, sub-headings, a clear active pick ════════ */
.hs--v2 .hs-bottom > .hs-editor { --v2-accent: #8f6a3a; --v2-accent-soft: rgba(143, 106, 58, .22); --v2-accent-ink: #e6c08a; padding-top: 0; }
.hs--v2 .hs-bottom > .hs-editor > .hs-editor-bar { margin: 0 -10px 8px -13px; padding: 7px 10px 7px 12px; background: linear-gradient(90deg, var(--v2-accent-soft), transparent 72%); border-bottom: 1px solid var(--v2-ornament); }
.hs--v2 .hs-editor-bar .hs-editor-title { margin: 0; font-size: 14px; letter-spacing: .1em; color: var(--v2-heading); }
.hs--v2 .hs-editor .hs-ed-cat { margin: 10px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--v2-ornament); font: 700 11px/1.35 var(--hs-sans); letter-spacing: .03em; color: var(--v2-accent-ink); }
.hs--v2 .hs-editor .hs-ed-cat:first-child { margin-top: 2px; }
.hs--v2 .hs-editor .hs-ed-item.is-active { outline: 2px solid var(--v2-focus); outline-offset: 1px; }
.hs--v2 .hs-editor .hs-editor-preview { border-color: #4a2f1c; }
.hs--v2 .hs-editor .hs-ed-chips [role="tab"][aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--v2-accent-ink); }

/* ════ v0.26.1 V2 DIALOGS INSIDE THE TILE (v2-dialog.js – Lumpensammler, Lootkatalog, every V2 dialog) ════════════
   absolute inside the widget root (.hs is position: relative + overflow: clip): only the Hässlon content is dimmed,
   never the dashboard. The panel sits in the visible part of the root (top / max-height set by JS) and scrolls inside. */
.hs .hs-dlg-host { position: absolute; inset: 0; z-index: 70; display: block; padding: 0; background: rgba(12, 7, 4, .66); place-items: initial; }
.hs .hs-dlg-panel { position: absolute; left: 50%; transform: translateX(-50%); top: 10px; width: min(calc(100% - 20px), 460px); max-height: calc(100% - 20px);
  overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; zoom: var(--hs-font-scale, 1); scrollbar-width: thin; scrollbar-color: #6b4224 transparent;
  background: linear-gradient(180deg, #2a1b11, #1a110b); border: 2px solid #5e3a20; border-radius: 8px; box-shadow: 0 0 0 1px #0b0604, 0 10px 30px rgba(0, 0, 0, .65); }
.hs .hs-dlg-panel:focus { outline: none; }
.hs .hs-dlg-panel:focus-visible { outline: 2px solid var(--hs-gold); outline-offset: 1px; }
.hs .hs-dlg-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(180deg, #2f1e13, #24170f); border-bottom: 1px solid rgba(240, 210, 168, .14); }
.hs .hs-dlg-title { flex: 1; min-width: 0; margin: 0; font: 700 14px/1.2 var(--hs-serif); letter-spacing: .1em; text-transform: uppercase; color: #f3c58a; overflow-wrap: anywhere; }
.hs .hs-dlg-close { flex: none; }
.hs .hs-dlg-body { padding: 8px 10px 10px; font-size: 13px; line-height: 1.4; }
/* the merchant window inside the rule: the panel is the .hs-lumpen box itself */
.hs .hs-lumpen-host.hs-dlg-host .hs-lumpen.hs-dlg-panel { width: min(calc(100% - 20px), 440px); padding: 10px; }

/* v0.26.1 V2 merchant readability (inside the dialog rule): no mini fonts – the body text reads well at "Normal" and
   everything follows the text-size option (the panel is zoomed by --hs-font-scale) */
.hs .hs-lumpen.hs-dlg-panel { gap: 8px; font-size: 13.5px; }
.hs .hs-lumpen.hs-dlg-panel .hs-lumpen-title { font-size: 15px; letter-spacing: .12em; }
.hs .hs-lumpen.hs-dlg-panel :is(.hs-shop-meta, .hs-shop-rule, .hs-lumpen-stock, .hs-shop-gearkind, .hs-shop-gearhint, .hs-shop-gearhead) { font-size: 12px; }
.hs .hs-lumpen.hs-dlg-panel :is(.hs-shop-countdown, .hs-shop-price, .hs-lumpen-decides, .hs-lumpen-note, .hs-lumpen-binding, .hs-lumpen-phase, .hs-lumpen-good, .hs-lumpen-counter-h, .hs-lumpen-count) { font-size: 12.5px; }
.hs .hs-lumpen.hs-dlg-panel :is(.hs-shop-away, .hs-shop-note, .hs-shop-gearnote, .hs-lumpen-error, .hs-lumpen-wallet, .hs-lumpen-hoped) { font-size: 13px; }
.hs .hs-lumpen.hs-dlg-panel :is(.hs-shop-name, .hs-lumpen-name, .hs-lumpen-line, .hs-lumpen-none, .hs-lumpen-away) { font-size: 14px; }
.hs .hs-lumpen.hs-dlg-panel :is(.hs-shop-head, .hs-lumpen-head, .hs-lumpen-hope, .hs-lumpen-seconds) { font-size: 14.5px; }
.hs .hs-lumpen.hs-dlg-panel .hs-shop-name { white-space: normal; overflow-wrap: anywhere; }
.hs .hs-lumpen.hs-dlg-panel .hs-shop-meta { white-space: normal; }
.hs .hs-lumpen.hs-dlg-panel .hs-btn { font-size: 12.5px; }
.hs .hs-lumpen.hs-dlg-panel .hs-lumpen-bar { position: sticky; top: -10px; z-index: 1; margin: -10px -10px 0; padding: 8px 10px; background: linear-gradient(180deg, #2f1e13, #24170f); border-bottom: 1px solid rgba(240, 210, 168, .14); }

/* ════ v0.26.1 V2 AUSRÜSTUNG – slot list (adventure-view.js gearPicker) ═════════════════════════════════════════ */
.hs-adv-slot-pick { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid #5e3a20; border-radius: 4px; background: rgba(0, 0, 0, .25); color: var(--hs-gold-muted); font: 700 11px var(--hs-sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.hs-adv-slot-pick::after { content: '▾'; font-size: 10px; color: var(--hs-copper-hi); }
.hs-adv-slot-pick.is-open { border-color: var(--hs-gold); color: var(--hs-gold); }
.hs-adv-slot-pick.is-open::after { content: '▴'; }
.hs-adv-slot-pick:hover { border-color: var(--hs-copper-hi); }
.hs-adv-slot-pick:focus-visible { outline: 2px solid var(--hs-gold); outline-offset: 1px; }
.hs-adv-slot-picklist { list-style: none; }
.hs-adv-gearpick { margin: -2px 0 6px 10px; padding: 6px 8px; border-left: 2px solid var(--hs-copper-hi); border-radius: 0 5px 5px 0; background: rgba(0, 0, 0, .22); }
.hs-adv-gearpick-head { font: 700 10.5px var(--hs-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--hs-muted); margin-bottom: 4px; }
.hs-adv-gearpick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hs-adv-gearpick-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid #3a2416; border-radius: 4px; background: rgba(28, 18, 11, .7); }
.hs-adv-gearpick-row.is-current { border-color: var(--hs-gold); background: rgba(255, 179, 107, .07); }
.hs-adv-gearpick-info { display: flex; flex-direction: column; min-width: 0; }
.hs-adv-gearpick-name { font-weight: 700; font-size: 12.5px; overflow-wrap: anywhere; }
.hs-adv-gearpick-facts { font-size: 11.5px; color: var(--hs-muted); }
.hs-adv-gearpick-cur { color: var(--hs-gold); border-color: var(--hs-gold); white-space: nowrap; }
.hs-adv-gearpick-empty { font-size: 12.5px; font-style: italic; color: var(--hs-gold-muted); }

/* ════ v0.26.1 V2 live report story lines + result card (adventure-feed.js) ═════════════════════════════════════ */
.hs-feed-log .hs-feed-line.is-encounter_started, .hs-feed-log .hs-feed-line.is-boss_started { color: #f3dcb8; font-weight: 600; }
.hs-feed-log .hs-feed-line.is-travel { color: var(--hs-muted); font-style: italic; }
.hs-feed-log .hs-feed-line.is-sub { padding-left: 16px; color: var(--hs-muted); font-style: italic; }
.hs-feed-log .hs-feed-line.is-sub::before { display: none; }
.hs-feed-log .hs-feed-line.is-enemy_defeated { color: #cfe8b0; }
.hs-feed-result { position: absolute; z-index: 5; left: 50%; top: 10px; transform: translateX(-50%); width: min(calc(100% - 20px), 300px); padding: 7px 10px 8px; border-radius: 6px; text-align: center;
  background: linear-gradient(180deg, rgba(42, 27, 17, .94), rgba(26, 17, 11, .94)); border: 2px solid #8a5530; box-shadow: 0 0 0 1px #0b0604, 0 6px 16px rgba(0, 0, 0, .55); }
.hs-feed-result[hidden] { display: none; }
.hs--v2 .hs-feed-result { box-shadow: none; } /* v0.26.3-rc3: the kit panel frame (block "ABENTEUER-FENSTER") replaces the shadow */
.hs-feed-result-title { font: 700 14px/1.2 var(--hs-serif); letter-spacing: .08em; color: #f3c58a; }
.hs-feed-result.is-success { border-color: #6f9a48; } .hs-feed-result.is-success .hs-feed-result-title { color: #cfe8a0; }
.hs-feed-result.is-defeat { border-color: #a8432a; } .hs-feed-result.is-defeat .hs-feed-result-title { color: #ffb3a3; }
.hs-feed-result-facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; font-size: 11.5px; color: var(--hs-text); }
@media (prefers-reduced-motion: no-preference) { .hs-feed-result:not([hidden]) { animation: hs-feed-result-in .25s ease-out; } }
@keyframes hs-feed-result-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ════ v0.26.1 V2 SECTION OPEN / CLOSE – ONE system for every foldable main section (<details> in .hs-bottom) ═══════
   Native <details> (aria-expanded / keyboard / no focus in a closed body stay the browser's), animated through its
   ::details-content box: ~160 ms ease-out height reveal + a light fade, no bounce, no slide. Reduced motion: instant.
   Browsers without ::details-content simply open instantly (as before). */
@media (prefers-reduced-motion: no-preference) {
  .hs--v2 .hs-bottom { interpolate-size: allow-keywords; }
  .hs--v2 .hs-bottom > details::details-content { height: 0; opacity: 0; overflow: clip;
    transition: height 160ms ease-out, opacity 160ms ease-out, content-visibility 160ms allow-discrete; }
  .hs--v2 .hs-bottom > details[open]::details-content { height: auto; opacity: 1; overflow: visible; }
}

/* v0.25.8-rc2 graffiti readability: a 1 px dark shadow (pixel style, no glow) – box / hitbox unchanged */
/* ── v0.26.1 LOOTKATALOG (inside the shared V2 dialog .hs-dlg-body) ───────────────────────────────────────────── */
.hs .hs-adv-area-loot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hs .hs-adv-area-loot-text { flex: 1 1 160px; min-width: 0; }
.hs .hs-adv-lootcat-btn { flex: none; letter-spacing: .08em; font-weight: 700; }
.hs .hs-adv-lootcat-count { font-weight: 400; opacity: .8; letter-spacing: 0; }
.hs .hs-lootcat.hs-dlg-panel { width: min(calc(100% - 20px), 480px); }
.hs .hs-lootcat-intro { margin: 0 0 6px; font-size: 12px; }
.hs .hs-lootcat-total { font-weight: 700; color: #f3c58a; margin: 0 0 8px; }
.hs .hs-lootcat-cat { margin: 0 0 10px; }
.hs .hs-lootcat-cat-head { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 4px; padding: 3px 6px; font: 700 12px/1.3 var(--hs-serif); letter-spacing: .1em; color: #e9b77a; background: var(--hs-wood-0); border: 1px solid var(--hs-copper); border-radius: 3px; }
.hs .hs-lootcat-cat-count { color: var(--hs-text); letter-spacing: 0; }
.hs .hs-lootcat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 4px; }
.hs .hs-lootcat-entry { display: flex; gap: 6px; align-items: flex-start; min-width: 0; padding: 4px 5px; border: 1px solid #3d2a1c; border-radius: 3px; background: rgba(28, 18, 11, .7); }
.hs .hs-lootcat-entry.is-here { border-color: var(--hs-copper-hi); background: var(--hs-wood-1); }
.hs .hs-lootcat-entry.is-known { opacity: .85; border-style: dashed; }
.hs .hs-lootcat-entry.is-hidden { opacity: .7; }
.hs .hs-lootcat-entry .hs-loot-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.hs .hs-lootcat-entry .hs-loot-icon img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.hs .hs-lootcat-list.is-compact { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 3px; margin-top: 4px; }
.hs .hs-lootcat-list.is-compact .hs-lootcat-entry { align-items: center; gap: 4px; padding: 2px 4px; }
.hs .hs-lootcat-list.is-compact .hs-lootcat-sil { flex-basis: 16px; width: 16px; height: 16px; font-size: 10px; }
.hs .hs-lootcat-entry .hs-loot-icon-fb { width: 14px; height: 14px; }
.hs .hs-lootcat-gear { flex: 0 0 24px; display: grid; place-items: center; }
.hs .hs-lootcat-sil { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; font: 700 14px var(--hs-serif); color: #5a4330; background: #160e08; border: 1px solid #3d2a1c; border-radius: 3px; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .7); }
.hs .hs-lootcat-text { flex: 1; min-width: 0; }
.hs .hs-lootcat-name { font-weight: 700; overflow-wrap: anywhere; }
.hs .hs-lootcat-entry.is-hidden .hs-lootcat-name { color: var(--hs-muted); letter-spacing: .2em; }
.hs .hs-lootcat-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 11px; color: var(--hs-muted); }
.hs .hs-lootcat-flag { font-size: 11px; }
.hs .hs-lootcat-flag.is-here { color: var(--hs-good); }
.hs .hs-lootcat-flag.is-known { color: var(--hs-muted); font-style: italic; }
.hs .hs-lootcat-desc { font-size: 11.5px; color: #d9c8b1; margin-top: 2px; overflow-wrap: anywhere; }
.hs .hs-lootcat-error { color: #f0a083; }

/* ── v0.26.1 GUILD MISSION ACCEPTANCE – 3 slots (existing guild style, no neon) ──────────────────────────────── */
.hs .hs-guild-orders-note { font-size: 11px; margin: 0 0 4px; }
.hs .hs-guild-slot-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 11px; color: var(--hs-muted); margin-bottom: 2px; }
.hs .hs-guild-slot-no { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hs .hs-guild-slot-state { padding: 0 5px; border: 1px solid #5a3d27; border-radius: 2px; }
.hs .hs-guild-slot-state--accepted { color: #e9b77a; border-color: var(--hs-copper); }
.hs .hs-guild-slot-state--claimable { color: #fff4e6; background: #93300f; border-color: #e07b3c; }
.hs .hs-guild-slot--wait, .hs .hs-guild-slot--none { border-style: dashed; border-color: #3d2a1c; background: rgba(20, 13, 8, .6); }
.hs .hs-guild-slot-wait { font-style: italic; }
.hs .hs-guild-slot-opens { font-size: 11px; }
.hs .hs-guild-slot--accepted { border-left: 3px solid var(--hs-copper-hi); }
.hs .hs-guild-slot--claimable { border-color: #e07b3c; box-shadow: inset 0 0 0 1px rgba(224, 123, 60, .35); }
.hs .hs-guild-slot-pct { font-size: 11px; margin: 4px 0 1px 22px; color: var(--hs-text); }
.hs .hs-guild-slot-bar { height: 6px; margin: 0 0 2px 22px; background: var(--hs-wood-0); border: 1px solid #3d2a1c; border-radius: 2px; overflow: hidden; }
.hs .hs-guild-slot-fill { height: 100%; background: linear-gradient(180deg, #c9531c, #93300f); }
.hs .hs-guild-slot--claimable .hs-guild-slot-fill { background: linear-gradient(180deg, #e0882f, #b8561a); }
.hs .hs-guild-slot-actions { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 0 22px; }
.hs .hs-guild-slot-actions .hs-guild-claim { margin: 0; font-weight: 700; letter-spacing: .06em; padding: 5px 12px; font-size: 12.5px; }
.hs .hs-guild-cancel { color: #e9cbb0; }
.hs .hs-guild-cancel-confirm { margin: 4px 0 0 22px; padding: 6px; font-size: 12px; }
.hs .hs-guild-cancel-confirm .hs-guild-confirm-row { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
@media (max-width: 420px) {
  .hs .hs-guild-slot-actions, .hs .hs-guild-slot-pct, .hs .hs-guild-slot-bar, .hs .hs-guild-cancel-confirm { margin-left: 0; }
}
.hs-stage .hs-wallmark { filter: drop-shadow(1px 1px 0 rgba(10, 6, 3, .9)); }
/* v0.25.8-rc2 guild intro (before the join) */
.hs-guild-intro { margin: 0; font-size: 12px; color: var(--hs-text); }
.hs-guild-join { margin-top: 4px; align-self: flex-start; }

/* v0.25.9 Gear V2: kind label + rank hint + the piece's own picture */
.hs-shop-gearkind { display: block; font-size: 9px; letter-spacing: .06em; color: var(--hs-muted); }
.hs-shop-gearkind.is-rank { color: var(--hs-gold); }
.hs-shop-gearhint { display: block; font-size: 10px; }
.hs-shop-gearimg { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }

/* v0.25.9 gear icons in rows (16–20 px, pixel art) */
.hs-gear-icon, .hs-shop-gearicon { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; }
.hs-gear-icon img, .hs-shop-gearicon img { image-rendering: pixelated; }
.hs-adv-bag-row > .hs-gear-icon { margin-right: 4px; }

/* v0.26.6-rc1-npc2 GILDEN-RANGLISTE – the tab bar of the guild section + the two top-10 lists (guild-leaderboard.js).
   Narrow screens: the name block wraps (Hässlon / "von" owner on two lines) – never cut, never a horizontal scroll. */
.hs-guild-tabs { display: flex; gap: 4px; margin: 0 0 8px; border-bottom: 1px solid #3a2216; }
.hs-guild-tab { flex: 0 1 auto; min-width: 0; padding: 4px 12px 5px; border: 1px solid #3a2216; border-bottom: 0; border-radius: 5px 5px 0 0; background: rgba(0, 0, 0, .22); color: var(--hs-muted); font: 700 12px/1.2 var(--hs-sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; margin-bottom: -1px; }
.hs-guild-tab:hover, .hs-guild-tab:focus-visible { color: var(--hs-gold-muted); outline: 2px solid var(--hs-copper-hi); outline-offset: -2px; }
.hs-guild-tab.is-active { background: var(--hs-wood-2); color: var(--hs-gold); border-color: var(--hs-copper); cursor: default; }
.hs-lb { display: grid; gap: 8px; min-width: 0; }
.hs-lb-block { min-width: 0; }
.hs-lb-note { font-size: 11px; margin: -2px 0 4px; }
.hs-lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hs-lb-row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 3px 6px; border-radius: 4px; background: rgba(0, 0, 0, .18); min-width: 0; }
.hs-lb-row:nth-child(-n+3) .hs-lb-place { color: var(--hs-gold); }
.hs-lb-row.is-me { background: rgba(255, 179, 107, .14); box-shadow: inset 0 0 0 1px var(--hs-copper-hi); }
.hs-lb-place { font: 700 13px/1.2 var(--hs-serif, serif); color: var(--hs-gold-muted); text-align: right; }
.hs-lb-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.hs-lb-pet { font-weight: 700; color: var(--hs-text); overflow-wrap: anywhere; min-width: 0; }
.hs-lb-owner { font-size: 11px; color: var(--hs-muted); overflow-wrap: anywhere; min-width: 0; }
.hs-lb-you { font: 700 9px/14px var(--hs-sans); letter-spacing: .08em; text-transform: uppercase; color: #1c120b; background: var(--hs-gold); border-radius: 3px; padding: 0 4px; }
.hs-lb-value { display: flex; align-items: center; gap: 5px; justify-content: flex-end; white-space: nowrap; }
.hs-lb-value--time { flex-direction: column; align-items: flex-end; gap: 0; }
.hs-lb-rank { font-size: 12px; color: var(--hs-gold-muted); }
.hs-lb-time { font: 700 12px/1.25 var(--hs-sans); color: var(--hs-text); }
.hs-lb-rank-small { font-size: 10px; color: var(--hs-muted); }
.hs-lb-badge { image-rendering: pixelated; flex: none; }
.hs-lb-me { margin-top: 5px; padding: 3px 6px; border-top: 1px dashed #5b3a22; font-size: 12px; color: var(--hs-gold-muted); overflow-wrap: anywhere; }
.hs-lb-empty { font-size: 12px; padding: 4px 2px; }
/* v0.26.6-rc1-polish1 RANG-TABS: Alle | Rang F (12) | Rang E (5) … – small chips that wrap on a phone */
.hs-lb-ranktabs { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.hs-lb-ranktab { padding: 2px 8px; border: 1px solid #5b3a22; border-radius: 10px; background: rgba(0, 0, 0, .2); color: var(--hs-muted); font: 600 11px/1.4 var(--hs-sans); cursor: pointer; white-space: nowrap; }
.hs-lb-ranktab:hover, .hs-lb-ranktab:focus-visible { color: var(--hs-gold-muted); outline: 2px solid var(--hs-copper-hi); outline-offset: -1px; }
.hs-lb-ranktab.is-active { background: var(--hs-wood-2); color: var(--hs-gold); border-color: var(--hs-copper-hi); cursor: default; }
.hs-lb-more { font-size: 11px; margin-top: 4px; }
@media (max-width: 420px) {
  .hs-guild-tab { padding: 4px 9px 5px; font-size: 11px; }
  .hs-lb-row { grid-template-columns: 1.8em minmax(0, 1fr) auto; padding: 3px 4px; gap: 2px 6px; }
  .hs-lb-names { flex-direction: column; align-items: flex-start; }
  .hs-lb-value .hs-lb-badge { display: none; }
}

/* ════ v0.26.1-rc2 TUTORIAL SPOTLIGHT + RISK (fork B) ════════════════════════════════════════════════════════════
   V2 onboarding (onboarding-v2.js, V2 savegame only – the node exists only there): a compact card in the middle of
   the ROOM box (.hs-scene – position: relative, overflow: hidden), the room behind dimmed only inside that box; never
   the page / dashboard. z-index stays inside the scene (isolation); V2 dialogs (z 70 on the root) still lie above. */
.hs--v2 .hs-scene { isolation: isolate; }
.hs .hs-onb2.hs-onb2--spot { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: center; margin: 0; padding: 6px; border: 0; border-radius: 0; background: transparent; pointer-events: none; max-width: none; grid-template-areas: none; }
.hs .hs-onb2.hs-onb2--spot[hidden] { display: none; }
.hs .hs-onb2.hs-onb2--spot.is-dim { background: rgba(10, 6, 3, .38); pointer-events: auto; }
.hs .hs-onb2-card { pointer-events: auto; box-sizing: border-box; width: min(100%, 320px); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 6px; background: linear-gradient(180deg, #2f1e13, #22160e); border: 1px solid var(--hs-copper-hi, #8a5530); outline: 1px solid rgba(0,0,0,.5); filter: drop-shadow(0 6px 9px rgba(0,0,0,.55)); }
.hs .hs-onb2-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hs .hs-onb2--spot .hs-onb2-face { font-size: 18px; line-height: 1; }
.hs .hs-onb2-title { flex: 1; min-width: 0; font: 700 11.5px/1.2 var(--hs-serif, serif); letter-spacing: .08em; text-transform: uppercase; color: #f3c58a; overflow-wrap: anywhere; }
.hs .hs-onb2--spot .hs-onb2-dots { font-size: 10.5px; }
.hs .hs-onb2--spot .hs-onb2-text { margin: 0; font-size: 13px; line-height: 1.35; }
.hs .hs-onb2--spot .hs-onb2-btns { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.hs .hs-onb2--spot .hs-onb2-back { margin-right: auto; }
/* the element a step talks about: a soft outline, no blinking */
.hs .hs-onb2-target { outline: 2px solid rgba(243, 197, 138, .85); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 420px) {
  .hs .hs-onb2.hs-onb2--spot { padding: 4px; }
  .hs .hs-onb2-card { padding: 6px 8px; gap: 4px; }
  .hs .hs-onb2--spot .hs-onb2-text { font-size: 12.5px; line-height: 1.3; }
}
/* V2 area card: the personal risk is the one badge (adventure-view.js – legacy keeps .hs-adv-diff + "Risiko: …") */
.hs .hs-adv-riskbadge { font-size: 10px; flex: 0 0 auto; font-weight: 700; }
.hs .hs-adv-riskbadge--low { color: #9fdc8f; }
.hs .hs-adv-riskbadge--medium { color: #e6c36a; }
.hs .hs-adv-riskbadge--high { color: #ffb36b; }
.hs .hs-adv-riskbadge--extreme { color: #ff8a70; }
/* ════ v0.26.1-rc3 V2 ADVENTURE SPEECH BUBBLES (adventure-feed.js _drawBark, adventure/barks.js) ════════════════
   A small dirty-parchment bubble over Hässlon inside the scene box (V2 only – the node exists only in the V2 feed).
   Dark edge, a 2-step pixel tail towards him, no glow, no bounce; it follows the text size (the scene sits in the
   zoomed .hs-bottom). Max 3 lines; narrower on small scenes. Fade only (reduced motion: none). */
.hs .hs-feed-scene .hs-adv-bark { position: absolute; z-index: 3; left: 0; top: 0; box-sizing: border-box; max-width: min(15em, 46%); width: max-content; padding: 3px 7px 4px; background: #efe2bf; color: #2a1a0e; border: 2px solid #3a2414; border-radius: 3px; font: 600 12px/1.25 var(--hs-sans, system-ui, sans-serif); letter-spacing: .01em; pointer-events: none; opacity: 1; transition: opacity .18s ease-out; outline: 1px solid rgba(239, 226, 191, .25); }
.hs .hs-feed-scene .hs-adv-bark[hidden] { display: none; }
.hs .hs-feed-scene .hs-adv-bark__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.hs .hs-feed-scene .hs-adv-bark::before, .hs .hs-feed-scene .hs-adv-bark::after { content: ''; position: absolute; left: calc(var(--tail-x, 50%) - 4px); width: 0; height: 0; border-style: solid; }
.hs .hs-feed-scene .hs-adv-bark::before { top: 100%; border-width: 6px 4px 0 4px; border-color: #3a2414 transparent transparent transparent; }
.hs .hs-feed-scene .hs-adv-bark::after { top: calc(100% - 3px); left: calc(var(--tail-x, 50%) - 2px); border-width: 4px 2px 0 2px; border-color: #efe2bf transparent transparent transparent; }
.hs .hs-feed-scene .hs-adv-bark.is-side::before { top: 8px; left: -8px; border-width: 4px 6px 4px 0; border-color: transparent #3a2414 transparent transparent; }
.hs .hs-feed-scene .hs-adv-bark.is-side::after { top: 10px; left: -4px; border-width: 2px 4px 2px 0; border-color: transparent #efe2bf transparent transparent; }
.hs .hs-feed-scene .hs-adv-bark--loot { background: #f4e7b8; }
@media (max-width: 420px) { .hs .hs-feed-scene .hs-adv-bark { max-width: min(12em, 52%); font-size: 11.5px; padding: 2px 6px 3px; } }
@media (prefers-reduced-motion: reduce) { .hs .hs-feed-scene .hs-adv-bark { transition: none; } }
/* ════ v0.26.1-rc4 V2: no adventure before the guild join – the one hint above the (locked) areas ═══════════════ */
.hs .hs-adv-guildfirst { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 8px; padding: 6px 8px; border: 1px solid #8a5530; border-radius: 4px; background: rgba(60, 34, 14, .55); color: #f0d9b0; font-size: 12.5px; line-height: 1.35; }
.hs .hs-adv-guildfirst-text { flex: 1 1 14em; min-width: 0; }
.hs .hs-adv-guildfirst-btn { flex: none; }
/* ════ v0.26.2 V2 UI-KIT (assets/ui/v2/ – generated by tools/build-v2-ui-kit.mjs; guide: V0262_UI_ASSET_GUIDE.md) ════
   Feature set 2 only: every selector starts with .hs--v2 – a legacy widget never matches, so it never loads one of
   these images. Text is always DOM (headers, buttons, tabs, badges, bubbles). 9-slices: border-image (corners keep
   their size, edges stretch along one axis only, the centre fills); motifs / ornaments are separate layers.
   Hierarchy: L1 hero (Abenteuer, Gilde, dialogs) · L2 calm (Versorgung, Berichte, Aussehen, Nachbarschaft) · L3 cards. */
.hs--v2 { --hs-ui-border: 2px; --hs-ui-radius: 6px; --hs-ui-gap: clamp(4px, 1.2vw, 8px); --hs-ui-icon-size: 18px; --hs-ui-ornament-scale: 1; --hs-ui-btn-h: 32px; --hs-ui-gold: #f6d18b; --hs-ui-gold-hi: #ffe2a3; --hs-ui-ink: #2a160b; --hs-ui-wood: #2b1a10; --hs-ui-edge: #8a5530; }
.hs--v2 .hs-bottom { container: hsb / inline-size; --hs-ui-header-height: 50px; }
/* ui-kit:generated:start – tools/build-v2-ui-kit.mjs (do not edit by hand) */
.hs--v2 .hs-adv { --hdr-l: url("assets/ui/v2/headers/adventure-left.png"); --hdr-r: url("assets/ui/v2/headers/adventure-right.png"); --hdr-cl: url("assets/ui/v2/headers/adventure-cap-l.png"); --hdr-cr: url("assets/ui/v2/headers/adventure-cap-r.png"); --hdr-s: url("assets/ui/v2/headers/adventure-strip.png"); --hdr-arl: 1.743; --hdr-arr: 1.703; --hdr-arcl: 0.284; --hdr-arcr: 0.324; }
.hs--v2 .hs-guild-sec { --hdr-l: url("assets/ui/v2/headers/guild-left.png"); --hdr-r: url("assets/ui/v2/headers/guild-right.png"); --hdr-cl: url("assets/ui/v2/headers/guild-cap-l.png"); --hdr-cr: url("assets/ui/v2/headers/guild-cap-r.png"); --hdr-s: url("assets/ui/v2/headers/guild-strip.png"); --hdr-arl: 1.743; --hdr-arr: 0.716; --hdr-arcl: 0.257; --hdr-arcr: 0.243; }
.hs--v2 .hs-loo { --hdr-l: url("assets/ui/v2/headers/care-left.png"); --hdr-r: url("assets/ui/v2/headers/care-right.png"); --hdr-cl: url("assets/ui/v2/headers/care-cap-l.png"); --hdr-cr: url("assets/ui/v2/headers/care-cap-r.png"); --hdr-s: url("assets/ui/v2/headers/care-strip.png"); --hdr-arl: 1.824; --hdr-arr: 1.703; --hdr-arcl: 0.311; --hdr-arcr: 0.446; }
.hs--v2 .hs-reports { --hdr-l: url("assets/ui/v2/headers/reports-left.png"); --hdr-r: url("assets/ui/v2/headers/reports-right.png"); --hdr-cl: url("assets/ui/v2/headers/reports-cap-l.png"); --hdr-cr: url("assets/ui/v2/headers/reports-cap-r.png"); --hdr-s: url("assets/ui/v2/headers/reports-strip.png"); --hdr-arl: 2.216; --hdr-arr: 1.797; --hdr-arcl: 0.297; --hdr-arcr: 0.405; }
.hs--v2 .hs-hood { --hdr-l: url("assets/ui/v2/headers/neighbours-left.png"); --hdr-r: url("assets/ui/v2/headers/neighbours-right.png"); --hdr-cl: url("assets/ui/v2/headers/neighbours-cap-l.png"); --hdr-cr: url("assets/ui/v2/headers/neighbours-cap-r.png"); --hdr-s: url("assets/ui/v2/headers/neighbours-strip.png"); --hdr-arl: 2.149; --hdr-arr: 2.203; --hdr-arcl: 0.459; --hdr-arcr: 0.365; }
.hs--v2 .hs-looks { --hdr-l: url("assets/ui/v2/headers/looks-left.png"); --hdr-r: url("assets/ui/v2/headers/looks-right.png"); --hdr-cl: url("assets/ui/v2/headers/looks-cap-l.png"); --hdr-cr: url("assets/ui/v2/headers/looks-cap-r.png"); --hdr-s: url("assets/ui/v2/headers/looks-strip.png"); --hdr-arl: 2.014; --hdr-arr: 1.703; --hdr-arcl: 0.378; --hdr-arcr: 0.432; }
.hs--v2 .hs-ui-trade { --hdr-l: url("assets/ui/v2/headers/trade-left.png"); --hdr-r: url("assets/ui/v2/headers/trade-right.png"); --hdr-cl: url("assets/ui/v2/headers/trade-cap-l.png"); --hdr-cr: url("assets/ui/v2/headers/trade-cap-r.png"); --hdr-s: url("assets/ui/v2/headers/trade-strip.png"); --hdr-arl: 2.160; --hdr-arr: 2.110; --hdr-arcl: 0.570; --hdr-arcr: 0.630; }
.hs--v2 .hs-raids { --hdr-l: url("assets/ui/v2/headers/raids-left.png"); --hdr-r: url("assets/ui/v2/headers/raids-right.png"); --hdr-cl: url("assets/ui/v2/headers/raids-cap-l.png"); --hdr-cr: url("assets/ui/v2/headers/raids-cap-r.png"); --hdr-s: url("assets/ui/v2/headers/raids-strip.png"); --hdr-arl: 1.838; --hdr-arr: 1.662; --hdr-arcl: 0.432; --hdr-arcr: 0.486; }
.hs--v2 .hs-rel { --hdr-l: url("assets/ui/v2/headers/relations-left.png"); --hdr-r: url("assets/ui/v2/headers/relations-right.png"); --hdr-cl: url("assets/ui/v2/headers/relations-cap-l.png"); --hdr-cr: url("assets/ui/v2/headers/relations-cap-r.png"); --hdr-s: url("assets/ui/v2/headers/relations-strip.png"); --hdr-arl: 2.162; --hdr-arr: 1.730; --hdr-arcl: 0.257; --hdr-arcr: 0.405; }
.hs--v2 .hs-chronik { --hdr-l: url("assets/ui/v2/headers/chronik-left.png"); --hdr-r: url("assets/ui/v2/headers/chronik-right.png"); --hdr-cl: url("assets/ui/v2/headers/chronik-cap-l.png"); --hdr-cr: url("assets/ui/v2/headers/chronik-cap-r.png"); --hdr-s: url("assets/ui/v2/headers/chronik-strip.png"); --hdr-arl: 2.230; --hdr-arr: 1.649; --hdr-arcl: 0.432; --hdr-arcr: 0.500; }
/* ui-kit:generated:end */

/* ── L0 SECTION HEADERS: motif | cap | stretched strip (title as DOM) | cap | motif ─────────────────────────────── */
.hs--v2 :is(.hs-adv, .hs-guild-sec, .hs-loo, .hs-reports, .hs-hood, .hs-looks, .hs-raids, .hs-rel, .hs-chronik) { --hdr-h: var(--hs-ui-header-height); --hdr-wl: calc(var(--hdr-h) * var(--hdr-arl)); --hdr-wr: calc(var(--hdr-h) * var(--hdr-arr)); --hdr-wcl: calc(var(--hdr-h) * var(--hdr-arcl)); --hdr-wcr: calc(var(--hdr-h) * var(--hdr-arcr)); }
.hs--v2 .hs-bottom > :is(.hs-adv, .hs-guild-sec, .hs-loo, .hs-reports, .hs-looks, .hs-raids, .hs-rel, .hs-chronik) > .hs-section-title,
.hs--v2 .hs-bottom > .hs-hood > .hs-target-head > .hs-section-title { position: relative; display: flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: var(--hdr-h); margin: 0; padding: 0 calc(var(--hdr-wr) + var(--hdr-wcr) + 4px) 0 calc(var(--hdr-wl) + var(--hdr-wcl) + 4px); border: 0; border-radius: 0; background-color: transparent; background-image: var(--hdr-l), var(--hdr-r), var(--hdr-cl), var(--hdr-cr), var(--hdr-s); background-repeat: no-repeat; background-size: auto 100%, auto 100%, auto 100%, auto 100%, calc(100% - var(--hdr-wl) - var(--hdr-wr) - var(--hdr-wcl) - var(--hdr-wcr) + 2px) 100%; background-position: left center, right center, var(--hdr-wl) center, right var(--hdr-wr) center, calc(var(--hdr-wl) + var(--hdr-wcl) - 1px) center; color: var(--hs-ui-gold); font: 700 15px/1.15 var(--hs-serif, Georgia, serif); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 0 var(--hs-ui-ink), 1px 1px 0 #000; image-rendering: auto; }
.hs--v2 .hs-bottom > :is(.hs-adv, .hs-guild-sec, .hs-loo, .hs-reports, .hs-looks, .hs-raids, .hs-rel, .hs-chronik) > .hs-section-title > :first-child,
.hs--v2 .hs-bottom > .hs-hood > .hs-target-head > .hs-section-title { min-width: 0; }
.hs--v2 :is(.hs-adv, .hs-guild-sec, .hs-loo, .hs-reports, .hs-looks, .hs-hood, .hs-raids, .hs-rel, .hs-chronik) .hs-section-title .hs-icon { display: none; }
.hs--v2 .hs-bottom > :is(.hs-adv, .hs-guild-sec, .hs-loo, .hs-reports, .hs-looks, .hs-raids, .hs-rel, .hs-chronik) > summary.hs-section-title::-webkit-details-marker { display: none; }
.hs--v2 .hs-bottom > :is(.hs-adv, .hs-guild-sec, .hs-loo, .hs-reports, .hs-looks, .hs-raids, .hs-rel, .hs-chronik) > summary.hs-section-title { list-style: none; cursor: pointer; }
.hs--v2 .hs-bottom > :is(.hs-adv, .hs-guild-sec, .hs-loo, .hs-reports, .hs-looks, .hs-raids, .hs-rel, .hs-chronik) > summary.hs-section-title:hover { color: var(--hs-ui-gold-hi); }
.hs--v2 .hs-bottom > :is(.hs-adv, .hs-guild-sec, .hs-loo, .hs-reports, .hs-looks, .hs-raids, .hs-rel, .hs-chronik) > summary.hs-section-title:focus-visible { outline: 2px solid var(--hs-ui-gold-hi); outline-offset: -4px; }
/* the small status on the right of a closed header (Abenteuer "Unterwegs · 42 %", Gilde "Rang F · 2 Aufträge", Berichte "2 neu") */
.hs--v2 .hs-section-title .hs-badge, .hs--v2 .hs-section-title .hs-adv-status, .hs--v2 .hs-section-title .hs-ui-meta { margin-left: auto; flex: none; font: 600 11px/1 var(--hs-sans, system-ui, sans-serif); letter-spacing: .02em; text-transform: none; text-shadow: none; }
/* narrow (the 408-px tile, phones): no motifs – caps + plaque only, the section icon comes back */
@container hsb (max-width: 560px) {
  .hs--v2 :is(.hs-adv, .hs-guild-sec, .hs-loo, .hs-reports, .hs-hood, .hs-looks, .hs-raids, .hs-rel, .hs-chronik) { --hs-ui-header-height: 40px; --hdr-wl: 0px; --hdr-wr: 0px; }
  .hs--v2 .hs-bottom > :is(.hs-adv, .hs-guild-sec, .hs-loo, .hs-reports, .hs-looks, .hs-raids, .hs-rel, .hs-chronik) > .hs-section-title,
  .hs--v2 .hs-bottom > .hs-hood > .hs-target-head > .hs-section-title { background-image: none, none, var(--hdr-cl), var(--hdr-cr), var(--hdr-s); font-size: 13px; letter-spacing: .05em; }
  .hs--v2 :is(.hs-adv, .hs-guild-sec, .hs-loo, .hs-reports, .hs-looks, .hs-hood, .hs-raids, .hs-rel, .hs-chronik) .hs-section-title .hs-icon { display: inline-flex; }
}
/* v0.26.3-rc4 Raids, Bekanntschaften, Chronik: their own tavern banners in the SAME system as every main section (the old plain plaque is gone) */
/* ── HEADER STATES (v0.26.2-rc3): the kit art stays in EVERY state – same image, frame, size, padding; only the light
   changes. normal → hover a little brighter + a soft copper glow → open a clearer accent → focus-visible a thin gold outline.
   filter / outline never move a pixel; the summaries hold only text + badges (no tooltip a filter could trap). */
.hs--v2 .hs-bottom > .hs-panel > summary.hs-section-title { transition: filter .12s ease-out; }
.hs--v2 .hs-bottom > .hs-panel > summary.hs-section-title:hover { filter: brightness(1.06) drop-shadow(0 0 2px rgba(255, 178, 96, .35)); color: var(--hs-ui-gold-hi); }
.hs--v2 .hs-bottom > .hs-panel[open] > summary.hs-section-title { filter: brightness(1.08) drop-shadow(0 0 3px rgba(255, 178, 96, .5)); color: var(--hs-ui-gold-hi); }
.hs--v2 .hs-bottom > .hs-panel[open] > summary.hs-section-title:hover { filter: brightness(1.12) drop-shadow(0 0 3px rgba(255, 190, 110, .6)); }
.hs--v2 .hs-bottom > .hs-panel > summary.hs-section-title:focus-visible { outline: 2px solid var(--hs-ui-gold-hi); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .hs--v2 .hs-bottom > .hs-panel > summary.hs-section-title { transition: none; } }
/* v0.26.3-rc4 the Nachbarschaft summary is its title row (search + order bar logic): the SAME states on its banner */
.hs--v2 .hs-bottom > .hs-hood > summary.hs-target-head > .hs-section-title { transition: filter .12s ease-out; }
.hs--v2 .hs-bottom > .hs-hood > summary.hs-target-head:hover > .hs-section-title { filter: brightness(1.06) drop-shadow(0 0 2px rgba(255, 178, 96, .35)); color: var(--hs-ui-gold-hi); }
.hs--v2 .hs-bottom > .hs-hood[open] > summary.hs-target-head > .hs-section-title { filter: brightness(1.08) drop-shadow(0 0 3px rgba(255, 178, 96, .5)); color: var(--hs-ui-gold-hi); }
.hs--v2 .hs-bottom > .hs-hood[open] > summary.hs-target-head:hover > .hs-section-title { filter: brightness(1.12) drop-shadow(0 0 3px rgba(255, 190, 110, .6)); }
.hs--v2 .hs-bottom > .hs-hood > summary.hs-target-head:focus-visible { outline: 2px solid var(--hs-ui-gold-hi); outline-offset: -4px; }
.hs--v2 .hs-bottom > .hs-hood > summary > .hs-section-title::before { color: var(--hs-ui-gold); text-shadow: 0 1px 0 #000; }
@media (prefers-reduced-motion: reduce) { .hs--v2 .hs-bottom > .hs-hood > summary.hs-target-head > .hs-section-title { transition: none; } }
/* v0.26.3-rc4 Hässlons Chronik: a parchment plank – the title in dark ink (gold would vanish on it) */
.hs--v2 .hs-bottom > .hs-chronik.hs-panel > summary.hs-section-title, .hs--v2 .hs-bottom > .hs-chronik.hs-panel > summary.hs-section-title:hover, .hs--v2 .hs-bottom > .hs-chronik.hs-panel[open] > summary.hs-section-title, .hs--v2 .hs-bottom > .hs-chronik.hs-panel[open] > summary.hs-section-title:hover { color: #3a2412; text-shadow: 0 1px 0 rgba(255, 238, 200, .55); }
.hs--v2 .hs-bottom > .hs-chronik.hs-panel > summary.hs-section-title::before { color: #5a3518; text-shadow: none; }
/* accordion heads inside a section (Versorgung: Napf / Kloplatz / Saustall): no old brown hover surface */
.hs--v2 .hs-sup-head:hover { background: none; color: var(--hs-ui-gold-hi); filter: brightness(1.06); }

/* ── L1 / L2 BODIES ─────────────────────────────────────────────────────────────────────────────────────────── */
.hs--v2 .hs-bottom > :is(.hs-adv, .hs-guild-sec, .hs-loo, .hs-reports, .hs-hood, .hs-looks, .hs-raids, .hs-rel, .hs-chronik).hs-panel { border: 0; border-radius: 0; background: transparent; padding: 0; }
.hs--v2 .hs-bottom > .hs-hood > .hs-target-head { display: block; margin: 0; padding: 0; border: 0; background: none; }
.hs--v2 .hs-bottom > .hs-panel > summary.hs-section-title::before { color: var(--hs-ui-gold); text-shadow: 0 1px 0 #000; }
.hs--v2 :is(.hs-adv-body, .hs-guild-sec-body) { margin-top: 4px; padding: 2px 4px 4px; border-style: solid; border-width: 28px 20px 21px 32px; border-image: url("assets/ui/v2/frames/frame-hero-fc.png") 94 65 73 106 fill / 47px 32.5px 36.5px 53px stretch; background: none; }
.hs--v2 :is(.hs-loo-body, .hs-reports-body, .hs-looks-body, .hs-chronik-body, .hs-raids-cards, .hs-rel-list) { margin-top: 4px; padding: 8px 10px; border: var(--hs-ui-border) solid var(--hs-ui-edge); border-radius: var(--hs-ui-radius); background: url("assets/ui/v2/ornaments/gem-rivet.png") left 3px top 3px / 10px no-repeat, url("assets/ui/v2/ornaments/gem-rivet.png") right 3px top 3px / 10px no-repeat, url("assets/ui/v2/ornaments/gem-rivet.png") left 3px bottom 3px / 10px no-repeat, url("assets/ui/v2/ornaments/gem-rivet.png") right 3px bottom 3px / 10px no-repeat, linear-gradient(180deg, rgba(43, 26, 16, .92), rgba(30, 18, 11, .94)); }
.hs--v2 .hs-hood { padding-bottom: 6px; }
@container hsb (max-width: 560px) {
  .hs--v2 :is(.hs-adv-body, .hs-guild-sec-body) { border-width: 20px 14px 15px 22px; border-image: url("assets/ui/v2/frames/frame-hero-fc.png") 94 65 73 106 fill / 32.9px 22.75px 25.55px 37.1px stretch; }
}

/* ── BUTTONS: blank 9-slice plank + DOM text; normal / hover / pressed / focus-visible / disabled ─────────────── */
.hs--v2 .hs-btn { --btn: "secondary"; min-height: var(--hs-ui-btn-h); padding: 0 4px; border-style: solid; border-width: 10px 13px; border-radius: 0; border-image: url("assets/ui/v2/buttons/btn-secondary-normal.png") 20 26 fill / 10px 13px stretch; background: none; color: #f3dfbd; font-weight: 700; text-shadow: 0 1px 0 #000; line-height: 1.1; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.hs--v2 .hs-btn:hover:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-secondary-hover.png"); color: #fff1d6; }
.hs--v2 .hs-btn:active:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-secondary-pressed.png"); }
.hs--v2 .hs-btn:disabled { border-image-source: url("assets/ui/v2/buttons/btn-secondary-disabled.png"); color: #9b8f84; text-shadow: none; }
.hs--v2 .hs-btn:focus-visible { outline: 2px solid var(--hs-ui-gold-hi); outline-offset: 2px; }
.hs--v2 .hs-btn--primary { border-image-source: url("assets/ui/v2/buttons/btn-primary-normal.png"); color: #fff3dc; }
.hs--v2 .hs-btn--primary:hover:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-primary-hover.png"); }
.hs--v2 .hs-btn--primary:active:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-primary-pressed.png"); }
.hs--v2 .hs-btn--primary:disabled { border-image-source: url("assets/ui/v2/buttons/btn-primary-disabled.png"); }
.hs--v2 :is(.hs-btn--danger, .hs-guild-cancel, .hs-guild-cancel-yes, .hs-btn--reset) { border-image-source: url("assets/ui/v2/buttons/btn-danger-normal.png"); }
.hs--v2 :is(.hs-btn--danger, .hs-guild-cancel, .hs-guild-cancel-yes, .hs-btn--reset):hover:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-danger-hover.png"); }
.hs--v2 :is(.hs-btn--danger, .hs-guild-cancel, .hs-guild-cancel-yes, .hs-btn--reset):active:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-danger-pressed.png"); }
.hs--v2 :is(.hs-btn--danger, .hs-guild-cancel, .hs-guild-cancel-yes, .hs-btn--reset):disabled { border-image-source: url("assets/ui/v2/buttons/btn-danger-disabled.png"); }
.hs--v2 :is(.hs-guild-accept, .hs-guild-join) { border-image: url("assets/ui/v2/buttons/btn-accept-normal.png") 22 30 fill / 11px 15px stretch; border-width: 11px 15px; }
.hs--v2 :is(.hs-guild-accept, .hs-guild-join):hover:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-accept-hover.png"); }
.hs--v2 :is(.hs-guild-accept, .hs-guild-join):active:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-accept-pressed.png"); }
.hs--v2 :is(.hs-guild-accept, .hs-guild-join):disabled { border-image-source: url("assets/ui/v2/buttons/btn-accept-disabled.png"); }
.hs--v2 .hs-guild-claim { border-image: url("assets/ui/v2/buttons/btn-reward-normal.png") 22 26 22 64 fill / 11px 13px 11px 32px stretch; border-width: 11px 13px 11px 32px; }
.hs--v2 .hs-guild-claim:hover:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-reward-hover.png"); }
.hs--v2 .hs-guild-claim:active:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-reward-pressed.png"); }
.hs--v2 .hs-guild-claim:disabled { border-image-source: url("assets/ui/v2/buttons/btn-reward-disabled.png"); }
.hs--v2 :is(.hs-btn--lumpen, .hs-btn--adv-lumpen, .hs-btn--adv-lumpen-shop, .hs-trade-v2-go, .hs-btn--adv-tohub) { border-image: url("assets/ui/v2/buttons/btn-merchant-normal.png") 22 26 22 64 fill / 11px 13px 11px 32px stretch; border-width: 11px 13px 11px 32px; }
.hs--v2 :is(.hs-btn--lumpen, .hs-btn--adv-lumpen, .hs-btn--adv-lumpen-shop, .hs-trade-v2-go, .hs-btn--adv-tohub):hover:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-merchant-hover.png"); }
.hs--v2 :is(.hs-btn--lumpen, .hs-btn--adv-lumpen, .hs-btn--adv-lumpen-shop, .hs-trade-v2-go, .hs-btn--adv-tohub):active:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-merchant-pressed.png"); }
.hs--v2 :is(.hs-btn--lumpen, .hs-btn--adv-lumpen, .hs-btn--adv-lumpen-shop, .hs-trade-v2-go, .hs-btn--adv-tohub):disabled { border-image-source: url("assets/ui/v2/buttons/btn-merchant-disabled.png"); }
/* utility: small / close / header actions – calmer */
.hs--v2 :is(.hs-btn--small, .hs-dlg-close, .hs-feed-close, .hs-btn--help, .hs-btn--options, .hs-btn--edit) { --hs-ui-btn-h: 26px; border-width: 9px 12px; border-image: url("assets/ui/v2/buttons/btn-utility-normal.png") 18 24 fill / 9px 12px stretch; font-size: 12px; }
.hs--v2 :is(.hs-btn--small, .hs-dlg-close, .hs-feed-close, .hs-btn--help, .hs-btn--options, .hs-btn--edit):hover:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-utility-hover.png"); }
.hs--v2 :is(.hs-btn--small, .hs-dlg-close, .hs-feed-close, .hs-btn--help, .hs-btn--options, .hs-btn--edit):active:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-utility-pressed.png"); }
.hs--v2 :is(.hs-btn--small, .hs-dlg-close, .hs-feed-close, .hs-btn--help, .hs-btn--options, .hs-btn--edit):disabled { border-image-source: url("assets/ui/v2/buttons/btn-utility-disabled.png"); }
.hs--v2 .hs-btn--small.hs-btn--primary { border-image-source: url("assets/ui/v2/buttons/btn-primary-normal.png"); }
.hs--v2 .hs-btn--small.hs-btn--primary:hover:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-primary-hover.png"); }

/* ── TABS (Gebiete / Ausrüstung / Inventar / Handel) ───────────────────────────────────────────────────────── */
.hs--v2 .hs-tabs { gap: 0; padding: 0; border-style: solid; border-width: 7px; border-image: url("assets/ui/v2/tabs/tabbar.png") 13 14 fill / 7px stretch; background: none; }
.hs--v2 .hs-tab { flex: 1 1 0; min-width: 0; padding: 5px 6px; border: 0; border-radius: 0; background: none; color: #bba58a; font-weight: 600; }
.hs--v2 .hs-tab:hover { color: #f0dcbc; }
.hs--v2 .hs-tab.is-active { padding: 0 2px; border-style: solid; border-width: 6px 7px; border-image: url("assets/ui/v2/tabs/tab-active.png") 11 13 fill / 6px 7px stretch; color: var(--hs-ui-gold-hi); text-shadow: 0 1px 0 #000; }
.hs--v2 .hs-tab:focus-visible { outline: 2px solid var(--hs-ui-gold-hi); outline-offset: -2px; }
.hs--v2 .hs-tab .hs-icon { width: var(--hs-ui-icon-size); height: var(--hs-ui-icon-size); }

/* ── BADGES (pill 9-slices; the V2 risk rule stays: ONE personal risk badge) ─────────────────────────────────── */
.hs--v2 .hs-badge { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 20px; padding: 2px 9px; border: 1px solid transparent; border-radius: 0; border-image: url("assets/ui/v2/badges/badge-neutral.png") 21 23 fill / 9.5px 10.5px stretch; background: none; color: #ead8bb; font-size: 11px; line-height: 1; text-shadow: 0 1px 0 #000; }
.hs--v2 .hs-badge.is-new { border-image-source: url("assets/ui/v2/badges/badge-new-glow.png"); border-image-slice: 21 23 21 39 fill; border-image-width: 9.5px 10.5px 9.5px 18px; padding-left: 20px; color: #ffe7b0; }
.hs--v2 .hs-adv-riskbadge--low { border-image-source: url("assets/ui/v2/badges/badge-risk-low.png"); color: #cfeeb4; }
.hs--v2 .hs-adv-riskbadge--medium { border-image-source: url("assets/ui/v2/badges/badge-risk-medium.png"); color: #f2d49a; }
.hs--v2 .hs-adv-riskbadge--high { border-image-source: url("assets/ui/v2/badges/badge-risk-high.png"); color: #ffc0a8; }
.hs--v2 .hs-adv-riskbadge--extreme { border-image-source: url("assets/ui/v2/badges/badge-risk-high-glow.png"); color: #ffd3c3; }
.hs--v2 .hs-adv-lock { border-image-source: url("assets/ui/v2/badges/badge-locked.png"); border-image-slice: 21 23 21 40 fill; border-image-width: 9.5px 10.5px 9.5px 18px; padding-left: 20px; color: #e6cfa6; }
.hs--v2 .hs-ui-rank { border-image-source: url("assets/ui/v2/badges/badge-rank-gold.png"); border-image-slice: 21 23 21 40 fill; border-image-width: 9.5px 10.5px 9.5px 18px; padding-left: 20px; color: #ffe1a0; }

/* ── TOPBAR: status = small chips, actions = real buttons ─────────────────────────────────────────────────────── */
.hs--v2 .hs-header .hs-badges > :is(.hs-state, .hs-location, .hs-mood-badge):not([hidden]) { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 8px; border: 1px solid transparent; border-image: url("assets/ui/v2/badges/badge-neutral-dim.png") 21 23 fill / 9.5px 10.5px stretch; background: none; color: #d9c6a6; font-size: 11px; line-height: 1; }
.hs--v2 .hs-header { gap: 6px; }

/* ── ROOM: a thin frame + two small corner ornaments (the room stays the hero; decoration never takes clicks) ──── */
.hs--v2 .hs-scene { outline: 2px solid var(--hs-ui-edge); outline-offset: -2px; }
.hs--v2 .hs-scene::before, .hs--v2 .hs-scene::after { content: ''; position: absolute; top: 0; z-index: 6; width: 34px; height: 38px; background: url("assets/ui/v2/ornaments/corner-iron.png") left top / contain no-repeat; pointer-events: none; }
.hs--v2 .hs-scene::before { left: 0; }
.hs--v2 .hs-scene::after { right: 0; transform: scaleX(-1); }
@container hsb (max-width: 420px) { .hs--v2 .hs-scene::before, .hs--v2 .hs-scene::after { width: 24px; height: 27px; } }

/* ── ACTION BUTTONS under the room: the normal plank; a pressing state (dirt, Klogang) gets the warm accent ─────── */
.hs--v2 .hs-actions { gap: 6px; }
.hs--v2 .hs-actions .hs-btn { min-height: 34px; font-size: 13px; }
.hs--v2 .hs-actions .hs-btn.is-urgent:not(:disabled) { border-image-source: url("assets/ui/v2/buttons/btn-primary-normal.png"); }
/* ════ v0.26.2 LOOTKATALOG COMPACT (fork C) ════ (loot-catalog-view.js – V2 dialog only)
   [icon] name rows (loot/row*.png 9-slice), A–Z per category, "???" rows after; ONE tooltip / tap panel
   (loot/tooltip-fc.png 9-slice) absolute inside the body – never against the window. Plunder starts folded. */
.hs--v2 .hs-lootcat-wrap { position: relative; }
.hs--v2 .hs-lootcat-cat { margin: 0; margin-bottom: 8px; }
.hs--v2 .hs-lootcat-cat-head { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 28px; margin: 0; margin-bottom: 4px; padding: 0 4px; border-style: solid; border-width: 7px 8px; border-radius: 0; border-image: url("assets/ui/v2/loot/row.png") 14 15 fill / 7px 8px stretch; background: none; color: #e9b77a; font: 700 12px/1.2 var(--hs-serif, Georgia, serif); letter-spacing: .08em; text-align: left; cursor: pointer; }
.hs--v2 .hs-lootcat-cat-head:hover { color: #ffd99a; }
.hs--v2 .hs-lootcat-cat-head:focus-visible { outline: 2px solid #ffe2a3; outline-offset: 1px; }
.hs--v2 .hs-lootcat-cat-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.hs--v2 .hs-lootcat-cat-count { flex: none; color: #ead8bb; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.hs--v2 .hs-lootcat-cat-arrow { flex: none; display: inline-block; font-size: 11px; transition: transform .16s ease-out; }
.hs--v2 .hs-lootcat-cat.is-open .hs-lootcat-cat-arrow { transform: rotate(90deg); }
.hs--v2 .hs-lootcat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
.hs--v2 .hs-lootcat-list[hidden] { display: none; }
.hs--v2 .hs-lootcat-entry { display: block; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; opacity: 1; }
.hs--v2 .hs-lootcat-row, .hs--v2 .hs-lootcat-entry.is-hidden { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; min-height: 30px; box-sizing: border-box; margin: 0; padding: 0 2px; border-style: solid; border-width: 7px 8px; border-radius: 0; border-image: url("assets/ui/v2/loot/row.png") 14 15 fill / 7px 8px stretch; background: none; color: #f0e2c8; font: 600 12.5px/1.2 var(--hs-sans, system-ui, sans-serif); text-align: left; cursor: pointer; }
.hs--v2 .hs-lootcat-entry.is-hidden { border-image-source: url("assets/ui/v2/loot/row-unknown.png"); color: #8f7f6c; cursor: default; }
.hs--v2 .hs-lootcat-row:hover, .hs--v2 .hs-lootcat-row:focus-visible, .hs--v2 .hs-lootcat-row[aria-expanded="true"] { border-image-source: url("assets/ui/v2/loot/row-active.png"); color: #fff1d6; }
.hs--v2 .hs-lootcat-row:focus-visible { outline: 2px solid #ffe2a3; outline-offset: 1px; }
.hs--v2 .hs-lootcat-entry.is-known .hs-lootcat-row { color: #d8c8ae; }
.hs--v2 .hs-lootcat-entry.is-known .hs-lootcat-row { opacity: .72; font-style: italic; } /* v0.26.6-rc1-polish1 only KNOWN (found elsewhere) – clearly unlike ✓ found here */
.hs--v2 .hs-lootcat-legend { margin: 2px 0 6px; font-size: 11px; line-height: 1.35; }
.hs--v2 .hs-lootcat-row .hs-lootcat-name, .hs--v2 .hs-lootcat-entry.is-hidden .hs-lootcat-name { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs--v2 .hs-lootcat-entry.is-hidden .hs-lootcat-name { letter-spacing: .2em; color: #8f7f6c; }
.hs--v2 .hs-lootcat-mark { flex: none; font-size: 12px; line-height: 1; }
.hs--v2 .hs-lootcat-mark.is-here { color: #9fd47c; }
.hs--v2 .hs-lootcat-mark.is-known { color: #a08d76; }
.hs--v2 .hs-lootcat-row .hs-loot-icon, .hs--v2 .hs-lootcat-row .hs-lootcat-gear, .hs--v2 .hs-lootcat-entry.is-hidden .hs-lootcat-sil { flex: none; width: 22px; height: 22px; }
.hs--v2 .hs-lootcat-row .hs-loot-icon img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.hs--v2 .hs-lootcat-tip { position: absolute; z-index: 5; left: 0; top: 0; width: min(100%, 290px); box-sizing: border-box; padding: 2px; border-style: solid; border-width: 18px; border-image: url("assets/ui/v2/loot/tooltip-fc.png") 95 72 86 60 fill / 46.2px 35px 41.8px 29.2px stretch; background: none; color: #ead8bb; font-size: 12px; line-height: 1.35; pointer-events: none; }
.hs--v2 .hs-lootcat-tip[hidden] { display: none; }
.hs--v2 .hs-lootcat-tip.is-pinned { pointer-events: auto; }
.hs--v2 .hs-lootcat-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.hs--v2 .hs-lootcat-detail-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #8a5530; border-radius: 3px; background: #1a100a; }
.hs--v2 .hs-lootcat-detail-icon .hs-loot-icon, .hs--v2 .hs-lootcat-detail-icon .hs-loot-icon img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.hs--v2 .hs-lootcat-detail-title { min-width: 0; }
.hs--v2 .hs-lootcat-detail .hs-lootcat-name { color: #ffe2a3; font: 700 14px/1.2 var(--hs-serif, Georgia, serif); overflow-wrap: anywhere; }
.hs--v2 .hs-lootcat-detail .hs-lootcat-desc { margin-top: 3px; }
.hs--v2 .hs-lootcat-tip-close { margin-top: 6px; }
@media (max-width: 420px) { .hs--v2 .hs-lootcat-list { grid-template-columns: 1fr; } .hs--v2 .hs-lootcat-tip { width: 100%; } }
/* ════ v0.26.2 GILDE + GEBIETE + DIALOGE + BUBBLES (fork D) ════ (V2 only – every selector starts with .hs--v2)
   Gilde = the most decorated main section (framed crest, gold rank pill, Ruf track, wax seals, quest cards, the exam
   under a skull divider). Gebiete = calm L3 cards with a small area picture + ONE personal risk pill. Dialogs = ONE
   kit frame, still inside the tile (position stays absolute – v2-dialog.js). Bubbles = UI-kit art, text stays DOM. */

/* ── GILDE ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.hs--v2 .hs-guild-head { border-style: solid; border-width: 18px 11px 11px 31px; border-image: url("assets/ui/v2/frames/frame-main-fc.png") 78 56 46 80 fill / 39px 28px 23px 40px stretch; border-radius: 0; background: linear-gradient(180deg, rgba(92, 24, 18, .55), rgba(40, 14, 10, .7)) padding-box; padding: 2px 6px 2px 2px; }
.hs--v2 .hs-guild-crest { padding: 4px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 184, 90, .28), rgba(155, 42, 33, .18) 55%, transparent 72%); }
.hs--v2 .hs-guild-title { color: var(--hs-ui-gold-hi, #ffe2a3); text-shadow: 0 2px 0 #2a0f0b; letter-spacing: .06em; }
.hs--v2 .hs-guild-head .hs-guild-rank { display: inline-flex; align-items: center; width: max-content; min-height: 18px; padding: 2px 9px 2px 20px; border: 1px solid transparent; border-image: url("assets/ui/v2/badges/badge-rank-gold.png") 21 23 21 40 fill / 9.5px 10.5px 9.5px 18px stretch; color: #ffe1a0; font-weight: 700; font-size: 12px; line-height: 1; text-shadow: 0 1px 0 #000; }
.hs--v2 .hs-guild-block--rank { border: 2px solid #b8873c; border-radius: 5px; background: linear-gradient(180deg, rgba(110, 30, 22, .55), rgba(40, 14, 10, .75)); }
.hs--v2 .hs-guild-block-label { color: #e8b85a; letter-spacing: .1em; }
/* Ruf: a wooden track with rivet ends, a calm gold fill (no glow) */
.hs--v2 .hs-guild-block .hs-guild-rep-bar { height: 12px; border: 2px solid #6b4224; border-radius: 3px; background: url("assets/ui/v2/ornaments/gem-rivet.png") left 1px center / 8px no-repeat, url("assets/ui/v2/ornaments/gem-rivet.png") right 1px center / 8px no-repeat, linear-gradient(180deg, #120a06, #24160d); }
.hs--v2 .hs-guild-block .hs-guild-rep-fill { background: linear-gradient(180deg, #ffd98a, #d99a3a 55%, #9c6522); border-right: 1px solid #5c3812; }
/* Gildenstempel: small wax seals */
.hs--v2 .hs-guild-seal { width: 16px; height: 16px; background: radial-gradient(circle at 38% 34%, rgba(90, 40, 30, .9), rgba(40, 18, 12, .9) 70%); opacity: .55; }
.hs--v2 .hs-guild-seal.is-earned { opacity: 1; background: radial-gradient(circle at 36% 32%, #e2604a, #a8321f 48%, #5e1a12 82%); }
/* orders = L3 quest cards */
.hs--v2 .hs-guild-orders .hs-guild-order { padding: 7px 9px 8px; border: 2px solid #7a4d27; border-radius: 4px; background: url("assets/ui/v2/ornaments/gem-rivet.png") left 2px top 2px / 8px no-repeat, url("assets/ui/v2/ornaments/gem-rivet.png") right 2px top 2px / 8px no-repeat, linear-gradient(180deg, #2b1a10, #1d120b); }
.hs--v2 .hs-guild-orders .hs-guild-order + .hs-guild-order { margin-top: 6px; }
.hs--v2 .hs-guild-orders .hs-guild-order--heavy { border-color: #9b3a24; }
.hs--v2 .hs-guild-orders .hs-guild-slot--claimable { border-color: #d9a443; background: url("assets/ui/v2/ornaments/gem-gold.png") right 4px top 4px / 14px no-repeat, linear-gradient(180deg, #3a2512, #22150c); }
.hs--v2 .hs-guild-slot-bar { height: 8px; border: 1px solid #6b4224; border-radius: 2px; background: #140c07; }
.hs--v2 .hs-guild-slot-fill { height: 100%; background: linear-gradient(180deg, #ffd98a, #c98a2e); }
/* the exam: under a skull divider, gold edge */
.hs--v2 .hs-guild-block--exam::before { content: ''; display: block; height: 22px; margin-bottom: 6px; background: url("assets/ui/v2/ornaments/divider-skull.png") center / contain no-repeat; pointer-events: none; }
.hs--v2 .hs-guild-block--exam .hs-guild-next, .hs--v2 .hs-guild-block--exam .hs-guild-exam { border: 2px solid #c8963e; border-radius: 5px; background: linear-gradient(180deg, #2c1a0f, #1a100a); }
.hs--v2 .hs-guild-next.is-eligible { border-color: #e8b85a; }

/* ── GEBIETSKARTEN (L3): calm frame, picture, clear selection, prettier lock ───────────────────────────────── */
.hs--v2 .hs-adv-area.is-v2 { border: 2px solid #5e3a20; border-radius: 5px; background: url("assets/ui/v2/ornaments/gem-rivet.png") right 3px bottom 3px / 8px no-repeat, linear-gradient(180deg, #24160d, #190f09); }
.hs--v2 .hs-adv-area.is-v2.is-open { border-color: #d9a443; background: linear-gradient(180deg, #2f1d10, #1d120b); }
.hs--v2 .hs-adv-area.is-v2 > .hs-adv-area-head { display: flex; align-items: center; gap: 9px; padding: 6px 9px 6px 6px; }
.hs--v2 .hs-adv-area.is-v2 > .hs-adv-area-head:hover { background: rgba(255, 200, 120, .05); }
.hs--v2 .hs-adv-area.is-v2 > .hs-adv-area-head:focus-visible { outline: 2px solid var(--hs-ui-gold-hi, #ffe2a3); outline-offset: -2px; }
.hs--v2 .hs-adv-area-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.hs--v2 .hs-adv-thumb { flex: none; width: 56px; height: 40px; border: 2px solid #8a5530; border-radius: 4px; background-color: #1a100a; background-size: cover; background-position: 40% 72%; background-repeat: no-repeat; image-rendering: pixelated; pointer-events: none; }
.hs--v2 .hs-adv-thumb[data-area="waldrand"] { background-image: url("assets/adventure/feed/bg_waldrand.png"); }
.hs--v2 .hs-adv-thumb[data-area="grunzdickicht"] { background-image: url("assets/adventure/feed/bg_grunzdickicht.png"); }
.hs--v2 .hs-adv-thumb[data-area="ruinen"] { background-image: url("assets/adventure/feed/bg_ruinen.png"); }
.hs--v2 .hs-adv-thumb[data-area="modertiefen"] { background-image: url("assets/adventure/feed/bg_modertiefen.png"); }
.hs--v2 .hs-adv-area.is-v2.is-open .hs-adv-thumb { border-color: #e8b85a; }
.hs--v2 .hs-adv-area.is-v2.is-locked .hs-adv-thumb { filter: grayscale(.85) brightness(.6); }
.hs--v2 .hs-adv-area.is-v2.is-locked > .hs-adv-area-head { opacity: .86; }
.hs--v2 .hs-adv-area.is-v2 .hs-adv-area-name { font: 700 14px/1.2 var(--hs-serif, Georgia, serif); color: #f0cf96; }
@container hsb (max-width: 420px) { .hs--v2 .hs-adv-thumb { width: 44px; height: 34px; } }

/* ── HEADER META + the status line moved into the Abenteuer panel ──────────────────────────────────────────── */
.hs--v2 .hs-adv-head > .hs-adv-badge { display: none; }
.hs--v2 .hs-section-title > .hs-ui-meta[hidden] { display: none; }
.hs--v2 .hs-section-title > .hs-ui-meta { color: #f0dcbc; padding: 2px 6px; border-radius: 3px; background: rgba(20, 10, 5, .55); }
.hs--v2 .hs-adv-status--body { margin-bottom: 6px; }

/* ── HANDEL banner (top of the Abenteuer "Handel" tab; vars from the generated zone, title = DOM) ──────────── */
.hs--v2 .hs-ui-banner { --hdr-h: 40px; --hdr-wl: calc(var(--hdr-h) * var(--hdr-arl)); --hdr-wr: calc(var(--hdr-h) * var(--hdr-arr)); --hdr-wcl: calc(var(--hdr-h) * var(--hdr-arcl)); --hdr-wcr: calc(var(--hdr-h) * var(--hdr-arcr)); display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--hdr-h); margin-bottom: 8px; padding: 0 calc(var(--hdr-wr) + var(--hdr-wcr) + 4px) 0 calc(var(--hdr-wl) + var(--hdr-wcl) + 4px); background-image: var(--hdr-l), var(--hdr-r), var(--hdr-cl), var(--hdr-cr), var(--hdr-s); background-repeat: no-repeat; background-size: auto 100%, auto 100%, auto 100%, auto 100%, calc(100% - var(--hdr-wl) - var(--hdr-wr) - var(--hdr-wcl) - var(--hdr-wcr) + 2px) 100%; background-position: left center, right center, var(--hdr-wl) center, right var(--hdr-wr) center, calc(var(--hdr-wl) + var(--hdr-wcl) - 1px) center; }
.hs--v2 .hs-ui-banner-title { color: var(--hs-ui-gold, #f6d18b); font: 700 14px/1 var(--hs-serif, Georgia, serif); letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 2px 0 #2a160b; }
@container hsb (max-width: 560px) { .hs--v2 .hs-ui-banner { --hdr-wl: 0px; --hdr-wr: 0px; background-image: none, none, var(--hdr-cl), var(--hdr-cr), var(--hdr-s); } }

/* ── DIALOGS: one kit frame (Lumpensammler, Lootkatalog, item detail, …) – still absolute inside the tile ───── */
.hs--v2 .hs-dlg-panel { border-style: solid; border-width: 28px 20px 21px 32px; border-radius: 0; border-image: url("assets/ui/v2/frames/frame-hero-fc.png") 94 65 73 106 fill / 47px 32.5px 36.5px 53px stretch; background: linear-gradient(180deg, #2a1b11, #1a110b) padding-box; }
.hs--v2 .hs-dlg-head { margin: -6px -4px 0; }
.hs--v2 .hs-rankup-card { border-style: solid; border-width: 28px 20px 21px 32px; border-image: url("assets/ui/v2/frames/frame-hero-fc.png") 94 65 73 106 fill / 47px 32.5px 36.5px 53px stretch; background: linear-gradient(180deg, #3a1610, #1d0d08) padding-box; }

/* ── BARK BUBBLES: UI-kit art (leaf = normal / finds, plank = fight lines, jagged = hit); the tail sits in the fixed
   bottom-left slice (leaf / plank) – adventure-feed.js places that x over his head (BARK_SKIN_TAIL) ─────────── */
.hs--v2 .hs-feed-scene .hs-adv-bark--skin-leaf, .hs--v2 .hs-feed-scene .hs-adv-bark--skin-plank, .hs--v2 .hs-feed-scene .hs-adv-bark--skin-jagged { max-width: min(18em, 56%); padding: 0 2px; border-style: solid; border-radius: 0; outline: 0; background: none; color: #2a1a0e; }
.hs--v2 .hs-feed-scene .hs-adv-bark--skin-leaf { border-width: 14px 16px 16px 40px; border-image: url("assets/ui/v2/bubbles/bubble-leaf.png") 35 40 40 100 fill / 14px 16px 16px 40px stretch; }
.hs--v2 .hs-feed-scene .hs-adv-bark--skin-plank { border-width: 10px 18px 13px 36px; border-image: url("assets/ui/v2/bubbles/bubble-plank.png") 25 45 32 90 fill / 10px 18px 13px 36px stretch; }
.hs--v2 .hs-feed-scene .hs-adv-bark--skin-jagged { border-width: 17px 32px 17px 23px; border-image: url("assets/ui/v2/bubbles/bubble-jagged.png") 45 85 45 60 fill / 17px 32px 17px 23px stretch; }
.hs--v2 .hs-feed-scene .hs-adv-bark--skin-leaf::before, .hs--v2 .hs-feed-scene .hs-adv-bark--skin-leaf::after,
.hs--v2 .hs-feed-scene .hs-adv-bark--skin-plank::before, .hs--v2 .hs-feed-scene .hs-adv-bark--skin-plank::after,
.hs--v2 .hs-feed-scene .hs-adv-bark--skin-jagged::before, .hs--v2 .hs-feed-scene .hs-adv-bark--skin-jagged::after { content: none; }
.hs--v2 .hs-feed-scene .hs-adv-bark--loot.hs-adv-bark--skin-leaf::before, .hs--v2 .hs-feed-scene .hs-adv-bark--loot.hs-adv-bark--skin-leaf.is-side::before { content: ''; position: absolute; top: -14px; right: -12px; left: auto; width: 18px; height: 18px; border: 0; background: url("assets/ui/v2/bubbles/icon-coin.png") center / contain no-repeat; pointer-events: none; }
@container hsb (max-width: 420px) { .hs--v2 .hs-feed-scene .hs-adv-bark--skin-leaf, .hs--v2 .hs-feed-scene .hs-adv-bark--skin-plank, .hs--v2 .hs-feed-scene .hs-adv-bark--skin-jagged { max-width: min(15em, 64%); font-size: 11.5px; } }
/* ════ v0.26.2 UI-KIT FIX: titles never break inside a word (360 px: "LOOTKATAL-OG", "BESONDERHEITE-N") ════════════ */
.hs--v2 .hs-dlg-title, .hs--v2 .hs-lootcat-cat-label { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
@media (max-width: 480px) {
  .hs--v2 .hs-dlg-title { font-size: 12.5px; letter-spacing: .04em; }
  .hs--v2 .hs-lootcat-cat-head { font-size: 11.5px; letter-spacing: .03em; }
}
/* ════ v0.26.3-rc3 ABENTEUER-FENSTER (adventure-feed.js, V2 only) – design sheet ABENTEUER_UI_REFERENCE.png ════════
   Kit files assets/ui/v2/adventure/ from the same generator (tools/build-v2-ui-kit.mjs) and the same rules: the window
   and the panel are FIXED-CORNER 9-slices (lanterns, banners, iron plates, mushrooms, rivets, leaves only in corners,
   neutral edges, ONE uniform scale), the badges keep their icon in a fixed cap, skull / pointer / icons are overlays at
   their own size. The scene keeps its size and ratio (adventure-feed _fit); text stays DOM. Nothing moves by this block –
   the running node keeps its existing pulse (and its reduced-motion rule). */
.hs--v2 .hs-feed.is-v2 { position: relative; gap: 6px; padding: 0 4px 4px; border-style: solid; border-width: 30px 15px 18px 15px; border-radius: 0; border-image: url("assets/ui/v2/adventure/frame-window-fc.png") 121 99 91 102 fill / 60.5px 49.5px 45.5px 51px stretch; background: linear-gradient(180deg, #2a1a10, #1d120b 60%, #170e08) padding-box; }
/* header: a DOM title on the kit plaque, lying on the frame's top beam */
.hs--v2 .hs-feed.is-v2 .hs-feed-head { position: absolute; left: 30px; right: 30px; top: -28px; height: 26px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; pointer-events: none; }
.hs--v2 .hs-feed.is-v2 .hs-feed-title { display: inline-flex; align-items: center; height: 24px; box-sizing: border-box; padding: 0 14px; border-style: solid; border-width: 4px 6px; border-image: url("assets/ui/v2/headers/plate.png") 14 16 fill / 9.7px 11px stretch; color: var(--hs-ui-gold); font: 700 13px/1 var(--hs-serif, Georgia, serif); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 0 #000; white-space: nowrap; }
/* info line: area · state · progress (wraps on a narrow tile; padded clear of the hanging lanterns) */
.hs--v2 .hs-feed.is-v2 .hs-feed-info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 72px; grid-template-areas: "area state pct bar"; align-items: center; gap: 2px 8px; min-width: 0; padding: 4px 38px 1px; font: 600 12px/1.3 var(--hs-sans, system-ui, sans-serif); }
.hs--v2 .hs-feed.is-v2 .hs-feed-area { grid-area: area; color: var(--hs-ui-gold); font: 700 13px/1.2 var(--hs-serif, Georgia, serif); letter-spacing: .03em; text-shadow: 0 1px 0 #000; }
.hs--v2 .hs-feed.is-v2 .hs-feed-state-text { grid-area: state; min-width: 0; color: #ead8bb; }
.hs--v2 .hs-feed.is-v2 .hs-feed-pct { grid-area: pct; color: var(--hs-ui-gold); font: 700 12px/1 var(--hs-serif, Georgia, serif); }
.hs--v2 .hs-feed.is-v2 .hs-feed-bar { grid-area: bar; width: 100%; height: 8px; border-radius: 2px; background: #140b06; outline: 1px solid #8a5530; }
.hs--v2 .hs-feed.is-v2 .hs-feed-bar-fill { background: linear-gradient(180deg, #ffe08a, #d9a443 55%, #a8702a); }
/* the scene: unchanged size / ratio, a dark rim inside the frame */
.hs--v2 .hs-feed.is-v2 .hs-feed-scene { border-radius: 2px; outline: 2px solid #120a06; outline-offset: 1px; }
/* timeline: dotted path (the walked part glows), kit icons: flag = START, chest = ZIEL, swords = fight, ? = not known
   yet, campfire = rest, ! = incident, green check = done; find / mood / loot bags keep their own icons */
.hs--v2 .hs-feed.is-v2 .hs-feed-tl { height: 92px; }
.hs--v2 .hs-feed.is-v2 .hs-feed-tl-track { top: 36px; height: 6px; border-radius: 0; opacity: 1; background: radial-gradient(circle at 50% 50%, #9a6234 0 1.6px, #3a2212 2.2px, rgba(58, 34, 18, 0) 2.7px) 0 0 / 9px 6px repeat-x; }
.hs--v2 .hs-feed.is-v2 .hs-feed-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--x, 0) * 100%); background: radial-gradient(circle at 50% 50%, #ffe08a 0 1.8px, #f0a040 2.4px, rgba(240, 160, 64, 0) 3px) 0 0 / 9px 6px repeat-x; }
.hs--v2 .hs-feed.is-v2 :is(.hs-feed-tl-end, .hs-feed-node) { width: 28px; height: 28px; z-index: 1; }
.hs--v2 .hs-feed.is-v2 :is(.hs-feed-icon, .hs-feed-node-icon) { width: 28px; height: 28px; }
.hs--v2 .hs-feed.is-v2 .hs-feed-node-icon.hs-loot-bag { width: 24px; height: 24px; margin: 2px; }
.hs--v2 .hs-feed.is-v2 .hs-feed-tl-label { margin-top: 2px; font-size: 10px; letter-spacing: .06em; color: #d9b77a; }
.hs--v2 .hs-feed.is-v2 :is(.hs-feed-icon--node_start, .hs-feed-icon--node_goal, .hs-feed-icon--node_combat, .hs-feed-icon--node_unknown, .hs-feed-icon--node_rest, .hs-feed-icon--node_special, .hs-feed-icon--node_check) > * { visibility: hidden; }
.hs--v2 .hs-feed.is-v2 .hs-feed-icon--node_start { background: url("assets/ui/v2/adventure/icon-flag.png") center / contain no-repeat; }
.hs--v2 .hs-feed.is-v2 .hs-feed-icon--node_goal { background: url("assets/ui/v2/adventure/icon-chest.png") center / contain no-repeat; }
.hs--v2 .hs-feed.is-v2 .hs-feed-icon--node_combat { background: url("assets/ui/v2/adventure/icon-swords.png") center / contain no-repeat; }
.hs--v2 .hs-feed.is-v2 .hs-feed-icon--node_unknown { background: url("assets/ui/v2/adventure/icon-unknown.png") center / contain no-repeat; }
.hs--v2 .hs-feed.is-v2 .hs-feed-icon--node_rest { background: url("assets/ui/v2/adventure/icon-camp.png") center / contain no-repeat; }
.hs--v2 .hs-feed.is-v2 .hs-feed-icon--node_special { background: url("assets/ui/v2/adventure/icon-alert.png") center / contain no-repeat; }
.hs--v2 .hs-feed.is-v2 .hs-feed-icon--node_check { background: url("assets/ui/v2/adventure/icon-check.png") center / contain no-repeat; }
.hs--v2 .hs-feed.is-v2 .hs-feed-node-check { left: auto; right: -7px; top: auto; bottom: -6px; width: 15px; height: 15px; margin: 0; transform: none; }
.hs--v2 .hs-feed.is-v2 .hs-feed-node.is-hidden .hs-feed-node-icon { opacity: .82; }
.hs--v2 .hs-feed.is-v2 .hs-feed-node.is-running::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 96, .6) 0, rgba(255, 150, 60, .28) 45%, rgba(255, 150, 60, 0) 70%); pointer-events: none; }
.hs--v2 .hs-feed.is-v2 .hs-feed-node.is-running.is-type-combat .hs-feed-node-icon { width: 32px; height: 32px; margin: -2px; }
/* Zäh / Mickrig: a real button with the kit badge (icon in its fixed cap, the word as DOM); little room -> icon only */
.hs--v2 .hs-feed.is-v2 button.hs-feed-variant { top: calc(100% + 7px); bottom: auto; height: 19px; box-sizing: border-box; margin: 0; padding: 0 2px 0 1px; border-style: solid; border-width: 3px 6px 3px 18px; border-radius: 0; background: none; color: #f3dcb0; font: 700 9.5px/13px var(--hs-serif, Georgia, serif); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 1px 0 #000; pointer-events: auto; cursor: help; z-index: 2; }
.hs--v2 .hs-feed.is-v2 button.hs-feed-variant--zaeh { border-image: url("assets/ui/v2/adventure/badge-zaeh.png") 14 13 14 36 fill / 6.82px 6.33px 6.82px 17.54px stretch; }
.hs--v2 .hs-feed.is-v2 button.hs-feed-variant--mickrig { border-image: url("assets/ui/v2/adventure/badge-mickrig.png") 14 13 14 38 fill / 6.65px 6.18px 6.65px 18.05px stretch; }
.hs--v2 .hs-feed.is-v2 button.hs-feed-variant:hover { filter: brightness(1.12); }
.hs--v2 .hs-feed.is-v2 button.hs-feed-variant:focus-visible, .hs--v2 .hs-feed.is-v2 button.hs-feed-variant[aria-expanded="true"] { outline: 2px solid var(--hs-ui-gold-hi); outline-offset: 1px; }
.hs--v2 .hs-feed.is-v2.is-tl-tight button.hs-feed-variant { width: 25px; padding: 0; overflow: hidden; white-space: nowrap; text-indent: 40px; }
/* the explanation: kit panel + kit pointer, inside the window (absolute – no layout jump) */
.hs--v2 .hs-feed-tip { position: absolute; z-index: 8; left: 0; top: 0; width: min(250px, calc(100% - 8px)); box-sizing: border-box; padding: 5px 4px 8px; border-style: solid; border-width: 11px 10px 11px 9px; border-image: url("assets/ui/v2/adventure/frame-panel-fc.png") 36 46 44 34 fill / 18px 23px 22px 17px stretch; color: #ead8bb; font: 500 12px/1.35 var(--hs-sans, system-ui, sans-serif); text-align: left; pointer-events: none; }
.hs--v2 .hs-feed-tip[hidden] { display: none; }
.hs--v2 .hs-feed-tip-title { display: block; margin-bottom: 2px; color: var(--hs-ui-gold); font: 700 12.5px/1.2 var(--hs-serif, Georgia, serif); letter-spacing: .12em; text-transform: uppercase; }
.hs--v2 .hs-feed-tip::after { content: ''; position: absolute; left: calc(var(--tip-x, 50%) - 12px); top: calc(100% + 5px); width: 24px; height: 15px; background: url("assets/ui/v2/adventure/tip-pointer.png") center top / contain no-repeat; pointer-events: none; }
.hs--v2 .hs-feed-tip.is-below::after { top: auto; bottom: calc(100% + 5px); transform: scaleY(-1); }
/* LAUFENDER BERICHT: the kit panel, its label plaque on the top edge; 5 lines visible, scrolls (follow rule unchanged) */
.hs--v2 .hs-feed.is-v2 .hs-feed-report { position: relative; margin-top: 12px; padding: 9px 4px 2px; gap: 4px; border-style: solid; border-width: 11px 10px 11px 9px; border-radius: 0; border-image: url("assets/ui/v2/adventure/frame-panel-fc.png") 36 46 44 34 fill / 18px 23px 22px 17px stretch; background: none; }
.hs--v2 .hs-feed.is-v2 .hs-feed-loghead { position: absolute; left: 50%; top: -19px; transform: translateX(-50%); height: 22px; box-sizing: border-box; padding: 0 12px; border-style: solid; border-width: 4px 6px; border-image: url("assets/ui/v2/headers/plate.png") 14 16 fill / 9.7px 11px stretch; color: var(--hs-ui-gold); font: 700 11px/14px var(--hs-serif, Georgia, serif); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 0 #000; pointer-events: none; }
.hs--v2 .hs-feed.is-v2 .hs-feed-log { font-size: 12px; }
/* v0.26.4-rc3 REPORT OVERFLOW: the frame is DRAWN wider than its border (border-image-width 18 23 22 17 px over a border of
   11 10 11 9 px) – the ornament reaches 13 px (right) / 8 px (left) into the box, and the text (4 px padding) ran under
   it. The content now starts / ends inside the drawn frame; the scrollbar keeps its own gutter, lines wrap normally
   (a long German word may break, min-width 0 so the grid never widens). Font size unchanged. */
.hs--v2 .hs-feed.is-v2 .hs-feed-report { padding-left: 10px; padding-right: 14px; }
.hs--v2 .hs-feed.is-v2 .hs-feed-log { scrollbar-gutter: stable; padding-right: 6px; min-width: 0; }
.hs--v2 .hs-feed.is-v2 .hs-feed-log .hs-feed-line { min-width: 0; white-space: normal; overflow-wrap: break-word; hyphens: manual; }
.hs--v2 .hs-feed.is-v2 .hs-feed-log .hs-feed-line.is-bark { color: #f6e7c4; font-style: italic; }
.hs--v2 .hs-feed.is-v2 .hs-feed-log .hs-feed-line.is-bark::before { left: -1px; top: .42em; width: 6px; height: 5px; border-radius: 2px 2px 2px 0; background: #e8d6ae; }
/* v0.26.4-rc3 KAMPFTEXT: the small toggle right of the percent · the fight overlay (two HP bars + one damage number) –
   calm kit colours, no glow, no shake */
.hs--v2 .hs-feed.is-v2 .hs-feed-info { grid-template-columns: auto minmax(0, 1fr) auto 72px auto; grid-template-areas: "area state pct bar ct"; }
.hs--v2 .hs-feed.is-v2 .hs-feed-ct { grid-area: ct; display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px 1px 3px; border: 1px solid rgba(217, 164, 67, .5); border-radius: 3px; background: rgba(0, 0, 0, .28); color: #ead8bb; font: 600 11px/1.2 var(--hs-sans, system-ui, sans-serif); white-space: nowrap; cursor: pointer; user-select: none; }
.hs--v2 .hs-feed.is-v2 .hs-feed-ct-box { width: 13px; height: 13px; margin: 0; accent-color: #d9a443; cursor: pointer; }
.hs--v2 .hs-feed.is-v2 .hs-feed-ct:focus-within { outline: 2px solid var(--v2-focus, #ffc27a); outline-offset: 1px; }
.hs--v2 .hs-feed.is-v2 .hs-feed-fight { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.hs--v2 .hs-feed.is-v2 .hs-feed-hp { position: absolute; top: 5px; left: 0; display: grid; grid-template-columns: minmax(0, auto) 54px auto; align-items: center; gap: 4px; box-sizing: border-box; max-width: calc(50% - 8px); padding: 2px 5px; border-radius: 3px; background: rgba(12, 7, 3, .72); color: #f3e3c3; font: 600 10.5px/1.15 var(--hs-sans, system-ui, sans-serif); white-space: nowrap; }
.hs--v2 .hs-feed.is-v2 .hs-feed-hp[hidden] { display: none; }
.hs--v2 .hs-feed.is-v2 .hs-feed-hp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--hs-ui-gold, #e8c37a); }
.hs--v2 .hs-feed.is-v2 .hs-feed-hp-bar { position: relative; height: 6px; border-radius: 2px; background: #140b06; outline: 1px solid #6b4224; overflow: hidden; }
.hs--v2 .hs-feed.is-v2 .hs-feed-hp-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #b6e07a, #6fa83a); }
.hs--v2 .hs-feed.is-v2 .hs-feed-hp.is-enemy .hs-feed-hp-fill { background: linear-gradient(180deg, #f0a083, #c4553a); }
.hs--v2 .hs-feed.is-v2 .hs-feed-hp.is-low .hs-feed-hp-fill { background: linear-gradient(180deg, #ffb36b, #d06a2a); }
.hs--v2 .hs-feed.is-v2 .hs-feed-hp-val { font-variant-numeric: tabular-nums; }
.hs--v2 .hs-feed.is-v2 .hs-feed-dmg { position: absolute; left: 0; top: 0; padding: 0 3px; color: #ffd7c4; font: 700 15px/1 var(--hs-serif, Georgia, serif); text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; will-change: transform, opacity; }
.hs--v2 .hs-feed.is-v2 .hs-feed-dmg.is-hero { color: #ffb3a3; }
.hs--v2 .hs-feed.is-v2 .hs-feed-dmg[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .hs--v2 .hs-feed.is-v2 .hs-feed-hp-fill { transition: none; } }
/* buttons under the report: the kit's calm utility plank (no new art), centred clear of the bottom corners */
.hs--v2 .hs-feed.is-v2 > .hs-feed-actions { justify-content: center; padding: 2px 30px 0; }
.hs--v2 .hs-feed.is-v2 > .hs-feed-actions .hs-btn { min-width: 112px; font-family: var(--hs-serif, Georgia, serif); letter-spacing: .03em; }
/* the result card: kit panel + the goblin skull on its top edge; the real facts as small chips */
.hs--v2 .hs-feed.is-v2 .hs-feed-result { top: 26px; width: min(calc(100% - 36px), 300px); padding: 9px 8px 4px; border-style: solid; border-width: 11px 10px 11px 9px; border-radius: 0; border-image: url("assets/ui/v2/adventure/frame-panel-fc.png") 36 46 44 34 fill / 18px 23px 22px 17px stretch; background: none; }
.hs--v2 .hs-feed.is-v2 .hs-feed-result::before { content: ''; position: absolute; left: 50%; top: -31px; width: 36px; height: 32px; margin-left: -18px; background: url("assets/ui/v2/adventure/skull.png") center / contain no-repeat; pointer-events: none; }
.hs--v2 .hs-feed.is-v2 .hs-feed-result-title { font: 700 16px/1.15 var(--hs-serif, Georgia, serif); letter-spacing: .1em; text-shadow: 0 1px 0 #000; }
.hs--v2 .hs-feed.is-v2 .hs-feed-result-facts { gap: 3px 5px; margin-top: 6px; }
.hs--v2 .hs-feed.is-v2 .hs-feed-result-facts li { padding: 1px 7px; border: 1px solid rgba(217, 164, 67, .45); border-radius: 3px; background: rgba(0, 0, 0, .3); color: #f1e2c0; font: 600 11.5px/1.3 var(--hs-sans, system-ui, sans-serif); }
/* a narrow tile (the 408-px column, phones): the same frame at a smaller uniform scale, tighter insets */
@container hsb (max-width: 420px) {
  .hs--v2 .hs-feed.is-v2 { border-width: 22px 11px 13px 11px; border-image: url("assets/ui/v2/adventure/frame-window-fc.png") 121 99 91 102 fill / 43.56px 35.64px 32.76px 36.72px stretch; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-head { left: 22px; right: 22px; top: -21px; height: 20px; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-title { height: 20px; padding: 0 10px; font-size: 11.5px; letter-spacing: .12em; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-info { grid-template-columns: minmax(0, 1fr) 64px; grid-template-areas: "area pct" "state bar" "state ct"; padding: 3px 26px 1px; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-pct { justify-self: end; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-ct { justify-self: end; padding: 0 4px 0 2px; font-size: 10.5px; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-hp { grid-template-columns: 40px auto; font-size: 10px; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-hp-name { display: none; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-result { top: 22px; width: calc(100% - 20px); }
  .hs--v2 .hs-feed.is-v2 .hs-feed-result-title { font-size: 13px; letter-spacing: .05em; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-result-facts li { padding: 0 5px; font-size: 11px; }
  .hs--v2 .hs-feed.is-v2 > .hs-feed-actions { padding: 2px 22px 0; }
}

/* ════ v0.26.3-rc4 V2 POLISH (adventure progress, tabs) ═══════════════════════════════════════════════════════════
   TABS – ONE look for every V2 sub-tab group (ui-kit tabs(): Abenteuer + Berichte; Chronik; Lumpensammler kaufen /
   verkaufen): the kit bar, every tab the SAME box in every state (border 6 / 7 px always there – transparent unless
   active), so nothing jumps and the active art lies inside its own tab (never cut by the bar). Exactly one active tab
   carries the kit plank; inactive = plain; hover = a little lighter; focus-visible = a dashed light-blue line (never
   the gold active plank). */
.hs--v2 :is(.hs-tabs, .hs-chronik-tabs, .hs-lumpen-tabs) { display: flex; gap: 2px; padding: 0; border-style: solid; border-width: 7px; border-radius: 0; border-image: url("assets/ui/v2/tabs/tabbar.png") 13 14 fill / 7px stretch; background: none; }
.hs--v2 :is(.hs-tab, .hs-chronik-tab, .hs-lumpen-tab) { flex: 1 1 0; min-width: 0; min-height: 30px; box-sizing: border-box; margin: 0; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-style: solid; border-width: 6px 7px; border-color: transparent; border-image: none; border-radius: 0; background: none; color: #bba58a; font: 600 12.5px/1.2 var(--hs-sans, system-ui, sans-serif); text-shadow: none; filter: none; }
.hs--v2 :is(.hs-tab, .hs-chronik-tab, .hs-lumpen-tab):is(:hover, :active):not(.is-active):not(:disabled) { border-image: none; background: rgba(255, 214, 150, .08); color: #f0dcbc; }
.hs--v2 :is(.hs-tab, .hs-chronik-tab, .hs-lumpen-tab).is-active, .hs--v2 :is(.hs-tab, .hs-chronik-tab, .hs-lumpen-tab).is-active:is(:hover, :active) { border-image: url("assets/ui/v2/tabs/tab-active.png") 11 13 fill / 6px 7px stretch; background: none; color: var(--hs-ui-gold-hi); text-shadow: 0 1px 0 #000; }
.hs--v2 :is(.hs-tab, .hs-chronik-tab, .hs-lumpen-tab):focus-visible, .hs--v2 .hs-bottom :is(.hs-tab, .hs-chronik-tab, .hs-lumpen-tab)[role="tab"]:focus-visible { outline: 2px dashed rgba(170, 215, 255, .95); outline-offset: -3px; }
.hs--v2 :is(.hs-tab, .hs-chronik-tab, .hs-lumpen-tab).is-active .hs-tab-count { color: var(--hs-ui-gold); }
/* rc5 (fresh-start audit, 360 px): the common box above chopped "Ausrüstung" / "Inventar" – the adventure tabs keep their
   own rule again (every tab starts at the width of its word, the rest is shared); on a narrow panel the icons step aside
   and the side borders get slimmer (the active art keeps its own 7-px image width) */
/* every other V2 tab group (Berichte 4 · Chronik 9 · Lumpensammler): a tab never shrinks below its word – when the row is
   too narrow the tabs WRAP into a second row (9 Chronik tabs were squeezed to 16 px each at 408 / 360 px) */
.hs--v2 :is(.hs-report-tabs, .hs-chronik-tabs, .hs-lumpen-tabs) { flex-wrap: wrap; row-gap: 2px; }
.hs--v2 :is(.hs-report-tabs .hs-tab, .hs-chronik-tab, .hs-lumpen-tab) { flex: 1 1 auto; min-width: max-content; }
.hs--v2 .hs-adv-tabs .hs-tab { flex: 1 1 auto; padding: 0 3px; gap: 3px; }
@container hsadv (max-width: 360px) {
  .hs--v2 .hs-adv .hs-adv-tabs .hs-tab .hs-icon { display: none; }
  .hs--v2 .hs-adv .hs-adv-tabs .hs-tab { padding: 0 1px; border-left-width: 3px; border-right-width: 3px; font-size: 11px; letter-spacing: -.01em; }
  .hs--v2 .hs-adv .hs-adv-tabs.hs-tabs { gap: 1px; border-left-width: 5px; border-right-width: 5px; }
}
/* GILDENSTEMPEL – the word is an info button (hover / keyboard focus / tap); the explanation lies over the block
   (absolute – no layout jump), today's status is a small line beside the count */
.hs--v2 .hs-guild-block--stamps { position: relative; }
.hs--v2 .hs-guild-stamp-info { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: help; }
.hs--v2 .hs-guild-stamp-q { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; font: 700 10px/1 var(--hs-sans, system-ui, sans-serif); letter-spacing: 0; opacity: .85; }
.hs--v2 .hs-guild-stamp-info:focus-visible { outline: 2px solid var(--hs-ui-gold-hi); outline-offset: 2px; }
.hs--v2 .hs-guild-stamp-tip { display: none; position: absolute; z-index: 6; left: 4px; top: 24px; width: min(280px, calc(100% - 8px)); box-sizing: border-box; padding: 8px 10px; border: 1px solid #b8873c; border-radius: 4px; background: #241509; color: #ead8bb; font: 500 12px/1.4 var(--hs-sans, system-ui, sans-serif); letter-spacing: 0; text-transform: none; text-align: left; pointer-events: none; }
.hs--v2 .hs-guild-block--stamps:has(.hs-guild-stamp-info:hover) .hs-guild-stamp-tip, .hs--v2 .hs-guild-stamp-info:focus-visible + .hs-guild-stamp-tip, .hs--v2 .hs-guild-stamp-tip.is-open { display: block; }
.hs--v2 .hs-guild-stamp-tip-title { display: block; margin-bottom: 3px; color: var(--hs-ui-gold); font: 700 12.5px/1.2 var(--hs-serif, Georgia, serif); letter-spacing: .1em; text-transform: uppercase; }
.hs--v2 .hs-guild-stamp-tip-line { margin: 0; padding-bottom: 3px; }
.hs--v2 .hs-guild-stamp-tip-small { margin: 4px 0 0; font-size: 11px; color: #bba58a; }
.hs--v2 .hs-guild-stamps-today.is-earned { color: #a9d88f; }
/* the short stamp rule – always visible between the count and today's status (compact, no warning box) */
.hs--v2 .hs-guild-stamps-rule { margin: 3px 0 3px; padding: 0; list-style: none; color: #d6c3a2; font: 500 11.5px/1.35 var(--hs-sans, system-ui, sans-serif); letter-spacing: 0; text-transform: none; }
.hs--v2 .hs-guild-stamps-rule li { position: relative; margin: 0; padding: 0; padding-left: 10px; padding-bottom: 1px; overflow-wrap: anywhere; }
.hs--v2 .hs-guild-stamps-rule li::before { content: "·"; position: absolute; left: 2px; top: 0; color: var(--hs-ui-gold); }
.hs--v2 .hs-guild-stamps-rule li:first-child { color: var(--hs-ui-gold); font-weight: 700; }
.hs--v2 .hs-guild-block--stamps .hs-guild-stamps-today { font-size: 11.5px; font-weight: 600; }
/* rank requirements: a met row is clearly marked (green check + numbers), an open one stays normal */
.hs--v2 .hs-guild-req-row.is-ok :is(.hs-guild-check, .hs-guild-progress) { color: #a9d88f; font-weight: 700; }
/* order audit: "So zählt es" – a quiet native disclosure under an order / the exam (keyboard + tap for free) */
.hs--v2 .hs-guild-howto { margin: 4px 0 2px 22px; font-size: 11.5px; color: #cdb99a; }
.hs--v2 .hs-guild-howto > summary { cursor: pointer; width: max-content; color: #d9b77a; font-weight: 600; }
.hs--v2 .hs-guild-howto > summary:focus-visible { outline: 2px solid var(--hs-ui-gold-hi); outline-offset: 2px; }
.hs--v2 .hs-guild-howto-list { margin: 3px 0 0; padding-left: 14px; line-height: 1.35; }
@media (max-width: 420px) { .hs--v2 .hs-guild-howto { margin-left: 0; } }

/* ── v0.26.5 LEARNING & PERSONALITY (V2 'learning_personality' – V2-only, no shadow / glow / motion) ──────────────── */
.hs--v2 .hs-traits { margin: 3px 6px; font-size: 12px; line-height: 1.35; }
.hs--v2 .hs-traits-title { font-weight: bold; color: var(--hs-ui-gold-hi, #ffd66b); margin-right: 6px; }
.hs--v2 .hs-traits-list { display: inline; margin: 0; padding: 0; list-style: none; }
.hs--v2 .hs-traits-list li { display: inline; }
.hs--v2 .hs-traits-list li + li::before { content: ' · '; opacity: .6; }
.hs--v2 .hs-learn-react { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: #1c130bd9; border: 1px solid var(--hs-ui-edge, #6b4423); border-radius: 6px; padding: 3px 6px 4px; max-width: calc(100% - 12px); }
/* v0.26.5-rc3 UX: "Prägt: X" (the server's trait) above the two buttons + the one short first-use hint */
.hs--v2 .hs-learn-trait { font-size: 11px; line-height: 1.2; color: var(--hs-ui-gold-hi, #ffd66b); white-space: nowrap; }
.hs--v2 .hs-learn-help { font-size: 10px; line-height: 1.25; color: #e8d9bf; text-align: center; max-width: 220px; }
.hs--v2 .hs-learn-btns { display: flex; gap: 6px; }
@media (max-width: 420px) { .hs--v2 .hs-learn-react { bottom: 4px; padding: 2px 4px 3px; } .hs--v2 .hs-learn-btns { gap: 4px; } }
/* (the floating "Frech +3" after a reaction lives with the base rules at the top – it moves, this kit block does not) */

/* v0.26.6-rc1-polish3 ADVENTURE INFO LINE – responsive by the window's OWN width (not the tile's: at 1400 px the window
   sits in a ~520-px column of a wide tile). Before: ONE grid row "area | state (minmax(0,1fr)) | % | bar | Kampftext" –
   the area name and the nowrap toggle kept their width, the state column shrank towards 0 and its overflow-wrap:anywhere
   broke "Kampf läuft … Begegnung 2/6" letter by letter. Now the state never gets less than 12em in one row; a narrower
   window uses two rows (area · % bar / state · Kampftext), a very narrow one (~360-px phone) stacks the toggle below.
   Words wrap at spaces only (break-word: a single word longer than the whole line is the only thing that may break). */
.hs--v2 .hs-feed.is-v2 { container: hsfeed / inline-size; }
.hs--v2 .hs-feed.is-v2 .hs-feed-area, .hs--v2 .hs-feed.is-v2 .hs-feed-state-text { min-width: 0; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.hs--v2 .hs-feed.is-v2 .hs-feed-pct { white-space: nowrap; }
.hs--v2 .hs-feed.is-v2 .hs-feed-info { grid-template-columns: minmax(min-content, max-content) minmax(12em, 1fr) auto 72px auto; grid-template-areas: "area state pct bar ct"; }
/* narrow: the area column never shrinks below its longest word ("Grunzdickicht"); the 3rd column is as wide as the wider
   of bar / Kampftext (the bar has its own width) – so the toggle never reaches over the state text */
@container hsfeed (max-width: 579.98px) {
  .hs--v2 .hs-feed.is-v2 .hs-feed-info { grid-template-columns: minmax(min-content, 1fr) auto auto; grid-template-areas: "area pct bar" "state state ct"; row-gap: 3px; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-pct { justify-self: end; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-bar { width: 64px; justify-self: end; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-ct { justify-self: end; align-self: start; }
}
@container hsfeed (max-width: 299.98px) {
  .hs--v2 .hs-feed.is-v2 .hs-feed-info { grid-template-areas: "area pct bar" "state state state" "ct ct ct"; }
  .hs--v2 .hs-feed.is-v2 .hs-feed-bar { width: 48px; }
}

/* v0.26.6-rc1-polish3 LUMPENSAMMLER on a narrow tile (390 / 360 px). Before: the hero frame (32 + 20 px sides) and 10 px
   padding left ~214 px of a 276-px window; each row kept the stepper beside the name (the name got ~45 px and its
   overflow-wrap:anywhere broke "Angespitzter Stock" letter by letter, the category ran under the stepper), and the head
   bar (nowrap "LUMPENSAMMLER" + "Schließen", no wrap) pushed "Schließen" past the window edge. Now, measured on the
   window host itself (it lives outside the tile container): the same frame at a smaller uniform scale, a head bar that
   may wrap ("Schließen" right, fully inside, 32-px touch height), rows with the name over the full width and the
   stepper in its own line below, words wrap at spaces only. Font sizes unchanged; desktop (wider window) untouched. */
.hs--v2 .hs-lumpen-host.hs-dlg-host { container: hslumpen / inline-size; }
.hs--v2 .hs-lumpen.hs-dlg-panel :is(.hs-lumpen-name, .hs-shop-name) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
.hs--v2 .hs-lumpen.hs-dlg-panel .hs-lumpen-bar { flex-wrap: wrap; row-gap: 4px; }
.hs--v2 .hs-lumpen.hs-dlg-panel .hs-lumpen-title { min-width: 0; }
.hs--v2 .hs-lumpen.hs-dlg-panel .hs-lumpen-close { flex: none; margin-left: auto; }
@container hslumpen (max-width: 480px) {
  .hs--v2 .hs-lumpen-host.hs-dlg-host .hs-lumpen.hs-dlg-panel { width: calc(100% - 8px); border-width: 17px 12px 13px 19px; border-image-width: 28.2px 19.5px 21.9px 31.8px; padding: 8px 6px; }
  .hs--v2 .hs-lumpen.hs-dlg-panel .hs-lumpen-bar { top: -8px; margin: -8px -6px 0; padding: 6px 6px 6px 8px; }
  .hs--v2 .hs-lumpen.hs-dlg-panel .hs-lumpen-title { font-size: 13.5px; letter-spacing: .06em; }
  .hs--v2 .hs-lumpen.hs-dlg-panel .hs-lumpen-close { min-height: 32px; }
  .hs--v2 .hs-lumpen.hs-dlg-panel .hs-lumpen-row { grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "icon info" "icon step"; row-gap: 3px; column-gap: 6px; }
  .hs--v2 .hs-lumpen.hs-dlg-panel .hs-lumpen-row > :first-child { grid-area: icon; align-self: start; margin-top: 2px; }
  .hs--v2 .hs-lumpen.hs-dlg-panel .hs-lumpen-row > .hs-lumpen-info { grid-area: info; }
  .hs--v2 .hs-lumpen.hs-dlg-panel .hs-lumpen-row > .hs-lumpen-step { grid-area: step; justify-self: end; }
  /* "Kaufen": the same rule – name / meta / effect over the full width, price + buy button in their own line */
  .hs--v2 .hs-lumpen.hs-dlg-panel .hs-shop-offer { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "pic info" "pic act"; row-gap: 4px; column-gap: 6px; }
  .hs--v2 .hs-lumpen.hs-dlg-panel .hs-shop-offer > .hs-shop-pic { grid-area: pic; align-self: start; }
  .hs--v2 .hs-lumpen.hs-dlg-panel .hs-shop-offer > .hs-shop-info { grid-area: info; }
  .hs--v2 .hs-lumpen.hs-dlg-panel .hs-shop-offer > .hs-shop-act { grid-area: act; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; }
}