/* Kompass windows, design system v3 (02.11.2026). Shared by the signed-in Kompass (/kompass with a character,
   begleiter.css adds the app shell and window tiers) and the guest example on /kompass.
   Reused from design-v3.css: .gb-window (Stufe 1, filigree), .gb-panel (Stufe 2), .gb-xp/.gb-xp__fill/.gb-xp__rest,
   .gb-bar/.gb-bar__fill, .gb-list rows with .gb-ok/.gb-warn/.gb-bad, .gb-tag, .gb-hint/.gb-gem, .gb-btn, .gb-protrude,
   .gb-display/.gb-wtitle. Only layout and sizes live here. */
.kp-board{--kp-rise:56px;--kp-obj-h:150px;--kp-k:1;--kp-ratio:1.09;color:var(--gb-text);font-family:var(--gb-font-text);font-size:16px;line-height:1.45}
.kp-board *{box-sizing:border-box}
.kp-board img{display:block}
.kp-board .bg-card{position:relative;min-width:0;margin:0}
.kp-board .gb-window{padding:18px 22px}
.kp-board .kp-panel{padding:14px 18px;overflow:hidden}
.kp-board .gb-wtitle{margin:0 0 8px;font-size:19px;line-height:1.25}
.kp-board .kp-ptitle{font-size:18px;margin:0 0 6px}
.kp-board p{margin:0}
.kp-board .bg-nw{white-space:nowrap}

/* Character head: name in gold, class in its class colour, level with − and +, XP bar, next milestone */
.kp-head .bg-id{display:flex;align-items:center;gap:14px}
.kp-head .bg-por{width:48px;height:48px;border-radius:3px;border:1px solid var(--gb-gold);box-shadow:0 0 0 1px #000,0 4px 10px rgba(0,0,0,.5);flex:none}
.kp-head .bg-who{flex:1;min-width:0}
.kp-head .bg-who .kp-name{margin:0;font-size:28px;line-height:1.12;color:var(--gb-gold-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-head .bg-who p{margin-top:2px;font-size:15px;color:var(--gb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-class{font-weight:600;color:var(--gb-text)}
.kp-class[data-class=warrior]{color:var(--c-warrior)}.kp-class[data-class=paladin]{color:var(--c-paladin)}.kp-class[data-class=hunter]{color:var(--c-hunter)}
.kp-class[data-class=rogue]{color:var(--c-rogue)}.kp-class[data-class=priest]{color:var(--c-priest)}.kp-class[data-class=shaman]{color:var(--c-shaman)}
.kp-class[data-class=mage]{color:var(--c-mage)}.kp-class[data-class=warlock]{color:var(--c-warlock)}.kp-class[data-class=druid]{color:var(--c-druid)}
.kp-head .bg-lvl{display:flex;align-items:center;gap:8px;flex:none}
.kp-head .bg-lvl output{min-width:54px;text-align:center;font:400 34px/1 var(--gb-font-display);-webkit-text-stroke:var(--gb-display-stroke) currentColor;color:var(--gb-title);text-shadow:0 1px 0 #000;font-variant-numeric:tabular-nums}
.kp-board .bg-step{font-size:22px;line-height:1;flex:none}
.kp-xp{margin-top:12px}
.kp-xp-label{display:flex;justify-content:space-between;gap:4px 14px;flex-wrap:wrap;font-size:14px;line-height:1.35;color:var(--gb-quiet);margin-bottom:6px}
.kp-xp-label b{color:var(--gb-text);font-weight:600}
.kp-head .gb-xp{height:16px}
.kp-rest{color:#8fb4ec}
.kp-xp-unknown{background:repeating-linear-gradient(135deg,#0b0907 0 6px,#17130e 6px 12px)}
.kp-fill .gb-xp__fill{transform-origin:left center;animation:kp-fill 1.2s cubic-bezier(.2,.7,.2,1) .15s both}
.kp-fill .gb-xp__rest{animation:kp-fade .5s 1.2s both}
@keyframes kp-fill{from{transform:scaleX(0)}}
@keyframes kp-fade{from{opacity:0}}
/* Examples on public pages (.kp-fill-lazy): the bar waits empty until kompass-fill.js sees it on screen. Only with
   scripting on and motion allowed; otherwise the bar simply stands full. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
 .kp-fill-lazy:not(.kp-xp-go) .gb-xp__fill{animation:none;transform:scaleX(0)}
 .kp-fill-lazy:not(.kp-xp-go) .gb-xp__rest{animation:none;opacity:0}
}
.kp-board .kp-mile{margin-top:9px;font-size:15px}
.kp-board .kp-mile b{font-weight:600}
.kp-board .bg-turn{margin-top:6px;font-size:14px;color:var(--gb-muted)}
.kp-board .bg-turn b{color:var(--gb-text)}
.kp-board .bg-turn em{font-style:normal;color:var(--gb-quiet)}

/* Focus window (Stufe 1) with the one protruding object; the object lifts a little on hover */
.kp-focus-wrap{position:relative;padding-top:var(--kp-rise);display:flex;flex-direction:column;min-width:0;min-height:0}
.kp-focus-wrap>.kp-focus{flex:0 1 auto;min-height:0;overflow:hidden}
.kp-focus-wrap[data-kind=trainer]{--kp-k:1;--kp-ratio:.5}
.kp-focus-wrap[data-kind=talent]{--kp-k:.78;--kp-ratio:1.46}
.kp-focus-wrap[data-kind=zone]{--kp-k:.86;--kp-ratio:1.22}
.kp-focus-wrap[data-kind=quests]{--kp-k:.84;--kp-ratio:1.26}
.kp-obj{right:16px;top:0;height:calc(var(--kp-obj-h) * var(--kp-k));width:auto;z-index:2;transition:transform .25s ease,filter .25s ease}
.kp-focus-wrap:hover .kp-obj{transform:translateY(-6px);filter:drop-shadow(0 22px 16px rgba(0,0,0,.75))}
.kp-obj-space{float:right;width:calc(var(--kp-obj-h) * var(--kp-k) * var(--kp-ratio) - 2px);height:max(0px,calc(var(--kp-obj-h) * var(--kp-k) - var(--kp-rise) - 14px));margin-left:12px}
.kp-focus .kp-wtitle{margin-bottom:4px}
.kp-focus .bg-focus{min-width:0}
.kp-title{font-size:28px;line-height:1.15;color:var(--gb-title)}
.kp-meta{margin-top:4px!important;font-size:15px;color:var(--gb-quiet)}
.kp-focus .bg-qlist{clear:both;margin-top:12px}
.kp-board .bg-qhead{font-size:14px;color:var(--gb-quiet);margin-bottom:2px}
.kp-qlist{list-style:none;margin:0;padding:0}
.kp-board .bg-q{display:grid;grid-template-columns:44px minmax(0,auto) minmax(0,1fr);align-items:center;column-gap:8px;min-height:44px;border-top:1px solid var(--gb-rule);font-size:15px}
.kp-board .bg-q b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.kp-board .bg-q .gb-row__aside{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:14px}
.kp-st{width:44px;height:44px;margin:0 0 0 -10px;padding:0;border:0;background:radial-gradient(circle,rgba(255,240,210,.05) 0 13px,transparent 14px);display:grid;place-items:center;font:700 17px/1 var(--gb-font-text)}
button.kp-st{cursor:pointer}
button.kp-st:hover{background:radial-gradient(circle,rgba(255,240,210,.1) 0 13px,rgba(201,162,78,.55) 14px 15px,transparent 16px)}
.kp-board .kp-hint{margin-top:12px;font-size:15px}
.kp-board .kp-actions{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.kp-board .kp-actions .gb-btn{max-width:100%;white-space:normal;text-align:center}
.kp-spells{clear:both;margin-top:10px!important}
.kp-board .bg-tasks{clear:both;margin-top:12px;border-top:1px solid var(--gb-rule)}
.kp-board .bg-task{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--gb-rule)}
.kp-board .bg-task:last-child{border-bottom:0}
.kp-board .bg-task img{width:28px;height:28px;border-radius:2px;flex:none;object-fit:cover;box-shadow:0 0 0 1px #000,0 0 0 2px var(--gb-brass-line)}
.kp-board .bg-t{flex:1;min-width:0}
.kp-board .bg-task b{display:block;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-board .bg-task span{display:block;font-size:14px;color:var(--gb-quiet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-board .bg-task .bg-done{margin-left:auto}
.kp-board .bg-dot{width:8px;height:8px;border-radius:50%;background:var(--gb-gold);flex:none;margin:0 10px}

/* Talent plan (Stufe 2): next point highlighted, then the plan with icons and level range */
.kp-board .bg-next{display:flex;gap:12px;align-items:center;padding:10px 12px;margin:2px 0 8px;border:1px solid var(--gb-gold);border-radius:3px;background:linear-gradient(90deg,rgba(201,162,78,.16),rgba(201,162,78,.03));box-shadow:0 0 0 1px #000}
.kp-board .bg-next img{width:40px;height:40px;border-radius:2px;flex:none;box-shadow:0 0 0 1px #000}
.kp-board .bg-next small{display:block;font-size:14px;color:var(--gb-gold-text)}
.kp-board .bg-next b{display:block;font-size:17px;font-weight:600;color:var(--gb-title)}
.kp-board .bg-up{position:relative;border:1px solid var(--gb-gold);border-radius:3px;background:linear-gradient(90deg,rgba(201,162,78,.16),rgba(201,162,78,.03));box-shadow:0 0 0 1px #000;padding:10px 46px 10px 12px;margin-bottom:8px}
.kp-board .kp-up-title{font-size:18px;color:var(--gb-gold-text);margin-bottom:2px}
.kp-board .bg-upi{display:flex;gap:10px;align-items:center;padding:3px 0}
.kp-board .bg-upi img{width:30px;height:30px;border-radius:2px}
.kp-board .bg-upi b{font-weight:600;font-size:15px}
.kp-board .bg-upi span{display:block;font-size:14px;color:var(--gb-muted)}
.kp-board .bg-x{position:absolute;right:0;top:0;width:44px;height:44px;border:0;background:none;color:var(--gb-quiet);font-size:22px;cursor:pointer}
.kp-board .bg-tl{display:flex;align-items:center;gap:10px;padding:4px 8px;margin:0 -8px;font-size:15px;color:var(--gb-text);border-radius:3px}
.kp-board .bg-tl.now{background:rgba(201,162,78,.1);box-shadow:inset 0 0 0 1px rgba(201,162,78,.35)}
.kp-board .bg-tl img{width:24px;height:24px;border-radius:2px;flex:none;box-shadow:0 0 0 1px #000}
.kp-board .bg-l{width:44px;flex:none;text-align:right;color:var(--gb-quiet);font-size:14px;font-variant-numeric:tabular-nums}
.kp-tname{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-board .bg-r{margin-left:auto;flex:none;color:var(--gb-quiet);font-size:14px}
.kp-board .bg-note{font-size:14px;color:var(--gb-quiet);margin-top:8px}

/* Trainer (Stufe 2): learnable since the last visit, then from which level the next visit pays off. Key abilities
   in gold with a tag; no costs (the trainer data has none). */
.kp-board .kp-tr-head{font-size:15px;color:var(--gb-muted);margin:2px 0 4px}
.kp-board .kp-tr-head b{color:var(--gb-text);font-weight:600}
.kp-board .kp-tr-head+.kp-tr-next{margin-top:2px}
.kp-board .kp-tr.key .kp-tname{color:var(--gb-gold-text);font-weight:600}
.kp-board .kp-tr-tag{margin-left:auto;flex:none;padding:3px 7px;font-size:12px}
.kp-board .kp-tr-more{font-size:14px;color:var(--gb-quiet);padding:2px 0 0 54px}
.kp-board .kp-tr-next{margin-top:10px;font-size:15px}
.kp-board .kp-tr-next b{font-weight:600;color:var(--gb-title)}
.kp-board .kp-tr-done{margin-top:8px}
.kp-board .kp-tr-sub{font-size:14px;color:var(--gb-quiet);margin:10px 0 2px}

/* Dungeons for you (Stufe 2): names in their finder difficulty colour, status as tags */
.kp-board .bg-dg{border-bottom:0;border-top:1px solid var(--gb-rule)}
.kp-board .bg-dg:first-of-type{border-top:0}
.kp-dg--now{color:#f2d36b}.kp-dg--easy{color:#86c95e}.kp-dg--hard{color:#f0965a}
.kp-tags{display:flex!important;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex:none;max-width:52%}
.kp-tags .gb-tag{display:inline-flex}

/* Professions (Stufe 2): moss bars with values; never extrapolated */
.kp-board .kp-prof{align-items:flex-start;border-bottom:0;border-top:1px solid var(--gb-rule)}
.kp-board .kp-prof:first-of-type{border-top:0}
.kp-board .kp-prof img{margin-top:2px}
.kp-prof-head{display:flex;justify-content:space-between;gap:10px}
.kp-board .kp-prof-val{display:inline!important;color:var(--gb-text)!important;font-size:15px!important;font-variant-numeric:tabular-nums}
.kp-board .kp-prof .gb-bar{margin:5px 0 4px}

/* At a glance (Stufe 2, smaller windows) */
.kp-board .bg-glance{margin:0}
.kp-board .bg-gl{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:6px 0;border-top:1px solid var(--gb-rule);font-size:15px;align-items:baseline}
.kp-board .bg-gl:first-child{border-top:0}
.kp-board .bg-gl dt{color:var(--gb-quiet);font-size:14px}
.kp-board .bg-gl dd{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-board .bg-gl dd em{font-style:normal;color:var(--gb-quiet);font-size:14px}
.kp-board .stale,.kp-board .stale b,.kp-board .stale span,.kp-board .stale dd{color:var(--gb-quiet)}
.kp-board .stale .gb-bar__fill{filter:saturate(.3)}

/* Signed-in Kompass as a dashboard (.kp-dash, Bo 03.11.2026): no painted object, the focus keeps Stufe 1 as a calm
   gold edge without the filigree overhang, all other windows are Stufe 2 panels with the same window head. Denser
   rows, numbers right-aligned in tabular figures, small icons only where they carry information (class, talents,
   professions at 20 px), status as tags instead of icons. The guest example and the home teaser keep the showcase. */
.kp-dash .gb-wtitle,.kp-dash .kp-ptitle{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--gb-rule);font-size:17px;line-height:1.25;color:var(--gb-gold-text)}
.kp-dash .kp-head.gb-panel{padding:12px 16px}
.kp-dash .kp-panel{padding:12px 16px}
.kp-dash .kp-focus.gb-window{border:1px solid var(--gb-gold);border-image:none;border-radius:var(--gb-r-panel);padding:12px 16px 14px;box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(201,162,78,.22),var(--gb-shadow-1),var(--gb-soul-halo)}
.kp-dash .kp-focus-wrap{padding-top:0}
.kp-dash .kp-focus .kp-wtitle{margin-bottom:8px}
.kp-dash .kp-title{font-size:26px}
.kp-dash .kp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.kp-dash .kp-focus .bg-qlist{margin-top:10px}
.kp-dash .bg-q{min-height:40px}
.kp-dash .bg-q .gb-row__aside{color:var(--gb-quiet)}
.kp-dash .kp-head .bg-por{width:40px;height:40px}
.kp-dash .kp-head .bg-who .kp-name{font-size:26px}
.kp-dash .kp-head .bg-lvl output{font-size:30px}
.kp-dash .kp-xp{margin-top:10px}
.kp-dash .kp-mile,.kp-dash .bg-turn{margin-top:6px;font-size:14px}
/* Rows: one line, name left, value and status right */
.kp-dash .bg-task{gap:10px;padding:6px 0}
.kp-dash .bg-task b{font-size:15px}
.kp-dash .bg-task .gb-tag{flex:none;padding:3px 7px;font-size:12px}
.kp-dash .bg-tasks .bg-task{flex-wrap:wrap;row-gap:6px}
.kp-dash .bg-tasks .bg-t{min-width:min(100%,200px)}
.kp-dash .kp-task-head{display:flex;align-items:center;gap:8px;min-width:0}
.kp-dash .kp-task-head b{min-width:0}
.kp-dash .bg-tasks{margin-top:10px}
.kp-dash .bg-dg .bg-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kp-dash .bg-dg .bg-t span{flex:none;font-variant-numeric:tabular-nums;text-align:right}
.kp-dash .kp-tags{gap:4px;max-width:45%}
.kp-dash .kp-tags .gb-tag{padding:3px 6px;font-size:12px}
.kp-dash .bg-next{gap:10px;padding:7px 10px;margin:0 0 6px;box-shadow:none;background:rgba(201,162,78,.08)}
.kp-dash .bg-next img{width:20px;height:20px}
.kp-dash .bg-next small{font-size:13px}
.kp-dash .bg-next b{font-size:16px}
.kp-dash .bg-up{padding:8px 44px 8px 10px;box-shadow:none;background:rgba(201,162,78,.08);margin-bottom:6px}
.kp-dash .kp-up-title{font-size:16px}
.kp-dash .bg-upi{padding:2px 0}
.kp-dash .bg-tl{padding:3px 8px;gap:8px;font-size:15px}
.kp-dash .bg-tl img{width:20px;height:20px}
.kp-dash .bg-l{width:40px}
.kp-dash .bg-r{text-align:right;font-variant-numeric:tabular-nums}
.kp-dash .kp-prof{gap:10px;padding:6px 0}
.kp-dash .kp-prof img{width:20px;height:20px}
.kp-dash .kp-prof .gb-bar{margin:4px 0 3px}
.kp-dash .bg-gl{padding:5px 0}
.kp-dash .bg-note{margin-top:6px}

/* Guest example: the same windows in a fixed two-column composition */
.kp-board[data-tier=example]{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px 24px;align-items:start}
.kp-board[data-tier=example] .c-id{grid-column:1/-1}
.kp-board[data-tier=example] .bg-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.kp-board[data-tier=example] .c-next{margin-top:0}
@media (max-width:760px){
 .kp-board[data-tier=example]{grid-template-columns:minmax(0,1fr);--kp-rise:40px;--kp-obj-h:112px}
 .kp-board[data-tier=example] .kp-head .bg-id{flex-wrap:wrap}
 .kp-board[data-tier=example] .kp-head .bg-lvl{width:100%;justify-content:space-between}
 .kp-board[data-tier=example] .kp-title{font-size:24px}
 .kp-board[data-tier=example] .kp-giver{display:none}
}
@media (max-width:400px){
 .kp-board[data-tier=example]{--kp-rise:32px;--kp-obj-h:92px}
 .kp-board[data-tier=example] .gb-window{padding:16px 18px}
 .kp-board[data-tier=example] .kp-panel{padding:12px 14px}
 .kp-board[data-tier=example] .kp-head .bg-who .kp-name{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
 .kp-obj{transition:none}.kp-focus-wrap:hover .kp-obj{transform:none}
 .kp-fill .gb-xp__fill,.kp-fill .gb-xp__rest{animation:none}
}

/* Guest page /kompass: benefit and the one action on the left, the example Kompass as the large picture.
   On phones the document order applies: benefit, action, example. */
body.gb-v3.gc-shell .gc-v3.gc-page.kp-guest{max-width:1440px;display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);grid-template-areas:"intro example" "action example" "promo promo";grid-template-rows:auto 1fr auto;gap:0 56px;align-items:start;padding-top:48px}
.kp-guest-intro{grid-area:intro}
body.gb-v3.gc-shell .gc-v3.kp-guest .kp-guest-intro h1{font-size:44px;line-height:1.1;margin:0 0 14px}
body.gb-v3.gc-shell .gc-v3.kp-guest .kp-guest-intro .gc-lead{margin:0 0 28px}
body.gb-v3.gc-shell .gc-v3.kp-guest .kp-guest-action{grid-area:action;padding:24px 24px 20px}
body.gb-v3.gc-shell .gc-v3.kp-guest .kp-guest-action .gc-focus-note{margin:14px 0 0;font-size:15px;color:var(--gb-quiet);text-align:center}
.kp-example{grid-area:example;min-width:0}
body.gb-v3.gc-shell .gc-v3.kp-guest .kp-example>h2{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 6px;font-size:26px;color:var(--gb-title)}
body.gb-v3.gc-shell .gc-v3.kp-guest .kp-example>.gc-help{margin:18px 0 0;font-size:14px;color:var(--gb-quiet)}
@media (max-width:1100px){
 body.gb-v3.gc-shell .gc-v3.gc-page.kp-guest{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "action" "example" "promo";grid-template-rows:none;max-width:760px}
 body.gb-v3.gc-shell .gc-v3.kp-guest .kp-example{margin-top:44px}
}
@media (max-width:600px){
 body.gb-v3.gc-shell .gc-v3.kp-guest .kp-guest-intro h1{font-size:32px}
 body.gb-v3.gc-shell .gc-v3.kp-guest .kp-guest-action{padding:20px 16px 16px}
 body.gb-v3.gc-shell .gc-v3.kp-guest .kp-example>h2{font-size:22px}
}
@media (max-width:359px){body.gb-v3.gc-shell .gc-v3.kp-guest .kp-guest-intro h1{font-size:29px}}
/* The guest page styles headings of .gc-v3 pages; inside the example the window sizes apply. */
body.gb-v3.gc-shell .gc-v3 .kp-board .kp-name{font-size:28px;line-height:1.12;margin:0;text-shadow:0 1px 0 #000;overflow-wrap:normal}
body.gb-v3.gc-shell .gc-v3 .kp-board h2{font-size:19px;line-height:1.25;margin:0 0 8px;color:var(--gb-gold-text);overflow-wrap:normal}
body.gb-v3.gc-shell .gc-v3 .kp-board h2.kp-ptitle{font-size:18px;margin-bottom:6px}
body.gb-v3.gc-shell .gc-v3 .kp-board .kp-focus h2.kp-wtitle{margin-bottom:4px}
body.gb-v3.gc-shell .gc-v3 .kp-board p{overflow-wrap:normal}
@media (max-width:400px){body.gb-v3.gc-shell .gc-v3 .kp-board .kp-name{font-size:24px}body.gb-v3.gc-shell .gc-v3 .kp-board h2{font-size:17px}}

/* Guest page: single strengths below the example, each with a real excerpt of it (kompassPromo in
   kompass-guest.mjs). One lead (dungeon quests), two smaller items beside it, the split screen as a band. */
.kp-promo{grid-area:promo;min-width:0;margin-top:72px;padding-top:44px;border-top:1px solid var(--gb-rule)}
body.gb-v3.gc-shell .gc-v3.kp-guest .kp-promo>h2{margin:0 0 26px;font-size:30px}
.kp-promo-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"lead xp" "lead talent" "trainer talent" "snap snap";gap:36px 56px;align-items:start}
.kp-pr{min-width:0}
.kp-pr--lead{grid-area:lead}.kp-pr--xp{grid-area:xp}.kp-pr--talent{grid-area:talent}.kp-pr--trainer{grid-area:trainer}.kp-pr--snap{grid-area:snap}
body.gb-v3.gc-shell .gc-v3.kp-guest .kp-pr h3{margin:0 0 6px;font:400 21px/1.25 var(--gb-font-display);-webkit-text-stroke:var(--gb-display-stroke) currentColor;color:var(--gb-gold-text);text-shadow:0 1px 0 #000;overflow-wrap:normal}
body.gb-v3.gc-shell .gc-v3.kp-guest .kp-pr--lead h3{font-size:27px;color:var(--gb-title)}
body.gb-v3.gc-shell .gc-v3.kp-guest .kp-pr>p,body.gb-v3.gc-shell .gc-v3.kp-guest .kp-pr--snap>div>p{margin:0 0 14px;max-width:58ch;font-size:16px;line-height:1.5;color:#cfc3a9;overflow-wrap:normal}
body.gb-v3.gc-shell .gc-v3.kp-guest .kp-pr>.kp-pr-note{margin:10px 0 0;font-size:14px;color:var(--gb-quiet)}
.kp-snip .kp-panel{padding:12px 18px}
.kp-snip--quests .kp-panel{padding:14px 20px 16px}
.kp-snip .kp-xp{margin-top:0}
.kp-snip .gb-xp{height:16px}
.kp-snip .bg-next{margin:0}
.kp-snip .bg-qlist{margin:0}
.kp-snip--trainer{max-width:520px}
/* Split screen sketch: the game on the left, the Kompass in half or a quarter, in the order of its window tiers */
.kp-pr--snap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 44px;align-items:center;padding-top:32px;border-top:1px solid var(--gb-rule)}
.kp-snap{display:flex;gap:22px;padding-bottom:26px}
.kp-snap-screen{position:relative;flex:1 1 0;width:210px;min-width:0;aspect-ratio:16/10;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;padding:4px;border:2px solid var(--gb-brass-line);border-radius:4px;background:#070504;box-shadow:0 0 0 1px #000,0 8px 18px rgba(0,0,0,.45)}
.kp-snap-game{grid-row:1/3;display:grid;place-items:center;background:linear-gradient(160deg,#2c3b2b,#141c16 70%);font-size:12px;color:rgba(238,230,213,.55);border-radius:2px}
.kp-snap-k{display:grid;gap:3px;padding:3px;background:#120e0a;border-radius:2px;min-height:0}
.kp-snap-half{grid-row:1/3;grid-template-columns:1.2fr 1fr;grid-template-rows:16px 1fr;grid-template-areas:"head head" "focus plan"}
.kp-snap-quarter{grid-template-columns:1fr 1.2fr;grid-template-rows:12px 1fr;grid-template-areas:"head focus" "plan focus"}
.kp-snap-k i{display:block;min-height:0;border-radius:1px}
.kp-snap-head{grid-area:head;border:1px solid var(--gb-brass-line);background:linear-gradient(90deg,#7a3cbc 0 62%,#3c6ec8 62% 80%,#0b0907 80%) left bottom/100% 4px no-repeat,#1a140e}
.kp-snap-focus{grid-area:focus;border:1px solid var(--gb-gold);box-shadow:inset 0 0 0 2px #120e0a,inset 0 0 0 3px rgba(201,162,78,.45);background:#1d1610}
.kp-snap-plan{grid-area:plan;border:1px solid var(--gb-brass-line);background:#17120d}
.kp-snap-free{border:1px dashed rgba(201,162,78,.2);border-radius:2px}
.kp-snap-label{position:absolute;left:0;right:0;top:100%;margin-top:7px;text-align:center;font-size:13px;color:var(--gb-quiet);white-space:nowrap}
.kp-promo-end{margin:36px 0 0}
@media (max-width:1100px){.kp-promo{margin-top:56px}}
@media (max-width:760px){
 .kp-promo-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"lead" "xp" "talent" "trainer" "snap";gap:36px}
 .kp-pr--snap{grid-template-columns:minmax(0,1fr);gap:18px}
 .kp-snip .kp-giver{display:none}
 body.gb-v3.gc-shell .gc-v3.kp-guest .kp-promo>h2{font-size:24px}
 body.gb-v3.gc-shell .gc-v3.kp-guest .kp-pr--lead h3{font-size:23px}
}
@media (max-width:400px){
 .kp-snip .kp-panel,.kp-snip--quests .kp-panel{padding:10px 14px 12px}
 .kp-snap{gap:14px}
 .kp-promo-end .gb-btn{width:100%;box-sizing:border-box}
}