/* The village council: illustrated game steps, with the exit always reachable. */
#help{
  width:min(820px,96vw);max-width:none;max-height:calc(100dvh - 24px);
  padding:0;overflow:hidden;border:3px solid #243d47;border-top-width:3px;
  border-radius:24px;background:#29464d;color:#fff0cf;
  box-shadow:0 8px 0 #172d35,0 24px 70px #10283280;text-align:left;
}
#help[open]{display:flex;flex-direction:column;animation:council-enter .42s cubic-bezier(.2,.85,.3,1)}
#help .help-banner{
  position:relative;isolation:isolate;flex:none;display:grid;
  grid-template-columns:100px minmax(0,1fr) 100px;align-items:center;gap:8px;
  padding:14px 23px 12px;border-bottom:2px solid #cba461;
  background:linear-gradient(90deg,#28444ddb,#28444dd9),url('village-camp.svg') center 53%/cover;
}
#help .help-banner-copy{text-align:center}
#help .help-banner small{display:block;color:#f2cb80;font:700 12px/1.2 Village,system-ui;letter-spacing:.13em}
#help #helpTitle{font:700 clamp(26px,3.5vw,34px)/1.03 Village,system-ui;color:#fff0ca;margin:6px 0;text-shadow:0 2px #243640}
#help .help-banner p{font:400 17px/1.25 Village,system-ui;color:#dbe8df;margin:6px 0 0}
#help .help-character{display:block;width:100%;height:120px;object-fit:contain;filter:drop-shadow(0 5px 0 #182d3745)}
#help .help-banner .help-character:first-child{transform:rotate(-6deg)}
#help .help-banner .help-character:last-child{transform:rotate(5deg)}
#help .help-route{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:12px;margin:0;padding:18px;overflow:hidden;min-height:0}
#help .help-stop{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;min-height:125px;padding:14px 15px 13px 9px;border:2px solid #739a8e;border-radius:15px;background:#3d635e;box-shadow:0 3px 0 #182f3750}
#help .help-stop:nth-child(2){background:#3a5d77;border-color:#799fbc}
#help .help-stop:nth-child(3){background:#754d50;border-color:#c68c7b}
#help .help-stop:nth-child(4){background:#496542;border-color:#c7ae65}
#help .help-stop-art{display:flex;align-items:center;justify-content:center;min-width:0}
#help .help-stop-art .comic-art{width:66px;height:66px;vertical-align:middle}
#help .help-stop-art canvas{display:block;width:72px;height:88px;object-fit:contain}
#help .help-step-number{display:block;font:700 11px/1 Village,system-ui;letter-spacing:.12em;color:#e9d9ae;margin-bottom:5px}
#help .help-stop b{display:block;font:700 21px/1.05 Village,system-ui;color:#fff1ce}
#help .help-stop p{font:400 17px/1.25 Village,system-ui;color:#f3eee0;margin:6px 0 0}
#help .help-bottom{flex:none;border-top:1px solid #72918a;padding:12px 18px 16px;background:#243e47;text-align:center}
#help .help-versus{display:flex;align-items:center;justify-content:center;gap:8px;font:400 14px/1.25 Village,system-ui;color:#d9e4dc;border:0;margin:0;padding:0}
#help .help-versus .comic-art{flex:none;width:26px;height:26px}
#help #closeHelp{display:flex;align-items:center;justify-content:center;gap:10px;width:min(440px,100%);margin:10px auto 0;padding:12px 16px;border:2px solid #f0d59a;border-radius:13px;background:#e8b762;box-shadow:0 4px 0 #956841;color:#263f47;font:700 21px/1.15 Village,system-ui}
#help #closeHelp:hover{background:#f6ca7f;transform:translateY(-1px)}
#help #closeHelp:active{transform:translateY(2px);box-shadow:0 2px 0 #956841}
#help #closeHelp .comic-art{width:28px;height:28px;flex:none}
@keyframes council-enter{from{opacity:0;transform:translateY(24px) scale(.94)}70%{opacity:1;transform:translateY(-3px) scale(1.01)}to{opacity:1;transform:none}}
@media(max-width:570px){
  #help .help-banner{grid-template-columns:55px minmax(0,1fr) 55px;padding:12px 10px;gap:4px}
  #help .help-character{height:94px}
  #help .help-banner small{font-size:10px;letter-spacing:.07em}
  #help #helpTitle{font-size:25px}
  #help .help-banner p{font-size:15px}
  #help .help-route{grid-template-columns:1fr;padding:12px;gap:9px}
  #help .help-stop{grid-template-columns:60px minmax(0,1fr);min-height:95px;padding:10px;gap:10px}
  #help .help-stop-art canvas{width:58px;height:70px}
  #help .help-stop-art .comic-art{width:52px;height:52px}
  #help .help-stop b{font-size:20px}
  #help .help-stop p{font-size:16px}
  #help .help-step-number{font-size:10px;margin-bottom:3px}
  #help .help-bottom{padding:10px 12px 14px}
  #help .help-versus{font-size:13px}
  #help #closeHelp{font-size:19px;padding:11px 10px}
}
@media(max-height:650px) and (min-width:571px){
  #help .help-banner{padding:7px 18px}
  #help .help-character{height:90px}
  #help #helpTitle{font-size:28px}
  #help .help-route{padding:12px;gap:9px}
  #help .help-stop{min-height:105px;padding:9px}
  #help .help-stop-art canvas{height:75px}
  #help .help-stop p{font-size:16px}
  #help .help-bottom{padding:8px 12px 12px}
}
@media(prefers-reduced-motion:reduce){#help[open]{animation:none}#help #closeHelp:hover{transform:none}}

/* V17.32 : conseil compact, une seule vue. */
@media(max-width:570px){
 #help .help-banner{padding:8px 10px}#help .help-character{height:65px}
 #help #helpTitle{font-size:23px}#help .help-banner p{font-size:14px}
 #help .help-route{padding:8px;gap:6px}
 #help .help-stop{min-height:0;padding:7px;grid-template-columns:42px minmax(0,1fr);gap:8px}
 #help .help-stop-art canvas{width:40px;height:48px}#help .help-stop-art .comic-art{width:38px;height:38px}
 #help .help-stop b{font-size:17px}#help .help-stop p{font-size:14px;margin-top:3px}
 #help .help-bottom{padding:7px 10px 10px}#help #closeHelp{margin-top:6px;padding:8px;font-size:17px}
}
@media(max-height:500px){
 #help .help-banner{padding:4px 10px;grid-template-columns:45px 1fr 45px}#help .help-character{height:45px}
 #help #helpTitle{font-size:20px;margin:2px}#help #helpTitle br{display:none}#help .help-banner p{font-size:12px;margin:2px}
 #help .help-route{grid-template-columns:repeat(2,minmax(0,1fr));padding:6px;gap:5px}
 #help .help-stop{min-height:0;padding:6px;grid-template-columns:34px 1fr;gap:6px}
 #help .help-stop-art canvas,#help .help-stop-art .comic-art{width:32px;height:38px}
 #help .help-stop b{font-size:15px}#help .help-stop p{font-size:12px;margin-top:3px}
 #help .help-step-number{font-size:9px;margin-bottom:2px}#help .help-bottom{padding:5px 10px 8px}
 #help .help-versus{font-size:12px}#help #closeHelp{font-size:16px;padding:5px;margin-top:4px}
}