/* Grammar Detective Mission 1. Inherits the exact Memory Match shell, typography,
   records, stats, progress, and action button styles from match-the-animals/style.css.
   Existing games are not modified. */
:root{--detective-purple:#685183;--detective-mint:#dff3e7}
.game-shell{width:min(100%,1840px)}
.game-header{margin-bottom:18px}
.game-header h1{color:#5c4a79}
.progress__fill{background:#94cfa7}
.stat--moves{background:#e4d9f5}
.detective-stage{min-width:0;display:flex;flex-direction:column;gap:14px}
.map-panel{width:100%;min-width:0;border:1px solid #eee4e9;border-radius:20px;background:#fff;padding:12px;box-shadow:0 3px 13px rgba(102,65,99,.035)}
.map-heading,.case-panel__heading{display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0;padding:2px 2px 11px}
.map-heading__label{font-family:var(--font-title);font-size:14px;font-weight:800;letter-spacing:.07em;color:#796786}
.map-heading__label span{font-family:system-ui;font-size:21px;line-height:0;vertical-align:middle;margin-right:3px}
.map-heading__status{font-size:13px;color:#796b83;text-align:right}
.map-board{position:relative;width:100%;aspect-ratio:3/2;isolation:isolate;overflow:hidden;border-radius:15px;background:#bde59a;border:1px solid #d7e7c4}
.map-image{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.map-locations{position:absolute;inset:0;z-index:3;pointer-events:none}
.clue{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(26px,3.5vw,43px);height:clamp(26px,3.5vw,43px);border-radius:50%;background:#ffffffee;border:3px solid #bca2d5;color:#725b87;box-shadow:0 2px 5px #3d34462b;cursor:default;font-family:var(--font-title);font-size:clamp(13px,1.5vw,21px);font-weight:800;z-index:1;pointer-events:auto;touch-action:manipulation}
.clue:disabled{opacity:.66;cursor:default}
.clue.is-active{background:#f9edf9;border-color:#a76fbc;cursor:pointer;box-shadow:0 0 0 6px #fff8,0 0 18px #976cc4aa;animation:clue-pulse 2s ease-in-out infinite}
.clue.is-active:hover{transform:translate(-50%,-50%) scale(1.12)}
.clue.is-solved{background:#e3f7e7;border-color:#79c292;color:#35754c}
.clue.is-current{box-shadow:0 0 0 5px #ffffffa8}
@keyframes clue-pulse{50%{box-shadow:0 0 0 9px #fff9,0 0 22px #976cc4c0}}
.map-detective{position:absolute;z-index:2;width:clamp(64px,11%,115px);height:auto;transform:translate(-50%,-91%);pointer-events:none;user-select:none;filter:drop-shadow(0 2px 2px #2b322a35);will-change:left,top}
.map-detective.is-moving{animation:walk-bob .36s ease-in-out infinite alternate}
@keyframes walk-bob{from{translate:0 0}to{translate:0 -2px}}
.map-caption{margin:9px 2px 0;font-size:13px;text-align:center;color:#786e80}
.case-panel{width:100%;min-width:0;border:1px solid #eee4e9;border-radius:20px;background:#fff;padding:17px 20px 18px;box-shadow:0 3px 13px rgba(102,65,99,.035)}
.case-panel__heading{padding:0 0 6px}
.case-tag{display:inline-block;background:#e8dcf6;color:#67527e;padding:7px 12px;border-radius:10px;font-family:var(--font-title);font-size:14px;letter-spacing:.045em;font-weight:800}
.case-topic{color:#7b6b80;font-family:var(--font-title);font-size:13px;font-weight:700;letter-spacing:.045em}
.case-panel h2{font-family:var(--font-title);font-size:clamp(22px,2.3vw,30px);letter-spacing:-.025em;margin:4px 0 2px;color:#5b4975}
.case-directions{font-size:clamp(14px,1.6vw,17px);color:#7b7280;margin:0 0 12px;line-height:1.4}
.sentence{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;align-items:center;min-height:77px;border-radius:15px;background:#faf7fd;border:1px solid #f1eaf3;padding:12px}
.sentence.is-empty{color:#aa9dac;font-size:16px}
.word{border:2px solid #d5c3e9;background:#eee3f7;border-radius:12px;min-height:50px;padding:10px 15px;color:#534366;font-size:clamp(19px,2.1vw,27px);line-height:1.06;cursor:pointer;transition:transform .12s,background .15s;font-family:var(--font-body);white-space:nowrap}
.word:hover:not(:disabled){transform:translateY(-2px);background:#e4d2f2}.word:disabled{cursor:default;opacity:.83}
.word.is-selected{background:#f8dce6;border-color:#e6a8bf}
.word.is-corrected{background:#ddf2e4;border-color:#89c6a4;color:#386a51}
.case-options{min-height:14px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.case-options:empty{margin-top:0}
.correction{min-width:95px;min-height:44px;padding:8px 20px;border-radius:12px;border:1px solid #b6dec4;background:#e4f6e8;color:#457453;font-size:19px;cursor:pointer}
.correction:hover{background:#d3efdc}
.case-footer{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-top:12px}
.no-mistake{flex:none;background:#fff0e5;border:1px solid #f2dbc9;color:#855c48;border-radius:12px;padding:11px 14px;font-size:16px;cursor:pointer}
.no-mistake:disabled{opacity:.5;cursor:default}
.case-feedback{flex:1;background:#f6f0fa;border-radius:11px;color:#756380;min-height:46px;padding:11px 13px;text-align:center;display:flex;align-items:center;justify-content:center;font-size:15px}
.case-feedback.is-success{background:#e1f4e6;color:#386a52}
.case-feedback.is-error{background:#fff0eb;color:#9a6052}
@media(min-width:900px){
  .game-shell{grid-template-columns:minmax(120px,160px) minmax(0,1fr) minmax(120px,160px);grid-template-areas:'heading heading heading' 'progress progress progress' 'records stage scoreboard' 'actions stage scoreboard';column-gap:clamp(12px,1.9vw,24px)}
  .detective-stage{grid-area:stage;align-self:start}
  .game-header{margin-bottom:15px}
  .progress{margin-bottom:18px}
  .game-actions{align-self:start;margin-top:18px}
  .desktop-records{grid-template-rows:repeat(3,105px)}
  .scoreboard{gap:12px}
  .map-board{width:100%}
  .map-detective{width:clamp(70px,9.5%,105px)}
}
@media(min-width:900px) and (max-width:1100px){
  .game-shell{grid-template-columns:120px minmax(0,1fr) 120px;column-gap:10px}
  .stat__label,.desktop-record__label{font-size:14px}
  .stat__value,.desktop-record__value{font-size:30px}
  .stat--time .stat__value,.desktop-record:last-child .desktop-record__value{font-size:25px}
}
@media(max-width:899px){
  .game-shell{display:flex;flex-direction:column}
  .game-header{order:1}
  .detective-nav{order:0;position:relative;top:auto;left:auto;right:auto;margin:0 0 14px}
  .progress{order:2}
  .scoreboard{order:3}
  .detective-stage{order:4}
  .game-actions{order:5}
  .desktop-records{order:6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:8px;margin-top:13px}
  .desktop-record{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border:1px solid #ede6eb;text-align:center;height:74px;min-height:74px;border-radius:12px;padding:8px 4px;gap:4px}
  .desktop-record__label{font-size:11px}
  .desktop-record__value{font-size:22px}
  .best-record{order:7}
  .game-actions{justify-content:center;flex-direction:row}
  .game-actions .action{width:auto}
  .stat{min-height:72px;height:72px}
}
@media(max-width:520px){
  .game-shell{padding:12px 9px 16px}
  .map-panel{padding:6px;border-radius:13px}
  .map-heading{padding:6px 6px 8px;flex-wrap:wrap}
  .map-heading__label{font-size:12px}
  .map-heading__status{font-size:12px}
  .map-board{border-radius:8px}
  .map-caption{font-size:12px;margin:7px 2px 3px}
  .clue{width:30px;height:30px;border-width:2px;font-size:13px}
  .map-detective{width:61px}
  .detective-stage{gap:10px}
  .case-panel{padding:13px 10px 15px;border-radius:14px}
  .case-panel__heading{gap:4px;flex-wrap:wrap}
  .case-tag,.case-topic{font-size:12px}
  .sentence{padding:9px 5px;gap:6px;min-height:71px}
  .word{font-size:clamp(17px,5vw,21px);padding:10px 9px;min-height:45px;border-radius:10px}
  .case-footer{flex-wrap:wrap;gap:8px}
  .case-feedback{min-width:0;font-size:13px;min-height:40px}
  .no-mistake{font-size:14px;padding:10px}
  .case-directions{font-size:14px}
  .game-actions{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.clue.is-active{animation:none}.map-detective.is-moving{animation:none}}

/* First playable draft — preserve the approved card-game panel geometry. */
.replay-audio{flex:none;padding:10px 13px;border:1px solid #c0dbc8;background:#e7f5eb;border-radius:11px;color:#467255;font-size:14px;cursor:pointer}
.replay-audio[hidden]{display:none}
.word:focus-visible,.clue:focus-visible,.correction:focus-visible,.no-mistake:focus-visible,.replay-audio:focus-visible{outline:3px solid #7c59ad;outline-offset:3px}
@media(max-width:520px){.case-tag{font-size:11px;white-space:normal}.case-footer{justify-content:center}.replay-audio{width:100%}}
/* Preserve the approved Memory Match bottom-left control placement. */
@media (min-width:900px){
  .game-actions{align-self:end;margin-top:0;margin-bottom:0}
}

/* V5.10: widen only the overall board, letting the central school map expand.
   The existing 160px side columns and 105px statistics remain untouched.
   Tablet/mobile rules and sentence typography remain unchanged. */
@media(min-width:900px){
  .game-shell{width:min(100%,1840px)}
}

/* V5.11: MAKE THE MAP THE GAME. Keep the 160 x 105px desktop stat
   cards, their typography, the detective, location paths, and all
   gameplay from V5.10 intact. Remove only the captions/instructions
   explicitly marked on the owner's screenshot. They remain available
   to screen readers as clipped accessible messages. */
@media(min-width:900px){
  .game-shell{width:min(100%,2160px);padding-inline:clamp(14px,1.2vw,23px)}
  .game-shell{grid-template-columns:160px minmax(0,1fr) 160px;column-gap:clamp(12px,1.1vw,20px)}
  .map-panel{padding:0;overflow:hidden}
  .map-board{border:0;border-radius:18px}
  .game-header{margin-bottom:11px}
  .progress{margin-bottom:12px}
  .detective-stage{gap:10px}
  .case-panel{padding:13px 17px 15px}
}
@media(min-width:900px) and (max-width:1100px){
  /* Preserve original narrow-desktop side card sizing. */
  .game-shell{grid-template-columns:120px minmax(0,1fr) 120px;column-gap:10px}
}
@media(max-width:899px){
  .map-panel{padding:0;overflow:hidden}
  .map-board{border:0;border-radius:12px}
  .case-panel{padding-top:13px}
}
/* Explicit specificity makes the map/case labels invisible without
   losing live status announcements for assistive technology. */
.map-heading.sr-only,
.map-caption.sr-only,
.case-panel__heading.sr-only,
#case-heading.sr-only,
.case-directions.sr-only {
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:0!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;
  border:0!important;
}

/* V5.13 — further reduce only the DESKTOP map by 10% from V5.12.
   This adjusts shell width because both 160px side statistic columns
   and existing panel gaps/padding must retain their actual pixel size.
   No map crop, image changes or character path changes; mobile unchanged. */
@media(min-width:900px){
  .game-shell{width:min(100%,calc(72% + 105px),1660px)}
}
/* V5.13 — crisp red '?' using an unambiguous sans-serif glyph,
   with the heavy white outlines removed so it no longer looks like a blob.
   Preserve the accessible 44px+ touch target and exact V5.12 pulse. */
.clue.is-active{
  width:clamp(53px,5.4vw,82px);
  height:clamp(53px,5.4vw,82px);
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  color:#d52e45;
  font-family:"Nunito","Sniglet",var(--font-body),sans-serif;
  font-weight:800;
  font-size:clamp(44.4px,4.08vw,70.8px);
  line-height:1;
  text-shadow:0 1px 2px rgba(255,255,255,.92),
              0 2px 3px rgba(53,23,26,.25);
  box-shadow:none;
  animation:detective-question-pulse 2.8s ease-in-out infinite;
}
.clue.is-active:hover{
  /* Keep pulse transform responsible for centring while hovered. */
  filter:brightness(1.09);
}
@keyframes detective-question-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(.88)}
  50%{transform:translate(-50%,-50%) scale(1.14)}
}
@media(max-width:520px){
  .clue.is-active{width:53px;height:53px;font-size:46.8px}
}
@media(prefers-reduced-motion:reduce){
  .clue.is-active{animation:none;transform:translate(-50%,-50%)}
}

/* Legacy CSS for optional independent NPCs; disabled in V5.20 because all
   people are now positioned in the approved Canva school-map.png artwork. */
.map-people{position:absolute;inset:0;z-index:1;pointer-events:none;user-select:none}
.map-person{display:block;position:absolute;left:var(--person-x);top:var(--person-y);
  width:var(--person-w);height:auto;transform:translate(-50%,-100%);
  object-fit:contain;pointer-events:none;user-select:none}
/* Children are foreground map decoration, never clickable clue locations. */

/* V5.18: clearer, more prominent sentence tiles, with a proportionate
   mobile size and wrapping for longer sentences. The panels/map, buttons,
   controls, stats and movement stay as before. */
.sentence {min-height:96px;gap:11px;padding:15px 12px;background:#f8f4fc}
.word {min-height:62px;padding:12px 19px;font-size:clamp(24px,2.7vw,34px);
  border-width:2px;border-radius:13px;line-height:1.12;font-weight:400;
  box-shadow:0 1px 2px rgba(70,46,96,.07)}
@media (max-width:520px){
  .sentence{min-height:81px;gap:7px;padding:10px 6px}
  .word{font-size:clamp(20px,5.2vw,24px);min-height:52px;padding:10px 11px;
    border-radius:10px}
}


/* V5.22 — No Mistake is a prominent choice INSIDE the same sentence panel.
   Keep the approved Sniglet Regular word font and preserve every tile size. */
.sentence{gap:12px}
.sentence-words{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:11px;min-width:0;flex:1 1 auto}
.no-mistake{font-family:var(--font-body);font-weight:400;font-size:20px;
  padding:15px 20px;min-height:62px;border-radius:13px;
  border:2px solid #e8bea4;background:#ffeadc;color:#845640;
  box-shadow:0 2px 3px rgba(95,60,36,.08);white-space:nowrap}
.no-mistake:hover:not(:disabled){background:#ffdeca;transform:translateY(-1px)}
.no-mistake:disabled{opacity:.52}
.case-footer{justify-content:center}
.case-feedback{flex:1 1 auto}
/* Copy the approved Memory Match centre-out confetti treatment. */
.victory-confetti{position:absolute;inset:0;display:block;width:100%;height:100%;
  pointer-events:none;z-index:3}
.win-card{position:relative;z-index:2}
@media(max-width:520px){
  .sentence{gap:9px}
  .sentence-words{gap:7px;flex-basis:100%}
  .no-mistake{font-size:17px;min-height:49px;padding:10px 19px}
}

/* V5.25 — 20% larger red '?' with a crisp black outline.
   Preserve the same 2.8-second pulse and do not alter any other controls. */
.clue.is-active{
  width:clamp(64px,6.48vw,98px);
  height:clamp(64px,6.48vw,98px);
  font-size:clamp(53.28px,4.896vw,84.96px);
  -webkit-text-stroke:2px #202020;
  paint-order:stroke fill;
  text-shadow:0 1px 2px rgba(255,255,255,.65);
}
@media(max-width:520px){
  .clue.is-active{width:64px;height:64px;font-size:56.16px;-webkit-text-stroke:1.75px #202020}
}