:root {
  --background:#0b1021;
  --surface:#151d33;
  --surface-raised:#1d2841;
  --surface-deep:#0f172b;
  --text:#f7f8fc;
  --muted:#a6b3cc;
  --line:#2b3650;
  --coral:#ff7959;
  --violet:#8b7dff;
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color-scheme:dark;
  font-family:var(--font);
  font-synthesis:none;
  color:var(--text);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body { margin:0; background:radial-gradient(ellipse at 72% 0,#27213f 0,transparent 38%),var(--background); }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,a,select { touch-action:manipulation; }
button { color:inherit; cursor:pointer; }
button:disabled { cursor:default; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #b7aaff;
  outline-offset:4px;
}
::selection { color:white; background:#6552a1; }
img { display:block; max-width:100%; height:auto; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-100px; inset-inline-start:20px; z-index:30; padding:14px 20px; border-radius:12px; color:#21151a; background:var(--coral); font-weight:700; }
.skip-link:focus { top:12px; }
.game-header {
  width:min(1180px,calc(100% - 64px));
  min-height:82px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
}
.wordmark { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.wordmark img { border-radius:11px; box-shadow:0 4px 18px #0003; }
.wordmark span { font-size:9px; line-height:1.4; letter-spacing:1.8px; font-weight:600; }
.wordmark b { font-size:12px; font-weight:800; letter-spacing:1px; }
.map-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:40px;
  padding:9px 15px;
  border:1px solid #3c4363;
  border-radius:12px;
  background:#1a223a;
  font-size:12px;
  line-height:1.4;
  font-weight:650;
  transition:background .15s,border-color .15s;
}
.map-button:hover { background:#262d4a; border-color:var(--violet); }
.map-dots { display:flex; gap:4px; align-items:center; }
.map-dots>* { display:block; width:6px; height:6px; border-radius:50%; background:#4d5773; }
.map-dots>.complete,.map-dots>.solved,.map-dots>[data-solved=true] { background:var(--coral); box-shadow:0 0 7px #ff795930; }
#header-progress { white-space:nowrap; }
#header-progress, #clue-position { direction:ltr; unicode-bidi:isolate; }
.language-picker { display:block; min-width:0; }
.language-picker select { max-width:148px; min-height:40px; padding:9px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:#d8e0f0; font-size:12px; line-height:1.4; font-weight:550; }
.game-shell { width:min(1180px,calc(100% - 64px)); margin:0 auto; padding-top:30px; }
.game-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; min-height:153px; }
.game-heading>div { min-width:0; max-width:830px; }
.eyebrow { margin:0; color:#b9aaff; font-size:10px; line-height:1.6; font-weight:750; letter-spacing:1.6px; text-transform:uppercase; }
.game-heading h1 { margin:9px 0 10px; font-size:42px; line-height:1.12; font-weight:800; letter-spacing:-1.6px; text-wrap:balance; }
.game-heading>div>p:last-child { max-width:750px; margin:0; color:var(--muted); font-size:14px; line-height:1.75; }
.time-badge { flex-shrink:0; margin-bottom:4px; padding:8px 12px; border:1px solid #35415d; border-radius:10px; color:#c9d3e7; background:var(--surface); font-size:11px; line-height:1.3; white-space:nowrap; }
.game-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(330px,.86fr); gap:26px; align-items:start; }
.scene-panel { min-width:0; overflow:hidden; border:1px solid #3d4565; border-radius:18px; background:var(--surface); box-shadow:0 20px 60px #0005,0 0 40px #8b7dff07; }
.scene-frame { position:relative; isolation:isolate; background:#13162c; }
.scene-frame>img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.scene-badge { position:absolute; z-index:2; top:15px; inset-inline-start:15px; max-width:calc(100% - 88px); padding:7px 10px; border:1px solid #9f8fd940; border-radius:9px; color:#ece7ff; background:#10152bbf; backdrop-filter:blur(9px); font-size:10px; line-height:1.5; font-weight:650; letter-spacing:.3px; overflow-wrap:anywhere; }
.enlarge { position:absolute; z-index:3; top:13px; inset-inline-end:13px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #a2acd84d; border-radius:12px; color:#fff; background:#111830cc; font-size:25px; line-height:1; backdrop-filter:blur(8px); box-shadow:0 3px 12px #0003; }
.enlarge:hover { background:#3f386acc; border-color:#c1adff; }
#scene-hotspots { position:absolute; z-index:2; inset:0; direction:ltr; pointer-events:none; }
#scene-hotspots button {
  position:absolute;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  border:2px solid #ebe5ffcc;
  border-radius:50%;
  color:white;
  background:#151a35a6;
  font-size:13px;
  line-height:1;
  font-weight:800;
  box-shadow:0 0 0 5px #18132b30,0 4px 15px #0006;
  backdrop-filter:blur(3px);
  transition:background .16s,border-color .16s,box-shadow .16s;
}
#scene-hotspots button:hover { border-color:#e4daff; background:#6653cbd9; box-shadow:0 0 0 7px #8b7dff38,0 4px 15px #0005; }
#scene-hotspots button[aria-pressed=true],#scene-hotspots button.active,.scene-hotspot.is-active {
  border-color:#d6caff;
  background:#8062e9e8;
  box-shadow:0 0 0 8px #8b7dff35,0 0 23px #ad8dff66;
}
#scene-hotspots button.seen:not([aria-pressed=true]),#scene-hotspots button[data-read=true]:not([aria-pressed=true]) { border-color:#baa4ff; }
.solved-stamp { position:absolute; z-index:4; bottom:20px; inset-inline-end:20px; display:grid; place-items:center; width:62px; height:62px; border:2px solid #bcb0ff; border-radius:50%; color:#fff; background:#6a54c4eb; box-shadow:0 0 0 7px #8b7dff29,0 6px 26px #0004; font-size:32px; }
#scene-message {
  position:absolute;
  z-index:1;
  inset-inline:12px;
  bottom:12px;
  padding:10px 12px;
  border:1px solid #a6b3cc35;
  border-radius:12px;
  color:#fff;
  background:#0c1227d9;
  backdrop-filter:blur(9px);
  box-shadow:0 5px 20px #0003;
  font-size:13px;
  line-height:1.5;
  pointer-events:none;
}
#scene-message:empty { display:none; }
.scene-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:56px; padding:15px 18px; border-top:1px solid #313b55; color:#b9c6dc; background:#171f35; font-size:11px; line-height:1.6; }
.scene-footer>span:first-child { min-width:0; }
.clue-progress { display:flex; gap:5px; flex-shrink:0; }
.clue-progress>* { display:block; width:7px; height:7px; border:1px solid #8490ae; border-radius:50%; background:transparent; }
.clue-progress>.found,.clue-progress>.seen,.clue-progress>.active,.clue-progress>.complete,.clue-progress>[data-read=true] { background:var(--violet); border-color:#b9aaff; }
.play-panel { min-width:0; padding:24px; border:1px solid #353c59; border-radius:18px; background:linear-gradient(140deg,#1b213b,var(--surface) 62%); box-shadow:0 16px 45px #0002,inset 0 1px 0 #ffffff05; scroll-margin-top:20px; }
.rule-banner { display:flex; align-items:flex-start; gap:9px; margin-bottom:24px; padding:12px 13px; border:1px solid #ff79592b; border-radius:11px; background:#ff795909; }
.rule-banner>span { flex-shrink:0; margin-top:1px; color:var(--coral); font-size:15px; }
.rule-banner p { margin:0; color:#e0d5d7; font-size:12px; line-height:1.65; }
.clue-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:13px; }
.clue-heading h2,#choice-panel h2 { margin:0; font-size:14px; line-height:1.4; font-weight:700; letter-spacing:-.2px; }
#clue-position { flex-shrink:0; color:#a596df; font-size:11px; line-height:1.4; font-variant-numeric:tabular-nums; }
.clue-selector { display:flex; gap:7px; margin-bottom:12px; }
.clue-selector button { flex:1 1 0; min-width:0; min-height:41px; padding:8px 6px; border:1px solid #3d4562; border-radius:10px; color:#bfcbe2; background:#222b46; font-size:12px; line-height:1.3; font-weight:700; overflow-wrap:anywhere; transition:background .15s,border-color .15s; }
.clue-selector button:hover { color:white; border-color:var(--violet); }
.clue-selector button[aria-pressed=true],.clue-selector button.active { color:white; border-color:#ad9aff; background:#7059cb; box-shadow:0 3px 10px #0002; }
.clue-selector button.seen:not([aria-pressed=true]) { border-color:#8573bc; }
.clue-card { min-width:0; padding:17px 17px 13px; border:1px solid #454061; border-radius:12px; background:linear-gradient(125deg,#8b7dff12,#20273e 80%); }
.clue-label { color:#bdb0ff; font-size:10px; line-height:1.5; font-weight:750; letter-spacing:.8px; text-transform:uppercase; }
#clue-detail { min-height:44px; margin:9px 0 0; color:#e1e6f5; font-size:14px; line-height:1.75; }
.clue-arrows { display:flex; justify-content:flex-end; gap:8px; margin-top:13px; }
.clue-arrows button { display:grid; place-items:center; width:36px; height:34px; padding:0; border:1px solid #46506c; border-radius:9px; color:#d0d8ed; background:#252d48; font-size:20px; line-height:1; }
.clue-arrows button:hover { color:white; background:#3c365c; border-color:#9d87dc; }
.clue-arrows button:disabled { color:#626b88; background:#1c243c; border-color:#303951; }
#choice-panel { margin-top:25px; }
#choice-panel h2 { margin-bottom:12px; }
.answer-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.answer-button,.answer-options>button { min-width:0; min-height:76px; padding:12px 7px; border:1px solid #424b67; border-radius:11px; color:#cbd5e9; background:#222c47; font-size:11px; line-height:1.45; text-align:center; overflow-wrap:anywhere; box-shadow:inset 0 1px 0 #ffffff06; transition:background .15s,border-color .15s; }
.answer-letter { display:block; margin-bottom:7px; color:var(--text); font-size:23px; line-height:1; font-weight:800; }
.answer-button:hover:not(:disabled),.answer-options>button:hover:not(:disabled) { color:white; background:#343253; border-color:#af9dff; }
.answer-button[aria-pressed=true],.answer-options>button[aria-pressed=true],.answer-options>button.selected { color:#f9f6ff; background:#544384; border-color:#b8a2ff; box-shadow:0 0 0 1px #b8a2ff35,inset 0 1px 0 #ffffff0c; }
.answer-button[aria-pressed=true] .answer-letter { color:white; }
.answer-button.wrong,.answer-options>button.wrong { color:#ffe1d9; background:#4a2b3a; border-color:var(--coral); }
.button { display:inline-flex; justify-content:center; align-items:center; gap:15px; min-height:50px; max-width:100%; padding:13px 19px; border:1px solid transparent; border-radius:12px; font-size:13px; line-height:1.45; font-weight:750; text-align:center; transition:background .16s,border-color .16s,box-shadow .16s,transform .16s; }
.button span:first-child { min-width:0; overflow-wrap:anywhere; }
.button span[aria-hidden] { font-size:20px; line-height:1; }
.button.primary { color:#25161c; background:linear-gradient(180deg,#ff9476,#ff7959); border-color:#ffa083; box-shadow:0 5px 22px #ff795920,inset 0 1px 0 #ffe0d52b; }
.button.primary:hover { background:linear-gradient(180deg,#ffa285,#ff8b6c); box-shadow:0 7px 25px #ff79592e; transform:translateY(-1px); }
.button.primary:active { transform:translateY(0); }
.button.primary:disabled { color:#8793af; background:#28324c; border-color:#3b4561; box-shadow:inset 0 1px 0 #ffffff04; transform:none; }
.button.secondary { color:#e4e9f6; background:#242d47; border-color:#46516e; }
.button.secondary:hover { color:white; background:#343553; border-color:#9986cf; }
.button.full { width:100%; }
#submit-choice { margin-top:13px; }
.feedback { min-height:0; margin:0; color:#ffc0ab; font-size:12px; line-height:1.75; }
.feedback:not(:empty) { margin-top:14px; padding:10px 12px; border-inline-start:2px solid var(--coral); border-radius:0 8px 8px 0; background:#ff79590c; }
.hint-button { display:inline-flex; align-items:center; gap:7px; min-height:44px; margin-top:9px; padding:9px 0; border:0; color:#b2bfd7; background:transparent; font-size:11px; line-height:1.5; font-weight:550; }
.hint-button>span[aria-hidden] { color:#b7a8f6; font-size:18px; }
.hint-button:hover { color:white; }
.hint-copy { margin:2px 0 0; padding:13px 14px; border:1px solid #594d7c; border-radius:10px; color:#ddd4ff; background:#8b7dff10; font-size:12px; line-height:1.75; }
#code-form { margin-top:22px; }
#code-form label { display:block; margin-bottom:11px; color:#bdc8dd; font-size:12px; line-height:1.6; }
#code-input { width:100%; min-height:58px; padding:10px 12px; border:1px solid #615977; border-radius:12px; color:white; background:#10172a; font-size:28px; line-height:1.2; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:15px; text-align:center; box-shadow:inset 0 3px 10px #0003; }
#code-input::placeholder { color:#68718d; opacity:1; }
#code-input[aria-invalid=true] { background:#302034; border-color:var(--coral); }
.keypad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:13px 0; direction:ltr; }
.keypad button { min-width:0; min-height:44px; padding:8px; border:1px solid #3b4561; border-radius:10px; color:#e5e9f5; background:#242d47; font-size:17px; line-height:1.3; font-weight:600; box-shadow:0 3px 0 #0c1224; transition:background .1s,transform .1s; }
.keypad button:hover { border-color:#9380d3; background:#353353; }
.keypad button:active { transform:translateY(2px); box-shadow:0 1px 0 #0c1224; }
.keypad button:disabled { color:#68728d; background:#202940; border-color:#313b54; box-shadow:none; }
.keypad button[data-digit="back"],.keypad button[data-key="clear"],.keypad button[data-key="backspace"] { color:#b5a4e6; font-size:13px; }
#result-panel { padding:8px 0 0; text-align:center; }
.result-symbol { display:grid; place-items:center; width:70px; height:70px; margin:0 auto 20px; border:1px solid #bba8ff; border-radius:22px; color:white; background:linear-gradient(145deg,#9a78f7,#624bb7); box-shadow:0 0 0 7px #8b7dff12,0 7px 30px #805eff2e; font-size:37px; line-height:1; }
#result-panel>.eyebrow { color:#bfb0ff; }
#result-panel>h2 { margin:9px 0 13px; font-size:29px; line-height:1.2; font-weight:800; letter-spacing:-.8px; text-wrap:balance; }
#result-summary.code-result { margin-block:14px; color:#d7caff; font-size:40px; line-height:1.3; letter-spacing:12px; font-weight:800; font-variant-numeric:tabular-nums; }
#result-summary { margin:0; color:#d2daec; font-size:14px; line-height:1.8; }
.text-button { min-height:40px; padding:9px 0; border:0; color:#adbcd6; background:transparent; font-size:11px; line-height:1.6; font-weight:550; text-decoration:underline; text-decoration-color:#586681; text-underline-offset:4px; }
.text-button:hover { color:white; text-decoration-color:var(--coral); }
#solution-toggle { margin:10px auto 3px; color:#c5b8f7; }
#explanation { margin:10px 0 19px; padding:17px 0 0; padding-inline-start:20px; border-top:1px solid #3c3b5b; color:#c0cde2; font-size:12px; line-height:1.85; text-align:start; }
#explanation li { padding-inline-start:5px; margin-bottom:8px; }
#explanation li::marker { color:#c1b0ff; font-weight:750; }
#next-case { margin-top:19px; }
#share-case { margin-top:11px; }
#replay-case { margin-top:7px; }
.game-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:18px; color:#8e9eba; font-size:11px; line-height:1.65; }
.local-progress { display:flex; align-items:flex-start; gap:7px; }
.local-progress>span[aria-hidden] { color:#9d89d5; }
.game-bottom .text-button { flex-shrink:0; color:#bdc4db; }
.game-footer { width:min(1180px,calc(100% - 64px)); margin:28px auto 0; padding:18px 0 24px; border-top:1px solid #242e45; display:flex; justify-content:space-between; align-items:center; gap:20px; color:#7f8eaa; font-size:10px; line-height:1.65; }
.game-footer .text-button { min-height:32px; color:#93a4c1; font-size:10px; }
dialog { width:calc(100% - 32px); max-width:540px; max-height:90dvh; overflow:auto; padding:25px; border:1px solid #49506e; border-radius:20px; color:var(--text); background:#171f36; box-shadow:0 30px 100px #0009; }
dialog::backdrop { background:#040714cc; backdrop-filter:blur(8px); }
.dialog-top { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.dialog-top>div { min-width:0; }
.dialog-top h2 { min-width:0; margin:4px 0 0; font-size:25px; line-height:1.3; font-weight:750; letter-spacing:-.65px; }
.close-button { display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; padding:0; border:1px solid #424b68; border-radius:12px; color:#d1daec; background:#252f49; font-size:24px; line-height:1; }
.close-button:hover { color:white; background:#3a3458; border-color:#a58ed9; }
dialog p { color:#b6c4dc; font-size:13px; line-height:1.85; }
#scene-dialog { max-width:1040px; }
#scene-dialog img { width:100%; margin-top:20px; border-radius:12px; }
#case-map-dialog { max-width:620px; }
#map-summary { margin:14px 0 21px; }
.case-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:13px; }
.case-card { display:grid; grid-template-columns:118px minmax(0,1fr) 30px; min-width:0; width:100%; overflow:hidden; align-items:stretch; padding:0; border:1px solid #374460; border-radius:14px; color:var(--text); background:#202a44; text-align:start; box-shadow:0 4px 15px #0002; transition:background .15s,border-color .15s; }
.case-card:hover { background:#2b2d4c; border-color:#9a88d3; }
.case-card.active,.case-card[aria-current=true],.case-card.current { border-color:var(--violet); }
.case-card img { width:100%; height:100%; min-height:115px; object-fit:cover; background:#11172c; }
.case-card-copy { min-width:0; padding:15px 9px 15px 15px; border-inline-start:1px solid #374460; }
.map-arrow { align-self:center; color:#ffa78f; font-size:22px; line-height:1; }
.map-status { color:#c5b6fa; font-size:10px; line-height:1.5; }
.case-card-copy>.eyebrow { font-size:9px; }
.case-card-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:5px; color:#a7b5d0; font-size:9px; line-height:1.5; }
.case-card-top>span:last-child { color:#c2afff; }
.case-card h3 { margin:8px 0 10px; font-size:18px; line-height:1.25; font-weight:750; letter-spacing:-.3px; overflow-wrap:anywhere; }
.case-card-copy>p { display:none; }
.case-card-action { display:flex; justify-content:space-between; gap:12px; padding-top:8px; border-top:1px solid #35405b; color:#ffa78f; font-size:11px; line-height:1.5; font-weight:650; }
.case-card-action>span:last-child { font-size:16px; }
.share-url { width:100%; padding:14px; border:1px solid #4a5775; border-radius:11px; color:var(--text); background:#0f172a; font-size:16px; }
.share-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:18px; }
#toast { position:fixed; inset-inline:18px; bottom:22px; z-index:40; max-width:420px; margin-inline:auto; padding:14px 18px; border:1px solid #79649f; border-radius:13px; color:white; background:#2c2442; box-shadow:0 12px 35px #0006; font-size:12px; line-height:1.7; text-align:center; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .2s,transform .2s; }
#toast.visible { opacity:1; transform:translateY(0); }
noscript p { padding:20px; color:#d7cff8; background:#28213c; text-align:center; font-size:14px; }
[dir=rtl] { --font:Tahoma,Arial,sans-serif; }
[dir=rtl] .eyebrow { letter-spacing:0; }
[dir=rtl] .game-heading h1 { letter-spacing:0; line-height:1.3; }
[dir=rtl] .map-arrow { transform:scaleX(-1); }
[dir=rtl] .clue-arrows button,[dir=rtl] .button>span[aria-hidden],[dir=rtl] .case-card-action>span:last-child { transform:scaleX(-1); }
[dir=rtl] .feedback:not(:empty) { border-radius:8px 0 0 8px; }
.play-panel.wrong-answer { animation:wrong-answer .24s ease-in-out; border-color:#ba6b70; }
@keyframes wrong-answer { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
@media(min-width:1500px) {
  .game-shell,.game-header,.game-footer { width:min(1280px,calc(100% - 100px)); }
  .game-shell { padding-top:37px; }
  .game-heading { margin-bottom:28px; }
  .game-layout { grid-template-columns:minmax(0,1.43fr) minmax(365px,.85fr); gap:30px; }
  .play-panel { padding:27px; }
}
@media(max-width:1040px) {
  .game-header,.game-shell,.game-footer { width:calc(100% - 44px); }
  .game-layout { grid-template-columns:minmax(0,1.12fr) minmax(310px,1fr); gap:20px; }
  .play-panel { padding:20px; }
  .game-heading h1 { font-size:37px; }
  .scene-footer { padding:13px 15px; gap:12px; }
}
@media(max-width:760px) {
  .game-header,.game-shell,.game-footer { width:calc(100% - 32px); }
  .game-header { min-height:62px; gap:12px; }
  .wordmark { gap:7px; }
  .wordmark img { width:31px; height:31px; border-radius:10px; }
  .wordmark span { font-size:7px; letter-spacing:1.4px; }
  .wordmark b { font-size:9px; letter-spacing:.7px; }
  .map-button { gap:7px; min-height:36px; padding:8px 10px; border-radius:10px; font-size:10px; }
  .map-dots { gap:3px; }
  .map-dots>* { width:4px; height:4px; }
  .language-picker select { max-width:106px; min-height:36px; padding:8px 7px; font-size:10px; border-radius:10px; }
  .game-shell { padding-top:19px; }
  .game-heading { align-items:flex-start; gap:11px; margin-bottom:17px; }
  .game-heading>div { max-width:none; }
  .game-heading .eyebrow { font-size:9px; letter-spacing:1.1px; }
  .game-heading h1 { margin:7px 0 9px; font-size:31px; line-height:1.12; letter-spacing:-1px; }
  .game-heading>div>p:last-child { font-size:12px; line-height:1.65; }
  .time-badge { margin-top:2px; margin-bottom:0; padding:6px 8px; border-radius:8px; font-size:9px; }
  .game-layout { grid-template-columns:minmax(0,1fr); gap:18px; }
  .scene-panel { border-radius:16px; box-shadow:0 14px 37px #0004; }
  .scene-badge { top:11px; inset-inline-start:11px; padding:5px 8px; font-size:9px; border-radius:7px; }
  .enlarge { top:10px; inset-inline-end:10px; width:36px; height:36px; border-radius:10px; font-size:24px; }
  .scene-footer { min-height:48px; padding:12px 13px; font-size:10px; line-height:1.6; gap:12px; }
  .clue-progress { gap:4px; }
  .clue-progress>* { width:6px; height:6px; }
  .solved-stamp { bottom:16px; inset-inline-end:16px; width:50px; height:50px; font-size:27px; }
  .play-panel { padding:19px 17px; border-radius:16px; }
  .rule-banner { margin-bottom:20px; padding:10px 11px; }
  .rule-banner p { font-size:12px; line-height:1.6; }
  .clue-heading { margin-bottom:12px; }
  .clue-heading h2,#choice-panel h2 { font-size:14px; }
  .clue-selector { gap:7px; margin-bottom:11px; }
  .clue-selector button { min-height:44px; font-size:12px; }
  .clue-card { padding:15px 15px 12px; }
  .clue-label { font-size:10px; }
  #clue-detail { min-height:40px; font-size:14px; line-height:1.75; }
  .clue-arrows { gap:9px; margin-top:12px; }
  .clue-arrows button { width:42px; height:40px; font-size:21px; }
  #choice-panel { margin-top:0; }
  .answer-options { gap:8px; }
  .answer-button,.answer-options>button { min-height:75px; padding:12px 6px; font-size:11px; }
  .answer-letter { font-size:23px; }
  .button { min-height:50px; padding:13px 16px; font-size:13px; }
  #choice-panel>h2,#answer-options { display:none; }
  #submit-choice {
    position:fixed;
    z-index:30;
    inset-inline:16px;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));
    width:auto;
    max-width:none;
    min-height:54px;
    margin:0;
    padding:13px 18px;
    border-radius:14px;
    line-height:1.4;
    white-space:normal;
    box-shadow:0 7px 28px #0008,0 0 0 5px #0b102166;
  }
  #submit-choice:disabled {
    color:#d1daeb;
    background:linear-gradient(180deg,#34435f,#29364f);
    border-color:#5b6d8e;
    box-shadow:0 7px 25px #0007,0 0 0 5px #0b102166;
  }
  body { padding-bottom:calc(90px + env(safe-area-inset-bottom,0px)); }
  .play-panel.wrong-answer { animation:none; }
  #scene-message {
    display:-webkit-box;
    max-height:70px;
    overflow:hidden;
    padding:8px 10px;
    font-size:13px;
    line-height:1.3;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }
  #scene-message:empty { display:none; }
  .hint-button { margin-top:7px; }
  #code-form { margin-top:21px; }
  #code-input { min-height:56px; }
  .keypad { gap:8px; margin:12px 0; }
  .keypad button { min-height:46px; }
  #result-panel { padding-top:8px; }
  .result-symbol { width:64px; height:64px; margin-bottom:18px; border-radius:20px; font-size:34px; }
  #result-panel>h2 { font-size:29px; }
  #result-summary { font-size:14px; }
  .game-bottom { gap:14px; margin-top:13px; font-size:10px; }
  .game-bottom .text-button { font-size:10px; }
  .game-footer { flex-wrap:wrap; gap:12px; margin-top:19px; padding:15px 0 22px; font-size:9px; }
  .game-footer .text-button { font-size:9px; }
  dialog { padding:20px; border-radius:17px; }
  .dialog-top { gap:13px; }
  .dialog-top h2 { font-size:23px; }
  .close-button { width:38px; height:38px; }
  dialog p { font-size:12px; }
  .case-card { grid-template-columns:104px minmax(0,1fr) 25px; border-radius:12px; }
  .case-card img { min-height:118px; }
  .case-card-copy { padding:13px; }
  .case-card h3 { font-size:17px; }
  .share-actions>.button { flex:1 1 130px; }
  [dir=rtl] .game-heading h1 { font-size:29px; }
  [dir=rtl] .game-heading .eyebrow { letter-spacing:0; }
}
@media(max-width:359px) {
  .game-header { gap:8px; }
  .wordmark { gap:6px; }
  .wordmark img { width:29px; height:29px; }
  .wordmark span { font-size:6.5px; letter-spacing:1.1px; }
  .wordmark b { font-size:8.5px; letter-spacing:.5px; }
  .map-button { min-height:35px; gap:5px; padding:8px; font-size:9px; }
  .map-dots { display:none; }
  .language-picker select { width:91px; font-size:9px; padding-inline:6px; }
  .game-heading { gap:8px; }
  .game-heading h1 { font-size:28px; }
  .game-heading>div>p:last-child { font-size:11px; }
  .time-badge { font-size:8px; padding-inline:6px; }
  .play-panel { padding:17px 14px; }
  .clue-selector { gap:5px; }
  .clue-selector button { padding-inline:4px; font-size:11px; }
  .answer-options { gap:7px; }
  .answer-button,.answer-options>button { padding-inline:4px; font-size:10px; }
  .case-card { grid-template-columns:85px minmax(0,1fr) 23px; }
  .case-card-copy { padding:11px; }
  .case-card h3 { font-size:16px; }
  .case-card-top { font-size:8px; }
  .case-card-action { font-size:10px; }
  [dir=rtl] .game-heading h1 { font-size:27px; }
}
@media(hover:none) {
  .button.primary:hover { transform:none; }
  .enlarge,.clue-arrows button,.map-button { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
}
#scene-message.error { border:1px solid #ff9c82; color:#ffe2d8; background:#482536f2; }

.confidence-row { min-height:61px; margin-bottom:12px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; }
.referral-welcome { display:flex; align-items:center; gap:7px; max-width:100%; min-height:26px; margin:0; padding:5px 10px; border:1px solid #4e657b; border-radius:8px; background:#182b3d; color:#dcf2ff; font-size:11px; line-height:1.4; font-weight:700; }
.referral-welcome::before { content:'✓'; display:grid; place-items:center; width:15px; height:15px; flex:none; border-radius:50%; background:#c0e7dc; color:#173930; font-size:10px; }
.referral-welcome[data-source="Facebook"] { border-color:#4d8be6; background:#172d50; color:#e5f0ff; }
.referral-welcome[data-source="Instagram"] { border-color:#a16c9e; background:linear-gradient(110deg,#37224d,#45272e); color:#ffedf6; }
.trust-copy { margin:0; color:#adbcd1; font-size:10px; line-height:1.5; }
.quick-clues { padding:14px; background:#151e34; border-top:1px solid #35405c; display:grid; gap:8px; }
.quick-rule { margin:0 0 3px; color:#bdc9df; font-size:11px; line-height:1.5; }
.quick-statement { display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:10px 12px; border:1px solid #3a4764; border-radius:10px; color:#eaf0fb; background:#202b44; text-align:start; font-size:12px; line-height:1.5; }
.quick-statement strong { flex:none; color:#c4baff; font-size:10px; }
.quick-statement[aria-pressed="true"] { border-color:#b6a4ff; background:#473862; box-shadow:inset 3px 0 #b6a4ff; }
.next-preview { display:flex; gap:14px; align-items:center; margin-top:20px; padding:12px; border:1px solid #3a4764; border-radius:12px; text-align:start; background:#17213a; }
.next-preview img { width:86px; height:65px; border-radius:8px; object-fit:cover; }
.next-preview div { min-width:0; }
.next-preview span { display:block; margin-bottom:6px; color:#b8a7f2; font-size:10px; }
.next-preview strong { display:block; color:#e9effb; font-size:13px; line-height:1.4; }
.result-progress { color:#a7bad8; font-size:11px; }
.daily-case { margin:5px 0 18px; }
.analytics-setting { display:flex; gap:12px; align-items:flex-start; padding:16px; margin:18px 0; border:1px solid #394861; border-radius:12px; background:#111b30; cursor:pointer; }
.analytics-setting input { width:20px; height:20px; margin:2px 0; flex:none; accent-color:var(--violet); }
.analytics-setting strong { display:block; font-size:13px; line-height:1.5; }
.analytics-setting span span { display:block; color:#a9bad3; font-size:11px; line-height:1.7; margin-top:7px; }
.visual-challenge #scene-hotspots button { width:30%; height:26%; top:81%!important; border-radius:12px; opacity:0; backdrop-filter:none; }
.visual-challenge #scene-hotspots button[aria-pressed="true"] { opacity:1; color:transparent; background:#8b7dff18; border-color:#b9a4ff; box-shadow:0 0 0 3px #8b7dff22; }
.visual-challenge #scene-hotspots button:focus-visible { opacity:1; color:transparent; background:#8b7dff18; }
@media(max-width:760px) {
  .game-shell { padding-top:14px; }
  .confidence-row { min-height:62px; margin-bottom:12px; }
  .game-heading { height:104px; min-height:104px; align-items:flex-start; margin-bottom:14px; }
  .game-heading h1 { min-height:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .game-heading>div>p:last-child { display:none; }
  .time-badge { position:absolute; inset-inline-end:17px; margin-top:-3px; font-size:8px; padding:4px 6px; }
  .game-heading .eyebrow { padding-inline-end:52px; }
  .quick-clues { padding:12px; gap:7px; }
  .scene-panel:has(.quick-clues:not([hidden])) .scene-footer { display:none; }
  .quick-statement { min-height:44px; padding:9px 11px; }
  .visual-challenge #scene-hotspots button { width:29%; height:27%; }
}