/* Kriegswerk — industrial war-economy UI. Dark steel, stencilled plates, paper documents. */
:root {
    --bg-main: #13120e; /* the workspace injects body { background-color: var(--bg-main) } into embedded tools */
    --bg-card: #222119;
    --kw-bg: #13120e;
    --kw-bg2: #1b1a15;
    --kw-panel: #222119;
    --kw-panel2: #2b2a21;
    --kw-panel3: #34322a;
    --kw-line: #45422f;
    --kw-line2: #5a5640;
    --kw-text: #ece4cb;
    --kw-dim: #a79f86;
    --kw-faint: #6f6953;
    --kw-feldgrau: #5d6450;
    --kw-gelb: #d4b064;
    --kw-gelb2: #f0cf7e;
    --kw-rot: #b8352c;
    --kw-rot2: #e0584c;
    --kw-rost: #8a4a22;
    --kw-gruen: #8fae5a;
    --kw-blau: #7fa6bf;
    --kw-side: #6cbca8; /* hands and vehicles away on side jobs (town contracts): the +N, its line and the bar's away part */
    --kw-paper: #e8dec2;
    --kw-paper2: #d9cca8;
    --kw-ink: #2a2418;
    --kw-shadow: 0 2px 0 #0b0a07, 0 6px 14px rgba(0, 0, 0, .45);
    --kw-font: 'Barlow Semi Condensed', 'Barlow', 'Segoe UI', sans-serif;
    --kw-stencil: 'Saira Stencil One', 'Barlow Semi Condensed', sans-serif;
    --kw-mono: 'VT323', 'Courier New', monospace;
    --kw-type: 'Special Elite', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.kw-body {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(212, 176, 100, .07), transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(138, 74, 34, .10), transparent 50%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 4px),
        var(--kw-bg);
    color: var(--kw-text);
    font-family: var(--kw-font);
    font-size: 16px;
    line-height: 1.3;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }

/* ---------- scrollbars: one themed bar for every scrolling area of the page (panels, modals, catalogues, the card table,
   the puzzles, tooltips) ----------
   Chromium and Safari draw ::-webkit-scrollbar; Firefox the standard scrollbar-color/-width. Chromium drops the webkit
   pseudo-elements on any element that sets scrollbar-color or a non-auto scrollbar-width, so the standard pair goes to
   Firefox only (@supports) and an area changes its bar through the tokens (--kw-sb-track: transparent) or hides it with
   scrollbar-width: none + ::-webkit-scrollbar { display: none }. Zero specificity (:where), so any such rule wins. */
:root { --kw-sb-thumb: #5a5640; --kw-sb-thumb-hi: #77714f; --kw-sb-thumb-on: #a08a52; --kw-sb-track: #17160f; --kw-sb-edge: #0a0907; }
@supports not selector(::-webkit-scrollbar) {
    :where(html, body.kw-body, body.kw-body *) { scrollbar-width: thin; scrollbar-color: var(--kw-sb-thumb) var(--kw-sb-track); }
}
:where(html, body.kw-body, body.kw-body *)::-webkit-scrollbar { width: 10px; height: 10px; }
:where(html, body.kw-body, body.kw-body *)::-webkit-scrollbar-track { background: var(--kw-sb-track); box-shadow: inset 1px 0 0 var(--kw-sb-edge); }
:where(html, body.kw-body, body.kw-body *)::-webkit-scrollbar-track:horizontal { box-shadow: inset 0 1px 0 var(--kw-sb-edge); }
:where(html, body.kw-body, body.kw-body *)::-webkit-scrollbar-thumb { background: var(--kw-sb-thumb) padding-box; border: 2px solid transparent; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
:where(html, body.kw-body, body.kw-body *)::-webkit-scrollbar-thumb:hover { background-color: var(--kw-sb-thumb-hi); }
:where(html, body.kw-body, body.kw-body *)::-webkit-scrollbar-thumb:active { background-color: var(--kw-sb-thumb-on); }
:where(html, body.kw-body, body.kw-body *)::-webkit-scrollbar-corner { background: var(--kw-sb-track); }
img.kw-ico, canvas.kw-ico { image-rendering: pixelated; display: block; flex: none; }
.kw-hidden { display: none !important; }

/* ---------- app frame ---------- */
#kw-app { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; height: 100dvh; }
.kw-top {
    display: flex; align-items: stretch; gap: 10px; padding: 8px 12px;
    background: linear-gradient(#2c2a21, #1d1c16);
    border-bottom: 3px solid #0a0907;
    box-shadow: inset 0 -1px 0 #4d4935, 0 4px 16px rgba(0, 0, 0, .5);
    position: relative; z-index: 5;
}
.kw-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kw-brand-mark {
    width: 44px; height: 44px; flex: none; border-radius: 4px;
    background: #1a1914; border: 2px solid #0a0907; box-shadow: inset 0 0 0 1px #4d4935;
    display: grid; place-items: center;
}
.kw-brand-mark img { width: 40px; height: 40px; }
.kw-brand h1 {
    margin: 0; font-family: var(--kw-stencil); font-weight: 400; font-size: 26px; letter-spacing: .06em; line-height: 1;
    color: var(--kw-gelb); text-shadow: 0 2px 0 #000, 0 0 18px rgba(212, 176, 100, .25);
}
.kw-company {
    display: block; margin-top: 3px; color: var(--kw-dim); font-size: 14px; letter-spacing: .04em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 230px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.kw-company:hover { color: var(--kw-text); }
.kw-date {
    display: grid; align-content: center; gap: 3px; min-width: 190px; padding: 0 12px;
    border-left: 1px solid #0a0907; border-right: 1px solid #0a0907; box-shadow: 1px 0 0 #3d3a2b, -1px 0 0 #3d3a2b;
}
.kw-date-main { font-family: var(--kw-type); font-size: 21px; color: var(--kw-paper); letter-spacing: .02em; }
.kw-month-bar { height: 5px; background: #0d0c09; border: 1px solid #3a372a; position: relative; overflow: hidden; }
.kw-month-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--kw-rost), var(--kw-gelb)); }
.kw-phase-chip {
    font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--kw-gelb2); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.kw-phase-chip[data-tone='war'], .kw-phase-chip[data-tone='total'], .kw-phase-chip[data-tone='late'] { color: var(--kw-rot2); }
.kw-resources { display: flex; gap: 8px; align-items: stretch; flex: 1; min-width: 0; }
.kw-res {
    display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; min-width: 0;
    background: #15140f; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #34322a, inset 0 8px 16px rgba(0, 0, 0, .35);
    border-radius: 3px;
}
.kw-res img { width: 36px; height: 36px; }
.kw-res b { display: block; font-family: var(--kw-mono); font-weight: 400; font-size: 27px; line-height: .9; color: #f6eed4; white-space: nowrap; }
.kw-res small { display: block; font-size: 13px; color: var(--kw-dim); white-space: nowrap; }
.kw-res small em { font-style: normal; color: var(--kw-gruen); }
.kw-res--rm b { color: var(--kw-gelb2); text-shadow: 0 0 12px rgba(240, 207, 126, .2); }
.kw-res--heat { cursor: pointer; }
.kw-heat-bar { width: 70px; height: 7px; margin-top: 3px; background: #0d0c09; border: 1px solid #3a372a; overflow: hidden; }
.kw-heat-bar i { display: block; height: 100%; background: linear-gradient(90deg, #6d8a3d, #d4b064 55%, #b8352c); background-size: 70px 100%; }
.kw-top-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.kw-icon-btn {
    width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; color: var(--kw-text);
    background: linear-gradient(#3b392d, #25241c); border: 1px solid #0a0907; border-radius: 3px;
    box-shadow: inset 0 1px 0 #57533e, 0 2px 0 #0a0907; font-size: 17px;
}
.kw-icon-btn:hover { background: linear-gradient(#48453a, #2c2a21); }
.kw-icon-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #57533e; }
.kw-icon-btn[aria-pressed='false'] { color: var(--kw-faint); }

.kw-main { display: grid; grid-template-columns: minmax(430px, 47%) minmax(0, 1fr); gap: 12px; padding: 12px; min-height: 0; }
.kw-left { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; min-height: 0; }
.kw-right { container: kwright / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 0; background: var(--kw-panel); border: 2px solid #0a0907; box-shadow: inset 0 0 0 1px #3b3829, var(--kw-shadow); border-radius: 4px; }

/* ---------- scene ---------- */
.kw-scene-frame {
    position: relative; border: 3px solid #0a0907; border-radius: 4px; overflow: hidden; background: #0b0c10;
    box-shadow: inset 0 0 0 1px #4d4935, var(--kw-shadow);
}
.kw-scene-frame canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; cursor: pointer; }
/* the view tabs sit in a strip of their own under the picture: with a dozen sites and halls they would cover the yards,
   the gatehouse and the convoys along the bottom of every view. The strip wraps only when tabs are added (a purchase). */
.kw-hall-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px 5px; min-height: 34px; box-sizing: border-box; background: #14130e; border-top: 2px solid #0a0907; box-shadow: inset 0 1px 0 #3b3829; pointer-events: auto; }
.kw-hall-tab {
    position: relative; min-width: 30px; height: 26px; padding: 0 7px; font-family: var(--kw-stencil); font-size: 15px; cursor: pointer;
    color: var(--kw-text); background: rgba(20, 19, 14, .82); border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #5a5640; border-radius: 2px;
}
.kw-hall-tab[aria-selected='true'] { background: var(--kw-gelb); color: var(--kw-ink); box-shadow: inset 0 0 0 1px #fff3; }
/* the alert dot sits in the corner: a tab never changes its width when an alert comes or goes */
.kw-hall-tab.has-alert::after { content: ''; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--kw-rot2); box-shadow: 0 0 0 1px #0a0907; }

.kw-press-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
/* the focus box keeps one size whatever it shows (a sell button, a warning, a longer line): title, two lines of figures,
   one row of tools, one row of effects — so neither the PRESS plate beside it nor the front report below ever moves */
.kw-press {
    position: relative; width: 178px; height: 88px; cursor: pointer; border: 0; padding: 0; background: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.kw-press-plate {
    position: absolute; inset: 0; border-radius: 6px;
    background: linear-gradient(#c43a2f, #8e241c); border: 3px solid #0a0907;
    box-shadow: inset 0 3px 0 #ea6a5d, inset 0 -5px 0 #5e1510, 0 6px 0 #0a0907, 0 10px 18px rgba(0, 0, 0, .5);
    display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 6px; padding: 0 10px 4px 8px; transition: transform .05s;
}
.kw-press-plate img { width: 56px; height: 56px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.kw-press-label { font-family: var(--kw-stencil); font-size: 24px; color: #fff4e0; text-shadow: 0 2px 0 #5e1510; line-height: .95; text-align: left; }
.kw-press-label small { display: block; font-family: var(--kw-font); font-size: 13px; letter-spacing: .06em; color: #ffd9cf; text-shadow: none; }
.kw-press:active .kw-press-plate, .kw-press.is-down .kw-press-plate { transform: translateY(5px); box-shadow: inset 0 3px 0 #ea6a5d, inset 0 -3px 0 #5e1510, 0 1px 0 #0a0907, 0 3px 8px rgba(0, 0, 0, .5); }
/* held down (press-hold.js): the plate stays down and its face warms a touch, a faint ring breathing at the repeat's pace */
.kw-press { touch-action: none; -webkit-touch-callout: none; }
.kw-press.is-held .kw-press-plate { transform: translateY(5px); box-shadow: inset 0 3px 0 #ea6a5d, inset 0 -3px 0 #5e1510, 0 1px 0 #0a0907, 0 3px 8px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 214, 140, .28); filter: brightness(1.07); animation: kw-press-held .3s ease-in-out infinite alternate; }
@keyframes kw-press-held { to { filter: brightness(1.14); } }
@media (prefers-reduced-motion: reduce) { .kw-press.is-held .kw-press-plate { animation: none; } }
.kw-press:focus-visible { outline: 3px solid var(--kw-gelb); outline-offset: 4px; border-radius: 8px; }
.kw-focus-info { min-width: 0; height: 124px; overflow: hidden; font-size: 15px; line-height: 1.35; color: var(--kw-dim); }
.kw-focus-info [data-f="fmeta"] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; height: 2.7em; overflow: hidden; font-variant-numeric: tabular-nums; }
.kw-focus-info strong { color: var(--kw-text); font-size: 18px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-focus-info b { color: var(--kw-text); font-weight: 600; }
.kw-focus-tools { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; height: 28px; margin-top: 6px; overflow: hidden; }
.kw-focus-tools > * { flex-shrink: 0; }
.kw-hand-select { max-width: 240px; height: 28px; }
.kw-first-steps { margin-bottom: 10px; padding: 10px 12px; font-size: 15.5px; color: #e9dcb4; background: #2f2612; border: 1px solid #6b5426; border-radius: 4px; }
.kw-focus-info .kw-effects { display: flex; flex-wrap: nowrap; gap: 5px; height: 22px; margin-top: 5px; overflow: hidden; }
.kw-focus-info .kw-effects > * { flex-shrink: 0; white-space: nowrap; }
.kw-effect { font-size: 13px; padding: 1px 7px; border-radius: 2px; background: #3b2f18; color: var(--kw-gelb2); border: 1px solid #6b5426; }
.kw-effect.bad { background: #3a1714; color: #ff9d8f; border-color: #7a2a22; }
.kw-effect.good { background: #1f2d15; color: #c5e39a; border-color: #4c6a2b; }

/* ---------- front report ---------- */
.kw-front {
    min-height: 0; overflow: auto; padding: 12px 14px; border-radius: 4px; border: 2px solid #0a0907;
    background: linear-gradient(180deg, rgba(232, 222, 194, .06), transparent 40%), var(--kw-panel);
    box-shadow: inset 0 0 0 1px #3b3829, var(--kw-shadow);
}
.kw-front-head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.kw-front h2 { margin: 0; font-family: var(--kw-stencil); font-weight: 400; font-size: 22px; color: var(--kw-paper); letter-spacing: .03em; }
.kw-front-kicker { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--kw-rot2); white-space: nowrap; }
.kw-front p { margin: 6px 0 10px; color: #cfc6ab; font-size: 15.5px; }
.kw-demand-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kw-demand { padding: 6px 8px; background: #17160f; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #34322a; border-radius: 3px; }
.kw-demand span { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--kw-dim); }
.kw-demand b { font-family: var(--kw-mono); font-weight: 400; font-size: 24px; line-height: 1; }
.kw-demand b.up { color: var(--kw-gruen); } .kw-demand b.down { color: var(--kw-rot2); }
/* a fixed grid of four slots (ui.js HOT_SLOTS): goods coming and going never move the others or what lies below */
.kw-hot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.kw-hot {
    display: flex; align-items: center; gap: 6px; min-width: 0; height: 40px; padding: 3px 8px 3px 3px; cursor: pointer; font-size: 14px; color: var(--kw-text);
    background: #2f2612; border: 1px solid #6b5426; border-radius: 3px;
}
.kw-hot span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.kw-hot--empty { cursor: default; background: transparent; border-style: dashed; border-color: #3b3829; }
.kw-hot img { width: 32px; height: 32px; }
.kw-hot b { color: var(--kw-gelb2); font-family: var(--kw-mono); font-weight: 400; font-size: 19px; }
.kw-section-label { margin: 12px 0 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--kw-faint); }

/* ---------- tabs ---------- */
.kw-tabs { display: flex; flex-wrap: nowrap; gap: 2px; padding: 6px 6px 0; background: #17160f; border-bottom: 2px solid #0a0907; overflow: hidden; }
.kw-tab {
    position: relative; display: flex; align-items: center; gap: 6px; padding: 5px 10px 6px 6px; cursor: pointer; white-space: nowrap;
    color: var(--kw-dim); font-size: 16px; letter-spacing: .03em; background: #23221a; border: 1px solid #0a0907; border-bottom: 0;
    border-radius: 4px 4px 0 0; box-shadow: inset 0 1px 0 #3b3829;
}
.kw-tab img { width: 28px; height: 28px; }
.kw-tab:hover { color: var(--kw-text); background: #2b2a21; }
.kw-tab[aria-selected='true'] { color: var(--kw-ink); background: linear-gradient(var(--kw-gelb2), var(--kw-gelb)); box-shadow: inset 0 1px 0 #fff6; }
.kw-tab--black[aria-selected='true'] { color: #f0e6d0; background: linear-gradient(#4a2a2a, #2a1414); }
.kw-badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 12px; line-height: 18px; text-align: center;
    background: var(--kw-rot); color: #fff; font-family: var(--kw-font); font-weight: 700;
}
.kw-badge:empty { display: none; }
.kw-panel { min-height: 0; overflow: auto; padding: 12px; }
.kw-panel h3 { margin: 0 0 8px; font-family: var(--kw-stencil); font-weight: 400; font-size: 21px; letter-spacing: .03em; color: var(--kw-paper); }
.kw-panel-intro { margin: -2px 0 12px; color: var(--kw-dim); font-size: 15px; }
.kw-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.kw-toolbar .kw-spacer { flex: 1; }
.kw-select, .kw-input {
    height: 32px; padding: 0 8px; color: var(--kw-text); font-family: var(--kw-font); font-size: 15px;
    background: #15140f; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #3b3829; border-radius: 3px;
}
.kw-input::placeholder { color: var(--kw-faint); }
.kw-check { display: inline-flex; align-items: center; gap: 6px; color: var(--kw-dim); font-size: 15px; cursor: pointer; }
.kw-check input { accent-color: var(--kw-gelb); width: 16px; height: 16px; }

/* ---------- buttons ---------- */
.kw-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 3px 10px; cursor: pointer;
    font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--kw-text); white-space: nowrap;
    background: linear-gradient(#45423a, #2c2a22); border: 1px solid #0a0907; border-radius: 3px;
    box-shadow: inset 0 1px 0 #625e4a, 0 2px 0 #0a0907;
}
.kw-btn:hover:not(:disabled) { background: linear-gradient(#524e44, #34322a); }
.kw-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 0 #625e4a; }
.kw-btn:disabled { cursor: not-allowed; opacity: .45; }
.kw-btn--gold { color: var(--kw-ink); background: linear-gradient(var(--kw-gelb2), #b8913f); box-shadow: inset 0 1px 0 #fff8, 0 2px 0 #0a0907; }
.kw-btn--gold:hover:not(:disabled) { background: linear-gradient(#ffe29a, #c9a04a); }
.kw-btn--red { color: #fff; background: linear-gradient(#c43a2f, #8e241c); box-shadow: inset 0 1px 0 #ea6a5d, 0 2px 0 #0a0907; }
.kw-btn--red:hover:not(:disabled) { background: linear-gradient(#d44a3f, #9e342c); }
.kw-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px #45422f; }
.kw-btn--sm { min-height: 25px; padding: 1px 7px; font-size: 13.5px; }
.kw-btn .kw-cost { font-family: var(--kw-mono); font-weight: 400; font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
/* costs that creep up on their own (repairs and servicing follow the wear): room reserved so the button keeps its width */
.kw-btn [data-f="repc"], .kw-btn [data-f="svc"] { display: inline-block; min-width: 4.4ch; text-align: left; }
/* the bribe follows the suspicion, the black-market offers change every 90 seconds: room for "999.9 K" */
.kw-btn [data-f="bribe"], .kw-btn[data-act="bmbuy"] .kw-cost { display: inline-block; min-width: 6.6ch; text-align: left; }
.kw-btn.cant .kw-cost { color: #ff9d8f; }
.kw-btn--gold.cant .kw-cost { color: #7a1d16; }

/* ---------- production lines ---------- */
.kw-prod-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.kw-stat { padding: 7px 10px; background: #17160f; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #34322a; border-radius: 3px; }
.kw-stat span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--kw-dim); }
.kw-stat b { font-family: var(--kw-mono); font-weight: 400; font-size: 25px; line-height: 1; }
.kw-hall-head { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-family: var(--kw-stencil); font-size: 17px; color: var(--kw-dim); letter-spacing: .05em; }
.kw-hall-head::after { content: ''; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #45422f 0 8px, transparent 8px 12px); }
.kw-lines { display: grid; gap: 8px; }
.kw-line {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px 8px 8px;
    background: linear-gradient(90deg, #2c2b22, #25241c); border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3c2d;
    position: relative;
}
.kw-line.is-focus { box-shadow: inset 0 0 0 2px var(--kw-gelb), 0 0 18px rgba(212, 176, 100, .15); }
.kw-line.is-stalled { background: linear-gradient(90deg, #3a2320, #25241c 60%); }
.kw-line.is-damaged { background: repeating-linear-gradient(135deg, #3a2a18 0 10px, #302214 10px 20px); }
.kw-line-icon { position: relative; width: 72px; height: 72px; display: grid; place-items: center; background: #15140f; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #34322a; border-radius: 3px; cursor: pointer; }
.kw-line-icon img { width: 64px; height: 64px; }
.kw-line-slot { position: absolute; left: 3px; top: 2px; font-family: var(--kw-stencil); font-size: 13px; color: var(--kw-gelb); text-shadow: 0 1px 0 #000; }
.kw-line-lvl { position: absolute; right: 2px; bottom: 1px; font-family: var(--kw-mono); font-size: 19px; line-height: 1; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.kw-line-main { min-width: 0; }
.kw-line-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kw-line-title strong { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-line-title small { color: var(--kw-faint); font-size: 13px; white-space: nowrap; }
/* one line whatever the status says (a long warning is cut with an ellipsis, the full text in its tooltip) */
.kw-line-meta { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 4px 12px; font-size: 14px; color: var(--kw-dim); margin-top: 1px; overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kw-line-meta > span { flex-shrink: 0; }
.kw-line-meta > .kw-status { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kw-line-meta b { font-family: var(--kw-mono); font-weight: 400; font-size: 18px; color: var(--kw-text); }
.kw-progress { height: 6px; margin: 5px 0 4px; background: #0d0c09; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #2e2c22; overflow: hidden; }
.kw-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6d8a3d, #a9c46f); }
.kw-line.is-stalled .kw-progress i { background: #b8352c; }
.kw-inputs { display: flex; flex-wrap: wrap; gap: 4px; }
.kw-in {
    display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 1px; font-size: 13px; color: var(--kw-dim);
    background: #1a1914; border: 1px solid #0a0907; border-radius: 2px;
}
.kw-in img { width: 22px; height: 22px; }
.kw-in b { font-family: var(--kw-mono); font-weight: 400; font-size: 16px; color: var(--kw-text); }
.kw-in.short { border-color: #7a2a22; background: #2e1512; }
.kw-in.short b { color: #ff9d8f; }
.kw-line-side { display: grid; gap: 4px; justify-items: end; }
.kw-line-btns { display: flex; gap: 4px; }
.kw-line-tools { display: flex; gap: 4px; }
.kw-milestone { font-size: 12.5px; color: var(--kw-faint); }
.kw-status { font-size: 13.5px; font-weight: 600; }
.kw-status.bad { color: #ff9d8f; } .kw-status.warn { color: #ffcf7a; }
.kw-slot-empty, .kw-slot-locked {
    display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border-radius: 4px; cursor: pointer;
    border: 2px dashed #4d4935; color: var(--kw-dim); background: rgba(0, 0, 0, .15); font-size: 17px;
}
.kw-slot-empty:hover { border-color: var(--kw-gelb); color: var(--kw-gelb2); background: rgba(212, 176, 100, .05); }
.kw-slot-locked { border-style: solid; border-color: #2e2c22; background: repeating-linear-gradient(135deg, #1b1a14 0 12px, #16150f 12px 24px); }
.kw-slot-locked.can { border-color: #6b5426; }

/* ---------- item picker & cards ---------- */
.kw-cat-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.kw-chip {
    padding: 3px 9px; font-size: 14px; cursor: pointer; color: var(--kw-dim); background: #1a1914; border: 1px solid #0a0907;
    box-shadow: inset 0 0 0 1px #34322a; border-radius: 12px; white-space: nowrap;
}
.kw-chip[aria-pressed='true'] { color: var(--kw-ink); background: var(--kw-gelb); box-shadow: none; }
.kw-chip small { opacity: .7; }
.kw-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 8px; }
.kw-pick {
    display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 8px; text-align: left; cursor: pointer; color: var(--kw-text);
    background: #2a2920; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3c2d;
}
.kw-pick:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--kw-gelb); }
.kw-pick:disabled { opacity: .5; cursor: not-allowed; }
.kw-pick img.kw-ico { width: 64px; height: 64px; background: #15140f; border-radius: 3px; }
.kw-pick strong { display: block; font-size: 16.5px; line-height: 1.1; }
.kw-pick small { display: block; color: var(--kw-faint); font-size: 12.5px; }
.kw-pick .kw-pick-row { display: flex; justify-content: space-between; gap: 6px; margin-top: 3px; font-size: 13.5px; color: var(--kw-dim); }
.kw-pick .kw-pick-row b { font-family: var(--kw-mono); font-weight: 400; font-size: 17px; color: var(--kw-text); }
.kw-pick .kw-inputs { margin-top: 4px; }

/* ---------- market ---------- */
.kw-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-variant-numeric: tabular-nums; }
/* fixed columns: figures changing in a row never widen a column and push the buttons beside it */
.kw-table--fixed { table-layout: fixed; }
.kw-table--fixed td { overflow: hidden; }
.kw-table th { position: sticky; top: -12px; z-index: 1; background: var(--kw-panel); padding: 4px 6px; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--kw-faint); text-align: left; }
.kw-table td { padding: 4px 6px; background: #29281f; border-top: 1px solid #0a0907; border-bottom: 1px solid #0a0907; vertical-align: middle; }
.kw-table td:first-child { border-left: 1px solid #0a0907; border-radius: 4px 0 0 4px; }
.kw-table td:last-child { border-right: 1px solid #0a0907; border-radius: 0 4px 4px 0; }
.kw-mitem { display: flex; align-items: center; gap: 8px; min-width: 180px; cursor: pointer; }
.kw-mitem img { width: 44px; height: 44px; }
.kw-mitem strong { display: block; font-size: 16px; line-height: 1.1; }
.kw-mitem small { color: var(--kw-faint); font-size: 12.5px; }
.kw-num { font-family: var(--kw-mono); font-size: 20px; white-space: nowrap; }
.kw-num.gold { color: var(--kw-gelb2); }
.kw-sat { width: 64px; height: 6px; background: #0d0c09; border: 1px solid #0a0907; margin-top: 3px; overflow: hidden; }
.kw-sat i { display: block; height: 100%; background: linear-gradient(90deg, #b8352c, #d4b064 50%, #8fae5a); background-size: 64px 100%; }
.kw-spark { width: 90px; height: 28px; display: block; }
.kw-dem { font-size: 13px; font-weight: 700; }
.kw-dem.up { color: var(--kw-gruen); } .kw-dem.down { color: var(--kw-rot2); }
.kw-btn-group { display: flex; gap: 3px; flex-wrap: wrap; }
.kw-autosell { display: flex; align-items: center; gap: 4px; }
.kw-autosell .kw-input { width: 70px; height: 25px; font-size: 14px; }

/* ---------- contracts (paper) ---------- */
.kw-contracts { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.kw-doc-gap { visibility: hidden; pointer-events: none; }
/* the town's small orders: a plainer slip under the contracts (engine.js genTownOrder) */
.kw-town-slots { margin-left: 6px; letter-spacing: .04em; color: var(--kw-dim); }
.kw-town-intro { margin-top: 0; }
.kw-doc--town .kw-doc-head { border-bottom-width: 1px; }
.kw-doc--town .kw-doc-reward small { font-size: 12.5px; }
.kw-doc {
    position: relative; padding: 14px 16px 12px; color: var(--kw-ink); font-family: var(--kw-type); font-size: 15px;
    background:
        radial-gradient(circle at 90% 10%, rgba(138, 74, 34, .10), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(90, 70, 30, .10), transparent 40%),
        linear-gradient(var(--kw-paper), var(--kw-paper2));
    border-radius: 2px; box-shadow: 0 1px 0 #fff4 inset, 0 8px 18px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .6);
    transform: rotate(var(--rot, 0deg));
}
.kw-doc::before { content: ''; position: absolute; left: 50%; top: -7px; width: 60px; height: 14px; margin-left: -30px; background: rgba(210, 200, 170, .55); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transform: rotate(-2deg); }
.kw-doc-head { display: flex; justify-content: space-between; gap: 8px; border-bottom: 2px solid var(--kw-ink); padding-bottom: 5px; margin-bottom: 8px; }
.kw-doc-head strong { font-family: var(--kw-stencil); font-weight: 400; font-size: 17px; letter-spacing: .04em; line-height: 1.05; }
.kw-doc-head small { display: block; font-size: 12px; opacity: .75; }
.kw-doc-ref { font-size: 12px; text-align: right; white-space: nowrap; }
.kw-doc p { margin: 0 0 6px; }
.kw-doc-req { display: grid; gap: 5px; margin: 6px 0 8px; }
.kw-req { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; }
.kw-req img { width: 40px; height: 40px; background: rgba(0, 0, 0, .08); border-radius: 2px; }
.kw-req-name { font-size: 14px; line-height: 1.1; }
.kw-req-bar { height: 5px; margin-top: 3px; background: rgba(0, 0, 0, .18); overflow: hidden; }
.kw-req-bar i { display: block; height: 100%; background: #3b5a2a; }
.kw-req-qty { font-size: 14px; white-space: nowrap; }
.kw-req-qty.ok { color: #2e5a1c; } .kw-req-qty.low { color: #8e241c; }
.kw-doc-foot { display: flex; justify-content: space-between; gap: 8px; align-items: flex-end; border-top: 1px dashed rgba(42, 36, 24, .5); padding-top: 7px; }
.kw-doc-reward { font-size: 14px; line-height: 1.25; }
.kw-doc-reward b { font-family: var(--kw-mono); font-weight: 400; font-size: 22px; color: #6b1a14; }
.kw-doc-due { font-size: 12.5px; }
.kw-doc-due .kw-req-bar i { background: #8e241c; }
.kw-stamp {
    position: absolute; right: 118px; bottom: 44px; padding: 2px 8px; font-family: var(--kw-stencil); font-size: 20px; letter-spacing: .08em;
    color: rgba(170, 30, 20, .75); border: 3px solid rgba(170, 30, 20, .7); border-radius: 4px; transform: rotate(-11deg); pointer-events: none;
    mix-blend-mode: multiply;
}
.kw-stamp--major { color: rgba(30, 60, 120, .7); border-color: rgba(30, 60, 120, .65); }
.kw-doc .kw-btn { font-family: var(--kw-font); }
.kw-doc.is-done { animation: kw-stamp-out .9s ease forwards; }
@keyframes kw-stamp-out { 0% { transform: rotate(var(--rot)) scale(1); } 30% { transform: rotate(var(--rot)) scale(1.04); } 100% { transform: rotate(8deg) translateY(40px) scale(.9); opacity: 0; } }
.kw-empty-note { padding: 26px; text-align: center; color: var(--kw-faint); border: 2px dashed #3b3829; border-radius: 4px; }
.kw-rep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin-top: 8px; }
.kw-rep { display: flex; justify-content: space-between; gap: 8px; padding: 5px 9px; font-size: 14px; background: #1a1914; border: 1px solid #0a0907; border-radius: 3px; }
.kw-rep b { color: var(--kw-gelb2); font-family: var(--kw-mono); font-weight: 400; font-size: 18px; }

/* ---------- research tree ---------- */
.kw-bureau { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; margin-bottom: 12px; background: #1a1914; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #34322a; border-radius: 4px; }
.kw-bureau img { width: 64px; height: 64px; }
.kw-tree-wrap { position: relative; overflow: auto; border: 1px solid #0a0907; border-radius: 4px; background:
    linear-gradient(rgba(127, 166, 191, .05) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(127, 166, 191, .05) 1px, transparent 1px) 0 0 / 22px 22px, #141a1e; max-height: calc(100vh - 330px); min-height: 360px; }
.kw-tree { position: relative; display: grid; grid-template-columns: 54px repeat(var(--kw-branches, 9), 168px); min-width: max-content; }
.kw-tree svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.kw-tree-col-head { position: sticky; top: 0; z-index: 3; padding: 6px 6px 7px; text-align: center; font-family: var(--kw-stencil); font-size: 14px; color: var(--kw-paper); background: #1d262c; border-bottom: 2px solid #0a0907; border-left: 1px solid #0a0907; }
.kw-tree-year { position: sticky; left: 0; z-index: 2; padding: 6px 4px; font-family: var(--kw-mono); font-size: 20px; color: var(--kw-blau); background: #182025; border-top: 1px dashed #2b3a44; text-align: center; }
.kw-tree-cell { display: grid; align-content: start; gap: 8px; padding: 8px 9px; border-top: 1px dashed #2b3a44; border-left: 1px solid rgba(0, 0, 0, .3); position: relative; z-index: 1; }
.kw-node {
    display: grid; grid-template-columns: 34px 1fr; gap: 5px; align-items: center; padding: 4px 6px 4px 4px; text-align: left; cursor: pointer;
    color: #dce8ee; font-size: 13.5px; line-height: 1.1; background: #22313a; border: 1px solid #0a0907; border-radius: 3px; box-shadow: inset 0 1px 0 #34505e;
}
.kw-node img { width: 32px; height: 32px; }
.kw-node small { display: block; margin-top: 2px; font-family: var(--kw-mono); font-size: 15px; color: #9fc0d2; }
.kw-node[data-state='done'] { background: #26351f; box-shadow: inset 0 1px 0 #4c6a2b; color: #d7ecbc; }
.kw-node[data-state='done'] small { color: #a9c46f; }
.kw-node[data-state='ready'] { background: #4a3a17; box-shadow: inset 0 0 0 2px var(--kw-gelb), 0 0 14px rgba(212, 176, 100, .35); color: #fff2cf; animation: kw-pulse 1.6s ease-in-out infinite; }
.kw-node[data-state='ready'] small { color: var(--kw-gelb2); }
.kw-node[data-state='future'], .kw-node[data-state='locked'] { opacity: .5; filter: saturate(.3); }
.kw-node[aria-selected='true'] { outline: 2px solid #fff; outline-offset: 1px; }
@keyframes kw-pulse { 50% { box-shadow: inset 0 0 0 2px var(--kw-gelb2), 0 0 22px rgba(240, 207, 126, .55); } }
.kw-tech-detail { margin-top: 10px; padding: 12px; background: #1a1914; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #34322a; border-radius: 4px; }
.kw-tech-detail h4 { margin: 0 0 4px; font-family: var(--kw-stencil); font-weight: 400; font-size: 20px; color: var(--kw-paper); }
.kw-unlocks { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.kw-unlock { display: grid; justify-items: center; width: 76px; gap: 2px; font-size: 12px; text-align: center; color: var(--kw-dim); line-height: 1.05; cursor: pointer; }
.kw-unlock img { width: 56px; height: 56px; background: #15140f; border-radius: 3px; }
.kw-rep-techs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 12px; }

/* ---------- upgrades ---------- */
.kw-upg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.kw-upg { display: grid; grid-template-columns: 48px 1fr; gap: 8px; padding: 8px; background: #2a2920; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3c2d; }
.kw-upg img { width: 48px; height: 48px; }
.kw-upg strong { display: block; font-size: 16.5px; }
.kw-upg p { margin: 1px 0 6px; font-size: 14px; color: var(--kw-dim); }
.kw-upg.owned { opacity: .55; }
/* ---------- Development → Foreign designs (data-designs.js) ---------- */
.kw-upg.kw-dz { min-width: 0; }
.kw-upg.kw-dz > div { min-width: 0; }
.kw-upg.kw-dz.is-have { box-shadow: inset 3px 0 0 #8fae5a, inset 0 1px 0 #3f3c2d; }
.kw-upg.kw-dz .kw-dz-nat { font-size: 12.5px; font-weight: 400; color: var(--kw-faint); }
.kw-upg.kw-dz .kw-dz-fx { display: flex; align-items: flex-start; gap: 4px; color: var(--kw-gruen); }
.kw-upg.kw-dz img.kw-ico:not(:first-child), .kw-upg.kw-dz .kw-dz-fx img, .kw-upg.kw-dz .kw-dz-route img, .kw-upg.kw-dz .kw-in img { width: 16px; height: 16px; flex: none; }
.kw-upg.kw-dz .kw-in img { width: 20px; height: 20px; }
.kw-dz-routes { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.kw-dz-route { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 3px; border-radius: 3px; background: #22211a; border: 1px solid #0a0907; font-size: 12.5px; color: var(--kw-dim); }
.kw-dz-act { flex-wrap: wrap; gap: 6px; align-items: center; }
.kw-dz-hint { display: block; color: var(--kw-faint); font-size: 13px; }
.kw-dz-rest small { color: var(--kw-faint); }
.kw-dz-lot { display: flex; align-items: flex-start; gap: 4px; margin-top: 4px; color: #f0cf7e; font-size: 12.5px; }
.kw-dz-lot img { width: 16px; height: 16px; flex: none; }
.kw-hs-prize.dz { white-space: normal; height: auto; min-height: 22px; flex: 1 1 auto; }
.kw-upg.owned .kw-btn { display: none; }
.kw-upg-owned-tag { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--kw-gruen); }

/* ---------- jobs (data-heist.js): the back room's board; every place fixed in size so nothing moves while it idles ---------- */
.kw-tab--heist[aria-selected='true'] { color: #f0e6d0; background: linear-gradient(#3e3a2a, #1e1c12); }
.kw-panel--heist { background:
    radial-gradient(ellipse at 30% -10%, rgba(255, 210, 120, .09), transparent 55%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .10) 0 1px, transparent 1px 4px), #15130e; }
.kw-hs-heat { grid-template-columns: 64px minmax(0, 1fr) auto; }
.kw-hs-inv { display: block; color: #b79a8a; font-size: 13px; line-height: 1.25; height: 2.5em; overflow: hidden; }
.kw-hs-cool { display: grid; gap: 5px; width: 170px; }
.kw-hs-cool .kw-btn { width: 100%; }
.kw-hs-win { display: grid; grid-template-columns: 40px minmax(0, 1fr) 96px; gap: 10px; align-items: center; padding: 6px 10px; margin-bottom: 4px; background: #1c1912; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #34302a; }
.kw-hs-win > img { width: 40px; height: 40px; }
.kw-hs-win strong { display: block; font-size: 16px; color: #e8c89a; }
.kw-hs-win strong small { color: var(--kw-dim); font-size: 13px; font-weight: 400; }
.kw-hs-win > div > small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--kw-dim); font-size: 13px; line-height: 1.25; height: 2.5em; }
.kw-hs-mults { display: grid; gap: 1px; font-family: var(--kw-mono); font-size: 16px; color: var(--kw-text); text-align: right; }
.kw-hs-none { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; margin: 8px 0; border: 1px dashed #4d4935; border-radius: 4px; background: rgba(0, 0, 0, .18); }
.kw-hs-none strong { font-size: 17px; color: #e8c89a; }
.kw-hs-none p { margin: 4px 0 0; color: var(--kw-dim); font-size: 14px; }
.kw-hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 8px; }
.kw-hs-tgt { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 6px 10px; height: 186px; padding: 8px 10px; overflow: hidden;
    background: #211d16; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3a2d; }
.kw-hs-tgt.t2 { background: #221c18; box-shadow: inset 0 1px 0 #4a3a2d; }
.kw-hs-tgt.t3 { background: #241a18; box-shadow: inset 0 1px 0 #5a3a2d, inset 0 0 0 1px #3a2620; }
.kw-hs-tgt.is-ready { box-shadow: inset 0 0 0 1px #8a7438, 0 0 10px rgba(212, 176, 100, .12); }
.kw-hs-tgt.is-alert { background: #2a1814; }
.kw-hs-tgt.is-alert .kw-hs-state { color: #ff9d8f; }
.kw-hs-tgt.is-empty { grid-template-rows: 1fr; align-items: center; opacity: .5; border-style: dashed; border-color: #4d4935; background: rgba(0, 0, 0, .15); }
.kw-hs-tgt.is-empty .kw-hs-pic img { opacity: .5; filter: grayscale(1); }
.kw-hs-pic { position: relative; display: flex; align-items: flex-start; justify-content: center; }
.kw-hs-pic img { width: 56px; height: 56px; background: #15140f; border-radius: 3px; }
.kw-hs-tier { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); min-width: 30px; padding: 0 4px; border-radius: 2px; text-align: center; font-family: var(--kw-stencil); font-size: 13px; line-height: 17px; color: #1a1814; background: #a89a6a; }
.kw-hs-tgt.t2 .kw-hs-tier { background: #c9a95c; } .kw-hs-tgt.t3 .kw-hs-tier { background: #e0784c; color: #1a0a06; }
.kw-hs-tgt.t4 { background: linear-gradient(160deg, #2c2414, #1e1810 60%); box-shadow: inset 0 1px 0 #6a5430, inset 0 0 0 1px #5a4620; }
.kw-hs-tgt.t4 .kw-hs-tier { background: linear-gradient(#f0cf7e, #c89e4c); color: #1a1206; }
.kw-hs-tgt.t4 .kw-hs-pic img { box-shadow: 0 0 10px rgba(240, 207, 126, .28); }
.kw-hs-prize { display: inline-flex; align-items: center; gap: 3px; flex: none; height: 22px; padding: 0 6px 0 3px; margin-right: 4px; border-radius: 3px; background: #3a2e14; border: 1px solid #0a0907; color: #f0cf7e; font-size: 12.5px; white-space: nowrap; }
.kw-hs-prize img { width: 18px; height: 18px; }
.kw-hs-prize b { font-weight: 600; }
.kw-hs-prize.ret { background: #1f2d15; color: #c5e39a; }
.kw-hs-prizeline { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; margin: 6px 0; background: #2a2212; border: 1px solid #0a0907; border-radius: 3px; color: #f0e2b8; }
.kw-hs-prizeline img { width: 32px; height: 32px; }
.kw-hs-prizeline.ret { background: #1c2614; color: #d8ecb8; }
.kw-hs-trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 5px; }
.kw-hs-trophy { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; align-items: center; height: 70px; padding: 5px 8px; background: linear-gradient(160deg, #2a2212, #1c1912 70%); border: 1px solid #0a0907; border-radius: 3px; overflow: hidden; }
.kw-hs-trophy.ret { background: linear-gradient(160deg, #1e2814, #1c1912 70%); }
.kw-hs-trophy > img { width: 48px; height: 48px; }
.kw-hs-trophy strong { display: block; font-size: 14.5px; color: #f0cf7e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hs-trophy.ret strong { color: #c5e39a; }
.kw-hs-trophy small { display: block; color: var(--kw-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hs-uqbody { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.kw-hs-uqbody > img { width: 96px; height: 96px; background: #15140f; border-radius: 4px; box-shadow: 0 0 18px rgba(240, 207, 126, .3); }
.kw-hs-uq.ret .kw-hs-uqbody > img { box-shadow: 0 0 18px rgba(197, 227, 154, .25); }
@media (max-width: 520px) { .kw-hs-uqbody { grid-template-columns: minmax(0, 1fr); } }
.kw-hs-main { min-width: 0; }
.kw-hs-main strong { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hs-main strong small { color: var(--kw-dim); font-size: 12.5px; font-weight: 400; }
.kw-hs-main > small { display: block; color: var(--kw-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hs-needs { display: flex; flex-wrap: wrap; gap: 2px 3px; margin-top: 4px; max-height: 94px; overflow: hidden; }
.kw-hs-need { display: inline-flex; align-items: center; gap: 3px; height: 21px; max-width: 100%; padding: 0 5px 0 2px; border-radius: 3px; background: #2a2620; border: 1px solid #0a0907; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.kw-hs-need img { width: 18px; height: 18px; flex: none; }
.kw-hs-need b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kw-hs-need b i { font-style: normal; opacity: .7; margin-left: 2px; }
.kw-hs-need { min-width: 0; max-width: 100%; }
.kw-hs-need.ok { background: #1f2d15; color: #c5e39a; }
.kw-hs-need.miss { background: #3a1714; color: #ff9d8f; }
.kw-hs-foot { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 118px) auto; gap: 8px; align-items: center; font-size: 13px; color: var(--kw-dim); }
.kw-hs-loot { flex-wrap: wrap; overflow: hidden; height: 26px; } /* what does not fit wraps out of sight, never half a chip */
.kw-hs-loot .kw-in img { width: 20px; height: 20px; }
.kw-hs-loot .kw-in b { font-size: 15px; }
.kw-hs-loot--plan { flex-wrap: wrap; height: auto; margin: 4px 0; }
.kw-hs-state { text-align: right; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.kw-hs-jobs { display: grid; gap: 5px; }
.kw-hs-job { display: grid; grid-template-columns: 40px minmax(0, 1fr) 120px; gap: 10px; align-items: center; height: 58px; padding: 6px 10px; background: #1c1912; border: 1px solid #0a0907; border-radius: 3px; overflow: hidden; }
.kw-hs-job > img { width: 40px; height: 40px; }
.kw-hs-job strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hs-job small { display: block; color: var(--kw-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hs-job.is-empty { opacity: .45; border-style: dashed; border-color: #4d4935; grid-template-columns: 40px minmax(0, 1fr) 0; }
.kw-hs-job.res-fail .kw-bar i { background: linear-gradient(90deg, #8e241c, #e0584c); }
.kw-hs-left { font-family: var(--kw-mono); font-size: 17px; text-align: right; white-space: nowrap; color: var(--kw-text); }
.kw-hs-crews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 5px; }
.kw-hs-crew { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 64px; padding: 5px 8px; background: #1c1912; border: 1px solid #0a0907; border-radius: 3px; overflow: hidden; }
.kw-hs-crew > img { width: 40px; height: 40px; }
.kw-hs-crew strong { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hs-crew small { display: block; color: var(--kw-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-hs-crew.is-away { background: #17150f; }
.kw-hs-crew.is-away > img { opacity: .55; }
.kw-hs-crew.is-empty { opacity: .45; border-style: dashed; border-color: #4d4935; }
.kw-hs-crew .kw-btn { width: 96px; white-space: nowrap; }
.kw-hs-stars { color: var(--kw-gelb2); letter-spacing: 1px; }
.kw-hs-stars i { font-style: normal; color: #4a4636; }
.kw-hs-kit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
@media (max-width: 760px) { .kw-hs-heat { grid-template-columns: 48px minmax(0, 1fr); } .kw-hs-heat > img { width: 48px; height: 48px; } .kw-hs-cool { grid-column: 1 / -1; width: 100%; grid-template-columns: 1fr 1fr; } .kw-hs-win { grid-template-columns: 40px minmax(0, 1fr); } .kw-hs-mults { grid-column: 1 / -1; display: flex; gap: 12px; text-align: left; } }
.kw-hs-intel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 4px; }
.kw-hs-int { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; height: 42px; padding: 4px 8px; background: #1a1712; border: 1px solid #0a0907; border-radius: 3px; opacity: .6; }
.kw-hs-int.held { opacity: 1; box-shadow: inset 3px 0 0 #8a7438; }
.kw-hs-int img { width: 32px; height: 32px; }
.kw-hs-int strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hs-int small { display: block; color: var(--kw-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-hs-gear td { background: #1c1912; }
.kw-hs-gear th { background: #15130e; }
.kw-hs-gear .kw-mitem img { width: 36px; height: 36px; }
.kw-hs-gear .kw-btn { width: 100%; }
/* a narrow panel (phones): the gear's name gets the room — the jobs left are in its line below the name anyway */
@container kwright (max-width: 560px) {
    .kw-hs-gear col:nth-child(2) { width: 44px !important; }
    .kw-hs-gear col:nth-child(3) { width: 0 !important; }
    .kw-hs-gear col:nth-child(4) { width: 104px !important; }
    .kw-hs-gear th:nth-child(3), .kw-hs-gear td:nth-child(3) { padding: 0; font-size: 0; }
    .kw-hs-gear .kw-mitem { min-width: 0; }
    .kw-hs-gear .kw-mitem strong { font-size: 15px; }
}
/* touch screens: tap targets a finger can hit */
@media (pointer: coarse) {
    .kw-panel--heist .kw-btn--sm { min-height: 34px; padding: 3px 9px; }
    .kw-hs-ap { min-height: 34px; }
    .kw-hs-ap input { width: 20px; height: 20px; flex: none; }
    .kw-hs-slot select { min-height: 38px; }
}
/* the plan */
.kw-hs-plan-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 6px; }
.kw-hs-plan-head p { margin: 0 0 3px; }
.kw-hs-plan-head small { color: var(--kw-dim); }
.kw-hs-alertw { color: #ff9d8f; font-weight: 600; }
.kw-hs-plan-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 700px) { .kw-hs-plan-cols { grid-template-columns: minmax(0, 1fr); } }
.kw-hs-slot { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 5px; }
.kw-hs-slot b { display: block; font-size: 13.5px; font-weight: 600; color: var(--kw-dim); }
.kw-hs-slot select { width: 100%; }
.kw-hs-ap { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 14px; cursor: pointer; }
.kw-hs-ap.off { opacity: .5; cursor: default; }
.kw-hs-ap img { width: 20px; height: 20px; }
.kw-hs-steps { margin: 0 0 6px; padding-left: 0; list-style: none; }
.kw-hs-steps li { padding: 2px 0; }
.kw-hs-steps li.skip { color: var(--kw-faint); text-decoration: line-through; }
.kw-hs-ok { color: #c5e39a; display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; }
.kw-hs-miss { margin: 2px 0 6px; padding-left: 18px; color: #ff9d8f; }
.kw-hs-prev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kw-hs-prev > div { padding: 5px 7px; background: #1a1712; border: 1px solid #0a0907; border-radius: 3px; }
.kw-hs-prev span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--kw-dim); }
.kw-hs-prev b { display: block; font-family: var(--kw-mono); font-weight: 400; font-size: 19px; }
.kw-hs-prev small { display: block; color: var(--kw-faint); font-size: 12px; }
.kw-hs-go { justify-content: flex-end; margin-top: 12px; }
.kw-hs-go [disabled] { opacity: .5; cursor: default; }
/* the result and the raid */
.kw-hs-scores { display: grid; gap: 4px; margin-bottom: 8px; }
.kw-hs-scores > div { display: grid; grid-template-columns: 70px minmax(0, 1fr) 48px; gap: 8px; align-items: center; }
.kw-hs-scores b { font-family: var(--kw-mono); font-weight: 400; font-size: 18px; text-align: right; }
.kw-hs-q { grid-template-columns: minmax(0, 1fr) 60px !important; padding-top: 4px; border-top: 1px solid #3a372a; }
.kw-hs-q small { grid-column: 1 / -1; color: var(--kw-faint); font-size: 12.5px; }
.kw-hs-q b { font-size: 24px !important; color: var(--kw-gelb2); }
.kw-hs-res.res-fail .kw-hs-q b { color: #ff9d8f; }
.kw-hs-bad { color: #ff9d8f; }
.kw-hs-bad, .kw-hs-heatline { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; }
.kw-hs-bad img, .kw-hs-heatline img { width: 24px; height: 24px; }
.kw-hs-raidlist { margin: 6px 0 10px; padding-left: 20px; }
.kw-hs-raidlist li { margin: 3px 0; }
.kw-paper-notice.heist { border-left-color: #8a4a3a; }
/* ---------- black market ---------- */
.kw-panel--black { background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 170, 60, .10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 5px), #17110f; }
.kw-heat { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; margin-bottom: 12px; background: #120d0b; border: 1px solid #000; box-shadow: inset 0 0 0 1px #3a2622; border-radius: 4px; }
.kw-heat img { width: 64px; height: 64px; }
.kw-heat-meter { height: 14px; background: #0a0706; border: 1px solid #000; box-shadow: inset 0 0 0 1px #3a2622; overflow: hidden; }
.kw-heat-meter i { display: block; height: 100%; background: linear-gradient(90deg, #6d8a3d, #d4b064 55%, #b8352c); }
.kw-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 14px; }
.kw-offer { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: 8px; background: #22150f; border: 1px solid #000; border-radius: 4px; box-shadow: inset 0 1px 0 #4a2e22; }
.kw-offer img { width: 56px; height: 56px; }
.kw-offer small { display: block; color: #b79a8a; font-style: italic; font-size: 13px; }
/* every offer card has the same lines (name, seller, price, button), each kept to one line: a new batch of offers never
   moves the buttons */
.kw-offer > div { min-width: 0; }
.kw-offer strong, .kw-offer small, .kw-offer > div > div { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* salvage (Trade → Salvage, and the salvage yard's site panel): six fixed places for lots, each card of one height */
.kw-salv-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 300px); gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 4px; background: #1a1914; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #34322a; }
.kw-salv-head > img { width: 48px; height: 48px; }
.kw-salv-head strong { display: block; font-size: 17px; }
.kw-salv-head small { display: block; color: var(--kw-dim); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-salv-sum { font-size: 13.5px; color: var(--kw-dim); line-height: 1.25; height: 2.5em; overflow: hidden; text-align: right; font-variant-numeric: tabular-nums; }
.kw-salv-yards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px; }
.kw-salv-yard { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; background: #25241c; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3c2d; }
.kw-salv-yard > img { width: 48px; height: 48px; }
.kw-salv-yard strong { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-salv-yard small { display: block; color: var(--kw-dim); font-size: 13px; line-height: 1.25; height: 2.5em; overflow: hidden; font-variant-numeric: tabular-nums; }
.kw-salv-yard.is-none { grid-column: 1 / -1; border-style: dashed; border-color: #4d4935; }
.kw-salv-yard.is-none small { height: auto; }
.kw-salv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.kw-salv-lot { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 6px 10px; height: 168px; padding: 8px 10px; overflow: hidden;
    background: linear-gradient(180deg, #2c2b22, #25241c); border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3c2d; }
.kw-salv-lot.is-bargain { box-shadow: inset 0 0 0 1px #8a7438, 0 0 10px rgba(212, 176, 100, .12); }
.kw-salv-lot.is-empty { grid-template-rows: 1fr; align-items: center; opacity: .5; border-style: dashed; border-color: #4d4935; background: rgba(0, 0, 0, .15); }
.kw-salv-lot.is-empty .kw-salv-pic img { opacity: .5; filter: grayscale(1); }
.kw-salv-pic { position: relative; display: flex; align-items: flex-start; justify-content: center; }
.kw-salv-pic img { width: 64px; height: 64px; background: #15140f; border-radius: 3px; image-rendering: pixelated; }
.kw-salv-cond { position: absolute; left: 0; right: 0; top: 66px; text-align: center; font-size: 11.5px; line-height: 15px; padding: 0 2px; border-radius: 2px; background: #3b2f18; color: var(--kw-gelb2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-salv-cond.c0 { background: #3a1714; color: #ff9d8f; } .kw-salv-cond.c1 { background: #3a2414; color: #f0b080; }
.kw-salv-cond.c3, .kw-salv-cond.c4 { background: #1f2d15; color: #c5e39a; }
.kw-salv-main { min-width: 0; }
.kw-salv-main strong { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-salv-main small { display: block; color: var(--kw-dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-salv-deal { color: var(--kw-gelb2); font-weight: 600; }
.kw-salv-yields { margin-top: 4px; max-height: 54px; overflow: hidden; }
.kw-salv-yields .kw-in img { width: 20px; height: 20px; }
.kw-salv-yields .kw-in b { font-size: 15px; }
.kw-salv-foot { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 92px auto; gap: 8px; align-items: center; font-size: 13px; color: var(--kw-dim); line-height: 1.2; }
.kw-salv-foot b { font-family: var(--kw-mono); font-weight: 400; font-size: 16px; color: var(--kw-text); }
.kw-salv-vals { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-salv-left { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.kw-site-box--full { grid-column: 1 / -1; }
.kw-salv-q { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 5px; margin-bottom: 4px; }
.kw-salv-obj { display: grid; grid-template-columns: 40px minmax(0, 1fr) 84px; gap: 8px; height: 96px; padding: 5px 7px; overflow: hidden; background: #1a1914; border: 1px solid #0a0907; border-radius: 3px; }
.kw-salv-obj.is-empty { grid-template-columns: 40px minmax(0, 1fr); }
.kw-salv-self { align-self: center; width: 84px; height: 48px; padding: 2px 4px; white-space: normal; line-height: 1.1; font-size: 13px; font-variant-numeric: tabular-nums; }
.kw-salv-sz { display: inline-block; min-width: 22px; padding: 0 3px; margin-right: 2px; border-radius: 2px; text-align: center; font-size: 11.5px; line-height: 15px; font-weight: 700; color: #1a1814; background: #8a8270; }
.kw-salv-sz.z1 { background: #a89a6a; } .kw-salv-sz.z2 { background: #c9a95c; } .kw-salv-sz.z3 { background: #e8c070; }
.kw-salv-tier { display: grid; grid-template-columns: 48px minmax(0, 1fr) 170px; gap: 10px; align-items: center; min-height: 64px; margin-bottom: 6px; }
.kw-salv-tier > img { width: 48px; height: 48px; }
.kw-salv-tier strong { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-salv-tier small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; color: var(--kw-dim); font-size: 12.5px; line-height: 1.25; height: 3.75em; }
.kw-salv-tier .kw-salv-de { display: inline; font-size: 12.5px; color: var(--kw-dim); font-weight: 400; }
.kw-salv-exp { width: 170px; min-height: 40px; white-space: normal; line-height: 1.15; justify-self: end; text-align: center; }
@media (max-width: 600px) { .kw-salv-tier { grid-template-columns: 48px minmax(0, 1fr); } .kw-salv-exp { grid-column: 1 / -1; width: 100%; justify-self: stretch; } }
.kw-salv-obj.is-empty { align-items: center; opacity: .45; border-style: dashed; border-color: #4d4935; }
.kw-salv-obj .kw-salv-pic img { width: 40px; height: 40px; }
.kw-salv-obj strong { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-salv-obj small { display: block; color: var(--kw-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-salv-obj .kw-salv-yields { max-height: 26px; }
.kw-site-box [data-f="ywait"] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; height: 2.5em; margin-bottom: 4px; }
.kw-panel--black .kw-table td { background: #1f1512; }
.kw-panel--black .kw-table th { background: #17110f; }

/* ---------- chronicle ---------- */
.kw-chron { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.kw-news { padding: 12px 14px; color: var(--kw-ink); background: linear-gradient(#ece3c8, #dcd0ad); border-radius: 2px; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.kw-news-mast { text-align: center; font-family: var(--kw-stencil); font-size: 26px; letter-spacing: .06em; border-bottom: 3px double var(--kw-ink); padding-bottom: 4px; margin-bottom: 6px; }
.kw-news-item { padding: 5px 0; border-bottom: 1px solid rgba(42, 36, 24, .25); font-family: var(--kw-type); font-size: 14px; }
.kw-news-item time { display: block; font-family: var(--kw-font); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.kw-news-item.bad { color: #6b1a14; } .kw-news-item.good { color: #23451a; } .kw-news-item.war { color: #4a1d10; }
.kw-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; }
.kw-ach { display: flex; align-items: center; gap: 6px; padding: 4px 7px 4px 4px; font-size: 13.5px; line-height: 1.1; background: #1a1914; border: 1px solid #0a0907; border-radius: 3px; color: var(--kw-faint); }
.kw-ach img { width: 28px; height: 28px; filter: grayscale(1) brightness(.5); }
.kw-ach.got { color: var(--kw-text); background: #2c2512; border-color: #6b5426; }
.kw-ach.got img { filter: none; }
.kw-ach-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.kw-ach-txt > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.kw-ach-bar { height: 4px; margin-top: 0; }
.kw-ach--t1 { border-left: 3px solid #6e4e32; } .kw-ach--t2 { border-left: 3px solid #6c7076; } .kw-ach--t3 { border-left: 3px solid #7a6428; }
.kw-ach--t1.got { border-left-color: #c08a5a; } .kw-ach--t2.got { border-left-color: #c8ccd2; } .kw-ach--t3.got { border-left-color: #e8c050; }
.kw-ach-near .kw-ach { color: var(--kw-text); }
.kw-awards-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 6px; }
.kw-awards-head h3 { margin: 0 0 4px; } .kw-awards-head .kw-num { color: var(--kw-gelb2); font-family: var(--kw-mono); }
.kw-medal-row { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; }
.kw-medal { display: inline-flex; align-items: center; gap: 6px; }
.kw-medal i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35); }
.kw-medal--t1 i { background: #c08a5a; } .kw-medal--t2 i { background: #c8ccd2; } .kw-medal--t3 i { background: #e8c050; }
.kw-aw-filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; margin: 12px 0 4px; }
.kw-aw-filters .kw-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.kw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }

/* ---------- catalogue ---------- */
.kw-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.kw-cat-item { display: grid; justify-items: center; gap: 3px; padding: 6px 4px 5px; text-align: center; cursor: pointer; color: var(--kw-text); font-size: 12.5px; line-height: 1.05; background: #25241c; border: 1px solid #0a0907; border-radius: 3px; min-height: 108px; }
.kw-cat-item img { width: 64px; height: 64px; }
.kw-cat-item:hover { box-shadow: inset 0 0 0 2px var(--kw-gelb); }
.kw-cat-item.locked img { filter: grayscale(1) brightness(.45) contrast(1.2); }
.kw-cat-item.locked { color: var(--kw-faint); }
.kw-cat-item.seen { background: #2c2a1c; }
.kw-cat-progress { margin-left: auto; font-family: var(--kw-mono); font-size: 20px; color: var(--kw-gelb2); }
.kw-item-detail { display: grid; grid-template-columns: 148px 1fr; gap: 16px; }
.kw-item-detail .kw-big { width: 148px; height: 148px; background: #15140f; border: 2px solid #0a0907; box-shadow: inset 0 0 0 1px #34322a; border-radius: 4px; padding: 10px; }
.kw-item-detail .kw-big img { width: 128px; height: 128px; }
.kw-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0; font-size: 15px; }
.kw-facts dt { color: var(--kw-faint); }
.kw-facts dd { margin: 0; }

/* ---------- prestige ---------- */
.kw-prestige { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px; margin-bottom: 14px; background: linear-gradient(135deg, #2a2412, #1a1914); border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #6b5426; border-radius: 4px; }
.kw-prestige img { width: 110px; height: 110px; }
.kw-prestige-big { font-family: var(--kw-mono); font-size: 44px; line-height: 1; color: var(--kw-gelb2); }
.kw-pshop { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }

/* ---------- modal, toasts, tooltip, ticker ---------- */
.kw-modal-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(5, 5, 3, .72); backdrop-filter: blur(2px); animation: kw-fade .15s ease; }
.kw-modal {
    width: min(920px, 100%); max-height: min(88vh, 900px); overflow: auto; padding: 16px 18px 18px; background: var(--kw-panel);
    border: 2px solid #0a0907; box-shadow: inset 0 0 0 1px #4d4935, 0 20px 60px rgba(0, 0, 0, .7); border-radius: 5px; animation: kw-pop .18s ease;
}
.kw-modal--narrow { width: min(560px, 100%); }
.kw-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kw-modal-head h3 { margin: 0; flex: 1; font-family: var(--kw-stencil); font-weight: 400; font-size: 24px; color: var(--kw-paper); }
.kw-modal p { color: #d5ccb1; }
@keyframes kw-fade { from { opacity: 0; } }
@keyframes kw-pop { from { transform: scale(.96) translateY(8px); opacity: 0; } }
.kw-newsreel { padding: 0; overflow: hidden; }
.kw-newsreel-top { position: relative; padding: 22px 26px 16px; background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, .08), transparent 70%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px), #1b1a16;
    border-bottom: 3px solid #0a0907; text-align: center; }
.kw-newsreel-top::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 140px, rgba(255, 255, 255, .03) 140px 141px); animation: kw-flicker 0.18s steps(2) infinite; }
@keyframes kw-flicker { 50% { opacity: .5; } }
.kw-newsreel-kicker { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--kw-dim); }
.kw-newsreel h2 { margin: 6px 0 4px; font-family: var(--kw-stencil); font-weight: 400; font-size: 40px; letter-spacing: .04em; color: var(--kw-paper); text-shadow: 0 3px 0 #000; }
.kw-newsreel-date { font-family: var(--kw-type); font-size: 18px; color: var(--kw-gelb2); }
.kw-newsreel-body { padding: 16px 24px 20px; }
.kw-newsreel-body p { font-size: 17px; }
.kw-toasts { position: fixed; right: 14px; bottom: 40px; z-index: 60; display: grid; gap: 6px; width: min(360px, calc(100vw - 28px)); pointer-events: none; }
/* ui.js toastPlace: the bottom spot would cover the PRESS plate (a phone), so the toasts drop in at the top instead */
.kw-toasts.kw-toasts--top { top: 10px; bottom: auto; }
.kw-toast {
    display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; padding: 7px 10px 7px 7px; pointer-events: auto;
    background: #26251d; border: 1px solid #0a0907; border-left: 4px solid var(--kw-gelb); border-radius: 3px; box-shadow: 0 8px 20px rgba(0, 0, 0, .55);
    font-size: 14.5px; animation: kw-toast-in .25s ease; cursor: pointer;
}
.kw-toast img { width: 40px; height: 40px; }
.kw-toast strong { display: block; font-size: 15.5px; }
.kw-toast.bad { border-left-color: var(--kw-rot2); } .kw-toast.good { border-left-color: var(--kw-gruen); } .kw-toast.gold { border-left-color: #fff0b8; background: #3a3017; }
.kw-toast.out { animation: kw-toast-out .3s ease forwards; }
@keyframes kw-toast-in { from { transform: translateX(30px); opacity: 0; } }
@keyframes kw-toast-out { to { transform: translateX(30px); opacity: 0; } }
.kw-tip { position: fixed; z-index: 70; max-width: 300px; padding: 8px 10px; pointer-events: none; font-size: 14px; background: #0f0e0b; border: 1px solid #5a5640; border-radius: 3px; box-shadow: 0 8px 20px rgba(0, 0, 0, .6); }
.kw-tip strong { display: block; font-size: 15.5px; color: var(--kw-paper); }
.kw-tip small { color: var(--kw-dim); }
.kw-ticker { position: relative; overflow: hidden; height: 30px; background: #0b0a07; border-top: 2px solid #2e2c22; color: var(--kw-gelb2); font-family: var(--kw-type); font-size: 15px; }
.kw-ticker-label { position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; display: grid; place-items: center; padding: 0 12px; font-family: var(--kw-stencil); font-size: 14px; color: var(--kw-ink); background: var(--kw-gelb); letter-spacing: .08em; }
.kw-ticker-track { position: absolute; top: 5px; white-space: nowrap; will-change: transform; }
.kw-ticker-track span { margin-right: 48px; }
.kw-ticker-track span::before { content: '■ '; color: var(--kw-rot2); }
.kw-float { position: fixed; z-index: 65; pointer-events: none; font-family: var(--kw-mono); font-size: 24px; color: var(--kw-gelb2); text-shadow: 0 2px 0 #000; animation: kw-float 1s ease-out forwards; }
.kw-float .kw-ico { vertical-align: -4px; margin-left: 2px; }
@keyframes kw-float { to { transform: translateY(-50px); opacity: 0; } }
.kw-kbd { font-family: var(--kw-mono); font-size: 16px; padding: 0 5px; border: 1px solid #5a5640; border-radius: 2px; background: #15140f; }
.kw-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.kw-help-grid h4 { margin: 6px 0 2px; font-family: var(--kw-stencil); font-weight: 400; font-size: 17px; color: var(--kw-gelb2); }
.kw-help-grid p { margin: 0; font-size: 15px; }
/* the getting-started guide (guide.js): every page in one grid cell, so the window keeps the tallest page's size and never moves */
.kw-modal.kw-guide { width: min(980px, 100%); }
.kw-guide-pages { display: grid; }
.kw-guide-page { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; visibility: hidden; }
.kw-guide-page.on { visibility: visible; animation: kw-fade .18s ease; }
.kw-guide-pic { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0a07; border: 2px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #4d4935; }
.kw-guide-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kw-guide-text { min-width: 0; }
.kw-guide-kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--kw-dim); }
.kw-guide-text h4 { margin: 4px 0 8px; font-family: var(--kw-stencil); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--kw-gelb2); }
.kw-guide-text p { margin: 0 0 8px; font-size: 17px; line-height: 1.45; }
.kw-guide-text b { color: var(--kw-paper); }
.kw-guide-text .kw-guide-more { font-size: 15px; color: var(--kw-dim); }
.kw-guide-text a, .kw-guide-rules a:not(.kw-btn) { color: var(--kw-gelb2); }
.kw-guide-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kw-line); }
.kw-guide-aside, .kw-guide-nav { display: flex; gap: 6px; align-items: center; }
.kw-guide-nav { justify-content: flex-end; }
.kw-guide-nav [data-gnext] { min-width: 150px; justify-content: center; }
.kw-guide-gone { visibility: hidden; }
.kw-guide-dots { display: flex; gap: 6px; }
.kw-guide-dot { width: 12px; height: 12px; padding: 0; border: 1px solid #0a0907; border-radius: 50%; background: var(--kw-line2); cursor: pointer; }
.kw-guide-dot[aria-current="true"] { background: var(--kw-gelb2); box-shadow: 0 0 0 2px rgba(240, 207, 126, .3); }
.kw-guide-dot:hover { background: var(--kw-gelb); }
.kw-guide-back { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kw-guide-back a { text-decoration: none; }
.kw-guide-note { color: var(--kw-dim); font-size: 14px; margin-top: 12px; }
/* a guide picture enlarged (guide.js openPic): over the guide, fitted to the window, any tap / Esc / back closes it */
.kw-guide-pic { position: relative; cursor: zoom-in; }
.kw-guide-pic:focus-visible { outline: 2px solid var(--kw-gelb2); outline-offset: 2px; }
.kw-guide-zoom { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #0a0907; border-radius: 4px; background: rgba(10, 9, 7, .72); color: var(--kw-gelb2); font-size: 15px; pointer-events: none; box-shadow: inset 0 0 0 1px #4d4935; }
.kw-guide-lb { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; padding: 12px; background: rgba(5, 5, 3, .9); cursor: zoom-out; animation: kw-fade .15s ease; touch-action: none; }
.kw-guide-lb figure { margin: 0; display: grid; gap: 8px; justify-items: center; }
.kw-guide-lb img { display: block; width: min(calc(100vw - 24px), calc((100dvh - 64px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; object-fit: contain; border: 2px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #4d4935, 0 20px 60px rgba(0, 0, 0, .7); background: #0b0a07; }
.kw-guide-lb figcaption { font-size: 15px; color: var(--kw-dim); text-align: center; }
.kw-guide-lb-x { position: absolute; top: 10px; right: 10px; min-width: 44px; min-height: 44px; justify-content: center; font-size: 20px; }
@media (max-width: 900px) {
    .kw-guide-page { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .kw-guide-text h4 { font-size: 21px; }
    .kw-guide-text p { font-size: 16px; }
    .kw-guide-foot { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .kw-guide-dots { grid-row: 1; justify-content: center; }
    .kw-guide-nav { grid-row: 2; }
    .kw-guide-nav .kw-btn { flex: 1 1 0; min-width: 0; min-height: 38px; }
    .kw-guide-aside { grid-row: 3; justify-content: center; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
    .kw-main { grid-template-columns: minmax(360px, 44%) minmax(0, 1fr); }
    .kw-date { min-width: 150px; }
}
@media (max-width: 900px) {
    body.kw-body { overflow: auto; }
    #kw-app { height: auto; min-height: 100vh; }
    .kw-top { flex-wrap: wrap; }
    .kw-resources { order: 3; width: 100%; flex-basis: 100%; overflow-x: auto; }
    .kw-main { grid-template-columns: minmax(0, 1fr); padding: 8px; }
    .kw-left { grid-template-rows: auto auto auto; }
    .kw-right { min-height: 70vh; }
    .kw-demand-grid, .kw-prod-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kw-chron, .kw-help-grid { grid-template-columns: 1fr; }
    .kw-line { grid-template-columns: 60px minmax(0, 1fr); }
    .kw-line-icon { width: 60px; height: 60px; }
    .kw-line-icon img { width: 52px; height: 52px; }
    .kw-line-side { grid-column: 1 / -1; justify-items: start; }
    .kw-item-detail { grid-template-columns: 1fr; }
    .kw-brand h1 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}
.kw-income-chart { display: block; width: 100%; height: 90px; background: #15140f; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #2e2c22; border-radius: 3px; }
.kw-next-report { margin-top: 10px; font-family: var(--kw-type); font-size: 14px; color: var(--kw-dim); }
.kw-table .kw-btn-group { flex-wrap: nowrap; }

/* Tab bar stays on one row: inactive tabs drop their labels when the panel is narrow (full name in the tooltip). */
.kw-tab { flex: none; }
@container kwright (max-width: 1130px) {
    .kw-tabs { gap: 1px; padding: 5px 4px 0; }
    .kw-tab { gap: 4px; padding: 4px 6px 5px 4px; font-size: 14.5px; letter-spacing: 0; }
    .kw-tab img { width: 22px; height: 22px; }
    .kw-tab .kw-badge { min-width: 16px; height: 16px; line-height: 16px; font-size: 11px; padding: 0 4px; }
}
@container kwright (max-width: 818px) {
    .kw-tab { padding: 4px 6px 5px 5px; }
    .kw-tab:not([aria-selected='true']) > span:not(.kw-badge) { display: none; }
    .kw-tab .kw-badge { margin-left: -3px; }
}
@container kwright (max-width: 470px) {
    .kw-tab img { width: 24px; height: 24px; }
    .kw-tab { padding: 5px 5px 6px 5px; }
    .kw-tab[aria-selected='true'] > span:not(.kw-badge) { display: none; }
}
.kw-autosell-toggle { color: var(--kw-dim); }
.kw-autosell-toggle.is-on { color: var(--kw-ink); background: linear-gradient(#b7d27f, #7e9a45); box-shadow: inset 0 1px 0 #e3f5bd, 0 2px 0 #0a0907; }
.kw-sliders { display: grid; gap: 8px; }
.kw-sliders label { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; }
.kw-sliders input[type=range] { accent-color: var(--kw-gelb); }
.kw-ticker-track { top: 5px; }
.kw-autosell-toggle.is-locked { color: var(--kw-faint); }
.kw-line-tools { flex-wrap: wrap; justify-content: flex-end; }

/* ---------- resource sites ---------- */
.kw-site-tab { padding: 0 3px; display: inline-grid; place-items: center; }
.kw-site-tab img { width: 22px; height: 22px; }
.kw-site-chip { display: inline-flex; align-items: center; gap: 5px; }
.kw-site-chip img { width: 20px; height: 20px; }
.kw-site-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; margin-bottom: 10px; background: #1a1914; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #34322a; border-radius: 4px; }
.kw-site-head > img { width: 64px; height: 64px; }
.kw-site-title h3 { margin: 0; }
.kw-site-title small { display: block; color: var(--kw-dim); }
.kw-site-title .kw-effect { display: inline-block; margin-top: 4px; }
.kw-site-stats { display: grid; grid-template-columns: repeat(3, 120px); gap: 6px; }
.kw-site-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.kw-site-box { padding: 8px 10px; background: #25241c; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3c2d; }
.kw-site-box .kw-section-label { margin-top: 0; }
/* the site page's groups (ui.js panels.sites, plan Decision 105): 1 crews → 2 yard & workshop → 3 loading & haulage → 4 site
   upgrades; each a framed block with a numbered head and a one-line status, the loading group with its flow line */
.kw-sp { margin: 0 0 10px; padding: 8px 10px 10px; background: rgba(0, 0, 0, .14); border: 1px solid #3b3829; border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255, 240, 200, .03); }
.kw-sp > .kw-unit-grid:last-child, .kw-sp > .kw-site-grid:last-child { margin-bottom: 0; }
.kw-sp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px dashed #3b3829; }
.kw-sp-n { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #3b3829; color: var(--kw-gelb2); font-family: var(--kw-mono); font-size: 13px; line-height: 1; }
.kw-sp-head h4 { margin: 0; font-family: var(--kw-stencil); font-weight: 400; font-size: 17px; letter-spacing: .04em; color: var(--kw-paper); }
.kw-sp-count { margin-left: 4px; font-family: var(--kw-mono); font-size: 14px; color: var(--kw-dim); }
.kw-sp-st { margin-left: auto; color: var(--kw-dim); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.kw-sp-st .kw-dim { color: var(--kw-faint); }
.kw-sp-bad { color: #ff8a7a; }
.kw-sp-crewset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kw-sp-crewset > .kw-site-box--wide { grid-column: 1 / -1; }
.kw-sp--out { border-color: #5a5236; background: rgba(212, 176, 100, .045); }
.kw-sp-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.kw-sp-stage { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: #1a1914; border: 1px solid #3b3829; border-radius: 3px; font-size: 13.5px; color: var(--kw-dim); white-space: nowrap; }
.kw-sp-stage b { min-width: 4.2em; font-family: var(--kw-mono); font-weight: 400; font-size: 16px; color: var(--kw-paper); font-variant-numeric: tabular-nums; }
.kw-sp-stage em { font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #ff8a7a; }
.kw-sp-stage.is-limit { border-color: #b8352c; box-shadow: inset 0 0 0 1px #8e241c; color: var(--kw-text); }
.kw-sp-stage.is-limit b { color: #ff8a7a; }
.kw-sp-stage.is-slow { border-color: #8a6a2a; }
.kw-sp-stage.is-slow b { color: #e0b060; }
.kw-sp-stage.is-ok { border-color: #6d8a3d; color: var(--kw-text); }
.kw-sp-stage.is-ok b { color: #a9c46f; }
.kw-sp-arrow { color: var(--kw-faint); font-size: 12px; }
.kw-sp-why { margin: 4px 0 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; height: 2.5em; }
/* the loading group stacks: the loaders as one row (kit and rate, then the button), the fleet, the faction's Route box */
.kw-sp .kw-unit-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.kw-sp-outgrid { grid-template-columns: minmax(0, 1fr); }
.kw-sp-outgrid > .kw-site-box--wide { grid-column: auto; }
.kw-sp-load { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center; border-color: #5a5236; }
.kw-sp-load > .kw-section-label { grid-column: 1 / -1; }
.kw-site-box.kw-sp-load .kw-unit-eq { margin-bottom: 0; }
@media (max-width: 520px) { .kw-sp-load { grid-template-columns: minmax(0, 1fr); } .kw-sp-load > .kw-btn { margin-top: 6px; justify-self: start; } }
@media (max-width: 900px) {
    .kw-sp { padding: 7px 8px 8px; }
    .kw-sp-stage { padding: 2px 6px; font-size: 12.5px; }
    .kw-sp-stage b { font-size: 15px; min-width: 3.6em; }
    .kw-sp-crewset { grid-template-columns: 1fr; }
    .kw-sp-st { margin-left: 28px; width: 100%; text-align: left; }
    .kw-sp-why { height: 3.75em; -webkit-line-clamp: 3; line-clamp: 3; }
}
.kw-site-box > b { font-family: var(--kw-mono); font-weight: 400; font-size: 21px; }
.kw-hint { display: block; margin-top: 5px; color: var(--kw-faint); font-size: 13px; line-height: 1.25; }
.kw-bar { height: 7px; margin-top: 3px; background: #0d0c09; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #2e2c22; overflow: hidden; }
.kw-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6d8a3d, #a9c46f); }
.kw-bar i.bad { background: linear-gradient(90deg, #8e241c, #e0584c); }
.kw-bar--morale i { background: linear-gradient(90deg, #b8352c, #d4b064 45%, #8fae5a); background-size: 100% 100%; }
.kw-bar--cond i { background: linear-gradient(90deg, #c9a13b, #d4b064); }
.kw-bar--split { display: flex; }
.kw-bar--split i { flex: none; }
.kw-bar--split i.kw-bar-side { background: repeating-linear-gradient(135deg, #4a9c88 0 4px, #6cbca8 4px 8px); box-shadow: inset 1px 0 0 #0d0c09; }
.kw-side { color: var(--kw-side); }
.kw-unit-eq small.kw-side-note, .kw-side-note { display: block; color: var(--kw-side); font-size: 12.5px; line-height: 1.25; }
.kw-unit-row + .kw-side-note { margin: 2px 0 0 86px; min-height: 1.25em; }
.kw-side-note.is-none { visibility: hidden; }
.kw-side-note .bi { font-size: 11px; }
.kw-fac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 6px; }
.kw-fac { display: grid; grid-template-columns: 40px 1fr; gap: 7px; padding: 6px 8px; background: #25241c; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3c2d; }
.kw-fac img { width: 40px; height: 40px; }
.kw-fac strong { display: block; font-size: 15px; }
.kw-fac strong span { color: var(--kw-gelb2); font-family: var(--kw-mono); font-weight: 400; font-size: 17px; }
.kw-fac small { display: block; color: var(--kw-dim); font-size: 12.5px; line-height: 1.2; margin-bottom: 4px; }
/* the company town (Works · Town) */
.kw-town-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* the town market: the co-op store's head, its figures and the goods table */
.kw-tm-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.kw-tm-head > img { width: 48px; height: 48px; flex: none; }
.kw-tm-head > div { flex: 1; min-width: 0; }
.kw-tm-head .kw-hint { display: block; margin-top: 4px; color: #e0c890; }
.kw-tm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 8px; }
.kw-tm-stats .kw-stat b { font-size: 20px; }
.kw-tm-table .kw-mitem img { width: 40px; height: 40px; }
.kw-unit-feed { display: block; margin: 2px 0 4px; color: #cfc6ab; }
.kw-unit-feed img { width: 18px; height: 18px; vertical-align: middle; }
@media (max-width: 900px) { .kw-tm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kw-town-b { grid-template-columns: 48px 1fr; transition: box-shadow .3s, border-color .3s; }
.kw-town-b img { width: 48px; height: 48px; }
.kw-town-b .kw-town-de { font-style: italic; color: var(--kw-faint, #8a836c); }
.kw-town-b .kw-unit-row { margin: 3px 0; }
.kw-town-b.locked { opacity: .55; }
.kw-town-b.locked img { filter: grayscale(1) brightness(.6); }
.kw-town-b.is-damaged { border-color: #6a2a22; box-shadow: inset 0 1px 0 #3f3c2d, 0 0 0 1px #8a3428; }
.kw-town-b.is-sel { border-color: #8a7438; }
.kw-town-b.is-flash { box-shadow: 0 0 0 2px var(--kw-gelb2, #e8c464), 0 0 12px rgba(232, 196, 100, .5); }
.kw-paper-notice.town { border-left-color: #6a8a5a; }
/* blockade marks on the market */
.kw-blk { display: block; font-size: 12px; color: #e0a070; line-height: 1.2; }
.kw-blk:empty { display: none; }
.kw-unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin-bottom: 10px; }
.kw-unit { display: grid; gap: 6px; align-content: start; padding: 9px 10px; background: linear-gradient(180deg, #2c2b22, #25241c); border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3c2d; }
.kw-unit.is-focus { box-shadow: inset 0 0 0 2px var(--kw-gelb), 0 0 18px rgba(212, 176, 100, .15); }
.kw-unit.is-broken { background: repeating-linear-gradient(135deg, #3a2320 0 10px, #2e1c19 10px 20px); }
.kw-unit-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.kw-unit-head img { width: 48px; height: 48px; background: #15140f; border-radius: 3px; }
.kw-unit-head strong { display: block; font-size: 17px; }
.kw-unit-head small { color: var(--kw-dim); }
.kw-unit-res { height: 26px; font-size: 14px; margin-top: 2px; }
.kw-unit-out { text-align: right; }
.kw-unit-out b { font-family: var(--kw-mono); font-weight: 400; font-size: 24px; color: var(--kw-gelb2); }
.kw-unit-row { display: grid; grid-template-columns: 78px auto 1fr; gap: 8px; align-items: center; font-size: 14px; }
.kw-unit-row b { font-family: var(--kw-mono); font-weight: 400; font-size: 18px; }
.kw-unit-row .kw-bar { margin-top: 0; }
.kw-unit-label { color: var(--kw-dim); }
.kw-unit-eq { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 6px; background: #1a1914; border-radius: 3px; }
.kw-unit-eq img { width: 40px; height: 40px; }
.kw-unit-eq small { display: block; color: var(--kw-faint); font-size: 12.5px; }
/* live figures that may grow a clause ("— slower than your output!") or a list (the yard): two lines kept, never more */
.kw-unit-eq [data-f="haulrate"], .kw-unit-eq [data-f="fleet"], .kw-site-box [data-f="yardlist"] {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.25; height: 2.5em; font-variant-numeric: tabular-nums;
}
.kw-unit-eq strong { display: block; font-size: 15px; line-height: 1.1; }
.kw-site-box .kw-unit-eq { grid-template-columns: 40px minmax(0, 1fr); margin-bottom: 6px; }
.kw-unit--new { justify-items: center; text-align: center; border-style: dashed; border-color: #4d4935; background: rgba(0, 0, 0, .15); }
.kw-unit--new img { width: 48px; height: 48px; }
.kw-acq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.kw-acq { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 10px; background: #2a2920; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3c2d; }
.kw-acq > img.kw-ico { width: 64px; height: 64px; }
.kw-acq strong { font-size: 17px; }
.kw-acq strong small { color: var(--kw-dim); font-weight: 400; font-size: 13px; }
.kw-acq p { margin: 3px 0 6px; font-size: 14px; color: var(--kw-dim); }
.kw-acq-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.kw-acq.locked { opacity: .6; }
.kw-buyfactory img.kw-ico { width: 110px; height: 110px; }
.kw-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kw-start-card { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 12px; text-align: center; cursor: pointer; color: var(--kw-text);
    background: linear-gradient(180deg, #2f2d23, #232219); border: 2px solid #0a0907; border-radius: 6px; box-shadow: inset 0 1px 0 #4d4935; font-family: var(--kw-font); }
.kw-start-card:hover, .kw-start-card:focus-visible { box-shadow: inset 0 0 0 2px var(--kw-gelb), 0 0 22px rgba(212, 176, 100, .25); outline: none; }
.kw-start-card > img.kw-ico { width: 96px; height: 96px; }
.kw-start-card strong { font-family: var(--kw-stencil); font-weight: 400; font-size: 22px; color: var(--kw-paper); }
.kw-start-card small { color: var(--kw-dim); }
.kw-start-card p { margin: 4px 0; font-size: 14.5px; color: #cfc6ab; }
.kw-start-card .kw-inputs { justify-content: center; }
.kw-start-goods { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.kw-start-goods img { width: 40px; height: 40px; background: #15140f; border-radius: 3px; }
@media (max-width: 900px) {
    .kw-site-head { grid-template-columns: 48px 1fr; }
    .kw-site-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kw-site-grid, .kw-start-grid { grid-template-columns: 1fr; }
}
[hidden] { display: none !important; }
.kw-start-card .kw-in img, .kw-acq .kw-in img { width: 22px; height: 22px; }
.kw-music-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.kw-music-now { flex: 1; min-width: 160px; font-family: var(--kw-type); font-size: 14px; color: var(--kw-gelb2); }
.kw-unit .kw-unit-eq { grid-template-columns: 40px minmax(0, 1fr); }
/* the unit's status (broken down, yard full, …) has a line of its own, kept even while empty */
.kw-unit .kw-status[data-f="ustatus"] { flex-basis: 100%; min-height: 1.35em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-unit .kw-unit-eq > .kw-btn, .kw-unit .kw-unit-eq > .kw-upg-owned-tag { grid-column: 1 / -1; justify-self: start; }

/* ---------- two-level navigation ---------- */
.kw-nav { background: #17160f; border-bottom: 2px solid #0a0907; }
.kw-groups { display: flex; gap: 4px; padding: 6px 8px 0; } /* 8 px in, like the section's tabs below: both rows start flush */
.kw-groups > .kw-group { flex: 1 1 auto; min-width: 0; } /* five sections: a long name (Development) takes the room it needs */
.kw-group {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 4px 10px; cursor: pointer;
    color: var(--kw-dim); font-family: var(--kw-stencil); font-size: 17px; letter-spacing: .04em; background: #23221a;
    border: 1px solid #0a0907; border-bottom: 0; border-radius: 5px 5px 0 0; box-shadow: inset 0 1px 0 #3b3829;
}
.kw-group img { width: 28px; height: 28px; }
.kw-group:hover { color: var(--kw-text); background: #2b2a21; }
.kw-group[aria-pressed='true'] { color: var(--kw-ink); background: linear-gradient(var(--kw-gelb2), var(--kw-gelb)); box-shadow: inset 0 1px 0 #fff6; }
.kw-group { gap: 5px; padding: 4px 6px; font-size: 16px; letter-spacing: .02em; }
.kw-group img { width: 24px; height: 24px; }
.kw-group > span:not(.kw-badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-group .kw-badge { flex: none; }
.kw-group .kw-badge:empty { display: inline-block; visibility: hidden; padding: 0; }
.kw-nav .kw-tabs { display: flex; gap: 4px; padding: 6px 8px; background: #1f1e17; border-bottom: 0; border-top: 1px solid #0a0907; }
.kw-nav .kw-tab { flex: none; padding: 4px 12px 4px 6px; font-size: 16px; border-radius: 4px; border-bottom: 1px solid #0a0907; }
.kw-nav .kw-tab img { width: 26px; height: 26px; }
.kw-nav .kw-tab > span:not(.kw-badge) { display: inline !important; }
@container kwright (max-width: 700px) {
    .kw-group:not([aria-pressed='true']) > img, .kw-group:not([aria-pressed='true']) > svg { display: none; }
}
@container kwright (max-width: 560px) {
    .kw-group > img, .kw-group > svg { display: block !important; }
    .kw-group span:not(.kw-badge) { display: none; }
    .kw-group .kw-badge { position: absolute; top: 2px; right: 3px; }
    .kw-group .kw-badge:empty { display: none; }
}
body.kw-body { font-size: 15.5px; letter-spacing: .005em; }

/* badges float on the tab corner so they never change its width */
.kw-nav .kw-tab { position: relative; }
.kw-nav .kw-tab .kw-badge { position: absolute; top: -7px; right: -6px; z-index: 1; }
/* design office */
.kw-lab { margin-bottom: 12px; padding: 10px; background: #1a1914; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #34322a; border-radius: 4px; }
.kw-lab-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 8px; }
.kw-lab-head > img { width: 56px; height: 56px; }
.kw-lab-head strong { display: block; font-size: 19px; }
.kw-lab-head small { color: var(--kw-dim); }
.kw-lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.kw-lab-grid strong { display: block; }
.kw-lab-roles { display: grid; gap: 6px; }
.kw-lab-role { display: grid; grid-template-columns: 40px minmax(0, 1fr) 70px auto; gap: 10px; align-items: center; padding: 6px 8px; background: #25241c; border: 1px solid #0a0907; border-radius: 4px; }
.kw-lab-role > img { width: 40px; height: 40px; }
.kw-lab-role strong { display: block; }
.kw-lab-role strong small { color: var(--kw-dim); font-weight: 400; }
.kw-lab-role > div > small { color: var(--kw-faint); font-size: 13px; }
.kw-lab-role .kw-num { text-align: right; font-size: 24px; color: var(--kw-gelb2); }
.kw-lab-role.locked { opacity: .6; }

/* overdraft */
.kw-res.in-debt b { color: #ff8a7a !important; text-shadow: 0 0 12px rgba(224, 88, 76, .35); }
.kw-res.in-debt { box-shadow: inset 0 0 0 1px #7a2a22, inset 0 8px 16px rgba(0, 0, 0, .35); }
/* research site */
.kw-labitems { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.kw-labitem { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 7px; padding: 6px 8px; background: #25241c; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3c2d; }
.kw-labitem > img { width: 40px; height: 40px; }
.kw-labitem strong { display: block; font-size: 14.5px; line-height: 1.1; }
.kw-labitem small { display: block; color: var(--kw-dim); font-size: 12.5px; margin-bottom: 3px; }
.kw-labitem.owned { background: #26311f; }
.kw-labitem.locked { opacity: .5; }
.kw-locknote { color: var(--kw-faint) !important; }
.kw-lab .kw-lab-head > img { width: 64px; height: 64px; }
/* newspaper */
.kw-paper .kw-news-mast small { display: block; font-family: var(--kw-type); font-size: 13px; letter-spacing: .02em; }
.kw-paper-note { margin: 4px 0 8px; font-family: var(--kw-type); font-size: 13.5px; color: #5a4a2a; }
.kw-paper-lead { padding: 7px 9px; margin-bottom: 8px; background: rgba(110, 30, 20, .12); border-left: 4px solid #8e241c; font-family: var(--kw-type); }
.kw-paper-lead strong { display: block; font-size: 16px; }
.kw-paper-lead small { display: block; font-size: 13px; }
.kw-paper-story { display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(42, 36, 24, .25); font-family: var(--kw-type); }
.kw-paper-story img { width: 44px; height: 44px; }
.kw-paper-story img:last-child { width: 32px; height: 32px; }
.kw-paper-story strong { display: block; font-size: 15px; line-height: 1.15; }
.kw-paper-story small { display: block; font-size: 12.5px; opacity: .8; }
.kw-paper-true, .kw-paper-false { display: inline-block; margin-top: 2px; padding: 0 5px; font-family: var(--kw-font); font-size: 12px; font-weight: 700; border-radius: 2px; }
.kw-paper-true { color: #fff; background: #3b5a2a; } .kw-paper-false { color: #fff; background: #8e241c; }
.kw-paper--old { opacity: .85; }
/* a touch tighter body text */
body.kw-body { letter-spacing: -.01em; }

/* Cold War: the post-war decision and new phase tones */
.kw-choice-points { margin: 6px 0 0; padding-left: 18px; text-align: left; font-size: 13.5px; color: var(--kw-dim); }
.kw-choice-points li { margin: 2px 0; }
.kw-phase-chip[data-tone='crisis'] { color: var(--kw-rot2); }
.kw-phase-chip[data-tone='cold'] { color: #9fb8c8; }
.kw-phase-chip[data-tone='boom'], .kw-phase-chip[data-tone='thaw'], .kw-phase-chip[data-tone='modern'] { color: var(--kw-gruen); }

/* Main menu */
.kw-start-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .kw-start-grid--2 { grid-template-columns: 1fr; } }
.kw-start-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .kw-start-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Title screen */
.kw-title { position: fixed; inset: 0; z-index: 45; overflow: hidden; background: #0e0d0a; animation: kw-fade .25s ease; }
.kw-title-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.kw-title-shade { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(8, 7, 5, .88) 0%, rgba(8, 7, 5, .62) 34%, rgba(8, 7, 5, .08) 62%, rgba(8, 7, 5, 0) 100%), linear-gradient(0deg, rgba(8, 7, 5, .55), rgba(8, 7, 5, 0) 30%); }
.kw-title-ui { position: absolute; inset: 0; overflow-y: auto; padding: clamp(18px, 5vh, 56px) clamp(16px, 5vw, 72px); display: flex; flex-direction: column; gap: 18px; }
.kw-title-logo h1 { margin: 0; font-family: var(--kw-stencil); font-weight: 400; font-size: clamp(44px, 7vw, 92px); letter-spacing: .06em; line-height: 1; color: var(--kw-gelb, #d4b064);
    text-shadow: 0 3px 0 #3b2d12, 0 0 30px rgba(212, 176, 100, .25); }
.kw-title-logo p { margin: 8px 0 0; font-size: clamp(15px, 1.6vw, 19px); color: #cfc6ab; letter-spacing: .04em; }
.kw-title-menu { display: grid; gap: 8px; width: min(380px, 100%); margin-top: clamp(8px, 4vh, 40px); }
.kw-tbtn { display: flex; align-items: center; gap: 14px; padding: 10px 16px; min-height: 52px; text-align: left; cursor: pointer; color: var(--kw-paper, #ece4cb);
    font: 600 20px/1.2 var(--kw-font, inherit); background: rgba(24, 22, 16, .72); border: 1px solid rgba(212, 176, 100, .22); border-left: 4px solid rgba(212, 176, 100, .35);
    transition: background .12s, border-color .12s, transform .12s; }
.kw-tbtn:hover, .kw-tbtn:focus-visible { background: rgba(58, 48, 26, .85); border-color: rgba(212, 176, 100, .6); border-left-color: var(--kw-gelb, #d4b064); transform: translateX(4px); outline: none; }
.kw-tbtn.primary { background: linear-gradient(180deg, #d9b766, #b8913f); color: #1a150b; border-color: #f0d68e; }
.kw-tbtn.primary:hover, .kw-tbtn.primary:focus-visible { background: linear-gradient(180deg, #e8c779, #c49c47); }
.kw-tbtn i { font-size: 22px; width: 26px; text-align: center; }
.kw-tbtn span { display: grid; }
.kw-tbtn small { font-size: 13.5px; font-weight: 400; opacity: .8; }
.kw-title-panel { width: min(760px, 100%); padding: 18px 20px; background: rgba(22, 20, 15, .9); border: 1px solid rgba(212, 176, 100, .3); box-shadow: 0 16px 50px rgba(0, 0, 0, .5); }
.kw-title-panel.wide { width: min(1040px, 100%); }
.kw-title-panel h2 { font-family: var(--kw-stencil); font-weight: 400; font-size: 24px; color: var(--kw-paper); margin: 2px 0 12px; }
.kw-title-panel p { color: #cfc6ab; }
.kw-title-back { margin-top: 14px; }
.kw-title-field { display: grid; gap: 4px; max-width: 420px; margin-bottom: 14px; color: var(--kw-dim); }
.kw-title-box { width: 100%; height: 70px; margin-top: 10px; padding: 6px; font-family: var(--kw-mono); font-size: 13px; }
.kw-title-foot { position: absolute; left: 16px; bottom: 10px; font-size: 12.5px; color: rgba(236, 228, 203, .45); pointer-events: none; }
.kw-slots { display: grid; gap: 8px; }
.kw-slot { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; color: var(--kw-text);
    background: rgba(40, 37, 28, .75); border: 1px solid rgba(212, 176, 100, .2); }
button.kw-slot { cursor: pointer; }
button.kw-slot:hover, button.kw-slot:focus-visible { border-color: var(--kw-gelb); outline: none; background: rgba(58, 50, 30, .85); }
.kw-slot.current { border-color: rgba(212, 176, 100, .6); }
.kw-slot.empty { opacity: .8; }
.kw-slot-n { font-family: var(--kw-stencil); font-size: 28px; color: var(--kw-gelb); text-align: center; }
.kw-slot-info { display: grid; gap: 2px; }
.kw-slot-info b { font-size: 18px; color: var(--kw-paper); }
.kw-slot-info small { color: var(--kw-dim); font-size: 13.5px; }
.kw-slot-act { font-size: 14px; color: var(--kw-gruen); }
.kw-slot-act.warn { color: var(--kw-rot2); }
.kw-slot-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.kw-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 18px; }
.kw-set-group { display: grid; gap: 8px; align-content: start; }
.kw-set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.kw-no-ticker .kw-ticker { display: none; }
@media (max-width: 700px) { .kw-slot { grid-template-columns: 30px 1fr; } .kw-slot-btns, .kw-slot-act { grid-column: 1 / -1; justify-content: flex-start; } }
.kw-res em.kw-neg { color: var(--kw-rot2, #e0584c); font-style: normal; }
.kw-res em.kw-hand { color: var(--kw-gelb, #d4b064); } /* the line lifted by a sale by hand, fading */
.kw-name-row { display: flex; gap: 6px; } .kw-name-row .kw-input { flex: 1; }

/* Incidents, perks, quality, pace, founders */
.kw-scene-frame { position: relative; }
/* a fixed width and a fixed height per slot: the countdowns and incidents coming and going never resize the others */
.kw-incidents { position: absolute; top: 8px; right: 8px; display: grid; gap: 6px; width: min(240px, 46%); z-index: 3; pointer-events: none; }
.kw-incidents > * { pointer-events: auto; height: 46px; box-sizing: border-box; }
.kw-incident--gap { visibility: hidden; pointer-events: none !important; }
.kw-incident { display: flex; align-items: center; gap: 8px; padding: 6px 10px; text-align: left; cursor: pointer; color: #fff4e0;
    background: rgba(120, 28, 20, .88); border: 1px solid #e0584c; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); animation: kw-inc-pulse 1.2s ease-in-out infinite; }
.kw-incident.chance { background: rgba(110, 86, 24, .9); border-color: #f0cf7e; }
/* a hazard the works have a crew for (safety upgrades): calmer, it counts down to the crew */
.kw-incident.crew { background: rgba(92, 52, 22, .9); border-color: #d8a85a; animation: none; }
.kw-incident.crew i { color: #c8e0a0; }
.kw-incident i { font-size: 20px; }
.kw-incident span { display: grid; flex: 1; min-width: 0; }
.kw-incident b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-incident small { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-incident em { font-style: normal; font-family: var(--kw-mono); font-size: 16px; min-width: 3.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.kw-incident:hover { filter: brightness(1.15); }
@keyframes kw-inc-pulse { 50% { box-shadow: 0 0 0 3px rgba(224, 88, 76, .35), 0 4px 14px rgba(0, 0, 0, .45); } }
.kw-line-q { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 13.5px; }
.kw-qual { padding: 1px 7px; border: 1px solid currentColor; font-size: 12.5px; letter-spacing: .02em; }
.kw-qual.q0 { color: #b9a98a; } .kw-qual.q1 { color: var(--kw-gruen); } .kw-qual.q2 { color: #f0cf7e; background: rgba(240, 207, 126, .1); }
.kw-wear { display: flex; align-items: center; gap: 6px; color: var(--kw-dim); }
.kw-bar--wear { width: 80px; display: inline-block; }
.kw-perks { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }
.kw-perk { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 3px; font-size: 12.5px; color: #e8dcbc; background: rgba(212, 176, 100, .12); border: 1px solid rgba(212, 176, 100, .3); }
.kw-perk img.kw-ico { width: 18px; height: 18px; }
.kw-perk-btn { animation: kw-inc-pulse 1.6s ease-in-out infinite; }
.kw-doc-q { font-size: 13.5px; color: #6b4a1e; margin: 4px 0; }
.kw-founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 14px; }
.kw-founder { display: flex; gap: 10px; align-items: flex-start; padding: 10px; text-align: left; cursor: pointer; color: var(--kw-text); background: rgba(40, 37, 28, .75); border: 1px solid rgba(212, 176, 100, .2); }
.kw-founder:hover { border-color: rgba(212, 176, 100, .55); }
.kw-founder.sel { border-color: var(--kw-gelb); box-shadow: inset 0 0 0 1px var(--kw-gelb), 0 0 18px rgba(212, 176, 100, .2); background: rgba(70, 58, 30, .8); }
.kw-founder span { display: grid; gap: 2px; }
.kw-founder strong { color: var(--kw-paper); font-size: 16px; }
.kw-founder small { color: #cfc6ab; font-size: 12.5px; }
.kw-founder em { font-style: normal; font-size: 12.5px; }
.kw-founder em.plus { color: var(--kw-gruen); } .kw-founder em.minus { color: var(--kw-rot2); }
.kw-paces { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 14px; }
.kw-pace { display: grid; gap: 3px; padding: 10px 12px; text-align: left; cursor: pointer; color: var(--kw-text); background: rgba(40, 37, 28, .75); border: 1px solid rgba(212, 176, 100, .2); }
.kw-pace:hover { border-color: rgba(212, 176, 100, .55); }
.kw-pace.sel { border-color: var(--kw-gelb); box-shadow: inset 0 0 0 1px var(--kw-gelb), 0 0 18px rgba(212, 176, 100, .2); background: rgba(70, 58, 30, .8); }
.kw-pace strong { color: var(--kw-paper); font-size: 16px; }
.kw-pace strong em { font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--kw-gelb); margin-left: 6px; }
.kw-pace-month { color: var(--kw-gelb); font-size: 13px; }
.kw-pace small { color: #cfc6ab; font-size: 12.5px; }
.kw-away-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 14px; margin: 10px 0; }
.kw-away-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; background: rgba(40, 37, 28, .6); border: 1px solid rgba(212, 176, 100, .18); }
.kw-away-row span { color: #cfc6ab; }
.kw-start-grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* The works radio (header). Looks by era: data-era = ww2 | postwar | 50s | 60s | 70s | 80s | modern */
.kw-radio { --lvl: 0; --vol: .5; --body: linear-gradient(#5a3a22, #3a2415); --edge: #1e130b; --face: #e9d9a8; --ink: #3b2a14; --glow: #ffb347; --knob: radial-gradient(circle at 35% 30%, #6b4a2e, #2a1a0e);
    position: relative; display: grid; grid-template-columns: 38px minmax(120px, 190px) 22px auto; align-items: center; gap: 7px; align-self: center;
    height: 56px; padding: 5px 9px 5px 7px; cursor: pointer; user-select: none; flex: 0 1 auto;
    background: var(--body); border: 2px solid var(--edge); border-radius: 12px 12px 8px 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .5); }
.kw-radio-grille { align-self: stretch; border-radius: 6px; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .45) 0 2px, transparent 2px 4px), #7a5a36; box-shadow: inset 0 0 4px rgba(0, 0, 0, .6); position: relative; overflow: hidden; }
.kw-radio-grille i { position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 0, 0, .5), transparent 70%); transform: scale(calc(.85 + var(--lvl) * .25)); transition: transform .08s; }
.kw-radio-face { display: grid; gap: 3px; min-width: 0; }
.kw-radio-dial { position: relative; height: 18px; border-radius: 3px; background: var(--face); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); overflow: hidden; }
.kw-radio-scale { position: absolute; inset: 0 6px; display: flex; justify-content: space-between; align-items: center; font: 9.5px/1 var(--kw-mono, monospace); letter-spacing: .03em; color: var(--ink); opacity: .85; }
.kw-radio-scale::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 6px); opacity: .5; }
.kw-radio-needle { position: absolute; top: 1px; bottom: 1px; left: 50%; width: 2px; background: #b3261e; box-shadow: 0 0 3px rgba(179, 38, 30, .6); transition: left .9s cubic-bezier(.3, .6, .3, 1); }
.kw-radio-title { height: 20px; overflow: hidden; white-space: nowrap; font: 600 13.5px/20px var(--kw-font, inherit); color: #f3e2b5; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.kw-radio-title span { display: inline-block; }
.kw-radio-title.scroll span { padding-left: 100%; animation: kw-radio-marquee 12s linear infinite; }
@keyframes kw-radio-marquee { to { transform: translateX(-100%); } }
.kw-radio-eye { width: 18px; height: 18px; border-radius: 50%; background: #10180f; box-shadow: inset 0 0 0 2px #2b2b22, 0 0 0 1px rgba(0, 0, 0, .5); position: relative; overflow: hidden; }
.kw-radio-eye i { position: absolute; inset: 3px; border-radius: 50%; background: conic-gradient(#4df06a calc(40% + var(--lvl) * 55%), transparent 0); opacity: .15; transition: opacity .3s; }
.kw-radio-knobs { display: flex; gap: 5px; align-items: center; }
.kw-knob { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .7); background: var(--knob); box-shadow: 0 2px 2px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25); cursor: pointer; position: relative; }
.kw-knob i { position: absolute; inset: 0; border-radius: 50%; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.kw-knob i::before { content: ''; position: absolute; left: 50%; top: 3px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: #f3e2b5; }
.kw-knob--vol i { transform: rotate(calc(-135deg + var(--vol) * 270deg)); }
.kw-knob--power.press, .kw-knob:active { transform: translateY(1px); }
.kw-radio-brand { position: absolute; right: 10px; bottom: 1px; font: italic 9px/1 'Special Elite', serif; color: rgba(243, 226, 181, .55); pointer-events: none; }
.kw-radio.is-on .kw-radio-dial { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 0 10px var(--glow), inset 0 0 8px var(--glow); }
.kw-radio.is-on .kw-radio-eye i { opacity: 1; }
.kw-radio:not(.is-on) .kw-radio-dial { filter: brightness(.55) saturate(.6); }
.kw-radio:not(.is-on) .kw-radio-title { color: rgba(243, 226, 181, .5); }
/* 1930s–40s: dark Bakelite with a cloth grille */
.kw-radio[data-era='ww2'], .kw-radio[data-era='postwar'] { --body: linear-gradient(#4a2e1c, #2a190e); --face: #e8d49c; --glow: #ffae42; }
.kw-radio[data-era='ww2'] .kw-radio-grille, .kw-radio[data-era='postwar'] .kw-radio-grille { background: repeating-linear-gradient(45deg, #6e5534 0 2px, #5a4428 2px 4px); }
.kw-radio[data-era='ww2'] .kw-radio-eye, .kw-radio[data-era='postwar'] .kw-radio-eye { background: #2a1a0e; }
.kw-radio[data-era='ww2'] .kw-radio-eye i, .kw-radio[data-era='postwar'] .kw-radio-eye i { background: radial-gradient(circle, #ffcf6b calc(20% + var(--lvl) * 60%), transparent 0); }
/* 1950s: polished walnut, gold trim, the green magic eye */
.kw-radio[data-era='50s'] { --body: linear-gradient(90deg, #6b3f1f, #8a5429 40%, #6b3f1f); --edge: #d4b064; --face: #f1e6c4; --glow: #ffd27a; border-width: 2px 2px 4px; }
.kw-radio[data-era='50s'] .kw-radio-grille { background: repeating-linear-gradient(90deg, #c9a45a 0 2px, #3d2a17 2px 5px); }
/* 1960s: two-tone portable transistor */
.kw-radio[data-era='60s'] { --body: linear-gradient(#e7dcc2 0 45%, #b3261e 45%); --edge: #6d1510; --face: #fbf5e3; --ink: #6d1510; --glow: #fff0b0; --knob: radial-gradient(circle at 35% 30%, #f0f0f0, #8d8d8d); border-radius: 14px; }
.kw-radio[data-era='60s'] .kw-radio-grille { background: radial-gradient(circle, #3a3a3a 1px, transparent 1.5px) 0 0 / 4px 4px, #c8c8c8; }
.kw-radio[data-era='60s'] .kw-radio-title { color: #fff; }
.kw-radio[data-era='60s'] .kw-radio-eye i { background: conic-gradient(#ffcf33 calc(30% + var(--lvl) * 65%), transparent 0); }
/* 1970s: brushed silver hi-fi, orange dial */
.kw-radio[data-era='70s'] { --body: linear-gradient(#c9ccd0, #8d9197); --edge: #3b3e42; --face: #151515; --ink: #ff9a3c; --glow: #ff8a1e; --knob: radial-gradient(circle at 35% 30%, #f4f4f4, #6f7277); border-radius: 4px; }
.kw-radio[data-era='70s'] .kw-radio-grille { background: repeating-linear-gradient(0deg, #2b2b2b 0 2px, #6a6a6a 2px 3px); border-radius: 2px; }
.kw-radio[data-era='70s'] .kw-radio-title { color: #1b1b1b; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.kw-radio[data-era='70s'] .kw-radio-eye { border-radius: 2px; }
.kw-radio[data-era='70s'] .kw-radio-eye i { border-radius: 0; background: linear-gradient(0deg, #ff8a1e calc(var(--lvl) * 100%), transparent 0); inset: 2px 6px; }
.kw-radio[data-era='70s'] .kw-radio-brand { color: rgba(30, 30, 30, .55); }
/* 1980s and after: black set, green LCD */
.kw-radio[data-era='80s'], .kw-radio[data-era='modern'] { --body: linear-gradient(#2a2c30, #121316); --edge: #000; --face: #0f2a14; --ink: #57ff7a; --glow: #2fd35a; --knob: radial-gradient(circle at 35% 30%, #5b5e63, #16171a); border-radius: 6px; }
.kw-radio[data-era='80s'] .kw-radio-grille, .kw-radio[data-era='modern'] .kw-radio-grille { border-radius: 50%; background: radial-gradient(circle, #0c0c0c 1px, transparent 1.5px) 0 0 / 3px 3px, #34373c; box-shadow: inset 0 0 0 3px #1a1b1e; }
.kw-radio[data-era='80s'] .kw-radio-scale, .kw-radio[data-era='modern'] .kw-radio-scale { font-family: 'VT323', monospace; font-size: 12px; }
.kw-radio[data-era='80s'] .kw-radio-needle, .kw-radio[data-era='modern'] .kw-radio-needle { width: 6px; background: #57ff7a; box-shadow: 0 0 4px #57ff7a; }
.kw-radio[data-era='80s'] .kw-radio-eye, .kw-radio[data-era='modern'] .kw-radio-eye { border-radius: 2px; background: #0f2a14; }
.kw-radio[data-era='80s'] .kw-radio-eye i, .kw-radio[data-era='modern'] .kw-radio-eye i { border-radius: 0; inset: 2px 5px; background: repeating-linear-gradient(0deg, #57ff7a 0 2px, transparent 2px 3px) bottom / 100% calc(var(--lvl) * 100%) no-repeat; }
.kw-radio[data-era='80s'] .kw-radio-title, .kw-radio[data-era='modern'] .kw-radio-title { font-family: 'VT323', monospace; font-size: 16px; color: #8dffa4; }
/* the East's sets: a little greyer and plainer */
/* the early years: a horn gramophone until 1923 (the horn in brass, a spinning record for the eye), then a 1920s valve set */
.kw-radio[data-era='gramophone'] { --body: linear-gradient(#6e4526, #3e2614); --edge: #24160b; --face: #1c1915; --ink: #d8c48a; --glow: #e8c070; --knob: radial-gradient(circle at 35% 30%, #ecd590, #8a6a2a); }
.kw-radio[data-era='gramophone'] .kw-radio-grille { border-radius: 50% 6px 6px 50%; background: radial-gradient(circle at 88% 50%, #2a1e0c 0 10%, #8a6a22 11% 18%, #e8cf7a 19% 34%, #c9a13b 35% 58%, #8a6a22 59% 78%, #5a4414 79%); box-shadow: inset 0 0 3px rgba(0, 0, 0, .6); }
.kw-radio[data-era='gramophone'] .kw-radio-grille i { inset: 30% 10% 30% 52%; background: radial-gradient(circle, rgba(0, 0, 0, .55), transparent 70%); }
.kw-radio[data-era='gramophone'] .kw-radio-dial { background: repeating-radial-gradient(ellipse at 50% 50%, #1c1915 0 1px, #2c2824 1px 2px); }
.kw-radio[data-era='gramophone'] .kw-radio-scale { color: #d8c48a; }
.kw-radio[data-era='gramophone'] .kw-radio-needle { background: #c9a13b; box-shadow: 0 0 3px rgba(201, 161, 59, .6); }
.kw-radio[data-era='gramophone'] .kw-radio-eye { background: radial-gradient(circle, #e8dcb0 0 12%, #9e2b25 13% 34%, #141210 35% 100%); box-shadow: inset 0 0 0 1px #3a342c, 0 0 0 1px rgba(0, 0, 0, .5); animation: kw-gramo-spin 1.4s linear infinite; animation-play-state: paused; }
.kw-radio[data-era='gramophone'].is-on .kw-radio-eye { animation-play-state: running; }
.kw-radio[data-era='gramophone'] .kw-radio-eye i { inset: 2px 7px auto auto; width: 3px; height: 3px; border-radius: 50%; background: #e8dcb0; opacity: .7; }
.kw-radio[data-era='gramophone'] .kw-radio-brand { font-family: 'Special Elite', serif; color: rgba(232, 207, 122, .7); }
@keyframes kw-gramo-spin { to { transform: rotate(360deg); } }
.kw-radio[data-era='twenties'] { --body: linear-gradient(#4c3220, #2a1a10); --edge: #1a1009; --face: #e4d4a8; --glow: #ffb04a; --knob: radial-gradient(circle at 35% 30%, #5a3a24, #1e120a); }
.kw-radio[data-era='twenties'] .kw-radio-grille { border-radius: 45% 45% 4px 4px; background: repeating-linear-gradient(90deg, #8a6a40 0 2px, #5a4028 2px 4px); }
.kw-radio[data-era='twenties'] .kw-radio-eye { background: #2a1a0e; }
.kw-radio[data-era='twenties'] .kw-radio-eye i { background: radial-gradient(circle, #ffb04a calc(15% + var(--lvl) * 55%), transparent 0); }
.kw-radio[data-bloc='east'][data-era='50s'] { --body: linear-gradient(90deg, #5b4330, #6e533b 40%, #5b4330); --edge: #9d8b6a; }
.kw-radio[data-bloc='east'][data-era='60s'] { --body: linear-gradient(#d9d2bf 0 45%, #3f5f7a 45%); --edge: #22394c; --ink: #22394c; }
.kw-radio[data-bloc='east'][data-era='70s'] { --body: linear-gradient(#a79e8c, #7c7466); }
@media (max-width: 900px) { .kw-radio { order: 2; } }
/* the stations: the header set's station marks, and the receiver (ui.js rxOpen; data-radio.js). The receiver is a modal
   (.kw-modal.kw-rx) drawn as the era's set: a cabinet (data-look gramo / wood / volks / post / mid / su / su-late / late) with
   a speaker cloth, the glowing scale with the stations printed on it and the needle, the volume and tuning knobs, the magic
   eye (--sig), the mood line (a fixed two lines, so nothing jumps) and the power switch. */
.kw-radio-marks { position: absolute; inset: 0; pointer-events: none; }
.kw-radio-marks i { position: absolute; top: 2px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--ink); opacity: .55; }
.kw-radio .kw-radio-needle { transition: left .18s ease-out; }
.kw-radio.is-tuned .kw-radio-needle { box-shadow: 0 0 5px var(--glow), 0 0 2px #b3261e; }
.kw-modal.kw-rx { width: min(580px, 100%); padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; max-height: none; }
.kw-rx-cab { --sig: 0; --tune: 0deg; --volr: 0deg;
    --cab: linear-gradient(170deg, #6a4327, #4a2c17 60%, #3a2212); --edge: #1c120a; --cloth: repeating-linear-gradient(90deg, #8a6a40 0 2px, #5a4028 2px 4px);
    --scale: #eadbb0; --ink: #3a2812; --glow: #ffb347; --needle: #b3261e; --knob: radial-gradient(circle at 35% 30%, #6b4a2e, #22150b); --txt: #f3e2b5; --sub: rgba(243, 226, 181, .7);
    position: relative; display: grid; gap: 10px; padding: 12px 14px 14px; color: var(--txt); background: var(--cab); border: 3px solid var(--edge); border-radius: 18px 18px 10px 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -4px 0 rgba(0, 0, 0, .35), 0 24px 60px rgba(0, 0, 0, .75); user-select: none; -webkit-user-select: none; touch-action: none; }
.kw-rx-head { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.kw-rx-brand { flex: 1; font: italic 17px/1 'Special Elite', serif; letter-spacing: .04em; color: var(--sub); }
.kw-rx-x { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(0, 0, 0, .55); border-radius: 50%; background: var(--knob); color: var(--txt); cursor: pointer; box-shadow: 0 2px 2px rgba(0, 0, 0, .45); }
.kw-rx-x:focus-visible, .kw-rx-knob:focus-visible, .kw-rx-scale:focus-visible, .kw-rx-sw:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.kw-rx-grille { height: 46px; border-radius: 40px 40px 6px 6px; background: var(--cloth); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), inset 0 0 12px rgba(0, 0, 0, .6); position: relative; overflow: hidden; }
.kw-rx-grille i { position: absolute; inset: 10% 30%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .45), transparent 70%); }
.kw-rx-scale { position: relative; height: 78px; border-radius: 6px; background: var(--scale); color: var(--ink); overflow: hidden; cursor: ew-resize; touch-action: none;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), inset 0 2px 8px rgba(0, 0, 0, .35); transition: box-shadow .4s, filter .4s; filter: brightness(.6) saturate(.6); }
.kw-rx-cab.is-on .kw-rx-scale { filter: none; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), inset 0 0 18px var(--glow), 0 0 calc(6px + var(--sig) * 12px) var(--glow); }
.kw-rx-band { position: absolute; left: 6px; top: 4px; font: 700 9px/1 'Barlow Semi Condensed', sans-serif; letter-spacing: .12em; opacity: .7; }
.kw-rx-tick { position: absolute; bottom: 4px; width: 1px; height: 6px; background: var(--ink); opacity: .55; }
.kw-rx-tick--big { height: 11px; opacity: .8; }
.kw-rx-num { position: absolute; bottom: 16px; transform: translateX(-50%); font: 600 10px/1 'Barlow Semi Condensed', sans-serif; opacity: .75; }
.kw-rx-st { position: absolute; top: 15px; transform: translateX(-50%); max-width: 18.4%; padding: 2px 1px; border: 0; border-radius: 3px; background: none; color: inherit; cursor: pointer; text-align: center; line-height: 1; }
.kw-rx-st b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 11px/1.15 'Barlow Semi Condensed', 'Arial Narrow', sans-serif; letter-spacing: .02em; }
.kw-rx-st small { display: block; min-height: 10px; font: 500 9px/1.1 'Barlow Semi Condensed', sans-serif; opacity: .7; }
.kw-rx-st:hover b, .kw-rx-st:focus-visible b { text-decoration: underline; }
.kw-rx-st.is-off { opacity: .35; }
.kw-rx-st.is-tuned { color: var(--needle); text-shadow: 0 0 6px var(--glow); }
.kw-rx-needle { position: absolute; top: 2px; bottom: 2px; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 1px; background: var(--needle); box-shadow: 0 0 4px var(--needle); pointer-events: none; }
.kw-rx-mid { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; gap: 10px; }
.kw-rx-kn { display: grid; justify-items: center; gap: 3px; }
.kw-rx-kn small { font: 600 10px/1 'Barlow Semi Condensed', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); }
.kw-rx-knob { position: relative; width: 52px; height: 52px; border-radius: 50%; cursor: grab; touch-action: none;
    background: repeating-conic-gradient(rgba(0, 0, 0, .35) 0 4deg, rgba(255, 255, 255, .06) 4deg 8deg), var(--knob); border: 1px solid rgba(0, 0, 0, .7);
    box-shadow: 0 3px 4px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
.kw-rx-knob::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--knob); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .5); }
.kw-rx-knob i { position: absolute; inset: 0; z-index: 1; border-radius: 50%; transform: rotate(var(--volr)); }
.kw-rx-knob--tune i { transform: rotate(var(--tune)); }
.kw-rx-knob i::before { content: ''; position: absolute; left: 50%; top: 11px; width: 3px; height: 10px; margin-left: -1.5px; border-radius: 2px; background: var(--txt); }
.kw-rx-knob.is-turning { cursor: grabbing; }
.kw-rx-info { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; }
.kw-rx-eye { width: 30px; height: 30px; border-radius: 50%; background: #0f1a10; box-shadow: inset 0 0 0 3px #2a2a22, 0 0 0 1px rgba(0, 0, 0, .6); position: relative; overflow: hidden; }
.kw-rx-eye i { position: absolute; inset: 4px; border-radius: 50%; opacity: .15; transition: opacity .3s;
    background: conic-gradient(from 180deg, #4df06a calc(var(--sig) * 50%), transparent 0 calc(100% - var(--sig) * 50%), #4df06a 0); filter: drop-shadow(0 0 3px #4df06a); }
.kw-rx-cab.is-on .kw-rx-eye i { opacity: 1; }
.kw-rx-txt { display: grid; gap: 2px; min-width: 0; }
.kw-rx-txt b, .kw-rx-txt span, .kw-rx-txt em { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kw-rx-txt b { font: 600 17px/1.15 'Barlow Semi Condensed', sans-serif; color: var(--txt); }
.kw-rx-txt span { font: 500 12px/1.2 'Barlow Semi Condensed', sans-serif; color: var(--sub); }
.kw-rx-txt em { font: italic 13px/1.25 'Barlow Semi Condensed', sans-serif; color: var(--txt); min-height: 1.25em; }
.kw-rx-mood { min-height: 2.7em; font: 13px/1.35 'Barlow Semi Condensed', sans-serif; color: var(--sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kw-rx-mood .kw-btn { vertical-align: middle; }
.kw-rx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kw-rx-sw { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--txt); cursor: pointer; font: 600 12px/1 'Barlow Semi Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.kw-rx-sw i { position: relative; width: 34px; height: 18px; border-radius: 9px; background: #1a120b; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .12); }
.kw-rx-sw i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); transition: transform .15s; }
.kw-rx-sw[aria-pressed='true'] i { background: #3a2a10; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 0 6px var(--glow); }
.kw-rx-sw[aria-pressed='true'] i::after { transform: translateX(16px); background: radial-gradient(circle at 35% 30%, #fff3c4, var(--glow)); }
.kw-rx-chime { margin-left: auto; color: var(--txt); font-size: 13px; }
/* the looks by era and faction (no emblems: the sets are plain) */
.kw-rx-cab[data-look='gramo'] { --cab: linear-gradient(170deg, #7a4a28, #4e2c15 60%, #3a2010); --scale: repeating-radial-gradient(ellipse at 50% 140%, #1c1915 0 1px, #2c2824 1px 3px); --ink: #e2cf8e; --glow: #e8c070; --needle: #d9b04a;
    --cloth: radial-gradient(circle at 50% 125%, #120c05 0 14%, #4a3814 15% 24%, #8e7032 25% 40%, #6e5422 41% 64%, #43320f 65% 82%, #2a1f0a 83%); --knob: radial-gradient(circle at 35% 30%, #ecd590, #8a6a2a); }
.kw-rx-cab[data-look='gramo'] .kw-rx-grille { border-radius: 50% 50% 6px 6px / 90% 90% 6px 6px; }
.kw-rx-cab[data-look='gramo'] .kw-rx-eye { background: radial-gradient(circle, #e8dcb0 0 12%, #9e2b25 13% 34%, #141210 35% 100%); }
.kw-rx-cab[data-look='gramo'] .kw-rx-eye i { display: none; }
.kw-rx-cab[data-look='gramo'].is-on .kw-rx-eye { animation: kw-gramo-spin 1.4s linear infinite; }
.kw-rx-cab[data-look='volks'] { --cab: linear-gradient(175deg, #3a2618, #1f140c 55%, #140d07); --edge: #0a0604; --scale: linear-gradient(#efd99a, #e2c77e); --glow: #ffae42;
    --cloth: radial-gradient(circle 25px at 50% 54%, rgba(0, 0, 0, .25) 0 21px, rgba(0, 0, 0, .6) 22px 25px, transparent 26px), repeating-linear-gradient(45deg, #6e5534 0 2px, #5a4428 2px 4px); border-radius: 46px 46px 10px 10px; }
.kw-rx-cab[data-look='volks'] .kw-rx-grille { height: 58px; border-radius: 60px 60px 4px 4px; }
.kw-rx-cab[data-look='post'] { --cab: linear-gradient(170deg, #7a5232, #573620 60%, #43291a); --scale: #f1e6c4; --glow: #ffd27a; --cloth: repeating-linear-gradient(90deg, #c9a45a 0 2px, #3d2a17 2px 5px); border-radius: 12px; }
.kw-rx-cab[data-look='mid'] { --cab: linear-gradient(180deg, #c8b48e 0 6px, #8a5a32 6px, #6a4224); --edge: #2a1a0e; --scale: linear-gradient(#fbfaf5, #e7e4da); --ink: #1d1d1d; --glow: #fff0b0; --needle: #e0601c;
    --cloth: radial-gradient(circle, #3a3a3a 1px, transparent 1.5px) 0 0 / 4px 4px, #c8c8c8; --knob: radial-gradient(circle at 35% 30%, #f0f0f0, #8d8d8d); border-radius: 8px; }
.kw-rx-cab[data-look='late'] { --cab: linear-gradient(#2a2c30, #121316); --edge: #000; --scale: #0f2a14; --ink: #57ff7a; --glow: #2fd35a; --needle: #8dffa4; --txt: #e6e6e6; --sub: rgba(230, 230, 230, .65);
    --cloth: radial-gradient(circle, #0c0c0c 1px, transparent 1.5px) 0 0 / 3px 3px, #34373c; --knob: radial-gradient(circle at 35% 30%, #5b5e63, #16171a); border-radius: 8px; }
.kw-rx-cab[data-look='late'] .kw-rx-st b, .kw-rx-cab[data-look='late'] .kw-rx-num { font-family: 'VT323', monospace; font-size: 15px; font-weight: 400; }
.kw-rx-cab[data-look='late'] .kw-rx-grille { border-radius: 6px; }
.kw-rx-cab[data-look='su'] { --cab: linear-gradient(170deg, #5a2c1c, #3c1b10 60%, #2a120a); --edge: #160805; --scale: linear-gradient(#f2e6c8, #e6d6ae); --ink: #2c1a10; --glow: #ffb04a; --needle: var(--kw-su-red, #a8322a);
    --cloth: repeating-linear-gradient(0deg, #7a5a3a 0 2px, #4e3622 2px 4px); border-radius: 14px 14px 8px 8px; }
.kw-rx-cab[data-look='su-late'] { --cab: linear-gradient(#d9d2bf 0 40%, #7a6e5c 40%, #5e5446); --edge: #2c261d; --scale: linear-gradient(#fbf5e3, #ece4cc); --ink: #2a1c12; --glow: #fff0b0; --needle: var(--kw-su-red, #a8322a);
    --cloth: radial-gradient(circle, #2a2a2a 1px, transparent 1.5px) 0 0 / 4px 4px, #9e968a; --knob: radial-gradient(circle at 35% 30%, #efe9da, #7f776a); --txt: #fbf5e3; border-radius: 10px; }
.kw-rx-cab[data-look='su-late'] .kw-rx-brand { color: rgba(40, 30, 20, .75); }
/* a British game's sets (ui.js rxLook): the brown Bakelite set with its sunray fret (the war years), the plain wooden
   Utility set (the years after), the two-tone leathercloth portable with its gilt trim (the Sixties and Seventies) */
.kw-rx-cab[data-look='uk'] { --cab: linear-gradient(170deg, #4a2e1c, #2e1a0e 60%, #20120a); --edge: #0e0804; --scale: linear-gradient(#f2e2b8, #e2cf98); --glow: #ffb24a;
    --cloth: repeating-conic-gradient(from -90deg at 50% 100%, #2a1a0e 0 6deg, #b89a64 6deg 12deg); border-radius: 30px 30px 10px 10px; }
.kw-rx-cab[data-look='uk'] .kw-rx-grille { border-radius: 70px 70px 4px 4px; }
.kw-rx-cab[data-look='uk-util'] { --cab: linear-gradient(175deg, #8a6a46, #6a4e32 60%, #5a4028); --edge: #2a1c10; --scale: #ede2c2; --glow: #ffd27a;
    --cloth: repeating-linear-gradient(0deg, transparent 0 9px, #3a2a18 9px 15px), #8a6a46; --knob: radial-gradient(circle at 35% 30%, #4a3a2a, #120c06); border-radius: 6px; }
.kw-rx-cab[data-look='uk-util'] .kw-rx-grille { border-radius: 4px; }
.kw-rx-cab[data-look='uk-mid'] { --cab: linear-gradient(180deg, #efe6d0 0 38px, #c8a858 38px 40px, #2e3a58 40px, #222c44); --edge: #141a2a; --scale: linear-gradient(#fbf8ee, #ebe4d2); --ink: #1d1d24; --glow: #fff0b0; --needle: #c8402a;
    --cloth: radial-gradient(circle, #b89a54 1px, transparent 1.6px) 0 0 / 5px 5px, #2a3450; --knob: radial-gradient(circle at 35% 30%, #f4e4b0, #9a7a3a); border-radius: 12px; }
.kw-rx-cab[data-look='uk-mid'] .kw-rx-brand { color: rgba(30, 38, 58, .8); }
@media (max-width: 600px) {
    .kw-modal-back:has(> .kw-rx) { place-items: end center; padding: 8px; }
    .kw-rx-cab { padding: 10px 10px 12px; gap: 8px; }
    .kw-rx-grille { height: 30px; }
    .kw-rx-cab[data-look='volks'] .kw-rx-grille { height: 36px; }
    .kw-rx-st b { font-size: 9.5px; letter-spacing: 0; }
    .kw-rx-cab[data-look='late'] .kw-rx-st b { font-size: 13px; }
    .kw-rx-mid { grid-template-columns: 54px minmax(0, 1fr) 54px; gap: 8px; }
    .kw-rx-knob { width: 46px; height: 46px; }
    .kw-rx-txt b { font-size: 15px; }
    .kw-rx-chime { margin-left: 0; }
}

/* The Kriegsspiel emblem (cards-art.js emblem()) */
.kc-emblem { display: block; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
/* a link to the card game's own page (ui.js ksLink): in hints, the trophy cabinet, the card table and card toasts */
.kw-ks-link { color: var(--kw-gelb); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.kw-ks-link:hover { color: #fff; }
.kw-ks-link .bi { font-size: .8em; }
.kw-toast .kw-ks-link { display: inline-block; margin-top: 2px; }

/* ---------- warehouse & transport ---------- */
.kw-site-box--wide { grid-column: span 2; }
/* the site's makeshift workshop (ui.js shedBoxHtml) */
.kw-shed .kw-shed-picks { gap: 4px; margin-bottom: 6px; }
.kw-shed .kw-shed-picks .kw-btn { display: inline-flex; align-items: center; gap: 4px; }
/* each material's money per batch (ui.js shedPicks: best first); a loss-maker greyed */
.kw-shed-m { font-size: 11px; color: #a9d79a; font-variant-numeric: tabular-nums; }
.kw-shed .kw-shed-picks .kw-btn.kw-shed-loss { opacity: .55; filter: grayscale(.7); }
.kw-shed .kw-shed-picks .kw-btn.kw-shed-loss .kw-shed-m { color: #e08a7a; }
.kw-shed .kw-btn--gold .kw-shed-m { color: inherit; }
.kw-shed-sort { display: block; margin: -2px 0 6px; }
.kw-shed-recipe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 6px; margin-bottom: 4px; background: #1a1914; border-radius: 3px; font-size: 13px; }
.kw-shed-recipe span { display: inline-flex; align-items: center; gap: 3px; }
.kw-shed .kw-status { margin-left: 6px; }
.kw-shed .kw-status.ok { color: #a9d79a; }
.kw-shed-src { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 6px; font-size: 13px; }
.kw-shed-src > div { display: inline-flex; align-items: center; gap: 4px; }
.kw-shed-src b { font-variant-numeric: tabular-nums; }
.kw-shed-order { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 6px; }
.kw-shed-order .kw-btn-group { gap: 4px; }
.kw-shed-custom { display: inline-flex; gap: 4px; }
.kw-shed-custom .kw-input { width: 84px; padding: 3px 6px; font-size: 14px; font-variant-numeric: tabular-nums; }
.kw-shed-custom .kw-input.kw-input--bad { border-color: #ff9d8f; }
.kw-shed-order .kw-shed-n { min-width: 34px; justify-content: center; font-variant-numeric: tabular-nums; }
.kw-shed-order .kw-shed-cn { width: 64px; padding: 3px 6px; font-size: 14px; font-variant-numeric: tabular-nums; }
.kw-shed-order .kw-shed-cn.kw-input--bad { border-color: #ff9d8f; }
.kw-wh-tools .kw-btn-group { gap: 4px; }
.kw-wh-brush { padding: 6px 8px; background: #1d1c16; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3c2d; }
.kw-wh-brush .kw-select { max-width: 280px; }
.kw-wh-brush .kw-hint { flex: 1 1 260px; }
.kw-wh-note { margin: -4px 0 8px; }
.kw-wh-frame { display: flex; justify-content: center; padding: 6px; margin-bottom: 8px; overflow: auto; background: #0f0e0b; border: 2px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #3b3829, inset 0 0 30px rgba(0, 0, 0, .6); }
.kw-wh-grid { display: block; flex: none; image-rendering: pixelated; touch-action: none; box-shadow: 0 0 0 1px #0a0907, 0 0 0 3px #3b3829; }
.kw-wh-selbox { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 8px 10px; margin-bottom: 8px; background: #25241c; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #6b5426; }
.kw-wh-selbox > img { width: 48px; height: 48px; background: #15140f; border-radius: 3px; }
.kw-wh-selbox strong { display: block; font-size: 16px; }
.kw-wh-selbox small { display: block; color: var(--kw-dim); font-size: 13px; }
.kw-wh-selbox .kw-btn-group { grid-column: 1 / -1; }
.kw-wh-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 4px; }
.kw-wh-zone { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--kw-dim); }
.kw-wh-zone i { width: 12px; height: 12px; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.kw-wh-zone small { color: var(--kw-faint); font-family: var(--kw-mono); font-size: 15px; }
.kw-convoys { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 5px; }
.kw-convoys--site { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 6px; }
/* fleet upgrades: five fixed cells (name, level pips, cost), three to a row */
.kw-fleetups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.kw-site-box .kw-btn.kw-fup { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto auto; gap: 1px 5px; align-items: center; height: 44px; padding: 3px 6px; min-width: 0; text-align: left; }
.kw-fup > .bi { grid-row: 1 / 3; font-size: 15px; color: var(--kw-gelb2); }
.kw-fup-name { font-size: 12px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-fup-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.kw-fup-lv { display: inline-flex; gap: 2px; flex: none; }
.kw-fup-lv i { width: 5px; height: 7px; background: #0a0907; box-shadow: inset 0 0 0 1px #5a5640; }
.kw-fup-lv i.on { background: var(--kw-gelb); box-shadow: none; }
.kw-fup .kw-cost { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kw-fup[aria-disabled='true']:not(.cant) { opacity: 1; }
.kw-fup.is-max { opacity: .7; }
/* the fleet upgrades as compact chips (as many to a row as fit: five on a desktop, three on a phone): the icon, what one
   level does, the level pips and the price; the name, what it is and the stat bars are in the tooltip (fixed height, no shift) */
.kw-fleetups.kw-fup-chips { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.kw-site-box .kw-btn.kw-fup.kw-fup--chip { height: 40px; }
.kw-fup-fx { font-size: 12.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-fup--chip .kw-fup-row { justify-content: space-between; }
@media (max-width: 600px) { .kw-fleetups.kw-fup-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kw-site-box .kw-btn.kw-fup.kw-fup--chip { padding: 3px 4px; column-gap: 4px; } .kw-fup--chip .kw-fup-fx { font-size: 11px; } }
/* the fleet's make and fuel (one fixed line), the makes to re-equip with, the warehouse fit-outs (four to a row) */
.kw-fleet-make { display: flex; align-items: center; gap: 7px; min-width: 0; height: 22px; margin-top: 6px; font-size: 13px; }
.kw-fleet-make > b { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-fleet-fuel { flex: 1 1 0; min-width: 0; margin-left: auto; text-align: right; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-fleet-fuel.bad { color: #ff9d8f; }
.kw-fleet-models .kw-fup-row small, .kw-wh-fits .kw-fup-row small { flex: 1 1 auto; min-width: 0; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-wh-fits { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 8px; }
.kw-fleetups.kw-fleet-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kw-fleet-models .kw-fup .kw-cost { flex: none; }
.kw-wh-fits .kw-btn.kw-fup { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; gap: 1px 6px; align-items: center; height: 46px; padding: 3px 6px; min-width: 0; text-align: left; }
.kw-wh-fits .kw-fup > img { grid-row: 1 / 3; width: 28px; height: 28px; }
.kw-wh-fits .kw-fup.is-locked { opacity: .55; }
.kw-wh-fits .kw-fup.is-owned .kw-upg-owned-tag { padding: 0 4px; font-size: 12px; }
@media (max-width: 760px) { .kw-wh-fits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kw-convoys .kw-hint { grid-column: 1 / -1; margin: 0; }
.kw-convoy { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 4px 7px; background: #1a1914; border: 1px solid #0a0907; border-radius: 3px; }
.kw-convoy.wait { background: #2a1714; box-shadow: inset 0 0 0 1px #7a2a22; }
.kw-convoy.back { opacity: .62; }
.kw-convoy > img { width: 32px; height: 32px; }
.kw-convoy-main { min-width: 0; }
.kw-convoy b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-convoy small { display: block; font-size: 12px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-convoy.wait small { color: #ff9d8f; }
.kw-convoy .kw-bar { height: 5px; margin-top: 2px; }
.kw-convoy-load { display: flex; gap: 6px; font-family: var(--kw-mono); font-size: 16px; }
.kw-convoy-load span { display: inline-flex; align-items: center; gap: 2px; }
.kw-convoy-load img { width: 20px; height: 20px; }
.kw-wh-contents { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; }
.kw-wh-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; align-items: center; padding: 3px 6px; text-align: left; cursor: pointer; color: var(--kw-text); font-family: var(--kw-font);
    background: #1d1c16; border: 1px solid #0a0907; border-radius: 3px; box-shadow: inset 0 1px 0 #34322a; }
.kw-wh-item:hover { background: #26251d; }
.kw-wh-item.is-hi { box-shadow: inset 0 0 0 2px var(--kw-gelb); }
.kw-wh-item.is-empty { opacity: .5; }
.kw-wh-item > img { width: 28px; height: 28px; }
.kw-wh-item b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-wh-item small { display: block; font-size: 12px; color: var(--kw-dim); }
@media (max-width: 900px) { .kw-site-box--wide { grid-column: auto; } }
.kw-wh-grid.is-view { cursor: pointer; } .kw-wh-grid.is-move { cursor: grab; } .kw-wh-grid.is-plan { cursor: crosshair; }
/* The header must never widen the page: on mid-size screens the brand, the date and the radio give up some room. */
#kw-app { grid-template-columns: minmax(0, 1fr); }
.kw-top { min-width: 0; }
/* The header's room (plan Decision 104): the resource boxes keep their natural width and never shrink, so the cash, the
   per-second line (gold while a sale by hand lifts it) and each box's own tooltip always show in full. The radio takes
   what is left (flex 1 1 0, a size container): it drops its maker's name, then the grille and the magic eye, then the dial
   (only the three knobs stay). The brand, the date and the buttons tighten on mid-size screens, the per-second line
   reads "/s", a long company name or state ends in an ellipsis (both carry the full text in their tooltip); under
   1240 px the boxes take a row of their own, on a phone two by two. */
.kw-brand, .kw-date, .kw-top-actions { flex: none; }
.kw-resources { flex: .01 0 auto; }
.kw-res { flex: none; }
.kw-per-s { display: none; }
/* The cash and the RP boxes keep one width while the figures tick (the radio beside them never shifts): every digit
   is as wide as the next, and each line has room for the longest figure fmt() writes (−4.32 K, −88.9 K per second, the
   gold lift of a sale by hand), so a box grows only when a figure truly outgrows that. */
.kw-res--rm b, .kw-res--rp b { min-width: 7ch; font-variant-numeric: tabular-nums; }
.kw-res--rm small, .kw-res--rp small { min-width: 7.9em; font-variant-numeric: tabular-nums; }
.kw-radio { display: flex; flex: 1 1 0; min-width: 96px; max-width: 367px; container: kw-radio / inline-size; }
.kw-radio-grille { flex: 0 0 38px; }
.kw-radio-face { flex: 1 1 190px; max-width: 190px; }
.kw-radio-eye { flex: none; margin: 0 2px; }
.kw-radio-knobs { flex: none; }
@container kw-radio (max-width: 300px) { .kw-radio-brand { display: none; } .kw-radio-grille { flex-basis: 30px; } }
@container kw-radio (max-width: 240px) { .kw-radio-grille, .kw-radio-eye { display: none; } }
@container kw-radio (max-width: 180px) { .kw-radio-face { display: none; } .kw-radio-knobs { margin: 0 auto; } }
@media (max-width: 1640px) {
    .kw-company { max-width: 150px; } .kw-date { min-width: 160px; padding: 0 8px; } .kw-top { gap: 8px; }
    .kw-per { display: none; } .kw-per-s { display: inline; }
    .kw-res--rm small, .kw-res--rp small { min-width: 0; } /* "/s": the 7ch figure above sets the width */
}
@media (max-width: 1440px) {
    .kw-top { gap: 6px; padding: 8px 10px; }
    .kw-brand { gap: 8px; }
    .kw-brand h1 { font-size: 22px; }
    .kw-company { max-width: 128px; font-size: 13px; }
    .kw-date { min-width: 148px; }
    .kw-date-main { font-size: 19px; }
    .kw-resources { gap: 6px; }
    .kw-res { gap: 6px; padding: 4px 9px 4px 5px; }
    .kw-res img { width: 30px; height: 30px; }
    .kw-res b { font-size: 23px; }
    .kw-heat-bar { width: 56px; }
    .kw-heat-bar i { background-size: 56px 100%; }
    .kw-top-actions { gap: 4px; }
    .kw-top-actions .kw-icon-btn { width: 34px; height: 34px; font-size: 16px; }
}
@media (max-width: 1320px) { .kw-phase-chip { max-width: 160px; } }
@media (max-width: 1240px) {
    .kw-top { flex-wrap: wrap; row-gap: 6px; }
    .kw-resources { order: 3; flex: 1 1 100%; }
}
@media (max-width: 600px) {
    .kw-resources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    .kw-res { min-width: 0; }
}
.kw-site-box .kw-btn { white-space: normal; text-align: left; line-height: 1.15; }

/* the starting-site chooser: every site in one row, easiest first, with its difficulty */
.kw-modal.kw-start-sites { width: min(1280px, 100%); }
.kw-start-row { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; }
.kw-start-site { padding: 10px 8px 12px; gap: 3px; }
.kw-start-site > img.kw-ico { width: 72px; height: 72px; }
.kw-start-site strong { font-size: 19px; }
.kw-start-site p { font-size: 13px; line-height: 1.3; margin: 2px 0; }
.kw-start-site p.kw-diff-why { font-size: 12.5px; color: var(--kw-dim); font-style: italic; }
.kw-start-site .kw-section-label { margin-top: 4px; }
.kw-start-site .kw-start-goods img { width: 30px; height: 30px; }
.kw-diff { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: 10px; background: #15140f; box-shadow: inset 0 0 0 1px #45422f; font-size: 12px; }
.kw-diff i { width: 7px; height: 7px; border-radius: 50%; background: #3a372b; }
.kw-diff b { margin-left: 3px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.kw-diff-1 i:first-child { background: #8fc46a; } .kw-diff-1 b { color: #8fc46a; }
.kw-diff-2 i:nth-child(-n+2) { background: #e0b84e; } .kw-diff-2 b { color: #e0b84e; }
.kw-diff-3 i { background: #d0584a; } .kw-diff-3 b { color: #e07a6a; }
@media (max-width: 1100px) { .kw-start-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .kw-start-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The family firm (chronicle, succession), the power plant, retooling, notices in the newspaper */
.kw-prod-summary:has(.kw-stat--power) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kw-power { display: grid; gap: 7px; padding: 10px 12px; margin-bottom: 12px; background: rgba(40, 37, 28, .7); border: 1px solid rgba(212, 176, 100, .25); border-left: 4px solid var(--kw-gelb); }
.kw-power-head { display: flex; gap: 10px; align-items: flex-start; }
.kw-power-head strong { color: var(--kw-paper); font-size: 17px; }
.kw-power-head small { color: var(--kw-dim); }
.kw-power-head p { margin: 2px 0 0; font-size: 14px; color: #cfc6ab; }
.kw-power--compact .kw-power-head p { display: none; }
.kw-power-meter { display: grid; grid-template-columns: minmax(120px, 260px) 1fr; gap: 10px; align-items: center; font-size: 13.5px; }
.kw-power-meter .kw-bar { margin-top: 0; height: 10px; }
.kw-bar--power i { background: linear-gradient(90deg, #6d8a3d, #a9c46f); }
.kw-bar--power i.warn { background: linear-gradient(90deg, #c9a13b, #f0cf7e); }
.kw-power-text { color: #e8dcbc; font-family: var(--kw-mono); }
.kw-power-btns { flex-wrap: wrap; }
/* the shift system of the lines; the top quality grade; the years of an improvement */
.kw-shift { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; margin-bottom: 12px; background: rgba(40, 37, 28, .55); border: 1px solid rgba(212, 176, 100, .18); }
.kw-shift .kw-section-label { margin: 0; }
.kw-shift .kw-btn img.kw-ico, .kw-power-btns .kw-btn img.kw-ico { width: 18px; height: 18px; vertical-align: -4px; }
.kw-shift .kw-hint { flex: 1 1 260px; min-width: 0; font-variant-numeric: tabular-nums; }
/* production drives (one running, or the drives of the years to pick from) */
.kw-drive { padding: 8px 12px; margin-bottom: 12px; background: rgba(40, 37, 28, .55); border: 1px solid rgba(212, 176, 100, .18); }
.kw-drive.is-on { border-left: 4px solid #b8443a; background: rgba(52, 34, 28, .6); }
.kw-drive .kw-section-label { margin: 0; }
.kw-drive-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.kw-drive-head small { display: block; }
.kw-drive-meter { display: grid; grid-template-columns: minmax(120px, 260px) 44px 1fr; gap: 8px; align-items: center; margin-top: 6px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.kw-drive-meter .kw-bar { margin-top: 0; height: 10px; }
.kw-bar i.good { background: linear-gradient(90deg, #b08a2a, #f0d070); }
.kw-drive-list, .kw-survey-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kw-survey-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kw-drive-list .kw-btn.kw-fup, .kw-site-box .kw-survey-list .kw-btn.kw-fup { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; gap: 1px 6px; align-items: center; height: 46px; padding: 3px 6px; min-width: 0; text-align: left; }
.kw-drive-list .kw-fup > img, .kw-survey-list .kw-fup > img { grid-row: 1 / 3; width: 28px; height: 28px; }
.kw-drive-list .kw-fup.is-locked { opacity: .55; }
.kw-drive-list .kw-fup-row small, .kw-survey-list .kw-fup-row small { flex: 1 1 auto; min-width: 0; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-drive-list .kw-fup .kw-cost, .kw-survey-list .kw-fup .kw-cost { flex: none; }
@media (max-width: 760px) { .kw-drive-list, .kw-survey-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kw-drive-meter { grid-template-columns: 1fr 44px; } .kw-drive-meter .kw-hint { grid-column: 1 / -1; } }
/* hall fit-outs: the icons of those installed and the button beside the hall's name */
.kw-hall-fits { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; font-family: var(--kw-body, inherit); letter-spacing: 0; }
.kw-hall-fit { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(212, 176, 100, .25); }
.kw-hall-fit.is-off { opacity: .4; filter: grayscale(1); }
.kw-hall-fitbtn { font-size: 12.5px; padding: 2px 7px; }
.kw-hall-fitlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .kw-hall-fitlist { grid-template-columns: 1fr; } }
/* surveys and seams */
.kw-seam-found { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 6px; padding: 5px 7px; background: rgba(176, 138, 42, .12); box-shadow: inset 0 0 0 1px rgba(240, 208, 112, .3); }
.kw-seam-found strong, .kw-seam-found small { display: block; }
.kw-unit-seam { display: grid; grid-template-columns: 22px auto minmax(40px, 1fr); gap: 6px; align-items: center; margin: 2px 0 4px; font-size: 13px; color: var(--kw-gelb2); }
.kw-unit-seam .kw-bar { margin-top: 0; }
.kw-bar--seam i { background: linear-gradient(90deg, #8a6a1a, #e8c060); }
.kw-fac.is-later { opacity: .55; }
.kw-qual.q3 { color: #ffe39a; background: rgba(255, 227, 154, .14); border-color: #ffe39a; }
.kw-perk-era { font-size: 12px; letter-spacing: .04em; }
.kw-retool-btn { animation: kw-inc-pulse 1.6s ease-in-out infinite; }
.kw-retool-card[disabled] { opacity: .55; cursor: not-allowed; }
.kw-retool-card .kw-pick-row { display: flex; flex-wrap: wrap; gap: 4px 14px; width: 100%; justify-content: center; font-size: 14px; }
.kw-fam { display: grid; margin-bottom: 14px; }
.kw-fam-head { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 8px 10px; background: rgba(40, 37, 28, .6); border: 1px solid rgba(212, 176, 100, .18); }
.kw-fam-head.cur { border-color: var(--kw-gelb); box-shadow: inset 0 0 0 1px rgba(212, 176, 100, .45); }
.kw-fam-head.pending { border-style: dashed; border-color: var(--kw-gelb2); }
.kw-fam-gen { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2a2418; border: 2px solid #8a7444; color: var(--kw-gelb2); font-family: var(--kw-stencil); font-size: 16px; }
.kw-fam-head.f .kw-fam-gen { border-color: #a07a8a; }
.kw-fam-head strong { display: block; color: var(--kw-paper); font-size: 16px; }
.kw-fam-head small { display: block; color: var(--kw-dim); font-size: 12.5px; }
.kw-fam-head .kw-btn { margin-top: 5px; }
.kw-fam-trait { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; font-size: 12.5px; color: #e8dcbc; }
.kw-fam-trait img.kw-ico { width: 18px; height: 18px; }
.kw-fam-trait em { font-style: normal; } .kw-fam-trait em.plus { color: var(--kw-gruen); } .kw-fam-trait em.minus { color: var(--kw-rot2); }
.kw-fam-link { width: 2px; height: 12px; margin-left: 25px; background: #8a7444; }
.kw-heir.sel { box-shadow: inset 0 0 0 2px var(--kw-gelb), 0 0 22px rgba(212, 176, 100, .35); background: linear-gradient(180deg, #3d3824, #2a271b); }
.kw-heir > img.kw-ico { width: 72px; height: 72px; }
.kw-heir strong { font-size: 19px; }
.kw-heir-trait { color: var(--kw-gelb2); }
.kw-choice-points li.plus { color: var(--kw-gruen); } .kw-choice-points li.minus { color: var(--kw-rot2); }
.kw-rename { display: grid; gap: 4px; }
.kw-rename small { color: var(--kw-dim); }
.kw-start-card.sel { box-shadow: inset 0 0 0 2px var(--kw-gelb), 0 0 22px rgba(212, 176, 100, .35); }
.kw-refound .kw-start-card > img.kw-ico { width: 64px; height: 64px; }
.kw-refound .kw-start-card strong { font-size: 19px; }
.kw-refound-kind { margin: 8px 0 0; }
.kw-paper-notices { display: grid; gap: 6px; margin-bottom: 10px; }
.kw-paper-notice { display: grid; grid-template-columns: 36px 1fr; gap: 9px; padding: 7px 9px; background: rgba(60, 50, 30, .1); border: 1px solid rgba(60, 40, 20, .35); font-family: var(--kw-type); }
.kw-paper-notice.obit { border: 2px solid #1e1a14; outline: 1px solid #1e1a14; outline-offset: 2px; }
.kw-paper-notice strong { display: block; font-size: 16px; }
.kw-paper-notice small { display: block; font-size: 12px; opacity: .8; }
.kw-paper-notice p { margin: 3px 0 0; font-size: 14px; }

/* start choices mark a selection; a button at the foot acts on it */
.kw-start-card.sel { box-shadow: inset 0 0 0 3px var(--kw-gelb), 0 0 22px rgba(212, 176, 100, .3); background: linear-gradient(180deg, #3a3726, #2a281d); }
.kw-title-go { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; min-height: 46px; }
.kw-btn--lg { font-size: 17px; padding: 10px 22px; }
.kw-title-go .kw-btn:disabled { opacity: .45; cursor: not-allowed; }

/* convoy lists keep their size: empty rows hold the room, one note line always there (no jumping buttons below) */
.kw-convoy--empty { visibility: hidden; }
.kw-convoy { height: 50px; box-sizing: border-box; overflow: hidden; }
.kw-convoy-note { display: block; height: 1.35em; line-height: 1.35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-whconv] { max-height: 214px; overflow-y: auto; }
.kw-convoy-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a site's vehicles one by one (ui.js vehicleList) and the cargo popup (cargoTipHtml) of a row, a vehicle in the view,
   the yard's piles or the workshop: fixed widths and tabular numbers, so a popup that follows the loading never jumps */
.kw-veh { cursor: default; }
.kw-veh:hover { border-color: #5a5640; }
.kw-veh.dock { box-shadow: inset 3px 0 0 #8a7a3a; }
.kw-veh.park { opacity: .72; }
.kw-veh-ph { width: 32px; height: 32px; }
.kw-veh .kw-convoy-load { min-width: 64px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.kw-veh-empty { font-family: inherit; font-size: 12px; }
.kw-tip--cargo { min-width: 230px; }
.kw-cargo { display: grid; gap: 3px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #2e2c22; }
.kw-cargo-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 7px; align-items: center; font-size: 13.5px; }
.kw-cargo-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--kw-paper); }
.kw-cargo-row img { width: 20px; height: 20px; }
.kw-cargo-row b { font-family: var(--kw-mono); font-size: 15px; min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.kw-cargo-tot { margin-top: 2px; font-size: 12px; color: var(--kw-dim); text-align: right; font-variant-numeric: tabular-nums; }
.kw-cargo-none { font-size: 13px; color: var(--kw-dim); font-style: italic; }

/* the tech tree pans by dragging (ui.js wirePan) */
.kw-tree-wrap { cursor: grab; user-select: none; }
.kw-tree-wrap.kw-panning { cursor: grabbing; }
.kw-tree-wrap.kw-panning * { cursor: grabbing !important; }

/* Upgrades → Safety: the troubles of the works and what is in place against them */
.kw-safety-table td:nth-child(3) { font-size: 13px; color: var(--kw-faint); }
.kw-safety-table .kw-mitem { gap: 8px; }
/* the left column: the picture and the PRESS row never shrink; the report takes the rest (at least a usable 240px) and on
   short windows the whole column scrolls, picture first. Hiding the PRESS row (warehouse, market, town) changes nothing above. */
.kw-left { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden; }
.kw-left > .kw-scene-frame, .kw-left > .kw-press-row { flex: none; }
.kw-left > .kw-front { flex: 1 0 240px; }
@media (max-width: 900px) { .kw-left { overflow: visible; } .kw-left > .kw-front { flex: none; } }

/* ---------- the fishing harbour (data-harbour.js): grounds and boat gear per berth, the diving station, the restorer ---------- */
.kw-hb-ground { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 14px; }
.kw-hb-ground .kw-select { height: 26px; font-size: 13.5px; min-width: 0; width: 100%; }
.kw-unit .kw-hb-gnote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; height: 2.5em; line-height: 1.25; font-size: 12.5px; }
.kw-unit .kw-hb-gear { margin-top: 0; }
.kw-unit .kw-btn.kw-fup { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto auto; gap: 1px 5px; align-items: center; height: 42px; padding: 3px 6px; min-width: 0; text-align: left; white-space: normal; line-height: 1.15; }
.kw-hb-spoil { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; height: 2.5em; line-height: 1.25; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kw-hb .kw-section-label + .kw-section-label { margin-top: 6px; }
.kw-hb-off { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 64px; margin-bottom: 6px; }
.kw-hb-off strong { display: block; font-size: 15px; }
.kw-hb-off small { display: block; color: var(--kw-dim); font-size: 13px; line-height: 1.3; }
.kw-hb-kit { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 6px 8px; align-items: center; margin-bottom: 4px; }
.kw-hb-kit .kw-unit-eq { margin-bottom: 0; }
.kw-hb-kit > .kw-btn, .kw-hb-kit > .kw-upg-owned-tag { width: 200px; min-height: 40px; text-align: center; justify-self: stretch; }
@media (max-width: 600px) { .kw-hb-kit { grid-template-columns: 1fr; } .kw-hb-kit > .kw-btn, .kw-hb-kit > .kw-upg-owned-tag { width: 100%; } }
.kw-hb-divers { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 5px; margin-bottom: 5px; }
.kw-hb-diver { display: grid; grid-template-columns: 32px minmax(0, 1fr) 34px; gap: 7px; align-items: center; height: 44px; padding: 4px 6px; background: #1a1914; border: 1px solid #0a0907; border-radius: 3px; overflow: hidden; }
.kw-hb-diver img { width: 32px; height: 32px; }
.kw-hb-diver strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hb-diver small { display: block; font-size: 12px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-hb-diver.is-empty { grid-template-columns: 32px minmax(0, 1fr); opacity: .45; border-style: dashed; border-color: #4d4935; }
.kw-hb-diver.is-hurt { border-color: #6a2a20; }
.kw-hb-stars { color: var(--kw-gelb2); letter-spacing: 1px; }
.kw-hb .kw-btn-group > small.kw-hint { flex: 1 1 200px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-hb-wrecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 5px; margin-bottom: 4px; }
.kw-hb-wreck.is-on { border-color: var(--kw-gelb); box-shadow: inset 0 0 0 1px rgba(212, 176, 100, .35); }
.kw-hb-prot { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; height: 2.6em; line-height: 1.3; font-size: 12.5px; color: var(--kw-dim); }
.kw-hb-prot .bi { color: #8aa0b0; }
.kw-hb-curios .kw-salv-obj { grid-template-columns: 40px minmax(0, 1fr) 84px; }
.kw-hb-curios .kw-salv-obj.is-empty { grid-template-columns: 40px minmax(0, 1fr); }
.kw-hb-cbtns { display: grid; grid-auto-rows: 26px; gap: 3px; align-content: center; }
.kw-hb-cbtns .kw-btn { padding: 1px 4px; font-size: 12.5px; line-height: 1; text-align: center; justify-content: center; }
.kw-hb-rare { color: var(--kw-gelb2); font-size: 12px; }
.kw-hb [data-f="restnote"] { display: block; height: 1.3em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- What's new (title menu changelog) ---------- */
.kw-tbadge { display: inline-block; margin-left: 6px; padding: 1px 7px; font: 700 12px/1.5 var(--kw-font, inherit); font-style: normal; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; color: #1a150b; background: #e0584c; border-radius: 9px; }
.kw-tbtn.primary .kw-tbadge { color: #fff; }
.kw-news-list { display: grid; gap: 14px; max-height: min(62vh, 640px); overflow-y: auto; padding-right: 6px; overscroll-behavior: contain; }
.kw-news-entry { padding: 12px 14px; background: rgba(10, 9, 7, .55); border: 1px solid rgba(212, 176, 100, .18); border-left: 4px solid rgba(212, 176, 100, .4); }
.kw-news-entry.fresh { border-left-color: #e0584c; }
.kw-news-entry header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kw-news-entry header .kw-ico { flex: none; width: 28px; height: 28px; }
.kw-news-entry h3 { flex: 1 1 200px; margin: 0 0 0 6px; font-family: var(--kw-stencil); font-weight: 400; font-size: 21px; color: var(--kw-paper); }
.kw-news-entry time { font-size: 13.5px; color: var(--kw-dim, #a79f86); white-space: nowrap; }
.kw-news-entry ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.kw-news-entry li { display: flex; gap: 10px; align-items: flex-start; color: #d5ccb1; line-height: 1.4; }
.kw-news-ico { flex: none; display: flex; gap: 2px; width: 118px; min-height: 28px; align-items: center; }
.kw-news-ico .kw-ico { width: 28px; height: 28px; }
.kw-news-shots { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.kw-news-shot { padding: 0; width: 240px; height: 135px; cursor: zoom-in; background: #0a0907; border: 1px solid rgba(212, 176, 100, .35); overflow: hidden; }
.kw-news-shot:hover, .kw-news-shot:focus-visible { border-color: var(--kw-gelb, #d4b064); outline: none; }
.kw-news-shot img { display: block; width: 240px; height: 135px; object-fit: cover; }
.kw-news-lb { position: relative; width: min(1100px, 100%); padding: 8px; }
.kw-news-lb img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; }
.kw-news-lbx { position: absolute; top: 12px; right: 12px; background: rgba(10, 9, 7, .75); }
/* a save begun before additions only a new game shows (changelog `fresh`): the mark on Continue and the slots, and its list */
.kw-fresh { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px 1px 6px; vertical-align: middle; cursor: pointer; white-space: nowrap;
    font: 700 12px/1.5 var(--kw-font, inherit); letter-spacing: .04em; color: #f0d68e; background: #2a2418; border: 1px solid #b8913f; border-radius: 9px; }
.kw-fresh i { font-size: 11px; width: auto; }
.kw-fresh:hover, .kw-fresh:focus-visible { color: #1a150b; background: #e8c779; border-color: #f0d68e; outline: none; }
.kw-tbtn { position: relative; }
.kw-tbtn .kw-fresh.compact { display: inline-flex; position: absolute; top: -9px; right: -6px; margin: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.kw-fresh-note { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 6px 10px; font-size: 14px; color: #f0d68e; background: rgba(184, 145, 63, .12); border-left: 3px solid #b8913f; }
.kw-fresh-note i { flex: none; margin-top: 2px; }
.kw-fresh-list { max-height: min(56vh, 560px, calc(100dvh - 300px)); margin: 10px 0 12px; }
.kw-fresh-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kw-fresh-gap { flex: 1; }
@media (max-width: 640px) { .kw-news-list.kw-fresh-list { max-height: max(160px, calc(100dvh - 470px)); } .kw-fresh-gap { display: none; } .kw-fresh-btns .kw-btn { flex: 1 1 auto; } }
@media (max-width: 640px) {
    .kw-news-list { max-height: 58vh; }
    .kw-news-ico { width: 62px; flex-wrap: wrap; }
    .kw-news-shot, .kw-news-shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* ---------- the pawnshop (data-pawn.js): the counter, the window, the order book, the road, the outfits; every place fixed in size ---------- */
.kw-tab--pawn[aria-selected='true'] { color: #f4ead0; background: linear-gradient(#3e3420, #1e1a10); }
.kw-panel--pawn { background:
    radial-gradient(ellipse at 70% -10%, rgba(240, 200, 110, .08), transparent 55%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 6px), #16130d; }
.kw-pw-title { color: #f0d89a; }
.kw-pw-title small { font-size: 15px; color: #b8a27a; }
.kw-btn--xs { height: 24px; padding: 0 7px; font-size: 13px; line-height: 1; }
.kw-btn--xs .kw-cost { font-size: 14px; }
.kw-pw-closed { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border: 1px dashed #5a4a30; border-radius: 4px; background: rgba(0, 0, 0, .2); }
.kw-pw-closed strong { font-size: 18px; color: #f0d89a; }
.kw-pw-closed p { margin: 6px 0 10px; color: var(--kw-dim); font-size: 14.5px; }
.kw-pw-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 10px; background: #1e1a12; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #3a3222; }
.kw-pw-head strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; height: 2.5em; font-size: 13.5px; font-weight: 400; line-height: 1.25; color: var(--kw-dim); }
.kw-pw-head small { display: block; color: var(--kw-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-pw-rep { display: grid; grid-template-columns: auto minmax(0, 1fr) 70px; gap: 8px; align-items: center; margin: 3px 0; font-size: 13px; color: #e8d8b0; }
.kw-pw-rep .kw-bar { margin: 0; }
.kw-pw-rep .kw-bar i { background: linear-gradient(90deg, #8a6a2a, #f0cf7e); }
.kw-pw-rep b { font-family: var(--kw-mono); font-size: 17px; font-weight: 400; text-align: right; }
.kw-pw-ups { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.kw-pw-ups .kw-btn.kw-fup { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; gap: 1px 6px; align-items: center; height: 44px; padding: 3px 6px; min-width: 0; text-align: left; }
.kw-pw-ups .kw-fup > img { grid-row: 1 / 3; width: 22px; height: 22px; }
.kw-pw-counter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.kw-pw-seller { display: grid; grid-template-columns: 44px minmax(0, 1fr) 196px; gap: 10px; align-items: center; height: 84px; padding: 6px 10px; overflow: hidden; background: #211c14; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #43392a; }
.kw-pw-seller > img { width: 44px; height: 44px; background: #15130e; border-radius: 3px; }
.kw-pw-seller.is-hot { background: #2a1814; box-shadow: inset 0 0 0 1px #5a2a20; }
.kw-pw-seller.is-empty { grid-template-columns: 44px minmax(0, 1fr); opacity: .45; border-style: dashed; border-color: #4d4935; background: rgba(0, 0, 0, .15); }
.kw-pw-seller.is-empty > img { opacity: .5; filter: grayscale(1); }
.kw-pw-seller strong, .kw-pw-order strong, .kw-pw-ship strong, .kw-pw-rival strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-pw-seller strong small { color: var(--kw-dim); font-size: 13px; font-weight: 400; }
.kw-pw-seller small, .kw-pw-ship small, .kw-pw-order small { display: block; color: var(--kw-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-pw-smain { min-width: 0; }
.kw-pw-story { white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; height: 2.5em; line-height: 1.25; }
.kw-pw-flags { display: flex; gap: 4px; height: 20px; margin-top: 2px; overflow: hidden; }
.kw-pw-cond, .kw-pw-hot, .kw-pw-tell { display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 6px; border-radius: 3px; font-size: 12px; white-space: nowrap; background: #2e2a22; border: 1px solid #0a0907; }
.kw-pw-cond.c0 { color: #ff9d8f; } .kw-pw-cond.c1 { color: #e8c89a; } .kw-pw-cond.c2 { color: #e8e0c8; } .kw-pw-cond.c3 { color: #c5e39a; } .kw-pw-cond.c4 { color: #f0cf7e; background: #3a2e14; }
.kw-pw-cond.is-unknown { color: var(--kw-faint); }
.kw-pw-hot { color: #ffb0a0; background: #4a1a16; }
.kw-pw-hot img { width: 16px; height: 16px; }
.kw-pw-tell { color: #e8c89a; font-style: italic; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kw-pw-sside { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: center; }
.kw-pw-ask { display: inline-flex; align-items: center; gap: 4px; font-family: var(--kw-mono); font-size: 19px; white-space: nowrap; overflow: hidden; }
.kw-pw-ask img { width: 16px; height: 16px; }
.kw-pw-ask b { font-weight: 400; }
.kw-pw-left { font-size: 12.5px; color: var(--kw-dim); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 6.5em; }
.kw-pw-sbtns { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr .7fr; gap: 4px; }
.kw-pw-sbtns .kw-btn { padding: 0 4px; }
.kw-pw-auto { float: right; text-transform: none; letter-spacing: 0; font-size: 13px; }
.kw-pw-window { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 5px; }
.kw-pw-case { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; align-items: center; height: 54px; padding: 4px 8px; background: #1c1912; border: 1px solid #0a0907; border-radius: 3px; overflow: hidden; }
.kw-pw-case > img { width: 36px; height: 36px; }
.kw-pw-case .kw-select { width: 100%; height: 24px; font-size: 13px; }
.kw-pw-case small { display: block; color: var(--kw-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-pw-orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 8px; }
.kw-pw-order { display: grid; grid-template-rows: auto 1fr auto; gap: 4px; height: 320px; padding: 8px 10px; overflow: hidden; background: #e8dec2; color: #2a2418; border: 1px solid #0a0907; border-radius: 3px; box-shadow: inset 0 0 0 1px #c8b88a, 0 2px 0 #0a0907; }
.kw-pw-order small { color: #6a5e48 !important; }
.kw-pw-order.is-late { box-shadow: inset 0 0 0 2px #b8352c, 0 2px 0 #0a0907; }
.kw-pw-order.is-empty { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; gap: 10px; opacity: .45; color: var(--kw-text); background: rgba(0, 0, 0, .15); border-style: dashed; border-color: #4d4935; box-shadow: none; }
.kw-pw-order.is-empty small { color: var(--kw-dim) !important; }
.kw-pw-ohead { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 8px; align-items: center; }
.kw-pw-oreward { grid-column: 1 / -1; display: flex; gap: 4px; height: 26px; overflow: hidden; }
.kw-pw-oreward .kw-in { background: #2a2418; color: var(--kw-text); }
.kw-pw-manifest { display: grid; align-content: start; gap: 2px; min-height: 0; overflow: hidden; }
.kw-pw-mrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 26px; gap: 6px; align-items: center; height: 24px; font-size: 13px; border-bottom: 1px dotted #b8a882; }
.kw-pw-mrow img { width: 22px; height: 22px; }
.kw-pw-mname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-pw-mq { font-family: var(--kw-mono); font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 9.5em; text-align: right; }
.kw-pw-mrow.done { color: #3a6a2a; }
.kw-pw-mrow .kw-btn--xs { height: 20px; padding: 0 6px; }
.kw-pw-ofoot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; font-size: 12.5px; }
.kw-pw-ofoot .kw-bar { margin: 0; grid-column: 1 / -1; }
.kw-pw-ofoot [data-f="ofilltxt"] { grid-column: 1 / -1; color: #5a4e38; white-space: nowrap; overflow: hidden; }
.kw-pw-ofoot .kw-check { color: #3a3222; font-size: 13px; }
.kw-pw-ofoot { grid-template-columns: auto auto 1fr auto auto; }
.kw-pw-ofoot .kw-bar, .kw-pw-ofoot [data-f="ofilltxt"] { grid-column: 1 / -1; }
.kw-pw-ships { display: grid; gap: 5px; }
.kw-pw-ship { display: grid; grid-template-columns: 40px minmax(0, 1fr) 210px; gap: 10px; align-items: center; height: 62px; padding: 5px 10px; background: #1c1912; border: 1px solid #0a0907; border-radius: 3px; overflow: hidden; }
.kw-pw-ship > img { width: 40px; height: 40px; }
.kw-pw-ship.is-empty { grid-template-columns: 40px minmax(0, 1fr) 0; opacity: .45; border-style: dashed; border-color: #4d4935; }
.kw-pw-ship.is-warn { background: #2e1a14; box-shadow: inset 0 0 0 1px #b8352c; }
.kw-pw-ship.is-warn small { color: #ffb0a0; }
.kw-pw-ship.is-hit .kw-bar i { background: linear-gradient(90deg, #8e241c, #e0584c); }
.kw-pw-shside { display: grid; gap: 3px; justify-items: end; }
.kw-pw-warn { display: flex; gap: 3px; visibility: hidden; }
.kw-pw-ship.is-warn .kw-pw-warn { visibility: visible; }
.kw-section-label a[data-act="pwjobs"] { color: var(--kw-gold, #e0b84a); text-decoration: underline dotted; text-underline-offset: 2px; }
.kw-pw-rivals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px; }
.kw-pw-rival { display: grid; grid-template-rows: auto auto auto auto; gap: 5px; height: 200px; padding: 8px 10px; overflow: hidden; background: #1e1a16; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3e342a; }
.kw-pw-rival.is-hostile { background: #2a1814; box-shadow: inset 0 0 0 1px #5a2a20; }
.kw-pw-rival.is-empty { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; opacity: .45; border-style: dashed; border-color: #4d4935; }
.kw-pw-rhead { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; }
.kw-pw-rhead small { display: block; color: var(--kw-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-pw-rtext { white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; height: 2.5em; line-height: 1.25; }
.kw-pw-feud { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; align-items: center; }
.kw-pw-feudbar { position: relative; height: 9px; background: #0d0c09; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #2e2c22; }
.kw-pw-feudbar i { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; }
.kw-pw-feudbar i.neg { background: linear-gradient(90deg, #e0584c, #8e241c); }
.kw-pw-feudbar i.pos { background: linear-gradient(90deg, #6d8a3d, #a9c46f); }
.kw-pw-feudbar em { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #a79f86; }
.kw-pw-feud b { font-family: var(--kw-mono); font-size: 16px; font-weight: 400; text-align: right; white-space: nowrap; }
.kw-pw-rstate { color: var(--kw-dim); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; height: 1.3em; }
.kw-pw-dbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.kw-pw-dbtns .kw-btn { justify-content: space-between; }
.kw-pw-hjbody { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.kw-pw-hjbody > img { width: 96px; height: 96px; background: #15140f; border-radius: 4px; }
@media (max-width: 760px) {
    .kw-pw-seller { grid-template-columns: 44px minmax(0, 1fr); height: auto; min-height: 120px; }
    .kw-pw-sside { grid-column: 1 / -1; }
    .kw-pw-ship { grid-template-columns: 40px minmax(0, 1fr); height: auto; min-height: 62px; }
    .kw-pw-shside { grid-column: 1 / -1; justify-items: stretch; }
    .kw-pw-hjbody { grid-template-columns: minmax(0, 1fr); }
}

/* market rows: what the stock is worth, and a sell-X field (fixed widths: nothing moves as figures change) */
.kw-worth { display: block; min-width: 9ch; font-size: 13px; color: var(--kw-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kw-sellx { display: flex; gap: 4px; margin-top: 4px; }
.kw-sellx .kw-input { width: 84px; padding: 3px 6px; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- the Ledger's casebook (data-story.js): a cork board with pinned clues and puzzles, the case file beside it.
   Every place on the board keeps its size (a 3 × 2 grid under the lead card), so nothing moves as clues arrive. ---------- */
.kw-tab--casebook[aria-selected='true'] { color: #f4ead0; background: linear-gradient(#4a3420, #241a10); }
.kw-sb-title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.kw-sb-title small { color: var(--kw-dim); font-weight: 400; font-size: 15px; }
.kw-sb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; align-items: start; }
.kw-sb-board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 64px 130px 130px; gap: 14px; padding: 14px;
    min-height: 386px; border: 6px solid #5a3a20; border-radius: 4px; box-shadow: inset 0 0 0 1px #2a1a0c, inset 0 4px 18px rgba(0, 0, 0, .45), var(--kw-shadow);
    background: radial-gradient(circle at 20% 30%, rgba(255, 220, 160, .08), transparent 40%), radial-gradient(#8a6a44 1px, transparent 1.5px) 0 0 / 7px 7px, radial-gradient(#6a4a2a 1px, transparent 1.5px) 3px 4px / 9px 9px, #9a7a52; }
.kw-sb-board--idle { display: block; }
.kw-sb-strings { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); pointer-events: none; z-index: 1; }
.kw-sb-strings line { stroke-width: 2; vector-effect: non-scaling-stroke; }
.kw-sb-strings line.on { stroke: #c0302a; }
.kw-sb-strings line.off { stroke: rgba(80, 30, 20, .35); stroke-dasharray: 4 5; }
.kw-sb-lead { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2; display: grid; gap: 1px; padding: 6px 12px; font-size: 14px; line-height: 1.2; transform: rotate(-.4deg); overflow: hidden; }
.kw-sb-lead em { font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.kw-sb-lead strong { font-size: 17px; }
.kw-sb-lead strong small { font-weight: 400; font-style: italic; font-size: 13px; opacity: .75; }
.kw-sb-lead span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-sb-pin { position: relative; z-index: 2; display: flex; gap: 8px; align-items: flex-start; min-width: 0; height: 130px; padding: 14px 10px 8px; text-align: left; font: inherit; color: var(--kw-ink);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 6px 12px rgba(0, 0, 0, .35); overflow: hidden; }
.kw-sb-pin::before { content: ''; position: absolute; top: 4px; left: 50%; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff7a6a, #a8201a 70%); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.kw-sb-pin > span { display: grid; gap: 3px; min-width: 0; }
.kw-sb-pin strong { font-size: 14.5px; line-height: 1.1; }
.kw-sb-pin small { font-size: 12.5px; line-height: 1.2; opacity: .85; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.kw-sb-clue { border: 0; cursor: pointer; transform: rotate(var(--tilt, 0deg)); transition: transform .15s; }
.kw-sb-clue:hover { transform: rotate(0) scale(1.03); z-index: 3; }
.kw-sb-clue.is-missing { flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: default; color: #f0e2c4; background: rgba(40, 24, 10, .25); border: 2px dashed rgba(240, 220, 180, .45); box-shadow: none; }
.kw-sb-clue.is-missing:hover { transform: none; }
.kw-sb-clue.is-missing::before { display: none; }
.kw-sb-clue.is-missing small { -webkit-line-clamp: 3; }
.kw-sb-clue.is-missing b { color: #ffd890; }
.kw-sb-q { font-family: var(--kw-stencil); font-size: 34px; line-height: 1; color: rgba(240, 220, 180, .6); }
.kw-sb-pz { background: #2a2620; color: var(--kw-text); border: 1px solid #0a0907; }
.kw-sb-pz em { font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--kw-gelb); }
.kw-sb-pz.is-locked { opacity: .75; }
.kw-sb-pz.is-ready { box-shadow: 0 0 0 2px var(--kw-gelb), 0 6px 14px rgba(0, 0, 0, .45); }
.kw-sb-pz .kw-btn { justify-self: start; margin-top: 4px; }
.kw-sb-solved { color: #bfe0a0; }
.kw-sb-stamp { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; font-style: normal; font-family: var(--kw-stencil); font-size: 15px; color: #6aa04a; border: 2px solid #6aa04a; border-radius: 3px; transform: rotate(-8deg); opacity: .85; }
/* the paper of the years */
.kw-sb-paper--kaiser { background: #efe3c4; font-family: Georgia, 'Times New Roman', serif; }
.kw-sb-paper--weimar { background: #e8dcbc; font-family: Georgia, 'Times New Roman', serif; }
.kw-sb-paper--war { background: #ddd4b8; font-family: var(--kw-type); }
.kw-sb-paper--ruins { background: #cfc8b4; font-family: var(--kw-type); }
.kw-sb-paper--west { background: #f4f2ea; font-family: var(--kw-type); }
.kw-sb-paper--east { background: #dcdfcc; font-family: var(--kw-type); }
.kw-sb-paper--alt { background: #d8cfb2; font-family: var(--kw-type); }
.kw-sb-paper--files { background: #e8e4d6; font-family: var(--kw-type); }
.kw-sb-lead[class*='kw-sb-paper'] { color: var(--kw-ink); }
.kw-sb-cold { display: flex; gap: 14px; align-items: center; padding: 30px 20px; margin: 60px auto; max-width: 460px; color: var(--kw-ink); background: #e8dcbc; box-shadow: var(--kw-shadow); transform: rotate(-1deg); }
.kw-sb-cold p { margin: 4px 0 0; }
/* the case file */
.kw-sb-file { display: grid; gap: 10px; }
.kw-sb-prog { display: grid; grid-template-columns: auto auto auto auto; gap: 4px 10px; align-items: baseline; padding: 8px 10px; background: var(--kw-panel2); border: 1px solid var(--kw-line); border-radius: 3px; }
.kw-sb-prog span { color: var(--kw-dim); font-size: 13px; }
.kw-sb-prog b { font-family: var(--kw-mono); font-size: 22px; color: var(--kw-gelb2); }
.kw-sb-hints, .kw-sb-jobs { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 8px 10px; background: var(--kw-panel2); border: 1px solid var(--kw-line); border-radius: 3px; }
.kw-sb-hints small, .kw-sb-jobs small { display: block; color: var(--kw-dim); font-size: 13px; margin: 2px 0 6px; }
.kw-sb-hints .kw-btn-group { flex-wrap: wrap; }
.kw-sb-hints .kw-cost { display: inline-block; min-width: 4ch; text-align: right; }
.kw-sb-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kw-sb-chapters li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 6px; border-radius: 3px; background: rgba(255, 255, 255, .02); }
.kw-sb-chapters li strong { display: block; font-size: 14px; }
.kw-sb-chapters li small { color: var(--kw-dim); font-size: 12px; }
.kw-sb-chapters li.is-open { background: rgba(212, 176, 100, .12); box-shadow: inset 2px 0 0 var(--kw-gelb); }
.kw-sb-chapters li.is-future, .kw-sb-chapters li.is-before { opacity: .65; }
/* the case so far */
.kw-sb-story { display: grid; gap: 6px; }
.kw-sb-recap { margin: 0; padding: 6px 10px; color: var(--kw-dim); border-left: 2px solid var(--kw-line2); font-size: 14.5px; }
.kw-sb-past { padding: 6px 10px; background: var(--kw-panel2); border: 1px solid var(--kw-line); border-radius: 3px; }
.kw-sb-past summary { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.kw-sb-past summary small { color: var(--kw-dim); }
.kw-sb-past p { margin: 6px 0; font-size: 15px; }
.kw-sb-past ul { margin: 4px 0; padding-left: 20px; color: #cfe0b4; font-size: 14.5px; }
.kw-sb-close { color: var(--kw-gelb2); }
.kw-sb-cluebody { padding: 14px 18px; color: var(--kw-ink); box-shadow: var(--kw-shadow); font-size: 16px; line-height: 1.4; }
.kw-modal .kw-sb-cluebody p { color: var(--kw-ink); margin: 0; }
.kw-sb-closebody { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.kw-sb-closebody p { margin: 0 0 10px; }
.kw-pw-clue { display: inline-flex; gap: 3px; align-items: center; margin-left: 6px; padding: 0 5px; height: 18px; vertical-align: middle; font-size: 12px; font-weight: 400; color: #2a1e10; background: #e8c87a; border-radius: 3px; }
@media (max-width: 1100px) { .kw-sb-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
    .kw-sb-board { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; gap: 12px; padding: 12px; }
    .kw-sb-board > .kw-sb-pin { grid-column: auto !important; grid-row: auto !important; height: auto; min-height: 0; }
    .kw-sb-pin small { display: block; -webkit-line-clamp: unset; overflow: visible; }
    .kw-sb-lead span { white-space: normal; }
    .kw-sb-strings { display: none; }
    .kw-sb-closebody { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- games of chance (data-casino.js): the evening, the venues, the lottery; every place fixed in size ---------- */
.kw-tab--casino[aria-selected='true'] { color: #f4ead0; background: linear-gradient(#3a1e22, #1a0e10); }
.kw-panel--casino { background:
    radial-gradient(ellipse at 30% -10%, rgba(200, 60, 60, .08), transparent 55%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 8px), #15110f; }
.kw-cs-title { color: #f0d89a; }
.kw-cs-title small { font-size: 15px; color: #b8a27a; }
.kw-cs-note { margin: 0 0 8px; padding: 6px 10px; font-size: 13.5px; line-height: 1.3; color: #e0d2a8; background: #1e1814; border-left: 3px solid #8a6a2a; border-radius: 2px; }
.kw-cs-tonight { display: grid; grid-template-columns: 40px repeat(3, minmax(0, 1fr)); gap: 4px 12px; align-items: center; padding: 6px 10px; background: #1e1a12; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #3a3222; }
.kw-cs-tonight > img { grid-row: 1 / 3; }
.kw-cs-tn { min-width: 0; }
.kw-cs-tn small { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--kw-faint); white-space: nowrap; }
.kw-cs-tn b { display: block; font-family: var(--kw-mono); font-weight: 400; font-size: 21px; line-height: 1; color: #f6eed4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-cs-evs { grid-column: 2 / -1; display: block; height: 1.3em; font-size: 12.5px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-cs-venues { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 8px; }
.kw-cs-venue, .kw-cs-lot { display: grid; grid-template-rows: auto auto auto auto; gap: 6px; padding: 8px 10px; overflow: hidden; background: #221a14; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #48362a; }
.kw-cs-venue { height: 212px; }
.kw-cs-venue.is-illegal { background: #1e1816; box-shadow: inset 0 0 0 1px #4a2a22; }
.kw-cs-venue.is-empty, .kw-cs-lot.is-empty { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; height: auto; opacity: .5; border-style: dashed; border-color: #4d4935; background: rgba(0, 0, 0, .15); }
.kw-cs-venue.is-empty small, .kw-cs-lot.is-empty small { display: block; color: var(--kw-dim); font-size: 12.5px; }
.kw-cs-vhead { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.kw-cs-vhead > img { width: 48px; height: 48px; background: #15110e; border-radius: 3px; }
.kw-cs-vhead strong { display: block; font-size: 15.5px; color: #f0d89a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-cs-vhead small { display: block; font-size: 12.5px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-cs-vhead .kw-cs-vtext { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; height: 3.75em; line-height: 1.25; margin-top: 2px; color: #c8bc9c; }
.kw-cs-tag { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 3px; font-size: 12px; white-space: nowrap; color: #c5e39a; background: #23301c; border: 1px solid #0a0907; }
.kw-cs-tag.is-bad { color: #ffb0a0; background: #4a1a16; }
.kw-cs-tag img { width: 16px; height: 16px; }
.kw-cs-stakes { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 4px; align-items: center; }
.kw-cs-stakes > span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--kw-faint); margin-right: 2px; }
.kw-cs-chip { height: 26px; min-width: 0; padding: 0 4px; font-family: var(--kw-mono); font-size: 16px; line-height: 1; color: #e8dcc0; background: radial-gradient(circle at 50% 40%, #3a2a24, #241a16); border: 1px solid #0a0907; border-radius: 13px; box-shadow: inset 0 0 0 2px #5a3a30; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-cs-chip b { font-weight: 400; }
.kw-cs-chip:hover:not(:disabled) { color: #fff4d0; box-shadow: inset 0 0 0 2px #8a5a3a; }
.kw-cs-chip[aria-pressed='true'] { color: #2a1a10; background: radial-gradient(circle at 50% 40%, #f0cf7e, #c89e4c); box-shadow: inset 0 0 0 2px #f8e8b0; }
.kw-cs-chip:disabled { opacity: .4; cursor: default; }
.kw-cs-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.kw-cs-play { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 32px; }
.kw-cs-play img { width: 22px; height: 22px; flex: none; }
.kw-cs-play span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-cs-lim { display: block; height: 1.3em; font-size: 12.5px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-cs-lotnext { text-align: right; min-width: 74px; }
.kw-cs-lotnext small { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--kw-faint); }
.kw-cs-lotnext b { display: block; font-family: var(--kw-mono); font-weight: 400; font-size: 21px; color: #f6eed4; font-variant-numeric: tabular-nums; }
.kw-cs-tks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 4px; }
.kw-cs-tk { display: flex; align-items: center; gap: 2px; height: 28px; padding: 0 6px; overflow: hidden; background: #ece4cb; border: 1px solid #0a0907; border-radius: 2px; color: #2a2418; }
.kw-cs-tk.is-empty { justify-content: center; font-size: 12.5px; color: var(--kw-faint); background: rgba(0, 0, 0, .18); border-style: dashed; border-color: #4d4935; }
.kw-cs-no { font-family: var(--kw-mono); font-size: 18px; letter-spacing: .06em; }
.kw-cs-ball { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; font-family: var(--kw-mono); font-size: 15px; line-height: 1; color: #2a2418; background: radial-gradient(circle at 35% 30%, #fff8e0, #e8d8a8); border: 1px solid #6a5a3a; border-radius: 50%; font-variant-numeric: tabular-nums; }
.kw-cs-ball.is-hit { background: radial-gradient(circle at 35% 30%, #fff0a0, #e8b838); border-color: #8a5a10; box-shadow: 0 0 6px rgba(240, 200, 80, .6); }
.kw-cs-lbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.kw-cs-lbtns small { margin-left: auto; font-size: 12.5px; color: var(--kw-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kw-cs-draws { display: grid; gap: 3px; }
.kw-cs-draw { display: grid; grid-template-columns: 92px auto minmax(0, 1fr); gap: 8px; align-items: center; height: 26px; font-size: 12.5px; color: var(--kw-dim); border-top: 1px dotted #3a3222; }
.kw-cs-draw span { display: inline-flex; gap: 2px; }
.kw-cs-draw small:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.kw-cs-books { margin: 0; font-size: 13.5px; color: var(--kw-dim); font-variant-numeric: tabular-nums; }
.kw-cs-grid { display: grid; gap: 3px; margin: 8px 0; }
.kw-cs-pick { height: 30px; font-family: var(--kw-mono); font-size: 17px; color: #2a2418; background: #ece4cb; border: 1px solid #0a0907; border-radius: 2px; cursor: pointer; font-variant-numeric: tabular-nums; }
.kw-cs-pick:hover { background: #fff4d8; }
.kw-cs-pick.on { color: #fff; background: #b8352c; box-shadow: inset 0 0 0 2px #e85a4a; }
@media (max-width: 640px) {
    .kw-cs-tonight { gap: 4px 8px; }
    .kw-cs-tn small { font-size: 10px; letter-spacing: .04em; }
    .kw-cs-tn b { font-size: 18px; }
    .kw-cs-venue { height: auto; }
    .kw-cs-stakes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .kw-cs-stakes > span { display: none; }
    .kw-cs-draw { grid-template-columns: 70px minmax(0, 1fr); height: auto; }
    .kw-cs-draw small:last-child { grid-column: 1 / -1; text-align: left; }
}

/* the Trade group has eight tabs: a narrow panel puts the last of them on a second row */
.kw-nav .kw-tabs { flex-wrap: wrap; }
.kw-cs-games > :only-child { grid-column: 1 / -1; }

/* ---------------- the sidelines: pigeon loft, town contracts, hunting lease (ui.js panels.hustle) ---------------- */
.kw-tab--hustle[aria-selected='true'] { color: #eef0dc; background: linear-gradient(#24301e, #121a10); }
.kw-hu-title { color: #e0e8c0; }
.kw-hu-title small { font-size: 15px; color: #a8b088; }
.kw-panel--hustle .kw-section-label { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.kw-panel--hustle .kw-section-label img { display: inline-block; flex: none; width: 22px; height: 22px; }
.kw-panel--hustle .kw-section-label small { overflow: hidden; text-overflow: ellipsis; }
.kw-hu-note, .kw-hu-books { margin: 0 0 6px; font-size: 13px; line-height: 1.3; color: var(--kw-dim); font-variant-numeric: tabular-nums; }
.kw-hu-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; background: #1c2018; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3a4230; }
.kw-hu-card strong { display: block; font-size: 15.5px; color: #e8e4c4; }
.kw-hu-card strong small { font-size: 12.5px; color: var(--kw-faint); font-weight: 400; }
.kw-hu-card p { margin: 3px 0 6px; font-size: 13px; line-height: 1.3; color: #c8c4a8; }
.kw-hu-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 6px 10px; background: #1c2018; border: 1px solid #0a0907; border-radius: 4px; }
.kw-hu-head > img { grid-row: 1 / 3; }
.kw-hu-head > .kw-btn, .kw-hu-head > .kw-hu-max { grid-row: 1; grid-column: 3; }
.kw-hu-htitle { min-width: 0; }
.kw-hu-htitle strong { display: block; font-size: 15.5px; color: #e8e4c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hu-htitle strong small, .kw-hu-htitle > small { font-size: 12.5px; color: var(--kw-faint); font-weight: 400; }
.kw-hu-htitle > small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hu-hstats { grid-row: 2; grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kw-hu-hstats .kw-stat b { display: block; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-hu-max { font-size: 12.5px; color: var(--kw-faint); white-space: nowrap; }
.kw-hu-rule { display: flex; gap: 6px; align-items: center; margin: 6px 0 0; padding: 5px 9px; font-size: 13px; color: #e0d2a8; background: #1e1814; border-left: 3px solid #8a6a2a; border-radius: 2px; }
.kw-hu-race { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 70px; margin-top: 6px; padding: 6px 10px; overflow: hidden; background: #18201e; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #2a3a34; }
.kw-hu-race.is-idle { grid-template-columns: 48px minmax(0, 1fr); opacity: .8; }
.kw-hu-race.is-home { box-shadow: inset 0 0 0 1px #8a7a3a; background: #22201a; }
.kw-hu-race strong { display: block; font-size: 15px; color: #e8e4c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hu-race strong small { display: inline; font-size: 12px; color: var(--kw-faint); font-weight: 400; }
.kw-hu-race small { display: block; font-size: 12.5px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-hu-rmain { min-width: 0; }
.kw-hu-rst b { font-family: var(--kw-mono); font-weight: 400; font-size: 17px; color: #f6eed4; }
.kw-hu-rbtns { display: flex; flex-direction: column; gap: 4px; align-items: stretch; width: 150px; }
.kw-hu-rbtns .kw-btn img { width: 18px; height: 18px; vertical-align: -4px; }
.kw-hu-army { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 6px; padding: 6px 10px; background: #22201a; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #5a4a2a; }
.kw-hu-army strong { display: block; font-size: 14.5px; color: #e8e4c4; }
.kw-hu-army small { display: block; font-size: 12.5px; color: var(--kw-dim); font-variant-numeric: tabular-nums; }
.kw-hu-army b { font-family: var(--kw-mono); font-weight: 400; font-size: 16px; color: #f6eed4; }
.kw-hu-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; }
.kw-hu-tools .kw-btn img { width: 18px; height: 18px; vertical-align: -4px; }
.kw-hu-tnote { flex: 1 1 200px; min-width: 0; height: 1.3em; font-size: 12.5px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-hu-birds { display: grid; gap: 3px; max-height: 330px; overflow-y: auto; padding-right: 2px; container-type: inline-size; }
.kw-hu-bird { display: grid; grid-template-columns: 14px minmax(100px, 1fr) 140px 76px 90px 176px; gap: 8px; align-items: center; height: 36px; padding: 0 8px; background: #1e1c16; border: 1px solid #0a0907; border-radius: 3px; }
.kw-hu-bird.is-picked { box-shadow: inset 0 0 0 1px #c8a040; }
.kw-hu-bird.is-entered { background: #232a1c; }
.kw-hu-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #0a0907; }
.kw-hu-bname { min-width: 0; }
.kw-hu-bname strong { display: block; font-size: 14px; color: #e8e4c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hu-bname strong small { color: var(--kw-faint); font-weight: 400; }
.kw-hu-bname > small { display: block; font-size: 11.5px; color: var(--kw-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-hu-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.kw-hu-stat { text-align: center; }
.kw-hu-stat small { display: block; font-size: 10px; letter-spacing: .08em; color: var(--kw-faint); }
.kw-hu-stat b { display: block; font-family: var(--kw-mono); font-weight: 400; font-size: 18px; line-height: .9; color: #f6eed4; font-variant-numeric: tabular-nums; }
.kw-hu-form small { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--kw-faint); }
.kw-hu-form .kw-bar i { transition: width .4s; }
.kw-hu-bst { font-size: 12px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hu-bbtn { display: flex; gap: 3px; justify-content: flex-end; }
.kw-hu-bbtn .kw-btn { min-width: 50px; }
.kw-hu-bbtn .kw-cost { font-size: 15px; }
.kw-hu-none { padding: 10px; font-size: 13px; color: var(--kw-faint); text-align: center; border: 1px dashed #4d4935; border-radius: 3px; }
.kw-hu-results { display: grid; gap: 3px; }
.kw-hu-res { padding: 4px 8px; border-top: 1px dotted #3a3222; }
.kw-hu-res > small { display: block; font-size: 12px; color: var(--kw-faint); font-variant-numeric: tabular-nums; }
.kw-hu-res div { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--kw-dim); font-variant-numeric: tabular-nums; }
.kw-hu-res .is-prize { color: #f0d89a; }
.kw-hu-res .is-lost { color: #c87a6a; }
.kw-hu-tcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 8px; margin-bottom: 8px; }
.kw-hu-tc { display: grid; grid-template-rows: auto 3.9em auto auto; gap: 5px; height: 186px; padding: 8px 10px; overflow: hidden; background: #1e1c16; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3e3a2a; }
.kw-hu-tc.is-active { grid-template-rows: auto 2.6em auto 8px auto; background: #1c2218; box-shadow: inset 0 0 0 1px #4a6a3a; }
.kw-hu-tc.is-empty { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; height: auto; opacity: .55; border-style: dashed; border-color: #4d4935; background: rgba(0, 0, 0, .15); }
.kw-hu-tc.is-empty small { font-size: 12.5px; color: var(--kw-dim); }
.kw-hu-tchead { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; }
.kw-hu-tchead img { background: #15110e; border-radius: 3px; }
.kw-hu-tchead strong { display: block; font-size: 14.5px; color: #e8e4c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hu-tchead small { display: block; font-size: 12px; color: var(--kw-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hu-tctext { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: 12.5px; line-height: 1.3; color: #c8bc9c; }
.kw-hu-tc.is-active .kw-hu-tctext { -webkit-line-clamp: 2; line-clamp: 2; }
.kw-hu-tcrow { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; font-size: 13px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.kw-hu-tcrow span { display: inline-flex; align-items: center; gap: 3px; }
.kw-hu-tcrow img { width: 16px; height: 16px; }
.kw-hu-tcrow b { font-family: var(--kw-mono); font-weight: 400; font-size: 17px; color: #f6eed4; }
.kw-hu-tcfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kw-hu-tcfoot small { min-width: 0; font-size: 12px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-hu-seasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; margin: 4px 0 6px; }
.kw-hu-season { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 4px; align-items: center; height: 30px; padding: 0 6px; background: #15130f; border: 1px solid #0a0907; border-radius: 3px; }
.kw-hu-season small { font-size: 12px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hu-season b { font-family: var(--kw-mono); font-weight: 400; font-size: 16px; color: #c8c4a8; font-variant-numeric: tabular-nums; }
.kw-hu-season.is-high b { color: #b8e08a; }
.kw-hu-season.is-low { opacity: .6; }
.kw-hu-lodge .kw-btn img { width: 18px; height: 18px; vertical-align: -4px; }
/* the bird rows follow the width of their own list (the panel is narrow in the side-by-side layout too) */
@container (max-width: 670px) {
    .kw-hu-bird { grid-template-columns: 14px minmax(0, 1fr) 132px; height: auto; padding: 4px 8px; }
    .kw-hu-form, .kw-hu-bst { display: none; }
    .kw-hu-bbtn { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .kw-hu-head > img { grid-row: 1; }
    .kw-hu-hstats { grid-column: 1 / -1; }
    .kw-hu-race { grid-template-columns: 48px minmax(0, 1fr); height: auto; }
    .kw-hu-rbtns { grid-column: 1 / -1; width: auto; flex-direction: row; }
    .kw-hu-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kw-hu-army { grid-template-columns: 40px minmax(0, 1fr); }
    .kw-hu-army .kw-btn-group { grid-column: 1 / -1; }
}
/* ---------------- the works cats, Anca and Camon (ui.js panels.cats, cats.js) ---------------- */
.kw-tab--cats[aria-selected='true'] { color: #f4ece0; background: linear-gradient(#3a2a26, #1c1412); }
.kw-cats-title { display: flex; align-items: center; gap: 8px; color: #f0e2d0; }
.kw-cats-title small { font-size: 15px; color: #b8a890; }
.kw-panel--cats .kw-section-label, .kw-panel--home .kw-section-label { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.kw-panel--cats .kw-section-label img, .kw-panel--home .kw-section-label img { display: inline-block; flex: none; width: 22px; height: 22px; }
.kw-panel--cats .kw-section-label small, .kw-panel--home .kw-section-label small { overflow: hidden; text-overflow: ellipsis; }
.kw-cat-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kw-cat-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px; background: #241c1a; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #4a3a32; }
.kw-cat-pic { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #4a3a30, #1a1412 70%); }
.kw-cat-body { min-width: 0; }
.kw-cat-body strong { display: block; font-size: 17px; color: #f4ead8; font-family: var(--kw-stencil); letter-spacing: .5px; }
.kw-cat-trait { display: block; height: 3.9em; overflow: hidden; margin: 1px 0 4px; font-size: 12.5px; line-height: 1.3; color: #c8b8a0; }
.kw-cat-meter { display: grid; grid-template-columns: 58px minmax(0, 1fr) 62px; gap: 6px; align-items: center; margin: 2px 0; font-size: 12.5px; color: var(--kw-dim); }
.kw-cat-meter span { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.kw-cat-meter img { width: 16px; height: 16px; }
.kw-cat-meter .kw-bar { margin-top: 0; height: 8px; }
.kw-cat-meter em { font-style: normal; color: #e8dcc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-bar--cat i { background: linear-gradient(90deg, #8a3a3a, #e0607a 60%, #f4a0b0); transition: width .4s; }
.kw-bar--catfull i { background: linear-gradient(90deg, #6a5a3a, #d4b064); transition: width .4s; }
.kw-cat-last { display: block; height: 1.3em; margin: 3px 0 5px; font-size: 12.5px; color: var(--kw-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-cat-card .kw-btn img, .kw-cat-matrow .kw-btn img, .kw-cat-feedbtn img { width: 18px; height: 18px; vertical-align: -4px; }
.kw-cat-mat { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding: 8px; background: repeating-linear-gradient(0deg, #4a2a22 0 4px, #5e3a2a 4px 8px, #3e2a22 8px 12px); border: 1px solid #0a0907; border-radius: 4px; }
.kw-cat-gift { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 70px; padding: 4px 2px; background: rgba(20, 14, 12, .55); border-radius: 4px; text-align: center; }
.kw-cat-gift small { display: block; width: 100%; font-size: 11.5px; line-height: 1.15; color: #e8dcc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-cat-gift.is-empty { background: rgba(20, 14, 12, .25); box-shadow: inset 0 0 0 1px rgba(232, 220, 192, .12); }
.kw-cat-gift.is-empty small { color: #6a5a4a; }
.kw-cat-gift.is-rare { box-shadow: inset 0 0 0 1px #d4b064, 0 0 10px rgba(240, 207, 126, .35); }
.kw-cat-matrow { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.kw-cat-matrow small { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-cat-larder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; border-radius: 4px; transition: box-shadow .3s; }
.kw-cat-larder.is-empty { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #1e1816; color: var(--kw-dim); font-size: 13px; }
.kw-cat-larder.is-flash { box-shadow: 0 0 0 2px var(--kw-gelb2), 0 0 12px rgba(232, 196, 100, .5); }
.kw-cat-food { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 4px 6px; background: #1e1816; border: 1px solid #0a0907; border-radius: 3px; }
.kw-cat-food span { min-width: 0; }
.kw-cat-food b { display: block; font-size: 13.5px; font-weight: 600; color: #e8dcc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-cat-food small { display: block; font-size: 11.5px; color: var(--kw-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kw-cat-feedbtn { width: 82px; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.kw-cat-feedbtn.is-fav { box-shadow: inset 0 0 0 1px #e0607a; }
.kw-cat-feedbtn img + img { width: 12px; height: 12px; margin-left: 2px; vertical-align: 0; }
/* the cats' upgrades: toys, furniture for the corner, the bond and the knacks */
.kw-bar--catpep i { background: linear-gradient(90deg, #3a5a7a, #6ab0d8); transition: width .4s; }
.kw-bar--bond i { background: linear-gradient(90deg, #6a3a6a, #c870b0 60%, #f0a8d8); transition: width .4s; }
.kw-cat-toys { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 4px 8px; }
.kw-cat-toy { display: grid; grid-template-columns: 40px minmax(0, 1fr) 172px; gap: 8px; align-items: center; height: 56px; padding: 4px 6px; background: #1e1816; border: 1px solid #0a0907; border-radius: 3px; }
.kw-cat-toy > img { width: 40px; height: 40px; }
.kw-cat-toy.is-owned { background: #221a1e; box-shadow: inset 0 1px 0 #4a3a42; }
.kw-cat-toy.is-locked > img, .kw-cat-fu.is-locked > img { filter: grayscale(1) brightness(.5); }
.kw-cat-toy span, .kw-cat-fu span { min-width: 0; }
.kw-cat-toy b, .kw-cat-fu b { display: block; font-size: 13.5px; font-weight: 600; color: #e8dcc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-cat-toy small { display: block; font-size: 11.5px; line-height: 1.25; color: var(--kw-faint); height: 2.5em; overflow: hidden; }
.kw-cat-toybtns { display: flex; gap: 4px; justify-content: flex-end; }
.kw-cat-playbtn { width: 84px; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.kw-cat-playbtn img { width: 18px; height: 18px; vertical-align: -4px; }
.kw-cat-playbtn img + img { width: 12px; height: 12px; margin-left: 2px; vertical-align: 0; }
.kw-cat-playbtn.is-fav { box-shadow: inset 0 0 0 1px #e0607a; }
.kw-cat-buybtn { width: 128px; white-space: nowrap; }
.kw-cat-buybtn .kw-cost { display: inline-block; min-width: 6ch; text-align: left; font-size: 15px; }
.kw-cat-soon, .kw-cat-have { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 128px; font-size: 12.5px; color: var(--kw-faint); white-space: nowrap; }
.kw-cat-have { color: #e8c0d0; }
.kw-cat-have img { width: 16px; height: 16px; }
.kw-cat-furn { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 4px 8px; }
.kw-cat-fu { display: grid; grid-template-columns: 44px minmax(0, 1fr) 128px; gap: 8px; align-items: center; height: 78px; padding: 4px 6px; background: #1e1816; border: 1px solid #0a0907; border-radius: 3px; }
.kw-cat-fu > img { width: 44px; height: 44px; }
.kw-cat-fu.is-owned { background: #221a1e; box-shadow: inset 0 1px 0 #4a3a42; }
.kw-cat-fu b small { font-size: 11.5px; font-weight: 400; color: var(--kw-faint); font-variant-numeric: tabular-nums; }
.kw-cat-fu span > small { display: block; font-size: 11.5px; line-height: 1.25; color: var(--kw-faint); height: 2.5em; overflow: hidden; }
.kw-cat-fu span > small.kw-cat-fx { height: 1.25em; color: #c8b0b8; white-space: nowrap; text-overflow: ellipsis; }
.kw-cat-abil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kw-cat-abcol { padding: 6px 8px; background: #241c1a; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #4a3a32; }
.kw-cat-bondrow { display: grid; grid-template-columns: 32px auto minmax(0, 1fr) auto; grid-template-areas: "p n w w" "p b b c"; gap: 2px 8px; align-items: center; margin-bottom: 4px; }
.kw-cat-bondrow > img { grid-area: p; width: 32px; height: 32px; }
.kw-cat-bondrow b { grid-area: n; font-family: var(--kw-stencil); font-size: 16px; color: #f4ead8; letter-spacing: .5px; }
.kw-cat-bondrow em { grid-area: w; font-style: normal; font-size: 12.5px; color: #e8c0d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; font-variant-numeric: tabular-nums; }
.kw-cat-bondrow .kw-bar { grid-area: b; margin-top: 0; height: 8px; }
.kw-cat-bondrow small { grid-area: c; width: 6.5em; text-align: right; font-size: 11.5px; color: var(--kw-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kw-cat-ab { display: grid; grid-template-columns: 32px minmax(0, 1fr) 92px; gap: 6px; align-items: center; height: 46px; padding: 2px 4px; margin-top: 3px; background: #1a1412; border-radius: 3px; }
.kw-cat-ab > img { width: 32px; height: 32px; }
.kw-cat-ab span { min-width: 0; }
.kw-cat-ab b { display: block; font-size: 13px; color: #e8dcc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-cat-ab small { display: block; font-size: 11px; line-height: 1.2; color: var(--kw-faint); height: 2.4em; overflow: hidden; }
.kw-cat-ab em { font-style: normal; font-size: 11.5px; text-align: center; padding: 2px 4px; border-radius: 3px; color: #b8a890; background: #2a2220; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kw-cat-ab.is-active { box-shadow: inset 0 0 0 1px #c870b0; }
.kw-cat-ab.is-active em { color: #1a1014; background: #e8a0d0; }
.kw-cat-ab.is-locked > img { filter: grayscale(1) brightness(.45); }
.kw-cat-ab.is-locked b { color: var(--kw-faint); }
@media (max-width: 760px) {
    .kw-cat-cards { grid-template-columns: minmax(0, 1fr); }
    .kw-cat-mat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kw-cat-larder { grid-template-columns: minmax(0, 1fr); }
    .kw-cat-toys, .kw-cat-furn, .kw-cat-abil { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .kw-cat-toy { grid-template-columns: 40px minmax(0, 1fr); height: auto; }
    .kw-cat-toybtns { grid-column: 1 / -1; justify-content: flex-start; }
    .kw-cat-fu { grid-template-columns: 44px minmax(0, 1fr); height: auto; }
    .kw-cat-fu > .kw-btn, .kw-cat-fu > .kw-cat-soon, .kw-cat-fu > .kw-cat-have { grid-column: 2; }
}
/* ---------------- Home: the family house (ui.js panels.home, home.js; the strip over the view #kwHomeBar) ---------------- */
.kw-home-bar { position: absolute; left: 6px; top: 6px; right: 6px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.kw-home-bar[hidden] { display: none; }
.kw-home-bar > * { pointer-events: auto; }
.kw-hm-tools, .kw-hm-sel { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; max-width: 100%; padding: 3px; background: rgba(18, 14, 12, .82); border: 1px solid #0a0907; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.kw-hm-tb { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; cursor: pointer; background: #2a2620; border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #4a4434; border-radius: 3px; }
.kw-hm-tb img { width: 22px; height: 22px; }
.kw-hm-tb[aria-pressed='true'] { background: var(--kw-gelb); box-shadow: inset 0 0 0 1px #fff4; }
.kw-hm-tb--ok { background: #3a5a2a; }
.kw-hm-tb:hover { box-shadow: inset 0 0 0 1px var(--kw-gelb); }
.kw-hm-where { display: inline-block; max-width: 180px; padding: 0 6px; font-size: 13px; color: #e8dcc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hm-where b { color: var(--kw-gelb); font-weight: 600; font-variant-numeric: tabular-nums; }
.kw-hm-zoom { display: inline-flex; gap: 3px; margin-left: 3px; padding-left: 6px; border-left: 1px solid #4a4434; }
.kw-hm-sel span { max-width: 160px; padding: 0 4px; font-size: 13px; color: #e8dcc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hm-sel > img { width: 26px; height: 26px; }
.kw-hm-msg { max-width: min(520px, 100%); padding: 3px 8px; font-size: 12.5px; color: #e8dcc0; background: rgba(18, 14, 12, .82); border-radius: 3px; border-left: 3px solid #6d8a3d; }
.kw-hm-msg.bad { border-left-color: #e0584c; }
.kw-hm-tb--paid { position: relative; }
.kw-hm-tb .kw-hm-coin { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; image-rendering: pixelated; filter: drop-shadow(0 0 1px #000); pointer-events: none; }
.kw-hm-price { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; max-width: min(560px, 100%); padding: 3px 8px; font-size: 12.5px; color: #e8dcc0; background: rgba(18, 14, 12, .86); border-radius: 3px; border-left: 3px solid #d8b040; }
.kw-hm-price .kw-cash { color: #fff4c8; font-weight: 600; }
.kw-hm-price.cant { border-left-color: #e0584c; } .kw-hm-price.cant .kw-cash { color: #ff8a70; }
.kw-hm-price.free { border-left-color: #8ac860; color: #c8e8b0; }
/* the tool wheel (ui.js homeWheelOpen): the right button on the view, a ring of the strip's tools round the pointer */
.kw-hm-wscrim { position: fixed; inset: 0; z-index: 9000; cursor: default; touch-action: none; -webkit-user-select: none; user-select: none; }
.kw-hm-wheel { position: absolute; width: 208px; height: 208px; font-family: var(--kw-font); opacity: 0; transform: scale(.78); transition: opacity .12s ease-out, transform .12s ease-out; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }
.kw-hm-wscrim.is-open .kw-hm-wheel { opacity: 1; transform: scale(1); }
.kw-hm-wscrim.is-closing .kw-hm-wheel { opacity: 0; transform: scale(.86); transition-timing-function: ease-in; }
.kw-hm-wsvg { position: absolute; left: 0; top: 0; overflow: visible; }
.kw-hm-wring { fill: #120e0c; stroke: #0a0907; stroke-width: 2; opacity: .9; }
.kw-hm-wseg { fill: #2a2620; stroke: #4a4434; stroke-width: 1; transition: fill .08s; }
.kw-hm-wseg.is-cur { fill: #4a3e22; stroke: var(--kw-gelb); stroke-width: 1.5; }
.kw-hm-wseg.is-hov { fill: #6a5a30; stroke: #f0d890; }
.kw-hm-wseg.is-off { fill: #1e1b17; stroke: #34302a; }
.kw-hm-wseg.is-off.is-hov { fill: #2e2420; stroke: #8a4a3c; }
.kw-hm-wmidc { fill: #e8dec2; stroke: #8a7448; stroke-width: 2; }
.kw-hm-wico { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform .08s; }
.kw-hm-wico img { width: 26px; height: 26px; image-rendering: pixelated; }
.kw-hm-wico i { position: absolute; right: -7px; bottom: -6px; font: 600 9px/1 var(--kw-font); font-style: normal; color: #a89a78; }
.kw-hm-wico.is-hov { transform: scale(1.18); }
.kw-hm-wico.is-off img { opacity: .35; filter: grayscale(1); }
.kw-hm-wico.is-cur::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 2px; margin-left: -5px; background: var(--kw-gelb); }
.kw-hm-wmid { position: absolute; left: 50%; top: 50%; width: 78px; transform: translate(-50%, -50%); text-align: center; pointer-events: none; color: var(--kw-ink); line-height: 1.1; }
.kw-hm-wmid b { display: block; font-size: 12px; font-weight: 700; }
.kw-hm-wmid small { display: block; margin-top: 2px; font-size: 9.5px; color: #6a5a3a; }
.kw-hm-wmid.is-off small { color: #a0382c; }
@media (prefers-reduced-motion: reduce) { .kw-hm-wheel, .kw-hm-wseg, .kw-hm-wico { transition: none; } }
.kw-hm-subs { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 10px; }
/* the family's properties (home.js estate): one chip each, once there is more than the family house */
.kw-hm-estate { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0 8px; }
.kw-hm-prop { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.kw-hm-prop img { display: inline-block; width: 16px; height: 16px; flex: none; }
.kw-hm-prop small { opacity: .75; font-size: 11px; }
.kw-hm-sub img { width: 18px; height: 18px; vertical-align: -4px; margin-right: 3px; }
.kw-hm-sub .kw-badge { position: static; display: inline-block; margin-left: 4px; }
/* no house of one's own (home.js estateNone / homeless): what needs a house is off; where the founder sleeps */
.kw-hm-sub.is-off { opacity: .45; cursor: not-allowed; }
.kw-hm-homeless { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; margin: 0 0 10px; background: #221a17; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #4a3a32; }
.kw-hm-homeless > img { flex: none; opacity: .55; filter: grayscale(.6); }
.kw-hm-homeless > div { min-width: 0; }
.kw-hm-homeless b { display: block; color: var(--kw-gelb2); font-size: 15px; margin-bottom: 4px; }
.kw-hm-homeless p { margin: 0 0 8px; font-size: 14px; }
.kw-hm-homeless.is-slim { padding: 8px 10px; }
.kw-hm-homeless.is-slim b { font-size: 14px; }
.kw-hint.bad { color: #e8a080; }
.kw-hm-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; background: #241c1a; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #4a3a32; }
.kw-hm-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "b b"; gap: 2px 6px; align-items: center; font-size: 12.5px; color: var(--kw-dim); }
.kw-hm-meter span { grid-area: l; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.kw-hm-meter img { width: 16px; height: 16px; }
.kw-hm-meter em { grid-area: v; font-style: normal; color: #e8dcc0; font-variant-numeric: tabular-nums; }
.kw-hm-meter .kw-bar { grid-area: b; margin-top: 0; height: 8px; }
.kw-bar--hm i { background: linear-gradient(90deg, #6a5a3a, #a9c46f); transition: width .4s; }
.kw-panel.kw-panel-new .kw-bar i { transition: none !important; }
.kw-bar--hmc i { background: linear-gradient(90deg, #8a4a3a, #e0905a); transition: width .4s; }
.kw-bar--hmp i { background: linear-gradient(90deg, #7a5a2a, #f0cf7e); transition: width .4s; }
.kw-hm-fxline { min-height: 2.6em; }
.kw-hm-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px 8px; }
.kw-hm-room { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; background: #1e1816; border: 1px solid #0a0907; border-radius: 3px; }
.kw-hm-room.is-done { background: #1e2018; box-shadow: inset 0 1px 0 #3a4a32; }
.kw-hm-room.is-sel { box-shadow: inset 0 0 0 1px var(--kw-gelb); }
.kw-hm-rhead { display: flex; justify-content: space-between; gap: 6px; }
.kw-hm-rhead b { font-size: 14px; font-weight: 600; color: #e8dcc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hm-rhead em { font-style: normal; color: var(--kw-gelb); font-variant-numeric: tabular-nums; }
.kw-hm-room .kw-bar { margin-top: 0; }
.kw-hm-chips { display: flex; flex-wrap: wrap; gap: 3px; min-height: 22px; }
.kw-hm-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; font-size: 11.5px; color: #c8b8a0; background: #2a2420; border-radius: 9px; white-space: nowrap; }
.kw-hm-chip img { width: 14px; height: 14px; }
.kw-hm-chip.ok { color: #c8e0a0; background: #2a3420; }
.kw-hm-rbtns { display: flex; flex-wrap: wrap; gap: 3px; }
.kw-hm-rbtns .kw-btn { min-width: 34px; padding-left: 6px; padding-right: 6px; }
.kw-hm-rbtns .kw-btn img { width: 16px; height: 16px; vertical-align: -3px; }
.kw-hm-rbtns .kw-btn.is-on { box-shadow: inset 0 0 0 1px var(--kw-gelb); }
.kw-hm-skinds { margin-bottom: 6px; }
.kw-hm-styles, .kw-hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.kw-hm-sty, .kw-hm-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 6px 4px 5px; text-align: center; cursor: pointer; background: #25241c; border: 1px solid #0a0907; border-radius: 3px; }
.kw-hm-sty:hover, .kw-hm-tile:hover { box-shadow: inset 0 0 0 2px var(--kw-gelb); }
.kw-hm-sty.is-on { box-shadow: inset 0 0 0 2px #a9c46f; }
.kw-hm-sty.is-locked, .kw-hm-tile.is-locked { opacity: .55; }
.kw-hm-sty small, .kw-hm-tile small { display: block; width: 100%; font-size: 11.5px; line-height: 1.2; color: #c8b8a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hm-tile { touch-action: none; user-select: none; }
.kw-hm-tile b { display: block; width: 100%; height: 2.4em; overflow: hidden; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: #e8dcc0; }
.kw-hm-pic { image-rendering: pixelated; pointer-events: none; }
.kw-hm-meta i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; vertical-align: 0; }
.kw-hm-fx img { width: 12px; height: 12px; vertical-align: -2px; }
.kw-hm-src { font-variant-numeric: tabular-nums; }
.kw-hm-src.stock, .kw-hm-src.inv { color: #a9c46f !important; }
.kw-hm-src.buy { color: #f0cf7e !important; }
.kw-hm-src.cant { color: #e0584c !important; }
.kw-hm-src.lock { color: var(--kw-faint) !important; }
.kw-hm-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.kw-hm-filters .kw-input { flex: 1 1 140px; min-width: 0; }
.kw-hm-filters .kw-select { flex: 0 1 auto; min-width: 0; max-width: 46%; }
.kw-hm-now { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--kw-dim); white-space: nowrap; }
.kw-hm-inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px 8px; }
.kw-hm-invit { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 4px 6px; background: #1e1816; border: 1px solid #0a0907; border-radius: 3px; }
.kw-hm-invit span { min-width: 0; }
.kw-hm-invit b { display: block; font-size: 13px; color: #e8dcc0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hm-invit small { display: block; font-size: 11.5px; color: var(--kw-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hm-invit .kw-btn img { width: 16px; height: 16px; vertical-align: -3px; }
.kw-hm-dragpic { position: fixed; z-index: 9999; width: 48px; height: 48px; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.kw-hm-acts { display: flex; flex-wrap: wrap; gap: 6px; }
@container kwright (max-width: 560px) {
    .kw-hm-sum { grid-template-columns: minmax(0, 1fr); }
    .kw-hm-styles, .kw-hm-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}
@media (max-width: 600px) {
    .kw-hm-tb { width: 28px; height: 26px; }
    .kw-hm-tb img { width: 18px; height: 18px; }
    .kw-hm-where { max-width: 110px; font-size: 12px; }
    .kw-hm-msg { font-size: 11.5px; }
}
.kw-hm-fx img, .kw-hm-chip img, .kw-hm-sub img, .kw-hm-rbtns .kw-btn img, .kw-hm-invit .kw-btn img { display: inline-block; }
@media (max-width: 600px) { .kw-hm-where { display: none; } }
@media (max-width: 600px) { .kw-home-bar.is-carry .kw-hm-tools { display: none; } .kw-hm-msg:not(.bad) { display: none; } .kw-hm-msg { max-height: 2.6em; overflow: hidden; } }
/* the family house: the lights (ui.js homeLightsHtml: Home → Lights; the tool wheel's light switch) */
.kw-hm-ltbar { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 2px 0 8px; }
.kw-hm-ltbar .kw-btn img { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.kw-hm-ltbar .kw-chip[disabled] { opacity: .45; cursor: default; }
.kw-hm-ltrooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 6px 8px; }
.kw-hm-ltroom { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 6px 8px; background: #1a1614; border: 1px solid #0a0907; border-radius: 3px; }
.kw-hm-ltroom.is-lit { background: #241e16; box-shadow: inset 0 1px 0 #5a4a2a; }
.kw-hm-ltroom .kw-hl-list { margin: 0; }
.kw-hm-ltroom .kw-hm-rbtns .kw-btn img { margin-right: 2px; }
.kw-hm-ltrow { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 6px; background: #1e1816; border: 1px solid #0a0907; border-radius: 3px; }
.kw-hm-ltrow > img { flex: 0 0 auto; }
.kw-hm-ltrow.is-lit { background: #2a2418; box-shadow: inset 0 0 0 1px #6a5a2a; }
.kw-hm-ltrow.is-lit > img { filter: drop-shadow(0 0 4px rgba(255, 200, 110, .55)); }
.kw-hm-ltrow.is-off { opacity: .7; }
.kw-hm-ltrow .kw-hl-main small { white-space: normal; }
.kw-hm-ltrow > .kw-btn { flex: 0 0 auto; min-width: 30px; padding-left: 5px; padding-right: 5px; }
.kw-hm-ltrow > .kw-btn img { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.kw-bar--hmlt { height: 4px; margin-top: 2px; }
.kw-bar--hmlt i { background: linear-gradient(90deg, #8a4a1c, #f0b04a); transition: width .4s; }
/* a wall switch: a little rocker that tips up when on, with the verb under it */
.kw-hm-ltsw { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; padding: 4px 2px 3px; font: inherit; font-size: 10.5px; line-height: 1.1; color: #c8b8a0; background: #2a2420; border: 1px solid #0a0907; border-radius: 3px; cursor: pointer; }
.kw-hm-ltsw i { position: relative; display: block; width: 18px; height: 22px; background: #e8e0cc; border: 1px solid #8a7e64; border-radius: 3px; box-shadow: inset 0 -2px 0 #b8ae94; }
.kw-hm-ltsw i::after { content: ''; position: absolute; left: 5px; top: 11px; width: 6px; height: 8px; background: #6a6050; border-radius: 1px; transition: top .08s; }
.kw-hm-ltsw[aria-pressed="true"] { color: #ffe8a8; background: #3a3020; border-color: #8a7038; }
.kw-hm-ltsw[aria-pressed="true"] i { background: #fff4d8; box-shadow: inset 0 -2px 0 #d8c8a0, 0 0 8px rgba(255, 210, 120, .45); }
.kw-hm-ltsw[aria-pressed="true"] i::after { top: 2px; background: #c9a13b; }
.kw-hm-ltsw:hover:not([disabled]) { border-color: var(--kw-gelb); }
.kw-hm-ltsw[disabled] { opacity: .45; cursor: default; }
.kw-hm-ltsw span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-hm-wlight { position: absolute; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; max-width: 230px; padding: 5px 10px 5px 6px; font: 600 12px/1.1 var(--kw-font); color: #e8dcc0; white-space: nowrap; background: #1e1a14; border: 1px solid #5a4a2a; border-radius: 14px; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); cursor: pointer; opacity: 0; transition: opacity .12s ease-out; }
.kw-hm-wlight span { overflow: hidden; text-overflow: ellipsis; }
.kw-hm-wlight img { width: 18px; height: 18px; image-rendering: pixelated; }
.kw-hm-wlight.is-on { border-color: var(--kw-gelb); background: #2e2616; }
.kw-hm-wlight:hover { border-color: #f0d890; }
.kw-hm-wscrim.is-open .kw-hm-wlight { opacity: 1; }
.kw-hm-wscrim.is-closing .kw-hm-wlight { opacity: 0; }
@media (max-width: 600px) { .kw-hm-ltsw { width: 56px; } .kw-hm-ltrooms { grid-template-columns: minmax(0, 1fr); } }
/* the family house, phase B: the rooms' functions (ui.js hl*: Works → Home → Rooms and the fixtures' modals) */
.kw-hl-list { display: grid; gap: 5px; margin: 4px 0 8px; }
.kw-hl-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #1e1816; border: 1px solid #0a0907; border-radius: 3px; min-width: 0; }
.kw-hl-row > img { flex: 0 0 auto; }
.kw-hl-row.is-off { opacity: 0.62; }
.kw-hl-row.is-on { box-shadow: inset 0 0 0 1px var(--kw-gelb); background: #22201a; }
.kw-hl-row > .kw-btn { flex: 0 0 auto; white-space: nowrap; }
.kw-hl-row .kw-btn img, .kw-hl-status .kw-btn img { display: inline-block; vertical-align: -4px; margin-right: 3px; }
.kw-hl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kw-hl-main b { color: #e8dcc0; font-weight: 600; }
.kw-hl-main small { display: block; color: var(--kw-dim); font-size: 12px; line-height: 1.35; }
.kw-hl-main small.kw-hl-fx { color: var(--kw-gelb); }
.kw-hl-main small.kw-hl-need { color: #d89070; }
.kw-hl-ings { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0; }
.kw-hl-ing { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 2px; font-size: 11.5px; color: #c8b8a0; background: #2a2420; border-radius: 9px; }
.kw-hl-ing.miss { color: #a08878; background: #2a1c18; opacity: 0.8; }
.kw-hl-ing img { width: 18px; height: 18px; }
.kw-hl-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 4px 0 8px; padding: 6px 8px; background: #20231a; border-radius: 3px; }
.kw-hl-status.bad { background: #2a1c18; }
.kw-hl-status > span { flex: 1 1 200px; min-width: 0; }
.kw-hl-now { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 10px; }
.kw-hl-now > span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: 12px; color: #d8ccb0; background: #2a2420; border-radius: 10px; }
.kw-hl-now img { width: 18px; height: 18px; display: inline-block; }
.kw-hl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.kw-hl-piece { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; background: linear-gradient(#26302e, #1a1e1c); border: 1px solid #0a0907; border-radius: 3px; text-align: center; }
.kw-hl-piece small { font-size: 11px; color: #d8ccb0; line-height: 1.2; overflow-wrap: anywhere; }
.kw-hl-piece.ret { opacity: 0.7; }
.kw-hl-awards { display: flex; flex-wrap: wrap; gap: 3px 5px; max-height: 220px; overflow-y: auto; margin: 4px 0; }
.kw-hl-aw { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 3px; font-size: 11.5px; color: #e8dcc0; background: #2e2a1e; border-radius: 9px; }
.kw-hl-sets { display: grid; gap: 4px; margin-top: 8px; }
.kw-hl-set { background: #1e1816; border: 1px solid #0a0907; border-radius: 3px; padding: 4px 8px; }
.kw-hl-set summary { cursor: pointer; list-style-position: inside; }
.kw-hl-chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.kw-hl-chk small { color: var(--kw-dim); }
.kw-hl-tracks { list-style: none; margin: 4px 0 2px; padding: 0; max-height: 260px; overflow-y: auto; }
.kw-hl-tracks li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 4px; font-size: 12.5px; border-radius: 2px; }
.kw-hl-tracks li.is-now { background: #2e2a1e; color: var(--kw-gelb2); }
.kw-hl-tracks .kw-icon-btn { width: 24px; height: 24px; padding: 0; flex: 0 0 auto; }
.kw-hl-tag { display: inline-block; padding: 0 5px; border-radius: 7px; font-size: 10.5px; background: #3a3428; color: #d8ccb0; }
.kw-hl-tag.bad { background: #5a2420; color: #ffd8d0; }
.kw-hl-tag.ok { background: #2e3a24; color: #e0f0c8; }
.kw-hl-swatch { flex: 0 0 auto; width: 28px; height: 40px; border-radius: 3px; border: 1px solid #0a0907; }
.kw-hl-modal .kw-chips { margin: 4px 0; }
@media (max-width: 600px) {
    .kw-hl-row { flex-wrap: wrap; }
    .kw-hl-row > .kw-btn { margin-left: auto; }
    .kw-hl-main { flex-basis: calc(100% - 50px); }
}

/* ---------- settings: one grid for every row — labels left, controls in one right-hand column of equal width ---------- */
.kw-settings { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.kw-settings .kw-set-group { gap: 10px; padding: 12px 14px 14px; background: rgba(0, 0, 0, .18); border: 1px solid #2e2c22; border-radius: 6px; }
.kw-settings .kw-section-label { margin: 0; padding-bottom: 7px; border-bottom: 1px solid #2e2c22; }
.kw-settings .kw-set-row, .kw-settings .kw-sliders label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 52%); align-items: center; gap: 12px; color: var(--kw-text); font-size: 15px; }
.kw-settings .kw-set-row { min-height: 34px; }
.kw-settings .kw-set-row .kw-select { width: 100%; }
.kw-settings .kw-sliders { gap: 10px; }
.kw-settings .kw-sliders label { min-height: 26px; }
.kw-settings .kw-sliders input[type=range] { width: 100%; margin: 0; }
.kw-settings .kw-check { display: flex; align-items: flex-start; gap: 10px; color: var(--kw-text); font-size: 15px; line-height: 1.35; }
.kw-settings .kw-check input { flex: none; margin: 2px 0 0; }
.kw-settings .kw-music-row { margin-top: 0; gap: 8px 12px; }
.kw-settings .kw-music-row .kw-check { flex: 1 1 200px; }
.kw-settings .kw-music-now { flex: 0 1 auto; min-width: 0; }
.kw-settings .kw-hint { margin-top: 0; }
.kw-settings + .kw-btn, .kw-settings + * { margin-top: 18px; }

/* ---------- the slim rail (ui.js initRail): the right column folds into a strip of icons and the works view grows ----------
   #kw-app.kw-railed = folded; .kw-fly-open = the drawer with the page is open; data-front = where the front report goes
   (side: beside the picture, below: under it, tog: behind the button on the view tabs' strip; .kw-front-open shows it).
   ui.js sets --kw-cw (the picture's frame width at 16:9), --kw-front-b/-r on .kw-left, --kw-adv-b and --kw-scene-r on body. */
.kw-main { transition: grid-template-columns .2s ease; }
.kw-fly { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.kw-fly > .kw-panel { flex: 1 1 auto; min-height: 0; }
.kw-fly-head { display: none; }
/* the switch: a small tab hanging off the right column's left edge into the 12 px seam beside the works view (out of the
   section tabs' row, so nothing shifts); it stays there folded or not. Its ::before widens the hit area over the seam. */
.kw-right { position: relative; }
.kw-rail-tg {
    position: absolute; top: 8px; right: calc(100% + 2px); display: grid; place-items: center; width: 12px; height: 44px; padding: 0;
    cursor: pointer; color: #c2b68e; font-size: 12px; line-height: 1; background: #24231b; border: 1px solid #0a0907; border-right: 0;
    border-radius: 4px 0 0 4px; box-shadow: inset 1px 1px 0 #3b3829, -2px 2px 6px rgba(0, 0, 0, .45);
}
.kw-rail-tg::before { content: ''; position: absolute; inset: -6px -2px -6px -3px; }
.kw-rail-tg i { display: block; -webkit-text-stroke: .6px currentColor; }
.kw-rail-tg:hover { color: var(--kw-gelb2); background: #2b2a21; }
.kw-rail-tg[aria-pressed='true'] { color: var(--kw-gelb); }
.kw-rail-tg:focus-visible { outline: 2px solid var(--kw-gelb); outline-offset: 1px; }
.kw-front-tg { display: none; }
@media (min-width: 901px) {
    #kw-app.kw-railed .kw-main { grid-template-columns: minmax(430px, calc(100% - 76px)) minmax(0, 1fr); }
    /* the rail */
    #kw-app.kw-railed .kw-right { position: relative; z-index: 12; grid-template-rows: minmax(0, 1fr); }
    #kw-app.kw-railed .kw-nav { display: flex; flex-direction: column; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; border-bottom: 0; border-radius: 3px; animation: kw-rail-in .2s ease-out; }
    #kw-app.kw-railed .kw-nav::-webkit-scrollbar { display: none; }
    #kw-app.kw-railed .kw-groups { flex: none; flex-direction: column; gap: 5px; padding: 6px 5px 8px; }
    #kw-app.kw-railed .kw-groups > .kw-group { flex: none; width: 100%; min-height: 46px; padding: 0; justify-content: center; border-bottom: 1px solid #0a0907; border-radius: 5px; }
    #kw-app.kw-railed .kw-group > img, #kw-app.kw-railed .kw-group > svg { display: block !important; width: 30px; height: 30px; }
    #kw-app.kw-railed .kw-group > span:not(.kw-badge) { display: none !important; }
    #kw-app.kw-railed .kw-group .kw-badge { position: absolute; top: -4px; right: -4px; z-index: 1; visibility: visible; }
    #kw-app.kw-railed .kw-group .kw-badge:empty { display: none; }
    #kw-app.kw-railed .kw-nav .kw-tabs { flex: none; flex-direction: column; flex-wrap: nowrap; gap: 5px; padding: 8px 5px; border-top: 2px solid #0a0907; overflow: visible; }
    #kw-app.kw-railed .kw-nav .kw-tab { justify-content: center; min-height: 40px; padding: 4px 0; border-radius: 4px; }
    #kw-app.kw-railed .kw-nav .kw-tab img { width: 26px; height: 26px; }
    #kw-app.kw-railed .kw-nav .kw-tab > span:not(.kw-badge) { display: none !important; }
    #kw-app.kw-railed .kw-nav .kw-tab .kw-badge { top: -5px; right: -4px; min-width: 16px; height: 16px; line-height: 16px; font-size: 11px; padding: 0 4px; margin: 0; }
    /* the drawer: the page over the right edge of the works view */
    #kw-app.kw-railed .kw-fly {
        display: none; position: absolute; top: -2px; bottom: -2px; right: calc(100% + 6px); width: clamp(500px, 46vw, 820px); max-width: calc(100vw - 110px);
        container: kwright / inline-size; background: var(--kw-panel); border: 2px solid #0a0907; border-radius: 4px;
        box-shadow: inset 0 0 0 1px #3b3829, -12px 0 32px rgba(0, 0, 0, .6);
    }
    #kw-app.kw-railed.kw-fly-open .kw-fly { display: flex; animation: kw-fly-in .18s ease-out; }
    #kw-app.kw-railed .kw-fly.is-ghost { opacity: .16; pointer-events: none; transition: opacity .12s; }
    #kw-app.kw-railed .kw-fly-head { display: flex; flex: none; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; background: #17160f; border-bottom: 2px solid #0a0907; }
    .kw-fly-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-family: var(--kw-stencil); font-size: 18px; letter-spacing: .03em; color: var(--kw-paper); white-space: nowrap; }
    .kw-fly-title img { width: 24px; height: 24px; }
    .kw-fly-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #kw-app.kw-railed .kw-fly-head .kw-icon-btn { width: 32px; height: 32px; font-size: 15px; }
    /* the works view as large as the room allows */
    #kw-app.kw-railed .kw-left { position: relative; display: grid; grid-template-columns: var(--kw-cw, 100%) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 8px 0; overflow: hidden; }
    #kw-app.kw-railed .kw-left > .kw-scene-frame { grid-column: 1; grid-row: 1; }
    #kw-app.kw-railed:not([data-front='side']) .kw-left { grid-template-columns: var(--kw-cw, 100%); justify-content: center; } /* no front column: the picture in the middle */
    #kw-app.kw-railed .kw-hall-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    #kw-app.kw-railed .kw-hall-tabs > * { flex: none; }
    #kw-app.kw-railed[data-front='tog'] .kw-hall-tabs { padding-right: 150px; }
    #kw-app.kw-railed[data-front='tog'] .kw-front-tg {
        position: absolute; right: 5px; bottom: 4px; z-index: 3; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; cursor: pointer;
        font-family: var(--kw-stencil); font-size: 15px; color: var(--kw-text); background: rgba(20, 19, 14, .9); border: 1px solid #0a0907; box-shadow: inset 0 0 0 1px #5a5640; border-radius: 2px;
    }
    #kw-app.kw-railed .kw-front-tg:hover { color: var(--kw-gelb2); }
    #kw-app.kw-railed .kw-front-tg[aria-pressed='true'] { background: var(--kw-gelb); color: var(--kw-ink); box-shadow: inset 0 0 0 1px #fff3; }
    /* the PRESS row as a slim strip */
    #kw-app.kw-railed .kw-left > .kw-press-row { grid-column: 1; grid-row: 2; gap: 10px; }
    #kw-app.kw-railed .kw-press { width: 150px; height: 54px; }
    #kw-app.kw-railed .kw-press-plate { grid-template-columns: 36px 1fr; gap: 6px; padding: 0 8px 3px 6px; box-shadow: inset 0 2px 0 #ea6a5d, inset 0 -4px 0 #5e1510, 0 4px 0 #0a0907, 0 7px 12px rgba(0, 0, 0, .5); }
    #kw-app.kw-railed .kw-press-plate img { width: 36px; height: 36px; }
    #kw-app.kw-railed .kw-press-label { font-size: 20px; }
    #kw-app.kw-railed .kw-press-label small { font-size: 11.5px; letter-spacing: .03em; }
    #kw-app.kw-railed .kw-press:active .kw-press-plate, #kw-app.kw-railed .kw-press.is-down .kw-press-plate { transform: translateY(3px); box-shadow: inset 0 2px 0 #ea6a5d, inset 0 -2px 0 #5e1510, 0 1px 0 #0a0907, 0 3px 6px rgba(0, 0, 0, .5); }
    #kw-app.kw-railed .kw-press.is-held .kw-press-plate { transform: translateY(3px); box-shadow: inset 0 2px 0 #ea6a5d, inset 0 -2px 0 #5e1510, 0 1px 0 #0a0907, 0 3px 6px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 214, 140, .28); }
    #kw-app.kw-railed .kw-focus-info { height: 60px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); gap: 2px 12px; align-content: center; font-size: 13.5px; line-height: 1.25; }
    #kw-app.kw-railed .kw-focus-info [data-f="ftitle"] { grid-column: 1; grid-row: 1; min-width: 0; }
    #kw-app.kw-railed .kw-focus-info strong { font-size: 16px; }
    #kw-app.kw-railed .kw-focus-info [data-f="fmeta"] { grid-column: 1; grid-row: 2; height: 2.5em; }
    #kw-app.kw-railed .kw-focus-tools { grid-column: 2; grid-row: 1; justify-content: flex-end; max-width: 420px; height: 28px; margin-top: 0; }
    #kw-app.kw-railed .kw-focus-info .kw-effects { grid-column: 2; grid-row: 2; justify-content: flex-end; max-width: 420px; margin-top: 0; }
    /* the front report: beside, below, or behind its button */
    #kw-app.kw-railed .kw-left > .kw-front { display: none; min-height: 0; }
    #kw-app.kw-railed[data-front='side'] .kw-left > .kw-front { display: block; grid-column: 2; grid-row: 1 / 4; margin-left: 12px; }
    #kw-app.kw-railed[data-front='below'] .kw-left > .kw-front { display: block; grid-column: 1; grid-row: 3; }
    #kw-app.kw-railed[data-front='tog'].kw-front-open .kw-left > .kw-front {
        display: block; position: absolute; z-index: 6; right: var(--kw-front-r, 14px); bottom: var(--kw-front-b, 48px); width: min(540px, 72%);
        max-height: calc(100% - var(--kw-front-b, 48px) - 10px); box-shadow: inset 0 0 0 1px #3b3829, 0 10px 32px rgba(0, 0, 0, .65); animation: kw-fly-up .16s ease-out;
    }
    /* the advisors' corner over the picture's lower left (it would cover the PRESS strip otherwise) */
    body.kw-rail-on .kw-adv, body.kw-simple.kw-rail-on.kw-no-ticker .kw-adv { left: var(--kw-adv-l, 12px); bottom: var(--kw-adv-b, 40px); max-width: calc(100vw - var(--kw-adv-l, 12px) - 12px); --adv-lw: var(--kw-scene-r, 740px) !important; }
}
@media (min-width: 901px) and (max-width: 1180px) {
    #kw-app.kw-railed .kw-main { grid-template-columns: minmax(360px, calc(100% - 76px)) minmax(0, 1fr); }
}
@keyframes kw-rail-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kw-fly-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes kw-fly-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* stacked layout (phones, narrow windows): the switch folds the page under the works view down to its tabs */
@media (max-width: 900px) {
    #kw-app.kw-railed .kw-right { min-height: 0; }
    #kw-app.kw-railed .kw-fly { display: none; }
    /* stacked: the switch hangs from the column's top edge into the seam above it, at the right */
    .kw-rail-tg { top: auto; right: 10px; bottom: calc(100% + 2px); width: 52px; height: 12px; border: 1px solid #0a0907; border-bottom: 0; border-radius: 4px 4px 0 0; box-shadow: inset 0 1px 0 #3b3829, 0 -2px 6px rgba(0, 0, 0, .45); }
    .kw-rail-tg::before { inset: -6px -6px -3px; }
    .kw-rail-tg i { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .kw-main { transition: none; } }

/* ---------- the property market: Home → Estate agent (realty-ui.js) ---------- */
.kw-rl-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; background: #241f1a; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #4a3e32; }
.kw-rl-head > img { width: 44px; height: 44px; }
.kw-rl-office { min-width: 0; }
.kw-rl-office b { display: block; font-size: 16px; color: var(--kw-paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-rl-office small { display: block; color: var(--kw-dim); font-size: 12.5px; line-height: 1.25; }
.kw-rl-idx { text-align: right; line-height: 1.1; }
.kw-rl-idx small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--kw-faint); }
.kw-rl-idx b { font-family: var(--kw-mono); font-weight: 400; font-size: 22px; color: var(--kw-gelb2); font-variant-numeric: tabular-nums; }
.kw-rl-idx i { font-style: normal; font-size: 14px; color: var(--kw-dim); }
.kw-rl-idx i.up { color: var(--kw-gruen); }
.kw-rl-idx i.down { color: var(--kw-rot2); }
.kw-rl-times { margin: 6px 0 8px; }
.kw-rl-views { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 8px; }
.kw-rl-views img { width: 18px; height: 18px; vertical-align: -4px; margin-right: 3px; }
.kw-rl-search { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.kw-rl-q { flex: 1 1 220px; min-width: 0; }
.kw-rl-search .kw-chip img { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.kw-rl-nf { display: inline-block; min-width: 18px; padding: 0 4px; margin-left: 3px; border-radius: 9px; background: var(--kw-rot); color: #fff; font-size: 11.5px; text-align: center; }
.kw-rl-filters { display: flex; flex-direction: column; gap: 6px; padding: 8px; margin-bottom: 8px; background: #1b1a15; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #2e2c22; }
.kw-rl-filters[hidden] { display: none; }
.kw-rl-frow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kw-rl-frow .kw-select { flex: 1 1 140px; min-width: 0; }
.kw-rl-flab { display: inline-flex; align-items: center; gap: 5px; color: var(--kw-dim); font-size: 14px; }
.kw-rl-price { width: 110px; }
.kw-rl-flabel { margin-top: 2px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--kw-faint); }
.kw-rl-fchips { display: flex; gap: 4px; flex-wrap: wrap; }
.kw-rl-fchip { font-size: 13px; }
.kw-rl-fchip img, .kw-rl-frow .kw-btn img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.kw-rl-fend { justify-content: flex-end; }
.kw-rl-count { margin: 0 0 6px; min-height: 1.3em; }
.kw-rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 8px; }
.kw-rl-card { display: flex; flex-direction: column; min-width: 0; cursor: pointer; background: #221f19; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3a2d; overflow: hidden; }
.kw-rl-card:hover, .kw-rl-card:focus-visible { box-shadow: inset 0 0 0 2px var(--kw-gelb); outline: none; }
.kw-rl-card.is-watch { box-shadow: inset 0 0 0 1px #b8913f; }
.kw-rl-pic { position: relative; flex: none; height: 128px; background: linear-gradient(#5a7690, #9ab0bc 60%, #4a5a38 60%); overflow: hidden; }
.kw-rl-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0; transition: opacity .3s; }
.kw-rl-pic .kw-rl-img { position: absolute; inset: 0; }
.kw-rl-img.is-in { opacity: 1; }
.kw-rl-fam { display: grid; place-items: center; opacity: 1; background: #2a2620; }
.kw-rl-tags { position: absolute; left: 4px; top: 4px; display: flex; gap: 3px; flex-wrap: wrap; }
.kw-rl-tags i, .kw-rl-otags i { padding: 1px 6px; font-style: normal; font-size: 11.5px; font-weight: 600; border-radius: 3px; color: var(--kw-ink); background: var(--kw-paper); box-shadow: 0 1px 0 #0008; }
.kw-rl-tags i.new { background: #a9c46f; }
.kw-rl-tags i.cut { background: #f0cf7e; }
.kw-rl-tags i.seize { background: #e0584c; color: #fff; }
.kw-rl-tags i.lease { background: #9ab8d0; }
.kw-rl-star { position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; cursor: pointer; background: #000a; border: 1px solid #0006; border-radius: 50%; }
.kw-rl-star img { width: 18px; height: 18px; filter: grayscale(1) brightness(.7); }
.kw-rl-star[aria-pressed='true'] img { filter: none; }
.kw-rl-body { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px 7px; min-width: 0; }
.kw-rl-name { font-size: 15px; color: #f0e6cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-rl-addr, .kw-rl-arch, .kw-rl-facts { display: block; font-size: 12.5px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-rl-arch { color: #c8b890; }
.kw-rl-mods { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; min-height: 20px; font-size: 12px; color: var(--kw-faint); }
.kw-rl-mods small { flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-rl-an { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; color: #d8cca8; font-variant-numeric: tabular-nums; }
.kw-rl-an img { width: 16px; height: 16px; }
.kw-rl-an.none { opacity: .35; }
.kw-rl-foot { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.kw-rl-cond { padding: 0 6px; font-size: 11.5px; border-radius: 9px; background: #2e2a22; color: #d8cca8; white-space: nowrap; }
.kw-rl-cond.c-pristine, .kw-rl-cond.c-kept { background: #2a3420; color: #c8e0a0; }
.kw-rl-cond.c-neglected { background: #3a2e1e; color: #e0c080; }
.kw-rl-cond.c-derelict, .kw-rl-cond.c-ruin { background: #3a2220; color: #f0a090; }
.kw-rl-left { font-size: 12px; color: var(--kw-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kw-rl-left.soon { color: var(--kw-rot2); }
.kw-rl-price { margin-left: auto; font-family: var(--kw-mono); font-weight: 400; font-size: 19px; color: var(--kw-gelb2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kw-rl-price s { margin-right: 5px; font-size: 14px; color: var(--kw-faint); }
.kw-rl-price small { font-family: var(--kw-font); font-size: 11px; color: var(--kw-faint); }
.kw-rl-card.cant .kw-rl-price { color: #c89a8a; }
/* the details */
.kw-rl-modal { width: min(1040px, 100%); }
.kw-rl-hero { position: relative; margin: 0 0 8px; background: linear-gradient(#5a7690, #9ab0bc 60%, #4a5a38 60%); border: 1px solid #0a0907; border-radius: 3px; overflow: hidden; }
.kw-rl-big { display: block; width: 100%; aspect-ratio: 1000 / 400; height: auto; object-fit: cover; opacity: 0; transition: opacity .3s; }
.kw-rl-big.is-in { opacity: 1; }
.kw-rl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; align-items: start; }
.kw-rl-text { margin: 0 0 8px; }
.kw-rl-facts2 { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 0; font-size: 14px; }
.kw-rl-facts2 dt { color: var(--kw-faint); }
.kw-rl-facts2 dd { margin: 0; color: #e0d6bc; }
.kw-rl-floors { display: flex; flex-direction: column; gap: 4px; }
.kw-rl-floor { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.kw-rl-floor > b { flex: 0 0 96px; font-size: 12.5px; font-weight: 600; color: var(--kw-dim); }
.kw-rl-mlist { margin: 0; padding-left: 18px; font-size: 14px; color: #d5ccb1; }
.kw-rl-animals { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.kw-rl-animals .kw-rl-an img { width: 22px; height: 22px; }
.kw-rl-furn { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.kw-rl-furn img { background: #15140f; border-radius: 3px; }
.kw-rl-sect { height: 300px; background: #15140f; border: 1px solid #0a0907; border-radius: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kw-rl-sect .kw-hu-note { margin: 10px; }
.kw-rl-sectc { display: block; max-width: 100%; max-height: 100%; }
.kw-rl-det .kw-section-label { display: flex; align-items: center; gap: 6px; }
.kw-rl-det .kw-section-label img { width: 18px; height: 18px; flex: none; }
.kw-rl-search .kw-chip { display: inline-flex; align-items: center; }
.kw-rl-side { position: sticky; top: 0; }
.kw-rl-pricebox { display: flex; flex-direction: column; gap: 2px; padding: 10px; background: #2a2620; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #4a4232; }
.kw-rl-pricebox > b { font-family: var(--kw-mono); font-weight: 400; font-size: 28px; color: var(--kw-gelb2); line-height: 1; }
.kw-rl-pricebox small { color: var(--kw-dim); font-size: 13px; }
.kw-rl-pricebox small b { color: #e8dcc0; }
.kw-rl-was { text-decoration: line-through; }
.kw-rl-have.bad { color: var(--kw-rot2); }
.kw-rl-acts { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.kw-rl-acts .kw-btn { flex: 1 1 auto; }
.kw-rl-acts .kw-btn img, .kw-rl-obtns .kw-btn img { width: 16px; height: 16px; }
.kw-btn.is-on { box-shadow: inset 0 0 0 1px var(--kw-gelb); }
.kw-rl-conf { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: start; }
.kw-rl-conf > .kw-rl-img { height: 100px; border-radius: 3px; opacity: 1; }
.kw-rl-conf > .kw-rl-port { width: 64px; height: 64px; }
.kw-rl-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.kw-rl-tab td { padding: 3px 4px; border-bottom: 1px solid #34322a; color: #d5ccb1; }
.kw-rl-tab td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kw-rl-tab tr.tot td { color: var(--kw-gelb2); font-weight: 700; }
/* the family's properties */
.kw-rl-mine { display: flex; flex-direction: column; gap: 8px; }
.kw-rl-own { background: #221f19; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3a2d; overflow: hidden; }
.kw-rl-own.is-sale { box-shadow: inset 0 0 0 1px #b8913f; }
.kw-rl-ohead { display: grid; grid-template-columns: 170px minmax(0, 1fr); }
.kw-rl-ohead .kw-rl-pic { height: auto; min-height: 112px; }
.kw-rl-obody { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; min-width: 0; }
.kw-rl-otags { display: flex; gap: 3px; flex-wrap: wrap; }
.kw-rl-otags i.home { background: #a9c46f; }
.kw-rl-otags i.pets { background: #e0b090; }
.kw-rl-otags i.sale { background: #f0cf7e; }
.kw-rl-otags i.view { background: #9ab8d0; }
.kw-rl-otags i.lease { background: #c8b8e0; }
.kw-rl-ofacts { font-size: 12.5px; color: var(--kw-dim); }
.kw-rl-ofacts img { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.kw-rl-ledger td img, .kw-rl-fchip img, .kw-rl-views img { display: inline-block; }
.kw-rl-ofacts b { color: var(--kw-gelb2); }
.kw-rl-ofacts .bad { color: var(--kw-rot2); }
.kw-rl-obtns { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.kw-rl-offer { padding: 8px; border-top: 1px solid #0a0907; background: #1b1915; }
.kw-rl-orow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: center; }
.kw-rl-orow small { display: block; color: var(--kw-dim); font-size: 12.5px; }
.kw-rl-orow > div > b { color: var(--kw-gelb2); }
.kw-rl-wait { margin: 6px 0 0; display: flex; align-items: center; gap: 6px; }
.kw-rl-buyers { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.kw-rl-buyer { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 6px; background: #262219; border: 1px solid #0a0907; border-radius: 4px; }
.kw-rl-buyer.wait { background: #22201a; }
.kw-rl-port { image-rendering: pixelated; border-radius: 3px; border: 1px solid #0a0907; background: #2a2620; }
.kw-rl-bmain { min-width: 0; }
.kw-rl-bmain b { display: block; font-size: 14.5px; color: #f0e6cc; }
.kw-rl-bmain small { display: block; font-size: 12.5px; color: var(--kw-dim); }
.kw-rl-bmain q { display: block; margin-top: 2px; font-size: 13px; font-style: italic; color: #d8cca8; }
.kw-rl-buyer.m-offended q, .kw-rl-say.m-offended, .kw-rl-say.m-left { color: var(--kw-rot2); }
.kw-rl-buyer.m-keen q, .kw-rl-say.m-keen { color: #c8e0a0; }
.kw-rl-buyer.m-torn q, .kw-rl-say.m-torn { color: #f0cf7e; }
.kw-rl-conds { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: #d5ccb1; }
.kw-rl-conds li { display: flex; gap: 5px; align-items: flex-start; }
.kw-rl-conds li img { width: 16px; height: 16px; flex: none; }
.kw-rl-conds li.ok { color: #c8e0a0; }
.kw-rl-conds small { color: var(--kw-faint); }
.kw-rl-bside { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 150px; }
.kw-rl-bside em { font-style: normal; font-family: var(--kw-mono); font-size: 20px; color: var(--kw-gelb2); white-space: nowrap; }
.kw-rl-bside small { font-size: 11.5px; color: var(--kw-faint); }
.kw-rl-pat, .kw-rl-patb { width: 100%; height: 5px; margin: 2px 0 3px; }
.kw-rl-pat i, .kw-rl-patb i { background: linear-gradient(90deg, #8a3a2a, #d4b064); transition: width .5s linear; }
.kw-rl-bside .kw-btn-group { display: flex; gap: 3px; }
.kw-rl-bside .kw-btn img { width: 14px; height: 14px; }
/* putting it on the market */
.kw-rl-sellm { width: min(720px, 100%); }
.kw-rl-val { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 6px; }
.kw-rl-val b { display: block; font-family: var(--kw-mono); font-weight: 400; font-size: 26px; color: var(--kw-gelb2); line-height: 1; }
.kw-rl-val small { display: block; color: var(--kw-dim); font-size: 13px; }
.kw-rl-break td:first-child { font-size: 13px; color: var(--kw-dim); }
.kw-rl-askrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.kw-rl-slider { flex: 1 1 220px; min-width: 0; accent-color: var(--kw-gelb); }
.kw-rl-askin { width: 150px; font-family: var(--kw-mono); font-size: 19px; text-align: right; }
.kw-rl-cur { color: var(--kw-dim); }
.kw-rl-quick { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0 6px; }
.kw-rl-gbig { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 8px; background: #1b1915; border: 1px solid #0a0907; border-radius: 4px; min-height: 108px; }
.kw-rl-gbig b { display: block; font-family: var(--kw-mono); font-weight: 400; font-size: 34px; line-height: 1; color: var(--kw-paper); font-variant-numeric: tabular-nums; }
.kw-rl-gbig span { display: block; font-size: 16px; color: var(--kw-gelb2); }
.kw-rl-gbig small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--kw-dim); }
.kw-rl-gauge { display: block; max-width: 100%; height: auto; }
.kw-rl-autoc { margin-top: 8px; font-size: 14px; }
/* haggling */
.kw-rl-cnt { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 8px; }
.kw-rl-say { font-style: italic; }
.kw-rl-log { margin: 4px 0 0; padding-left: 16px; font-size: 13px; color: var(--kw-dim); max-height: 7.5em; overflow: auto; }
/* the ledger */
.kw-rl-ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kw-rl-ledger th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--kw-faint); padding: 2px 4px; }
.kw-rl-ledger td { padding: 3px 4px; border-top: 1px solid #2e2c22; color: #d5ccb1; vertical-align: top; }
.kw-rl-ledger td img { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
.kw-rl-ledger td small { display: block; color: var(--kw-faint); font-size: 12px; }
.kw-rl-ledger td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kw-rl-ledger td.in { color: #c8e0a0; }
.kw-rl-ledger td.out { color: #f0a090; }
.kw-paper-notice.estate { border-left-color: #b8913f; }
@media (max-width: 760px) {
    .kw-rl-cols { grid-template-columns: minmax(0, 1fr); }
    .kw-rl-side { position: static; }
    .kw-rl-conf { grid-template-columns: minmax(0, 1fr); }
    .kw-rl-gbig { grid-template-columns: 140px minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .kw-rl-head { grid-template-columns: 36px minmax(0, 1fr) auto; }
    .kw-rl-head > img { width: 36px; height: 36px; }
    .kw-rl-ohead { grid-template-columns: minmax(0, 1fr); }
    .kw-rl-ohead .kw-rl-pic { height: 110px; }
    .kw-rl-buyer { grid-template-columns: 40px minmax(0, 1fr); }
    .kw-rl-buyer .kw-rl-port { width: 40px; height: 40px; }
    .kw-rl-bside { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; min-width: 0; }
    .kw-rl-bside .kw-rl-pat { flex: 1 1 100%; order: 3; }
    .kw-rl-orow { grid-template-columns: 90px minmax(0, 1fr); }
    .kw-rl-gbig { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .kw-rl-floor > b { flex-basis: 100%; }
}

/* ---------------- houses phase 2b: Home → Plan, Home → Tenants (rent-ui.js) ---------------- */
.kw-rl-otags i.let { background: #9fd0a0; }
.kw-rl-otags i.tolet { background: #e8c890; }
.kw-rt-svc { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.kw-rt-units { display: flex; flex-direction: column; gap: 6px; }
.kw-rt-unit { background: #221f19; border: 1px solid #0a0907; border-left: 4px solid #c8b890; border-radius: 4px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.kw-rt-uhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.kw-rt-uhead small { color: var(--kw-dim); }
.kw-rt-uchk { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.kw-rt-uchk small { flex-basis: 100%; color: var(--kw-dim); font-size: 12.5px; }
.kw-rt-tick { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; color: #e09080; white-space: nowrap; }
.kw-rt-tick.ok { color: #a9c46f; }
.kw-rt-tick.opt { color: var(--kw-dim); }
.kw-rt-tick img { width: 14px; height: 14px; }
.kw-rt-free { color: var(--kw-dim); font-size: 12.5px; }
.kw-rt-st { font-style: normal; font-size: 12px; padding: 1px 6px; border-radius: 3px; color: #1a1712; background: #e8c890; }
.kw-rt-st.lease { background: #9fd0a0; }
.kw-rt-floor { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.kw-rt-floor > b { color: var(--kw-gelb2); font-size: 14px; }
.kw-rt-room { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 6px; background: #1d1a15; border-left: 4px solid transparent; border-radius: 3px; }
.kw-rt-rname { flex: 0 1 120px; }
.kw-rt-ticks { flex: 1 1 160px; }
.kw-rt-room.is-let { opacity: 0.75; }
.kw-rt-rname { background: none; border: 0; color: #e8dcc0; text-align: left; font: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.kw-rt-rname:hover { color: var(--kw-gelb2); }
.kw-rt-dz, .kw-rt-unitsel { min-width: 0; max-width: 100%; }
.kw-rt-dzfix { color: var(--kw-dim); font-size: 13px; }
.kw-rt-ticks { display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.kw-rt-water .kw-btn img, .kw-rt-water .kw-rt-tick img { width: 14px; height: 14px; }
.kw-rt-sum { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 6px 0; }
.kw-rt-sum span { display: inline-flex; align-items: center; gap: 5px; }
.kw-rt-sum .bad, .kw-rt-let .bad, .kw-rt-letm .bad { color: #e0806c; }
.kw-rt-lets { display: flex; flex-direction: column; gap: 8px; }
.kw-rt-let { background: #221f19; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #3f3a2d; padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; }
.kw-rt-let.is-ad { box-shadow: inset 0 0 0 1px #b8913f; }
.kw-rt-lhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.kw-rt-lhead small { color: var(--kw-dim); flex: 1 1 160px; min-width: 0; }
.kw-rt-adrow { display: flex; flex-direction: column; gap: 3px; }
.kw-rt-adrow span { display: inline-flex; align-items: center; gap: 5px; }
.kw-rt-adrow small { color: var(--kw-dim); }
.kw-rt-lbody { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; }
.kw-rt-lmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kw-rt-lmain small { color: var(--kw-dim); font-size: 12.5px; }
.kw-rt-lmain small img { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.kw-rt-fam { display: flex; flex-wrap: wrap; gap: 2px; align-items: flex-end; max-width: 120px; }
.kw-rt-fam .kw-rl-port { border-radius: 3px; }
.kw-rt-sat { display: grid; grid-template-columns: auto auto minmax(60px, 1fr); align-items: center; gap: 6px; font-size: 13px; }
.kw-rt-sat .kw-bar { margin: 0; }
.kw-rt-reqs, .kw-rt-log, .kw-rt-errs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kw-rt-reqs li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: 13px; }
.kw-rt-log li { font-size: 13px; color: #d5ccb1; }
.kw-rt-log li small { color: var(--kw-dim); }
.kw-rt-log.small li { font-size: 12px; }
.kw-rt-errs li { color: #e0a090; font-size: 13px; }
@media (max-width: 640px) {
    .kw-rt-lbody { grid-template-columns: minmax(0, 1fr); }
    .kw-rt-reqs li { grid-template-columns: auto minmax(0, 1fr); }
    .kw-rt-reqs li .kw-btn { grid-column: 1 / -1; justify-self: end; }
}

/* ---------------- pets (pets-ui.js: Home → Pets) ---------------- */
.kw-pt-views { margin: 4px 0 8px; }
.kw-badge--dim { background: #4a3e34; color: #e8dcc0; }
.kw-pt-prop { margin: 8px 0 12px; padding: 6px; background: rgba(20, 14, 12, .35); border: 1px solid #0a0907; border-radius: 4px; }
.kw-pt-prophead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.kw-pt-prophead b { font-size: 15px; color: #f4ead8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.kw-pt-prophead small { color: var(--kw-faint); }
.kw-pt-caps { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.kw-pt-cap { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; font-size: 12px; color: #e8dcc0; background: #2a221e; border: 1px solid #0a0907; border-radius: 3px; white-space: nowrap; }
.kw-pt-cap img { width: 16px; height: 16px; }
.kw-pt-cap.is-full { color: #f0c870; box-shadow: inset 0 0 0 1px #8a6a30; }
.kw-pt-cap.is-none { color: var(--kw-faint); }
.kw-pt-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.kw-pt-card .kw-cat-trait { height: 2.6em; }
.kw-pt-pic { overflow: hidden; }
.kw-pt-pic img, .kw-pet-pic { image-rendering: pixelated; }
.kw-pt-meta { display: block; height: 1.3em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: #c8b8a0; }
.kw-pt-tag { font-family: var(--kw-sans, inherit); font-size: 11px; letter-spacing: 0; color: #d4b064; }
.kw-pt-note { display: block; height: 1.3em; margin: 2px 0 4px; font-size: 12px; color: var(--kw-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-pt-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.kw-pt-btns .kw-btn img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.kw-pt-btns .kw-pt-ico { padding-left: 6px; padding-right: 6px; }
.kw-pt-btns .kw-pt-ico img { margin: 0; }
.kw-bar--bond i { background: linear-gradient(90deg, #6a3a5a, #c86aa0 60%, #f0a8d0); transition: width .4s; }
.kw-pt-farm { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 4px 6px; background: #1e1816; border: 1px solid #0a0907; border-radius: 3px; font-size: 13px; color: #e8dcc0; }
.kw-pt-farm > img { width: 20px; height: 20px; }
.kw-pt-farm b { margin-right: auto; }
.kw-pt-farm .kw-btn img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
.kw-pt-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; text-align: center; color: var(--kw-dim); background: #1e1816; border-radius: 4px; }
.kw-pt-capbox { margin: 10px 0 4px; }
.kw-pt-capbox summary { display: flex; align-items: center; gap: 6px; cursor: pointer; color: #e8dcc0; font-size: 14px; }
.kw-pt-captable { display: grid; gap: 4px; }
.kw-pt-caprow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 6px; background: #1e1816; border-radius: 3px; }
.kw-pt-caprow b { margin-right: auto; font-size: 13px; color: #e8dcc0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-pt-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; margin-bottom: 8px; }
.kw-pt-offer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 8px; background: #241c1a; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 1px 0 #4a3a32; }
.kw-pt-offer.is-pre { box-shadow: inset 0 0 0 1px #d4b064, 0 0 10px rgba(240, 207, 126, .25); }
.kw-pt-opics { display: grid; grid-template-columns: repeat(2, 56px); gap: 2px; align-content: start; }
.kw-pt-offer .kw-pt-opics:has(> :only-child) { grid-template-columns: 56px; }
.kw-pt-opic, .kw-pt-opics img { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #4a3a30, #1a1412 70%); image-rendering: pixelated; }
.kw-pt-obody { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kw-pt-obody b { font-size: 15px; color: #f4ead8; }
.kw-pt-obody small { font-size: 12.5px; color: #c8b8a0; }
.kw-pt-otext { display: block; height: 3.9em; overflow: hidden; color: var(--kw-faint) !important; line-height: 1.3; }
.kw-pt-orow { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.kw-pt-orow small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-pt-wait { display: inline-flex; align-items: center; gap: 3px; color: #f0c870 !important; }
.kw-pt-wait img { width: 14px; height: 14px; }
.kw-pt-buy .kw-pt-opics { grid-template-columns: repeat(auto-fill, 56px); margin-bottom: 6px; }
.kw-pt-name { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 8px; align-items: center; margin: 4px 0; font-size: 13px; color: var(--kw-dim); }
.kw-pt-name input { width: 100%; }
.kw-pt-name input.is-bad { box-shadow: inset 0 0 0 1px #c8503a; }
.kw-pt-name em { grid-column: 2; height: 1.2em; font-style: normal; font-size: 12px; color: #e88a6a; }
.kw-pt-homes .kw-chip small { color: var(--kw-faint); }
.kw-pt-homes .kw-chip img { width: 16px; height: 16px; }
.kw-pt-why { min-height: 1.3em; font-size: 12.5px; color: #e8a070; }
.kw-pt-moves, .kw-pt-foods { display: grid; gap: 4px; margin-bottom: 8px; }
.kw-pt-foods { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.kw-pt-move, .kw-pt-food { display: flex; align-items: center; gap: 8px; text-align: left; }
.kw-pt-move span, .kw-pt-food span { display: flex; flex-direction: column; min-width: 0; }
.kw-pt-move small, .kw-pt-food small { color: var(--kw-dim); font-size: 12px; }
.kw-pt-food.is-fav { box-shadow: inset 0 0 0 1px #c86a8a; }
@media (max-width: 640px) {
    .kw-pt-prophead b { max-width: 100%; }
    .kw-pt-caps { margin-left: 0; }
}
.kw-pt-hlab { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; color: #e8dcc0; }
.kw-pt-hlab img { width: 18px; height: 18px; }

/* ---------------- the player's character: the creator (char-ui.js), Home's card, the family tree's portraits ---------------- */
/* the character creator: a box of a fixed height (tabs never make it jump) — header, the stage and the tab body
   (which scrolls inside), and a footer that is always on screen; the preview shrinks with a short window */
.kw-cc { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(5, 5, 3, .82); backdrop-filter: blur(3px); animation: kw-fade .2s ease; --cc-lab: 128px; }
.kw-cc-box { width: min(1080px, 100%); height: min(860px, calc(100vh - 32px)); height: min(860px, calc(100dvh - 32px)); min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: var(--kw-panel); border: 1px solid var(--kw-line); border-top: 3px solid var(--kw-gelb); box-shadow: var(--kw-shadow); color: var(--kw-text); font-family: var(--kw-font); }
.kw-cc-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 16px 8px; border-bottom: 1px solid var(--kw-line); }
.kw-cc-head h2 { margin: 0; font-family: var(--kw-stencil); font-weight: 400; letter-spacing: .04em; color: var(--kw-gelb); font-size: 26px; line-height: 1.15; }
.kw-cc-head p { margin: 4px 0 0; color: var(--kw-dim); max-width: 80ch; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kw-cc-head .kw-icon-btn { flex: none; }
.kw-cc-main { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; padding: 12px 16px; min-height: 0; overflow: hidden; }
.kw-cc-stage { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* some 384 px of the window go to the margins, the header, the name, the poses and the footer */
.kw-cc-view { flex: none; height: clamp(150px, calc(100vh - 384px), 420px); height: clamp(150px, calc(100dvh - 384px), 420px); width: auto; aspect-ratio: 300 / 420; align-self: center; image-rendering: pixelated; border: 1px solid var(--kw-line); background: #1a1712; box-shadow: inset 0 0 0 3px #13120e; }
.kw-cc-name { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; flex: none; }
.kw-cc-name b { display: block; font-size: 18px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kw-cc-name small { color: var(--kw-dim); font-variant-numeric: tabular-nums; }
.kw-cc-name .kw-cc-port { width: 56px; height: 56px; }
.kw-cc-turn { width: 36px; min-height: 36px; padding: 0; font-size: 17px; }
.kw-cc-port { image-rendering: pixelated; border: 1px solid var(--kw-line); background: #2a2620; flex: none; }
.kw-cc-poses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; flex: none; }
.kw-cc-poses .kw-chip { padding: 3px 4px; font-size: 13px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.kw-cc-pose.on, .kw-cc-chip.on { color: var(--kw-ink); background: var(--kw-gelb); box-shadow: none; }
.kw-cc-side { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; }
.kw-cc-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 168px); gap: 2px; border-bottom: 1px solid var(--kw-line); }
.kw-cc-tab { appearance: none; border: 1px solid transparent; border-bottom: 0; background: none; color: var(--kw-dim); padding: 8px 6px; font: inherit; font-size: 15px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; justify-content: center; white-space: nowrap; min-width: 0; }
.kw-cc-tab:hover { color: var(--kw-text); }
.kw-cc-tab.on { color: var(--kw-gelb); background: rgba(212, 176, 100, .08); border-color: var(--kw-line); }
.kw-cc-body { overflow-y: auto; overflow-x: hidden; padding: 12px 8px 12px 0; min-height: 0; scrollbar-gutter: stable; }
/* a row: the label column and the control column, the same widths in every tab */
.kw-cc-row { display: grid; grid-template-columns: var(--cc-lab) minmax(0, 1fr); column-gap: 16px; align-items: start; margin: 0 0 12px; }
.kw-cc-lab { padding-top: 6px; font-size: 12px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--kw-faint); }
.kw-cc-row--field .kw-cc-lab { padding-top: 9px; }
.kw-cc-ctl { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kw-cc-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kw-cc-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 10px; font-size: 14px; }
/* thumbnail choices: equal cells in a grid */
.kw-cc-opts.kw-cc-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kw-cc-thumbs .kw-cc-chip { min-height: 46px; padding: 0 10px 0 0; border-radius: 4px; overflow: hidden; justify-content: flex-start; min-width: 0; }
.kw-cc-thumbs .kw-cc-chip span { overflow: hidden; text-overflow: ellipsis; }
.kw-cc-th { width: 44px; height: 44px; image-rendering: pixelated; flex: none; border-right: 1px solid rgba(0, 0, 0, .3); }
.kw-cc-dot { display: inline-block; flex: none; width: 10px; height: 10px; background: var(--c); border: 1px solid rgba(0, 0, 0, .5); }
.kw-cc-opts.kw-cc-sws { gap: 8px; min-height: 30px; }
.kw-cc-sw { appearance: none; flex: none; width: 28px; height: 28px; border: 2px solid #13120e; background: var(--c); cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--kw-line); }
.kw-cc-sw.on { box-shadow: 0 0 0 2px var(--kw-gelb); }
.kw-cc-cols { padding-left: 2px; }
.kw-cc-hint { display: block; color: var(--kw-dim); font-size: 13.5px; line-height: 1.35; }
.kw-cc-plain { padding-top: 5px; color: var(--kw-dim); }
.kw-cc-inrow { display: flex; gap: 8px; align-items: center; width: 100%; max-width: 460px; }
.kw-cc-inrow .kw-input { flex: 1; min-width: 0; height: 36px; }
.kw-cc-dice { flex: none; width: 36px; min-height: 36px; height: 36px; padding: 0; font-size: 17px; }
.kw-cc-range { height: 36px; }
.kw-cc-range input[type=range] { flex: 1; min-width: 0; margin: 0; accent-color: var(--kw-gelb); }
.kw-cc-val { flex: none; width: 36px; text-align: right; color: var(--kw-text); font-family: var(--kw-mono); font-size: 18px; font-weight: 400; font-variant-numeric: tabular-nums; }
.kw-cc-msg { color: #e0806a; min-height: 1.2em; margin: 0; }
.kw-cc-msg:empty { min-height: 0; }
.kw-cc-note { margin: 0; color: var(--kw-text); }
.kw-cc-bar { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 16px 12px; border-top: 1px solid var(--kw-line); background: rgba(0, 0, 0, .14); }
.kw-cc-bar-l { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.kw-cc-bar .kw-btn { min-height: 40px; padding: 4px 14px; gap: 7px; }
.kw-cc-bar .kw-cc-primary { flex: none; padding: 4px 22px; font-size: 17px; }
.kw-cc-card { display: flex; gap: 10px; align-items: center; margin: -4px 0 10px; padding: 6px 8px; border: 1px solid var(--kw-line); background: rgba(0, 0, 0, .18); }
.kw-cc-card b { display: block; } .kw-cc-card small { color: var(--kw-dim); } .kw-cc-card > div { flex: 1; }
.kw-cc-offer-row { display: flex; gap: 14px; align-items: center; }
.kw-fam-port { margin-right: 8px; }
@media (max-width: 760px) {
    .kw-cc { padding: 0; --cc-lab: 92px; }
    .kw-cc-box { width: 100%; height: 100vh; height: 100dvh; border-left: 0; border-right: 0; }
    .kw-cc-head { padding: 10px 12px 6px; }
    .kw-cc-head h2 { font-size: 20px; }
    .kw-cc-head p { font-size: 13.5px; }
    /* the stage becomes a strip: the figure on the left, the name and the poses beside it; the tabs fill the rest */
    .kw-cc-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 8px 12px 0; }
    .kw-cc-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 6px 10px; overflow: visible; }
    .kw-cc-view { grid-row: 1 / 3; height: clamp(110px, calc(100dvh - 560px), 200px); }
    .kw-cc-name { grid-template-columns: minmax(0, 1fr) auto; }
    .kw-cc-name .kw-cc-port { display: none; }
    .kw-cc-name b { font-size: 16px; }
    .kw-cc-poses { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
    .kw-cc-poses .kw-chip { font-size: 12.5px; padding: 2px 2px; }
    .kw-cc-tabs { grid-auto-columns: minmax(0, 1fr); }
    .kw-cc-tab { flex-direction: column; gap: 1px; padding: 5px 2px; font-size: 12.5px; }
    .kw-cc-tab i { font-size: 16px; }
    .kw-cc-row { column-gap: 10px; }
    .kw-cc-opts.kw-cc-thumbs { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
    .kw-cc-bar { padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .kw-cc-bar .kw-cc-lbl { display: none; }
    .kw-cc-bar .kw-btn { padding: 4px 11px; }
    .kw-cc-bar .kw-cc-primary { padding: 4px 14px; font-size: 16px; }
}
@media (max-width: 760px) and (max-height: 640px) {
    .kw-cc-head p { display: none; }
}
@media (max-width: 420px) {
    .kw-cc { --cc-lab: minmax(0, 1fr); }
    .kw-cc-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
    .kw-cc-row > span:empty { display: none; }
    .kw-cc-lab, .kw-cc-row--field .kw-cc-lab { padding-top: 0; }
    .kw-cc-inrow { max-width: none; }
}
/* short windows (a laptop at a browser zoom, a phone on its side): a smaller header, the preview shrinks further */
@media (max-height: 700px) and (min-width: 761px) {
    .kw-cc { padding: 8px; }
    .kw-cc-box { height: calc(100vh - 16px); height: calc(100dvh - 16px); }
    .kw-cc-head { padding: 8px 16px 6px; }
    .kw-cc-head h2 { font-size: 22px; }
    .kw-cc-head p { -webkit-line-clamp: 1; }
    .kw-cc-view { height: clamp(120px, calc(100vh - 330px), 420px); height: clamp(120px, calc(100dvh - 330px), 420px); }
    .kw-cc-name .kw-cc-port { width: 40px; height: 40px; }
    .kw-cc-bar { padding: 8px 16px; }
}
/* ---------- money with its coin (ui.js cash / KW.cash): the currency glyph before the amount ---------- */
.kw-cash { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums; }
.kw-cash > img { flex: none; image-rendering: pixelated; margin: -2px 0; }
.kw-cash.cant, .cant > .kw-cash { color: #e8806a; }
/* ---------------- Home: the catalogue window (home-cat-ui.js): over the right panel, docked under the view when folded, a sheet on a phone ---------------- */
.kw-hc { position: fixed; z-index: 40; display: flex; flex-direction: column; min-height: 0; color: #e8dcc0; background: var(--kw-panel, #24211b); border: 2px solid #0a0907; box-shadow: inset 0 0 0 1px #5a5038, 0 8px 28px rgba(0, 0, 0, .55); border-radius: 4px; overflow: hidden; animation: kw-hc-in .16s ease-out; }
.kw-hc[hidden] { display: none; }
@keyframes kw-hc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kw-hc-head { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: linear-gradient(#3a3428, #2a261e); border-bottom: 2px solid #0a0907; min-width: 0; }
.kw-hc-title { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; font-family: var(--kw-display, inherit); font-size: 17px; color: var(--kw-gelb, #e8c040); white-space: nowrap; }
.kw-hc-tabs { display: flex; gap: 3px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.kw-hc-tabs::-webkit-scrollbar { display: none; }
.kw-hc-tab { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font: inherit; font-size: 13px; color: #d8ccb0; background: #2a2620; border: 1px solid #0a0907; border-radius: 3px; box-shadow: inset 0 0 0 1px #4a4434; cursor: pointer; white-space: nowrap; }
.kw-hc-tab[aria-selected='true'] { color: #1a1408; background: var(--kw-gelb, #e8c040); box-shadow: inset 0 0 0 1px #fff4; }
.kw-hc-tab em { font-style: normal; padding: 0 5px; margin-left: 2px; font-size: 11px; color: #fff; background: #7a3a2a; border-radius: 8px; }
.kw-hc-money { margin-left: auto; padding: 2px 8px; font-size: 14px; color: #fff4c8; background: #1a1612; border-radius: 3px; }
.kw-hc-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 8px; gap: 8px; }
.kw-hc-items { flex: 1 1 auto; display: grid; grid-template-columns: 168px minmax(0, 1fr) 236px; gap: 8px; min-height: 0; }
.kw-hc-kinds { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; padding-right: 2px; }
.kw-hc-kind { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 3px 6px 3px 3px; font: inherit; font-size: 12.5px; text-align: left; color: #d8ccb0; background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; }
.kw-hc-kind img { width: 30px; height: 30px; image-rendering: pixelated; }
.kw-hc-kind span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-hc-kind em { font-style: normal; font-size: 11px; color: #9a8e74; }
.kw-hc-kind:hover { background: #2e2a22; border-color: #4a4434; }
.kw-hc-kind[aria-pressed='true'] { color: #1a1408; background: var(--kw-gelb, #e8c040); }
.kw-hc-kind[aria-pressed='true'] em { color: #4a3a10; }
.kw-hc-main { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.kw-hc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kw-hc-filters .kw-input { flex: 1 1 160px; min-width: 120px; }
.kw-hc-stys, .kw-hc-rooms { display: flex; flex-wrap: wrap; gap: 4px; }
.kw-hc-stys .kw-chip i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; box-shadow: 0 0 0 1px #0008; }
.kw-hc-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); grid-auto-rows: min-content; gap: 6px; min-height: 0; overflow-y: auto; padding: 2px; align-content: start; }
.kw-hc-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 5px; font: inherit; color: #e8dcc0; text-align: center; background: #2a2620; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #3e382c; cursor: grab; touch-action: manipulation; }
.kw-hc-tile > img { width: 64px; height: 64px; image-rendering: pixelated; pointer-events: none; }
.kw-hc-tile b { font-size: 12px; font-weight: 600; line-height: 1.15; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kw-hc-tile small { font-size: 11.5px; }
.kw-hc-tile:hover, .kw-hc-tile.is-det { box-shadow: inset 0 0 0 1px var(--kw-gelb, #e8c040); background: #322c22; }
.kw-hc-tile.is-on { box-shadow: inset 0 0 0 2px #8ac860; }
.kw-hc-tile.is-carry { box-shadow: inset 0 0 0 2px #8ac860; background: #2c3424; }
.kw-hc-tile.is-locked { opacity: .55; }
.kw-hc-tile.is-inv { cursor: default; }
.kw-hc-sty { position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px #0008; }
.kw-hc-n { position: absolute; right: 4px; top: 4px; padding: 0 5px; font-size: 10.5px; color: #1a1408; background: #c8e0b0; border-radius: 7px; }
.kw-hc-fx { display: inline-flex; align-items: center; gap: 2px; color: #b8ac90; }
.kw-hc-acts { display: flex; gap: 4px; }
.kw-hc-tile .kw-hm-src.cant, .kw-hc-price.cant { color: #e8806a; }
.kw-hc-det { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; padding: 8px; background: #1e1b16; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #3e382c; }
.kw-hc-det.is-empty { align-items: center; justify-content: center; text-align: center; color: #b8ac90; font-size: 13px; }
.kw-hc-dpic { display: flex; justify-content: center; padding: 6px; background: radial-gradient(#3a3428, #24201a); border-radius: 4px; }
.kw-hc-dpic img { width: 112px; height: 112px; image-rendering: pixelated; }
.kw-hc-det h4 { margin: 0; font-size: 16px; color: var(--kw-gelb, #e8c040); }
.kw-hc-de { color: #9a8e74; font-style: italic; }
.kw-hc-det p { margin: 0; font-size: 12.5px; line-height: 1.4; }
.kw-hc-facts { display: flex; flex-wrap: wrap; gap: 4px; }
.kw-hc-facts span { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-size: 11.5px; background: #2a2620; border-radius: 3px; }
.kw-hc-facts i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.kw-hc-fits { color: #b8c8a0; }
.kw-hc-fits.bad { color: #e8806a; }
.kw-hc-notes { margin: 0; padding-left: 16px; font-size: 12px; color: #c8bca0; }
.kw-hc-price { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 6px 8px; font-size: 13.5px; background: #2a2620; border-left: 3px solid #d8b040; border-radius: 3px; }
.kw-hc-price.stock, .kw-hc-price.inv { border-left-color: #8ac860; }
.kw-hc-price.cant { border-left-color: #e0584c; }
.kw-hc-det .kw-btn { justify-content: center; }
.kw-hc-sw { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 11px; }
.kw-hc-sw i { display: block; width: 11px; height: 11px; border-radius: 50%; outline: 1px solid #0a0907; cursor: pointer; overflow: hidden; }
.kw-hc-sw i:hover { outline: 1px solid #e8dcc0; }
.kw-hc-sw i.on { outline: 2px solid var(--kw-gelb, #e8c040); outline-offset: 1px; }
.kw-hc-sw--big { justify-content: flex-start; gap: 7px; }
.kw-hc-sw--big i { width: 18px; height: 18px; }
.kw-hc-vars { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: #b8ac90; }
/* the configurator: a thing's materials, colours and patterns (home-cat-ui.js cfgHtml); every row keeps its height, so nothing moves */
.kw-hc-cfg { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: #24201a; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #3e382c; }
.kw-hc-mslot { display: flex; flex-direction: column; gap: 3px; }
.kw-hc-mslot + .kw-hc-mslot { padding-top: 5px; border-top: 1px solid #3a342a; }
.kw-hc-mhead { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-height: 17px; font-size: 12px; color: #b8ac90; }
.kw-hc-mhead b { font-size: 12.5px; color: var(--kw-gelb, #e8c040); }
.kw-hc-mhead span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.kw-hc-msub { font-size: 11.5px; color: #9a8e74; }
.kw-hc-msw { display: flex; flex-wrap: wrap; gap: 4px; min-height: 24px; }
.kw-hc-swb { width: 24px; height: 24px; padding: 1px; background: #1a1612; border: 1px solid #0a0907; border-radius: 3px; cursor: pointer; }
.kw-hc-swb img { display: block; width: 20px; height: 20px; image-rendering: pixelated; pointer-events: none; }
.kw-hc-swb:hover { border-color: #e8dcc0; }
.kw-hc-swb.on { border-color: var(--kw-gelb, #e8c040); box-shadow: 0 0 0 1px var(--kw-gelb, #e8c040); }
.kw-hc-mfoot { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 28px; font-size: 12px; color: #d8ccb0; }
.kw-hc-mfoot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kw-hc-mhint { display: flex; align-items: center; gap: 6px; color: #b8ac90; font-size: 12px; }
.kw-hc-mdot { position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; border-radius: 2px; background: conic-gradient(#a4642e 0 25%, #8a2a3a 0 50%, #c8a040 0 75%, #3a6a8a 0); box-shadow: 0 0 0 1px #0008; }
.kw-hc-cfgm { display: flex; flex-direction: column; gap: 8px; }
.kw-hc-cfgm .kw-btn { justify-content: center; }
/* a room style tried on before it is bought (ui.js hmTryBar): one row, always there, so nothing moves when it fills */
.kw-hm-try { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 4px 6px 4px 8px; margin-top: 6px; background: #1e1b16; border: 1px solid #0a0907; border-left: 3px solid var(--kw-gelb, #e8c040); border-radius: 3px; box-shadow: inset 0 0 0 1px #3e382c; }
.kw-hc-body > .kw-hm-try { margin-top: 0; }
.kw-hm-try.is-idle { border-left-color: #4a4434; }
.kw-hm-try-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #9a8e74; min-width: 0; }
.kw-hm-try-what { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.kw-hm-try-what img { flex: none; width: 28px; height: 28px; image-rendering: pixelated; }
.kw-hm-try-what > span { display: flex; flex-direction: column; min-width: 0; }
.kw-hm-try-what b { font-size: 13px; color: var(--kw-gelb, #e8c040); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hm-try-what small { font-size: 11.5px; color: #b8ac90; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-hm-try-acts { flex: none; display: flex; gap: 5px; }
.kw-hm-try .kw-btn.cant { color: #e8806a; }
.kw-hc-tile.is-try, .kw-hm-sty.is-try { box-shadow: inset 0 0 0 2px var(--kw-gelb, #e8c040); background: #3a321e; }
.kw-hm-catcard { display: flex; gap: 12px; align-items: flex-start; padding: 12px; margin-top: 8px; background: #1e1b16; border: 1px solid #0a0907; border-radius: 4px; box-shadow: inset 0 0 0 1px #3e382c; }
.kw-hm-catcard p { margin: 4px 0 8px; font-size: 13px; }
/* docked under the view (folded panel) and the phone sheet: one row of things that scrolls sideways, no detail pane */
.kw-hc[data-mode='dock'], .kw-hc[data-mode='sheet'] { border-radius: 6px 6px 0 0; }
.kw-hc[data-mode='dock'] .kw-hc-body, .kw-hc[data-mode='sheet'] .kw-hc-body { padding: 6px; gap: 5px; }
.kw-hc[data-mode='dock'] .kw-hc-items { grid-template-columns: 150px minmax(0, 1fr); gap: 6px; }
.kw-hc[data-mode='dock'] .kw-hc-kind { grid-template-columns: 24px minmax(0, 1fr) auto; padding: 1px 4px 1px 2px; font-size: 12px; }
.kw-hc[data-mode='dock'] .kw-hc-kind img { width: 24px; height: 24px; }
.kw-hc[data-mode='dock'] .kw-hc-grid, .kw-hc[data-mode='sheet'] .kw-hc-grid--sty, .kw-hc[data-mode='sheet'] .kw-hc-grid--inv { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 104px; grid-template-rows: minmax(0, 1fr); overflow-x: auto; overflow-y: hidden; }
.kw-hc[data-mode='dock'] .kw-hc-tile { padding: 4px 3px; }
.kw-hc[data-mode='dock'] .kw-hc-tile > img { width: 52px; height: 52px; }
.kw-hc[data-mode='dock'] .kw-hc-title b, .kw-hc[data-mode='sheet'] .kw-hc-title b { display: none; }
.kw-hc[data-mode='dock'] .kw-hc-tab span, .kw-hc[data-mode='sheet'] .kw-hc-tab span { display: none; }
.kw-hc[data-mode='dock'] .kw-hc-tab[aria-selected='true'] span { display: inline; }
.kw-hc.is-min .kw-hc-body { display: none; }
.kw-hc[data-mode='sheet'] .kw-hc-items { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.kw-hc[data-mode='sheet'] .kw-hc-kinds { flex-direction: row; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.kw-hc[data-mode='sheet'] .kw-hc-kind { flex: none; grid-template-columns: 26px auto; }
.kw-hc[data-mode='sheet'] .kw-hc-kind em { display: none; }
.kw-hc[data-mode='sheet'] .kw-hc-kind img { width: 26px; height: 26px; }
.kw-hc[data-mode='sheet'] .kw-hc-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.kw-hc[data-mode='sheet'] .kw-hc-tile > img { width: 48px; height: 48px; }

@media (max-width: 1300px) { .kw-hc[data-mode='over'] .kw-hc-items { grid-template-columns: 140px minmax(0, 1fr) 200px; } }

/* ---------- faction themes (USSR section 14) ----------
   ui.js facTheme() puts body.kw-fac-de or body.kw-fac-su on the page from S.fac while a game runs (never on the title menu),
   and body.kw-su-emp on a Soviet game before 1918. The German game has no rules here: its look is the base sheet above.
   The Soviet game keeps that look and only wears a badge: a faint flag behind the brand and in the front report's corner,
   a thin red rule under the header and on the open tab, a small muted star before section labels, a red-to-gold month bar.
   Only backgrounds and shadows: no sizes change. --kw-su-red is the red of those touches, --kw-su-flag the flag picture. */
body.kw-fac-su {
    --kw-su-red: #a8322a;
    --kw-su-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23b8281e'/%3E%3Cpath fill='%23e2b84e' d='M11 3l1.2 3.6h3.8l-3.1 2.2 1.2 3.6-3.1-2.2-3.1 2.2 1.2-3.6-3.1-2.2h3.8z'/%3E%3Cpath fill='none' stroke='%23e2b84e' stroke-width='1.6' d='M14.5 15.5a5 5 0 1 1-6.5 6.2'/%3E%3Cpath stroke='%23e2b84e' stroke-width='1.6' d='M7.5 23.5l7-7'/%3E%3Cpath stroke='%23e2b84e' stroke-width='2.4' d='M12.6 14.4l3 3'/%3E%3C/svg%3E");
}
body.kw-fac-su.kw-su-emp { --kw-su-red: #3d5486; }
/* the header: the flag faintly behind the brand, a thin red rule along the bottom edge */
body.kw-fac-su .kw-top { box-shadow: inset 0 -2px 0 var(--kw-su-red), 0 4px 16px rgba(0, 0, 0, .5); }
body.kw-fac-su:not(.kw-su-emp) .kw-brand { background: linear-gradient(90deg, rgba(36, 35, 27, .62), rgba(36, 35, 27, .9) 60%, rgba(36, 35, 27, 0) 100%) 54px center / 120px 100% no-repeat, var(--kw-su-flag) 54px center / 120px 100% no-repeat; }
/* the open tab: a thin red foot */
body.kw-fac-su .kw-group[aria-pressed='true'], body.kw-fac-su .kw-tab[aria-selected='true'] { box-shadow: inset 0 1px 0 #fff6, inset 0 -2px 0 var(--kw-su-red); }
/* the month bar runs red to gold */
body.kw-fac-su .kw-month-bar i { background: linear-gradient(90deg, var(--kw-su-red), var(--kw-gelb)); }
/* the front report: the flag watermarked in its bottom-right corner */
body.kw-fac-su:not(.kw-su-emp) .kw-front { background: linear-gradient(rgba(34, 33, 25, .9), rgba(34, 33, 25, .9)) right 10px bottom 10px / 96px 64px no-repeat, var(--kw-su-flag) right 10px bottom 10px / 96px 64px no-repeat, linear-gradient(180deg, rgba(232, 222, 194, .06), transparent 40%), var(--kw-panel); }
/* a small muted star before each section label, in the panel's padding */
body.kw-fac-su .kw-section-label { position: relative; }
body.kw-fac-su .kw-section-label::before { content: ''; position: absolute; left: -10px; top: 50%; width: 7px; height: 7px; margin-top: -4px; background: var(--kw-su-red); opacity: .8;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
/* The British game (UK section 0): the same badge idea with fewer touches. ui.js facTheme() puts body.kw-fac-uk on the page
   while a British game runs: the Union flag faintly behind the brand and watermarked in the front report's corner, a thin
   navy rule under the header and at the foot of the open tab, a navy-to-gold month bar. Only backgrounds and shadows. */
body.kw-fac-uk {
    --kw-uk-rule: #4a5f96;
    --kw-uk-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23263866'/%3E%3Cpath d='M0 0L60 30M60 0L0 30' stroke='%23e6e0d0' stroke-width='6'/%3E%3Cpath d='M0 0L60 30M60 0L0 30' stroke='%23b0302a' stroke-width='2'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23e6e0d0' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23b0302a' stroke-width='6'/%3E%3C/svg%3E");
}
body.kw-fac-uk .kw-top { box-shadow: inset 0 -2px 0 var(--kw-uk-rule), 0 4px 16px rgba(0, 0, 0, .5); }
body.kw-fac-uk .kw-brand { background: linear-gradient(90deg, rgba(36, 35, 27, .66), rgba(36, 35, 27, .9) 60%, rgba(36, 35, 27, 0) 100%) 54px center / 120px 100% no-repeat, var(--kw-uk-flag) 54px center / 120px 100% no-repeat; }
body.kw-fac-uk .kw-group[aria-pressed='true'], body.kw-fac-uk .kw-tab[aria-selected='true'] { box-shadow: inset 0 1px 0 #fff6, inset 0 -2px 0 var(--kw-uk-rule); }
body.kw-fac-uk .kw-month-bar i { background: linear-gradient(90deg, var(--kw-uk-rule), var(--kw-gelb)); }
body.kw-fac-uk .kw-front { background: linear-gradient(rgba(34, 33, 25, .9), rgba(34, 33, 25, .9)) right 10px bottom 10px / 96px 48px no-repeat, var(--kw-uk-flag) right 10px bottom 10px / 96px 48px no-repeat, linear-gradient(180deg, rgba(232, 222, 194, .06), transparent 40%), var(--kw-panel); }
/* ---- Simple mode (goals.js, goals-ui.js; project-docs/kriegswerk-easy-start.md): the new-game choice, hidden tabs and the goal card ---- */
.kw-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kw-modes .kw-start-card { padding: 10px 12px; }
.kw-modes .kw-start-card > img.kw-ico { width: 56px; height: 56px; }
.kw-mode-note { display: flex; gap: 8px; align-items: center; margin: 14px 0; padding: 8px 10px; color: #cfc6ab; background: #1f1e17; border: 1px solid #0a0907; border-radius: 4px; }
.kw-mode-note img { flex: none; }
.kw-groups > .kw-group[hidden] { display: none !important; }
.kw-new { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; font-family: inherit; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .04em; color: #1a1406; background: var(--kw-gelb); vertical-align: middle; }
/* a tile with something new in it: a "New!" label on its corner that pulses softly until the new tab is opened */
.kw-group.is-new::after { content: 'New!'; position: absolute; top: -7px; left: 4px; z-index: 2; padding: 0 5px; border-radius: 3px; font-family: var(--kw-font); font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: .04em; color: #1a1406; background: var(--kw-gelb); box-shadow: 0 0 0 1px #0a0907, 0 0 8px rgba(212, 176, 100, .7); animation: kw-new-pulse 1.2s ease-in-out infinite alternate; pointer-events: none; }
@keyframes kw-new-pulse { from { box-shadow: 0 0 0 1px #0a0907, 0 0 2px rgba(212, 176, 100, .4); } to { box-shadow: 0 0 0 1px #0a0907, 0 0 12px rgba(240, 207, 126, .95); } }
@media (prefers-reduced-motion: reduce) { .kw-group.is-new::after { animation: none; } }
.kw-goal { position: relative; height: 140px; box-sizing: border-box; padding: 7px 10px 6px; border-top: 2px solid #0a0907; background: linear-gradient(#25231a, #1c1b14);
    display: grid; grid-template-rows: 16px 56px 30px 16px; gap: 4px; overflow: hidden; }
.kw-goal[hidden] { display: none; }
.kw-goal-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--kw-gelb); white-space: nowrap; overflow: hidden; }
.kw-goal-ch { overflow: hidden; text-overflow: ellipsis; }
.kw-goal-k { flex: none; color: var(--kw-dim); }
.kw-goal-main { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; min-height: 0; }
.kw-goal-pic img { display: block; width: 40px; height: 40px; }
.kw-goal-txt { min-width: 0; }
.kw-goal-txt b { font-family: var(--kw-stencil); font-weight: 400; font-size: 17px; line-height: 20px; color: var(--kw-paper); }
.kw-goal-rw { float: right; margin-left: 8px; font-size: 13px; line-height: 20px; color: #a9c46f; white-space: nowrap; }
.kw-goal-txt p { margin: 2px 0 0; font-size: 13px; line-height: 17px; color: #cfc6ab; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kw-goal-act { display: flex; gap: 8px; align-items: center; min-width: 0; }
.kw-goal-bar { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.kw-goal-bar .kw-bar { flex: 1; height: 10px; margin: 0; }
.kw-goal-bar span { font-size: 13px; color: var(--kw-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kw-goal-act .kw-btn { flex: none; }
.kw-goal-designs { display: flex; gap: 6px; flex: 1; min-width: 0; }
.kw-goal-dz { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 3px; height: 30px; padding: 0 6px; border: 1px solid #0a0907; border-radius: 4px; background: #2b2a21; color: var(--kw-text); font: inherit; font-size: 12px; cursor: pointer; }
.kw-goal-dz i { flex: none; width: 10px; height: 18px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45); }
.kw-goal-dz span { margin-left: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-goal-dz:hover, .kw-goal-dz:focus-visible { box-shadow: inset 0 0 0 2px var(--kw-gelb); outline: none; }
.kw-goal-next { font-size: 12px; line-height: 16px; color: var(--kw-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-goal-stamp { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; pointer-events: none; opacity: 0; background: rgba(20, 19, 14, .84); }
.kw-goal-stamp span { font-family: var(--kw-stencil); font-size: 30px; line-height: 1.1; color: var(--kw-gelb); border: 3px solid var(--kw-gelb); border-radius: 4px; padding: 0 14px; transform: rotate(-5deg); }
.kw-goal-stamp em { font-style: normal; color: #a9c46f; }
.kw-goal.is-done .kw-goal-stamp { animation: kw-goal-stamp 1.8s ease-out forwards; }
@keyframes kw-goal-stamp { 0% { opacity: 0; transform: scale(1.25); } 12% { opacity: 1; transform: scale(1); } 82% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kw-goal.is-done .kw-goal-stamp { animation: none; opacity: 1; } }
/* the slim rail (ui.js initRail): the goal card leaves the 76 px rail for the works column, under the PRESS strip
   (simple-ui.js place puts it there and marks .kw-goal-in; ui.js fit leaves room for it under the picture) */
@media (min-width: 901px) {
    #kw-app.kw-railed .kw-nav > .kw-goal { display: none; }
    #kw-app.kw-railed .kw-left.kw-goal-in { grid-template-rows: auto auto auto minmax(0, 1fr); }
    #kw-app.kw-railed .kw-left > .kw-goal { grid-column: 1; grid-row: 3; min-width: 0; border: 1px solid #0a0907; border-radius: 4px; }
    #kw-app.kw-railed[data-front='below'] .kw-left.kw-goal-in > .kw-front { grid-row: 4; }
    #kw-app.kw-railed[data-front='side'] .kw-left.kw-goal-in > .kw-front { grid-row: 1 / 5; }
}
@media (max-width: 600px) {
    .kw-modes { grid-template-columns: minmax(0, 1fr); }
    .kw-goal { height: 150px; grid-template-rows: 16px 64px 30px 16px; }
    .kw-goal-dz span { display: none; }
}
.kw-title:not([data-step='root']) .kw-title-foot { display: none; } /* a tall page (the new game's setup) scrolled under it */
/* ---- Simple mode, Phase 4 (simple-ui.js): four tiles, one card per panel, the phone layout ---- */
.kw-goal-show { flex: none; margin-left: auto; margin-right: 8px; padding: 0 6px; border: 0; border-radius: 3px; background: #3a3626; color: var(--kw-gelb2); font: inherit; font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.kw-goal-show:hover, .kw-goal-show:focus-visible { background: var(--kw-gelb); color: #1a1406; outline: none; }
.kw-group.is-locked { opacity: .45; cursor: default; filter: grayscale(.6); }
.kw-group.is-locked:hover { color: var(--kw-dim); background: #23221a; }
body.kw-simple .kw-resources > .kw-res:nth-child(3), body.kw-simple #kwHeatRes, body.kw-simple-norp .kw-resources > .kw-res:nth-child(2) { display: none; }
.kw-sp { display: grid; gap: 12px; align-content: start; }
.kw-sp-card { padding: 10px 12px 12px; background: #1f1e17; border: 1px solid #0a0907; border-radius: 5px; box-shadow: inset 0 1px 0 #34322a; }
.kw-sp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.kw-sp-head img { width: 40px; height: 40px; flex: none; }
.kw-sp-head h3 { margin: 0; font-family: var(--kw-stencil); font-weight: 400; font-size: 21px; color: var(--kw-paper); }
.kw-sp-lead { margin: 0 0 10px; color: #cfc6ab; font-size: 15px; line-height: 1.4; }
/* a row is icon, words, buttons: the words keep ~15em and the buttons drop onto a line of their own before the words get squeezed into a narrow column */
.kw-sp-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 8px 0; border-top: 1px solid #2e2c22; }
.kw-sp-row > img { flex: none; width: 36px; height: 36px; margin-right: 4px; }
.kw-sp-what { flex: 1 1 15em; min-width: 0; display: grid; gap: 1px; }
.kw-sp-what b { font-size: 16px; color: var(--kw-text); font-weight: 600; }
.kw-sp-what small { color: var(--kw-dim); font-size: 13.5px; }
.kw-sp-what .kw-sp-bad { color: #e3907f; }
.kw-sp-what .kw-sp-tools { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.kw-sp-tools .kw-bar { width: 64px; flex: none; margin: 0; }
.kw-sp-tools.kw-sp-bad .kw-bar i { background: linear-gradient(90deg, #8e241c, #e0584c); }
.kw-sp-btns { flex: 0 1 auto; max-width: 100%; margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.kw-sp-btns .kw-btn.is-held { box-shadow: inset 0 0 0 2px #7aa0c8; }
.kw-sp-tag { display: inline-block; padding: 1px 7px; border-radius: 3px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.kw-sp-tag--good { background: #3c4d23; color: #cfe59a; }
.kw-sp-tag--fair { background: #4a4126; color: #ead59a; }
.kw-sp-tag--low { background: #55241d; color: #f0b1a3; }
.kw-sp-tag--on { background: #6a221b; color: #ffd9cf; }
.kw-sp-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 10px; }
.kw-sp-pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; text-align: left; border: 1px solid #0a0907; border-radius: 4px; background: #2b2a21; color: var(--kw-text); font: inherit; cursor: pointer; }
.kw-sp-pick img { width: 32px; height: 32px; flex: none; }
.kw-sp-pick span { display: grid; min-width: 0; }
.kw-sp-pick b { font-weight: 600; }
.kw-sp-pick small { color: var(--kw-dim); font-size: 12.5px; }
.kw-sp-pick:hover, .kw-sp-pick:focus-visible { box-shadow: inset 0 0 0 2px var(--kw-gelb); outline: none; }
.kw-sp-pick.is-on { background: linear-gradient(#4a4023, #3a3219); box-shadow: inset 0 0 0 2px var(--kw-gelb); }
.kw-sp-prog { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 14px; }
.kw-sp-prog .kw-bar { margin: 0; height: 10px; }
/* hands-off production (easy-start plan § 18): the manager, the carts, the make-list */
.kw-sp-pickw { display: flex; min-width: 0; }
.kw-sp-pickw .kw-sp-pick { flex: 1 1 auto; min-width: 0; border-radius: 4px 0 0 4px; }
.kw-sp-q { flex: none; min-width: 46px; padding: 0 8px; border: 1px solid #0a0907; border-left: 0; border-radius: 0 4px 4px 0; background: #343226; color: var(--kw-gelb2); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.kw-sp-q:hover, .kw-sp-q:focus-visible { background: #4a4023; color: var(--kw-gelb); outline: none; box-shadow: inset 0 0 0 2px var(--kw-gelb); }
.kw-sp-mq { display: grid; gap: 4px; margin: 0 0 10px; padding: 8px 10px; background: #26251c; border: 1px solid #0a0907; border-radius: 4px; font-size: 14px; }
.kw-sp-mq > b { color: var(--kw-paper); font-weight: 600; }
.kw-sp-mqr { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(50px, 90px) auto 28px; gap: 8px; align-items: center; min-height: 28px; }
.kw-sp-mqr > img { width: 24px; height: 24px; }
.kw-sp-mqr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-sp-mqr .kw-bar { margin: 0; height: 8px; }
.kw-sp-mqr.is-on > span { color: var(--kw-gelb2); }
.kw-sp-x { width: 28px; height: 28px; padding: 0; border: 1px solid #0a0907; border-radius: 3px; background: #2b2a21; color: var(--kw-dim); font: inherit; cursor: pointer; }
.kw-sp-x:hover, .kw-sp-x:focus-visible { color: #f0b1a3; box-shadow: inset 0 0 0 2px #a5493a; outline: none; }
.kw-sp-wait { display: block; min-height: 1.3em; margin: -4px 0 6px; color: #e3c27f; font-size: 13px; }
.kw-sp-carts.is-short .kw-sp-what small { color: #e3c27f; }
.kw-sp-mgr .kw-btn.is-held { box-shadow: inset 0 0 0 2px #7fae6a; }
@media (max-width: 520px) { .kw-sp-mqr { grid-template-columns: 24px minmax(0, 1fr) auto 28px; } .kw-sp-mqr .kw-bar { display: none; } }
.kw-sp-rec { display: grid; gap: 4px; justify-items: start; padding: 10px; background: #26251c; border: 1px solid #0a0907; border-radius: 4px; }
.kw-sp-rec b { font-size: 18px; color: var(--kw-paper); }
.kw-sp-rec p { margin: 0; color: #cfc6ab; }
.kw-sp-rec small { color: var(--kw-dim); }
.kw-sp-main { display: flex; justify-content: flex-end; margin-top: 10px; }
.kw-sp-sites { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-sp-more { display: flex; justify-content: flex-end; }
.kw-sp-link { padding: 4px 2px; border: 0; background: none; color: var(--kw-gelb2); font: inherit; font-size: 14.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kw-sp-link:hover, .kw-sp-link:focus-visible { color: var(--kw-gelb); outline: none; }
.kw-sp-back { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #2e2c22; }
.kw-sp-glow { animation: kw-sp-glow 2.5s ease-out; }
@keyframes kw-sp-glow { 0%, 60% { box-shadow: 0 0 0 3px var(--kw-gelb), 0 0 18px rgba(240, 207, 126, .8); } 100% { box-shadow: 0 0 0 0 rgba(240, 207, 126, 0); } }
@media (prefers-reduced-motion: reduce) { .kw-sp-glow { animation: none; outline: 3px solid var(--kw-gelb); } }
.kw-start--simple .kw-start-card { max-width: 340px; margin: 0 auto 12px; cursor: default; }
@media (max-width: 520px) { .kw-sp-btns { flex-basis: 100%; margin-left: 0; justify-content: flex-start; } }
/* phones and narrow windows: the goal card sits at the top of the works column (simple-ui.js place), always in view at the start */
@media (max-width: 900px) {
    body.kw-simple .kw-left > .kw-goal { flex: none; border: 1px solid #0a0907; border-radius: 4px; }
    body.kw-simple .kw-left > .kw-front, body.kw-simple .kw-ticker { display: none; }
}
/* phones: the four tiles are a bar along the bottom, the PRESS a round thumb button just above it on the right */
@media (max-width: 600px) {
    body.kw-simple { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
    body.kw-simple #kw-app { padding-bottom: calc(176px + env(safe-area-inset-bottom, 0px)); } /* the body scrolls but its padding gives no room at the end: with this a panel's last row scrolls clear of the bar and the round PRESS */
    body.kw-simple .kw-groups { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: #17160f; border-top: 2px solid #0a0907; box-shadow: 0 -4px 14px rgba(0, 0, 0, .5); }
    body.kw-simple .kw-groups > .kw-group { flex-direction: column; gap: 1px; min-height: 52px; padding: 3px 2px; font-size: 14px; border-radius: 5px; border-bottom: 1px solid #0a0907; }
    body.kw-simple .kw-groups > .kw-group > span:not(.kw-badge) { display: block !important; }
    body.kw-simple .kw-groups > .kw-group > img { display: block !important; width: 26px; height: 26px; }
    body.kw-simple .kw-groups > .kw-group .kw-badge { position: absolute; top: 2px; right: 3px; }
    body.kw-simple .kw-groups > .kw-group .kw-badge:empty { display: none; }
    body.kw-simple .kw-group.is-new::after { top: -9px; left: 50%; transform: translateX(-50%); }
    body.kw-simple .kw-press-row { grid-template-columns: minmax(0, 1fr); }
    body.kw-simple .kw-press { position: fixed; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 46; width: 92px; height: 92px; }
    body.kw-simple .kw-press-plate { border-radius: 50%; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: 0; padding: 4px 4px 8px; }
    body.kw-simple .kw-press-plate img { width: 36px; height: 36px; }
    body.kw-simple .kw-press-label { font-size: 19px; text-align: center; }
    body.kw-simple .kw-press-label small { display: none; }
    body.kw-simple .kw-focus-info { padding-right: 100px; }
    body.kw-simple .kw-toasts { bottom: calc(176px + env(safe-area-inset-bottom, 0px)); }
    body.kw-simple .kw-adv, body.kw-simple.kw-no-ticker .kw-adv { bottom: calc(176px + env(safe-area-inset-bottom, 0px)); } /* (advisors.css body.kw-no-ticker would win otherwise: Simple has no ticker) */
}
/* ---- Simple mode, Phase 6 (goals-ui.js, simple-ui.js): design swatches, Tidy up, the teaser, the phone's mini strip, celebrations, the Album, the Morning Post ---- */
.kw-goal-dz.is-on { background: linear-gradient(#4a4023, #3a3219); box-shadow: inset 0 0 0 2px var(--kw-gelb); }
.kw-goal-dz--cur { flex: 0 1 auto; max-width: 46%; }
.kw-goal-dz--cur small { margin-left: 4px; color: var(--kw-gelb2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.kw-goal-next-rw { display: none; font-style: normal; color: #a9c46f; }
.kw-goal-next.is-tease { color: var(--kw-paper); }
.kw-goal-next.is-tease .kw-goal-next-l { color: var(--kw-gelb); }
.kw-goal-next.is-tease .kw-goal-next-rw { display: inline; }
@media (max-width: 600px) {
    .kw-goal-dz { padding: 0 4px; font-size: 11.5px; }
    .kw-goal-dz span { display: inline; margin-left: 2px; }
    .kw-goal-dz i { width: 8px; }
    .kw-goal-dz--cur small { display: none; }
}
.kw-goal-mini { position: fixed; top: 0; left: 0; right: 0; z-index: 44; display: grid; grid-template-columns: minmax(0, 1fr) 90px 16px; gap: 10px; align-items: center; height: 36px; padding: 0 12px; border: 0; border-bottom: 2px solid #0a0907;
    background: linear-gradient(#2b291e, #1f1d15); color: var(--kw-paper); font: inherit; font-size: 14px; text-align: left; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
.kw-goal-mini[hidden] { display: none; }
.kw-goal-mini-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-goal-mini .kw-bar { margin: 0; height: 8px; }
.kw-goal-mini .bi { color: var(--kw-gelb); }
@media (min-width: 901px) { .kw-goal-mini { display: none; } }
.kw-coins { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.kw-coins i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff0b0, #e0b040 55%, #8a6418); box-shadow: 0 0 0 1px #5a4010;
    opacity: 0; animation: kw-coin 1.1s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes kw-coin { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 55% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 60px)) scale(.9); } }
.kw-chdone { position: fixed; top: 64px; left: 50%; z-index: 58; transform: translateX(-50%); display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; width: min(520px, calc(100vw - 32px)); box-sizing: border-box;
    padding: 10px 12px; background: linear-gradient(#3a3219, #26220f); border: 2px solid var(--kw-gelb); border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); animation: kw-chdone-in .4s ease-out; transition: opacity .4s; }
.kw-chdone.is-out { opacity: 0; }
.kw-chdone img { display: block; width: 48px; height: 48px; }
.kw-chdone div { display: grid; min-width: 0; }
.kw-chdone small { color: var(--kw-gelb); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.kw-chdone b { font-family: var(--kw-stencil); font-weight: 400; font-size: 19px; color: var(--kw-paper); }
.kw-chdone span { color: #cfc6ab; font-size: 13px; }
.kw-chdone-x { border: 0; background: none; color: var(--kw-dim); font-size: 16px; cursor: pointer; padding: 4px; }
@keyframes kw-chdone-in { 0% { opacity: 0; transform: translate(-50%, -14px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 520px) { .kw-chdone { grid-template-columns: 44px minmax(0, 1fr) auto; } .kw-chdone .kw-btn { grid-column: 1 / -1; justify-self: end; } .kw-chdone img { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .kw-coins { display: none; } .kw-chdone { animation: none; } }
.kw-al-house { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; }
.kw-al-house div { display: grid; gap: 2px; min-width: 0; }
.kw-al-house b { font-size: 17px; color: var(--kw-paper); }
.kw-al-house small { color: var(--kw-dim); font-size: 13px; }
.kw-al-bar { height: 8px; margin: 3px 0 0; max-width: 260px; }
.kw-al-pets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.kw-al-pet { display: grid; justify-items: center; gap: 2px; width: 64px; text-align: center; }
.kw-al-pet img { width: 40px; height: 40px; }
.kw-al-pet small, .kw-al-thing small { font-size: 12px; color: var(--kw-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.kw-al-medals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kw-al-medal { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; text-align: center; background: #26251c; border: 1px solid #0a0907; border-radius: 4px; opacity: .45; filter: grayscale(.8); }
.kw-al-medal.got { opacity: 1; filter: none; box-shadow: inset 0 0 0 1px var(--kw-gelb); }
.kw-al-medal img { width: 40px; height: 40px; }
.kw-al-medal small { font-size: 12px; line-height: 1.25; color: var(--kw-text); }
.kw-al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 4px; }
.kw-al-thing { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; background: #26251c; border: 1px solid #0a0907; border-radius: 4px; min-width: 0; }
.kw-al-thing img { width: 40px; height: 40px; }
.kw-al-thing.is-off { opacity: .45; }
.kw-al-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.kw-al-set { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; background: #26251c; border: 1px solid #0a0907; border-radius: 4px; }
.kw-al-dot { width: 12px; height: 12px; border-radius: 50%; }
.kw-al-set small { color: var(--kw-dim); }
.kw-al-pages { display: grid; gap: 8px; }
.kw-al-page { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; background: #e9dfc4; color: #2a2418; border-radius: 3px; box-shadow: 0 2px 0 #0a0907, inset 0 0 0 1px #c9bd9a; }
.kw-al-page img { width: 40px; height: 40px; }
.kw-al-page div { display: grid; gap: 1px; min-width: 0; }
.kw-al-page b { font-size: 15.5px; }
.kw-al-page small { color: #6c6148; font-size: 12.5px; }
.kw-al-page p { margin: 2px 0 0; font-size: 14px; line-height: 1.35; }
.kw-sp-fill { display: grid; gap: 4px; margin-bottom: 8px; }
.kw-sp-fill .kw-bar { margin: 0; height: 10px; }
.kw-sp-fill small { color: var(--kw-dim); font-size: 13.5px; }
.kw-bar--bad i { background: linear-gradient(90deg, #8e241c, #e0584c); }
.kw-mp-modal .kw-modal-body { padding-top: 4px; }
.kw-mp { padding: 12px 14px; background: #ede3c8; color: #231e14; border-radius: 3px; box-shadow: inset 0 0 0 1px #c9bd9a; }
.kw-mp-mast { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; padding-bottom: 6px; border-bottom: 3px double #231e14; }
.kw-mp-mast small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #5a4f38; }
.kw-mp-mast small:last-child { text-align: right; }
.kw-mp-mast b { font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1.1; text-align: center; }
.kw-mp-head { margin: 10px 0 2px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; }
.kw-mp .kw-mp-lead { margin: 0 0 10px; font-size: 15px; line-height: 1.4; color: #3a3226; }
.kw-mp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; padding: 8px 0; border-top: 1px solid #b9ad8a; border-bottom: 1px solid #b9ad8a; }
.kw-mp-col { display: grid; justify-items: center; gap: 1px; text-align: center; }
.kw-mp-col img { width: 32px; height: 32px; }
.kw-mp-col b { font-size: 18px; }
.kw-mp-col small { font-size: 12.5px; color: #5a4f38; }
.kw-mp-order { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 10px; padding: 8px; border: 1px dashed #8a7a52; }
.kw-mp-order div { display: grid; gap: 2px; }
.kw-mp-order small { font-size: 14px; line-height: 1.35; }
.kw-mp-goal { display: grid; margin-top: 10px; }
.kw-mp-goal small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #5a4f38; }
.kw-mp-goal b { font-size: 16px; }
.kw-mp-modal .kw-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 520px) { .kw-mp-mast { grid-template-columns: 1fr; text-align: center; } .kw-mp-mast small:last-child { display: none; } .kw-mp-mast small { text-align: center; } .kw-al-medals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---- Simple polish (simple-home.js): Home's cards, the house pictures, the newspaper window ---- */
.kw-sh-thumb, .kw-sp-row > .kw-sh-thumb { display: block; flex: none; width: 80px; height: 40px; object-fit: cover; border-radius: 3px; border: 1px solid #0a0907; background: #2b2a21; opacity: .55; transition: opacity .25s; }
.kw-sh-thumb.is-in { opacity: 1; }
.kw-sh-glyph { display: grid; place-items: center; opacity: 1; }
.kw-sh-glyph img { width: 36px; height: 36px; }
.kw-sp-row > .kw-sh-thumb { margin-right: 4px; }
.kw-sh-big { width: 128px; height: 64px; }
.kw-sh-house { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 8px; }
.kw-sh-house > div { display: grid; gap: 2px; min-width: 0; }
.kw-sh-house b { font-size: 17px; color: var(--kw-paper); }
.kw-sh-house small { color: var(--kw-dim); font-size: 13px; }
.kw-sh-bar { height: 8px; margin: 3px 0 0; max-width: 260px; }
.kw-sh-pct { font-style: normal; font-weight: 400; color: var(--kw-dim); font-size: 14px; }
.kw-sh-subs, .kw-sh-props { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-sh-props .kw-chip small { color: var(--kw-dim); margin-left: 4px; }
.kw-sp-main { flex-wrap: wrap; gap: 8px; }
.kw-sh-paper .kw-modal-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.kw-al-house .kw-al-thumb { width: 128px; height: 64px; }
.kw-al-house { grid-template-columns: auto minmax(0, 1fr); }
.kw-al-houses { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.kw-al-hs { display: grid; justify-items: center; gap: 2px; width: 80px; text-align: center; }
.kw-al-hs small { font-size: 12px; color: var(--kw-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.kw-al-pthumb, .kw-al-page > .kw-al-pthumb { width: 80px; height: 40px; }
.kw-al-page--house { grid-template-columns: 80px minmax(0, 1fr); }
@media (max-width: 520px) { .kw-sh-big, .kw-al-house .kw-al-thumb { width: 96px; height: 48px; } }
.kw-sh-paper .kw-news p { color: #3a3226; }
.kw-sh-paper .kw-news .kw-paper-note { color: #5a4a2a; }
/* Simple on a tablet (601-900 px): PRESS sits at the left of its row, so the advisor card starts right of it and never covers it */
@media (min-width: 601px) and (max-width: 900px) { body.kw-simple .kw-adv, body.kw-simple.kw-no-ticker .kw-adv { left: 200px; max-width: calc(100vw - 212px); } }
/* Simple: the line picker's goods that lose money today (ui.js openPicker; their line would stand at '@loss') */
.kw-pick.kw-pick--loss { opacity: .7; }
.kw-pick .kw-pick-lossnote { color: #e08a7a; font-weight: 600; }