/* Golden Lion — cinematic sequences, live celebrations and sponsor showcase */

/* ---------- playing card (3D flip) ---------- */
.cc { --cw: clamp(40px, 11vw, 64px); width: var(--cw); height: calc(var(--cw) * 1.4); perspective: 700px; opacity: 0; transform: translateY(-60vh) rotate(-25deg) scale(.6); transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s, filter .4s; }
.cc.dealt { opacity: 1; transform: none; }
.cc-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .5s cubic-bezier(.3, .7, .2, 1); }
.cc.up .cc-in { transform: rotateY(0); }
.cc.slow .cc-in { transition-duration: 1.3s; }
.cc-face, .cc-back { position: absolute; inset: 0; border-radius: calc(var(--cw) * .1); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, .55); }
.cc-face { background: linear-gradient(160deg, #ffffff, #ecebe6); color: #15171b; font-family: "Roboto Condensed", sans-serif; font-weight: 700; }
.cc-face.red { color: #d0202b; }
.cc-tl, .cc-br { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .9; font-size: calc(var(--cw) * .27); }
.cc-tl i, .cc-br i { font-style: normal; font-size: .8em; }
.cc-tl { top: 6%; left: 8%; }
.cc-br { bottom: 6%; right: 8%; transform: rotate(180deg); }
.cc-mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .55); }
.cc-back { transform: rotateY(180deg); background: #7a0d14; border: calc(var(--cw) * .05) solid #f4efe4; overflow: hidden; }
.cc-back span { position: absolute; inset: 4px; border-radius: 4px; border: 1px solid rgba(241, 213, 142, .6);
  background: repeating-linear-gradient(45deg, rgba(241, 213, 142, .18) 0 4px, transparent 4px 9px), repeating-linear-gradient(-45deg, rgba(241, 213, 142, .18) 0 4px, transparent 4px 9px), #8e111a; }
.cc-back span::after { content: "♠"; position: absolute; inset: 0; display: grid; place-items: center; color: #f1d58e; font-size: calc(var(--cw) * .42); text-shadow: 0 0 8px rgba(0, 0, 0, .5); }
.cc.win { filter: drop-shadow(0 0 10px rgba(241, 213, 142, .95)) drop-shadow(0 0 22px rgba(209, 166, 75, .6)); transform: translateY(-6px); }
.cc.win .cc-face { box-shadow: 0 0 0 2px #f1d58e, 0 8px 18px rgba(0, 0, 0, .5); }
.cc.dim { filter: brightness(.45) saturate(.6); }

/* ---------- legendary hand overlay ---------- */
.cine { position: fixed; inset: 0; z-index: 300; background: #050607; display: grid; place-items: center; animation: cineIn .45s ease; overflow: hidden; }
.cine.out { animation: cineOut .45s ease forwards; }
@keyframes cineIn { from { opacity: 0; } }
@keyframes cineOut { to { opacity: 0; transform: scale(1.04); } }
.cine-felt {
  position: relative; width: min(96vw, 760px); height: min(92vh, 760px); border-radius: 48% / 34%;
  background: radial-gradient(ellipse at 50% 45%, #1d8255 0%, #12603e 45%, #093621 100%);
  box-shadow: 0 0 0 10px #1e2026, 0 0 0 12px #3d424b, 0 40px 120px rgba(0, 0, 0, .9), inset 0 0 120px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 6% 4%;
}
@media (orientation: landscape) and (max-height: 600px) { .cine-felt { height: 94vh; border-radius: 40% / 48%; padding: 2% 8%; } .cc { --cw: clamp(34px, 8vh, 56px); } }
.cine-brand { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: .14; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.cine-brand img { width: 46px; }
.cine-brand b { font: 700 22px "Roboto Condensed", sans-serif; letter-spacing: .4em; color: #fff; }
.cine-brand small { font: 500 11px "Roboto Condensed", sans-serif; letter-spacing: .3em; color: #fff; text-transform: uppercase; }
.cine-seat { display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; }
.cine-hole { display: flex; gap: 6px; }
.cine-hole.reveal .cc { transform: scale(1.06); }
.cine-name { display: flex; align-items: center; gap: 10px; padding: 5px 14px; border-radius: 6px; background: rgba(5, 6, 7, .85); border: 1px solid #3a3f49; color: #fff; font: 700 13px "Roboto Condensed", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.cine-name.hero { border-color: #d1a64b; }
.cine-name .stack { color: #d1a64b; font-variant-numeric: tabular-nums; }
.cine-act { min-height: 26px; padding: 4px 12px; border-radius: 4px; font: 700 13px "Roboto Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: #2a2d33; opacity: 0; transform: scale(.6); transition: all .25s cubic-bezier(.3, 1.6, .5, 1); }
.cine-act.show { opacity: 1; transform: scale(1); }
.cine-act.allin { background: #e0232e; font-size: 26px; padding: 6px 22px; letter-spacing: .14em; box-shadow: 0 0 30px rgba(224, 35, 46, .8); animation: allin 1s ease infinite; }
@keyframes allin { 50% { box-shadow: 0 0 60px rgba(224, 35, 46, 1); transform: scale(1.06); } }
.cine-act.call { background: #2f6fa8; }
.cine-mid { display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 2; }
.cine-board { display: flex; gap: 6px; }
.cine-pot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cine-pot span { font: 700 15px "Roboto Condensed", sans-serif; color: #f1d58e; letter-spacing: .06em; text-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.cine-pot span.bump { animation: bump .35s ease; }
@keyframes bump { 50% { transform: scale(1.25); } }
.cine .chips { position: relative; width: 120px; height: 34px; transition: transform 1s cubic-bezier(.5, 0, .2, 1), opacity 1s; }
.cine .chips.to-hero { transform: translateY(30vh) scale(.7); opacity: 0; }
.chip-fly { position: absolute; left: calc(50% + var(--dx)); top: 8px; width: 22px; height: 22px; border-radius: 50%; margin-left: -11px;
  background: radial-gradient(circle, #e0232e 34%, #fff 35% 42%, #e0232e 43%); box-shadow: 0 2px 3px rgba(0, 0, 0, .6), inset 0 0 0 2px #fff; animation-duration: .55s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.3, .7, .3, 1); }
.chip-fly:nth-child(3n) { background: radial-gradient(circle, #1f1f1f 34%, #d1a64b 35% 42%, #1f1f1f 43%); box-shadow: 0 2px 3px rgba(0, 0, 0, .6), inset 0 0 0 2px #d1a64b; }
.chip-fly:nth-child(4n) { background: radial-gradient(circle, #2f6fa8 34%, #fff 35% 42%, #2f6fa8 43%); }
.chip-fly.from-top { animation-name: chipTop; }
.chip-fly.from-bottom { animation-name: chipBottom; }
@keyframes chipTop { from { transform: translateY(-28vh) scale(.8); opacity: 0; } }
@keyframes chipBottom { from { transform: translateY(28vh) scale(.8); opacity: 0; } }
.cine.shake .cine-felt { animation: shake .45s ease 2; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.cine.slowmo .cine-felt { box-shadow: 0 0 0 10px #1e2026, 0 0 0 12px #d1a64b, 0 0 80px rgba(209, 166, 75, .5), inset 0 0 160px rgba(0, 0, 0, .7); transition: box-shadow .6s; }
.cine-result { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; z-index: 5; text-align: center; padding: 18px 28px; border-radius: 12px;
  background: rgba(5, 6, 7, .9); border: 1px solid #d1a64b; box-shadow: 0 0 60px rgba(209, 166, 75, .45); transition: all .5s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.cine-result.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cine-result .r-sub { display: block; font: 700 12px "Roboto Condensed", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #b9bec7; }
.cine-result b { display: block; margin: 4px 0; font: 700 clamp(26px, 6vw, 42px) "Roboto Condensed", sans-serif; text-transform: uppercase; letter-spacing: .04em;
  background: linear-gradient(100deg, #b7862e 0%, #f6e3a6 30%, #fff 45%, #d1a64b 60%, #b7862e 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 2.4s linear infinite; }
.cine-result .r-lose { display: block; color: #7d8590; font-size: 13px; }
.cine-result .r-pot { display: block; margin-top: 6px; color: #f1d58e; font: 700 16px "Roboto Condensed", sans-serif; }
.cine.celebrate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(241, 213, 142, .22), transparent 60%); animation: flashIn 1.2s ease; }
@keyframes flashIn { from { opacity: 0; } 30% { opacity: 1; } }
.cine-sp { position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; opacity: .55; }
.cine-sp img { height: 34px; }
.cine-skip { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 10; padding: 8px 16px; border-radius: 20px; border: 1px solid #3a3f49; background: rgba(0, 0, 0, .6); color: #fff; font: 700 12px "Roboto Condensed", sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.cine.done .cine-skip { background: #e0232e; border-color: #e0232e; animation: allin 1.4s ease infinite; }

/* ---------- live celebration ---------- */
.celebr { position: fixed; inset: 0; z-index: 280; display: grid; place-items: center; background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); animation: cineIn .3s ease; overflow: hidden; cursor: pointer; }
.celebr.out { animation: cineOut .4s ease forwards; }
.cb-box { position: relative; z-index: 2; text-align: center; padding: 22px 26px; border-radius: 14px; background: linear-gradient(180deg, #15171c, #0c0d10); border: 1px solid rgba(209, 166, 75, .6); box-shadow: 0 0 80px rgba(209, 166, 75, .35); max-width: 92vw; animation: pop .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
.cb-kicker { display: block; font: 700 12px "Roboto Condensed", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #ff6b72; }
.cb-cards { display: flex; gap: 6px; justify-content: center; margin: 16px 0 12px; }
.cb-title { display: block; font: 700 clamp(30px, 8vw, 48px) "Roboto Condensed", sans-serif; text-transform: uppercase; letter-spacing: .04em;
  background: linear-gradient(100deg, #b7862e 0%, #f6e3a6 30%, #fff 45%, #d1a64b 60%, #b7862e 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 2.4s linear infinite; }
.cb-sub { display: block; color: #eceef1; font-size: 15px; margin-top: 4px; }
.cb-trophy { font-size: 64px; animation: trophy 1.2s ease infinite; filter: drop-shadow(0 0 20px rgba(241, 213, 142, .8)); }
@keyframes trophy { 50% { transform: translateY(-8px) rotate(-4deg); } }
.confetti { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; background: #d1a64b; animation: fall 3.2s linear forwards; }
.confetti:nth-of-type(3n) { background: #e0232e; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff; }
.confetti:nth-of-type(4n) { background: #f6e3a6; }
@keyframes fall { to { transform: translateY(110vh) rotate(var(--r)); } }

/* ---------- gold foil (shared) ---------- */
@keyframes foil { to { background-position: -250% 0; } }
.foil-title {
  background: linear-gradient(100deg, #9c7424 0%, #f6e3a6 25%, #fff8e1 35%, #d1a64b 50%, #9c7424 70%, #f1d58e 85%, #9c7424 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 5s linear infinite;
  filter: drop-shadow(0 0 12px rgba(209, 166, 75, .35));
}

/* ---------- sponsor showcase (rotating gold border + holographic shine + tilt) ---------- */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.sp-card { position: relative; border-radius: 14px; padding: 2px; background: conic-gradient(from var(--ang), #3a2c10, #d1a64b, #fff3cc, #d1a64b, #3a2c10 40%, #3a2c10 60%, #f1d58e, #3a2c10); animation: spin 6s linear infinite; }
@keyframes spin { to { --ang: 360deg; } }
.sp-card > .sp-in { position: relative; isolation: isolate; border-radius: 12px; background: radial-gradient(ellipse at 50% 0%, #1d1a12, #0d0e11 70%); overflow: hidden; height: 100%; }
.sp-card .sp-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 244, 210, .22) 45%, rgba(255, 255, 255, .35) 50%, rgba(255, 244, 210, .18) 55%, transparent 70%); transform: translateX(-120%); animation: shine 4.5s ease-in-out infinite; }
.sp-card:nth-child(2) .sp-shine { animation-delay: 2.2s; }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
/* The logo itself never moves or scales (keeps it pixel-sharp); the pulsing glow is a separate layer behind it. */
.sp-card img.sp-glow { position: relative; z-index: 1; transform: none; filter: drop-shadow(0 0 10px rgba(241, 213, 142, .3)); image-rendering: auto; }
.sp-card > .sp-in::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 38%; width: 90%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(241, 213, 142, .26), rgba(209, 166, 75, .08) 45%, transparent 70%); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.sp-card .sp-shine { z-index: 2; }
.sp-badge { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px "Roboto Condensed", sans-serif; text-transform: uppercase; letter-spacing: .18em; color: #f1d58e; }
.sp-badge::before, .sp-badge::after { content: ""; width: 18px; height: 1px; background: linear-gradient(90deg, transparent, #d1a64b); }
.sp-badge::after { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .foil-title, .cb-title, .cine-result b, .sp-card, .sp-card .sp-shine, .sp-card > .sp-in::before, .confetti, .cb-trophy, .cine-act.allin { animation: none !important; }
  .cc, .cc-in { transition: none !important; }
}

/* layout refinements */
.cine-brand { top: 67%; white-space: nowrap; }
.cine-brand b { font-size: 16px; letter-spacing: .3em; }
.cine-brand img { width: 30px; }
.cine-sp { bottom: auto; top: 75%; gap: 22px; opacity: .4; }
.cine-sp img { height: 30px; }
.cine-result { top: 30%; }
.cine.celebrate .cine-act { opacity: 0; transform: scale(.6); }
.cine.celebrate .cine-brand { opacity: .25; }