/* Teaser «Sant eller usant» – BME Julejakten. Juleversjon av ventespillet i Cyber Fraud. */
html.jt-lock, html.jt-lock body { overflow: hidden; overscroll-behavior: none; }
#jt { display: none; }
#jt.on { display: block; position: fixed; inset: 0; z-index: 400; background: radial-gradient(120% 70% at 50% 0%, #1F4A2B 0%, var(--svart) 72%); color: var(--hvit); overflow-y: auto; -webkit-user-select: none; user-select: none; font-family: var(--f); }
.jt-page { max-width: 520px; margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 18px 40px; display: grid; gap: 14px; position: relative; }
.jt-x { position: absolute; right: 12px; top: max(14px, env(safe-area-inset-top)); width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--asfalt); background: rgba(0,0,0,.25); color: var(--stein); font-size: 17px; cursor: pointer; }
.jt-tag { justify-self: start; font: 800 12px/1 var(--f); letter-spacing: .12em; color: var(--svart); background: var(--gul); padding: 7px 10px; transform: rotate(-1.5deg); }
.jt-h { margin: 0; font: 800 clamp(36px, 10vw, 46px)/1 var(--h); color: var(--gul); }
.jt-dim { margin: 0; color: var(--stein); font: 600 15px/1.5 var(--f); }
.jt-ok { margin: 0; color: #7BEA94; font: 700 15px/1.4 var(--f); }
.jt-bad { margin: 0; color: var(--rod); font: 700 15px/1.4 var(--f); }
.jt-rules { display: grid; gap: 8px; }
.jt-rules div { display: flex; align-items: center; gap: 12px; font: 600 17px/1.3 var(--f); }
.jt-sw { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font: 800 21px/1 var(--f); }
.jt-sw.l { background: rgba(229,72,59,.18); color: #FF7A6E; border: 2px solid rgba(229,72,59,.6); }
.jt-sw.r { background: rgba(58,196,90,.18); color: #7BEA94; border: 2px solid rgba(58,196,90,.6); }
.jt-poeng { padding: 14px 16px; background: rgba(245,189,69,.1); border-left: 4px solid var(--gul); font: 600 15px/1.45 var(--f); }
.jt-poeng b { color: var(--gul); }
.jt-go { min-height: 56px; border: 0; background: var(--gul); color: var(--svart); font: 800 19px/1 var(--h); cursor: pointer; box-shadow: 0 4px 0 var(--gul-dyp); }
.jt-go:disabled { opacity: .55; cursor: default; }
.jt-ghost { min-height: 50px; border: 2px solid var(--gul); background: transparent; color: var(--gul); font: 800 17px/1 var(--h); cursor: pointer; }
.jt-sub { margin: 8px 0 0; font: 800 13px/1 var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--stein); }
.jt-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.jt-board li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 9px 4px; border-top: 1px solid rgba(255,255,255,.08); font: 600 16px/1.2 var(--f); }
.jt-board li:first-child { border-top: 0; }
.jt-board li b { font: 800 15px/1 var(--h); color: var(--gul); }
.jt-board li em { font: 800 16px/1 var(--h); font-style: normal; font-variant-numeric: tabular-nums; }
.jt-board li.meg span { color: var(--gul); }
.jt-count { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; }
.jt-count b { font: 800 130px/1 var(--h); color: var(--gul); animation: jtPop .75s ease-out infinite; }
.jt-count b.sm { font-size: 60px; animation: none; }
.jt-count small { font: 800 14px/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--stein); }
@keyframes jtPop { 0% { transform: scale(1.4); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { opacity: .85; } }

.jt-play { position: fixed; inset: 0; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)); gap: 10px; touch-action: none; }
.jt-hud { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.jt-time { position: relative; height: 36px; background: rgba(255,255,255,.08); overflow: hidden; }
.jt-time i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, var(--gronn-mork), var(--gronn)); }
.jt-time.low i { background: linear-gradient(90deg, #A8291F, var(--rod)); }
.jt-time b { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font: 800 18px/1 var(--h); color: var(--hvit); }
.jt-score { text-align: right; }
.jt-score small { display: block; font: 800 10px/1 var(--f); letter-spacing: .14em; color: var(--stein); }
.jt-score b { font: 800 24px/1.1 var(--h); font-variant-numeric: tabular-nums; }
.jt-mult { min-width: 54px; text-align: center; padding: 8px; font: 800 19px/1 var(--h); background: rgba(255,255,255,.08); color: var(--stein); }
.jt-mult[data-m="2"] { background: rgba(58,196,90,.22); color: #7BEA94; }
.jt-mult[data-m="3"] { background: rgba(245,189,69,.25); color: var(--gul); }
.jt-mult[data-m="4"] { background: rgba(240,138,43,.3); color: #FFB061; }
.jt-mult[data-m="5"] { background: linear-gradient(135deg, var(--rod), #F5BD45); color: var(--svart); box-shadow: 0 0 18px rgba(229,72,59,.5); }
.jt-mult.pop { animation: jtMult .45s ease-out; }
@keyframes jtMult { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
.jt-streak { display: flex; gap: 6px; justify-content: flex-end; }
.jt-streak i { width: 22px; height: 6px; background: rgba(255,255,255,.12); }
.jt-streak i.on { background: var(--gul); box-shadow: 0 0 8px rgba(245,189,69,.7); }
.jt-stack { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; }
.jt-card { --t: 0; --f: 0; width: 100%; max-height: 100%; display: grid; gap: 18px; padding: 22px 16px 26px; background: var(--kritt); color: var(--svart); border: 4px solid var(--gul); box-shadow: 0 18px 40px rgba(0,0,0,.45); position: relative; transition: transform .17s ease-out, border-color .12s, opacity .17s; will-change: transform; }
.jt-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--tape); }
.jt-card.drag { transition: none; }
.jt-card.in { animation: jtIn .16s ease-out; }
@keyframes jtIn { from { transform: scale(.94); opacity: .3; } to { transform: none; opacity: 1; } }
.jt-img { background: #fff; padding: 16px 10px; margin-top: 6px; }
.jt-img svg { display: block; width: 100%; height: 130px; }
.jt-q { margin: 0; text-align: center; font: 800 clamp(22px, 6.4vw, 27px)/1.2 var(--h); }
.jt-lbl { position: absolute; top: 24px; padding: 6px 10px; font: 800 19px/1 var(--h); letter-spacing: .06em; border: 3px solid; pointer-events: none; background: rgba(255,255,255,.9); }
.jt-lbl.t { left: 14px; color: var(--gronn-mork); border-color: var(--gronn-mork); opacity: var(--t); transform: rotate(-10deg); }
.jt-lbl.f { right: 14px; color: var(--rod); border-color: var(--rod); opacity: var(--f); transform: rotate(10deg); }
.jt-card.ok { border-color: var(--gronn); }
.jt-card.bad { border-color: var(--rod); animation: jtShake .35s; }
.jt-card.ok.outR { transform: translateX(120%) rotate(14deg) !important; opacity: 0; }
.jt-card.ok.outL { transform: translateX(-120%) rotate(-14deg) !important; opacity: 0; }
.jt-card.bad.outR, .jt-card.bad.outL { transform: none !important; }
@keyframes jtShake { 0%,100% { translate: 0; } 20% { translate: -10px; } 40% { translate: 9px; } 60% { translate: -6px; } 80% { translate: 4px; } }
.jt-fx { position: absolute; inset: 0; pointer-events: none; }
.jt-pts { position: absolute; top: 34%; font: 800 36px/1 var(--h); animation: jtUp .9s ease-out forwards; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.jt-pts.r { right: 10%; } .jt-pts.l { left: 10%; }
.jt-pts.ok { color: #7BEA94; } .jt-pts.bad { color: #FF7A6E; }
@keyframes jtUp { from { transform: translateY(10px); opacity: 1; } to { transform: translateY(-70px); opacity: 0; } }
.jt-hint-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 6px 6px; font: 800 15px/1 var(--h); letter-spacing: .06em; pointer-events: none; }
.jt-hint-sw em { font: 800 11px/1 var(--f); font-style: normal; letter-spacing: .14em; color: var(--stein); }
.jt-hint-sw span { display: inline-flex; align-items: center; gap: 8px; }
.jt-hint-sw .l { color: #FF7A6E; } .jt-hint-sw .r { color: #7BEA94; }
.jt-hint-sw i { font: 400 34px/1 var(--f); font-style: normal; }
.jt-hint-sw .l i { animation: jtNudgeL 1.6s ease-in-out infinite; } .jt-hint-sw .r i { animation: jtNudgeR 1.6s ease-in-out infinite; }
@keyframes jtNudgeL { 0%,100% { transform: none; } 50% { transform: translateX(-6px); } }
@keyframes jtNudgeR { 0%,100% { transform: none; } 50% { transform: translateX(6px); } }

.jt-big { font: 800 84px/1 var(--h); color: var(--gul); font-variant-numeric: tabular-nums; }
.jt-big small { font-size: 26px; color: var(--hvit); margin-left: 6px; }
.jt-stats { display: flex; gap: 16px; flex-wrap: wrap; font: 600 15px/1 var(--f); color: var(--stein); }
.jt-stats b { color: var(--hvit); font: 800 17px/1 var(--h); margin-right: 3px; }
.jt-row { display: grid; gap: 10px; }

/* Boksen i venterommet */
.vent-teaser { margin-top: clamp(10px, 2vh, 24px); padding: clamp(12px, 1.8vh, 20px) clamp(12px, 2vh, 20px); background: var(--gul); color: var(--svart); max-width: 640px; position: relative; }
.vent-teaser h2 { margin: 0 0 4px; font: 800 clamp(19px, 2.8vh, 26px)/1.1 var(--h); }
.vent-teaser p { margin: 0; font-weight: 600; font-size: clamp(14px, 2vh, 16px); }
.vent-teaser .knapp { margin-top: 10px; background: var(--svart); color: var(--gul); border-color: var(--svart); }
.vent-teaser .vt-poeng { font: 800 clamp(26px, 4vh, 34px)/1 var(--h); }
.vent-teaser .vt-annen { display: block; margin-top: 10px; padding: 8px 0; background: none; border: 0; color: var(--svart); font: 700 15px/1.3 var(--f); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.jt-lydrad { display: flex; gap: 6px; margin-top: -4px; }
.jt-lydrad .kp-lyd, .jt-lydrad .kp-musikk { width: 34px; height: 34px; font-size: 15px; }
.vent-teaser .vt-liste { display: grid; gap: 10px; margin-top: 12px; }
.vent-teaser .vt-spill { background: rgba(255, 255, 255, .55); padding: 12px 14px; border-left: 5px solid var(--svart); }
.vent-teaser .vt-spill.apen { background: #fff; border-left-color: var(--rod); box-shadow: 0 4px 0 var(--gul-dyp); }
.vent-teaser .vt-spill.last { background: rgba(14, 42, 24, .1); border-left-color: rgba(14, 42, 24, .35); }
.vent-teaser .vt-hode { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vent-teaser .vt-spill h3 { margin: 0; font: 800 clamp(18px, 2.6vh, 22px)/1.1 var(--h); }
.vent-teaser .vt-maks { font: 800 12px/1 var(--f); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .75; }
.vent-teaser .vt-om { margin: 3px 0 0; font-size: 14px; opacity: .8; }
.vent-teaser .vt-status { margin: 6px 0 0; font-size: 15px; }
.vent-teaser .vt-spill .knapp { margin-top: 10px; }
.vent-teaser .vt-spill .knapp.vt-sekundar { background: transparent; color: var(--svart); border-color: var(--svart); box-shadow: none; }
.vent-teaser .vt-spill .knapp.vt-last { background: rgba(14, 42, 24, .15); color: rgba(14, 42, 24, .7); border-color: transparent; box-shadow: none; opacity: 1; }