/* БУРМАЛДАGRADER — glow layer over the black & white theme (loaded after style.css).
   Colours stay as they are; lit parts get a white neon glow: a white-hot core and
   a halo whose layers fall off roughly with the square of the distance. Unlit
   parts stay plain. --amb (neon.js) is how much light the tubes throw on the
   page; it dips while tubes strike or sputter. Remove the <link> to switch off. */

:root {
  --g: 255, 255, 255;          /* glow colour (white) */
  --amb: 1;
  --halo-text: 0 0 1px #fff, 0 0 4px rgba(var(--g), .75), 0 0 10px rgba(var(--g), .45), 0 0 22px rgba(var(--g), .25), 0 0 44px rgba(var(--g), .12);
  --halo-box: 0 0 2px rgba(var(--g), .9), 0 0 8px rgba(var(--g), .45), 0 0 20px rgba(var(--g), .22), 0 0 46px rgba(var(--g), .1),
              inset 0 0 8px rgba(var(--g), .25);
  --halo-soft: 0 0 1px rgba(var(--g), .5), 0 0 12px rgba(var(--g), .12);
  --halo-svg: drop-shadow(0 0 1px #fff) drop-shadow(0 0 5px rgba(255, 255, 255, .7)) drop-shadow(0 0 14px rgba(255, 255, 255, .35));
}
/* light scheme: a white glow on a white page is invisible, so it turns into a soft dark aura */
@media (prefers-color-scheme: light) {
  :root {
    --g: 0, 0, 0;
    --halo-text: 0 0 1px rgba(0, 0, 0, .25), 0 0 8px rgba(0, 0, 0, .12);
    --halo-box: 0 0 0 1px rgba(0, 0, 0, .06), 0 4px 18px rgba(0, 0, 0, .12);
    --halo-svg: drop-shadow(0 2px 6px rgba(0, 0, 0, .2));
  }
}

/* light the tubes throw on the page behind them */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--amb);
  background: radial-gradient(70% 45% at 50% 0%, rgba(var(--g), .06), transparent 70%);
  transition: opacity .08s linear;
}

/* ---------- glowing text ---------- */

h1, .panel h2, .chance-label, .logo, .auth-logo { text-shadow: var(--halo-text); }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { width: 30px; height: 30px; flex: none; fill: currentColor; filter: var(--halo-svg); }
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 12px; }
.auth-logo b { font-weight: inherit; opacity: .7; }
.auth-logo .logo-mark { width: 40px; height: 40px; }
.gauge-center .logo-mark { width: 34px; height: 34px; }

/* ---------- panels: a faint tube edge ---------- */

.panel, .gauge-panel { position: relative; box-shadow: var(--halo-soft); }
.panel::after, .gauge-panel::after {     /* glare from the pointer on the glass (neon.js) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glare, 0);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--g), .05), transparent 65%);
  transition: opacity .3s;
}

/* ---------- navigation ---------- */

.nav-item:hover { text-shadow: var(--halo-text); }
.nav-item:hover .ic { filter: var(--halo-svg); }
.nav-item.active { box-shadow: var(--halo-box); }
.icon-btn:hover { filter: var(--halo-svg); }
@media (max-width: 899px) {
  .nav-item.active { box-shadow: none; }
  .dock-thumb { box-shadow: var(--halo-box); }
  .dock-thumb.grabbed { box-shadow: var(--halo-box), 0 0 60px rgba(var(--g), .3); }
  .nav-rail { box-shadow: var(--shadow), inset 0 0 0 1px var(--border), 0 0 22px rgba(var(--g), .07); }
}

.balance { box-shadow: var(--halo-soft); text-shadow: var(--halo-text); }

/* ---------- buttons: lit tubes; a press is a current surge ---------- */

.btn-primary { box-shadow: var(--halo-box); transition: transform .3s var(--ease-spring), box-shadow .15s, filter .15s, border-radius .3s var(--ease); }
.btn-primary:hover:not(:disabled) { box-shadow: var(--halo-box), 0 0 60px rgba(var(--g), .18); }
.btn-primary:active:not(:disabled) { filter: brightness(1.15); box-shadow: var(--halo-box), 0 0 90px rgba(var(--g), .35); transition-duration: .04s; }
.btn-primary:disabled { box-shadow: none; }
.btn-small:hover { box-shadow: var(--halo-box); text-shadow: var(--halo-text); }
.btn-small.active { box-shadow: var(--halo-box); }

/* ---------- item cards: dark until lit ---------- */

.item-card:hover { box-shadow: var(--halo-soft); }
.item-card.selected { box-shadow: var(--halo-box); }
.item-card:hover img { filter: drop-shadow(0 0 10px rgba(var(--g), .3)); }

/* ---------- upgrade gauge: only the lit arc glows ---------- */

.gauge-ring { filter: var(--halo-svg); }
.gauge-arrow { box-shadow: 0 0 3px #fff, 0 0 10px rgba(var(--g), .7), 0 0 24px rgba(var(--g), .35); }
.gauge-center { box-shadow: var(--halo-soft); }

/* ---------- results keep their green / red, now as glowing tubes ---------- */

.result-banner.win {
  box-shadow: 0 0 2px var(--success), 0 0 14px color-mix(in srgb, var(--success) 45%, transparent), inset 0 0 12px color-mix(in srgb, var(--success) 25%, transparent);
  text-shadow: 0 0 6px color-mix(in srgb, var(--success) 80%, transparent), 0 0 18px color-mix(in srgb, var(--success) 40%, transparent);
  animation: pop-in .45s var(--ease-spring), neon-ignite 1.1s linear;
}
.result-banner.lose {
  box-shadow: 0 0 2px var(--danger), 0 0 14px color-mix(in srgb, var(--danger) 45%, transparent), inset 0 0 12px color-mix(in srgb, var(--danger) 25%, transparent);
  text-shadow: 0 0 6px color-mix(in srgb, var(--danger) 80%, transparent), 0 0 18px color-mix(in srgb, var(--danger) 40%, transparent);
  animation: pop-in .45s var(--ease-spring), neon-sputter 1.4s linear;   /* a dying tube */
}
.toast { box-shadow: var(--halo-box); }

/* ---------- inputs: the edge lights up on focus ---------- */

.auth-card input:focus, .inline-form input:focus, .inline-form select:focus, .admin-row input:focus,
.helper-form input:focus, .partner-form input:focus, .partner-calc input:focus {
  box-shadow: 0 0 2px rgba(var(--g), .8), 0 0 12px rgba(var(--g), .25);
}

/* ---------- physics: striking, sputtering ---------- */

@keyframes neon-ignite {
  0% { opacity: .08; } 6% { opacity: .9; } 8% { opacity: .15; } 13% { opacity: .85; } 15% { opacity: .25; }
  22% { opacity: 1; } 27% { opacity: .55; } 31% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes neon-buzz {
  0% { opacity: 1; } 12% { opacity: .35; } 16% { opacity: .95; } 30% { opacity: .5; } 34% { opacity: 1; }
  60% { opacity: .85; } 64% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes neon-sputter {
  0% { opacity: 1; } 10% { opacity: .3; } 14% { opacity: 1; } 40% { opacity: .5; } 44% { opacity: 1; } 100% { opacity: 1; }
}
.neon-off { opacity: .08; }
.neon-ignite { animation: neon-ignite var(--ign-dur, .9s) linear both; }
.neon-buzz { animation: neon-buzz .55s linear; }

@media (prefers-reduced-motion: reduce) {
  .neon-ignite, .neon-buzz, .result-banner.win, .result-banner.lose { animation: none !important; }
  .neon-off { opacity: 1; }
}

/* ---------- everything glows (dark scheme): each text glows in its own colour ---------- */

@media not (prefers-color-scheme: light) {
  :root {
    /* currentColor keeps the theme: white text glows white, grey glows faint, green glows green */
    --halo-all: 0 0 1px color-mix(in srgb, currentColor 55%, transparent),
                0 0 6px color-mix(in srgb, currentColor 40%, transparent),
                0 0 16px color-mix(in srgb, currentColor 18%, transparent);
    --halo-ic: drop-shadow(0 0 2px color-mix(in srgb, currentColor 70%, transparent)) drop-shadow(0 0 8px color-mix(in srgb, currentColor 30%, transparent));
  }
  body { text-shadow: var(--halo-all); }       /* inherited by all text */
  .ic { filter: var(--halo-ic); }
  input, select, textarea, button { text-shadow: inherit; }

  /* dark text on white plates: the plate glows, the letters stay crisp */
  .btn-primary, .nav-item.active, .nav-item.under-thumb, .toast, .chip-inverse,
  .btn-primary *, .nav-item.active *, .nav-item.under-thumb * { text-shadow: none; }
  .nav-item.active .ic, .nav-item.under-thumb .ic { filter: none; }

  /* items: a soft glow at rest, the selected one burns bright */
  .item-card img { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .12)); }
  .item-card.selected {
    border-color: #fff;
    box-shadow: var(--halo-box), 0 0 40px rgba(255, 255, 255, .18);
  }
  .item-card.selected .item-name, .item-card.selected .item-price {
    color: #fff;
    text-shadow: 0 0 1px #fff, 0 0 5px rgba(255, 255, 255, .85), 0 0 14px rgba(255, 255, 255, .5), 0 0 30px rgba(255, 255, 255, .25);
  }
  .item-card.selected img { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)) drop-shadow(0 0 16px rgba(255, 255, 255, .45)); }
}