/* CastleXSlots additions on top of the app CSS. Source of /assets/castle-[hash].css (built by tools/build.py). */

/* Welcome Wheel (castle.js) in place of the guest hero on the home page. */
.cxw{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:center;gap:24px 40px;
  padding:40px 48px 28px;border-radius:var(--radius-lg);border:1px solid var(--line-strong);box-shadow:var(--shadow-card);overflow:hidden;
  background:radial-gradient(55% 80% at 78% 45%,#ffc23333,transparent 70%),radial-gradient(50% 70% at 70% 0%,#ff3d7f29,transparent 70%),
    linear-gradient(110deg,var(--bg) 0%,var(--surface) 45%,var(--surface-3) 100%)}
.cxw-text{display:grid;gap:14px;max-width:520px}
.cxw h1{font:800 clamp(32px,4.2vw,52px)/1.04 var(--font-display);letter-spacing:-.01em;text-wrap:balance;margin:0}
.cxw h1 em,.cxw-result h2 em{color:var(--gold);font-style:normal}
.cxw-lead{color:var(--ink-muted);max-width:42ch;margin:0;font-size:17px;line-height:26px}
.cxw-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:6px}
.cxw-spin{min-width:200px;animation:cxwPulse 1.8s ease-in-out infinite}
.cxw.is-spinning .cxw-spin{animation:none;opacity:.7}
.cxw-claim-link,.cxw.is-won .cxw-spin{display:none}
.cxw.is-won .cxw-claim-link{display:inline-flex;min-width:200px;justify-content:center;gap:.3em;animation:cxwPulse 1.8s ease-in-out infinite}
#welcome-wheel{scroll-margin-top:80px}
.cxw-wheel{position:relative;width:100%;max-width:440px;aspect-ratio:1;justify-self:center}
/* Wheel layers (pictures in /img/wheel/): the disc with a thin gold edge, the pointer overlaps the top. */
.cxw-wheel{filter:drop-shadow(0 18px 40px #000000b3) drop-shadow(0 0 34px #ffc23347)}
.cxw-wheel img{position:absolute;display:block;user-select:none;-webkit-user-drag:none}
.cxw-rotor{position:absolute;left:3%;top:3%;width:94%;height:94%;border-radius:50%;will-change:transform;box-shadow:0 0 0 3px var(--gold),0 0 0 4px #9a5e00}
.cxw-disc,.cxw-labels{position:absolute;inset:0;width:100%;height:100%}
.cxw-hub{left:50%;top:50%;width:17%;height:17%;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 6px #000000b3)}
.cxw-pointer{left:50%;top:-7%;width:11%;transform:translateX(-50%);z-index:1;filter:drop-shadow(0 6px 8px #000000a6)}
.cxw-label{font:800 15px/1 var(--font-body);letter-spacing:.02em;text-anchor:middle;dominant-baseline:middle;
  paint-order:stroke;stroke:#0a0e1f8c;stroke-width:3px;stroke-linejoin:round}
.cxw-label.is-dark{stroke:#ffffff59}
.cxw-error{margin:0;color:var(--coral);font-size:14px}
.cxw-error[hidden]{display:none}
.cxw-disclaimer{grid-column:1/-1;margin:0;color:var(--ink-dim);font-size:10px;line-height:14px;opacity:.75}
.cxw-wrap{position:relative}
.cxw-result{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:16px}
.cxw-wrap>.cxw{transition:filter .5s ease}
.cxw-wrap.has-result>.cxw{filter:blur(7px) brightness(.55);pointer-events:none;user-select:none}
.cxw-result[hidden]{display:none}
.cxw-result__card{position:relative;overflow:hidden;display:grid;gap:12px;justify-items:center;text-align:center;width:min(440px,100%);
  padding:32px 26px 24px;border-radius:var(--radius-lg);border:1px solid #ffc23366;background:linear-gradient(160deg,var(--surface-3),var(--surface));
  box-shadow:var(--shadow-card),0 0 40px #ffc23333;animation:cxwPop .45s cubic-bezier(.2,1.4,.4,1)}
.cxw-result h2{font:800 34px/1.1 var(--font-display);margin:0}
.cxw-result p{color:var(--ink-muted);margin:0}
.cxw-result small{color:var(--ink-dim);font-size:12px}
.cxw-claim{width:min(360px,100%);margin-top:6px}
.cxw-result .cxw-result__card>.cxw-result__close{position:absolute;z-index:2;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:var(--surface-2);color:var(--ink-muted);font-size:20px;line-height:1;cursor:pointer}
.cxw-result__close:hover{color:var(--ink)}
.cxw-reg-note{margin:0}
.cxw-confetti{position:absolute;inset:0;pointer-events:none}
.cxw-result__card>:not(.cxw-confetti){position:relative;z-index:1}
.cxw-confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:0;animation:cxwConfetti 2s ease-in forwards}
@keyframes cxwPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes cxwPop{from{transform:scale(.8);opacity:0}}
@keyframes cxwConfetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),420px) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.cxw-spin,.cxw-claim-link,.cxw-confetti i{animation:none}}
@media (max-width:900px){
  .cxw{grid-template-columns:minmax(0,1fr);padding:24px 20px 18px;gap:18px}
  /* Phones: title and text, then the wheel, then the button. */
  .cxw-text{display:contents}
  .cxw-text>.fz-banner__eyebrow{order:1;margin-bottom:-8px}.cxw h1{order:2}.cxw-lead{order:3}
  .cxw-wheel{order:4;max-width:340px;margin-top:8px}.cxw-cta,.cxw-error{order:5}.cxw .guest-hero__fine{order:6}.cxw-disclaimer{order:7}
  .cxw-lead{font-size:15px;line-height:22px}
  .cxw-cta{flex-direction:column;align-items:stretch;gap:14px}
  .cxw-cta .fz-btn{width:100%}
  .cxw-cta .guest-hero__login{align-self:center}
}

/* /login/ and /register/: the sign-in / sign-up form as a page card (the build styles it as a modal). */
.auth-page{display:grid;justify-items:center;padding:32px 0 48px}
.auth-page__card.modal{margin:0 auto}
@media (max-width:900px){.auth-page{padding:16px 0 32px}}

/* Section pages for visitors who are not signed in (/slots/, /cards/, /table/, /instant/; /recent/, /favorites/, /search/ ask to sign in). */
.guest-section{display:grid;gap:10px;max-width:900px;margin:0 0 18px}
.guest-section h1{font:800 clamp(28px,3.6vw,42px)/1.08 var(--font-display);margin:0}
.guest-section p{color:var(--ink-muted);margin:0;font-size:16px;line-height:24px}
.guest-section--signin{padding:22px;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface)}
.guest-section__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* Sign-up bar (markup in every page, castle.js handles closing). Hidden for signed-in players, on the sign-in/sign-up
   pages, on the lock screen and after it is closed (for the rest of the visit). */
.guest-bar{position:fixed;z-index:65;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(600px,calc(100% - 24px));
  transform:translate(-50%,0);animation:gbIn .7s cubic-bezier(.2,1.4,.4,1) both;font-family:var(--font-body)}
.guest-bar__card{position:relative;display:block;padding:3px;border-radius:22px;overflow:hidden;isolation:isolate;color:var(--ink);text-decoration:none;
  animation:gbGlow 2s ease-in-out .7s infinite}
.guest-bar__card:before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:200%;aspect-ratio:1;
  background:conic-gradient(#fff,var(--magenta),var(--cyan),#fff,var(--magenta),var(--cyan),#fff);transform:translate(-50%,-50%);animation:gbSpin 3s linear infinite}
.guest-bar__card:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.guest-bar__in{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:19px;overflow:hidden;
  background:linear-gradient(135deg,#1c2360 0%,var(--surface) 100%)}
.guest-bar__in:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ffffff22 50%,transparent 65%);
  transform:translateX(-100%);animation:gbSweep 4s ease-in-out 1s infinite}
.guest-bar__gift{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;font-size:30px;line-height:1;
  background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));box-shadow:0 0 18px #ffc23399;animation:gbWobble 2.4s ease-in-out infinite}
.guest-bar__text{display:flex;flex-direction:column;gap:3px;line-height:1.2;min-width:0;flex:1}
.guest-bar__title{font-family:var(--font-display);font-weight:800;font-size:16px}
.guest-bar__title em{font-style:normal;color:var(--gold);text-shadow:0 0 12px #ffc23399}
.guest-bar__btn{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;padding:14px 24px;border-radius:var(--radius-pill);
  background:linear-gradient(180deg,var(--gold-light),var(--gold) 45%,var(--gold-deep));color:var(--on-gold);font-weight:800;font-size:16px;white-space:nowrap;
  box-shadow:var(--shadow-cta);animation:gbPulse 1.6s ease-in-out infinite}
.guest-bar__btn:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,#ffffffcc,transparent);animation:gbShine 2.2s ease-in-out infinite}
.guest-bar__card:hover .guest-bar__btn{filter:brightness(1.08)}
.guest-bar__close{position:absolute;z-index:1;top:-10px;right:-8px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--surface-3);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;box-shadow:0 4px 10px #00000080}
.guest-bar__close:hover{background:var(--surface-2)}
.guest-bar-shade{position:fixed;z-index:64;left:0;right:0;bottom:0;height:calc(190px + env(safe-area-inset-bottom,0px));pointer-events:none;
  background:linear-gradient(180deg,#05070f00 0%,#05070fb3 40%,#05070ff2 100%)}
html.has-accounts:not(.is-guest) :is(.guest-bar,.guest-bar-shade),
html.cx-auth-page :is(.guest-bar,.guest-bar-shade),
html.cx-gb-closed :is(.guest-bar,.guest-bar-shade),
html.is-locked :is(.guest-bar,.guest-bar-shade){display:none}
html:not(.cx-auth-page):not(.cx-gb-closed):not(.is-locked):not(.has-accounts:not(.is-guest)) body{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))!important}
@keyframes gbIn{0%{transform:translate(-50%,140%)}100%{transform:translate(-50%,0)}}
@keyframes gbGlow{0%,100%{box-shadow:0 10px 30px #000000cc,0 0 26px #ffc233aa}50%{box-shadow:0 10px 30px #000000cc,0 0 56px #ffc233ee}}
@keyframes gbSpin{to{transform:translate(-50%,-50%) rotate(1turn)}}
@keyframes gbSweep{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}
@keyframes gbWobble{0%,60%,100%{transform:rotate(0) scale(1)}10%{transform:rotate(-12deg) scale(1.1)}20%{transform:rotate(10deg) scale(1.1)}30%{transform:rotate(-8deg)}40%{transform:rotate(5deg)}}
@keyframes gbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes gbShine{0%{left:-60%}60%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.guest-bar,.guest-bar *,.guest-bar__card:before,.guest-bar__in:after{animation:none!important}}
@media (max-width:560px){.guest-bar__in{gap:10px;padding:12px}.guest-bar__gift{width:42px;height:42px;font-size:24px;border-radius:12px}
  .guest-bar__title{font-size:14px}.guest-bar__btn{padding:12px 16px;font-size:14px}}
@media (max-width:360px){.guest-bar__gift{display:none}}