#screen-landing #story-select .story-option {
  height:clamp(500px,calc(100svh - 205px),560px);
  border-color:#a17e5750;
  border-radius:14px;
}
#screen-landing #story-select .story-option:hover,
#screen-landing #story-select .story-option:focus-visible { border-color:#d2a376; }
:is(#screen-setup,#story-select [data-story],#detective-case-history [data-story])[data-story="tutorial"] { --case-cover:url('/images/covers/case34-intro-20261104.webp'); }
:is(#screen-setup,#story-select [data-story],#detective-case-history [data-story])[data-story="story3"] { --case-cover:url('/images/covers/case34-last-verse-20261104.webp'); }
:is(#screen-setup,#story-select [data-story],#detective-case-history [data-story])[data-story="prompter"] { --case-cover:url('/images/covers/case34-grand-play-20261104.webp'); }
:is(#screen-setup,#story-select [data-story],#detective-case-history [data-story])[data-story="story2"] { --case-cover:url('/images/covers/case34-mill-20261104.webp'); }
#detective-case-history [data-story="story1"] { --case-cover:url('/images/covers/creek.svg'); }
#screen-landing #story-select .story-cover { background-image:var(--case-cover); }
#screen-landing #story-select [data-story="tutorial"] .story-cover { background-position:center 22%; }
#screen-landing #story-select [data-story="story3"] .story-cover { background-position:center 25%; }
#screen-landing #story-select [data-story="prompter"] .story-cover { background-position:center 23%; }
#screen-landing #story-select [data-story="story2"] .story-cover { background-position:center 24%; }
.checkout-art.cover-jazz { background-image:url('/images/covers/case34-last-verse-20261104.webp'); }

#screen-setup[data-story].active {
  display:flow-root;
  background:
    linear-gradient(180deg,#1615184a 0%,#161518b8 52%,#161518 100%),
    radial-gradient(ellipse at 50% 18%,transparent 15%,#141315b8 100%),
    var(--case-cover,none) center var(--setup-backdrop-y,24%) / cover no-repeat #161518;
}
#screen-setup[data-story="tutorial"] { --setup-cover-y:30%;--setup-backdrop-y:31%;--setup-trim:#c89755; }
#screen-setup[data-story="story3"] { --setup-cover-y:4%;--setup-backdrop-y:14%;--setup-trim:#b8735d; }
#screen-setup[data-story="prompter"] { --setup-cover-y:24%;--setup-trim:#77988f; }
#screen-setup[data-story="story2"] { --setup-cover-y:20%;--setup-trim:#89989f; }
#screen-setup[data-story] .case-setup {
  border-color:color-mix(in srgb,var(--setup-trim,var(--border-dim)) 40%,var(--border-dim));
  box-shadow:0 24px 70px #0008;
}
#screen-setup[data-story] .setup-case-cover {
  background-image:var(--case-cover,none);
  background-position:center var(--setup-cover-y,24%);
}
#screen-setup[data-story] .setup-hero::after {
  background:linear-gradient(0deg,#151417ed 0%,#1514174a 35%,transparent 62%);
}

#screen-landing #story-select .story-option::after {
  background:linear-gradient(180deg,#15120f12 12%,#12111108 29%,#1413127a 51%,#141414e8 69%,#121314 88%);
}
#screen-landing #story-select .story-option-title { font-size:clamp(27px,2.7vw,36px); }
#screen-landing #story-select .story-hook { min-height:2.9em;margin:9px 0 13px; }
#screen-landing #story-select .story-meta {
  display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px;margin:0 0 14px;
  color:#eee2d1;font:500 13px/1.3 var(--font-sans);
}
#screen-landing #story-select .story-meta>span { white-space:nowrap; }
#screen-landing #story-select .story-meta-item { display:inline-flex;align-items:center;gap:5px; }
.story-meta-item::before {
  content:"";flex:0 0 16px;width:16px;height:16px;background:#dbb892;
  mask:var(--story-meta-icon) center / contain no-repeat;
}
.story-time {
  --story-meta-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.story-players {
  --story-meta-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20v-1a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v1M16 5a3 3 0 0 1 0 6m2 3.5a5 5 0 0 1 3 4.5v1'/%3E%3C/svg%3E");
}
.story-level { display:inline-flex;padding:4px 7px;border:1px solid #d4a57d55;border-radius:5px;background:#1d1916ca; }
.story-level[data-level="beginner"] { color:#f5e1bd;border-color:#cfb89266; }
.story-level[data-level="intermediate"] { color:#f2ca9d; }
.story-level[data-level="advanced"] { color:#ffcab5;border-color:#d88c6c66; }

#screen-landing .home-showcase {
  display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,640px);gap:24px;align-items:center;
  padding:23px 0 30px;
}
.home-trailer-heading { display:flex;align-items:center;flex-wrap:wrap;gap:12px; }
.home-trailer-heading h2 { margin:0;color:var(--paper);font:650 clamp(25px,3vw,36px)/1.1 var(--font-sans);letter-spacing:-.04em; }
.home-trailer-heading>span,.puzzle-stamp-count {
  display:inline-flex;align-items:center;white-space:nowrap;color:var(--paper-dim);font:600 13px/1.3 var(--font-sans);
}
.home-trailer-heading>span { padding:6px 8px;border:1px solid var(--border-dim);border-radius:6px; }
#screen-landing .home-showcase .home-video-player { width:100%;max-width:640px;justify-self:end; }
#screen-landing .home-showcase .home-video-play-icon { width:57px;height:57px; }
#screen-landing .home-puzzles-heading { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px; }
.puzzle-record-tools { display:flex;align-items:center;flex-wrap:wrap;gap:8px 13px; }
.puzzle-record-link,#screen-landing .menu-detective-id {
  padding:9px 13px;border:1px solid #c69c6f88;border-radius:7px;
  color:var(--paper);background:var(--accent-soft);font:600 13px/1.25 var(--font-sans);cursor:pointer;
}
.puzzle-record-link:hover,#screen-landing .menu-detective-id:hover { border-color:var(--amber); }
.puzzle-victory .victory-stamp-label {
  margin:-17px 0 22px;color:#d9c8ad;font:14px/1.4 var(--font-sans);letter-spacing:0;
}

.detective-dialog [hidden] { display:none!important; }
.detective-dialog .detective-account-actions { gap:9px; }
.detective-dialog .detective-account-actions>.btn { font-size:14px; }
.detective-dialog .detective-status:empty { display:none; }
.detective-dialog:is([data-view="signin"],[data-view="signup"]) {
  --auth-inset:clamp(18px,5vw,28px);
  width:min(420px,calc(100% - 28px));
  background:var(--bg-panel);color:var(--paper);border-color:var(--border-dim);
}
.detective-dialog:is([data-view="signin"],[data-view="signup"]) [data-id-record] { display:none; }
.detective-dialog:is([data-view="signin"],[data-view="signup"]) .detective-dialog-heading {
  padding:18px var(--auth-inset) 10px;border:0;
}
.detective-dialog:is([data-view="signin"],[data-view="signup"]) .detective-dialog-heading h2 {
  font-size:24px;line-height:1.2;
}
.detective-dialog:is([data-view="signin"],[data-view="signup"]) .case-dialog-close {
  width:40px;height:40px;border-color:transparent;
}
.detective-dialog:is([data-view="signin"],[data-view="signup"]) .case-dialog-close:hover { background:var(--accent-soft); }
.detective-dialog:is([data-view="signin"],[data-view="signup"]) .detective-body { padding:8px var(--auth-inset) 16px; }
.detective-dialog:is([data-view="signin"],[data-view="signup"]) .detective-account { margin:0;padding:0;border:0; }
.detective-auth-form { gap:16px;margin:0; }
.detective-dialog .detective-auth-form label { gap:6px;font-size:14px;font-weight:600; }
.detective-dialog .detective-auth-form input {
  box-sizing:border-box;min-height:44px;padding:10px 12px;
  background:var(--input-bg);color:var(--paper);border-color:var(--border-dim);font-size:16px;
}
.detective-dialog .detective-auth-form input:focus-visible { outline:2px solid var(--amber);outline-offset:1px; }
.detective-dialog .detective-auth-form .btn { min-height:44px;margin-top:3px; }
.detective-dialog .detective-auth-terms { margin:0; }
.detective-dialog:is([data-view="signin"],[data-view="signup"]) .detective-account-actions {
  justify-content:space-between;column-gap:14px;row-gap:0;
  margin-top:16px;padding-top:5px;border-top:1px solid var(--border-dim);
}
.detective-dialog:is([data-view="signin"],[data-view="signup"]) .detective-account-actions>.btn {
  flex:0 0 auto;min-width:0;width:auto;min-height:44px;padding:0;
  border:0;background:transparent;box-shadow:none;color:var(--paper-dim);font-weight:500;
}
.detective-dialog:is([data-view="signin"],[data-view="signup"]) .detective-account-actions>.btn:hover {
  color:var(--paper);text-decoration:underline;text-underline-offset:4px;
}
@font-face {
  font-family:"Journal Hand";
  src:url('/fonts/Caveat-Variable.ttf') format('truetype');
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
}

.detective-dialog[data-view="profile"] {
  --journal-ink:#32271e;
  --journal-writing:#344751;
  --journal-red:#883c34;
  --journal-rule:#76573753;
  --journal-paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23624b32' d='M0 0h140v140H0z' filter='url(%23g)' opacity='.23'/%3E%3C/svg%3E");
  --journal-stamp-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -.72'/%3E%3C/filter%3E%3Cpath d='M0 0h100v100H0z' filter='url(%23s)'/%3E%3C/svg%3E");
  width:min(940px,calc(100% - 36px));max-height:calc(100dvh - 20px);
  position:fixed;border:0;background:transparent;box-shadow:none;
}
.detective-dialog[data-view="profile"] .detective-dialog-heading {
  justify-content:flex-end;padding:0 6px 7px;border:0;
}
.detective-dialog[data-view="profile"] .case-dialog-close {
  width:32px;height:32px;color:#ead9be;border-color:#b393665e;background:#392c20;
}
.detective-dialog[data-view="profile"] .case-dialog-close:hover { border-color:#d1a66f;background:#493525; }
.detective-dialog[data-view="profile"] .detective-body { padding:0 6px 6px; }
.detective-book {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  padding:9px 10px 16px;border:1px solid #6d5239;border-radius:10px;
  background:var(--journal-paper-grain),linear-gradient(90deg,#39291d,#24170f 49%,#352518 52%,#493524);
  box-shadow:0 3px 0 #21170f,0 8px 16px #0007;
}
.detective-page {
  position:relative;min-width:0;padding:24px clamp(20px,3vw,32px) 32px;
  background:var(--journal-paper-grain),var(--journal-light);
  color:var(--journal-ink);
  box-shadow:0 3px 0 #ceb48a,0 5px 0 #a27c55,0 6px 0 #e0c69d,0 7px 0 #7d5d3f;
}
.detective-page-owner {
  --journal-light:linear-gradient(90deg,#d0b48e 0%,#ebd9b7 7%,#efdfbc 72%,#dec297 94%,#b7946d 100%);
  border-radius:5px 11px 16px 5px;
}
.detective-page-cases {
  --journal-light:linear-gradient(90deg,#a5815c 0%,#d9c09a 4%,#efdfbc 11%,#ead7b2 84%,#d6b58a 100%);
  border-radius:11px 5px 5px 16px;
}
.detective-book .detective-page .detective-page-title {
  margin:0;padding:0 24px 10px 0;border-bottom:3px double #8f6c5087;
  color:var(--journal-ink);font:600 clamp(23px,3.6vw,32px)/1.1 Georgia,serif;letter-spacing:-.035em;
}
.detective-owner {
  display:grid;grid-template-columns:clamp(60px,11vw,91px) minmax(0,1fr);gap:14px;align-items:center;margin:23px 0 18px;
}
.detective-owner .id-badge-photo {
  position:relative;width:100%;aspect-ratio:1;border:5px solid #f4e5c8;border-bottom-width:10px;
  background-size:cover;background-position:center;box-shadow:1px 3px 5px #432e226b;transform:rotate(-5deg);
}
.detective-owner .id-badge-photo::before {
  content:"";position:absolute;left:16%;width:64%;top:-10px;height:13px;transform:rotate(7deg);
  background:#b79b628a;clip-path:polygon(0 4%,98% 0,100% 90%,2% 100%);
}
.detective-owner-name { min-width:0; }
.detective-owner-name .detective-passport-name {
  margin:0;padding-bottom:2px;border-bottom:1px solid var(--journal-rule);overflow-wrap:anywhere;
  color:var(--journal-writing);font:600 32px/.95 "Journal Hand","Segoe Print",cursive;
}
.detective-owner-name .detective-passport-number {
  display:block;margin-top:6px;color:#69523e;font:13px/1.25 'Courier New',monospace;overflow-wrap:anywhere;
}
.detective-page .id-statistics {
  display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 0 10px;border-block:1px solid var(--journal-rule);
}
.detective-page .id-statistics>div+div { padding-left:15px;border-left:1px solid var(--journal-rule); }
.detective-page .id-statistics strong { color:var(--journal-writing);font:700 31px/.95 "Journal Hand","Segoe Print",cursive; }
.detective-page .id-statistics span { margin-top:4px;color:#65513f;font:13px/1.25 'Courier New',monospace; }
.detective-page .detective-stamp-section { margin-top:18px; }
.detective-stamp-heading { display:flex;justify-content:space-between;align-items:baseline;gap:8px; }
.detective-page .detective-stamp-heading h3 { margin:0;color:var(--journal-ink);font:600 18px/1.2 Georgia,serif; }
#detective-badge-count { color:#694f3a;font:13px/1.2 'Courier New',monospace;white-space:nowrap; }
.detective-page .id-marks { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:10px 0 0; }
.id-stamp-entry { display:grid;justify-items:center;align-content:start;gap:5px;text-align:center;color:#6e5642; }
.id-stamp-entry strong { font:13px/1.2 'Courier New',monospace; }
.detective-page .id-skill-mark {
  width:50px;height:50px;box-sizing:border-box;border:1px dashed #987b61;border-radius:49% 51% 50% 47%;
  background:transparent;color:#8b6c53;opacity:.8;
}
.detective-page .id-skill-mark svg { width:24px;height:24px; }
.detective-page .id-skill-mark.earned {
  border:4px double currentColor;color:var(--journal-red);background:transparent;box-shadow:none;opacity:1;
  mask:var(--journal-stamp-grain) center / 45px 45px;transform:rotate(-11deg);
}
.id-stamp-entry:nth-child(2) .id-skill-mark.earned { transform:rotate(7deg); }
.id-stamp-entry:nth-child(3) .id-skill-mark.earned { transform:rotate(-4deg); }
.id-stamp-entry.is-earned strong { color:var(--journal-red); }
.detective-folio { position:absolute;bottom:8px;left:23px;color:#6a523c;font:12px/1 'Courier New',monospace; }
.detective-page-cases .detective-folio { right:23px;left:auto; }

#detective-case-history { display:grid;margin:0;padding:0;list-style:none; }
#detective-case-history .detective-case-row {
  display:grid;grid-template-columns:55px minmax(0,1fr) auto 10px;align-items:center;gap:8px;
  box-sizing:border-box;width:100%;min-height:66px;padding:8px 0;
  border:0;border-bottom:1px solid var(--journal-rule);border-radius:0;background:transparent;color:inherit;text-align:left;
}
#detective-case-history button.detective-case-row { cursor:pointer; }
#detective-case-history button.detective-case-row:hover { background:#82573112; }
#detective-case-history button.detective-case-row:focus-visible { outline:2px solid var(--journal-writing);outline-offset:1px; }
.detective-case-cover {
  width:55px;height:45px;border:3px solid #f5e7c9;border-bottom-width:5px;
  background:#17191b var(--case-cover,none) center 33% / cover;
  box-shadow:1px 2px 3px #503b2d67;transform:rotate(-3deg);
}
#detective-case-history>li:nth-child(even) .detective-case-cover { transform:rotate(2deg); }
.detective-case-open { grid-column:4;color:#785b43;font:20px/1 Georgia,serif; }
.detective-case-details>strong { display:block;color:var(--journal-ink);font:600 18px/1.12 Georgia,serif;overflow-wrap:anywhere; }
.detective-case-meta,.detective-case-result>span { color:var(--journal-writing);font:600 19px/1 "Journal Hand","Segoe Print",cursive; }
.detective-case-meta { display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;margin-top:3px; }
.detective-case-meta time { white-space:nowrap; }
.detective-case-meta .story-time { display:inline-flex;align-items:center;gap:3px; }
.detective-case-meta .story-time::before { flex-basis:13px;width:13px;height:13px;background:currentColor; }
.detective-case-result { display:grid;justify-items:end;gap:1px;white-space:nowrap; }
.detective-case-result .detective-case-score { color:var(--journal-red);font:700 29px/.9 "Journal Hand","Segoe Print",cursive; }
.detective-case-result .detective-closed-stamp {
  display:inline-block;padding:1px 3px;margin:0 0 3px;border:3px double currentColor;border-radius:1px;
  color:var(--journal-red);font:700 10px/1 'Courier New',monospace;letter-spacing:.05em;text-transform:uppercase;
  mask:var(--journal-stamp-grain) center / 34px 34px;transform:rotate(-8deg);
}
.detective-case-runs { padding:6px 8px 2px 63px;color:#69523e;font:13px/1.3 'Courier New',monospace; }
.detective-case-runs summary { cursor:pointer; }
.detective-case-runs ul { margin:0;padding:0;list-style:none; }
.detective-case-runs li { display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--journal-rule); }
.detective-dialog[data-view="profile"] .detective-account { margin-top:10px;padding:0;border:0; }
.detective-dialog[data-view="profile"] .detective-account-actions { justify-content:flex-end; }
.detective-dialog[data-view="profile"] .detective-account-actions>.btn {
  flex:0 0 auto;min-width:0;width:auto;min-height:36px;padding:6px 12px;
  border:1px solid #b393665e;background:#392c20;color:#efdfc3;box-shadow:none;
}
.detective-dialog[data-view="profile"] .detective-account-actions>.btn-primary { background:#674931; }
.detective-dialog[data-view="profile"] .detective-account-actions>.btn:hover { border-color:#d1a66f; }

@media(max-width:620px) {
  .detective-dialog[data-view="profile"] { width:min(410px,calc(100% - 20px)); }
  .detective-dialog[data-view="profile"] .detective-body { padding-inline:4px; }
  .detective-dialog[data-view="profile"] .detective-dialog-heading { padding-inline:4px; }
  .detective-book { grid-template-columns:1fr;gap:11px;padding:7px 7px 14px; }
  .detective-page { padding:18px 15px 26px;border-radius:5px; }
  .detective-page-owner,.detective-page-cases {
    --journal-light:linear-gradient(90deg,#cfb48b,#efdfbc 7%,#ead6ae 88%,#d0b089);
  }
  .detective-owner { margin:16px 0 12px; }
  .detective-owner-name .detective-passport-name { font-size:29px; }
  .detective-page .detective-stamp-section { margin-top:13px; }
  .detective-page .id-skill-mark { width:43px;height:43px; }
  .detective-page .id-skill-mark svg { width:21px;height:21px; }
  .id-stamp-entry strong { font-size:12px; }
  #detective-case-history .detective-case-row { grid-template-columns:44px minmax(0,1fr) auto 8px;gap:6px; }
  .detective-case-cover { width:44px;height:40px; }
  .detective-case-details>strong { font-size:16px; }
  .detective-case-meta,.detective-case-result>span { font-size:17px; }
  .detective-case-runs { padding-left:50px; }
}

@media(max-width:640px) {
  #screen-landing #story-select .story-option { height:500px; }
  #screen-landing #story-select .story-meta { font-size:12px;gap:6px 8px; }
  #screen-landing .home-showcase { grid-template-columns:1fr;gap:13px;padding:18px 0 26px; }
  #screen-landing .home-showcase .home-video-play-icon { width:45px;height:45px; }
  .home-trailer-heading h2 { font-size:24px; }
  #screen-landing .home-puzzles-heading h2 { max-width:none; }
}