/* Casual puzzle art direction. Rules and storage stay in the shared game scripts. */
:root {
  --bg:#f7f6ee; --ink:#243b51; --navy:#203a53; --muted:#80909a;
  --mint:#70dac4; --mint-dark:#256e62; --yellow:#ffdb7a; --line:#d7e3e7;
}
body {
  background-color:var(--bg);
  background-image:radial-gradient(#a3c2cc22 1.1px,transparent 1.1px);
  background-size:18px 18px;
}
.app-header { background:#fffdf7; border-bottom:2px solid #d9e6e6; color:var(--ink); }
.header-inner { max-width:1120px; padding-top:13px; padding-bottom:13px; }
.brand { color:#243c55; font-size:28px; gap:12px; }
.brand em { color:#dd9e2b; text-shadow:0 1px 0 #ffeabc; }
.brand small { color:#8d9d9d; font-weight:700; letter-spacing:1.2px; }
.brand-icon {
  width:53px; height:53px; border-radius:16px; border:2px solid #264254;
  overflow:hidden; transform:rotate(-4deg); background:#192b40;
  box-shadow:0 3px 0 #b4c4cb,0 5px 10px #28415816;
}
.brand-icon img { width:100%; height:100%; display:block; object-fit:cover; }
.header-caption { color:#8b9b9d; }
.records,.help {
  background:#fff; border:2px solid #cbdcdf; color:#50747c;
  box-shadow:0 3px 0 #dce7e6; border-radius:12px; font-weight:800;
}
.records:hover,.help:hover { background:#e9f9f1; border-color:#8eb9ad; }
main { padding-top:23px; }
.intro { margin-bottom:19px; }
.intro .eyebrow { color:#6d988a; letter-spacing:1.5px; }
.intro h1 { font-size:35px; color:#29445c; text-shadow:0 2px 0 #fff; }
.intro p { color:#87938b; font-size:13px; }
.stat {
  border:2px solid #d9e4e2; border-radius:18px; min-width:208px;
  background:linear-gradient(155deg,#fffef9,#fff9e9); box-shadow:0 4px 0 #e6e8d7;
}
.stat-copy { color:#92856b; }
.stat-numbers strong { color:#394f5c; font-size:27px; }
.progress-track { height:7px; background:#e9eee7; border:1px solid #dce4da; }
.progress-track span { background:repeating-linear-gradient(110deg,#e8b846 0 9px,#ffdb7a 9px 17px); }
/* The daily loop remains one tap away, with its status visible while playing. */
.habit-drawer { margin:0 0 17px; border:2px solid #cfdfdf; border-radius:17px; background:#eff8f3; box-shadow:0 3px 0 #e1ebe0; }
.habit-drawer>summary { list-style:none; display:flex; align-items:center; gap:11px; padding:10px 15px; cursor:pointer; min-height:60px; }
.habit-drawer>summary::-webkit-details-marker { display:none; }
.habit-summary-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:12px; background:#d9eee0; font-size:20px; transform:rotate(-7deg); }
.habit-drawer summary b { display:block; font:17px/1.3 var(--display); color:#426c62; }
.habit-drawer summary small { display:block; font-size:10px; color:#88a096; }
.drawer-arrow { margin-left:auto; display:grid; place-items:center; width:26px; height:26px; border-radius:9px; background:#fff; color:#6d9184; font-size:20px; }
.habit-drawer[open] .drawer-arrow { transform:rotate(180deg); }
.habit-drawer .habit { margin:0 10px 10px; border:2px solid #365d68; border-radius:14px; background:linear-gradient(135deg,#2d5565,#233f55); box-shadow:0 3px 0 #c3d4cd; }
.habit-cta { box-shadow:0 3px 0 #b69547; }
.habit-link { border:1px solid #527c84; background:#345766; }
.tabs { margin-bottom:17px; padding-bottom:16px; border-color:#dce6e2; }
.mode-tabs { background:#dfece9; border:2px solid #c8ddda; border-radius:16px; padding:4px; gap:5px; }
.mode-tabs button { color:#78948f; border:1px solid transparent; border-radius:11px; padding:8px 19px; }
.mode-tabs button.active { color:#66502c; border-color:#d6ad53; background:linear-gradient(#ffe9a9,#ffda79); box-shadow:0 3px 0 #c5a257,inset 0 2px 0 #fff5cb; }
#dailyTab::before { color:#b19142; }
.case-picker select { border:2px solid #cddfdf; border-radius:12px; background:#fff; color:#54777c; box-shadow:0 3px 0 #e1e9e5; font-weight:800; }
.case-top { font-size:10px; color:#859d9b; }
.case-top>#caseNo { letter-spacing:1px; color:#91a5a8; }
.badge { background:#e5f2e7; border:1px solid #c6dfcd; color:#6c9476; padding:3px 8px; border-radius:7px; }
.case-heading h2#title { font-size:29px; color:#2e485d; }
.story { color:#89998f; font-size:12px; }
.timer-pill { border:2px solid #d5e4e2; border-radius:12px; color:#56747d; background:#fff; box-shadow:0 3px 0 #e5ece6; }
.best { color:#ab9a74; }
.layout { gap:26px; }
/* A warm toy apartment against a rich, clear night sky. */
.scene {
  padding:17px 22px 15px; border:3px solid #254a60; border-radius:25px;
  background-color:#244a60;
  background-image:radial-gradient(circle at 15% 12%,#fff4c4 0 1px,transparent 2px),radial-gradient(circle at 76% 11%,#92d9dc 0 1.3px,transparent 2px),radial-gradient(circle at 94% 32%,#fff3bc 0 1px,transparent 2px),linear-gradient(150deg,#37647a,#203e58 70%);
  box-shadow:0 6px 0 #17354b,0 11px 20px #25475c16;
}
.scene::before { bottom:44px; background:repeating-linear-gradient(0deg,transparent 0 15px,#426d7d 15px 22px),#27495e; opacity:.5; width:80px; }
.scene::after { content:'✧'; position:absolute; right:59px; top:37px; font-size:17px; color:#8bc4ca; pointer-events:none; }
.scene-top { color:#bbd7da; font-size:10px; }
.moon { width:27px; height:27px; background:linear-gradient(145deg,#fffbcf,#ffda87); box-shadow:0 0 0 6px #ffe7a00a,0 0 25px #ffde8150; }
.apartment { margin-top:13px; }
.roof { width:80%; padding:12px 12px 10px; border:3px solid #213b51; border-bottom:0; border-radius:17px 17px 0 0; background:linear-gradient(#7097a6,#52778d); color:#fff3cf; font-size:20px; box-shadow:inset 0 3px 0 #a6c5c8,0 -2px 0 #40657a; text-shadow:0 2px 0 #34566b; }
.roof-number { background:#344f66; border:1px solid #8aabb4; color:#b0d9d4; }
.roof-lights { color:#f7e8ae; text-shadow:none; }
.building { border:7px solid #6f919f; border-top-width:10px; border-bottom:0; border-radius:8px 8px 0 0; padding:13px 12px 3px; background:repeating-linear-gradient(0deg,#a5bdc4 0 93px,#c1d0ce 93px 96px); box-shadow:inset 0 3px 0 #d5e2d9,5px 0 0 #1b384e; }
.floor { gap:10px; margin-bottom:12px; grid-template-columns:18px repeat(4,minmax(0,1fr)); }
.floor-label { font-size:10px; font-weight:900; color:#4b6d7d; text-shadow:0 1px 0 #dfebe4; }
.room { min-height:97px; padding:5px 3px 5px; border:3px solid #597586; border-radius:13px; color:#806347; background:linear-gradient(150deg,#fff6cf,#ffdda1); box-shadow:0 4px 0 #718f9c,inset 0 3px 0 #fffbea; overflow:visible; }
.room:hover:not(.excluded) { box-shadow:0 7px 0 #718f9c,inset 0 3px 0 #fffbea; }
.num { font-size:11px; letter-spacing:.5px; font-weight:900; line-height:1.15; color:#947445; }
.person { height:53px; width:58px; overflow:hidden; background:radial-gradient(ellipse,#fffcefaa,transparent 70%); align-items:start; }
.person img { width:58px; height:62px; object-fit:contain; filter:drop-shadow(0 2px 0 #ba8e4930); }
.tag { font-size:9px; color:#a58555; font-weight:800; }
.room.witness { border-color:#458c83; background:linear-gradient(145deg,#d6ffe8,#8cddc8); color:#397b70; box-shadow:0 4px 0 #658e90,inset 0 3px 0 #edfff4; }
.room.witness .num { color:#367d73; }
.room.witness .tag { background:#4a9c86; color:#fff; border:1px solid #358e77; border-radius:5px; font-size:8px; box-shadow:0 1px 0 #82c5ad; }
.room.selected { border-color:#fff1a7; background:linear-gradient(#fff6bf,#ffd36d); outline:3px solid #eab44c; box-shadow:0 0 22px #ffd97880,0 4px 0 #a48e5b; }
.room.selected::after { top:-8px; right:-8px; width:21px; height:21px; line-height:17px; border:2px solid #fff5bf; background:#f9c866; color:#815d2f; font-size:13px; }
.room.excluded { border-color:#66838d; background:linear-gradient(#8da8af,#76939e); color:#c4d4d3; box-shadow:0 2px 0 #75919a; }
.room.excluded .num { color:#bad0d0; }
.room.excluded .person { background:none; color:#bbd2d5; font-size:43px; align-items:center; }
.room.excluded .tag { color:#b8cece; }
.item { font-size:10px; line-height:1.5; color:#886b45; }
.room.witness .item { color:#397669; }
.ground { height:12px; border:3px solid #274659; border-top:0; background:#54768a; border-radius:0 0 8px 8px; box-shadow:5px 0 0 #1b384e; }
.scene-bottom { color:#b4d0d3; margin-top:14px; font-size:10px; gap:25px; }
.legend-dot { width:8px; height:8px; border-radius:3px; }
.toolbar { background:#e9f0eb; padding:5px; border:2px solid #cddfda; border-radius:16px; gap:5px; margin-top:16px; }
.toolbar button { border-radius:11px; color:#86a29c; min-height:40px; font-size:12px; }
.toolbar button.active { background:linear-gradient(#4f7c7c,#3f656d); color:#fff9e2; box-shadow:0 3px 0 #294e59,inset 0 1px 0 #76a29a; }
.toolbar .undo-button { color:#8ba49d; }
.instruction { font-size:11px; color:#8f9f92; }
/* Paper-and-sticker evidence, with large readable touch targets. */
.panel { position:relative; padding:24px 22px 18px; background:#fffef9; border:2px solid #d5e3df; border-radius:24px; box-shadow:0 5px 0 #e2e9d9; }
.panel::before { content:''; position:absolute; top:-5px; left:26px; width:48px; height:9px; border-radius:4px; background:#f5d67e; box-shadow:70px 0 0 #9cd8c7; opacity:.8; }
.evidence-heading { margin-bottom:19px; }
.evidence-icon { background:linear-gradient(#a5e7d0,#72ccb5); color:#347468; border:2px solid #75b7a5; border-radius:14px; box-shadow:0 3px 0 #d5e7c9,inset 0 2px 0 #d1f6dd; transform:rotate(-8deg); }
.evidence-icon .icon { stroke-width:2; }
.evidence-heading h3 { color:#3b5b66; font-size:25px; }
.evidence-heading .eyebrow { color:#a2b4ac; letter-spacing:1.7px; }
.evidence-progress { border:1px solid #c5e1cd; border-radius:8px; padding:5px 8px; color:#7ea48b; background:#eff6e9; }
.clue-title { color:#94a493; }
.clue-title>span { color:#a4b3a5; }
.clue { padding:15px 14px; gap:12px; min-height:79px; margin:12px 0; border:2px solid #e4e9dd; border-radius:17px; background:#fdfdf5; color:#687a76; box-shadow:0 3px 0 #eff0e3; font-size:14px; line-height:1.7; }
.clue>b { min-width:29px; min-height:32px; border:1px solid #efd08a; border-radius:10px; color:#b7984e; background:linear-gradient(#fff0c3,#ffe2a1); box-shadow:0 2px 0 #eedca4; }
.clue::after { width:15px; height:15px; border:2px solid #dce7db; border-radius:6px; right:13px; background:#fff; }
.clue>span { padding-right:18px; }
.clue.checked { border-color:#c7dfcb; background:#eff7e9; box-shadow:0 3px 0 #e0ecd9; }
.clue.checked>b { background:#d8ebd5; border-color:#b4d3b5; color:#85a27c; }
.clue.checked::after { line-height:12px; font-size:12px; background:#82bc93; border-color:#6ea780; }
.clue.focus { border-color:#e5be67; background:#fffae8; box-shadow:0 0 0 3px #ffe8a3aa; }
.case-guide { border-color:#dce5d8; }
.case-guide summary { color:#a4ab8c; }
.hint { background:#edf8e9; color:#6d9176; border:2px solid #cfe2c8; border-radius:14px; }
.actions { margin-top:21px; gap:10px; }
.actions button { min-height:53px; border-radius:15px; font-size:14px; }
.actions #hintBtn { background:linear-gradient(#fbfff2,#edf6e4); border:2px solid #cbdcba; color:#87a06a; box-shadow:0 3px 0 #d7e2ca; min-width:128px; }
.actions #hintBtn small { color:#82a067; background:#e6efdc; }
.actions .primary { background:linear-gradient(#ffe7a4,#ffd479); border:2px solid #e8bc60; color:#8c6a3c; font-size:20px; box-shadow:0 4px 0 #c9a35b,inset 0 2px 0 #fff4c2; }
.actions .primary:not(:disabled):hover { background:linear-gradient(#fff0bd,#ffdb84); }
.actions .primary:disabled { background:linear-gradient(#ecf0e2,#e2e8d7); border:2px solid #d6dec9; color:#a5b09b; box-shadow:0 3px 0 #d4ddc6; font-size:18px; }
.actions button:active:not(:disabled) { transform:translateY(3px); box-shadow:none; }
.reward { border-color:#cfddbf; color:#95a17c; background:#f4f8e8; border-radius:13px; }
.message { color:#b38f53; }
footer { border-color:#e0e7d9; color:#a5b09e; }
/* Collectibles and dialogs use the same toy-like surfaces. */
dialog { border:3px solid #cadaC7; border-radius:27px; background:#fffdf4; box-shadow:0 12px 0 #203d5120,0 30px 80px #203d5150; }
dialog::backdrop { background:#143448b8; }
dialog h2,dialog h3 { color:#46656b; }
dialog button { border:2px solid #e2b963; background:linear-gradient(#ffe9ac,#ffda83); color:#927142; border-radius:14px; }
dialog #modalButton { background:linear-gradient(#ffeaad,#ffda83); border-color:#e2bc6a; box-shadow:0 4px 0 #c8a75f; color:#8d6b3f; font-size:21px; }
dialog .share { background:#eff7e9; border-color:#d6e3cc; color:#8a9e7b; }
.stars { color:#e8bc5f; filter:drop-shadow(0 3px 0 #f4e3ad); }
.shelf-item { border-radius:16px; border-width:2px; }
.shelf-item.gold { background:linear-gradient(#fff8d7,#ffedb3); box-shadow:0 3px 0 #ead8a0; }
.note-card { border:2px solid #ebddba; border-radius:17px; }
.gain { border:1px solid #edda9e; background:#fff4d6; color:#b19355; }
@media(min-width:701px) {
  .with-items .room { min-height:112px; }
  .panel { position:sticky; top:20px; }
}
@media(max-width:700px) {
  .header-inner { padding:10px 15px; }
  .brand { font-size:23px; gap:9px; }
  .brand-icon { width:43px; height:43px; border-radius:13px; }
  .brand small { font-size:8px; letter-spacing:.6px; }
  .header-actions { gap:6px; }
  .records,.help { height:33px; border-radius:11px; box-shadow:0 2px 0 #dce7e6; }
  .records { padding:0 8px; font-size:10px; }
  .help { width:31px; }
  main { padding:17px 14px calc(105px + max(env(safe-area-inset-bottom,0px),var(--sa-bottom,0px))); }
  .intro { margin-bottom:14px; gap:10px; }
  .intro h1 { font-size:25px; line-height:1.25; }
  .stat { min-width:98px; padding:8px 9px; border-radius:13px; }
  .stat-copy { font-size:8px; gap:4px; }
  .stat-numbers strong { font-size:21px; }
  .progress-track { height:5px; }
  .habit-drawer { margin-bottom:14px; border-radius:13px; }
  .habit-drawer>summary { padding:8px 11px; min-height:51px; gap:8px; }
  .habit-summary-icon { width:30px; height:30px; border-radius:10px; font-size:17px; }
  .habit-drawer summary b { font-size:15px; }
  .habit-drawer summary small { font-size:9px; }
  .drawer-arrow { width:23px; height:23px; font-size:18px; border-radius:8px; }
  .habit-drawer .habit { margin:0 7px 8px; }
  .tabs { gap:8px; margin-bottom:14px; padding-bottom:13px; }
  .mode-tabs { border-radius:13px; padding:3px; gap:3px; }
  .mode-tabs button { font-size:11px; padding:7px 11px; border-radius:9px; }
  .case-picker select { font-size:10px; max-width:145px; padding:8px 17px 8px 8px; border-radius:10px; }
  .case-heading { margin-bottom:13px; }
  .case-heading h2#title { font-size:25px; margin-top:7px; }
  .case-top { font-size:9px; }
  .badge { font-size:8px; padding:2px 5px; }
  .timer-pill { padding:5px 7px; border-radius:10px; font-size:11px; }
  .layout { gap:20px; }
  .scene { padding:10px 11px 12px; border-radius:20px; box-shadow:0 5px 0 #17354b; }
  .scene-top { height:20px; font-size:9px; }
  .scene::after { right:49px; top:27px; font-size:13px; }
  .moon { width:21px; height:21px; }
  .apartment { margin-top:10px; }
  .roof { font-size:17px; padding:10px 7px 8px; border-width:2px; border-bottom:0; border-radius:13px 13px 0 0; }
  .roof-lights { font-size:5px; }
  .building { padding:9px 7px 1px; border-width:6px; border-top-width:7px; border-bottom:0; }
  .floor { grid-template-columns:14px repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:9px; }
  .floor-label { font-size:8px; }
  .room { min-height:74px; border-width:2px; border-radius:10px; padding:4px 2px 4px; }
  .num { font-size:10px; }
  .person { width:43px; height:40px; }
  .person img { width:43px; height:47px; }
  .tag { font-size:8px; }
  .room.witness .tag { font-size:7px; }
  .with-items .room { min-height:88px; }
  .item { font-size:9px; }
  .ground { height:10px; }
  .scene-bottom { margin-top:12px; gap:16px; font-size:9px; }
  .toolbar { padding:4px; margin-top:13px; border-radius:13px; }
  .toolbar button { font-size:11px; min-height:35px; border-radius:9px; gap:4px; }
  .instruction { font-size:10px; margin-top:9px; }
  .panel { padding:18px 16px 15px; border-radius:20px; position:relative; }
  .panel::before { left:22px; width:41px; height:8px; }
  .evidence-heading { margin-bottom:15px; }
  .evidence-heading h3 { font-size:23px; }
  .evidence-icon { width:38px; height:38px; border-radius:12px; }
  .evidence-progress { font-size:9px; padding:4px 7px; }
  .clue-title { font-size:9px; }
  .clue { min-height:104px; padding:15px 12px; border-radius:15px; font-size:14px; margin:11px 0; gap:10px; }
  .clue>b { min-width:28px; min-height:31px; border-radius:9px; }
  .clue::after { right:12px; width:14px; height:14px; }
  .clue-pager { margin-top:10px; }
  .clue-pager button { border:2px solid #dce7d6; border-radius:10px; color:#91a77d; background:#f7fbef; padding:7px 13px; }
  .actions { padding:10px 14px calc(11px + max(env(safe-area-inset-bottom,0px),var(--sa-bottom,0px))); gap:9px; background:#fbfcf4f5; border-top:2px solid #dce7d9; box-shadow:0 -5px 20px #243b5108; }
  .actions button { min-height:49px; border-radius:13px; }
  .actions #hintBtn { min-width:116px; font-size:12px; }
  .actions .primary { font-size:19px; }
  .actions .primary:disabled { font-size:17px; }
  footer { font-size:8px; }
  dialog { padding:28px 22px; border-radius:23px; }
}
@media(max-width:359px) {
  .header-inner { padding-left:12px; padding-right:12px; }
  .brand { font-size:20px; gap:7px; }
  .brand-icon { width:38px; height:38px; border-radius:12px; }
  .records { width:31px; padding:0; }
  .records span { display:none; }
  .intro h1 { font-size:22px; }
  .stat { min-width:88px; }
  .mode-tabs button { font-size:10px; padding:7px 8px; }
  .case-picker select { max-width:129px; }
  .floor { gap:5px; }
  .scene { padding-left:9px; padding-right:9px; }
  .person { width:38px; }
  .person img { width:40px; }
  .case-heading h2#title { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; }
}
/* Clear game text over soft materials; compact windows on phones. */
.clue{color:#3e5a64}.num{color:#79572f}.tag{color:#8a693d}.item{color:#765b36}
.room.witness .tag{background:#397e6c;border-color:#2c6f5d}.room.excluded .num,.room.excluded .tag{color:#34545d}.room.excluded .person{color:#3c6474}
.help.sound{display:grid;place-items:center}.help.sound .icon{width:17px;height:17px;stroke-width:2}
.habit-summary-icon .icon{width:21px;height:21px;fill:#5ba98e;stroke:none}
@media(max-width:700px){.intro h1{font-size:23px}.stat .rank-title{font-size:9px;margin-top:4px}.habit-drawer>summary{min-height:48px;padding-top:6px;padding-bottom:6px}.room{min-height:66px;padding-top:3px;padding-bottom:3px}.person{height:34px}.person img{height:43px;width:42px}.with-items .room{min-height:80px}.roof{padding-top:8px;padding-bottom:7px}.floor{margin-bottom:8px}.scene-bottom{margin-top:10px}}
@media(max-width:359px){.intro h1{font-size:21px}.person img{width:39px}.stat .rank-title{font-size:8px}}