/* feel-bright.css — FEEL-FX brightness layer for the Shity Casino house slots.
 *
 * ADDITIVE ONLY. This file is loaded AFTER every other stylesheet on the
 * slot pages (see FEEL-FX.md), so equal-specificity rules here win by
 * cascade order. It edits no existing file and no existing rule: if this
 * file is removed, the pages return to exactly their previous look.
 *
 * Defensive by design: every rule targets markup that slots-stage.js /
 * slots-anim.js build at runtime (#slotLights / .sl-bulb, #stageBox,
 * .rcell.win-cell) or lobby markup (.tile / .tile-art). If a class or
 * element is absent, the rule simply matches nothing and the page is
 * unchanged. Colours go through the page's own custom properties with
 * literal fallbacks, so a missing --accent / --gold2 never breaks a rule:
 *   --accent  per-game accent, set inline on #stageBox by slots-stage.js
 *             from lib/slots-art.js (absent -> gold fallback)
 *   --gold2   bright gold, defined in games-boss3.css / boss2-bridge.css
 *   --gold    gold, defined in casino.css
 *
 * Source facts this was written against (inspected first-hand, live tree
 * 2026-11-05): the marquee is built by slots-stage.js as
 *   #slotLights.slot-lights > .sl-side.sl-{top,bottom,left,right}
 *     > span.sl-bulb  (16 + 16 + 7 + 7 bulbs)
 * and styled by slots-remake.css (.sl-bulb, @keyframes slChase, whose dim
 * phase drops to brightness(.55) / opacity .6 — the "too dim" phase).
 * Winning cells are .rcell.win-cell (slots-anim.js, styled in
 * slots-remake.css with @keyframes winPulse). The legacy static markup
 * variant in game-stage.css (.slot-lights i / i.on) is covered too. */

/* ------------------------------------------------------------------ */
/* 1. Marquee bulbs — brighter at phone size, dim phase lifted         */
/* ------------------------------------------------------------------ */

/* Resting bulb: bigger glow halo than slots-remake.css ships
   (there: 0 0 10px 3px gold .85, 0 0 22px 6px orange .35). */
#slotLights .sl-bulb,
.slot-lights .sl-bulb {
  filter: brightness(1.3);
  box-shadow:
    0 0 6px 2px rgba(255, 244, 190, .95),
    0 0 16px 6px rgba(255, 211, 77, .95),
    0 0 34px 12px rgba(255, 170, 0, .5);
}
#slotLights .sl-bulb:nth-child(even),
.slot-lights .sl-bulb:nth-child(even) {
  box-shadow:
    0 0 6px 2px rgba(255, 225, 250, .95),
    0 0 16px 6px rgba(255, 95, 210, .95),
    0 0 34px 12px rgba(255, 95, 210, .5);
}

/* Same-name keyframe override (a later stylesheet's @keyframes wins):
   the chase still alternates in two phases, but the "off" phase is now
   a lit bulb at brightness(.9) instead of a near-dark one at .55, so
   the whole frame reads as bright casino lights at all times. */
@keyframes slChase {
  0%, 49% { filter: brightness(1.6); opacity: 1; }
  50%, 100% { filter: brightness(.9); opacity: .88; }
}

/* Win state (slots-stage.js adds .lights-win to #slotLights): every
   bulb full bright, halo roughly double the resting one. */
#slotLights.lights-win .sl-bulb,
.slot-lights.lights-win .sl-bulb {
  filter: brightness(1.75);
  box-shadow:
    0 0 10px 4px rgba(255, 250, 215, 1),
    0 0 22px 9px rgba(255, 230, 130, 1),
    0 0 48px 18px rgba(255, 190, 0, .65);
}
#slotLights.lights-win .sl-bulb:nth-child(even),
.slot-lights.lights-win .sl-bulb:nth-child(even) {
  box-shadow:
    0 0 10px 4px rgba(255, 235, 252, 1),
    0 0 22px 9px rgba(255, 160, 230, 1),
    0 0 48px 18px rgba(255, 95, 210, .65);
}

/* Legacy static variant (game-stage.css markup, in case a page ever
   renders bulbs as <i> elements instead of the JS-built frame). */
.slot-lights i {
  filter: brightness(1.3);
  box-shadow: 0 0 10px 3px rgba(255, 211, 77, .55);
}
.slot-lights i.on {
  filter: brightness(1.6);
  box-shadow:
    0 0 12px 4px rgba(255, 230, 130, .9),
    0 0 28px 10px rgba(255, 190, 0, .45);
}

/* ------------------------------------------------------------------ */
/* 2. Cabinet / stage glow — soft accent halo around the machine       */
/* ------------------------------------------------------------------ */

/* --accent is set inline on #stageBox itself by slots-stage.js, so the
   halo follows the game being played; gold fallback if it is absent.
   The blur offsets keep it a soft glow, never a hard coloured border
   (the existing gold border from games-boss3.css is left untouched). */
#stageBox {
  box-shadow:
    0 0 20px -2px var(--accent, var(--gold, #f5b324)),
    0 0 52px -8px var(--accent, var(--gold, #f5b324)),
    0 10px 34px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------ */
/* 3. Winning-line / winning-cell pulse — brighter highlight           */
/* ------------------------------------------------------------------ */

/* .rcell.win-cell is added by slots-anim.js to every cell on a winning
   line (and to scatter / cascade winners). Existing rule (slots-remake):
   inset 0 0 0 3px var(--gold2), inset 0 0 18px rgba(240,208,96,.55). */
.rcell.win-cell {
  box-shadow:
    inset 0 0 0 3px var(--gold2, #f0d060),
    inset 0 0 0 5px rgba(255, 255, 255, .35),
    inset 0 0 30px rgba(240, 208, 96, .9),
    inset 0 0 54px rgba(255, 190, 0, .45);
}

/* Same-name keyframe override: the pulse now swings brighter
   (existing winPulse tops out at brightness(1.45)). */
@keyframes winPulse {
  from { filter: brightness(1.2) saturate(1.15); }
  to { filter: brightness(1.7) saturate(1.3); }
}

/* Payline path drawn through the winning cells: a touch more presence
   so the line itself reads over the brighter cells. */
.payline-path {
  filter: drop-shadow(0 0 7px rgba(0, 0, 0, .85)) drop-shadow(0 0 10px rgba(240, 208, 96, .65));
}

/* ------------------------------------------------------------------ */
/* 4. Lobby tiles — usable on index.html / shitoshi-games.html later   */
/*    (those pages are NOT patched by this pack; these rules are here  */
/*    so the same stylesheet can be linked there unchanged.)           */
/* ------------------------------------------------------------------ */

.tile-art img {
  filter: saturate(1.12) brightness(1.05);
}
.tile {
  box-shadow:
    0 0 0 1px rgba(245, 179, 36, .12),
    0 0 22px -6px rgba(245, 179, 36, .45),
    0 8px 24px rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------------ */
/* 5. FEEL-FX hooks used by lib/feel-fx.js                             */
/* ------------------------------------------------------------------ */

/* Coin-rain canvas: JS also sets these inline, so the rain still sits
   correctly even if this stylesheet failed to load. z-index 12 puts it
   above the marquee frame (8) and the BIG WIN overlay (9). */
.feel-coin-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 12;
}

/* Full-stage light flash: toggled on #stageBox by feel-fx.js for
   medium / big wins. Animates filter + halo only — no layout change. */
#stageBox.feel-flash {
  animation: feelStageFlash .65s ease-out both;
}
@keyframes feelStageFlash {
  0% { filter: brightness(1); }
  25% {
    filter: brightness(1.45) saturate(1.2);
    box-shadow:
      0 0 30px 2px var(--accent, var(--gold, #f5b324)),
      0 0 74px 6px var(--accent, var(--gold, #f5b324)),
      0 10px 34px rgba(0, 0, 0, .5);
  }
  100% { filter: brightness(1); }
}

/* ------------------------------------------------------------------ */
/* 6. Reduced motion — neutralize every animation this file adds or    */
/*    strengthens. (The brighter static glow stays: it is not motion.) */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #slotLights .sl-bulb,
  .slot-lights .sl-bulb,
  #slotLights.lights-win .sl-bulb,
  .slot-lights.lights-win .sl-bulb {
    animation: none !important;
    filter: brightness(1.3);
  }
  .rcell.win-cell {
    animation: none !important;
    filter: brightness(1.25);
  }
  #stageBox.feel-flash {
    animation: none !important;
    filter: none;
  }
  .tile-art img {
    transition: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* 7. WIN CELEBRATIONS (fix-43) — the full-screen tiered win screens   */
/*    built by lib/feel-fx.js (#winCelebrate). Giant gold type over    */
/*    the AI coin-mountain backdrop (assets/img/win-celebrate-         */
/*    coins.webp — generated for this feature, no text, no             */
/*    characters), a coin fountain canvas, a huge multiplier           */
/*    callout, and on the EPIC tier the approved Mr. Shitoshi file     */
/*    as-is. The backdrop only renders inside the overlay element,     */
/*    which JS creates on the first celebration — no cost on a         */
/*    plain page view. While a celebration is up, the stage's own      */
/*    big-win overlay is hidden so the win is announced once, big.     */
/* ------------------------------------------------------------------ */

.wc-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  background: #0d0921;
}
.wc-overlay.wc-show { display: flex; }

.wc-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 9, 33, .42), rgba(13, 9, 33, .10) 42%, rgba(13, 9, 33, .52)),
    url("../img/win-celebrate-coins.webp") center 70% / cover no-repeat,
    radial-gradient(120% 90% at 50% 30%, #2a1e5e 0%, #0d0921 72%);
}

.wc-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wc-content {
  position: relative;
  z-index: 2;
  max-height: 100%;
  padding: 12px 5vw calc(40px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4vh;
  text-align: center;
  pointer-events: none;
}

/* Giant gold display type — the reference ads' bubbly jackpot letters,
 * in our own words. Gradient-clipped text with a hard gold-brown drop
 * so the glyphs read over the bright coin art. */
.wc-title {
  font-weight: 900;
  line-height: .95;
  letter-spacing: .01em;
  font-size: clamp(52px, 15.5vw, 118px);
  background-image: linear-gradient(180deg, #fff8cf 0%, #ffe066 30%, #ffb300 62%, #ff8f00 82%, #ffd94d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 2px rgba(122, 60, 0, .35);
  filter: drop-shadow(0 4px 0 rgba(122, 60, 0, .85)) drop-shadow(0 14px 26px rgba(0, 0, 0, .55));
  animation: wcPop .55s cubic-bezier(.2, 1.4, .4, 1) both;
}
.wc-t-mega {
  background-image: linear-gradient(180deg, #fff3c4 0%, #ffc93d 30%, #ff7b00 65%, #ff5722 88%, #ffc93d 100%);
}
.wc-t-epic {
  background-image: linear-gradient(180deg, #ffffff 0%, #fff3b0 25%, #ffd700 55%, #ff9d00 80%, #fff0a8 100%);
}

.wc-kicker {
  font-weight: 900;
  line-height: 1;
  letter-spacing: .05em;
  font-size: clamp(30px, 9vw, 62px);
  background-image: linear-gradient(180deg, #eafcff 0%, #5ec8ff 55%, #1e7bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 2px rgba(6, 42, 92, .35);
  filter: drop-shadow(0 3px 0 rgba(6, 42, 92, .8)) drop-shadow(0 10px 22px rgba(0, 0, 0, .55));
  animation: wcPop .55s cubic-bezier(.2, 1.4, .4, 1) both;
}

.wc-bignum {
  font-weight: 900;
  line-height: .88;
  font-size: clamp(120px, 36vw, 250px);
  background-image: linear-gradient(180deg, #fff8cf 0%, #ffe066 30%, #ffb300 62%, #ff8f00 82%, #ffd94d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 2px rgba(122, 60, 0, .35);
  filter: drop-shadow(0 5px 0 rgba(122, 60, 0, .85)) drop-shadow(0 16px 30px rgba(0, 0, 0, .55));
  animation: wcPop .55s .08s cubic-bezier(.2, 1.4, .4, 1) both;
}

/* Round-end recap marker on the bonus screens: the feature already
 * played out — this line keeps the big type from reading as games
 * still owed. */
.wc-sub {
  font-size: clamp(15px, 4.6vw, 26px);
  font-weight: 900;
  letter-spacing: .3em;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(94, 200, 255, .8), 0 2px 0 rgba(6, 42, 92, .9), 0 6px 14px rgba(0, 0, 0, .6);
  animation: wcPop .55s .18s cubic-bezier(.2, 1.4, .4, 1) both;
}

.wc-amount {
  display: flex;
  align-items: baseline;
  gap: .35em;
  animation: wcPop .55s .12s cubic-bezier(.2, 1.4, .4, 1) both;
}
.wc-amount-num {
  font-size: clamp(46px, 13.5vw, 98px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  text-shadow:
    0 0 22px rgba(255, 190, 0, .85),
    0 3px 0 rgba(122, 60, 0, .9),
    0 10px 24px rgba(0, 0, 0, .6);
}
.wc-amount-unit {
  font-size: clamp(20px, 6vw, 40px);
  font-weight: 900;
  letter-spacing: .12em;
  color: #ffd94d;
  text-shadow: 0 2px 0 rgba(122, 60, 0, .9), 0 6px 16px rgba(0, 0, 0, .6);
}

/* The huge multiplier callout — white block letters with a hot red
 * glow, the way the reference ads shout a 2X. */
.wc-mult {
  font-size: clamp(68px, 20vw, 150px);
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  text-shadow:
    0 0 16px rgba(255, 64, 40, .95),
    0 0 44px rgba(255, 64, 40, .6),
    0 5px 0 #a3120a,
    0 12px 28px rgba(0, 0, 0, .65);
  animation: wcPop .5s .2s cubic-bezier(.2, 1.4, .4, 1) both;
}
.wc-mult span {
  display: block;
  margin-top: .35em;
  font-size: clamp(17px, 5.2vw, 34px);
  letter-spacing: .34em;
  color: #ffd94d;
  text-shadow: 0 2px 0 rgba(122, 60, 0, .9), 0 6px 14px rgba(0, 0, 0, .6);
}

/* EPIC tier mascot moment — the approved file, as-is, never redrawn. */
.wc-mascot {
  width: min(38vw, 230px);
  height: auto;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 34px rgba(255, 190, 0, .45));
  animation: wcPop .6s cubic-bezier(.2, 1.4, .4, 1) both, wcBob 1.5s .65s ease-in-out infinite alternate;
}

.wc-tap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2;
  text-align: center;
  color: rgba(255, 244, 200, .92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
  animation: wcTapPulse 1.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes wcPop {
  0% { transform: scale(.25); opacity: 0; }
  55% { transform: scale(1.13); opacity: 1; }
  78% { transform: scale(.96); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes wcBob {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}
@keyframes wcTapPulse {
  0%, 100% { opacity: .45; }
  50% { opacity: .95; }
}

/* While a full-screen celebration is up, the stage's own big-win
 * overlay stays hidden — the win is announced once, at full scale. */
body.wc-active #bigWinOverlay { opacity: 0 !important; }

@media (max-height: 700px) {
  .wc-mascot { width: min(30vw, 170px); }
  .wc-bignum { font-size: clamp(96px, 30vw, 200px); }
}

@media (prefers-reduced-motion: reduce) {
  .wc-title, .wc-kicker, .wc-bignum, .wc-amount, .wc-mult, .wc-mascot, .wc-tap, .wc-sub {
    animation: none !important;
  }
}