/* WHOOPS Bounty Hunter — shared components: buttons, chips, plaques, trays,
   paper tickets, the paytable, LED meter, toast. Page files only lay these out. */

/* ===================== BUTTONS ===================== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:3px 20px 0;border:0;border-radius:var(--r-lg);cursor:pointer;
  font-family:var(--font-sign);font-size:20px;line-height:1;letter-spacing:.12em;white-space:nowrap;
  text-decoration:none;-webkit-user-select:none;user-select:none;
  transition:transform var(--dur-fast) ease,filter var(--dur-fast) ease,box-shadow var(--dur-fast) ease,color var(--dur-fast) ease;}
.btn .wb-uic{width:18px;height:18px;margin-top:-3px;}
.btn:active{transform:translateY(2px);}
.btn-block{display:flex;width:100%;}
.btn-sm{padding:3px 16px 0;font-size:17px;border-radius:var(--r-md);}
.btn-lg{min-height:58px;padding:4px 26px 0;font-size:24px;}

/* Lit gold: the only filled colour on screen, so it always means "do this". */
.btn-lit{overflow:hidden;color:#241503;background:var(--grad-lit);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -5px 10px rgba(120,70,0,.4),
    0 0 0 2px var(--bronze),0 0 0 4px rgba(233,207,138,.4),0 5px 0 #3E2C0C,0 0 22px rgba(var(--brand-1-rgb),.38);}
.btn-lit:hover{filter:brightness(1.06);color:#241503;}
.btn-lit:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(120,70,0,.4),
    0 0 0 2px var(--bronze),0 0 0 4px rgba(233,207,138,.35),0 2px 0 #3E2C0C,0 0 14px rgba(var(--brand-1-rgb),.3);}
/* light catching the bevel every few seconds */
.btn-lit::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0));
  animation:sheen 3.8s ease-in-out infinite;}
@keyframes sheen{0%,22%{transform:translateX(-160%) skewX(-18deg);}70%,100%{transform:translateX(420%) skewX(-18deg);}}
.btn-lit.is-breathing{animation:breathe 2.8s ease-in-out infinite;}
@keyframes breathe{
  0%,100%{box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -5px 10px rgba(120,70,0,.4),0 0 0 2px var(--bronze),0 0 0 4px rgba(233,207,138,.4),0 5px 0 #3E2C0C,0 0 22px rgba(var(--brand-1-rgb),.38);}
  50%{box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -5px 10px rgba(120,70,0,.4),0 0 0 2px var(--bronze),0 0 0 4px rgba(233,207,138,.55),0 5px 0 #3E2C0C,0 0 38px rgba(var(--brand-1-rgb),.62);}}
.btn-lit:disabled,.btn-lit[aria-disabled="true"]{cursor:default;animation:none;transform:none;filter:saturate(.35) brightness(.5);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 0 0 2px #3B2B10,0 3px 0 #2A1F0C;}
.btn-lit:disabled::after,.btn-lit[aria-disabled="true"]::after{display:none;}

/* Velvet: the secondary action, framed in a thin gold double line. */
.btn-velvet{color:var(--ivory);background:linear-gradient(180deg,#5E1118 0%,#3A080D 100%);
  box-shadow:inset 0 1px 0 rgba(255,190,180,.22),inset 0 -6px 12px rgba(0,0,0,.35),
    0 0 0 1.5px #C9A24A,0 0 0 3px var(--onyx),0 0 0 4px rgba(201,162,74,.35);}
.btn-velvet:hover{color:var(--gold-hi);filter:brightness(1.1);}

/* Ghost: tertiary, just a gold hairline. */
.btn-ghost{color:var(--parchment);background:rgba(255,240,210,.03);box-shadow:inset 0 0 0 1px var(--line-gold-strong);}
.btn-ghost:hover{color:var(--gold-hi);box-shadow:inset 0 0 0 1px var(--gold),0 0 14px rgba(var(--brand-1-rgb),.15);}

/* Text link that still has a 44px target. */
.btn-text{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 8px;
  border:0;background:none;cursor:pointer;color:var(--parchment);font-family:var(--font-body);font-size:13.5px;
  font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-gold-strong);}
.btn-text:hover{color:var(--gold-hi);}

/* Round lacquer button with a gold ring (cabinet flanks, page headers). */
.round-btn{position:relative;width:44px;height:44px;border-radius:50%;border:0;padding:0;cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;color:var(--champagne);
  background:radial-gradient(circle at 40% 30%,#2A2019,#0D0A08 75%);
  box-shadow:0 0 0 1px rgba(201,162,74,.6),0 0 0 3px var(--onyx),0 0 0 4px rgba(201,162,74,.22),0 6px 14px rgba(0,0,0,.6);
  transition:color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast);}
.round-btn .wb-uic{width:20px;height:20px;}
.round-btn:hover{color:var(--gold-hi);transform:translateY(-1px);}
.round-btn.is-on{color:var(--brand-1-tube);
  box-shadow:0 0 0 1px rgba(255,214,90,.8),0 0 0 3px var(--onyx),0 0 0 4px rgba(var(--brand-1-rgb),.35),0 0 16px rgba(var(--brand-1-rgb),.35),0 6px 14px rgba(0,0,0,.6);}

/* ===================== BADGES & CHIPS ===================== */
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--brand-2);color:#fff;font-family:var(--font-body);font-weight:600;
  font-size:10.5px;line-height:1;letter-spacing:0;box-shadow:0 0 0 2px var(--onyx),0 0 10px rgba(var(--brand-2-rgb),.7);}

/* Reward status — the same four states the database uses. */
.status-chip{display:inline-flex;align-items:center;height:24px;padding:3px 10px 0;border-radius:var(--r-pill);
  font-family:var(--font-sign);font-size:14px;line-height:1;letter-spacing:.1em;white-space:nowrap;}
.status-chip.status-ready{color:#F3DC9C;background:rgba(233,200,106,.12);box-shadow:inset 0 0 0 1px rgba(233,200,106,.5);}
.status-chip.status-activated{color:#8AF2C6;background:rgba(61,220,151,.12);box-shadow:inset 0 0 0 1px rgba(61,220,151,.5);
  animation:activePulse 1.8s ease-in-out infinite;}
.status-chip.status-used{color:#B3ADA2;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);}
.status-chip.status-expired{color:#FF9C84;background:rgba(255,122,92,.1);box-shadow:inset 0 0 0 1px rgba(255,122,92,.45);}
@keyframes activePulse{0%,100%{filter:none;}50%{filter:drop-shadow(0 0 6px rgba(61,220,151,.6));}}
/* same chip printed on ticket paper */
.paper .status-chip.status-activated,.stub .status-chip.status-activated{color:#0F6B47;background:rgba(61,220,151,.2);box-shadow:inset 0 0 0 1px rgba(15,107,71,.45);}

/* Reward medallion: a gold-edged casino chip with the food illustration on
   its face. Size it with --chip. */
.chip{--chip:48px;position:relative;flex-shrink:0;width:var(--chip);height:var(--chip);border-radius:50%;
  background:repeating-conic-gradient(from 7deg,#E2C47A 0deg 13deg,#2A2019 13deg 45deg);
  box-shadow:0 0 0 1.5px var(--bronze),0 5px 12px rgba(0,0,0,.55);}
.chip-face{position:absolute;inset:calc(var(--chip) * .11);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 38% 30%,#3B2F24 0%,#16110E 72%);
  box-shadow:0 0 0 1.5px #C9A24A,inset 0 2px 5px rgba(0,0,0,.75);}
.chip-face .wb-ic{width:64%;height:64%;}
.chip.is-respin{background:repeating-conic-gradient(from 7deg,#9ED2FF 0deg 13deg,#0E2233 13deg 45deg);}
.chip.is-rare{background:repeating-conic-gradient(from 7deg,#FFE07A 0deg 13deg,#3A2A08 13deg 45deg);
  box-shadow:0 0 0 1.5px var(--bronze),0 0 16px rgba(var(--brand-1-rgb),.5),0 5px 12px rgba(0,0,0,.55);}

/* ===================== ORNAMENTS & TITLES ===================== */
.ornament{display:flex;align-items:center;gap:10px;}
.ornament-rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(212,176,98,0),rgba(212,176,98,.8));}
.ornament-rule:last-child{background:linear-gradient(90deg,rgba(212,176,98,.8),rgba(212,176,98,0));}
.ornament-dia{width:6px;height:6px;flex-shrink:0;transform:rotate(45deg);background:var(--champagne);box-shadow:0 0 6px rgba(255,214,120,.6);}

/* Engraved section label between two hairlines. */
.section-title{display:flex;align-items:center;gap:12px;margin:0 0 var(--sp-4);}
.section-title h2{min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-title);font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--champagne);}
.section-title .ornament-rule{min-width:16px;}
.section-title.has-link .ornament-rule{flex:0 0 24px;}
.section-title.has-link a{margin-left:auto;}
@media (max-width:420px){ .section-title h2{letter-spacing:.14em;} }
.section-title a{flex-shrink:0;display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 2px;
  font-size:12.5px;font-weight:500;color:var(--gold);}
.section-title a:hover{color:var(--gold-hi);}
.section-title a .wb-uic{width:14px;height:14px;}

/* Big page title in gold foil with a diamond rule under it. */
.page-title{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:var(--sp-5);text-align:center;}
.page-title h1{font-size:clamp(30px,8vw,40px);letter-spacing:.06em;}
.page-title .ornament{width:200px;}

/* ===================== SURFACES ===================== */
/* Stat plaque: lacquer with cut corners and an inset gold hairline whose
   corners the chamfer clips off — the "broken corner" is deliberate Deco. */
.plaque{position:relative;display:flex;align-items:center;gap:11px;min-height:66px;padding:10px 14px;
  background:linear-gradient(160deg,#221A14 0%,#120E0B 60%,#0B0806 100%);clip-path:var(--chamfer-10);}
.plaque::before{content:"";position:absolute;inset:4px;border:1px solid rgba(212,176,98,.42);pointer-events:none;}
.plaque-ic{width:30px;height:30px;flex-shrink:0;}
.plaque-n{display:block;font-family:var(--font-sign);font-size:30px;line-height:1;color:#F3DC9C;}
.plaque-l{display:block;margin-top:2px;font-size:11.5px;line-height:1.25;color:var(--parchment);}

/* Velvet tray: the card every reward sits on. */
.tray{position:relative;display:flex;align-items:center;gap:12px;min-height:72px;padding:12px;border-radius:var(--r-lg);
  background:var(--grad-velvet);
  box-shadow:inset 0 1px 0 rgba(255,170,160,.14),inset 0 0 0 1px rgba(201,162,74,.32),inset 0 -10px 18px rgba(0,0,0,.35),0 8px 18px rgba(0,0,0,.45);}
.tray-body{flex:1;min-width:0;}
.tray-name{font-weight:600;font-size:15px;line-height:1.25;color:var(--ivory);}
.tray-meta{margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--parchment);}
.tray.is-dim{opacity:.55;filter:saturate(.45);}

/* Lacquer panel for larger blocks. */
.panel{position:relative;padding:var(--sp-5);border-radius:var(--r-xl);background:var(--grad-lacquer);
  box-shadow:inset 0 1px 0 rgba(255,240,210,.12),inset 0 0 0 1px var(--line-gold),var(--shadow-lift);}

/* Printed paper (tickets, vouchers, active-code stubs). */
.paper{position:relative;color:var(--ink);background:var(--paper);}
.paper .ink-soft{color:var(--ink-soft);}
.scallop-top::before,.scallop-bottom::after{content:"";position:absolute;left:0;right:0;height:7px;pointer-events:none;}
.scallop-top::before{top:-7px;background:radial-gradient(circle at 7px 7px,var(--paper) 5px,rgba(247,240,226,0) 5.5px) 0 0/14px 7px repeat-x;}
.scallop-bottom::after{bottom:-7px;background:radial-gradient(circle at 7px 0,var(--paper) 5px,rgba(247,240,226,0) 5.5px) 0 0/14px 7px repeat-x;}
.ink-rule{display:flex;align-items:center;gap:10px;}
.ink-rule i{flex:1;height:1px;background:linear-gradient(90deg,rgba(30,22,17,0),rgba(30,22,17,.45));}
.ink-rule i:last-child{background:linear-gradient(90deg,rgba(30,22,17,.45),rgba(30,22,17,0));}
.ink-rule b{width:6px;height:6px;flex-shrink:0;transform:rotate(45deg);background:var(--ink-gold);}
.perf{border:0;border-top:1.5px dashed rgba(30,22,17,.28);margin:12px 0;}

/* ===================== LED METER ===================== */
/* A dark recessed window with amber segments; the dim "88" behind the digits
   is the unlit segments every real meter shows. */
.led{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;
  background:linear-gradient(180deg,#040302,#0E0B08);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9),inset 0 0 0 1px rgba(201,162,74,.38),0 1px 0 rgba(255,240,210,.08);}
.led-digits{position:relative;font-family:var(--font-sign);font-size:34px;line-height:1;letter-spacing:2px;}
.led-ghost{color:rgba(255,140,50,.1);}
.led-on{position:absolute;left:0;top:0;color:var(--led);text-shadow:0 0 6px rgba(255,150,40,.9),0 0 14px rgba(255,120,30,.45);}
.led-label{margin-top:4px;font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#A99C87;
  white-space:nowrap;}

/* ===================== PAYTABLE ===================== */
/* What you can win, with the fixed odds each spin lands on it. Two columns
   on a phone, three where there is room: the reward names ("Gratis
   milkshake naar keuze") need the width. */
.paytable-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;}
.pay{display:flex;align-items:center;gap:9px;min-height:58px;padding:6px 8px 6px 6px;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,240,210,.045),rgba(255,240,210,.015));box-shadow:inset 0 0 0 1px rgba(201,162,74,.22);}
.pay .chip{--chip:40px;}
.pay-body{min-width:0;}
.pay-name{font-weight:500;font-size:12.5px;line-height:1.2;color:var(--ivory);}
.pay-odds{margin-top:3px;font-family:var(--font-sign);font-size:15px;line-height:1;letter-spacing:.06em;color:var(--champagne);}
.paytable-note{margin:10px 0 0;text-align:center;font-size:11.5px;color:var(--taupe);}
@media (min-width:768px){
  .pay{padding:8px 10px 8px 8px;gap:11px;}
  .pay .chip{--chip:46px;}
  .pay-name{font-size:13px;}
}

/* ===================== TOAST ===================== */
.toast{position:fixed;left:50%;bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 14px);z-index:90;
  display:flex;align-items:center;gap:10px;max-width:min(88vw,420px);padding:12px 18px 12px 14px;border-radius:var(--r-md);
  background:linear-gradient(180deg,#221A14,#0F0B09);color:var(--ivory);font-size:13.5px;font-weight:500;line-height:1.35;
  box-shadow:inset 0 0 0 1px var(--line-gold-strong),0 12px 30px rgba(0,0,0,.6),0 0 22px rgba(var(--brand-1-rgb),.12);
  opacity:0;transform:translate(-50%,24px);pointer-events:none;transition:opacity .3s ease,transform .35s var(--ease-out);}
.toast::before{content:"";width:7px;height:7px;flex-shrink:0;transform:rotate(45deg);background:var(--brand-1);
  box-shadow:0 0 8px rgba(var(--brand-1-rgb),.9);}
.toast.show{opacity:1;transform:translate(-50%,0);}
@media (min-width:768px){ .toast{bottom:28px;} }

/* ===================== NUMERAL MEDALLION ===================== */
/* Roman numerals in a gold disc for the how-it-works steps. */
.numeral{width:36px;height:36px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-title);font-weight:700;font-size:13px;letter-spacing:.02em;color:#241503;background:var(--grad-gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 2px var(--bronze-dark),0 0 0 3px rgba(212,176,98,.4),0 4px 10px rgba(0,0,0,.5);}

/* ===================== CELEBRATION FX ===================== */
/* Coins and foil confetti from WB.ui.celebrate(). Above the nav, below
   dialogs; removed from the DOM by ui.js once they have fallen. */
.fx-layer{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;}
.fx-coin,.fx-foil{position:absolute;top:-30px;will-change:transform;}
.fx-coin{border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFF6CF 0%,#FFE07A 36%,#F2B92C 62%,#9C7414 100%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.3),0 0 8px rgba(var(--brand-1-rgb),.5);animation:fxFall linear both;}
.fx-foil{border-radius:1px;animation:fxFlutter linear both;}
.fx-foil.is-gold{background:linear-gradient(135deg,#FFF4D6,#C9A24A);}
.fx-foil.is-red{background:linear-gradient(135deg,#FF8A7A,#B5120B);}
.fx-foil.is-blue{background:linear-gradient(135deg,#CDEBFF,#2F7FD0);}
@keyframes fxFall{0%{transform:translateY(0) rotateY(0deg);opacity:1;}85%{opacity:1;}100%{transform:translateY(110vh) rotateY(900deg);opacity:0;}}
@keyframes fxFlutter{0%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(18px,55vh) rotate(380deg);}100%{transform:translate(-12px,110vh) rotate(760deg);opacity:.2;}}