/* ═══════════════════════════════════════
   WoGL — World of GL
   wogl.io | worldofgl.com | mundogl.com
   hello@wogl.io | hola@mundogl.com

   Proprietary. All rights reserved.
   ═══════════════════════════════════════ */

/* The footer's help in the gold of the house: the bug report and Fuel, beside each other. Every page of the new
   design that carries them loads this sheet (site.css imports it for the home and the school; the Toolkit, the Shader
   Maker and Portals LITE link it). */
/* ── Bug report (wogl-bug-report.js, shared with the museum), gold variant: the ladybug in the footer and the dialog,
   its glow, the field focus and the sent message. The widget injects its own styles later in the head, so each rule
   is one step more specific (html …). The error line keeps its warning red. ── */
html .wogl-bug-ladybug { filter: drop-shadow(0 0 7px rgba(232, 200, 154, .38)); }
html .wogl-bug-wing { border-color: rgba(232, 200, 154, .5);
  background: radial-gradient(circle at 27% 35%, #1b130c 0 9%, transparent 10%), radial-gradient(circle at 72% 34%, #1b130c 0 9%, transparent 10%),
    radial-gradient(circle at 28% 72%, #1b130c 0 8%, transparent 9%), radial-gradient(circle at 72% 70%, #1b130c 0 8%, transparent 9%),
    linear-gradient(90deg, #f1d9ae 0 47%, #1b130c 48% 52%, #d4a574 53% 100%);
  box-shadow: inset 0 2px 5px rgba(255, 244, 226, .35), 0 0 10px rgba(232, 200, 154, .25); }
html .wogl-bug-dialog { background: rgba(9, 7, 5, .97); box-shadow: 0 32px 100px rgba(0, 0, 0, .76), 0 0 70px rgba(212, 165, 116, .12); }
html .wogl-bug-panel { background: radial-gradient(100% 90% at 90% 0, rgba(212, 165, 116, .14), transparent 64%), linear-gradient(145deg, rgba(22, 16, 11, .98), rgba(7, 5, 4, .99)); }
html .wogl-bug-form textarea { background: rgba(5, 4, 3, .78); }
html .wogl-bug-form textarea:focus { border-color: rgba(232, 200, 154, .65); box-shadow: 0 0 0 3px rgba(232, 200, 154, .08), 0 0 30px rgba(232, 200, 154, .07); }
html .wogl-bug-status[data-state="success"] { color: var(--gold); }

/* ── Fuel (fuel.js): a gold pill with a drop under the bug; its dialog matches the bug's ── */
/* bug and fuel side by side, keeping the footer on one line */
.foot-help { display: inline-flex; align-items: center; gap: var(--s2); }
.foot .foot-line { align-items: center; }
.fuel-trigger { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(232, 200, 154, .2); border-radius: 999px;
  background: rgba(232, 200, 154, .025); color: var(--gold); cursor: pointer; font: 600 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.fuel-trigger:hover, .fuel-trigger:focus-visible { outline: none; border-color: rgba(232, 200, 154, .52); background: rgba(232, 200, 154, .075); transform: translateY(-1px); }
.fuel-drop { width: 15px; height: 18px; flex: none; filter: drop-shadow(0 0 7px rgba(232, 200, 154, .38)); overflow: visible; }
.fuel-glint { stroke-dasharray: 9; stroke-dashoffset: 9; animation: fuel-glint 4.8s ease-in-out infinite; }
@keyframes fuel-glint { 0%, 55% { stroke-dashoffset: 9; opacity: 0; } 70% { opacity: .9; } 85%, 100% { stroke-dashoffset: -9; opacity: 0; } }
@media (max-width: 560px) { .fuel-trigger { width: 44px; padding: 0; } .fuel-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .fuel-glint { animation: none; } }
.fuel-dialog { width: min(560px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); margin: auto; padding: 0; overflow: auto; border: 1px solid rgba(232, 200, 154, .28); border-radius: 28px;
  background: rgba(9, 7, 5, .97); color: var(--text); box-shadow: 0 32px 100px rgba(0, 0, 0, .76), 0 0 70px rgba(212, 165, 116, .12); }
.fuel-dialog::backdrop { background: rgba(3, 2, 1, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.fuel-panel { position: relative; background: linear-gradient(145deg, rgba(22, 16, 11, .98), rgba(7, 5, 4, .99)); }
.fuel-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 42px; height: 42px; border: 1px solid rgba(232, 200, 154, .25); border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: rgba(240, 232, 220, .8); font: 300 25px/1 var(--sans); cursor: pointer; }
.fuel-close:hover, .fuel-close:focus-visible { outline: none; color: var(--cream); border-color: rgba(232, 200, 154, .6); }
/* route over the live scene: five equal columns, the line runs from 10% to 90%, gold up to the next stop (50%) */
.fuel-art { position: relative; height: 230px; overflow: hidden; border-bottom: 1px solid var(--line); }
.fuel-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fuel-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(9, 7, 5, .85)); pointer-events: none; }
.fuel-next { position: absolute; z-index: 1; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(232, 200, 154, .35);
  background: rgba(0, 0, 0, .5); font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.fuel-next i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 1.6s ease-in-out infinite; }
.fuel-next b { font-weight: 500; color: var(--gold); }
.fuel-route { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 18px; display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; }
.fuel-route::before, .fuel-route::after { content: ''; position: absolute; top: 5px; height: 1px; }
.fuel-route::before { left: 10%; right: 10%; background: repeating-linear-gradient(90deg, rgba(232, 200, 154, .35) 0 4px, transparent 4px 9px); }
.fuel-route::after { left: 10%; width: 40%; height: 2px; top: 4.5px; background: linear-gradient(90deg, var(--gold-2), var(--gold) 40%, #fff4e2 50%, var(--gold) 60%) 0 0 / 200% 100%;
  box-shadow: 0 0 10px rgba(232, 200, 154, .6); animation: fuel-flow 2.4s linear infinite; }
@keyframes fuel-flow { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.fuel-route li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; }
.fuel-route i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(232, 200, 154, .5); background: #0b0806; }
.fuel-route .done i { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 10px rgba(232, 200, 154, .7); }
.fuel-route .next i { border: 2px solid var(--gold); background: #0b0806; box-shadow: 0 0 0 4px rgba(232, 200, 154, .15); animation: fuel-ring 1.8s ease-in-out infinite; }
@keyframes fuel-ring { 50% { box-shadow: 0 0 0 7px rgba(232, 200, 154, .05); } }
.fuel-route span { font: 500 9px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.fuel-route .done span { color: var(--cream); }
.fuel-route .next span { color: var(--gold); }
.fuel-body { padding: var(--s6) clamp(24px, 5vw, 44px) clamp(24px, 5vw, 40px); }
.fuel-k { display: flex; align-items: center; gap: var(--s2); font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.fuel-k .fuel-drop { width: 12px; height: 15px; }
.fuel-title { margin-top: var(--s3); font: 300 clamp(36px, 8vw, 54px)/.98 var(--sans); letter-spacing: -.035em; color: var(--cream); }
.fuel-lead { margin-top: var(--s4); font-size: 17px; line-height: 1.55; color: var(--muted); }
.fuel-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: var(--s5); border: 1px solid rgba(232, 200, 154, .5); border-radius: 999px;
  background: linear-gradient(135deg, #efd5ab, #cda878); color: #0b0708; font: 700 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; transition: filter .2s, transform .2s; }
a.fuel-go:hover { filter: brightness(1.06); transform: translateY(-1px); }
@media (max-width: 560px) { .fuel-art { height: 190px; } .fuel-route span { display: none; } }
@media (prefers-reduced-motion: reduce) { .fuel-route::after, .fuel-route .next i, .fuel-next i { animation: none; } }