/* Kriegsspiel on its own page (games/kriegsspiel.php): the title screen. It wears the card game's own look (.kc-root
   tokens and the map-table background of cards.css); the game itself opens full-window over it (cards-ui.js). */
body.ks-body { margin: 0; min-height: 100%; background: #10110d; color: #ece4cb; font-family: 'Barlow Semi Condensed', 'Segoe UI', sans-serif; }
.ks-fail { padding: 24px; font-family: monospace; color: #d4b064; }
.kc-root.ks-title { display: block; overflow-x: hidden; overflow-y: auto; z-index: 1; animation: none; --kw-sb-track: transparent; }
.kc-root.ks-title[hidden] { display: none; }
.ks-title-main { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 1080px; min-height: 100%; margin: 0 auto; padding: 28px 24px 22px;
    display: flex; flex-direction: column; justify-content: center; gap: 22px; }

.ks-head { display: flex; align-items: center; gap: 18px; }
.ks-emblem { flex: none; display: block; line-height: 0; filter: drop-shadow(0 4px 0 #0a0907); }
.ks-head h1 { margin: 0; font-family: var(--stencil); font-weight: 400; font-size: clamp(38px, 7vw, 68px); letter-spacing: .08em; line-height: 1; color: var(--gold2);
    text-shadow: 0 3px 0 #0a0907, 0 0 24px rgba(212, 176, 100, .25); }
.ks-sub { margin: 6px 0 0; font-family: var(--type); color: var(--dim); font-size: 17px; }

.ks-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 28px; align-items: center; }
.ks-fan { position: relative; height: 330px; display: flex; justify-content: center; align-items: center; }
.ks-fan-c { position: absolute; left: 50%; top: 50%; transform-origin: 50% 120%; transition: transform .25s ease; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }
.ks-fan-0 { transform: translate(-50%, -50%) translateX(-118px) rotate(-11deg); }
.ks-fan-1 { transform: translate(-50%, -54%); z-index: 2; }
.ks-fan-2 { transform: translate(-50%, -50%) translateX(118px) rotate(11deg); }
.ks-fan .kc-card { pointer-events: none; }

.ks-side { display: flex; flex-direction: column; gap: 14px; }
.ks-menu { display: flex; flex-direction: column; gap: 8px; }
.ks-mbtn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 8px 14px; text-align: left; cursor: pointer; border-radius: 3px;
    border: 1px solid #5a5640; background: linear-gradient(#3a3828, #2a291d); color: var(--paper); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 #0a0907;
    font: 600 17px/1.15 var(--f); letter-spacing: .02em; transition: border-color .15s, background .15s, transform .1s; }
.ks-mbtn > i { flex: none; width: 26px; font-size: 21px; text-align: center; color: var(--gold); }
.ks-mbtn span { display: flex; flex-direction: column; min-width: 0; }
.ks-mbtn small { font-weight: 400; font-size: 14px; color: var(--dim); }
.ks-mbtn:hover, .ks-mbtn:focus-visible { border-color: var(--gold); background: linear-gradient(#46432f, #323022); outline: none; }
.ks-mbtn:active { transform: translateY(1px); }
.ks-mbtn.ks-main { min-height: 62px; color: var(--ink); border-color: #6b5524; background: linear-gradient(var(--gold2), #b8913f); font-size: 20px; }
.ks-mbtn.ks-main > i, .ks-mbtn.ks-main small { color: #4a3a17; }
.ks-mbtn.ks-main:hover, .ks-mbtn.ks-main:focus-visible { background: linear-gradient(#ffe09a, #c9a14b); border-color: #fff3; }

.ks-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 10px 12px; border: 1px dashed #4a4735; border-radius: 3px; background: rgba(16, 17, 13, .55);
    font-size: 15px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ks-stats span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ks-stats i { color: var(--gold); } .ks-stats .bi-gem { color: var(--cr); }
.ks-stats b { color: var(--paper); font-weight: 600; }
.ks-first { margin: 0; font-family: var(--type); font-size: 15px; color: var(--gold2); }

.ks-note { margin: 0; max-width: 760px; font-size: 15px; color: var(--dim); }
.ks-note a, .ks-link { color: var(--gold2); }
.ks-note a:hover, .ks-link:hover { color: #fff; }
.ks-links { display: flex; gap: 18px; font-size: 15px; }
.ks-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

@media (max-width: 760px) {
    .ks-title-main { justify-content: flex-start; padding: 18px 16px 18px; gap: 16px; }
    .ks-head { gap: 12px; }
    .ks-head .ks-emblem svg { width: 52px; height: 52px; }
    .ks-sub { font-size: 15px; }
    .ks-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ks-fan { height: 210px; }
    .ks-fan-c { transform-origin: 50% 50%; }
    .ks-fan-0 { transform: translate(-50%, -50%) translateX(-82px) rotate(-10deg) scale(.66); }
    .ks-fan-1 { transform: translate(-50%, -52%) scale(.7); }
    .ks-fan-2 { transform: translate(-50%, -50%) translateX(82px) rotate(10deg) scale(.66); }
    .ks-mbtn { min-height: 46px; font-size: 16px; }
    .ks-mbtn.ks-main { min-height: 54px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .ks-mbtn, .ks-fan-c { transition: none; } }