.detective-settings { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.detective-layout { display:grid; grid-template-columns:minmax(155px,.6fr) minmax(0,1.6fr); gap:28px; align-items:start; }
.detective-clues { padding:12px 0; }
.detective-clues h2 { font-size:1.2rem; margin:10px 0; }
.detective-partner { min-height:86px; display:flex; align-items:end; }
.detective-partner .explore-portrait { --portrait-size:58px; max-height:86px; }
.detective-shadow { width:145px; }
.detective-shadow .learning-picture { width:100%; filter:brightness(0); background-color:transparent; }
.detective-shadow { background:#c0c4d8; padding:8px; }
.detective-shadow[hidden],.detective-word[hidden],.detective-help[hidden] { display:none; }
.detective-clue-list { padding-left:24px; color:var(--text); margin:0 0 12px; font-size:1rem; }
.detective-clue-list:empty { display:none; }
.detective-word { font-size:1.8rem; color:var(--amber); margin-bottom:12px; overflow-wrap:anywhere; }
.detective-table { display:grid; grid-template-columns:repeat(var(--table-columns,2),minmax(0,1fr)); gap:12px; }
.detective-object { display:flex; flex-direction:column; align-items:center; padding:8px; min-width:0; background:#161d35; border:1px solid #777493; color:var(--text); }
.detective-object .learning-picture { width:min(100%,135px); }
.detective-object small { color:var(--muted); font-size:.75rem; }
.detective-object[data-state=correct] { border-color:var(--cyan); background:#1c4545; opacity:1; }
.detective-object[data-state=retry] { border-color:var(--amber); }
.detective-object[data-hint=true] { outline:2px solid var(--amber); outline-offset:-4px; }
.detective-help { color:var(--amber); font-size:.9375rem; margin:12px 0 0; }
@media(min-width:650px) and (max-height:600px) { .explore-stage.is-immersive .detective-object .learning-picture { max-width:52px; } }
@media(max-width:650px) { .detective-layout { grid-template-columns:1fr; gap:16px; } .detective-clues { display:grid; grid-template-columns:68px minmax(0,1fr); gap:8px 12px; padding:0; align-items:center; } .detective-partner { grid-row:1 / 4; min-height:0; } .detective-partner .explore-portrait { --portrait-size:58px; } .detective-clues h2 { grid-column:2; margin:0; } .detective-shadow { grid-column:2; width:110px; } .detective-clue-list,.detective-word { grid-column:2; margin:0; } .detective-clues > button { grid-column:2; justify-self:start; } .detective-help { grid-column:1 / -1; } .detective-table { gap:8px; } .detective-object { padding:5px; } .detective-object .learning-picture { width:100%; max-width:100px; } .detective-object small { font-size:.6875rem; } }
@media(min-width:650px) and (max-height:600px) { .explore-stage.is-immersive .detective-settings { gap:8px; } .explore-stage.is-immersive .learning-settings { margin-bottom:8px; } .explore-stage.is-immersive .detective-layout { grid-template-columns:195px 1fr; gap:20px; } .explore-stage.is-immersive .detective-partner { display:none; } .explore-stage.is-immersive .detective-shadow { width:100px; } .explore-stage.is-immersive .detective-clues { padding:0; } .explore-stage.is-immersive .detective-clues h2 { margin-top:0; } .explore-stage.is-immersive .detective-table { gap:6px; } .explore-stage.is-immersive .detective-object { padding:4px; } .explore-stage.is-immersive .detective-object .learning-picture { max-width:52px; } .explore-stage.is-immersive .detective-clue-list { font-size:.9375rem; } }