/* guide.css: the user guide (js/guide.js), in the game's How to play panel and on docs/user-guide.html.
   Uses the game's panel colours (style.css tokens) with its own fallbacks so the shareable page needs nothing else.
   No spaced-caps eyebrows, no numbering, no pills, no accent side borders; nothing overlaps from 320 px up.
   Alignment and side margins are logical (start, inline-end), so Arabic mirrors: text, links and the header's room for
   the close button follow the reading direction (lead's RTL review, Oct 26). */
.pguide{--g-bg:var(--panel,#111417);--g-deep:var(--panel-deep,#1a1f24);--g-line:var(--nj-line,#58606a);--g-edge:var(--panel-edge,#3a4149);
  --g-ink:#fafafa;--g-mute:var(--nj-grey,#aab1b8);--g-orange:var(--nj-orange,#ff5b1f);--g-green:var(--nj-green,#5dba63);--g-gold:#ffd96b;
  color:var(--g-ink);font-family:var(--font-ui,"Archivo",system-ui,sans-serif);text-align:start;min-width:0}
.pguide *{box-sizing:border-box}
.pguide .g-head{display:flex;align-items:center;gap:12px;margin:0 0 10px;margin-inline-end:44px;min-height:34px}
.pguide .g-title{margin:0;font-size:22px;line-height:1.2;color:var(--g-ink);flex:1 1 auto;min-width:0}
.pguide .g-tools{flex:none}
.pguide .g-all{font:inherit;font-size:13px;color:var(--g-ink);background:transparent;border:1px solid var(--g-line);border-radius:3px;padding:8px 12px;min-height:40px;cursor:pointer}
.pguide .g-all:hover{border-color:var(--g-ink)}
.pguide .g-toc{margin:0 0 12px;padding:10px 12px 6px;background:var(--g-deep);border:1px solid var(--g-edge);border-radius:3px}
.pguide .g-toch{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--g-ink)}
.pguide .g-toc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));column-gap:16px}
.pguide .g-toc a{display:flex;align-items:center;min-height:40px;padding:6px 0;color:var(--g-ink);text-decoration:none;font-size:14px;line-height:1.3;border-bottom:1px solid rgba(255,255,255,.08)}
.pguide .g-toc a:hover,.pguide .g-toc a:focus-visible{color:var(--g-gold);text-decoration:underline;text-underline-offset:3px}
.pguide .g-sec{border-top:1px solid var(--g-edge);scroll-margin-top:8px}
.pguide .g-sh{margin:0}
.pguide .g-tog{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:10px 2px;font:inherit;font-size:17px;font-weight:700;
  color:var(--g-ink);background:transparent;border:0;text-align:start;cursor:pointer}
.pguide .g-tog:hover span,.pguide .g-tog:focus-visible span{color:var(--g-gold)}
.pguide .g-tog i{flex:none;width:10px;height:10px;border-right:2px solid var(--g-mute);border-bottom:2px solid var(--g-mute);transform:rotate(45deg);margin:0 0 4px;margin-inline-end:6px;transition:transform .15s}
.pguide .g-sec.open .g-tog i{transform:rotate(-135deg);margin-bottom:-4px}
.pguide .g-in{padding:0 0 14px}
.pguide .g-in[hidden]{display:none}
.pguide .g-p{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--g-mute)}
.pguide .g-rows{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:760px){ .pguide .g-rows{grid-template-columns:1fr 1fr} }
.pguide .g-row{display:grid;grid-template-columns:60px minmax(0,1fr);gap:12px;align-items:center;padding:8px 10px;background:var(--g-deep);border:1px solid rgba(255,255,255,.08);border-radius:3px;min-width:0}
.pguide .g-tx{min-width:0}
.pguide .g-tx b{display:block;font-size:14px;line-height:1.3;margin:0 0 2px;color:var(--g-ink)}
.pguide .g-tx span{display:block;font-size:13px;line-height:1.45;color:#d9d4c4;overflow-wrap:break-word}
.pguide .g-top{display:inline-flex;align-items:center;min-height:40px;margin-top:6px;font-size:13px;color:var(--g-mute);text-decoration:underline;text-underline-offset:3px}
.pguide .g-top:hover,.pguide .g-top:focus-visible{color:var(--g-gold)}
.pguide a:focus-visible,.pguide button:focus-visible{outline:2px solid var(--g-gold);outline-offset:2px}
/* icon box: 60 x 52, every icon fits inside it and never touches the text */
.pguide .g-ic{width:60px;height:52px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.pguide .g-ic canvas{width:44px;height:44px}
.pguide .g-ic img{width:44px;height:44px;object-fit:contain}
.pguide .g-ic.g-crop img{width:52px;height:52px;object-fit:cover;border-radius:3px;border:1px solid rgba(255,255,255,.12)}
.pguide .g-ic.g-miss{outline:1px dashed rgba(255,255,255,.25)}
.pguide .g-kc{flex-wrap:wrap;gap:2px}
.pguide .g-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.pguide kbd{display:inline-block;min-width:18px;padding:0 4px;font-family:var(--font-mono,"JetBrains Mono",Menlo,monospace);font-size:11px;line-height:18px;text-align:center;color:#fafafa;
  background:#24261c;border:1px solid #4a4c3f;border-bottom-width:2px;border-radius:3px}
/* small copies of the round's controls, with the game's own colours (style.css #hud, #dashBtn, #pauseBtn, #bagbar...) */
.pguide .g-hud{font-family:var(--font-mono,"JetBrains Mono",Menlo,monospace)}
.gh-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:58px;min-width:46px;padding:3px 4px;background:rgba(23,34,43,.92);border:1px solid rgba(201,162,39,.55);border-radius:5px;color:#f2ead6;text-align:center;line-height:1.1}
.gh-chip small{font-size:7px;opacity:.8;text-transform:uppercase;white-space:nowrap}
.gh-chip b{font-size:10px;overflow-wrap:anywhere}
.gh-btn{display:inline-flex;align-items:center;justify-content:center;max-width:58px;padding:4px 5px;font-size:9px;line-height:1.15;font-weight:700;text-align:center;color:#fafafa;background:transparent;border:1px solid var(--g-line,#58606a);border-radius:3px}
.gh-dash{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:2px solid #ffd96b;background:rgba(23,34,43,.92);color:#f2ead6;box-shadow:0 0 0 2px rgba(255,217,107,.35)}
.gh-dash small{font-size:7px;font-weight:700}
.gh-sq{display:flex;align-items:center;justify-content:center;gap:4px;width:32px;height:32px;border-radius:7px;border:2px solid #0e1619;background:rgba(23,34,43,.92)}
.gh-sq i{width:4px;height:12px;background:#f2ead6;border-radius:1px}
.gh-pill,.gh-save,.gh-warn,.gh-plate{display:inline-block;max-width:58px;padding:3px 5px;font-size:8px;line-height:1.2;font-weight:700;text-align:center;border-radius:4px;overflow-wrap:anywhere}
.gh-pill{color:#ffd96b;background:rgba(14,15,11,.85);border:1px solid rgba(255,217,107,.6)}
.gh-save{color:#9be59f;background:rgba(14,15,11,.85);border:1px solid rgba(255,255,255,.2)}
.gh-warn{color:#17222b;background:#ffd96b;border:1px solid #0e1619}
.gh-plate{color:#f2ead6;background:rgba(14,15,11,.6);border:1px dashed rgba(242,234,214,.7)}
.gh-combo{font-family:var(--font-display,"Archivo Black",sans-serif);font-size:20px;color:#ffd96b;text-shadow:0 2px 0 #0e1619}
.gh-count{font-family:var(--font-display,"Archivo Black",sans-serif);font-size:28px;color:#f2ead6;text-shadow:0 2px 0 #0e1619}
.gh-bar{display:block;width:52px;height:12px;border:2px solid #0e1619;border-radius:6px;background:rgba(23,34,43,.85);overflow:hidden}
.gh-bar i{display:block;width:65%;height:100%;background:linear-gradient(180deg,#2fa392,#1f7a6d)}
.gh-jb{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:6px;background:#1f7a6d;border:2px solid #0e1619;color:#f2ead6;font-weight:700;font-size:12px}
.gh-arrow{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:18px solid #ffd96b;filter:drop-shadow(0 2px 0 #0e1619)}
.gh-pad{width:44px;height:24px;border:2px dashed #7fe8d4;border-radius:50%;transform:skewX(-8deg)}
.gh-rank{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#17222b;border:2px solid #ffd96b;color:#ffd96b;font-family:var(--font-display,"Archivo Black",sans-serif);font-size:20px}
.gh-wheel{width:40px;height:40px;border-radius:50%;border:2px solid #0e1619;background:conic-gradient(#5dba63 0 30deg,#f2c94c 0 60deg,#4fa3c7 0 90deg,#b48cff 0 120deg,#5dba63 0 150deg,#ff5b1f 0 180deg,#4fa3c7 0 210deg,#ffb300 0 240deg,#5dba63 0 270deg,#f2c94c 0 300deg,#b48cff 0 330deg,#ff5b1f 0 360deg)}
.gh-stick{position:relative;width:40px;height:40px;border-radius:50%;border:2px solid rgba(242,234,214,.5)}
.gh-stick i{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 2px;border-radius:50%;background:rgba(242,234,214,.85)}
.gh-tap{position:relative;width:40px;height:40px}
.gh-tap i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#ffd96b;box-shadow:0 0 0 6px rgba(255,217,107,.35),0 0 0 12px rgba(255,217,107,.15)}
.gh-bank{display:flex;align-items:center;gap:3px;padding:3px 4px;border-radius:5px;background:rgba(23,34,43,.92);border:1px solid rgba(255,255,255,.2);color:#f2ead6}
.gh-bank small{font-size:7px}
.gh-bank b{display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:#ffd96b;color:#17222b;font-size:9px}
/* in the game: the How to play panel is wider than the other panels so two columns fit on a computer */
#helpV .panel.guidepanel{width:min(900px,100%)}
/* the close button rides a solid strip at the top of the panel, so the guide scrolls under the strip, never under the button */
#helpV .panel.guidepanel>.gbar{position:sticky;top:-14px;z-index:3;display:flex;justify-content:flex-end;align-items:center;height:48px;margin:-14px -14px 0;padding:0 10px;background:var(--panel,#111417);border-bottom:1px solid var(--panel-edge,#3a4149)}
#helpV .panel.guidepanel>.gbar .x{position:static;float:none;margin:0;flex:none}
#helpV .panel.guidepanel .pguide .g-head{margin:10px 0}
@media (max-width:420px){
  .pguide .g-title{font-size:19px}
  .pguide .g-row{grid-template-columns:56px minmax(0,1fr);gap:10px;padding:8px}
  .pguide .g-ic{width:56px}
}
/* text floor (UI/UX report item 4, Oct 24): the small copies of the HUD carry their words at 11 px like the real HUD does;
   the chips and pills get a little more width so the longer labels wrap onto two lines at most */
.gh-chip small,.gh-dash small,.gh-bank small,.gh-chip b,.gh-btn,.gh-pill,.gh-save,.gh-warn,.gh-plate,.gh-bank b{font-size:11px}
.gh-chip,.gh-btn,.gh-pill,.gh-save,.gh-warn,.gh-plate{max-width:72px}
.gh-dash{width:44px;height:44px}
.gh-bank b{width:16px;height:16px}