/* Mystery Logic 1.2 — Premium Game Interface
   Visual-only layer. Does not alter state, answers or storage. */
:root{
  --pg-ink:#17212b;
  --pg-ink-soft:#33414d;
  --pg-night:#07111c;
  --pg-night-2:#0d1c2a;
  --pg-night-3:#13283b;
  --pg-paper:#eee5d5;
  --pg-paper-2:#d9ccb5;
  --pg-paper-3:#c9b99c;
  --pg-brass:#d3ad69;
  --pg-brass-light:#f0d89f;
  --pg-red:#a84f43;
  --pg-green:#6e9c84;
  --pg-line:rgba(240,216,159,.18);
  --pg-shadow:0 34px 90px rgba(0,0,0,.42);
  --pg-serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

body{
  background:
    radial-gradient(circle at 14% 8%,rgba(54,93,126,.26),transparent 34rem),
    radial-gradient(circle at 90% 14%,rgba(168,79,67,.12),transparent 28rem),
    linear-gradient(180deg,#07111c,#040a11 78%);
}

.ktv-game-shell{
  width:min(100%,1280px)!important;
  padding-inline:clamp(12px,2.4vw,34px)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.ktv-game-shell:before{
  width:100%!important;
  max-width:none!important;
  margin:18px 0 8px!important;
  color:rgba(240,216,159,.55)!important;
  letter-spacing:.22em!important;
}

.ktv-app{gap:22px!important}

.ktv-topbar{
  padding:10px 4px 2px;
  border-bottom:1px solid rgba(240,216,159,.12);
}

.ktv-mark{
  width:48px!important;
  height:48px!important;
  border-radius:3px!important;
  background:linear-gradient(145deg,rgba(240,216,159,.15),rgba(240,216,159,.03)),#0b1a28!important;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.018),0 12px 30px rgba(0,0,0,.22)!important;
  transform:rotate(-2deg);
}

.ktv-brand-copy strong{
  font-family:var(--pg-serif);
  font-size:1.12rem!important;
  font-weight:650!important;
}

.ktv-progress{
  height:2px!important;
  border-radius:0!important;
  background:rgba(255,255,255,.055)!important;
}

.ktv-progress span{
  border-radius:0!important;
  background:linear-gradient(90deg,var(--pg-red),var(--pg-brass-light))!important;
}

/* Stage navigation becomes a case-file index. */
.ktv-stage-nav{
  top:8px!important;
  gap:0!important;
  padding:0!important;
  overflow:hidden;
  border:1px solid rgba(240,216,159,.15)!important;
  border-radius:4px!important;
  background:rgba(6,14,23,.92)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.3)!important;
}

.ktv-stage-nav button{
  min-height:68px;
  padding:12px 8px!important;
  border-radius:0!important;
  border-right:1px solid rgba(240,216,159,.09)!important;
  letter-spacing:.025em;
}

.ktv-stage-nav button:last-child{border-right:0!important}
.ktv-stage-nav button:hover,.ktv-stage-nav button:focus-visible{background:rgba(211,173,105,.08)!important}
.ktv-stage-nav span{font-size:.68rem!important;letter-spacing:.08em}

/* Investigation header */
.ktv-hero{
  position:relative;
  isolation:isolate;
  min-height:330px;
  padding:clamp(30px,5vw,64px)!important;
  overflow:hidden;
  border:1px solid rgba(240,216,159,.18)!important;
  border-radius:6px!important;
  background:
    linear-gradient(90deg,rgba(7,17,28,.98) 0%,rgba(13,32,48,.96) 62%,rgba(10,23,35,.9) 100%)!important;
  box-shadow:var(--pg-shadow)!important;
}

.ktv-hero:before{
  content:"";
  position:absolute;
  z-index:-1;
  right:4%;
  top:8%;
  width:min(34vw,390px);
  height:84%;
  border:1px solid rgba(42,50,58,.18);
  background:
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(23,33,43,.09) 32px),
    linear-gradient(90deg,transparent 12%,rgba(168,79,67,.72) 12% 12.8%,transparent 12.8%),
    linear-gradient(145deg,#f2eadc,#d7c9b0);
  box-shadow:-22px 30px 70px rgba(0,0,0,.34);
  transform:rotate(2.2deg);
}

.ktv-hero:after{
  content:"CASE FILE";
  position:absolute;
  z-index:-1;
  right:9%;
  bottom:15%;
  color:rgba(23,33,43,.18);
  font:900 clamp(1.8rem,5vw,4.8rem)/1 var(--pg-serif);
  letter-spacing:.04em;
  transform:rotate(-4deg);
}

.ktv-hero-copy{position:relative;z-index:1;max-width:720px}
.ktv-hero h1{
  max-width:760px!important;
  font-family:var(--pg-serif)!important;
  font-size:clamp(3rem,7.4vw,6.8rem)!important;
  font-weight:650!important;
  letter-spacing:-.065em!important;
  line-height:.86!important;
  text-wrap:balance;
}

.ktv-hero-copy>p:last-child{
  max-width:610px!important;
  color:#d0dae3!important;
  font-size:1.08rem!important;
}

.ktv-chip{
  border-radius:2px!important;
  border-color:rgba(240,216,159,.22)!important;
  background:rgba(5,12,20,.34)!important;
  letter-spacing:.035em;
}

.ktv-hero-stamp{
  position:relative;
  width:148px!important;
  height:148px!important;
  border-radius:50%!important;
  border:2px solid rgba(168,79,67,.65)!important;
  color:#d98c7d!important;
  transform:rotate(-9deg)!important;
  background:rgba(168,79,67,.035);
}

.ktv-hero-stamp:before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px dashed rgba(168,79,67,.48);
  border-radius:50%;
}

/* Main dossier: full-width, editorial, no empty seven-column desert. */
.ktv-panel,.ktv-cover,.ktv-result{border-radius:6px!important}

.ktv-paper{
  position:relative;
  isolation:isolate;
  overflow:visible!important;
  padding:clamp(28px,4.7vw,58px)!important;
  color:var(--pg-ink)!important;
  border:1px solid rgba(255,255,255,.26)!important;
  background:
    repeating-linear-gradient(0deg,transparent 0 35px,rgba(23,33,43,.025) 36px),
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.52),transparent 35rem),
    linear-gradient(145deg,var(--pg-paper),var(--pg-paper-2))!important;
  box-shadow:-20px 30px 75px rgba(0,0,0,.35),inset 0 0 80px rgba(92,72,40,.06)!important;
}

.ktv-paper:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:13px -10px -12px 11px;
  border:1px solid rgba(255,255,255,.15);
  background:#cbbda4;
  box-shadow:0 18px 42px rgba(0,0,0,.15);
  transform:rotate(.35deg);
}

.ktv-paper:after{
  content:"MYSTERY LOGIC / EVIDENCE"!important;
  top:24px!important;
  right:-41px!important;
  padding:7px 48px!important;
  border:2px solid rgba(168,79,67,.35)!important;
  color:rgba(145,57,48,.38)!important;
  font-size:.62rem!important;
  letter-spacing:.2em!important;
  transform:rotate(35deg)!important;
}

.ktv-section-head h2,.ktv-notebook h2{
  font-family:var(--pg-serif)!important;
  font-size:clamp(2rem,4.2vw,3.45rem)!important;
  font-weight:650!important;
  letter-spacing:-.045em!important;
  line-height:.95!important;
}

.ktv-paper .ktv-section-head{
  padding-bottom:20px;
  border-bottom:1px solid rgba(23,33,43,.15);
}

.ktv-source-badge{
  border-radius:2px!important;
  letter-spacing:.04em;
}

.ktv-timeline{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))!important;
  gap:18px!important;
  margin-top:30px!important;
}

.ktv-timeline:before{display:none!important}
.ktv-timeline-item{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto 1fr!important;
  gap:8px!important;
  min-width:0;
  padding:0!important;
}

.ktv-timeline-marker{
  justify-content:flex-start!important;
  min-height:30px;
}

.ktv-timeline-marker:after{
  top:10px!important;
  left:68px;
  width:7px!important;
  height:7px!important;
  border:2px solid var(--pg-paper)!important;
  background:var(--pg-red)!important;
}

.ktv-timeline-marker:before{
  content:"";
  position:absolute;
  left:78px;
  right:0;
  top:14px;
  height:1px;
  background:rgba(23,33,43,.17);
}

.ktv-timeline-marker span{
  width:auto!important;
  min-width:58px;
  padding:6px 9px!important;
  border-radius:2px!important;
  border-color:rgba(23,33,43,.15)!important;
  background:rgba(255,255,255,.34)!important;
  font-size:.72rem!important;
}

.ktv-timeline-card{
  min-height:0!important;
  padding:20px!important;
  border:1px solid rgba(23,33,43,.13)!important;
  border-radius:3px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.18)),
    rgba(255,255,255,.23)!important;
  box-shadow:0 12px 24px rgba(69,52,29,.07);
}

.ktv-timeline-head{display:flex!important}
.ktv-timeline-head strong{font-family:var(--pg-serif);font-size:1.18rem!important;line-height:1.05}
.ktv-timeline-card p{font-size:.92rem!important;line-height:1.55}
.ktv-timeline-card small{letter-spacing:.08em;text-transform:uppercase}

/* A single event is presented as a full dossier memo, not a tiny card. */
.ktv-timeline-item:only-child .ktv-timeline-card{
  min-height:180px!important;
  padding:clamp(24px,4vw,42px)!important;
  display:grid;
  align-content:center;
  background:
    linear-gradient(90deg,rgba(168,79,67,.82) 0 5px,transparent 5px),
    linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.2))!important;
}

.ktv-timeline-item:only-child .ktv-timeline-head strong{font-size:clamp(1.8rem,3.8vw,3rem)!important}
.ktv-timeline-item:only-child .ktv-timeline-card p{max-width:850px;font-size:1.05rem!important}

.ktv-facts{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))!important;
  gap:14px!important;
  margin-top:28px!important;
  padding-top:27px;
  border-top:1px dashed rgba(23,33,43,.2);
}

.ktv-fact-card{
  position:relative;
  min-height:138px;
  padding:24px 20px 20px!important;
  border:1px solid rgba(23,33,43,.14)!important;
  border-radius:3px!important;
  background:
    linear-gradient(155deg,rgba(255,255,255,.55),rgba(255,255,255,.18)),
    #e9dfcd!important;
  box-shadow:0 13px 25px rgba(69,52,29,.07);
  transform:rotate(var(--fact-rotate,0deg));
}

.ktv-fact-card:nth-child(3n+1){--fact-rotate:-.35deg}
.ktv-fact-card:nth-child(3n+2){--fact-rotate:.25deg}
.ktv-fact-card:before{
  content:"";
  position:absolute;
  top:11px;
  right:14px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--pg-red);
  box-shadow:0 2px 5px rgba(0,0,0,.3),0 0 0 4px rgba(168,79,67,.1);
}

.ktv-fact-card span{color:#835f2a!important;letter-spacing:.14em!important}
.ktv-fact-card p{margin-top:13px!important;font-family:var(--pg-serif);font-size:1.08rem!important;line-height:1.35}

.ktv-raw-briefing{margin-top:30px!important}
.ktv-raw-briefing summary{font-weight:850!important;letter-spacing:.025em}
.ktv-case-text{max-width:880px;font-size:1rem!important;line-height:1.75}

/* Testimony + notebook as a single investigator workspace. */
.ktv-workspace{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr)!important;
  gap:18px!important;
  align-items:start;
  padding:20px;
  border:1px solid rgba(240,216,159,.13);
  border-radius:6px;
  background:
    radial-gradient(circle at 80% 0%,rgba(168,79,67,.1),transparent 26rem),
    linear-gradient(145deg,#0d1d2b,#07121d);
  box-shadow:0 28px 70px rgba(0,0,0,.3);
}

.ktv-testimony{
  padding:clamp(25px,4vw,42px)!important;
  border:1px solid rgba(240,216,159,.15)!important;
  background:linear-gradient(145deg,#152c40,#0a1723)!important;
  box-shadow:none!important;
}

.ktv-transcript{
  position:relative;
  margin-top:28px!important;
  padding:clamp(24px,4vw,38px)!important;
  border-radius:3px!important;
  border:1px solid rgba(240,216,159,.17)!important;
  background:
    linear-gradient(90deg,rgba(168,79,67,.75) 0 4px,transparent 4px),
    rgba(255,255,255,.025)!important;
}

.ktv-transcript:before{
  content:"REC / TRANSCRIPT";
  position:absolute;
  right:18px;
  top:16px;
  color:rgba(240,216,159,.25);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.18em;
}

.ktv-avatar{border-radius:3px!important;background:linear-gradient(145deg,var(--pg-brass-light),#b6813d)!important}
.ktv-wave{height:34px!important;opacity:.34!important}
.ktv-transcript blockquote{
  max-width:820px;
  margin-top:16px!important;
  font-family:var(--pg-serif)!important;
  font-size:clamp(1.35rem,2.7vw,2rem)!important;
  line-height:1.48!important;
}

.ktv-small-button{border-radius:2px!important}

.ktv-notebook{
  top:92px!important;
  padding:28px!important;
  border:1px solid rgba(23,33,43,.18)!important;
  border-radius:3px!important;
  background:
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(23,33,43,.075) 31px 32px),
    linear-gradient(90deg,transparent 0 32px,rgba(168,79,67,.12) 32px 33px,transparent 33px),
    linear-gradient(145deg,#efe4d0,#d8c9ad)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.25)!important;
  transform:rotate(.35deg);
}

.ktv-notebook h2{font-size:2.15rem!important}
.ktv-notebook textarea{
  min-height:210px!important;
  border-radius:2px!important;
  background:rgba(255,255,255,.18)!important;
  font-family:var(--pg-serif);
  font-size:1rem;
}

/* Version board */
.ktv-answer{
  position:relative;
  overflow:hidden;
  padding:clamp(28px,4.7vw,56px)!important;
  border:1px solid rgba(240,216,159,.16)!important;
  border-radius:6px!important;
  background:
    radial-gradient(circle at 92% 4%,rgba(168,79,67,.16),transparent 28rem),
    linear-gradient(145deg,#12283b,#081520 70%)!important;
  box-shadow:var(--pg-shadow)!important;
}

.ktv-answer:after{
  content:"SELECT ONE VERSION";
  position:absolute;
  right:-18px;
  top:30px;
  color:rgba(240,216,159,.08);
  font:900 clamp(1.2rem,3.5vw,3rem)/1 sans-serif;
  letter-spacing:.11em;
  transform:rotate(90deg) translateX(100%);
  transform-origin:right top;
}

.ktv-answer .ktv-section-head{padding-right:40px}
.ktv-answer .ktv-section-head h2{max-width:800px;font-size:clamp(2.2rem,5vw,4.4rem)!important;color:#fff}
.ktv-section-copy{font-size:1.02rem;line-height:1.65}
.ktv-options{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important;gap:13px!important}

.ktv-option{
  min-height:108px;
  padding:19px!important;
  border-radius:3px!important;
  border:1px solid rgba(240,216,159,.13)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;
}

.ktv-option:hover,.ktv-option:focus-visible{border-color:rgba(240,216,159,.48)!important;background:rgba(211,173,105,.055)!important}
.ktv-option.is-selected{border-color:var(--pg-brass-light)!important;background:linear-gradient(90deg,rgba(211,173,105,.14),rgba(211,173,105,.035))!important}
.ktv-option-index{border-radius:2px!important}
.ktv-option-copy strong{font-family:var(--pg-serif)!important;font-size:1.18rem!important;line-height:1.18}
.ktv-feedback{border-radius:3px!important;border-left:4px solid var(--pg-red)!important}
.ktv-hint{border-radius:0 3px 3px 0!important}
.ktv-primary,.ktv-secondary,.ktv-small-button{border-radius:3px!important;letter-spacing:.025em}
.ktv-answer-actions{grid-template-columns:minmax(230px,1fr) auto!important}

/* Result: resolved case file. */
.ktv-result{
  padding:clamp(34px,5.4vw,68px)!important;
  border:1px solid rgba(110,156,132,.42)!important;
  border-radius:6px!important;
  background:
    radial-gradient(circle at 88% 0%,rgba(110,156,132,.22),transparent 30rem),
    linear-gradient(145deg,#15313a,#0b1d29 68%,#07131d)!important;
  box-shadow:var(--pg-shadow)!important;
}

.ktv-result-seal{border-radius:3px!important;transform:rotate(-4deg);box-shadow:0 0 0 8px rgba(110,156,132,.035)!important}
.ktv-result h2{font-family:var(--pg-serif)!important;font-size:clamp(3rem,7vw,6.4rem)!important;letter-spacing:-.065em!important;line-height:.87!important}
.ktv-result-lead{font-size:clamp(1.3rem,2.8vw,2rem)!important;max-width:900px!important}
.ktv-result-stats{border-radius:3px!important}
.ktv-confrontation>div{border-radius:3px!important;padding:24px!important}
.ktv-confrontation blockquote{font-size:1.22rem!important;line-height:1.45}
.ktv-result-reason{font-size:1.02rem;line-height:1.75}

/* Prevent the old 7-column desktop rule from ever shrinking sparse timelines. */
@media (min-width:920px){
  .ktv-timeline{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important}
  .ktv-timeline-item{grid-template-columns:1fr!important;grid-template-rows:auto 1fr!important}
  .ktv-timeline-card{min-height:0!important}
  .ktv-timeline-head{display:flex!important}
}

@media (max-width:900px){
  .ktv-hero:before,.ktv-hero:after{opacity:.24}
  .ktv-workspace{grid-template-columns:1fr!important;padding:12px}
  .ktv-notebook{position:relative!important;top:auto!important;transform:none}
  .ktv-answer-actions{grid-template-columns:1fr!important}
}

@media (max-width:620px){
  .ktv-game-shell{padding-inline:8px!important}
  .ktv-stage-nav button{min-height:58px;font-size:.59rem!important}
  .ktv-hero{min-height:0;padding:28px 22px!important}
  .ktv-hero:before{right:-35%;width:80%;opacity:.12}
  .ktv-hero h1{font-size:clamp(2.65rem,14vw,4.4rem)!important}
  .ktv-hero-stamp{display:none!important}
  .ktv-paper{padding:28px 20px!important}
  .ktv-paper:before{inset:8px -4px -7px 6px}
  .ktv-paper:after{display:none}
  .ktv-timeline{grid-template-columns:1fr!important}
  .ktv-facts{grid-template-columns:1fr!important}
  .ktv-fact-card{min-height:0;transform:none!important}
  .ktv-workspace{padding:8px}
  .ktv-testimony,.ktv-answer{padding:26px 19px!important}
  .ktv-transcript{padding:24px 18px!important}
  .ktv-transcript blockquote{font-size:1.25rem!important}
  .ktv-notebook{padding:24px 20px!important}
  .ktv-options{grid-template-columns:1fr!important}
  .ktv-answer:after{display:none}
  .ktv-result{padding:34px 21px!important}
}

@media (prefers-reduced-motion:no-preference){
  .ktv-fact-card,.ktv-timeline-card,.ktv-option{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
  .ktv-fact-card:hover,.ktv-timeline-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(69,52,29,.12)}
}