/* The Fart and Burp buttons (gas-panel.js). Colours come from the page through
   these variables; the defaults suit the website's purple player. */
.gas-panel{--gas-bg:#1b1433ee;--gas-line:#9671b8;--gas-text:#f2e8fc;--gas-muted:#cbb8e0;--gas-chip:#2a2043;--gas-accent:#d9f76a;
  position:absolute;left:12px;bottom:12px;z-index:3;width:198px;padding:9px 10px 8px;background:var(--gas-bg);border:1px solid var(--gas-line);
  border-radius:14px;color:var(--gas-text);box-shadow:0 6px 25px #0006;font:12px/1.35 'Segoe UI',sans-serif;user-select:none;-webkit-user-select:none}
.gas-panel *{box-sizing:border-box}
.gas-toggle{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;width:100%;cursor:pointer;font-weight:700;font-size:12px;letter-spacing:.3px;color:var(--gas-text);padding:1px 2px;border-radius:7px}
.gas-toggle:after{content:'▾';margin-left:auto;color:var(--gas-muted);transition:transform .2s}
.gas-toggle:focus-visible{outline:2px solid var(--gas-accent);outline-offset:2px}
.gas-panel.collapsed{width:auto;padding:6px 10px}
.gas-panel.collapsed .gas-body{display:none}
.gas-panel.collapsed .gas-toggle:after{transform:rotate(-90deg)}
.gas-body{margin-top:7px}
.gas-who{display:flex;gap:4px;margin-bottom:7px}
.gas-who button{flex:1;min-height:26px;padding:2px 6px;border:1px solid var(--gas-line);border-radius:8px;background:var(--gas-chip);color:var(--gas-muted);font:600 11px 'Segoe UI',sans-serif;cursor:pointer}
.gas-who button[aria-checked=true]{background:var(--gas-accent);border-color:var(--gas-accent);color:#1d2410}
.gas-actions{display:flex;gap:6px}
.gas-actions button{flex:1;min-height:40px;border-radius:11px;border:2px solid #0004;font:800 14px Fredoka,'Segoe UI',sans-serif;cursor:pointer;color:#1c2a0b;letter-spacing:.2px;
  box-shadow:0 3px 0 #0005,inset 0 2px 0 #fff6;transition:transform .08s,filter .15s}
.gas-actions button:hover{filter:brightness(1.08)}
.gas-actions button:active{transform:translateY(2px);box-shadow:0 1px 0 #0005,inset 0 2px 0 #fff6}
.gas-actions button:disabled{opacity:.45;cursor:default}
.gas-actions button:focus-visible{outline:3px solid var(--gas-accent);outline-offset:2px}
.gas-fart{background:linear-gradient(#c9f27a,#86c93e)}
.gas-burp{background:linear-gradient(#ffe48a,#f2b13c);color:#3a2604!important}
.gas-pop{animation:gas-pop .45s}
@keyframes gas-pop{30%{transform:scale(1.12) rotate(-4deg)}60%{transform:scale(.95) rotate(3deg)}}
.gas-strength{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;font-size:11px;color:var(--gas-muted)}
.gas-strength output{font-weight:800;color:var(--gas-text);font-size:12px}
.gas-panel[data-level="5"] .gas-strength output{color:#ff6b4a;animation:gas-wobble .5s infinite}
@keyframes gas-wobble{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.gas-panel .gas-slider{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;margin:7px 0 3px;border-radius:5px;cursor:pointer;
  background:linear-gradient(90deg,#9fdc4a,#ffd34d 50%,#ff5a3c);outline:none;border:0}
.gas-panel .gas-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #3f7a10;box-shadow:0 2px 4px #0006;
  transform:scale(calc(.85 + var(--gas-level,0)*.45))}
.gas-panel .gas-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #3f7a10;box-shadow:0 2px 4px #0006}
.gas-panel .gas-slider:focus-visible{outline:2px solid var(--gas-accent);outline-offset:3px}
.gas-scale{display:flex;justify-content:space-between;font-size:9px;color:var(--gas-muted);letter-spacing:.4px;text-transform:uppercase}
.gas-note{margin:4px 0 0;font-size:10px;color:var(--gas-accent);min-height:0}
.gas-note:empty{display:none}
@media(max-width:680px){
  .gas-panel{left:6px;bottom:6px;width:158px;padding:6px 7px;border-radius:11px;font-size:10px}
  .gas-panel.collapsed{padding:4px 8px}
  .gas-toggle{font-size:11px}
  .gas-body{margin-top:5px}
  .gas-actions button{min-height:32px;font-size:12px;border-radius:9px}
  .gas-who button{min-height:22px;font-size:10px}
  .gas-strength{margin-top:5px}
}
@media(prefers-reduced-motion:reduce){.gas-pop,.gas-panel[data-level="5"] .gas-strength output{animation:none}}