/* Graphite & copper. Shared surfaces for the live game, with a daylight theme.
   The map and evidence originals retain their own colours. */
:root {
  color-scheme: dark;
  --bg-black:#202124; --bg-panel:#292a2d; --bg-panel-2:#2e2f33;
  --bg-card:#303135; --border-dim:#464549; --amber:#e5a16d;
  --amber-bright:#f0b887; --paper:#f0eae1; --paper-dim:#b9b2a8;
  --accent-soft:#493b30; --input-bg:#222326; --shadow:0 18px 60px #0004;
  --material-action-bg:#2e2f33; --material-action-hover:#393a3f;
  --font-sans:Arial,Helvetica,sans-serif; --font-serif:Georgia,'Times New Roman',serif;
  --green-ok:#9bb8a6; --yellow-partial:#d4ad75; --red-stamp:#d8877d;
  --header-height:64px; --surface-radius:12px;
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg-black:#ede9e2; --bg-panel:#fcfaf5; --bg-panel-2:#f3eee6;
  --bg-card:#fcfaf5; --border-dim:#d7cfc2; --amber:#a8542d;
  --amber-bright:#874020; --paper:#332c26; --paper-dim:#74695f;
  --accent-soft:#f0dfcf; --input-bg:#f4f0e9; --shadow:0 18px 60px #45332418;
  --material-action-bg:#e5e5e7; --material-action-hover:#d8d9dc;
  --green-ok:#466c58; --yellow-partial:#896222; --red-stamp:#a34038;
}
html { font-size:16px; scrollbar-color:var(--border-dim) var(--bg-panel); }
body { background:var(--bg-black); color:var(--paper); font:16px/1.5 var(--font-sans); }
button,input,select,textarea { font-family:var(--font-sans); }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex="0"]:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
[hidden] { display:none !important; }
input[type="text"],input[type="search"],textarea,select {
  background:var(--input-bg); color:var(--paper); border:1px solid var(--border-dim);
  border-radius:8px; padding:12px 14px; font:15px/1.45 var(--font-sans);
}
input::placeholder,textarea::placeholder { color:var(--paper-dim); opacity:.85; }
.btn { min-height:42px; border-radius:8px; padding:10px 17px; font:600 14px/1.4 var(--font-sans); letter-spacing:0; text-transform:none; transition:background .15s,border-color .15s; }
.btn-primary { background:var(--amber); color:#211c18; border:1px solid var(--amber); box-shadow:none; }
:root[data-theme="light"] .btn-primary { color:#fff8f1; }
.btn-primary:hover { background:var(--amber-bright); border-color:var(--amber-bright); }
.btn-ghost { background:transparent; color:var(--paper); border:1px solid var(--border-dim); }
.btn-ghost:hover { background:var(--accent-soft); color:var(--paper); border-color:var(--amber); }
.hint-text { color:var(--paper-dim); font:14px/1.6 var(--font-sans); }
h1,h2,h3,h4 { letter-spacing:-.035em; }
.design-eyebrow { color:var(--amber); font:600 11px/1.4 var(--font-sans); letter-spacing:.15em; text-transform:uppercase; margin:0 0 10px; }
.design-page-heading { margin:0 0 28px; }
.design-page-heading h2 { font:600 38px/1.15 var(--font-sans); margin:0 0 12px; }
.design-page-heading h2:last-child { margin-bottom:0; }
.design-page-heading p:not(.design-eyebrow) { color:var(--paper-dim); max-width:680px; margin:0; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:8px 12px; border:1px solid var(--border-dim); border-radius:7px; background:transparent; color:var(--paper); font:13px/1.3 var(--font-sans); white-space:nowrap; cursor:pointer; }
.theme-toggle:hover { background:var(--accent-soft); border-color:var(--amber); }
.menu-theme { position:absolute; right:32px; top:30px; z-index:5; }
/* Quiet shared credits access; source information lives outside the map. */
.menu-tools { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-left:auto; }
.menu-tools .menu-theme { position:static; }
.setup-hero { position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:300px; padding:24px 28px; }
.setup-case-cover { position:absolute; z-index:-2; inset:0; width:100%; height:100%; margin:0; background-size:cover; background-position:50% 45%; background-color:#242326; }
.setup-hero::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,#141518e6,#14151800 85%),linear-gradient(90deg,#14151844,#14151800 70%); }
#screen-setup .setup-back { position:absolute; top:14px; left:14px; min-height:44px; margin:0; padding:8px 12px; border:1px solid #fff3; border-radius:6px; background:#17181a99; color:#f0eae1; font:13px/1.4 var(--font-sans); backdrop-filter:blur(6px); }
#screen-setup .setup-back:hover { background:#17181acc; border-color:#fff6; }
.about-open { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:8px 10px; border:0; border-radius:7px; background:transparent; color:var(--paper-dim); font:13px/1.3 var(--font-sans); white-space:nowrap; cursor:pointer; }
.about-open:hover { background:var(--accent-soft); color:var(--paper); }
.about-game-dialog,.finish-game-dialog { box-sizing:border-box; width:calc(100% - 40px); max-width:520px; max-height:calc(100dvh - 40px); margin:auto; padding:28px; overflow-y:auto; border:1px solid var(--border-dim); border-radius:12px; background:var(--bg-panel); color:var(--paper); box-shadow:var(--shadow); font:15px/1.65 var(--font-sans); }
.about-game-dialog::backdrop,.finish-game-dialog::backdrop { background:#0009; backdrop-filter:blur(4px); }
.finish-game-dialog h2 { margin:0; font:600 27px/1.25 var(--font-sans); }
#finish-game-description { margin:14px 0 22px; }
.finish-game-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px; }
.finish-game-actions .btn { flex:0 0 auto; width:auto; min-height:42px; margin:0; padding:10px 14px; font:600 13px/1.4 var(--font-sans); }
.about-game-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.about-game-heading h2 { margin:0; font:600 27px/1.25 var(--font-sans); letter-spacing:-.035em; }
.about-game-close { flex:0 0 36px; display:grid; place-items:center; width:36px; height:36px; min-height:36px; margin:-5px -6px 0 0; padding:0; border:1px solid var(--border-dim); border-radius:50%; background:transparent; color:var(--paper-dim); font:26px/1 var(--font-sans); cursor:pointer; }
.about-game-close:hover { color:var(--paper); background:var(--accent-soft); }
#about-game-description { margin:8px 0 26px; color:var(--paper-dim); }
.about-game-credits { border-top:1px solid var(--border-dim); padding-top:20px; }
.about-game-credits h3 { margin:0 0 12px; color:var(--paper); font:600 17px/1.4 var(--font-sans); }
.about-game-credits p { margin:0 0 12px; }
.about-game-credits p:last-child { margin-bottom:0; color:var(--paper-dim); }
.about-game-credits a { color:var(--amber); text-decoration:underline; text-underline-offset:3px; }
/* Catalogue, setup and partner invitation. */
#screen-landing,#screen-setup,#screen-waiting { background:var(--bg-black); }
.case-library { max-width:1240px; padding:32px 40px 64px; }
.library-header { border-bottom:1px solid var(--border-dim); padding-bottom:24px; }
.library-brand { font:600 23px/1.05 var(--font-sans); letter-spacing:-.8px; text-transform:none; }
#screen-landing .library-intro { text-align:left; padding:46px 0 30px; }
#screen-landing .library-intro h1 { font-size:42px; font-weight:600; }
#screen-landing .story-select { gap:24px; }
#screen-landing .story-option { padding:0; background:var(--bg-panel); border:1px solid var(--border-dim); border-radius:12px; box-shadow:0 10px 30px #0001; }
#screen-landing .story-option:hover { background:var(--bg-panel); border-color:var(--amber); transform:translateY(-3px); }
#screen-landing .story-cover { border-radius:0; height:230px; }
.story-option-body { padding:25px !important; }
.story-option-title { color:var(--paper); font:600 28px/1.15 var(--font-sans); }
#screen-landing .story-option-sub,.story-hook { color:var(--paper-dim); font-size:14px; line-height:1.6; }
.story-hook { margin-top:16px; }
.story-cta { margin-top:24px; color:#211c18; background:var(--amber); border-radius:7px; font-size:14px; border-color:var(--border-dim); }
:root[data-theme="light"] .story-cta { color:#fff8f1; }
.story-number { color:#f0eae1; }
.case-setup { box-sizing:border-box; width:calc(100% - 40px); max-width:640px; padding:0; margin:clamp(20px,4vh,40px) auto; overflow:hidden; border:1px solid var(--border-dim); border-radius:14px; background:var(--bg-panel); box-shadow:var(--shadow); }
.case-brief { min-width:0; padding:20px 28px 22px; }
.setup-case-meta { display:flex; flex-wrap:wrap; gap:4px 14px; margin:0 0 12px; }
.setup-case-kicker { margin:0; color:var(--amber); font:400 12px/1.55 var(--font-sans); }
#screen-setup .case-title { position:relative; max-width:100%; margin:54px 0 0; color:#fff9f2; font:600 40px/1.1 var(--font-sans); letter-spacing:-.035em; text-shadow:0 2px 14px #0008; text-wrap:balance; }
#screen-setup .case-sub { margin:0; color:var(--paper-dim); font:12px/1.55 var(--font-sans); }
.setup-synopsis { color:var(--paper); font:15px/1.6 var(--font-sans); text-wrap:pretty; }
#screen-setup .case-intro { display:inline; margin:0; color:inherit; font:inherit; }
.setup-case-objective { display:inline; margin:0; padding:0; border:0; color:inherit; font:600 15px/1.6 var(--font-sans); }
.setup-play-panel { min-width:0; padding:22px 28px 26px; border:0; border-top:1px solid var(--border-dim); border-radius:0; background:none; box-shadow:none; }
.setup-mode-row { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:20px; margin-bottom:18px; }
#screen-setup .mode-heading { margin:0; color:var(--paper-dim); font:400 13px/1.4 var(--font-sans); letter-spacing:0; }
#screen-setup .play-mode-select { margin:0; padding:4px; gap:4px; }
#screen-setup .play-mode { min-height:44px; padding:9px 8px; font:500 14px/1.4 var(--font-sans); }
#screen-setup .create-case-form { grid-template-columns:minmax(0,1fr) 180px; align-items:end; gap:12px; }
#screen-setup .create-case-form .btn,#screen-setup input[type="text"] { min-height:46px; height:46px; }
#screen-setup .landing-field label { margin-bottom:8px; color:var(--paper-dim); font:500 12px/1.4 var(--font-sans); }
#screen-setup .form-footnote { margin:14px 0 0; color:var(--paper-dim); font:13px/1.55 var(--font-sans); text-align:left; }
#screen-setup #btn-show-join { display:block; width:100%; margin:18px 0 0; padding:0; border:0; background:none; color:var(--paper-dim); font:13px/1.5 var(--font-sans); text-align:center; cursor:pointer; }
#screen-setup #btn-show-join:hover { color:var(--amber); text-decoration:underline; text-underline-offset:3px; }
#screen-setup .join-case { margin:0; }
#screen-setup .join-case h2 { margin:0 0 16px; font:600 18px/1.3 var(--font-sans); }
#screen-setup .join-case-fields { grid-template-columns:90px minmax(0,1fr); }
#screen-setup .landing-error { margin:14px 0 0; }
#screen-setup .landing-error:empty { display:none; }
.play-mode-select { border-radius:9px; background:var(--input-bg); }
.play-mode { border-radius:6px; font-size:15px; }
.play-mode.active { background:var(--accent-soft); color:var(--paper); }
#screen-setup input[type="text"] { background:var(--input-bg); border-radius:8px; font-size:16px; }
#screen-setup .btn { border-radius:8px; font-size:15px; }
#screen-setup .btn-primary { color:#211c18; }
:root[data-theme="light"] #screen-setup .btn-primary { color:#fff8f1; }
@media(max-width:480px) {
  .setup-hero { min-height:240px; padding:20px; }
  .case-brief { padding:18px 20px 20px; }
  .setup-play-panel { padding:20px; }
  .setup-mode-row { grid-template-columns:1fr; gap:7px; margin-bottom:16px; }
  #screen-setup .create-case-form { grid-template-columns:1fr; gap:14px; }
}
.setup-text-button { color:var(--amber); }
#screen-waiting .landing-content { background:var(--bg-panel); border:1px solid var(--border-dim); border-radius:16px; box-shadow:var(--shadow); padding:40px; }
#screen-waiting p { color:var(--paper-dim); font-size:16px; }
#screen-waiting .room-code-display { background:var(--input-bg); border-radius:8px; letter-spacing:.18em; }
/* A single header with the case title, primary navigation and room controls. */
#screen-game.active { display:flex; flex-direction:column; height:100dvh; min-height:0; overflow:hidden; }
.topbar { flex:0 0 var(--header-height); height:var(--header-height); min-height:var(--header-height); display:flex; flex-wrap:nowrap; gap:20px; padding:0 22px; background:var(--bg-panel); border-bottom:1px solid var(--border-dim); box-shadow:none; position:relative; z-index:50; }
.topbar-left { flex:0 0 auto; gap:0; }
.topbar-title { color:var(--paper); font:600 21px/1.1 var(--font-sans); letter-spacing:-.8px; max-width:250px; }
.topbar .tabs { flex:1; min-width:0; display:flex; gap:3px; border:0; background:none; margin:0; padding:0; overflow-x:auto; scrollbar-width:none; }
.topbar .tab-btn { background:transparent; border:0; border-radius:7px; padding:11px 13px; color:var(--paper-dim); font:14px/1.35 var(--font-sans); letter-spacing:0; white-space:nowrap; }
.topbar .tab-btn.active { background:var(--accent-soft); color:var(--paper); box-shadow:inset 0 -2px var(--amber); }
.topbar .tab-btn:hover { color:var(--paper); background:var(--bg-card); }
.topbar-right { flex:0 0 auto; width:auto; display:flex; align-items:center; gap:9px; }
.timer-block { display:flex; align-items:center; gap:3px; border:0; background:none; padding:0; }
.timer-display { color:var(--paper-dim); font:12px/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.btn-timer { min-height:34px; min-width:30px; padding:5px; border:0; color:var(--paper-dim); }
.room-menu { position:relative; z-index:10; }
.room-menu summary { color:var(--paper); font-size:13px; list-style:none; cursor:pointer; padding:9px; border-radius:7px; }
.room-menu summary::-webkit-details-marker { display:none; }
.room-menu summary::after { content:'⌄'; margin-left:7px; color:var(--paper-dim); }
.room-menu[open] summary { background:var(--accent-soft); }
.room-menu-content { position:absolute; right:0; top:45px; width:250px; padding:18px; background:var(--bg-panel); border:1px solid var(--border-dim); border-radius:10px; box-shadow:var(--shadow); }
.topbar-players { display:grid; gap:12px; padding-bottom:16px; }
.player-chip { font-size:14px; background:none; border:0; color:var(--paper); }
.topbar-code { display:block; padding-top:14px; border-top:1px solid var(--border-dim); color:var(--paper-dim); font:13px/1.5 var(--font-sans); }
.topbar-code b { color:var(--paper); font-family:var(--font-mono); margin-left:8px; letter-spacing:2px; }
.topbar .theme-toggle { border:0; border-left:1px solid var(--border-dim); border-radius:0; }
.tab-content { flex:1; min-height:0; padding:0; overflow:hidden; }
.tab-pane.active:not(#tab-map) { height:100%; overflow-y:auto; padding:40px clamp(22px,4vw,64px) 70px; max-width:none; margin:0; }
.tab-pane h3 { font:600 23px/1.25 var(--font-sans); color:var(--paper); border:0; margin:36px 0 20px; padding:0; }
/* Directory and map: two equal working tools, quiet compact travel feed. */
#tab-map.investigation-layout.active { display:flex; flex-direction:row; align-items:stretch; height:100%; min-height:0; gap:0; }
.investigation-col { border:0; border-radius:0; background:var(--bg-panel); }
#col-addressbook { flex:0 0 var(--addressbook-width,350px); width:var(--addressbook-width,350px); min-width:240px; max-width:46vw; border-right:1px solid var(--border-dim); }
#col-addressbook .col-body { display:flex; flex-direction:column; padding:25px 18px 0; overflow:hidden; }
#col-addressbook h3 { margin:0 0 20px; color:var(--paper); font:600 23px/1.2 var(--font-sans); border:0; padding:0; }
#col-addressbook .col-body > .hint-text { display:none; }
.addressbook-search { width:100%; height:48px; flex:0 0 auto; margin:0 0 12px; padding:12px 14px; background:var(--input-bg); font-size:15px; border-radius:8px; }
.directory-options { flex:0 0 auto; align-self:flex-start; width:auto; max-width:100%; margin:0 0 10px; min-width:0; border:0; background:none; }
.directory-options[open] { width:100%; align-self:stretch; justify-self:stretch; }
.directory-options > summary { display:inline-flex; align-items:center; gap:8px; width:max-content; max-width:100%; box-sizing:border-box; min-height:36px; padding:8px 11px; border:1px solid var(--border-dim); border-radius:7px; background:var(--accent-soft); color:var(--paper); font:600 13px/1.35 var(--font-sans); cursor:pointer; list-style:none; user-select:none; }
.directory-options > summary::-webkit-details-marker { display:none; }
.directory-options > summary::before { content:''; flex:0 0 16px; width:16px; height:16px; background:currentColor; mask:center/contain no-repeat 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'%3E%3Cpath d='M3 6h4m4 0h10M3 18h10m4 0h4'/%3E%3Ccircle cx='9' cy='6' r='2'/%3E%3Ccircle cx='15' cy='18' r='2'/%3E%3C/svg%3E"); }
.directory-options > summary::after { content:''; flex:0 0 6px; width:6px; height:6px; margin:0 1px 3px 2px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.directory-options[open] > summary::after { transform:rotate(225deg); margin-bottom:-3px; }
.directory-options > summary:hover { border-color:var(--amber); }
.directory-options > summary:focus-visible { outline:2px solid var(--amber); outline-offset:3px; border-radius:7px; }
.directory-options[open] > summary { border-color:var(--amber); }
.directory-filter-count { display:inline-flex; align-items:center; justify-content:center; min-width:19px; min-height:19px; padding:0 5px; background:var(--accent-soft); color:var(--amber); border-radius:5px; font:600 11px/1.2 var(--font-sans); }
.directory-options:not([open]) > .directory-filters,.directory-options:not([open]) > .directory-results { display:none; }
.directory-filters { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:0 0 10px; flex:0 0 auto; }
.directory-options > .directory-filters { padding:10px 10px 3px; }
.directory-filters label { min-width:0; color:var(--paper-dim); font-size:11px; }
.directory-filters select { display:block; width:100%; margin-top:4px; padding:8px 5px; font-size:12px; border-radius:6px; }
.directory-results { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:35px; font-size:12px; color:var(--paper-dim); }
.directory-options > .directory-results { padding:0 8px 3px 10px; }
.directory-results button { background:none; border:0; color:var(--amber); padding:4px; font-size:12px; }
#addressbook-container { flex:1; min-height:0; overflow-y:auto; padding:0 4px 20px 0; scrollbar-width:thin; }
.addr-row { display:block; position:relative; padding:16px 10px; border:0; border-bottom:1px solid var(--border-dim); border-radius:0; background:none; cursor:pointer; text-align:left; }
.addr-row:hover { background:var(--bg-card); }
.addr-row.selected { background:var(--accent-soft); border-radius:7px; box-shadow:inset 3px 0 var(--amber); }
.addr-row-name { color:var(--paper); font:16px/1.4 var(--font-sans); }
.addr-row-meta { margin-top:7px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.addr-row-addr { color:var(--paper-dim); font:13px/1.4 var(--font-sans); }
.addr-row-badge { background:transparent; border:0; padding:0; color:var(--paper-dim); font:11px/1.4 var(--font-sans); }
.addr-row-badge.badge-opened { color:var(--paper-dim); }
.badge-opened::before { content:'✓ '; }
.addr-row-badge.badge-more { color:var(--amber); }
.addressbook-resize { right:-4px; width:7px; z-index:4; }
.investigation-col-center { flex:1 1 0; min-height:0; flex-direction:column; position:relative; }
#leaflet-map { min-height:0; height:auto; flex:1 1 0; }
.map-toolbar { position:absolute; top:18px; right:18px; border:0; padding:0; z-index:500; gap:8px; background:transparent; }
.map-toolbar .btn { background:var(--bg-panel); color:var(--paper); border:1px solid var(--border-dim); min-height:38px; padding:8px 12px; box-shadow:0 3px 12px #0002; font:13px/1.3 var(--font-sans); }
.map-toolbar .btn:hover { border-color:var(--amber); }
.map-legend,.map-compass { display:none; }
.leaflet-container { font-family:var(--font-sans) !important; }
.leaflet-control-zoom { border:1px solid var(--border-dim) !important; border-radius:8px; overflow:hidden; box-shadow:0 3px 10px #0003 !important; margin:18px !important; }
.leaflet-control-zoom a,.leaflet-control-zoom a:hover { background:var(--bg-panel); color:var(--paper); width:34px; height:34px; line-height:34px; border-color:var(--border-dim); font-family:var(--font-sans); }
.leaflet-bar a.leaflet-disabled { background:var(--bg-panel); color:var(--paper-dim); opacity:.65; }
.leaflet-control-attribution { font:9px/1.5 var(--font-sans) !important; background:#fcfaf5ed !important; color:#5f554b !important; }
.leaflet-control-attribution a { color:#5f554b !important; }
.town-marker { border-radius:50%; transform:none; width:30px; height:30px; border:2px solid #b8ad9d; background:#292a2d; box-shadow:0 2px 5px #0003; }
.town-marker svg { transform:none; margin:6px; width:14px; height:14px; stroke:#f0eae1; stroke-width:1.8; }
.town-marker.opened { background:#292a2d; border-color:#b8ad9d; box-shadow:0 2px 5px #0003; }
.town-marker.opened svg { display:none; }
.town-marker.opened::after { content:'✓'; position:absolute; inset:0; color:#f0eae1; text-align:center; font:18px/26px var(--font-sans); }
.town-marker.selected { background:#e5a16d; border-color:#845333; box-shadow:0 0 0 5px #e5a16d55,0 3px 10px #0004; }
.town-marker.selected svg { stroke:#29221d; }
.town-marker.selected.opened::after { color:#29221d; }
.location-map-popup .leaflet-popup-content-wrapper { padding:0; background:var(--bg-panel); color:var(--paper); border:1px solid var(--border-dim) !important; border-radius:12px !important; box-shadow:0 14px 35px #0005; overflow:hidden; }
.location-map-popup .leaflet-popup-tip { background:var(--bg-panel); }
.location-map-popup .leaflet-popup-content { margin:0; width:278px !important; font:14px/1.5 var(--font-sans); }
.location-map-popup .popup-loc-photo { display:block; width:100%; height:120px; max-height:120px; object-fit:cover; border:0; }
.popup-loc-body { padding:18px; }
.popup-loc-name { color:var(--paper); font:600 22px/1.2 var(--font-sans); letter-spacing:-.6px; margin:0 0 8px; }
.popup-loc-addr { color:var(--paper-dim); font:14px/1.5 var(--font-sans); margin-bottom:14px; }
.popup-loc-meta { color:var(--paper-dim); font:11px/1.4 var(--font-sans); }
.popup-loc-body .btn { width:100%; min-height:42px; font:600 13px/1.3 var(--font-sans); border-radius:7px; }
.leaflet-container .leaflet-popup-close-button { color:#fff; background:#202124cc; border-radius:50%; width:25px; height:25px; top:8px; right:8px; font:22px/23px var(--font-sans); }
.recent-journeys { flex:0 0 136px; padding:0 20px; background:var(--bg-panel); border-top:1px solid var(--border-dim); overflow:hidden; }
.recent-heading { display:flex; align-items:center; justify-content:space-between; height:35px; border-bottom:1px solid var(--border-dim); }
.recent-heading h3 { font:600 13px/1.3 var(--font-sans); color:var(--paper); padding:0; margin:0; }
.recent-heading button { background:none; border:0; color:var(--paper-dim); font-size:12px; cursor:pointer; }
.recent-journey { display:flex; gap:12px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--border-dim); font:12px/1.4 var(--font-sans); white-space:nowrap; overflow:hidden; }
.recent-journey time { flex:0 0 48px; color:var(--paper-dim); font:10px/1.4 var(--font-mono); }
.recent-journey .journey-copy { overflow:hidden; text-overflow:ellipsis; }
.recent-journey button { display:inline; border:0; background:none; padding:0; color:var(--amber); text-decoration:underline; text-underline-offset:3px; font:inherit; cursor:pointer; }
.recent-empty { color:var(--paper-dim); font-size:13px; margin:18px 0; }
#tab-history { max-width:none; }
#visit-history-list { width:100%; }
.visit-history-entry { display:grid; grid-template-columns:55px 80px minmax(0,1fr); gap:20px; padding:22px 0; border-top:1px solid var(--border-dim); font:18px/1.5 var(--font-sans); }
.visit-history-entry:last-child { border-bottom:1px solid var(--border-dim); }
.visit-history-entry time { padding-top:3px; color:var(--paper-dim); font:14px/1.5 var(--font-mono); font-variant-numeric:tabular-nums; }
.visit-history-photo { width:80px; height:56px; overflow:hidden; border-radius:4px; background:var(--bg-panel); border:1px solid var(--border-dim); }
.visit-history-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.visit-history-entry .journey-copy { min-width:0; }
.visit-history-entry .journey-author { display:block; margin:0 0 3px; color:var(--paper-dim); font:400 14px/1.5 var(--font-sans); }
.visit-history-entry button { display:inline; background:none; border:0; padding:0; color:var(--amber); font:inherit; text-align:left; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; cursor:pointer; overflow-wrap:anywhere; }
.visit-history-entry .journey-location { font:500 20px/1.35 var(--font-sans); text-underline-offset:4px; }
.visit-history-entry .journey-found { display:block; margin:8px 0 0; color:var(--paper-dim); font:18px/1.5 var(--font-sans); }
.visit-history-entry button:hover { color:var(--paper); }
.visit-history-entry button:focus-visible,.recent-journey button:focus-visible { outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }
.visit-history-empty { margin:0; padding:24px 0; border-top:1px solid var(--border-dim); color:var(--paper-dim); font:16px/1.5 var(--font-sans); }
@media(max-width:700px) {
  .visit-history-entry { grid-template-columns:60px 56px minmax(0,1fr); gap:10px; padding:18px 0; }
  .visit-history-entry time { font-size:12px; }
  .visit-history-photo { width:56px; height:48px; }
  .visit-history-entry .journey-author { font-size:12px; }
  .visit-history-entry .journey-location { font-size:18px; }
  .visit-history-entry .journey-found { font-size:16px; margin-top:6px; }
  .visit-history-entry .journey-material { display:block; margin-top:3px; }
  .visit-history-entry .journey-material-separator { display:none; }
}
/* Material library, character cards, answers and assistance. */
.materials-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.materials-heading .design-heading-copy { flex:1 1 auto; min-width:0; }
.materials-tools { display:flex; align-items:center; flex:0 1 370px; width:370px; max-width:100%; gap:10px; margin:0; }
.materials-tools input { width:280px; }
#jump-to-cast { width:auto; margin:0; white-space:nowrap; font-size:14px; }
#tab-materials #materials-search { flex:1 1 280px; min-width:0; height:42px; min-height:42px; margin:0; padding:9px 12px; font-size:14px; line-height:1.4; }
#tab-materials #jump-to-cast { flex:0 0 auto; height:42px; min-height:42px; min-width:80px; padding:9px 13px; font:600 13px/1.4 var(--font-sans); }
#cast-heading { scroll-margin-top:20px; }
.materials-empty { padding:24px; color:var(--paper-dim); }
#materials-container { grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:20px; }
.info-card,.material-card { border:1px solid var(--border-dim); border-radius:10px; background:var(--bg-panel); box-shadow:0 5px 18px #0001; color:var(--paper); }
.info-card { padding:22px; }
.material-card { --material-card-height:30rem; padding:20px; }
.info-card h4,.material-card > h4 { color:var(--paper); font:600 20px/1.3 var(--font-sans); letter-spacing:-.5px; }
.material-card .material-location { color:var(--paper-dim); font-size:12px; }
.material-card-text,.material-notes,.character-card .note { color:var(--paper); font:15px/1.7 var(--font-sans); }
.material-card .material-credit { color:var(--paper-dim); font-size:11px; }
.material-card .scene-material-preview { border-radius:6px; background:var(--input-bg); }
.scene-material-card.has-material-action { position:relative; cursor:pointer; --material-action-inset:14px; }
.scene-material-card.has-material-action > h4 { padding-right:86px; }
.scene-material-card.has-new-tab > h4 { padding-right:30px; }
.scene-material-action { position:absolute; top:var(--material-action-inset); right:var(--material-action-inset); display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:5px 10px; box-sizing:border-box; border:1px solid var(--border-dim); border-radius:6px; background:var(--material-action-bg); color:var(--paper); font:600 12px/1.4 var(--font-sans); white-space:nowrap; }
.scene-material-open:hover .scene-material-action { background:var(--material-action-hover); }
.scene-material-card.has-material-action > .scene-material-open:focus-visible { outline:none; }
.scene-material-open:focus-visible .scene-material-action { outline:2px solid var(--amber); outline-offset:3px; }
.scene-material-card .material-note-panel,.scene-material-card .material-pdf-quotes,.scene-material-card .material-audio-transcript { cursor:auto; }
.character-card .role,.character-note-author { color:var(--amber); font:13px/1.5 var(--font-sans); }
.character-card .note { margin-top:12px; }
.character-player-note { background:var(--input-bg); border-color:var(--border-dim); border-radius:6px; }
.character-player-note p { color:var(--paper); }
.character-sources summary,.character-sources button { color:var(--paper-dim); font-size:13px; }
.character-note-title { color:var(--paper-dim); }
.character-note-input { width:100%; background:var(--input-bg); color:var(--paper); }
#tab-answers > * { max-width:920px; margin-left:0; margin-right:0; }
#tab-answers > .design-page-heading { max-width:none; }
#tab-answers > .answers-workspace { max-width:none; }
.answers-heading { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:18px; }
.answers-heading .design-heading-copy { min-width:0; }
.answers-workspace { display:grid; grid-template-columns:minmax(0,1fr) 380px; align-items:start; gap:24px; }
.answers-form { min-width:0; }
.answers-history-panel { position:sticky; top:0; box-sizing:border-box; display:flex; flex-direction:column; min-width:0; height:calc(100dvh - var(--header-height) - 170px); min-height:300px; padding:16px; border:1px solid var(--border-dim); border-radius:10px; background:var(--bg-panel); }
.answers-history-panel > h3 { flex:0 0 auto; margin:0 0 12px; font:600 18px/1.3 var(--font-sans); color:var(--paper); }
#answers-history-list { flex:1 1 auto; min-height:0; min-width:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:3px; }
#answers-history-list .visit-history-entry { grid-template-columns:56px minmax(0,1fr); gap:10px; padding:16px 0; }
#answers-history-list .visit-history-entry time { grid-column:1 / -1; padding:0; font-size:11px; }
#answers-history-list .visit-history-photo { width:56px; height:44px; }
#answers-history-list .journey-author { font-size:12px; }
#answers-history-list .journey-location { font-size:16px; }
#answers-history-list .journey-found { margin-top:6px; font-size:14px; }
#answers-history-list .journey-material { display:block; margin-top:4px; }
#answers-history-list .journey-material-separator { display:none; }
@media (max-width:1000px) {
  .answers-workspace { grid-template-columns:minmax(0,920px); }
  .answers-history-panel { position:static; height:min(460px,65dvh); min-height:200px; }
}
#tab-hints > .hints-content { width:100%; max-width:none; margin-left:0; margin-right:0; }
#tab-hints .hints-list,#tab-hints #btn-reveal-hint { max-width:760px; }
#answers-container { counter-reset:answer; }
.answer-row { position:relative; counter-increment:answer; margin-bottom:18px; padding:24px 26px 24px 70px; border:1px solid var(--border-dim); background:var(--bg-panel); border-radius:10px; }
.answer-row::before { content:counter(answer,decimal-leading-zero); position:absolute; left:24px; top:26px; color:var(--amber); font:13px/1.4 var(--font-mono); }
.answer-row .q-text { margin:0 0 16px; color:var(--paper); font:600 18px/1.4 var(--font-sans); }
.answer-row input,.answer-row textarea { width:100%; min-height:48px; font-size:16px; background:var(--input-bg); }
.answer-row.status-correct { border-color:var(--green-ok); }
.answer-row.status-partial { border-color:var(--yellow-partial); }
.answer-row.status-wrong { border-color:var(--red-stamp); }
#btn-check-solution { display:block; margin-top:28px; min-width:240px; }
.hint-card,.hint-item { background:var(--bg-panel); border:1px solid var(--border-dim); border-left:3px solid var(--amber); border-radius:9px; padding:22px 26px; color:var(--paper); font:16px/1.7 var(--font-sans); margin:0 0 16px; }
#btn-reveal-hint { display:inline-block; width:auto; max-width:100%; min-height:44px; margin:24px 0 0; padding:12px 18px; text-align:center; }
/* Scenes and all viewer frames share the interface; originals stay originals. */
html[data-case="story3"] img[src*="/images/city/houses/"] { filter:grayscale(1); }
.modal-backdrop { background:#141518c9; backdrop-filter:blur(6px); }
.modal-backdrop.club-inspecting-backdrop,.modal-backdrop:has(.park-inspection:not([hidden])) { backdrop-filter:none; }
.modal { background:var(--bg-panel); border:1px solid var(--border-dim); border-radius:14px; box-shadow:var(--shadow); color:var(--paper); }
.location-workspace > .modal { padding:36px 42px; }
.modal-close { background:var(--bg-panel); color:var(--paper-dim); border:1px solid var(--border-dim); border-radius:50%; width:36px; height:36px; font:25px/30px var(--font-sans); z-index:10; }
/* Shared navigation glyphs use one font and a fixed square. The arrow's ink
   sits below Arial's visual midpoint, so offset the content, not the button. */
#location-modal .modal-close,
#pdf-modal .pdf-toolbar #pdf-close,
#pdf-modal .pdf-toolbar #pdf-close.is-back,
.about-game-close {
  box-sizing:border-box; display:grid; place-items:center; flex-shrink:0;
  width:36px; height:36px; min-width:36px; min-height:36px; padding:0;
  font:24px/1 Arial,Helvetica,sans-serif; letter-spacing:0; text-indent:0; text-align:center;
}
#location-modal .modal-close.is-back,
#pdf-modal .pdf-toolbar #pdf-close.is-back { padding-bottom:5px; }
.modal h2,.club-header h2,.park-header h2,.location-visit h2 { color:var(--paper); font:600 32px/1.2 var(--font-sans); letter-spacing:-1px; }
.modal .summary-text,.club-intro,.club-content .summary-text,.park-visit .summary-text { color:var(--paper); font:18px/1.75 var(--font-sans); }
.location-photo,.location-photo-open,.club-hero,.club-intro-image { border-radius:9px; overflow:hidden; }
.location-visit .meta,.modal .modal-meta,.club-header .club-address { color:var(--paper-dim); font:13px/1.5 var(--font-sans); }
.investigation-choices,.club-actions.investigation-choices { background:var(--input-bg); border:1px solid var(--border-dim); border-radius:10px; padding:4px 0; overflow:hidden; }
.investigation-choice,.club-visit .club-actions .investigation-choice { color:var(--paper); font:16px/1.5 var(--font-sans); min-height:60px; padding:16px 20px; border-bottom:1px solid var(--border-dim); }
.investigation-choice:last-child { border-bottom:0; }
.investigation-choice:hover:not(:disabled),.club-visit .club-actions .investigation-choice:hover { background:var(--accent-soft); color:var(--paper); }
.choice-number,.choice-arrow { color:var(--amber); }
.choice-state { font:11px/1.4 var(--font-sans); }
.investigation-back,.club-back,.park-back { color:var(--amber); font:14px/1.4 var(--font-sans); }
.police-topics { background:var(--input-bg); border:1px solid var(--border-dim); border-radius:10px; overflow:hidden; }
.police-topic { font:16px/1.5 var(--font-sans); padding:16px 20px; border-bottom:1px solid var(--border-dim); }
.police-topic:hover { background:var(--accent-soft); }
.police-back { font:14px/1.5 var(--font-sans); }
.club-visit .btn { background:var(--bg-panel-2); color:var(--paper); border:1px solid var(--border-dim); border-radius:8px; font-family:var(--font-sans); }
.club-visit .btn:hover { background:var(--accent-soft); color:var(--paper); border-color:var(--amber); }
.club-content,.club-witnesses { color:var(--paper); }
.park-table-search input { background:var(--input-bg); color:var(--paper); border-radius:7px; }
.scene-material-card { box-shadow:none; }
.scene-material-description { color:var(--paper); font:15px/1.6 var(--font-sans); }
.location-case-panel,.document-case-panel { background:var(--bg-panel); border-color:var(--border-dim); border-radius:12px; }
.location-materials-tab { background:var(--bg-panel); color:var(--paper); border:1px solid var(--border-dim); border-radius:8px; font:13px/1.4 var(--font-sans); }
.document-workspace > .case-pdf { background:var(--bg-panel); border-color:var(--border-dim); border-radius:12px; box-shadow:var(--shadow); }
.pdf-toolbar,.viewer-heading { color:var(--paper); }
.pdf-toolbar { background:var(--bg-panel); border-color:var(--border-dim); }
.viewer-heading #pdf-title { font:600 22px/1.3 var(--font-sans); color:var(--paper); }
.pdf-toolbar button,.pdf-toolbar a,.pdf-toolbar .viewer-controls button,.pdf-toolbar #document-new-tab,.pdf-toolbar #document-materials-toggle { font-family:var(--font-sans); color:var(--paper-dim); }
#pdf-pages { background:var(--input-bg); }
#pdf-modal.is-cassette .case-pdf,#pdf-modal.is-cassette #pdf-pages,#pdf-modal.is-cassette .pdf-toolbar { background:var(--bg-panel); border-color:var(--border-dim); }
#pdf-modal.is-cassette .viewer-heading #pdf-title { color:var(--paper); font:600 30px/1.3 var(--font-sans); }
#pdf-modal.is-cassette .pdf-toolbar:before { color:var(--amber); font-family:var(--font-sans); }
.pause-box,.flynn-milestone-card { background:var(--bg-panel); color:var(--paper); border:1px solid var(--border-dim); border-radius:16px; box-shadow:var(--shadow); }
.pause-title,.flynn-milestone-card h2 { color:var(--paper); font:600 34px/1.2 var(--font-sans); }
.flynn-milestone-card #flynn-milestone-question { color:var(--paper-dim); font:18px/1.6 var(--font-sans); }
.flynn-milestone-card .flynn-milestone-eyebrow { color:var(--amber); }
.flynn-milestone-actions { justify-content:flex-end; }
.flynn-milestone-actions .btn { font:600 15px/1.4 var(--font-sans); }
.debrief-modal { max-width:820px; padding:40px; }
.debrief-modal h2 { font:600 32px/1.2 var(--font-sans); color:var(--paper); }
.debrief-modal p { color:var(--paper); font:17px/1.8 var(--font-sans); }
.case-closed-stamp { border-color:var(--amber); color:var(--amber); font:12px/1.5 var(--font-sans); letter-spacing:.15em; border-radius:4px; transform:none; }
#attach-note-menu { border-radius:8px; background:var(--bg-panel); border-color:var(--border-dim); box-shadow:var(--shadow); }
#attach-note-btn { color:var(--paper); font:14px/1.4 var(--font-sans); }
/* Overlays on photographs always use dark surfaces, including in daylight. */
.club-inspection,.park-inspection { --paper:#f0eae1; --paper-dim:#b9b2a8; --amber:#e5a16d; --amber-bright:#f0b887; }
.club-found-message,.park-found-message { background:#202124ed; color:#f0eae1; border-color:#e5a16d; font:16px/1.6 var(--font-sans); border-radius:8px; }
.club-overview,.park-overview,.club-inspection-back,.club-inspection-continue { background:#292a2de8; color:#f0eae1; border:1px solid #68625a; border-radius:7px; font:14px/1.4 var(--font-sans); }
.club-inspection .investigation-back,.park-inspection > .investigation-back { background:#292a2de8; color:#f0eae1; border:1px solid #68625a; border-radius:7px; font:14px/1.4 var(--font-sans); }
.location-workspace > .modal.club-inspecting { border:0; padding:0; border-radius:0; }
@media (min-width:1700px) { .topbar { gap:30px; } .topbar .tab-btn { padding:11px 18px; } }
@media (max-width:700px) {
  .design-page-heading { margin-bottom:24px; }
  .design-page-heading h2 { font-size:28px; }
  .materials-heading { display:block; }
  .materials-heading .materials-tools { width:100%; margin-top:20px; flex-wrap:nowrap; }
  #tab-materials #materials-search { width:0; flex:1 1 0; }
}
@media (max-width:1200px) { .topbar { gap:12px; padding:0 16px; } .topbar-title { font-size:18px; max-width:180px; } .topbar .tab-btn { padding:11px 9px; font-size:13px; } .timer-display { font-size:11px; } .topbar-right { gap:3px; } .topbar .theme-toggle { font-size:12px; padding:8px; } }
@media (max-width:1000px) { :root { --header-height:108px; } .topbar { flex-wrap:wrap; align-content:center; gap:0; padding:10px 18px 0; } .topbar-left { flex:1; } .topbar-right { height:36px; } .topbar .tabs { flex:1 0 100%; order:3; margin-top:9px; height:43px; } .topbar .tab-btn { padding:9px 13px; } #col-addressbook { min-width:220px; flex-basis:280px; width:280px; } #col-addressbook .col-body { padding:20px 14px 0; } #col-addressbook h3 { font-size:21px; } .recent-journeys { flex-basis:136px; padding:0 14px; } }
@media (max-width:640px) {
  :root { --header-height:112px; }
  .topbar { padding:10px 12px 0; }
  .topbar-title { font-size:18px; max-width:165px; }
  .timer-display { display:none; }
  .topbar .theme-toggle { max-width:90px; font-size:11px; }
  .room-menu summary { font-size:12px; padding:8px; }
  .topbar .tab-btn { padding:10px 12px; font-size:13px; }
  .tab-pane.active:not(#tab-map) { padding:26px 16px 50px; }
  #tab-map.investigation-layout.active { display:grid; grid-template-columns:1fr; grid-template-rows:220px minmax(0,1fr); overflow:hidden; }
  #col-addressbook { width:100%; min-width:0; max-width:none; max-height:none; border-right:0; border-bottom:1px solid var(--border-dim); }
  #col-addressbook .col-body { padding:12px 14px 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); gap:7px 12px; }
  #col-addressbook h3 { margin:0; font-size:18px; align-self:center; }
  .addressbook-search { height:38px; padding:8px 10px; margin:0; grid-column:2; grid-row:1; font-size:13px; }
  .directory-options { grid-column:1/-1; grid-row:2; justify-self:start; margin:0; }
  .directory-options > summary { min-height:34px; padding:6px 9px; font-size:12px; }
  .directory-filters { padding:0; gap:8px; }
  .directory-options > .directory-filters { padding:7px 9px 0; }
  .directory-filters label { display:flex; align-items:center; gap:5px; font-size:10px; }
  .directory-filters select { margin:0; padding:5px; font-size:11px; }
  .directory-options[open] > .directory-results { display:flex; min-height:29px; padding:0 7px 2px 9px; font-size:11px; }
  #addressbook-container { grid-column:1/-1; grid-row:3; padding:0 0 6px; }
  .addr-row { padding:8px; }
  .addr-row-name { font-size:14px; }
  .addr-row-meta { flex-direction:row; gap:10px; margin-top:3px; }
  .addr-row-addr { font-size:11px; }
  .addressbook-resize { display:none; }
  .investigation-col-center { min-height:0; }
  .map-toolbar { top:10px; right:10px; gap:5px; }
  .map-toolbar .btn { font-size:10px; padding:7px; min-height:32px; }
  .leaflet-control-zoom { margin:10px !important; }
  .recent-journeys { flex-basis:74px; padding:0 12px; }
  .recent-heading { height:29px; }
  .recent-heading h3 { font-size:11px; }
  .recent-journey { font-size:11px; }
  .recent-journey:nth-child(n+2) { display:none; }
  .recent-empty { margin:10px 0; font-size:11px; }
  .location-map-popup .leaflet-popup-content { width:240px !important; }
  .location-map-popup .popup-loc-photo { height:80px; max-height:80px; }
  .popup-loc-body { padding:12px; }
  .popup-loc-name { font-size:18px; }
  .materials-tools { flex-wrap:wrap; }
  .answer-row { padding:20px 16px 20px 49px; }
  .answer-row::before { left:16px; top:23px; }
  .answer-row .q-text { font-size:16px; }
  .location-workspace > .modal { padding:24px 20px; border-radius:10px; }
  .modal h2,.club-header h2,.park-header h2,.location-visit h2 { font-size:27px; }
  .modal .summary-text,.club-intro,.club-content .summary-text,.park-visit .summary-text { font-size:16px; line-height:1.7; }
  .case-library { padding:24px 20px 40px; }
  #screen-landing .library-intro h1 { font-size:32px; }
  .menu-theme { right:20px; top:25px; }
  .case-setup { width:calc(100% - 32px); margin:16px auto 24px; padding:0; }
  #screen-waiting .landing-content { padding:30px 22px; }
}
/* Review round: lighter navigation, grouped map tools, shorter evidence cards. */
.topbar { align-items:center; }
.topbar .tabs { align-self:stretch; align-items:center; }
.topbar .tab-btn { min-height:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; padding:8px 13px; box-shadow:none; }
.topbar .tab-btn.active { box-shadow:none; border:0; }
.topbar-title { display:flex; align-items:center; min-height:38px; }
.room-menu summary { display:flex; align-items:center; gap:9px; min-height:36px; }
.room-menu summary::after { content:''; display:block; width:6px; height:6px; margin:0 2px 3px 0; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.room-menu[open] summary::after { transform:rotate(225deg); margin-bottom:-3px; }
.map-toolbar:empty { display:none; }
.leaflet-control-zoom { display:flex; align-items:center; border:1px solid var(--border-dim) !important; border-radius:9px; background:var(--bg-panel); overflow:hidden; }
.leaflet-touch .leaflet-control-zoom a,.leaflet-control-zoom a { display:grid; place-items:center; width:36px; height:36px; line-height:1; margin:0; border:0; border-radius:0; background:var(--bg-panel); box-shadow:none; }
.leaflet-control-zoom a + a { border-left:1px solid var(--border-dim); }
.leaflet-control-zoom #map-reset { display:block; min-height:36px; padding:0 12px; margin:0; border:0; border-left:1px solid var(--border-dim); border-radius:0; color:var(--paper); background:var(--bg-panel); font:13px/36px var(--font-sans); white-space:nowrap; box-shadow:none; }
.leaflet-control-zoom #map-reset:hover { background:var(--accent-soft); }
.map-compass { --compass-size:46px; display:flex; align-items:center; justify-content:center; margin:18px !important; padding:4px; width:auto; border:1px solid var(--border-dim); border-radius:8px; background:var(--bg-panel); color:var(--paper); box-shadow:0 3px 10px #0002; }
.map-compass svg { display:block; width:var(--compass-size); height:var(--compass-size); margin:0; }
.map-compass span { font:600 12px/1 var(--font-sans); }
.investigation-col-center { border-right:7px solid var(--bg-black); }
#leaflet-map { border-right:1px solid var(--border-dim); }
.leaflet-control-attribution { padding:1px 4px; opacity:.85; }
#materials-container { align-items:start; }
.material-card { height:auto; gap:9px; padding:18px; }
.material-card.has-material-action { --material-action-inset:18px; }
.material-card.has-material-action > .material-location { padding-right:86px; }
.material-card.has-material-action:not(.has-new-tab) > .material-location { display:flex; align-items:center; min-height:32px; }
.material-card.has-new-tab > .material-location { padding-right:30px; }
.material-card.has-material-action > h4 { padding-right:0; }
.material-card .material-location { flex:0 0 auto; min-height:0; max-height:none; margin:0 0 2px; overflow:visible; }
.material-card > h4 { flex:0 0 auto; min-height:0; max-height:none; margin:0 0 3px; overflow:visible; font-size:19px; }
.material-evidence > .scene-material-open { flex:0 0 auto; gap:10px; }
.material-evidence .scene-material-preview { --material-preview-height:168px; flex:0 0 168px; height:168px; }
.material-evidence .scene-material-open > .btn { margin-top:0; min-height:40px; }
.material-evidence .scene-material-description { flex:0 0 auto; max-height:100px; }
.material-card .material-credit { display:none; }
.material-card-text { flex:0 1 auto; max-height:300px; }
.material-note-panel { flex:0 0 auto; border-top:1px solid var(--border-dim); padding-top:10px; margin-top:3px; min-width:0; }
.material-pdf-quotes { border-top:1px solid var(--border-dim); padding-top:12px; margin-top:3px; min-width:0; }
.material-pdf-quotes .material-entry + .material-entry { margin-top:14px; }
.material-pdf-quotes .manual-note { margin:0; }
.material-note-toggle { border:0; padding:4px 0; background:none; color:var(--amber); text-align:left; font:13px/1.5 var(--font-sans); cursor:pointer; }
.material-note-toggle:hover { text-decoration:underline; text-underline-offset:3px; }
.evidence-player-note { padding:0 0 10px; }
.evidence-player-note strong { color:var(--paper-dim); font:600 11px/1.5 var(--font-sans); }
.evidence-player-note p { margin:3px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; max-height:160px; overflow-y:auto; color:var(--paper); font:14px/1.6 var(--font-sans); }
.material-note-form { display:grid; gap:8px; }
.material-note-form label { color:var(--paper-dim); font-size:12px; }
.material-note-input { width:100%; min-height:85px; resize:vertical; font-size:14px; padding:10px; }
.material-note-controls { display:flex; flex-wrap:wrap; gap:6px; }
.material-note-controls .btn { padding:7px 10px; min-height:34px; font-size:12px; }
/* One quiet action row for both evidence and character note editors. */
.note-editor-controls { display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; }
.note-editor-controls > button { flex:0 0 auto; width:auto; min-height:36px; margin:0; font:13px/1.4 var(--font-sans); cursor:pointer; }
.note-editor-controls .note-editor-save { padding:7px 12px; }
.note-editor-controls .note-editor-cancel,.note-editor-controls .note-editor-delete { padding:6px 0; border:0; border-radius:0; background:none; box-shadow:none; font-weight:400; }
.note-editor-controls .note-editor-cancel { color:var(--paper-dim); }
.note-editor-controls .note-editor-delete { margin-left:auto; color:var(--red-stamp); }
.note-editor-controls .note-editor-cancel:hover:not(:disabled),.note-editor-controls .note-editor-delete:hover:not(:disabled) { background:none; text-decoration:underline; text-underline-offset:3px; }
.note-editor-controls > button:focus-visible { outline:2px solid var(--amber); outline-offset:3px; }
.note-editor-controls > button:disabled { cursor:wait; opacity:.55; }
.material-note-error { margin:0; color:var(--red-stamp); font-size:12px; }
.material-note-error:empty { display:none; }
.character-portrait { display:block; flex:0 0 170px; width:100%; height:170px; object-fit:cover; object-position:center 30%; margin:0; border-radius:7px; filter:grayscale(1); }
html[data-case="tutorial"] .character-portrait,
html[data-case="tutorial"] .location-card .thumb,
html[data-case="tutorial"] .material-card img,
html[data-case="tutorial"] .popup-loc-photo { filter:none; }
html[data-case="tutorial"] .character-card[data-character-id="lucy"] .character-portrait { object-fit:contain; object-position:center; background:var(--input-bg); }
#cast-container { align-items:start; grid-auto-rows:auto; }
.character-card { --character-card-height:420px; align-self:start; display:flex; flex-direction:column; gap:10px; height:var(--character-card-height); min-width:0; padding:18px; overflow:hidden; }
.character-card > h4 { flex:0 0 auto; margin:0; min-height:2.5em; font:600 20px/1.25 var(--font-sans); overflow-wrap:anywhere; }
.character-card-details { flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; overflow-wrap:anywhere; }
.character-card-details:focus-visible { outline:2px solid var(--amber); outline-offset:-2px; border-radius:4px; }
.character-card-details > :first-child { margin-top:0; }
.character-card-details > :last-child { margin-bottom:0; }
.character-card .character-note-toggle { flex:0 0 auto; align-self:flex-start; margin:0; padding:4px 0; min-height:30px; }
.character-card.is-editing-note { height:auto; min-height:var(--character-card-height); overflow:visible; }
.character-card.is-editing-note .character-card-details { flex:0 0 auto; max-height:220px; }
.character-card .character-note-form { flex:0 0 auto; min-width:0; }
.character-portrait.is-placeholder { object-fit:cover; object-position:center; }
@media (max-width:1000px) {
  .topbar .tabs { height:43px; margin-top:4px; }
  .topbar .tab-btn { font-size:13px; padding:8px 11px; }
}
@media (max-width:640px) {
  .investigation-col-center { border-right:0; }
  .leaflet-control-zoom { margin:10px !important; }
  .leaflet-touch .leaflet-control-zoom a { width:32px; height:34px; }
  .leaflet-control-zoom #map-reset { font-size:11px; line-height:34px; min-height:34px; padding:0 9px; }
  .map-compass { --compass-size:40px; margin:10px !important; }
  .material-card { padding:16px; }
  .material-evidence .scene-material-preview { --material-preview-height:180px; flex-basis:180px; height:180px; }
  .material-note-toggle { min-height:36px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }
.recent-journeys { position:relative; display:flex; flex-direction:column; flex-basis:var(--recent-height,136px); padding-top:7px; }
.recent-heading { flex:0 0 35px; }
.recent-actions { display:flex; align-items:center; gap:14px; }
#recent-toggle { width:30px; height:28px; display:grid; place-items:center; }
#recent-toggle span { display:block; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; width:7px; height:7px; transform:translateY(-2px) rotate(45deg); font-size:0; }
.recent-journeys.is-collapsed { flex-basis:43px; }
.recent-journeys.is-collapsed .recent-heading { border-bottom:0; }
.recent-journeys.is-collapsed #recent-toggle span { transform:translateY(2px) rotate(225deg); }
#recent-journeys-list { min-height:0; overflow-y:auto; }
#recent-resize { position:absolute; inset:0 0 auto; height:7px; z-index:4; cursor:ns-resize; touch-action:none; }
#recent-resize:hover,#recent-resize:focus-visible,#recent-resize.dragging { background:rgba(201,154,75,0.35); outline:none; }
#recent-toggle:focus-visible { outline:2px solid var(--amber); outline-offset:-2px; }
body.resizing-recent { cursor:row-resize; user-select:none; }
@media(max-width:640px) {
  .recent-journeys { flex-basis:var(--recent-height,100px); }
  .recent-journey:nth-child(n+2) { display:flex; }
  .menu-tools { gap:3px; }
  .menu-tools .theme-toggle { padding:8px; font-size:12px; }
  #screen-setup .case-title { font-size:34px; }
  .topbar-left { min-width:0; }
  .topbar-title { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:38px; }
  .topbar .about-open { padding:8px 5px; font-size:12px; }
  .about-game-dialog,.finish-game-dialog { padding:22px; }
  .about-game-heading h2 { font-size:24px; }
}