
/* Mike 2026-10-27: in your face -- the screen goes dark but for the step's
   control (or the player's kingdom), clicks outside it are blocked, and the
   guide sits in the middle of the page, beside what it points at. Its own
   dialogs (z-index 9000) stay above the dark. */
#fs-panel{position:fixed;z-index:9600;left:0;top:0;width:min(560px,calc(100vw - 32px));display:none;padding:6px 10px 8px;user-select:none;box-shadow:0 12px 40px rgba(0,0,0,.8)}
#fs-panel .fs-top{display:flex;align-items:baseline;gap:.6em}
#fs-panel .fs-title{flex:1;font-size:26px;font-weight:700;color:#f4e4b8}
#fs-panel .fs-count{font-size:14px;color:#b79a56;white-space:nowrap}
#fs-panel .fs-fold{background:none;border:0;color:#C9A94E;font-size:20px;cursor:pointer;padding:0 .2em;line-height:1}
#fs-panel .fs-text{font-size:17px;line-height:1.45;color:#e8d9a8;margin:.45em 0 .25em}
#fs-panel .fs-say{font-size:17px;font-weight:700;color:#f0c877;margin:.4em 0 0}
#fs-panel .fs-say:empty{display:none}
#fs-panel .fs-ok{font-size:17px;font-weight:700;color:#9fd08a;margin:.3em 0 0}
#fs-panel .fs-btns{display:flex;flex-wrap:wrap;gap:6px 8px;margin:.7em 0 .1em}
#fs-panel .fs-btns .lp-btn{flex:1 1 0;min-width:96px;font-size:16px;padding:5px 4px;white-space:nowrap}
#fs-panel .fs-btns .lp-buy{flex-grow:1.6}
#fs-panel .lp-btn[disabled]{opacity:.45;cursor:default;filter:none}
#fs-panel.fold .fs-text,#fs-panel.fold .fs-say,#fs-panel.fold .fs-ok,#fs-panel.fold .fs-btns .lp-cancel{display:none}
#fs-panel.fold .fs-btns{margin:.35em 0 0}
#fs-panel.nudge{animation:fs-nudge .45s}
@keyframes fs-nudge{0%,100%{translate:0}20%{translate:-10px}40%{translate:9px}60%{translate:-6px}80%{translate:4px}}
#fs-veil{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:8990;pointer-events:none;display:none}
#fs-veil .fs-dark{fill:rgba(0,0,0,.62);fill-rule:evenodd;pointer-events:visiblePainted}
#fs-veil .fs-edge{fill:none;stroke:#f0c877;stroke-width:2.5;stroke-linejoin:round;pointer-events:none;filter:drop-shadow(0 0 5px rgba(240,200,119,.9))}
#fs-ring{position:fixed;z-index:8995;pointer-events:none;display:none;border:3px solid #f0c877;border-radius:10px;
  box-shadow:0 0 18px 4px rgba(240,200,119,.75);animation:fs-pulse 1.4s ease-in-out infinite}
@keyframes fs-pulse{0%,100%{box-shadow:0 0 10px 2px rgba(240,200,119,.55)}50%{box-shadow:0 0 26px 8px rgba(240,200,119,.95)}}
html.m #fs-panel{width:calc(100vw - 16px)}
html.m #fs-panel .fs-title{font-size:22px}
html.m #fs-panel .fs-text{font-size:16px}
