/* Kriegswerk — the new-game options screen (start-ui.js, KW.StartUI). One full-screen page over the title's panorama:
   a header, the options (left) beside a large preview (right; above the options on a phone) and a summary bar with Start.
   Faction touches stay small: a faint wash on the preview's frame only (.kw-so[data-fac]). Every motion stops under
   prefers-reduced-motion (the JS draws the badge once and the highlight jumps). */
.kw-title[data-step="options"] .kw-title-ui { padding: 0; display: block; }
.kw-title[data-step="options"] .kw-title-shade { background: rgba(8, 7, 5, .74); }
.kw-so { position: relative; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: var(--kw-text); }
.kw-so-head { display: flex; align-items: center; gap: 16px; padding: 12px clamp(16px, 3vw, 32px); border-bottom: 1px solid rgba(212, 176, 100, .22); background: rgba(14, 13, 10, .7); }
.kw-so-head .kw-title-back { margin: 0; }
.kw-so-head h1 { margin: 0; font-family: var(--kw-stencil); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .05em; color: var(--kw-gelb); }
.kw-so-head h1 small { margin-left: 10px; font-family: var(--kw-font); font-size: 14px; letter-spacing: 0; color: var(--kw-dim); }
.kw-so-body { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(360px, 1.05fr); min-height: 0; }
.kw-so-opts { overflow-y: auto; padding: 14px clamp(16px, 2.4vw, 28px) 28px; scrollbar-gutter: stable; }
.kw-so-sec { margin-bottom: 16px; }
.kw-so-sec h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 7px; font: 600 16px/1.2 var(--kw-font); color: var(--kw-paper); letter-spacing: .02em; }
.kw-so-sec h3 em { margin-left: auto; font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--kw-dim); }
.kw-so-n { display: inline-grid; place-items: center; width: 22px; height: 22px; font: 400 14px/1 var(--kw-stencil); color: #1a150b; background: var(--kw-gelb); }
.kw-so-grp { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.kw-so-grp.kw-so-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kw-so-grp.kw-so-three { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kw-so-grp.kw-so-sites { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
/* the sliding selection highlight: one frame per group that moves to the chosen option */
.kw-so-hl { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0; border: 2px solid var(--kw-gelb); background: rgba(212, 176, 100, .12);
    box-shadow: 0 0 0 1px #0a0907, 0 0 16px rgba(212, 176, 100, .28); transition: transform .28s cubic-bezier(.3, .7, .2, 1), width .28s, height .28s, opacity .2s; }
.kw-so-opt { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; min-height: 56px; padding: 7px 10px; text-align: left; cursor: pointer; color: var(--kw-text);
    font: inherit; background: rgba(30, 28, 21, .82); border: 1px solid rgba(212, 176, 100, .16); transition: background .12s, border-color .12s; }
.kw-so-opt:hover { background: rgba(52, 45, 28, .88); border-color: rgba(212, 176, 100, .45); }
.kw-so-opt:focus-visible { outline: 2px solid #f0cf7e; outline-offset: 2px; }
.kw-so-opt.sel { background: rgba(58, 48, 26, .6); border-color: transparent; }
.kw-so-opt.off { opacity: .55; cursor: not-allowed; }
.kw-so-opt.off .kw-so-g { filter: grayscale(1); }
.kw-so-g { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
.kw-so-g img { image-rendering: pixelated; }
.kw-so-t { display: grid; gap: 1px; min-width: 0; }
.kw-so-t strong { font-size: 15px; font-weight: 600; color: var(--kw-paper); }
.kw-so-t small { font-size: 12.5px; color: var(--kw-dim); line-height: 1.25; }
.kw-so-t small.kw-so-why { color: #e0a080; font-style: italic; }
.kw-so-opt .kw-diff { position: absolute; top: 5px; right: 6px; transform: scale(.82); transform-origin: top right; }
.kw-so-grp.kw-so-sites .kw-so-opt { padding-top: 20px; }
.kw-so-name { display: flex; gap: 6px; max-width: 520px; }
.kw-so-name .kw-input { flex: 1; min-width: 0; font-size: 16px; }

/* the preview */
.kw-so-prev { position: relative; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 14px clamp(16px, 2.4vw, 28px) 20px; border-left: 1px solid rgba(212, 176, 100, .18);
    background: linear-gradient(180deg, rgba(20, 18, 13, .92), rgba(14, 13, 10, .95)); }
.kw-so[data-fac="su"] .kw-so-prev { box-shadow: inset 0 3px 0 rgba(184, 40, 30, .55); }
.kw-so[data-fac="uk"] .kw-so-prev { box-shadow: inset 0 3px 0 rgba(38, 56, 102, .9); }
.kw-so[data-fac="de"] .kw-so-prev { box-shadow: inset 0 3px 0 rgba(212, 176, 100, .45); }
.kw-so-pic { position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(ellipse at 50% 60%, rgba(212, 176, 100, .14), rgba(10, 9, 7, 0) 70%), #1a1711; border: 1px solid rgba(212, 176, 100, .3); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.kw-so-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; }
.kw-so-layer.on { opacity: 1; }
.kw-so-layer.now { transition: none; }
.kw-so-layer img { width: 100%; height: 100%; object-fit: cover; display: block; animation: kw-so-pan 22s ease-in-out infinite alternate; transform-origin: 30% 40%; }
.kw-so-layer.art { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, rgba(212, 176, 100, .16), rgba(10, 9, 7, 0) 65%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 4px), #15130e; }
.kw-so-art img { image-rendering: pixelated; width: clamp(96px, 14vw, 160px); height: auto; animation: kw-so-bob 5s ease-in-out infinite; }
@keyframes kw-so-pan { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-2.5%, -1.5%); } }
@keyframes kw-so-bob { 50% { transform: translateY(-4px); } }
.kw-so-badge { position: absolute; right: clamp(22px, 3vw, 36px); top: 20px; width: 132px; height: 108px; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); image-rendering: pixelated; }
.kw-so-cal { position: absolute; left: clamp(22px, 3vw, 36px); top: 22px; display: grid; justify-items: center; min-width: 68px; padding: 4px 8px 6px; color: #1a150b;
    background: linear-gradient(180deg, #b0302a 0 22px, #ece4cb 22px); box-shadow: 0 4px 10px rgba(0, 0, 0, .55); perspective: 300px; transform-origin: 50% 0; }
.kw-so-cal-m { font: 600 13px/22px var(--kw-font); letter-spacing: .1em; text-transform: uppercase; color: #fff4e0; height: 22px; margin-top: -4px; }
.kw-so-cal-y { font: 400 26px/1.1 var(--kw-stencil); }
.kw-so-cal.flip { animation: kw-so-flip .5s cubic-bezier(.3, .7, .3, 1); }
@keyframes kw-so-flip { 0% { transform: rotateX(-80deg); opacity: .3; } 70% { transform: rotateX(8deg); opacity: 1; } 100% { transform: none; } }
.kw-so-ptext { padding-top: 12px; }
.kw-so-ptext.in { animation: kw-so-in .3s ease; }
@keyframes kw-so-in { from { opacity: 0; transform: translateY(6px); } }
.kw-so-kick { margin: 0; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--kw-gelb); }
.kw-so-ptext h2 { margin: 2px 0 0; font: 400 clamp(22px, 2.3vw, 30px)/1.1 var(--kw-stencil); color: var(--kw-paper); }
.kw-so-sub { margin: 3px 0 0; color: var(--kw-dim); font-size: 14px; }
.kw-so-text { margin: 8px 0 10px; color: #cfc6ab; font-size: 15px; line-height: 1.45; }
.kw-so-off { margin: 8px 0 0; padding: 6px 10px; color: #f0c0a0; background: rgba(120, 40, 24, .35); border-left: 3px solid #d0584a; font-size: 14px; }
.kw-so-facts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 1px; background: rgba(212, 176, 100, .12); border: 1px solid rgba(212, 176, 100, .16); }
.kw-so-facts li { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 10px; align-items: center; padding: 6px 10px; background: rgba(20, 18, 13, .96); font-size: 14px; }
.kw-so-facts li span { color: var(--kw-dim); }
.kw-so-facts li b { font-weight: 500; color: var(--kw-text); }
.kw-so-facts li span:empty { display: none; }
.kw-so-facts li span:empty + b { grid-column: 1 / -1; }
.kw-so-goods { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }
.kw-so-goods span { display: grid; place-items: center; width: 34px; height: 34px; background: #15140f; box-shadow: inset 0 0 0 1px #45422f; }
.kw-so-lbl { margin: 6px 0 4px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--kw-gelb); }
.kw-so-era { list-style: none; margin: 0; padding: 0 0 0 4px; border-left: 2px solid rgba(212, 176, 100, .3); display: grid; gap: 4px; }
.kw-so-era li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding-left: 8px; font-size: 14px; position: relative; }
.kw-so-era li::before { content: ''; position: absolute; left: -8px; top: 7px; width: 8px; height: 8px; background: var(--kw-gelb); border-radius: 50%; transform: translateX(-1px); }
.kw-so-era time { font-family: var(--kw-mono); color: var(--kw-gelb); }
.kw-so-note { margin: 6px 0 0; font-size: 13.5px; color: var(--kw-dim); font-style: italic; }
.kw-so-named { display: grid; gap: 3px; }
.kw-so-named > span { display: flex; align-items: center; gap: 7px; }
.kw-so-named img { image-rendering: pixelated; flex: none; }
.kw-so-named em { font-style: normal; color: var(--kw-text); }
.kw-so-facts li b i { font-style: normal; color: var(--kw-paper); }
/* the phone strip's More/Less (start-ui.js data-pvmore); a desktop shows the whole preview */
.kw-so-more { display: none; }

/* the summary bar */
.kw-so-bar { display: flex; align-items: center; gap: 12px; padding: 10px clamp(16px, 3vw, 32px); border-top: 1px solid rgba(212, 176, 100, .3); background: rgba(14, 13, 10, .94); }
.kw-so-sum { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.kw-so-chip { display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 6px; cursor: pointer; color: var(--kw-text); font: inherit; text-align: left; background: rgba(36, 33, 24, .9); border: 1px solid rgba(212, 176, 100, .18); }
.kw-so-chip:hover, .kw-so-chip:focus-visible { border-color: var(--kw-gelb); outline: none; }
.kw-so-chip span { display: grid; font-size: 13.5px; line-height: 1.15; }
.kw-so-chip small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--kw-dim); }
.kw-so-chip img { image-rendering: pixelated; }
.kw-so-go { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.kw-so-go small { font-size: 12.5px; font-weight: 400; opacity: .75; }

/* a phone: one column, the preview first and compact, the bar stays at the foot */
@media (max-width: 860px) {
    .kw-so { height: auto; min-height: 100%; grid-template-rows: auto auto auto; }
    .kw-so-head { padding: 10px 16px; gap: 10px; }
    .kw-so-head h1 small { display: block; margin: 2px 0 0; }
    .kw-so-body { grid-template-columns: 1fr; }
    /* the preview stays in sight while the options scroll under it: a short strip (a small picture, the title and one
       line) that leaves the screen to the options; "More" opens it to the full facts and "Less" folds it again */
    .kw-so-prev { order: -1; position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; align-items: start; max-height: none; overflow: visible;
        border-left: 0; border-bottom: 1px solid rgba(212, 176, 100, .3); padding: 8px 16px; background: #14120e; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
    .kw-so[data-fac] .kw-so-prev { box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
    .kw-so-pic { grid-row: 1 / span 2; box-shadow: none; }
    .kw-so-ptext { padding-top: 0; min-width: 0; }
    .kw-so-ptext h2 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kw-so-kick, .kw-so-lbl { font-size: 11px; }
    .kw-so-text { font-size: 13.5px; margin: 3px 0 0; line-height: 1.35; }
    .kw-so-sub { font-size: 12.5px; }
    .kw-so-off { margin: 3px 0 0; padding: 3px 8px; font-size: 13px; }
    /* folded: one line under the title (the reason when the option is closed, else the description), nothing more */
    .kw-so-prev:not(.open) .kw-so-sub, .kw-so-prev:not(.open) .kw-so-facts, .kw-so-prev:not(.open) .kw-so-lbl, .kw-so-prev:not(.open) .kw-so-era,
    .kw-so-prev:not(.open) .kw-so-note, .kw-so-prev:not(.open) .kw-so-off + .kw-so-text { display: none; }
    .kw-so-prev:not(.open) .kw-so-text, .kw-so-prev:not(.open) .kw-so-off { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kw-so-more { display: inline-flex; grid-column: 2; justify-self: start; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; min-height: 26px; cursor: pointer;
        font: 600 12.5px/1 var(--kw-font); color: var(--kw-gelb); background: transparent; border: 1px solid rgba(212, 176, 100, .35); }
    .kw-so-more:focus-visible { outline: 2px solid #f0cf7e; outline-offset: 2px; }
    /* open: the picture full width on top, every fact below, scrolling inside the strip */
    .kw-so-prev.open { grid-template-columns: minmax(0, 1fr); max-height: 72vh; overflow-y: auto; padding-bottom: 10px; }
    .kw-so-prev.open .kw-so-pic { grid-row: auto; max-width: 420px; }
    .kw-so-prev.open .kw-so-ptext { padding-top: 8px; }
    .kw-so-prev.open .kw-so-ptext h2 { white-space: normal; }
    .kw-so-prev.open .kw-so-more { grid-column: 1; margin-top: 8px; }
    .kw-so-opts { overflow: visible; padding: 12px 16px 20px; }
    .kw-so-badge { display: none; }
    .kw-so-cal { display: none; }
    .kw-so-prev.open .kw-so-cal:not([hidden]) { display: grid; left: 24px; top: 14px; min-width: 44px; padding: 2px 5px 3px; background: linear-gradient(180deg, #b0302a 0 16px, #ece4cb 16px); }
    .kw-so-cal-m { font-size: 10px; line-height: 16px; height: 16px; margin-top: -2px; }
    .kw-so-cal-y { font-size: 15px; }
    .kw-so-facts li { grid-template-columns: 1fr; gap: 2px; padding: 5px 8px; font-size: 13px; }
    .kw-so-sec h3 em { display: none; }
    .kw-so-bar { position: sticky; bottom: 0; z-index: 2; flex-wrap: wrap; padding: 8px 16px; }
    .kw-so-sum { display: none; }
    .kw-so-go { width: 100%; justify-content: center; }
    .kw-so-grp.kw-so-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kw-so-grp.kw-so-three { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 420px) {
    .kw-so-opt { gap: 6px; padding: 6px 8px; }
    .kw-so-g { width: 32px; height: 32px; } .kw-so-g img { width: 32px; height: 32px; }
    .kw-so-t strong { font-size: 14px; }
    .kw-so-grp.kw-so-sites .kw-so-opt { padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .kw-so-layer, .kw-so-hl, .kw-so-opt { transition: none !important; }
    .kw-so-layer img, .kw-so-art img, .kw-so-cal.flip, .kw-so-ptext.in { animation: none !important; }
}