/* The story's mystery screen (src/story-mystery.js). Every rule sits under .mystery-screen, so none
   of it reaches the game; the game's own global rules (svg, select, h1, .monk-badge) are reset here
   where they would reach in. Colours and type follow the candlelit look, with its values as
   fallbacks so the screen still reads without that look. */
.mystery-screen {
  --m-ground:var(--lk-ground, #121815); --m-surface:var(--lk-surface, #1d2521); --m-raised:var(--lk-raised, #28322c);
  --m-line:var(--lk-line, #33403a); --m-line-strong:var(--lk-line-strong, #4d5c50);
  --m-text:var(--lk-text, #f1e9d8); --m-text-2:var(--lk-text-2, #cfcdb9); --m-text-3:var(--lk-text-3, #b3b4a2);
  --m-gold:var(--lk-gold, #deba7a); --m-gold-bright:var(--lk-gold-bright, #f0d496); --m-sage:var(--lk-sage, #a9c29a);
  --m-serif:var(--lk-serif, 'Alegreya', Georgia, serif); --m-sans:var(--lk-sans, 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif);
  /* The scenes' paint, under the names their SVG uses. */
  --wall:#2a2f2b; --wall2:#343a35; --floor:#1f1a15; --wood:#5a4330; --wood2:#6e5238; --stone:#4b524d;
  --ink:#b8433a; --flame:#f6d98f; --gold:var(--m-gold);
  /* Above every card, banner and cutscene in the game (the highest is 40). */
  position:fixed; inset:0; z-index:50; isolation:isolate;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:var(--m-ground); color:var(--m-text);
  font:400 16px/1.45 var(--m-sans); font-feature-settings:'lnum' 1; text-align:left;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  animation:mys-in .2s ease-out;
}
div.mystery-screen:focus, div.mystery-screen:focus-visible { outline:none; }
.mystery-screen, .mystery-screen * { box-sizing:border-box; }
.mystery-screen [hidden] { display:none !important; }
.mystery-screen :is(h1, h2, h3, p, ul) { margin:0; }
.mystery-screen :is(h1, h2, h3) { font-family:var(--m-serif); font-weight:600; letter-spacing:0; text-wrap:balance; }
.mystery-screen p { text-wrap:pretty; }
.mystery-screen button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.mystery-screen button:focus-visible { outline:2px solid var(--m-gold-bright); outline-offset:3px; }

.mystery-screen .mys-app {
  max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:16px;
  padding:0 max(16px, env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

/* The bar stays at the top: the three tabs and the way out are always in reach. */
.mystery-screen .mys-bar {
  position:sticky; top:0; z-index:2; display:flex; gap:8px; align-items:center;
  margin:0 -4px; padding:calc(env(safe-area-inset-top, 0px) + 10px) 4px 10px;
  background:var(--m-ground); box-shadow:0 10px 12px -10px #000000b3;
}
.mystery-screen .mys-tabs { flex:1; min-width:0; display:flex; gap:4px; padding:4px; border:1px solid var(--m-line); border-radius:14px; background:#141a17; }
.mystery-screen .mys-tabs button {
  flex:1 1 0; min-width:0; min-height:44px; padding:6px 4px; border:0; border-radius:10px; background:none;
  font:500 16px/1.1 var(--m-sans); color:var(--m-text-2);
}
.mystery-screen .mys-tabs button[aria-selected="true"] { background:var(--m-raised); color:var(--m-gold-bright); box-shadow:inset 0 1px 0 #ffffff12, 0 2px 8px #0000004d; }
.mystery-screen .mys-close {
  flex:none; width:48px; height:48px; display:grid; place-items:center; padding:0 0 3px;
  border:1px solid var(--m-line); border-radius:14px; background:#141a17; color:var(--m-text-2); font:400 30px/1 var(--m-sans);
}

.mystery-screen .mys-head { display:flex; flex-direction:column; gap:8px; }
.mystery-screen .mys-kicker { font:600 13px/1.3 var(--m-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--m-gold); }
.mystery-screen h1 { font-size:30px; line-height:1.1; color:var(--m-gold-bright); }
.mystery-screen .mys-intro { font:400 18px/1.5 var(--m-serif); color:var(--m-text); }
.mystery-screen .mys-meter { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:15px; color:var(--m-text-3); }
.mystery-screen .mys-meter b { font:700 16px var(--m-serif); color:var(--m-text); font-variant-numeric:tabular-nums lining-nums; }
.mystery-screen .mys-panel { display:flex; flex-direction:column; gap:12px; }
.mystery-screen .mys-hint { font-size:15px; line-height:1.45; color:var(--m-text-2); }

/* Rooms */
.mystery-screen .mys-rooms { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.mystery-screen .mys-rooms.four { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.mystery-screen .mys-room {
  min-height:58px; padding:8px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:1px solid var(--m-line); border-radius:12px; background:var(--m-surface); color:var(--m-text);
}
.mystery-screen .mys-room[aria-pressed="true"] { border-color:var(--m-gold); background:#2c2b20; box-shadow:0 0 0 1px var(--m-gold) inset; }
.mystery-screen .mys-room strong { font:600 16px/1.15 var(--m-serif); overflow-wrap:anywhere; }
.mystery-screen .mys-room small { font:500 14px/1.2 var(--m-serif); color:var(--m-text-3); font-variant-numeric:tabular-nums lining-nums; }
.mystery-screen .mys-room.done small { color:var(--m-sage); }

/* The scene. The game draws every svg as a 22px outlined icon, so the scene undoes that. */
.mystery-screen svg.mys-scene {
  display:block; width:100%; height:auto; aspect-ratio:360 / 200;
  fill:#000; stroke:none; stroke-width:1; stroke-linecap:butt; stroke-linejoin:miter;
  border:1px solid var(--m-line); border-radius:12px; background:var(--wall);
}
.mystery-screen .spot { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.mystery-screen .spot .hit { fill:transparent; }
.mystery-screen .spot .mark { fill:var(--flame); transform-box:fill-box; transform-origin:center; animation:mys-pulse 1.8s ease-in-out infinite; }
.mystery-screen .spot.found .mark { fill:var(--m-sage); opacity:.8; animation:none; }
.mystery-screen .spot:focus, .mystery-screen .spot:focus-visible { outline:none; }
.mystery-screen .spot:focus-visible .hit { stroke:var(--flame); stroke-width:2; }

/* Clues */
.mystery-screen .mys-log { display:flex; flex-direction:column; gap:10px; }
.mystery-screen .mys-clue {
  display:flex; flex-direction:column; gap:8px; padding:12px 14px; scroll-margin:calc(env(safe-area-inset-top, 0px) + 84px) 0 16px;
  border:1px solid var(--m-line); border-left:3px solid var(--m-gold); border-radius:12px; background:var(--m-raised);
  animation:mys-appear .35s ease-out;
}
.mystery-screen .mys-clue h3 { font:700 18px/1.25 var(--m-serif); color:var(--flame); }
.mystery-screen .mys-clue p { font:400 17px/1.5 var(--m-serif); color:var(--m-text); }
.mystery-screen .mys-clue .mys-said { font-style:italic; }
.mystery-screen .mys-words { display:flex; flex-wrap:wrap; gap:6px; }
.mystery-screen .mys-word { font:700 14px/1 var(--m-sans); padding:7px 10px; border-radius:999px; background:#2c261a; border:1px solid #6b5a2e; color:var(--flame); }
.mystery-screen .mys-word.t-brother { background:#1e2733; border-color:#3f5a78; color:#bcd3ee; }
.mystery-screen .mys-word.t-room { background:#222b20; border-color:#4b6541; color:#c8e0b8; }
.mystery-screen .mys-word.t-time { background:#2a2033; border-color:#5d4675; color:#dac8ee; }
.mystery-screen .mys-word.t-reason { background:#33221f; border-color:#7a4a40; color:#f0c9bf; }
.mystery-screen .mys-word.t-person { background:#1e2733; border-color:#3f5a78; color:#bcd3ee; }
.mystery-screen .mys-word.t-way { background:#2a2033; border-color:#5d4675; color:#dac8ee; }
.mystery-screen .mys-word.t-teaching { background:#33221f; border-color:#7a4a40; color:#f0c9bf; }
.mystery-screen .mys-word.t-route { background:#1f2b2b; border-color:#46706c; color:#c2e3df; }

/* Brothers */
.mystery-screen .mys-cast { gap:10px; }
.mystery-screen .mys-brother {
  display:grid; grid-template-columns:56px minmax(0, 1fr); gap:12px; align-items:start; padding:12px;
  border:1px solid var(--m-line); border-radius:14px; background:var(--m-surface);
}
.mystery-screen .mys-brother .monk-badge { display:block; width:56px; height:61px; fill:none; stroke:none; }
.mystery-screen .mys-brother h3 { font-size:19px; line-height:1.2; color:var(--m-text); }
.mystery-screen .mys-role { font-size:15px; color:var(--m-gold); }
/* What was known before stays quiet; what the clues have told you stands out in gold. */
.mystery-screen .mys-brother ul { margin-top:6px; padding-left:1.1em; display:flex; flex-direction:column; gap:4px; font-size:15px; line-height:1.4; color:var(--m-text-3); }
.mystery-screen .mys-brother li::marker { color:var(--m-line-strong); }
.mystery-screen .mys-brother li.new { color:var(--m-text); }
.mystery-screen .mys-brother li.new::marker { color:var(--m-gold); }

/* The chronicle, on parchment */
.mystery-screen .mys-page {
  padding:18px 16px; scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 84px); border-radius:8px; background:#e9dfc4; color:#2a211a;
  font:500 19px/2.4 var(--m-serif); box-shadow:0 0 0 1px #b9a77f inset, 0 8px 30px #00000059;
}
.mystery-screen .mys-page::first-letter { float:left; margin:6px 8px 0 0; font:700 76px/1 var(--m-serif); color:var(--ink); }
/* A true two-line initial where the browser can set one (Safari and Chrome); the float above elsewhere. */
@supports (initial-letter:2) or (-webkit-initial-letter:2) {
  .mystery-screen .mys-page::first-letter { float:none; margin:0 .1em 0 0; font:700 1em var(--m-serif); -webkit-initial-letter:2; initial-letter:2; }
}
.mystery-screen .mys-blank { white-space:nowrap; }
/* The game makes every select a full-width block; a blank sits in the line of the sentence. */
.mystery-screen .mys-page select {
  display:inline-block; width:auto; max-width:100%; min-height:44px; margin:0; vertical-align:baseline;
  padding:8px 30px 8px 10px; border:1px solid #9d8a62; border-bottom:2px solid #6b5a3a; border-radius:8px;
  font:700 16px/1.2 var(--m-sans); color:#2a211a; text-overflow:ellipsis;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background:#f6efdb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236b5a3a' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center / 12px 8px;
}
.mystery-screen .mys-page select:focus-visible { outline:2px solid #6b3a1a; outline-offset:2px; }
.mystery-screen .mys-filled { display:inline-block; padding:4px 9px; line-height:1.3; border:1px solid #4f7a3c; border-radius:8px; background:#e1ecd2; font:700 16px/1.3 var(--m-sans); color:#23331b; }

.mystery-screen .mys-primary {
  width:100%; min-height:52px; padding:14px 20px; border:0; border-radius:12px;
  font:600 17px/1.2 var(--m-sans); color:#1a1e16;
  background:linear-gradient(#e8c98c, #d5b06f); box-shadow:inset 0 1px 0 #fff4d266, 0 6px 18px #d9b16624;
}
.mystery-screen .mys-verdict { font:400 17px/1.5 var(--m-serif); color:var(--m-text); }
.mystery-screen .mys-ending {
  display:flex; flex-direction:column; gap:12px; padding:18px 16px; scroll-margin:calc(env(safe-area-inset-top, 0px) + 84px) 0 16px;
  border:1px solid var(--m-gold); border-radius:14px; background:var(--m-raised); box-shadow:0 0 30px #d9b56a1f;
}
.mystery-screen .mys-ending h2 { font-size:24px; line-height:1.15; color:var(--m-gold-bright); }
.mystery-screen .mys-ending p { font:400 17px/1.5 var(--m-serif); color:var(--m-text); }
.mystery-screen .mys-ending .mys-hint { font:400 15px/1.45 var(--m-sans); color:var(--m-text-2); }
.mystery-screen .mys-ending .mys-primary { margin-top:4px; }

.mystery-screen .mys-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

@keyframes mys-in { from { opacity:0; } }
@keyframes mys-pulse { 0%, 100% { opacity:.35; transform:scale(.8); } 50% { opacity:1; transform:scale(1.2); } }
@keyframes mys-appear { from { opacity:0; transform:translateY(4px); } }
@media (prefers-reduced-motion:reduce) {
  .mystery-screen, .mystery-screen * { animation:none !important; }
  .mystery-screen .spot .mark { opacity:.9; }
}
/* The narrowest phones take two rooms to a row, so every name fits on one line. */
@media (max-width:359px) { .mystery-screen .mys-rooms { grid-template-columns:repeat(2, minmax(0, 1fr)); } }