/* Teaser «Kapp riktig» – BME Julejakten. Bygger på teaser.css (#jt, .jt-page, .jt-go …). */
.kp-intro-hus { display: grid; justify-items: center; gap: 4px; background: linear-gradient(180deg, #0B2214, #163A22); padding: 12px 10px 10px; }
.kp-intro-hus svg { width: min(100%, 300px); height: auto; }
.kp-intro-hus span { font: 700 14px/1.2 var(--f); color: var(--stein); }
.kp-hus-svg .kp-d { opacity: 0; transform-box: fill-box; transform-origin: 50% 0%; transform: rotate(var(--r, 0deg)) translateY(-40px); transition: opacity .25s ease-out, transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.kp-hus-svg .kp-d.vis { opacity: 1; transform: rotate(var(--r, 0deg)); }
.kp-hus-svg .kp-d.bom { opacity: .85; }
.kp-hus-svg .kp-d.ny { filter: drop-shadow(0 0 6px rgba(245, 189, 69, .9)); }
.kp-hus-svg .kp-paere { animation: kpBlink 1.4s ease-in-out infinite; }
@keyframes kpBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.kp-hus-svg.kveld .kp-d[data-d="2"] rect:nth-child(2), .kp-hus-svg.kveld .kp-d[data-d="3"] rect:nth-child(2) { fill: #FFC94D; }

.kp-play { gap: 8px; cursor: pointer; }
.kp-hud { grid-template-columns: 1fr auto; }
.kp-nr { font: 800 15px/1 var(--f); letter-spacing: .12em; color: var(--stein); }
.kp-nr b { font: 800 26px/1 var(--h); color: var(--gul); letter-spacing: 0; }
.kp-hus { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: radial-gradient(90% 80% at 50% 30%, #1D4A2B, #0B2214 75%); border: 3px solid rgba(245, 189, 69, .35); }
.kp-hus svg { width: 100%; height: 100%; max-height: 100%; }
.kp-oppg { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 4px 0 2px; }
.kp-oppg small { font: 800 13px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--stein); }
.kp-oppg b { font: 800 clamp(38px, 11vw, 52px)/1 var(--h); color: var(--hvit); font-variant-numeric: tabular-nums; }
.kp-oppg span { font: 800 15px/1 var(--f); color: var(--gul); }
.kp-oppg.inn b { animation: kpInn .3s ease-out; }
@keyframes kpInn { from { transform: scale(1.25); color: var(--gul); } to { transform: none; } }
.kp-band { position: relative; height: 150px; flex: none; background: #0B2214; border: 3px solid var(--gul); overflow: hidden; }
.kp-band canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Sagbladet står fast i midten */
.kp-sag { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; pointer-events: none; }
.kp-sag::before { content: ""; position: absolute; left: -1.5px; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, rgba(220, 230, 235, .95), rgba(160, 172, 180, .9)); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.kp-sag i { position: absolute; left: -22px; top: -6px; width: 44px; height: 18px; background: #E5483B; clip-path: polygon(0 0, 100% 0, 100% 55%, 60% 55%, 50% 100%, 40% 55%, 0 55%); }
.kp-sag.kutt::before { animation: kpSag .3s linear; }
@keyframes kpSag { 0%, 100% { transform: none; } 25% { transform: translateY(-6px); } 50% { transform: translateY(5px); } 75% { transform: translateY(-4px); } }
.kp-fx { position: absolute; inset: 0; pointer-events: none; }
.kp-res { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); min-width: 62%; max-width: 92%; text-align: center; padding: 10px 14px 12px; background: rgba(14, 42, 24, .93); border: 3px solid var(--gul); animation: kpRes .25s ease-out; display: grid; gap: 2px; }
.kp-res b { font: 800 26px/1.05 var(--h); color: var(--hvit); }
.kp-res small { font: 700 14px/1.2 var(--f); color: var(--stein); }
.kp-res em { font: 800 24px/1 var(--h); font-style: normal; color: var(--gul); }
.kp-res.perfekt { border-color: var(--gronn); } .kp-res.perfekt b { color: #7BEA94; }
.kp-res.bom { border-color: var(--rod); } .kp-res.bom b { color: #FF7A6E; } .kp-res.bom em { color: var(--stein); }
@keyframes kpRes { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.kp-hint { text-align: center; padding: 6px 0 2px; }
.kp-hint span { font: 800 13px/1.2 var(--f); letter-spacing: .12em; color: var(--stein); }

.kp-ferdig-hus svg { width: min(78vw, 360px); height: auto; }
.kp-ferdig { display: grid; justify-items: center; gap: 6px; background: radial-gradient(90% 80% at 50% 30%, #1D4A2B, #0B2214 75%); padding: 12px 10px 14px; }
.kp-ferdig svg { width: min(100%, 340px); height: auto; }
.kp-ferdig p { margin: 0; font: 800 20px/1.15 var(--h); color: var(--hvit); text-align: center; }
.kp-ferdig p span { color: var(--gul); }
@media (max-height: 640px) { .kp-band { height: 124px; } .kp-oppg b { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) { .kp-hus-svg .kp-paere, .kp-oppg.inn b, .kp-sag.kutt::before { animation: none; } .kp-hus-svg .kp-d { transition: opacity .2s; } }
.kp-lyd { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--asfalt); background: rgba(0,0,0,.25); font-size: 19px; line-height: 1; cursor: pointer; padding: 0; }
.jt-page > .kp-lyd { position: absolute; right: 62px; top: max(14px, env(safe-area-inset-top)); }
.kp-hud { grid-template-columns: auto 1fr auto; }
.kp-hud .kp-lyd { justify-self: start; width: 36px; height: 36px; font-size: 16px; }
.kp-musikk { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--asfalt); background: rgba(0,0,0,.25); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; position: relative; }
.kp-musikk.av { opacity: .45; } .kp-musikk.av::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: #FF7A6E; transform: rotate(-35deg); }
.jt-page > .kp-musikk { position: absolute; right: 112px; top: max(14px, env(safe-area-inset-top)); }
.kp-knapper { display: flex; gap: 6px; justify-self: start; }
.kp-hud .kp-musikk { width: 36px; height: 36px; font-size: 15px; }
.kp-hint span b { color: var(--gul); font-weight: 900; }
.kp-intro-knapper { align-items: center; gap: 8px; }
.kp-intro-knapper small { font: 600 13px/1.3 var(--f); color: var(--stein); }