:root{--navy:#152440;--navy-dark:#07182d;--cream:#f8edd2;--ivory:#fffaf0;--coral:#c74836;--yellow:#e4a01c;--blue:#2b83b6;--ink:#152440;--white:#fff}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--navy-dark);font-family:Arial,"Helvetica Neue",sans-serif;color:var(--ink)}
button,select{font:inherit}
.crime-app{min-height:100vh;background:radial-gradient(#fff9e7 1px,transparent 1px),var(--cream);background-size:8px 8px}
.crime-brand{height:64px;padding:7px clamp(14px,3vw,48px);display:flex;align-items:center;gap:10px;background:var(--navy-dark);color:#fff;font-size:11px;letter-spacing:1.5px;font-weight:700}
.crime-logo-link img{width:48px;height:48px;object-fit:contain;display:block}
.crime-wordmark{font-size:17px;letter-spacing:2px}
.crime-wordmark b{color:var(--coral)}
.crime-divider,.crime-tagline{opacity:.65}
.fullscreen-button{margin-left:auto}
.screen{min-height:calc(100vh - 64px)}
.text-button{border:0;background:transparent;color:inherit;padding:8px 10px;font-weight:800;cursor:pointer;text-decoration:none}
.menu-screen{position:relative;display:grid;place-items:center;padding:20px;background:linear-gradient(rgba(7,24,45,.82),rgba(7,24,45,.88)),url("assets/science-classroom-crime-scene.png") center/cover;color:#fff}
.menu-screen[hidden],.screen[hidden]{display:none}
.home-button{position:absolute;top:14px;left:clamp(14px,3vw,48px)}
.menu-content{max-width:900px;text-align:center}
.eyebrow{margin:0 0 8px;color:var(--yellow);font-size:12px;font-weight:900;letter-spacing:2px}
.menu-content h1,.presentation-card>h1{margin:0;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(62px,9vw,132px);line-height:.82;letter-spacing:1px}
.menu-content h1 em{display:inline-block;color:var(--yellow);font-size:.76em;font-style:normal}
.menu-lead{max-width:760px;margin:24px auto;font-size:clamp(18px,2vw,27px);font-weight:700}
.menu-actions,.story-controls,.presentation-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.primary-button,.secondary-button,.time-button,.small-button,.support-button,.reveal-now{border:0;border-radius:8px;padding:12px 20px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;cursor:pointer}
.primary-button{background:var(--coral);color:#fff;box-shadow:0 4px 0 #8e2c29}
.secondary-button,.time-button,.support-button{border:2px solid currentColor;background:var(--ivory);color:var(--navy)}
.no-prep{margin-top:28px;font-size:13px;font-weight:700;opacity:.82}
.observe-screen{background:#050b13;overflow:hidden}
.scene-stage{position:relative;width:100%;height:calc(100vh - 64px);overflow:hidden}
.scene-stage>img{width:100%;height:100%;display:block;object-fit:cover}
.instruction-overlay{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:30px;background:rgba(7,24,45,.72);color:#fff}
.instruction-overlay h2{margin:0;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(44px,6vw,88px);letter-spacing:1px}
.instruction-overlay>p:not(.eyebrow){max-width:800px;margin:15px auto 25px;font-size:clamp(17px,2vw,24px);font-weight:700}
.time-choice{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.time-button.primary-button{border-color:var(--coral);color:#fff}
.countdown{position:absolute;top:18px;right:22px;min-width:96px;padding:10px 14px;border-radius:10px;background:rgba(7,24,45,.9);color:#fff;text-align:center;font-size:clamp(28px,4vw,52px);font-weight:900}
.reveal-now{position:absolute;right:22px;bottom:22px;background:var(--coral);color:#fff}
.observation-start-game{position:absolute;top:18px;left:22px;z-index:12;padding:10px 16px;border:3px solid var(--yellow);border-radius:8px;background:rgba(7,24,45,.92);color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.7px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.observation-start-game:hover{background:var(--coral)}
.story-screen{padding:12px clamp(12px,2.5vw,38px) 18px}
.story-topbar{max-width:1600px;margin:0 auto 10px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.preparation-control{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:800}
.preparation-control select{padding:8px;border:2px solid var(--navy);border-radius:6px;background:#fff;color:var(--navy)}
.small-button{padding:9px 14px;background:var(--blue);color:#fff}
.preparation-control span{min-width:58px;font-size:22px;font-weight:900}
.story-layout{max-width:1600px;margin:auto;display:grid;grid-template-columns:minmax(0,2fr) minmax(310px,1fr);gap:16px;align-items:stretch;animation:reveal-layout .55s ease-out}
.story-scene{margin:0;min-width:0;overflow:hidden;border:4px solid var(--navy);border-radius:12px;background:#000}
.story-scene img{width:100%;height:100%;min-height:565px;display:block;object-fit:cover}
.story-panel{padding:18px;display:flex;flex-direction:column;gap:14px;border:3px solid var(--navy);border-radius:12px;background:var(--ivory);box-shadow:0 7px 0 rgba(21,36,64,.18)}
.motive-card{padding:15px;border-left:7px solid var(--coral);border-radius:7px;background:#fff1cf}
.motive-card span{font-size:11px;font-weight:900;letter-spacing:2px}
.motive-card h2{margin:3px 0;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(28px,3vw,46px);line-height:1;color:var(--coral)}
.motive-card p{margin:8px 0 0;font-weight:700}
.prompt-list,.support-list{margin:0;padding-left:24px;display:grid;gap:11px;font-size:clamp(15px,1.25vw,19px);font-weight:700}
.sequence-words{padding:10px;border-radius:6px;background:#fff1cf}
.support-button{margin-top:auto}
.story-controls{margin:14px auto 0}
.presentation-screen{display:grid;place-items:center;padding:22px;background:linear-gradient(145deg,var(--navy-dark),#123f61);color:#fff}
.presentation-card{width:min(1150px,100%);padding:clamp(24px,4vw,54px);border:3px solid var(--yellow);border-radius:16px;background:rgba(7,24,45,.92);box-shadow:0 18px 55px rgba(0,0,0,.3)}
.presentation-card>h1{font-size:clamp(54px,7vw,96px);color:var(--yellow)}
.presentation-lead{font-size:clamp(17px,2vw,24px)}
.presentation-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:28px 0}
.presentation-grid h2{font-family:Impact,"Arial Black",sans-serif;font-size:30px;letter-spacing:.5px}
.checklist{padding:0;list-style:none;display:grid;gap:12px;font-size:18px}
.checklist li::before{content:"✓";margin-right:10px;color:var(--yellow);font-weight:900}
.award-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.award-grid button{min-height:78px;padding:12px;border:2px solid var(--yellow);border-radius:8px;background:transparent;color:#fff;font-weight:900;cursor:pointer}
.award-grid button.selected{background:var(--yellow);color:var(--navy)}
.how-dialog{width:min(650px,calc(100vw - 32px));padding:32px;border:0;border-radius:14px;color:var(--navy)}
.how-dialog::backdrop{background:rgba(7,24,45,.72)}
.how-dialog h2{margin:0;font-family:Impact,"Arial Black",sans-serif;font-size:48px}
.how-dialog li{margin:10px 0}
.dialog-close{float:right;border:0;background:transparent;font-size:32px;cursor:pointer}
.crime-app button:focus-visible,.crime-app a:focus-visible,.crime-app select:focus-visible,.how-dialog button:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}
@keyframes reveal-layout{from{opacity:.2;transform:scale(1.025)}
to{opacity:1;transform:scale(1)}
}
@media(max-width:900px){.story-layout{grid-template-columns:1fr}
.story-scene img{min-height:auto;aspect-ratio:16/9}
.presentation-grid{grid-template-columns:1fr}
.story-topbar{align-items:flex-start;flex-direction:column}
}
@media(max-width:600px){.crime-divider,.crime-tagline{display:none}
.crime-wordmark{font-size:14px}
.fullscreen-button{font-size:12px}
.story-screen{padding-inline:8px}
.award-grid{grid-template-columns:1fr}
.preparation-control label{width:100%}
.menu-content h1{font-size:58px}
.scene-stage{height:calc(100vh - 64px)}
.instruction-overlay{padding:18px}
.instruction-overlay h2{font-size:42px}
.observation-start-game{top:10px;left:10px;padding:8px 11px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.story-layout{animation:none}
}

/* Observation and clue-review corrections */
.time-button.primary-button{border-color:var(--coral);background:var(--coral);color:#fff}
.instruction-overlay[hidden],.countdown[hidden],.reveal-now[hidden],.clue-review[hidden],.clue-circles[hidden]{display:none!important}
.countdown{z-index:8}
.reveal-now{z-index:8}
.clue-review{position:absolute;left:50%;bottom:18px;z-index:10;width:min(920px,calc(100% - 32px));padding:12px 16px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;border:3px solid var(--yellow);border-radius:12px;background:rgba(7,24,45,.94);color:#fff;text-align:center}
.clue-review>strong{color:var(--yellow);letter-spacing:1px}
.clue-review>span{font-weight:700}
.clue-review>div{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.clue-review button{padding:9px 13px}
.clue-circles{position:absolute;inset:0;z-index:6;pointer-events:none}
.clue-circle{position:absolute;display:block;border:10px solid #e2231a;border-radius:50%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.75));animation:circle-pop .25s ease-out}
.clue-circle b{position:absolute;top:-20px;left:-15px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#e2231a;color:#fff;font-size:18px}
.clue-message{left:27%;top:6%;width:43%;height:30%}
.clue-cabinet{left:71%;top:6%;width:10%;height:39%}
.clue-project{left:34%;top:34%;width:28%;height:27%}
.clue-computer{left:79%;top:54%;width:21%;height:35%}
.clue-photo{left:55%;top:54%;width:22%;height:29%}
.clue-footprints{left:23%;top:44%;width:18%;height:46%;transform:rotate(-14deg)}
.clue-glove{left:13%;top:66%;width:12%;height:25%}
.clue-liquid{left:41%;top:40%;width:16%;height:24%}
.clue-extra{display:none}
@keyframes circle-pop{from{opacity:0;scale:.82}to{opacity:1;scale:1}}

/* Projector readability refinements */
.how-dialog{width:min(760px,calc(100vw - 32px));font-size:19px;line-height:1.5}
.how-dialog h2{font-size:58px}
.how-dialog .eyebrow{font-size:14px}
.how-dialog ol{padding-left:30px}
.how-dialog li{margin:14px 0}
.story-panel{gap:22px}
.motive-card{margin-bottom:6px}

/* Crime-scene selection */
.scene-menu-screen{height:calc(100vh - 64px);padding:20px clamp(18px,4vw,64px) 56px;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(#fff9e7 1px,transparent 1px),var(--cream);background-size:8px 8px}
.scene-menu-top{max-width:1280px;margin:auto}
.scene-menu-heading{text-align:center}
.scene-menu-heading h1{margin:8px 0;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(44px,6vw,82px);line-height:.95}
.scene-menu-heading>p:last-child{margin:8px 0 24px;font-size:clamp(16px,2vw,22px);font-weight:700}
.scene-choice-grid{max-width:1500px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.scene-choice{padding:12px 12px 18px;border:4px solid var(--navy);border-radius:14px;background:var(--ivory);color:var(--navy);box-shadow:0 8px 0 rgba(21,36,64,.35);cursor:pointer;text-align:center;transition:transform .15s,box-shadow .15s}
.scene-choice:hover{transform:translateY(-3px);box-shadow:0 11px 0 rgba(21,36,64,.35)}
.scene-choice img{width:100%;aspect-ratio:16/9;display:block;object-fit:cover;border-radius:8px}
.scene-choice span{display:block;margin:14px 6px 6px;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(24px,3vw,42px);line-height:1;color:var(--coral)}
.scene-choice small{display:block;font-size:clamp(13px,1.25vw,17px);font-weight:700}
.mature-scene{position:relative}
.content-warning-label{position:absolute;top:20px;right:20px;padding:7px 10px;border-radius:6px;background:#a82f28;color:#fff;font-size:12px;letter-spacing:1px;box-shadow:0 2px 5px rgba(0,0,0,.35)}
.warning-dialog{width:min(680px,calc(100vw - 32px));padding:38px;border:4px solid var(--coral);border-radius:16px;color:var(--navy);text-align:center}
.warning-dialog::backdrop{background:rgba(7,24,45,.82)}
.warning-dialog h2{margin:5px 0 14px;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(40px,6vw,64px);line-height:1}
.warning-dialog>p:not(.eyebrow){font-size:20px;line-height:1.5;font-weight:700}
.warning-icon{width:70px;height:70px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;background:var(--coral);color:#fff;font-size:50px;font-weight:900}
.warning-actions{margin-top:24px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* Principal's office clue positions */
.scene-principal-office .clue-message{left:0%;top:0%;width:15%;height:96%}
.scene-principal-office .clue-cabinet{left:17%;top:7%;width:23%;height:54%}
.scene-principal-office .clue-project{left:37%;top:73%;width:22%;height:25%}
.scene-principal-office .clue-computer{left:65%;top:10%;width:16%;height:29%}
.scene-principal-office .clue-photo{left:79%;top:68%;width:19%;height:29%}
.scene-principal-office .clue-footprints{left:14%;top:48%;width:27%;height:49%;transform:rotate(-13deg)}
.scene-principal-office .clue-glove{left:62%;top:82%;width:13%;height:15%}
.scene-principal-office .clue-liquid{left:55%;top:35%;width:31%;height:40%}

/* Restaurant kitchen clue positions */
.scene-restaurant-kitchen .clue-message{left:8%;top:2%;width:15%;height:61%}
.scene-restaurant-kitchen .clue-cabinet{left:23%;top:5%;width:23%;height:57%}
.scene-restaurant-kitchen .clue-project{left:37%;top:34%;width:38%;height:29%}
.scene-restaurant-kitchen .clue-computer{left:0%;top:69%;width:36%;height:31%}
.scene-restaurant-kitchen .clue-photo{left:40%;top:67%;width:32%;height:29%}
.scene-restaurant-kitchen .clue-footprints{left:7%;top:49%;width:23%;height:36%;transform:rotate(-13deg)}
.scene-restaurant-kitchen .clue-glove{left:73%;top:85%;width:10%;height:13%}
.scene-restaurant-kitchen .clue-liquid{left:86%;top:69%;width:14%;height:28%}

/* Museum jewelry theft clue positions */
.scene-museum-jewelry .clue-message{left:1%;top:1%;width:47%;height:66%}
.scene-museum-jewelry .clue-cabinet{left:18%;top:30%;width:15%;height:29%}
.scene-museum-jewelry .clue-project{left:47%;top:17%;width:15%;height:53%}
.scene-museum-jewelry .clue-computer{left:53%;top:5%;width:17%;height:43%}
.scene-museum-jewelry .clue-photo{left:72%;top:0%;width:11%;height:23%}
.scene-museum-jewelry .clue-footprints{left:57%;top:55%;width:22%;height:43%;transform:rotate(18deg)}
.scene-museum-jewelry .clue-glove{left:49%;top:84%;width:10%;height:14%}
.scene-museum-jewelry .clue-liquid{left:38%;top:49%;width:11%;height:25%}

/* Living-room attack clue positions */
.scene-living-room .clue-message{left:29%;top:52%;width:45%;height:39%}
.scene-living-room .clue-cabinet{left:60%;top:32%;width:14%;height:29%}
.scene-living-room .clue-project{left:76%;top:58%;width:18%;height:28%}
.scene-living-room .clue-computer{left:27%;top:37%;width:25%;height:15%}
.scene-living-room .clue-photo{left:19%;top:79%;width:8%;height:12%}
.scene-living-room .clue-footprints{left:73%;top:42%;width:11%;height:29%;transform:rotate(-8deg)}
.scene-living-room .clue-glove{left:45%;top:82%;width:14%;height:15%}
.scene-living-room .clue-liquid{left:67%;top:68%;width:8%;height:13%}
.scene-living-room .clue-extra{left:66.5%;top:80.5%;width:18%;height:19%;display:block}

@media(max-width:1000px){.scene-choice-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.scene-choice-grid{grid-template-columns:1fr}.scene-menu-screen{padding-inline:10px}}

/* Keep every crime-scene choice visible in wide full-screen mode */
@media(min-width:1400px){
  .crime-app:fullscreen .scene-menu-screen{height:calc(100vh - 64px);padding:14px 28px 34px;overflow-y:auto}
  .crime-app:fullscreen .scene-menu-heading h1{font-size:clamp(48px,4.2vw,72px)}
  .crime-app:fullscreen .scene-menu-heading>p:last-child{margin-bottom:16px}
  .crime-app:fullscreen .scene-choice-grid{max-width:1900px;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
  .crime-app:fullscreen .scene-choice{padding:9px 9px 15px}
  .crime-app:fullscreen .scene-choice span{margin-top:11px;font-size:clamp(22px,1.7vw,34px)}
  .crime-app:fullscreen .scene-choice small{font-size:clamp(12px,.92vw,16px)}
}

/* Keep review controls outside the crime-scene image */
.observe-screen{height:calc(100vh - 64px);min-height:0;display:flex;flex-direction:column}
.observe-screen[hidden]{display:none}
.observe-screen .scene-stage{height:auto;min-height:0;flex:1 1 auto}
.observe-screen .clue-review{position:static;left:auto;bottom:auto;transform:none;width:100%;flex:0 0 auto;border-radius:0;border-width:3px 0 0;padding:10px 16px}
.observe-screen.review-active .scene-stage>img{object-fit:contain;background:#050b13}

/* Full-screen tablet safeguards for prompts, language support, and presentation controls */
.crime-app:fullscreen .story-screen,
.crime-app:fullscreen .presentation-screen{
  height:calc(100vh - 64px);
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
.crime-app:fullscreen .story-screen{padding-bottom:max(22px,env(safe-area-inset-bottom))}
.crime-app:fullscreen .presentation-screen{place-items:start center;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.crime-app:fullscreen .presentation-card{margin:auto}
.crime-app:fullscreen .story-controls,
.crime-app:fullscreen .presentation-actions{flex-shrink:0}

/* On wide landscape tablets, keep the story buttons visible and scroll the prompt panel itself. */
@media (orientation:landscape) and (min-width:901px){
  .crime-app:fullscreen .story-screen{display:flex;flex-direction:column;overflow:hidden}
  .crime-app:fullscreen .story-topbar{width:100%;flex:0 0 auto}
  .crime-app:fullscreen .story-layout{width:100%;flex:1 1 auto;min-height:0}
  .crime-app:fullscreen .story-scene,
  .crime-app:fullscreen .story-panel{min-height:0}
  .crime-app:fullscreen .story-scene img{height:100%;min-height:0}
  .crime-app:fullscreen .story-panel{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .crime-app:fullscreen .story-controls{width:100%;margin-top:10px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
}

/* Compact spacing for short landscape screens such as phablets and small tablets. */
@media (orientation:landscape) and (max-height:850px){
  .crime-app:fullscreen .story-screen{padding:7px 12px 9px}
  .crime-app:fullscreen .story-topbar{margin-bottom:6px}
  .crime-app:fullscreen .story-layout{gap:10px}
  .crime-app:fullscreen .story-panel{padding:11px;gap:9px}
  .crime-app:fullscreen .motive-card{padding:10px;margin-bottom:0}
  .crime-app:fullscreen .motive-card h2{font-size:clamp(25px,3vw,34px)}
  .crime-app:fullscreen .motive-card p{margin-top:5px;font-size:14px}
  .crime-app:fullscreen .prompt-list,
  .crime-app:fullscreen .support-list{gap:7px;font-size:15px}
  .crime-app:fullscreen .sequence-words{margin:0;padding:8px}
  .crime-app:fullscreen .support-button{padding:9px 14px}
  .crime-app:fullscreen .story-controls{gap:7px;margin-top:7px}
  .crime-app:fullscreen .story-controls button{padding:9px 13px;font-size:13px}

  .crime-app:fullscreen .presentation-screen{padding:10px 12px 18px}
  .crime-app:fullscreen .presentation-card{padding:18px 22px}
  .crime-app:fullscreen .presentation-card>h1{font-size:clamp(48px,7vw,68px)}
  .crime-app:fullscreen .presentation-lead{margin:10px 0;font-size:17px}
  .crime-app:fullscreen .presentation-grid{gap:18px;margin:13px 0}
  .crime-app:fullscreen .presentation-grid h2{margin:7px 0 10px;font-size:24px}
  .crime-app:fullscreen .checklist{gap:7px;font-size:16px}
  .crime-app:fullscreen .award-grid{gap:8px}
  .crime-app:fullscreen .award-grid button{min-height:58px;padding:9px}
  .crime-app:fullscreen .presentation-actions{gap:8px}
  .crime-app:fullscreen .presentation-actions button{padding:9px 13px;font-size:13px}
}

/* Hidden screens must stay hidden even when a full-screen layout assigns display:flex. */
.crime-app:fullscreen .screen[hidden]{display:none!important}