@font-face { font-family: "Cinzel"; src: url("../assets/cinzel.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../assets/libre-baskerville.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }

:root { color-scheme: light; --ink: #4b3022; --ink-deep: #051416; --paper: #e8d3a1; --paper-light: #f8dfa4; --paper-pale: #fff0c2; --bronze: #b88a30; --bronze-dark: #684326; --muted: #6f5a42; --danger: #8d3830; --focus: #0f6580; --shadow: 0 10px 28px rgb(0 0 0 / 34%); font-family: "Libre Baskerville", Georgia, serif; font-size: 18px; }
* { box-sizing: border-box; }
html, body { background: #051416; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); position: relative; isolation: isolate; }
body::before { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: var(--city-background) center / cover no-repeat; }
button, .store-choice-button { min-height: 48px; border: 3px solid var(--bronze); border-radius: 12px; padding: 12px 16px; color: var(--ink); background: var(--paper-light); font: 600 18px/1.2 "Libre Baskerville", Georgia, serif; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; }
button:hover, .store-choice-button:hover { background: #ffe9b5; border-color: #85582f; }
button:active, .store-choice-button:active { background: #d9b969; border-color: var(--bronze-dark); transform: translateY(1px); }
button:disabled { color: #7a6a58; border-color: #9b876b; background: #d2c3a5; cursor: default; transform: none; }
button:focus-visible, .store-choice-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.daily-dossier { display: grid; grid-template-columns: minmax(260px, 348px) minmax(0, 640px); gap: clamp(24px, 5vw, 64px); width: min(1100px, 100%); min-height: 100vh; margin: 0 auto; padding: 24px; }
.case-intro { align-self: start; position: sticky; top: 24px; overflow: hidden; border: 3px solid var(--bronze); border-radius: 14px; background: linear-gradient(145deg, #f4dfad, var(--paper)); box-shadow: var(--shadow); }
.intro-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.date-label, .case-code, .eyebrow { margin: 0; color: var(--muted); font-size: 0.78rem; letter-spacing: .06em; text-transform: uppercase; }
.daily-stamp { display: inline-grid; min-width: 72px; min-height: 34px; place-items: center; border: 2px solid var(--danger); border-radius: 3px; color: var(--danger); font: 700 16px/1 "Cinzel", serif; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-5deg); }
.bruce-portrait { display: block; width: min(100%, 300px); height: auto; margin: 8px auto 0; object-fit: contain; }
.case-intro h1, .game-header h2, .dialog-header h2 { margin: 0; font-family: "Cinzel", Georgia, serif; font-weight: 600; letter-spacing: .04em; }
.case-intro h1 { padding: 8px 18px 0; font-size: 30px; line-height: 1.2; }
.case-code { padding: 0 18px; }
.intro-copy { margin: 0; padding: 16px 18px 24px; font-size: 18px; line-height: 1.45; }
.studio-credit { padding: 16px 18px; border-top: 2px solid rgb(169 102 37 / 42%); background: rgb(255 240 194 / 44%); font-size: .78rem; line-height: 1.5; }
a { color: #694319; font-weight: 700; }
.play-column { min-width: 0; padding: 8px 0 32px; }
.game-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 20px; color: var(--paper-pale); }
.game-header h2 { font-size: 30px; line-height: 1.2; }
.eyebrow { color: #e6c478; }
.header-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.icon-button, .language-button { min-width: 48px; min-height: 48px; padding: 8px; font-family: "Cinzel", serif; }
.case-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.case-meta > div { display: grid; min-height: 68px; align-content: center; border: 0; border-radius: 0; padding: 12px 18px; color: var(--ink); background: var(--status-paper) center / 100% 100% no-repeat; }
.case-meta span { color: #6f5a42; font-size: .68rem; line-height: 1.25; }
.case-meta strong { font-size: 1rem; line-height: 1.3; }
.board { --size: 7; display: grid; grid-template-columns: repeat(var(--size), 1fr); width: min(100%, 504px); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border: 5px solid #b88a30; border-radius: 4px; background: #dbca9b; box-shadow: 0 0 0 3px #051416, 0 8px 0 rgb(0 0 0 / 38%), var(--shadow); }
.cell { position: relative; display: grid; min-width: 0; min-height: 0; place-items: center; border: 0 solid rgb(37 59 48 / 95%); background: var(--room-color, #e8d3a1); color: var(--ink-deep); cursor: pointer; }
.cell::before, .cell::after { content: ""; position: absolute; opacity: 0; pointer-events: none; }
.cell.cross::before, .cell.cross::after { width: 68%; height: 4px; border-radius: 4px; background: currentColor; opacity: .9; }
.cell.cross::before { transform: rotate(45deg); }.cell.cross::after { transform: rotate(-45deg); }
.cell.automatic.cross { color: #5e6a61; }.cell.wrong { color: var(--danger); background: #edb99f; }.cell.hinted { box-shadow: inset 0 0 0 4px #d2a036; }.cell.focused { z-index: 1; outline: 3px solid #0f6580; outline-offset: -3px; }
.cell.suspect::before, .cell.victim::before, .cell.killer::before { width: 42%; height: 52%; border-radius: 48% 48% 32% 32%; background: currentColor; opacity: 1; clip-path: polygon(34% 0, 66% 0, 83% 27%, 76% 42%, 100% 78%, 100% 100%, 0 100%, 0 78%, 24% 42%, 17% 27%); }
.cell.victim::before { clip-path: polygon(0 17%, 17% 0, 100% 83%, 83% 100%); }.cell.killer { color: #742c27; }.cell.killer::after { width: 60%; height: 5px; background: #f7e2aa; opacity: 1; transform: rotate(-45deg); }
.portrait { background-image: var(--portrait-atlas); background-position: var(--portrait-x) var(--portrait-y); background-size: var(--portrait-size); background-repeat: no-repeat; }
.feedback { min-height: 1.45em; max-width: 504px; margin: 12px auto; color: var(--paper-pale); font-size: .88rem; line-height: 1.45; text-align: center; }
.controls { display: grid; gap: 12px; width: min(100%, 504px); margin: 0 auto; }
.mode-switch, .utility-actions, .primary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mode-button[aria-pressed="true"], .mode-button.is-active { color: var(--paper-pale); border-color: #d6a645; background: var(--ink-deep); }
.action-button { min-height: 48px; }.primary-button { min-height: 60px; color: var(--paper-pale); border-color: #d6a645; background: var(--ink-deep); }
.primary-button:hover { color: #fff5d1; border-color: #e5bc60; background: #24503d; }.help-button { border-color: transparent; color: var(--paper-pale); background: transparent; text-decoration: underline; }.help-button:hover { color: #fff5d1; background: rgb(255 240 194 / 12%); border-color: transparent; }
.daily-footer { width: min(100%, 504px); margin: 20px auto 0; color: var(--paper-pale); text-align: center; }.daily-footer p { margin: 8px 0; font-size: .8rem; line-height: 1.45; }.today-button { width: 100%; }.storage-notice { color: #ffe6ad; }
.dossier-dialog { width: min(560px, calc(100% - 24px)); max-height: min(760px, calc(100% - 24px)); overflow: auto; border: 0; padding: 0; color: var(--ink); background: transparent; }.dossier-dialog::backdrop { background: rgb(12 19 16 / 78%); backdrop-filter: blur(3px); }
.dialog-card { padding: clamp(20px, 5vw, 32px); border: 3px solid var(--bronze); border-radius: 14px; background: linear-gradient(145deg, #f8dfa4, #e8d3a1); box-shadow: var(--shadow); }.dialog-header { display: flex; align-items: center; gap: 12px; }.dialog-header h2 { font-size: 24px; line-height: 1.25; }.dialog-body, .dialog-copy { font-size: 18px; line-height: 1.5; }.help-board { min-height: 80px; margin-top: 16px; border: 2px dashed var(--bronze); border-radius: 8px; }.dialog-actions { display: grid; gap: 8px; margin-top: 24px; }.dialog-actions-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }.solved-seal { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: #fff0c2; background: #244b30; font-size: 28px; font-weight: 700; }.result-rating { font-size: 1.25rem; color: #80551f; letter-spacing: .15em; }.result-stats { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; margin: 20px 0 0; }.result-stats dt, .result-stats dd { margin: 0; }.result-stats dd { font-weight: 700; text-align: right; }
@media (min-width: 401px) and (min-height: 701px) { .daily-dossier { padding: 32px; }.case-intro h1, .game-header h2 { font-size: 36px; }.primary-button { min-height: 72px; }.dialog-header h2 { font-size: 28px; } }
@media (max-width: 760px) { .daily-dossier { display: block; width: 100%; padding: 12px; }.case-intro { position: relative; top: auto; margin-bottom: 24px; }.bruce-portrait { width: min(58%, 240px); }.play-column { padding: 0 0 24px; }.game-header { align-items: center; }.header-actions { flex-wrap: nowrap; }.case-meta { gap: 6px; }.case-meta > div { min-height: 62px; padding: 6px; }.case-meta span { font-size: .62rem; }.case-meta strong { font-size: .86rem; } }
@media (max-width: 380px) { .game-header h2, .case-intro h1 { font-size: 30px; }.case-meta { grid-template-columns: repeat(2, 1fr); }.case-meta > div { min-height: 56px; }.header-actions { gap: 4px; }.icon-button, .language-button { min-width: 48px; }.game-header { align-items: start; }.primary-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Web integration: readable status text, explicit marks, and unclipped source artwork. */
[hidden] { display: none !important; }
.date-label, .case-code, .eyebrow, .studio-credit, .case-meta span, .case-meta strong, .feedback, .daily-footer p { font-size: 18px; }
.date-label, .case-code { text-transform: none; letter-spacing: 0; line-height: 1.4; overflow-wrap: anywhere; }
.intro-topline { flex-wrap: wrap; }
.daily-stamp { max-width: 100%; padding: 8px; font-size: 16px; }
.case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-meta > div { padding: 12px; min-height: 76px; }
.game-header { display: block; margin: 0 0 20px; padding: 0; }
.game-header .case-heading { position: relative; isolation: isolate; margin: -8px -8px 0; padding: 22px 32px 26px; background: var(--city-plaque) center / 100% 100% no-repeat; }
.game-header .case-heading::after { content: ""; position: absolute; z-index: -1; inset: 18% 7% 16%; background: rgb(20 8 6 / 42%); border-radius: 12px; }
.game-header .header-actions { position: relative; z-index: 1; margin-top: 12px; }
.header-actions { justify-content: start; margin-top: 16px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font: 600 18px/1.2 "Libre Baskerville", serif; }
.toggle-status { font-weight: 400; }
.language-button { min-width: 60px; }
.icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 24px; vertical-align: middle; }
.mode-button, #hint-button { display: flex; justify-content: center; align-items: center; gap: 8px; }
.mode-button { min-height: 60px; }
.mode-button:hover[aria-pressed="true"], .mode-button:active[aria-pressed="true"] { background: #24503d; color: #fff0c2; }
.mode-button:disabled { background: #d2c3a5; color: #7a6a58; border-color: #9b876b; }
.board { grid-template-rows: repeat(var(--size), minmax(0, 1fr)); touch-action: manipulation; border: 0; border-radius: 0; padding: 24px; background: none; box-shadow: var(--shadow); }
.board > .cell { border-color: rgb(30 23 20 / 78%); }
.cell { padding: 0; border-radius: 0; overflow: hidden; transition: none; }
.cell:hover { background: var(--room-color); filter: brightness(1.07); }
.cell:active { transform: none; background: var(--room-color); }
.cell[aria-disabled="true"] { cursor: default; }
.cell[aria-disabled="true"]:hover { filter: none; }
.cell:focus-visible { z-index: 2; outline: 3px solid var(--focus); outline-offset: -3px; }
.cell.cross::before, .cell.cross::after { width: 40%; height: 3px; opacity: .9; }
.cell.automatic.cross::before, .cell.automatic.cross::after { width: 26%; height: 2px; opacity: .85; }
.cell.revealed-empty { color: #8d3830; }
.cell.revealed-empty::before, .cell.revealed-empty::after { width: 36%; }
.cell.suspect::before, .cell.victim::before, .cell.killer::after { display: none; }
.character-art { display: block; width: 92%; height: 92%; overflow: hidden; pointer-events: none; }
.victim .character-art { width: 100%; height: 100%; }
.culprit-badge { position: absolute; right: 2px; top: 2px; display: grid; width: 18px; height: 18px; place-items: center; background: #742c27; border: 1px solid #fff0c2; border-radius: 50%; color: #fff0c2; font: 700 14px/1 "Libre Baskerville", serif; }
.cell.hinted { box-shadow: none; outline: 3px dashed #63350b; outline-offset: -5px; }
.cell.hint-source { background-image: radial-gradient(circle, rgb(255 255 255 / 70%) 0 14%, transparent 17%); }
.hint-apply { display: block; width: min(100%, 504px); margin: 8px auto 16px; }
.help-board { border: 3px solid var(--ink-deep); min-height: 0; width: min(100%, 360px); margin: 16px auto 0; }
.dossier-dialog .help-button { color: var(--ink-deep); }
.dossier-dialog .help-button:hover { color: var(--ink-deep); background: rgb(169 102 37 / 10%); }
.dialog-header { align-items: flex-start; }
.result-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.result-stats dd { overflow-wrap: anywhere; }
.result-rating { display: flex; justify-content: center; gap: 16px; }
.result-rating .icon { width: 44px; height: 44px; color: #243b30; }
.result-rating .broken { color: #9b876b; opacity: .45; stroke-dasharray: 3 3; }
textarea { display: block; width: 100%; margin: 16px 0; padding: 12px; border: 2px solid var(--bronze); border-radius: 8px; color: var(--ink); background: #fff0c2; font: 400 18px/1.5 "Libre Baskerville", serif; resize: vertical; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.studio-credit a { display: inline-flex; align-items: center; min-height: 48px; }
.download-card { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px; }
@media (max-width: 760px) {
  .case-intro { display: grid; grid-template-columns: minmax(0,1fr) 96px; margin-bottom: 24px; }
  .intro-topline { grid-column: 1/-1; }
  .bruce-portrait { grid-column: 2; grid-row: 2/5; width: 100%; align-self: center; }
  .case-code, .case-intro h1, .intro-copy { grid-column: 1; }
  .case-code { padding-top: 12px; }
  .intro-copy { grid-column: 1/-1; padding: 12px 18px 16px; }
  .studio-credit { grid-column: 1/-1; padding: 4px 18px; }
  .header-actions { flex-wrap: wrap; gap: 8px; }
  .game-header .case-heading { margin-inline: -4px; padding-inline: 24px; }
  .board { padding: 16px; }
  .case-meta span, .case-meta strong { font-size: 18px; }
  .primary-actions { grid-template-columns: 1fr; }
}
@media (min-width: 350px) and (max-width: 400px) {
  .play-column > .board { width: calc(100% + 8px); max-width: none; margin-left: -4px; }
  .board { padding: 13px; }
}
@media (min-width: 401px) and (min-height: 701px) {
  .mode-button { min-height: 72px; }
}

.cell.hinted { outline: none; box-shadow: none; }
.hint-corners { position: absolute; inset: 5px; pointer-events: none; background: linear-gradient(#63350b,#63350b) left top/9px 3px no-repeat, linear-gradient(#63350b,#63350b) left top/3px 9px no-repeat, linear-gradient(#63350b,#63350b) right top/9px 3px no-repeat, linear-gradient(#63350b,#63350b) right top/3px 9px no-repeat, linear-gradient(#63350b,#63350b) left bottom/9px 3px no-repeat, linear-gradient(#63350b,#63350b) left bottom/3px 9px no-repeat, linear-gradient(#63350b,#63350b) right bottom/9px 3px no-repeat, linear-gradient(#63350b,#63350b) right bottom/3px 9px no-repeat; }
.cell.hinted:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.tutorial-new-cross { box-shadow: inset 0 0 0 3px rgb(184 138 48 / 72%); }
.help-board .cell.tutorial-diagonal-cross { color: #a52c2c; }
.help-board .cell.tutorial-diagonal-cross::before, .help-board .cell.tutorial-diagonal-cross::after { background: currentColor; box-shadow: 0 0 0 1.5px #651717; }

/* GameScreen composition: city plaque, status, Bruce card, square board. */
.daily-dossier { display:block; width:min(640px,100%); padding:4px; }
.play-column { display:flex; flex-direction:column; gap:4px; padding:0; }
.game-header { position:relative; display:block; min-height:84px; margin:0; }
.game-header .case-heading { display:grid; min-height:84px; padding:20px 64px 12px; margin:0; text-align:center; background:var(--city-plaque) center / 100% 100% no-repeat; }
.game-header h2 { font-size:24px; line-height:1.2; letter-spacing:1px; }
.game-header .eyebrow { display:none; }
.header-actions { position:absolute; top:4px; right:4px; margin:0; gap:4px; }
.header-actions .icon-button { width:48px; height:48px; padding:8px; }
.header-actions .icon-button span, .header-actions .toggle-status { display:none; }
.language-button { width:48px; min-width:48px; padding:8px; }
.case-meta { grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; gap:4px; }
.case-meta > div { min-height:48px; padding:4px 8px; background:var(--status-paper) center / 100% 100% no-repeat; }
.case-meta span, .case-meta strong { font-size:18px; }
.case-intro { position:relative; top:auto; display:grid; grid-template-columns:88px minmax(0,1fr); grid-template-rows:1fr auto; min-height:116px; max-height:180px; margin:0; padding:12px; border:0; border-radius:0; background:var(--dialogue-card) center / 100% 100% no-repeat; box-shadow:none; }
.case-intro .bruce-portrait { grid-column:1; grid-row:1 / -1; width:88px; height:88px; margin:0; align-self:center; }
.case-intro .intro-topline, .case-intro h1, .case-intro .case-code, .intro-copy, .studio-credit { display:none; }
.feedback { grid-column:2; margin:0; min-width:0; padding:2px 8px; max-height:128px; overflow:auto; color:var(--ink); font-size:18px; text-align:left; line-height:1.4; }
.hint-navigation { grid-column:2; display:flex; align-items:center; gap:4px; min-width:0; }
.hint-navigation button { min-width:48px; min-height:48px; padding:8px; font-size:16px; }
.hint-navigation span { flex:1; white-space:nowrap; text-align:center; font-size:18px; }
[hidden] { display:none !important; }
.play-column > .board { width:100%; max-width:none; margin:0; padding:0; background:#dbca9b; box-shadow:none; border:2px solid #49301d; }
.controls { width:100%; gap:4px; }
.utility-actions { grid-template-columns:1fr; }
.primary-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.daily-footer { margin-top:8px; }
.cell.cross { color:#fff0c2; }
.cell.cross::before, .cell.cross::after { box-shadow:0 0 0 1.5px #3b2b22; width:55%; height:3px; }
.cell.suspect .character-art { width:68%; height:68%; border:1px solid #fff0d2; border-radius:50%; background:rgba(255,255,255,.3); }
.cell.victim .character-art { width:96%; height:96%; }
@media (min-width:401px) and (min-height:701px) {
  .game-header, .game-header .case-heading { min-height:112px; }
  .game-header h2 { font-size:30px; }
  .case-intro { min-height:154px; max-height:220px; grid-template-columns:116px minmax(0,1fr); }
  .case-intro .bruce-portrait { width:116px; height:116px; }
  .feedback { font-size:20px; max-height:166px; }
}
.game-header .case-heading::after { display:none; }
.game-header .header-actions { position:absolute; margin:0; }
.case-intro { grid-template-rows:minmax(0,1fr) auto; max-height:180px; }
.case-intro .bruce-portrait { grid-row:1; height:64px; }
.dialogue-hint { grid-column:1; grid-row:2; min-height:48px; padding:6px; font-size:16px; }
.dialogue-hint .icon { display:none; }
.feedback { grid-row:1; }
.hint-navigation { grid-row:2; flex-wrap:wrap; }
.case-meta > div { display:flex; align-items:center; justify-content:center; gap:4px; }
.case-meta > div:nth-child(3), .case-meta > div:nth-child(4) { display:none; }
.case-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
.controls .utility-actions { display:none; }
@media (min-width:401px) and (min-height:701px) {
  .case-intro .bruce-portrait { height:92px; }
}
.room-tile { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.character-art { z-index:1; }
.cell.cross::before,.cell.cross::after { z-index:2; }
.hint-corners { z-index:3; }
.hint-letter { position:absolute; z-index:4; top:3px; left:3px; display:grid; place-items:center; width:22px; height:22px; border:1px solid #3b2b22; border-radius:50%; background:rgba(255,247,209,.9); color:#33251d; font:600 15px/1 'Libre Baskerville'; pointer-events:none; }
.hint-letter.completed { background:#b8e69e; }
.hint-unit-overlay { position:absolute; inset:0; background:rgba(255,215,94,.15); z-index:1; pointer-events:none; }
.cell-link { color:#173f52; }
.case-intro { height:136px; min-height:136px; max-height:136px; padding:8px; grid-template-columns:88px minmax(0,1fr); grid-template-rows:minmax(0,1fr) 48px; }
.feedback { max-height:none; min-height:0; }
.hint-navigation { flex-wrap:nowrap; }
.hint-navigation button { width:48px; flex:0 0 48px; padding:6px; font-size:24px; }
.hint-navigation span { min-width:36px; font-size:16px; }
@media (min-width:401px) and (min-height:701px) {
  .case-intro { height:176px; min-height:176px; max-height:176px; grid-template-columns:116px minmax(0,1fr); }
}
/* Pixel geometry from the actual daily GameScreen captures. */
.play-column { gap:2px; }
.game-header { height:84px; min-height:84px; }
.game-header .case-heading { width:80%; height:84px; min-height:84px; padding:14px 12px 8px; margin:0 auto; align-content:center; gap:4px; }
.game-header h2 { font-size:24px; text-transform:uppercase; white-space:nowrap; }
.game-header .case-code { display:none; padding:0; color:#fff0c2; font-size:20px; line-height:1.2; }
.case-meta { display:grid; grid-template-columns:60px minmax(0,1fr) minmax(0,1fr) 60px 60px; height:58px; min-height:58px; gap:0; background:var(--status-paper) center / 100% 100% no-repeat; }
.case-meta > div { background:none; padding:0; min-height:0; }
.case-meta > div:nth-child(3),.case-meta > div:nth-child(4) { display:flex; }
.case-meta > div:nth-of-type(3),.case-meta > div:nth-of-type(4) { display:none; }
.case-meta > div > span { display:none; }
.case-meta strong { font-size:24px; font-weight:400; white-space:nowrap; }
.case-meta .music-button,.case-meta .language-button,.case-meta .header-help { position:static; width:60px; height:58px; min-height:58px; border-radius:12px; padding:8px; font-size:26px; background:#ffe1a0; }
.case-meta > button:hover { background:#ffe9b5; border-color:#85582f; }
.case-meta > button:active { background:#d9b969; border-color:var(--bronze-dark); transform:translateY(1px); }
.case-meta > button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.case-meta > button:disabled { background:#d2c3a5; color:#7a6a58; border-color:#9b876b; transform:none; cursor:default; }
.case-meta #found-count { color:#176675; }
.case-meta .icon { width:18px; height:18px; }
.case-meta .music-button { display:grid; place-items:center; }
.case-meta .music-button .icon { width:24px; height:24px; }
.case-intro { height:132px; min-height:132px; max-height:132px; grid-template-columns:128px 36px minmax(0,1fr); grid-template-rows:minmax(0,1fr) 60px; padding:8px; }
.case-intro .bruce-portrait { grid-column:1; grid-row:1; width:128px; height:100%; min-height:0; }
.case-intro::after { content:''; position:absolute; left:152px; top:8px; bottom:8px; width:1px; background:linear-gradient(transparent,#c9a763,transparent); }
.dialogue-hint { grid-column:1; grid-row:2; width:128px; height:60px; min-height:60px; color:#fff0c2; border:2px solid #b88a30; border-radius:4px; background:#051416; font:600 24px/1.2 'Cinzel'; text-transform:uppercase; }
.dialogue-hint:hover { background:#17352e; }
.dialogue-hint:active { background:#294e40; }
.dialogue-hint:disabled { background:#283733; color:#aaa18c; }
.feedback { grid-column:3; grid-row:1 / -1; padding:0; font-size:20px; line-height:1.3; }
.hint-navigation { grid-column:1; grid-row:1 / -1; display:grid; grid-template-columns:1fr 1fr; align-content:end; gap:4px; }
.hint-navigation button { width:auto; color:#fff0c2; border:2px solid #9f814a; border-radius:4px; background:#051416; font-size:22px; }
.hint-navigation span { order:4; display:grid; place-items:center; min-width:0; font-size:20px; color:#6e442b; }
.hint-navigation button:nth-of-type(3) { order:3; }
.case-intro:has(.hint-navigation:not([hidden])) .bruce-portrait,.case-intro:has(.hint-navigation:not([hidden])) .dialogue-hint { visibility:hidden; }
.board-shell { position:relative; width:100%; aspect-ratio:1; overflow:hidden; border:2px solid #b88a30; }
.board-shell .board { width:100%; height:100%; margin:0; padding:0; border:0; box-shadow:none; background:none; }
.room-borders { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; overflow:hidden; }
.board-shell .cell { border-width:.5px !important; }
.hint-letter { top:auto; bottom:5px; left:auto; right:5px; width:28px; height:28px; font-size:18px; }
@media (min-width:401px) and (min-height:701px) {
  .game-header,.game-header .case-heading { height:128px; min-height:128px; }
  .game-header h2 { font-size:30px; }
  .game-header .case-code { display:block; font-size:24px; }
  .case-meta { grid-template-columns:72px minmax(0,1fr) minmax(0,1fr) 72px 72px; height:70px; min-height:70px; }
  .case-meta .music-button,.case-meta .language-button,.case-meta .header-help { width:72px; height:70px; min-height:70px; }
  .case-intro { height:170px; min-height:170px; max-height:170px; grid-template-columns:154px 48px minmax(0,1fr); }
  .case-intro .bruce-portrait { width:154px; height:100%; }
  .case-intro::after { left:188px; }
  .dialogue-hint { width:154px; }
  .feedback { font-size:24px; }
}

html { scrollbar-width:none; }
html::-webkit-scrollbar { width:0; height:0; }
.board-shell { border:0; box-shadow:inset 0 0 0 2px #b88a30; }

.bruce-portrait { overflow:hidden; }
.hint-bulb { width:20px; height:24px; object-fit:contain; }
.dialogue-hint { background:var(--hint-art) center / 100% 100% no-repeat, #051416; }

.feedback { display:flex; align-items:center; }
.feedback-content { display:block; max-height:100%; overflow:auto; }
.room-chip { display:inline-block; width:18px; height:18px; border:1px solid rgba(0,0,0,.28); vertical-align:middle; }
.cell-link { background:#fff8df; color:#33251d; font-weight:400; white-space:pre; }
@media (min-width:401px) and (min-height:701px) { .room-chip { width:22px; height:22px; } }

.board-stage, .board-shell, .board, .board .cell {
  touch-action:none;
  overscroll-behavior:none;
}
.board { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }

.cell.suspect .character-art { position:absolute; left:16%; top:6%; }
.suspect-name { position:absolute; z-index:2; left:6%; width:88%; bottom:4%; height:23%; min-height:10px; display:grid; place-items:center; color:#3d271c; background:#fff0c2; border:1px solid #b88a30; border-radius:3px; font:400 clamp(7px,1.4vw,10px)/1 'Libre Baskerville'; overflow:hidden; }
.cell.victim .character-art { width:90%; height:90%; }

.hint-navigation span { background:#fff0c2; border:0; }

/* Same font axes and body/status sizes as DossiersVisualTheme. */
:root { font-optical-sizing:none; }
.feedback { font-size:18px; line-height:1.4; }
.game-header h2 { letter-spacing:1px; }
.game-header .case-code { font-family:'Libre Baskerville'; font-size:18px; font-weight:400; }
.case-meta strong { font-size:20px; }
.case-intro:has(.hint-navigation:not([hidden])) .bruce-portrait,
.case-intro:has(.hint-navigation:not([hidden])) .dialogue-hint { display:none; }
.hint-letter { inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); border-width:2px; font-family:Arial,sans-serif; font-weight:400; }
@media (min-width:401px) and (min-height:701px) {
  .feedback,.game-header .case-code { font-size:20px; }
}

/* Keep Bruce's dialogue card aligned with the full playable field. */
.case-intro { width:100%; box-sizing:border-box; align-self:stretch; }

/* Fixed mobile store entry points; the page reserves their safe-area height. */
.store-bar { position:fixed; z-index:20; inset:0 0 auto; display:flex; align-items:center; justify-content:center; gap:12px; height:calc(76px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); background:rgb(5 20 22 / 60%); }
.store-logo-button { display:grid; width:60px; min-width:60px; height:60px; min-height:60px; place-items:center; padding:0; border:0; border-radius:14px; background:transparent; }
.store-logo-button img { display:block; width:32px; height:32px; }
.store-logo-button:hover { background:rgb(255 240 194 / 12%); border:0; }
.store-logo-button:active { background:rgb(255 240 194 / 22%); border:0; transform:translateY(1px); }
.store-logo-button:focus-visible { outline:3px solid #f8dfa4; outline-offset:2px; }
.store-logo-button:disabled { opacity:.52; background:transparent; border:0; transform:none; }
.store-dialog .dialog-actions button { min-height:60px; }
.daily-dossier { padding-top:calc(76px + env(safe-area-inset-top)); }

/* Expanded play keeps the device insets without reserving the store toolbar. */
html.screen-expanded .daily-dossier { padding-top:calc(4px + env(safe-area-inset-top)); padding-bottom:calc(4px + env(safe-area-inset-bottom)); padding-left:max(4px,env(safe-area-inset-left)); padding-right:max(4px,env(safe-area-inset-right)); }
html.screen-expanded .store-bar { display:none; }
html.screen-expanded .dossier-dialog { inset-block:env(safe-area-inset-top) env(safe-area-inset-bottom); max-height:min(760px,calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
html:fullscreen { overflow:auto; background:#051416; }
html:-webkit-full-screen { overflow:auto; background:#051416; }
.screen-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; width:100%; min-width:0; }
.screen-actions:has(> button:not([hidden])) { margin-top:8px; }
.screen-actions button, #home-screen-close { min-width:0; min-height:60px; white-space:normal; overflow-wrap:anywhere; color:var(--ink); background:var(--paper-light); border:3px solid var(--bronze); }
.screen-actions button:hover, #home-screen-close:hover { color:var(--ink); background:#ffe9b5; border-color:#85582f; }
.screen-actions button:active, #home-screen-close:active { color:var(--ink); background:#d9b969; border-color:var(--bronze-dark); }
.screen-actions button:focus-visible, #home-screen-close:focus-visible { color:var(--ink); background:#ffe9b5; border-color:#85582f; outline:3px solid var(--focus); outline-offset:3px; }
.screen-actions button:disabled, #home-screen-close:disabled { color:#7a6a58; background:#d2c3a5; border-color:#9b876b; cursor:default; transform:none; }
#screen-button { width:60px; min-width:60px; height:60px; min-height:60px; padding:8px; color:var(--paper-pale); background:transparent; border:0; border-radius:14px; }
#screen-button .icon { width:32px; height:32px; }
#screen-button:hover { color:#fff5d1; background:rgb(255 240 194 / 12%); border:0; }
#screen-button:active { color:#fff5d1; background:rgb(255 240 194 / 22%); border:0; }
#screen-button:focus-visible { color:#fff5d1; background:rgb(255 240 194 / 12%); outline:3px solid var(--paper-light); outline-offset:2px; }
#screen-button:disabled { color:#b7aa8e; background:transparent; opacity:.52; cursor:default; transform:none; }
#home-screen-dialog { inset-block:env(safe-area-inset-top) env(safe-area-inset-bottom); max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
#home-screen-dialog h2 { min-width:0; font-size:24px; overflow-wrap:anywhere; }
#home-screen-dialog h3 { min-width:0; font-size:18px; line-height:1.4; overflow-wrap:anywhere; }
#home-screen-dialog .dialog-copy, #home-screen-dialog .dialog-body { min-width:0; overflow-wrap:anywhere; }
@media (min-width:401px) and (min-height:701px) { .screen-actions button, #home-screen-close { min-height:72px; } #home-screen-dialog h2 { font-size:28px; } #home-screen-dialog h3 { font-size:20px; } }

/* Mobile play reserves the board before decoration. Desktop keeps its flow. */
.board-stage { display:contents; }
.more-button, .storage-warning { display:none; }
#more-dialog .dialog-header { position:sticky; top:0; z-index:1; justify-content:space-between; flex-wrap:wrap; background:var(--paper-light); }
#more-dialog .dialog-header h2 { min-width:0; overflow-wrap:anywhere; }
.more-content { display:grid; gap:16px; margin-top:16px; }
#more-content .date-label { display:block; padding:0; }
#more-content .store-bar { position:static; display:flex; flex-wrap:wrap; height:auto; padding:8px; border-radius:12px; background:var(--ink-deep); }
#more-content .screen-actions { margin:0; }
#more-content .daily-footer { width:100%; margin:0; color:var(--ink); }
#more-content .storage-notice { color:var(--danger); }
.dossier-dialog { overscroll-behavior:contain; }
#help-board { touch-action:pan-y; }

@media (max-width:760px) {
  body { min-height:100dvh; }
  html .daily-dossier, html.screen-expanded .daily-dossier {
    --play-top:max(4px,env(safe-area-inset-top));
    --play-bottom:max(4px,env(safe-area-inset-bottom));
    width:100%; min-height:0;
    padding:var(--play-top) max(4px,env(safe-area-inset-right)) var(--play-bottom) max(4px,env(safe-area-inset-left));
  }
  .play-column {
    display:grid; grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(min-content,1fr) auto;
    height:calc(100dvh - var(--play-top) - var(--play-bottom));
    gap:4px; padding:0;
  }
  .game-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 8px; height:auto; min-height:0; }
  .game-header .case-heading { width:100%; height:auto; min-height:0; padding:2px 4px; gap:2px; margin:0; background:none; }
  .game-header h2 { font-size:30px; line-height:1.2; white-space:normal; text-transform:none; overflow-wrap:anywhere; }
  .game-header .case-code { display:none; font-size:18px; line-height:1.2; overflow-wrap:anywhere; }
  .more-button { display:block; min-height:48px; padding:12px 16px; }
  .storage-warning { display:block; grid-column:1/-1; min-height:48px; font-size:18px; color:var(--danger); }
  .case-meta { height:auto; min-height:48px; grid-template-columns:48px minmax(0,1fr) minmax(0,1fr) 48px 48px; gap:8px; }
  .case-meta .music-button, .case-meta .language-button, .case-meta .header-help { width:48px; height:auto; min-height:48px; font-size:20px; }
  .case-meta strong { font-size:18px; }
  .case-intro {
    height:clamp(108px,calc(100dvh - 540px),156px); min-height:108px; max-height:none;
    grid-template-columns:72px minmax(0,1fr); grid-template-rows:minmax(0,1fr) 48px;
    gap:4px 8px; padding:4px 8px; margin:0;
  }
  .case-intro::after { display:none; }
  .case-intro .bruce-portrait { grid-column:1; grid-row:1; width:72px; height:100%; min-height:0; }
  .case-intro .feedback { display:block; grid-column:2; grid-row:1; width:100%; max-width:none; min-height:0; max-height:none; margin:0; padding:0 2px; overflow:auto; overscroll-behavior:contain; touch-action:pan-y; font-size:18px; line-height:1.4; }
  .feedback-content { display:inline; max-height:none; overflow:visible; }
  .feedback:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
  .case-intro .dialogue-hint { grid-column:1/-1; grid-row:2; width:100%; height:48px; min-height:48px; padding:8px 16px; font-size:18px; }
  .case-intro .hint-navigation { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:48px minmax(0,1fr) 48px 48px; gap:8px; align-content:stretch; }
  .hint-navigation button { min-width:48px; min-height:48px; width:48px; padding:6px; }
  .hint-navigation span, .hint-navigation button:nth-of-type(3) { order:0; }
  .hint-navigation span { font-size:18px; }
  .case-intro:has(.hint-navigation:not([hidden])) .feedback { grid-column:1/-1; }
  .board-stage { --board-min:336px; display:grid; place-items:center; container-type:size; min-height:var(--board-min); }
  .board-stage .board-shell { width:min(100cqw,100cqh); min-width:var(--board-min); aspect-ratio:1; }
  .controls { gap:0; margin:0; min-width:0; }
  .controls > .help-button { display:none; }
  .mode-button { min-height:60px; }
  .dossier-dialog, html.screen-expanded .dossier-dialog {
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}
@media (max-width:760px) and (max-height:700px) {
  .game-header { grid-template-columns:minmax(0,1fr) auto; align-items:start; min-height:0; height:auto; }
  .game-header .case-heading { width:100%; min-height:0; height:auto; padding:4px 4px 8px; align-content:start; }
  .game-header .case-heading h2 { padding-top:2px; }
  .game-header .more-button { position:static; align-self:start; }
  .game-header .case-code { padding-top:4px; }
  .case-intro .bruce-portrait { display:none; }
  .case-intro .feedback { grid-column:1/-1; }
}

/* Solved-case reveal: one scroll owner, fixed actions, and explicit prison bars. */
.result-dialog { overflow:hidden; }
.result-card {
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding:0; overflow:hidden;
}
.result-header { padding:18px 22px 10px; }
.result-header h2 { flex:1; min-width:0; margin:0; }
.result-dismiss { display:grid; flex:0 0 48px; width:48px; height:48px; min-width:48px; min-height:48px; margin-left:auto; padding:0; place-items:center; color:var(--ink); background:transparent; border-color:transparent; }
.result-dismiss .icon { width:28px; height:28px; }
.result-dismiss:hover { color:var(--ink); background:rgb(169 102 37 / 14%); border-color:transparent; }
.result-dismiss:active { color:var(--ink); background:rgb(169 102 37 / 24%); border-color:transparent; }
.result-dismiss:focus-visible { color:var(--ink); background:rgb(169 102 37 / 14%); border-color:transparent; }
.result-scroll { min-height:0; padding:0 22px 18px; overflow:auto; overscroll-behavior:contain; touch-action:pan-y; }
.result-scroll > .dialog-copy { margin:4px 0 14px; }
.result-reveal { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:12px; align-items:end; min-height:220px; }
.result-bruce-panel { display:grid; align-content:end; min-width:0; }
.result-bruce-portrait { display:grid; place-items:end center; min-height:0; }
.result-bruce-art { display:block; width:min(100%,180px); height:auto; max-height:180px; object-fit:contain; object-position:center bottom; }
.result-speech { position:relative; z-index:2; margin:-6px 0 4px; padding:10px 11px; border:2px solid var(--ink-deep); border-radius:12px; background:#fff3cc; font-size:clamp(.76rem,2.7vw,.94rem); font-weight:700; line-height:1.32; text-align:center; }
.result-speech::after { content:""; position:absolute; left:24%; top:-8px; width:12px; height:12px; border-left:2px solid var(--ink-deep); border-top:2px solid var(--ink-deep); background:#fff3cc; transform:rotate(45deg); }
.result-culprit-card { position:relative; min-width:0; min-height:220px; overflow:hidden; border:4px solid #32291f; border-radius:12px; background:linear-gradient(#554d42 0 26%,#817567 26% 100%); box-shadow:inset 0 0 0 2px rgb(255 255 255 / 16%),0 6px 14px rgb(22 17 12 / 35%); }
.result-culprit-card::before { content:""; position:absolute; inset:25% 0 auto; height:4px; z-index:2; background:#2b251f; box-shadow:0 3px 0 rgb(255 255 255 / 17%); }
.result-culprit-portrait { position:absolute; inset:20% 3% 9%; display:grid; place-items:end center; }
.result-culprit-portrait .character-art { display:block; width:100%; height:100%; }
.result-bars { position:absolute; inset:0; z-index:3; pointer-events:none; }
.result-bars span { position:absolute; top:-3%; bottom:-3%; width:13px; border:2px solid #171512; border-radius:7px; background:linear-gradient(90deg,#302a24 0 18%,#928777 42%,#423a31 68% 100%); box-shadow:2px 0 4px rgb(0 0 0 / 45%); }
.result-bars span:nth-child(1) { left:9%; }.result-bars span:nth-child(2) { left:47%; }.result-bars span:nth-child(3) { right:9%; }
.result-culprit-name { position:absolute; z-index:5; left:8px; right:8px; bottom:7px; margin:0; padding:5px 8px; border:2px solid #2c241c; border-radius:5px; color:#2d241b; background:#f3d894; font-size:clamp(.88rem,3.7vw,1.08rem); line-height:1.15; text-align:center; overflow-wrap:anywhere; }
.result-culprit-stamp { position:absolute; z-index:6; top:42%; left:50%; padding:5px 7px; border:4px double #a92f28; color:#9f241f; background:rgb(255 236 188 / 80%); font:900 clamp(.82rem,4vw,1.15rem)/1 "Arial Narrow",sans-serif; letter-spacing:.08em; transform:translate(-50%,-50%) rotate(-10deg); box-shadow:0 1px 4px rgb(0 0 0 / 20%); }
.result-rating { margin:15px 0 10px; }
.result-stats { margin:10px 0 0; }
.result-actions { position:relative; z-index:8; margin:0; padding:12px 22px max(16px,env(safe-area-inset-bottom)); border-top:2px solid rgb(97 66 35 / 35%); background:linear-gradient(180deg,#ead39e,#dfc386); box-shadow:0 -5px 12px rgb(67 43 21 / 13%); }
.result-actions .help-button { min-height:48px; }
.store-choice-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.store-choice-button { display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; min-height:60px; padding:10px; color:var(--ink); background:#fff0c2; border:3px solid var(--bronze); text-decoration:none; }
.store-choice-button img { flex:0 0 40px; }.store-choice-button span { min-width:0; overflow-wrap:anywhere; }
.store-choice-button[aria-pressed="true"] { border-color:var(--ink-deep); background:#f2d182; box-shadow:inset 0 0 0 2px #fff1c4; }

.result-dialog.is-revealing[open] .result-card { animation:result-card-in .2s ease-out both; }
.result-dialog.is-revealing .result-bruce-panel { animation:result-bruce-in .28s .16s ease-out both; }
.result-dialog.is-revealing .result-culprit-card { animation:result-culprit-in .34s .34s ease-out both; }
.result-dialog.is-revealing .result-bars span { animation:result-bars-drop .22s .66s cubic-bezier(.2,.85,.35,1.15) both; }
.result-dialog.is-revealing .result-culprit-stamp { animation:result-stamp-in .18s .91s ease-out both; }
@keyframes result-card-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@keyframes result-bruce-in { from { opacity:0; transform:translateX(-32px); } to { opacity:1; transform:translateX(0); } }
@keyframes result-culprit-in { from { opacity:0; transform:translateX(38px); } to { opacity:1; transform:translateX(0); } }
@keyframes result-bars-drop { from { transform:translateY(-112%); } to { transform:translateY(0); } }
@keyframes result-stamp-in { 0% { opacity:0; transform:translate(-50%,-50%) scale(1.75) rotate(-16deg); } 70% { opacity:1; transform:translate(-50%,-50%) scale(.9) rotate(-8deg); } 100% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-10deg); } }

@media (max-width:400px) {
  .result-header { padding:12px 14px 7px; }.result-header .solved-seal { width:42px; height:42px; flex-basis:42px; }
  .result-header h2 { font-size:21px; }.result-scroll { padding:0 14px 10px; }
  .result-scroll > .dialog-copy { margin:2px 0 8px; font-size:15px; line-height:1.35; }
  .result-reveal { gap:7px; min-height:188px; }.result-culprit-card { min-height:188px; }
  .result-bruce-art { max-height:128px; }.result-speech { padding:7px; font-size:12px; }
  .result-rating { gap:10px; margin:9px 0 6px; }.result-rating .icon { width:34px; height:34px; }
  .result-stats { gap:7px 10px; margin-top:6px; font-size:14px; }
  .result-actions { padding:8px 14px max(10px,env(safe-area-inset-bottom)); gap:6px; }
  .result-actions .primary-button { min-height:52px; }.result-actions .action-button,.result-actions .help-button { min-height:48px; }
  .store-choice-actions { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .result-dialog.is-revealing[open] .result-card,.result-dialog.is-revealing .result-bruce-panel,.result-dialog.is-revealing .result-culprit-card,.result-dialog.is-revealing .result-bars span,.result-dialog.is-revealing .result-culprit-stamp { animation:none; }
}