/* Manoux Lab 2026 — progressive app skin test.
   This stylesheet is visual only. It must not alter application logic, map geometry,
   canvas content, hit areas, or URLs. Applied through body classes. */

:root{
  --mx26-paper:#f5f1e8;
  --mx26-paper-2:#fbf9f3;
  --mx26-ink:#2f302d;
  --mx26-ink-soft:#66645c;
  --mx26-olive:#7e943f;
  --mx26-olive-dark:#657831;
  --mx26-olive-soft:#c6d58d;
  --mx26-rule:#cbc6b8;
  --mx26-rule-soft:#ded9cd;
  --mx26-charcoal:#2f302d;
  --mx26-charcoal-2:#393a35;
  --mx26-ivory:#f8f5ed;
  --mx26-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mx26-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mx26-shadow:0 10px 28px rgba(47,48,45,.09);
}

/* --------------------------- GAME SKIN --------------------------- */
body.mx26-game{
  background:var(--mx26-paper);
  color:var(--mx26-ink);
  font-family:var(--mx26-sans);
}
body.mx26-game::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:linear-gradient(rgba(74,74,68,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(74,74,68,.035) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 52%);
  z-index:-1;
}
body.mx26-game .page{width:min(1440px,calc(100vw - 32px));padding-top:14px}
body.mx26-game .header{align-items:center;margin-bottom:12px;border-bottom:1px solid var(--mx26-rule);padding-bottom:12px}
body.mx26-game .header h1,
body.mx26-game .home-copy h2,
body.mx26-game .summary-head h2{
  font-family:var(--mx26-serif);
  color:var(--mx26-ink);
  font-weight:600;
  letter-spacing:-.025em;
}
body.mx26-game .header h1{font-size:clamp(1.65rem,2.2vw,2.35rem)}
body.mx26-game .header p{color:var(--mx26-ink-soft)}
body.mx26-game .kicker{
  color:var(--mx26-olive-dark);
  letter-spacing:.08em;
  font-size:.76rem;
  text-transform:none;
  font-weight:700;
}
body.mx26-game .manoux-btn{
  background:transparent;
  border:1px solid var(--mx26-rule);
  color:var(--mx26-ink);
  border-radius:999px;
  box-shadow:none;
  font-weight:650;
}
body.mx26-game .manoux-btn:hover,
body.mx26-game .manoux-btn:focus-visible{
  transform:none;
  border-color:var(--mx26-olive);
  color:var(--mx26-olive-dark);
  box-shadow:none;
}
body.mx26-game .manoux-brand-btn{background:var(--mx26-charcoal);color:var(--mx26-ivory);border-color:var(--mx26-charcoal)}
body.mx26-game .panel{
  background:var(--mx26-paper-2);
  color:var(--mx26-ink);
  border:1px solid var(--mx26-rule);
  box-shadow:var(--mx26-shadow);
  border-radius:16px;
}
body.mx26-game .home-screen{background:transparent}
body.mx26-game .home-stage{padding:22px;gap:24px}
body.mx26-game .home-copy{padding:18px 10px 18px 14px}
body.mx26-game .home-copy h2{
  font-size:clamp(2.2rem,4.3vw,4.15rem);
  line-height:1.01;
  max-width:12ch;
  margin-bottom:14px;
}
body.mx26-game .home-copy p:not(.kicker){color:var(--mx26-ink-soft);font-size:1rem;line-height:1.55}
body.mx26-game .home-rule{color:var(--mx26-ink)!important;font-weight:650}
body.mx26-game .home-stats{margin-top:20px}
body.mx26-game .home-stats div,
body.mx26-game .home-card,
body.mx26-game .level-card,
body.mx26-game .hud-card,
body.mx26-game .status{
  background:#fffdf8;
  border-color:var(--mx26-rule-soft);
  box-shadow:none;
}
body.mx26-game .home-stats div{border-radius:12px}
body.mx26-game .home-stats strong{font-family:var(--mx26-serif);color:var(--mx26-ink);font-weight:600}
body.mx26-game .home-stats span{color:var(--mx26-ink-soft);letter-spacing:.05em;text-transform:none}
body.mx26-game .home-map-card{
  border-radius:16px;
  border:1px solid #263033;
  box-shadow:0 14px 30px rgba(47,48,45,.12);
}
body.mx26-game .home-play{padding:0 22px 22px}
body.mx26-game .home-play .level-card{border-radius:12px}
body.mx26-game .home-play .level-card:hover{transform:none;box-shadow:0 8px 20px rgba(47,48,45,.08);border-color:var(--mx26-olive-soft)}
body.mx26-game .home-play .level-card h3{font-family:var(--mx26-serif);font-weight:600;font-size:1.24rem}
body.mx26-game .btn{
  border-radius:999px;
  font-weight:700;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
body.mx26-game .btn--accent{
  background:var(--mx26-olive);
  color:#22251e;
  border-color:var(--mx26-olive);
}
body.mx26-game .btn--accent:hover,
body.mx26-game .btn--accent:focus-visible{background:var(--mx26-olive-dark);border-color:var(--mx26-olive-dark);color:white}
body.mx26-game .btn--soft{background:#fffdf8;color:var(--mx26-ink);border-color:var(--mx26-rule)}
body.mx26-game .home-learn-btn{background:var(--mx26-charcoal);border-radius:999px;box-shadow:none;font-weight:700}
body.mx26-game .home-learn-btn:hover{transform:none;background:#242522;box-shadow:none}
body.mx26-game .hud{background:rgba(250,248,242,.96)}
body.mx26-game .hud-card--target{background:var(--mx26-charcoal);border-color:var(--mx26-charcoal)}
body.mx26-game .hud-card--target span{color:var(--mx26-olive-soft)}
body.mx26-game .hud-card--timer{background:#232420}
body.mx26-game .time-meter__fill{background:var(--mx26-olive)}
body.mx26-game .summary-dialog{background:var(--mx26-paper);border-color:var(--mx26-rule)}
body.mx26-game .summary-badge-card{border-radius:14px}
body.mx26-game .footer-note{color:var(--mx26-ink-soft)}
body.mx26-game :focus-visible{outline:2px solid var(--mx26-olive);outline-offset:2px}

/* Preserve the map/playfield itself. No override for #map, Leaflet tiles, SVG/canvas geometry. */

/* --------------------------- TOOL SKIN --------------------------- */
body.mx26-tool{
  font-family:var(--mx26-sans);
  --bg:#2d2e2a;
  --bg2:#32332f;
  --panel:#373832;
  --panel2:#30312d;
  --line:#606254;
  --txt:#f5f1e8;
  --muted:#b9b6ab;
  --a:var(--mx26-olive);
  --a2:#c1cf86;
  background:var(--bg);
}
body.mx26-tool .app-shell{max-width:1500px;padding:8px 12px;gap:8px}
body.mx26-tool .topbar{
  border-bottom:1px solid rgba(245,241,232,.18);
  padding:0 2px 7px;
}
body.mx26-tool .brand-icon{
  background:transparent;
  border:0;
  border-radius:0;
  padding:2px;
  width:28px;height:28px;
}
body.mx26-tool .kicker{
  color:#c1cf86;
  letter-spacing:.08em;
  font-size:9px;
  font-weight:700;
}
body.mx26-tool .kicker span{
  border-color:rgba(193,207,134,.36);
  color:#c1cf86;
  font-weight:600;
}
body.mx26-tool h1{
  font-family:var(--mx26-serif);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--mx26-ivory);
}
body.mx26-tool .pill{
  border-color:rgba(245,241,232,.16);
  background:transparent;
  color:#e9e5da;
  box-shadow:none;
  font-weight:650;
}
body.mx26-tool .pill.zaff{background:rgba(126,148,63,.13);border-color:rgba(193,207,134,.3)}
body.mx26-tool .card{
  background:#363732;
  border-color:rgba(245,241,232,.13);
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
body.mx26-tool .section-title h2{
  color:#c1cf86;
  text-transform:none;
  letter-spacing:.06em;
  font-size:11px;
  font-weight:700;
}
body.mx26-tool .section-title span{color:#aaa79d}
body.mx26-tool .drop-zone,
body.mx26-tool .stat-card,
body.mx26-tool .placeholder,
body.mx26-tool .control-group{
  background:rgba(255,255,255,.018);
  border-color:rgba(245,241,232,.105);
  border-radius:8px;
}
body.mx26-tool .drop-zone{border-style:dashed;border-color:rgba(193,207,134,.28)}
body.mx26-tool .control-group label{color:#e7e3d9;font-weight:650}
body.mx26-tool .control-group label span{color:#c1cf86}
body.mx26-tool select{
  background:#30312d;
  border-color:rgba(245,241,232,.15);
  color:#f5f1e8;
  border-radius:7px;
}
body.mx26-tool .btn,
body.mx26-tool .file-chip{
  border-radius:999px;
  border-color:rgba(245,241,232,.16);
  background:transparent;
  color:#f5f1e8;
  box-shadow:none;
  font-weight:700;
}
body.mx26-tool .btn.primary{
  background:var(--mx26-olive);
  color:#20221c;
  border-color:var(--mx26-olive);
}
body.mx26-tool .btn:hover,
body.mx26-tool .btn:focus-visible,
body.mx26-tool .file-chip:hover,
body.mx26-tool .file-chip:focus-within{border-color:#c1cf86}
body.mx26-tool .btn.primary:hover,
body.mx26-tool .btn.primary:focus-visible{background:#93a954;color:#171914}
body.mx26-tool .preview-canvas-wrap{
  border-color:rgba(245,241,232,.14);
  border-radius:9px;
  background-color:#282925;
}
body.mx26-tool input[type="range"]{accent-color:var(--mx26-olive)}
body.mx26-tool input[type="checkbox"]{accent-color:var(--mx26-olive)}
body.mx26-tool :focus-visible{outline:2px solid #c1cf86;outline-offset:2px}

@media(max-width:760px){
  body.mx26-game .page{width:100%}
  body.mx26-game .header{padding-inline:2px}
  body.mx26-game .home-copy h2{font-size:2.15rem}
  body.mx26-game .home-stage{padding:12px;gap:12px}
  body.mx26-game .home-play{padding:0 12px 12px}
}