/* v3-grid: 9-square floor grid (templates/partials/floorgrid.html, static/js/floorgrid.js) */
:root{--fg-l:#4fc3ff;--fg-r:#ff7a59;--fg-tape:#e9c98a}
.fg{margin-bottom:16px}
.fg h2{margin:0;font-size:1.25rem}
.fg-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.fg-toggle{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.fg-toggle button{min-height:44px;padding:8px 18px;border-radius:999px;background:transparent;color:var(--muted)}
.fg-toggle button[aria-pressed="true"]{background:var(--gold);color:#24180b}
.fg-pats,.fg-speed{display:flex;flex-wrap:wrap;gap:8px}
.fg-pats{margin-bottom:12px}
.fg-pats button,.fg-speed button{min-height:44px;padding:8px 14px;font-size:14px}
.fg-pats button[aria-pressed="true"],.fg-speed button[aria-pressed="true"]{outline:2px solid var(--gold);outline-offset:-2px;color:var(--gold)}
.fg-stage{display:grid;grid-template-columns:1fr;gap:8px;align-items:center}
.fg-svg{display:block;width:100%;max-width:380px;height:auto;margin:0 auto;touch-action:manipulation}
.fg-edge{fill:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em}
.fg-sq{fill:rgba(255,255,255,.03);stroke:var(--fg-tape);stroke-width:5;stroke-dasharray:none;transition:fill .15s}
.fg-sq-mid{fill:rgba(255,194,74,.08)}
.fg-sq.fg-on-l{fill:rgba(79,195,255,.22)}
.fg-sq.fg-on-r{fill:rgba(255,122,89,.24)}
.fg-foot .fg-shoe{stroke:#14100f;stroke-width:2.5}
.fg-foot-l .fg-shoe{fill:var(--fg-l)}
.fg-foot-r .fg-shoe{fill:var(--fg-r)}
.fg-letter{font-size:20px;font-weight:900;fill:#14100f;pointer-events:none}
.fg-foot{opacity:.62}
.fg-foot.is-active{opacity:1}
.fg-foot.is-active .fg-shoe{stroke:#fff;stroke-width:3.5}
.fg-live .fg-foot{transition:transform .2s ease-out,opacity .15s}
.fg-side{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.fg-count{font-size:64px;line-height:1;font-weight:900;color:var(--hot);min-width:1.1em;text-align:center}
.fg-count-one{color:var(--gold)}
.fg-count-pause{color:var(--muted)}
.fg-say{flex:1 1 160px;margin:0;color:#fff4ec;font-size:1.15rem;font-weight:750}
.fg-key{flex-basis:100%;color:var(--muted);font-size:14px;display:flex;align-items:center;gap:6px}
.fg-key span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;color:#14100f;font-weight:900;font-size:13px}
.fg-key .fg-key-l{background:var(--fg-l)}
.fg-key .fg-key-r{background:var(--fg-r);margin-left:8px}
.fg-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.fg-controls [data-fg-play]{min-width:140px}
.fg-note{color:var(--muted);font-size:14px;margin:10px 0 0}
.fg-ready .fg-foot{opacity:.9}
.fg-tip{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.fg-tip h3{margin:0 0 4px}
.fg-tip p{margin:0}
.fg-tip .fg-tip-small{color:var(--muted);font-size:14px;margin-top:6px}
.fg-tip-svg{flex:0 0 84px;width:84px;height:84px}
.fg-tip-svg rect{fill:none;stroke:var(--fg-tape);stroke-width:2.5}
.fg-tip-l{fill:var(--fg-l)}
.fg-tip-r{fill:var(--fg-r)}
.fg-panel{margin:16px 0}
.fg-panel>summary{cursor:pointer;font-weight:800;font-size:1.1rem;min-height:44px;display:flex;align-items:center}
.fg-panel[open]>summary{margin-bottom:12px}
.fg-panel .fg{margin:0}
@media (min-width:760px){
  .fg-stage{grid-template-columns:minmax(0,380px) 1fr;gap:28px}
  .fg-side{flex-direction:column;align-items:flex-start}
  .fg-count{font-size:110px;text-align:left}
  .fg-say{flex:none;font-size:1.35rem}
}
@media (max-width:420px){
  .card.fg,.fg-panel{padding:18px}
  .fg-tip{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  .fg-live .fg-foot,.fg-sq{transition:none}
}