@font-face{font-family:"Creepster";src:url("./Creepster-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
.header{gap:8px}
.header .halloween-neon{display:block;flex:0 1 auto;max-width:none;text-align:center;padding:4px 0;color:#ffad42;font:400 clamp(32px,3.5vw,46px)/1.06 "Creepster",fantasy;letter-spacing:.015em}
.halloween-neon span{display:block;white-space:nowrap}
.halloween-neon .neon-maudit{color:#b1ff4b;text-shadow:0 0 3px #58b923,0 0 9px #66db2480}
.halloween-neon .neon-halloween{color:#b988ff;margin-top:1px;text-shadow:0 0 3px #743fe0,0 0 9px #863fdf80}
.halloween-neon:after{content:none}

@media(max-width:700px){.header .halloween-neon{font-size:clamp(26px,7.8vw,36px)}.header .brand{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){.halloween-neon span{animation:none!important;filter:none;opacity:1}}

/* Center the sign independently of the phoenix; put the player menu directly below. */
.header{display:grid;grid-template-columns:76px minmax(0,1fr) 76px;gap:0;align-items:center;padding:10px 0 2px}
.header .brand{grid-column:1;grid-row:1;justify-self:start;min-width:44px;min-height:44px}
.header .halloween-neon{grid-column:2;grid-row:1;justify-self:center;padding:0;line-height:1.02}
.navigation{justify-content:center;padding-top:4px}
.navigation a:first-child{grid-column:auto}
@media(max-width:700px){.header{grid-template-columns:64px minmax(0,1fr) 64px;padding:10px 0 2px}.header .halloween-neon{font-size:clamp(28px,8vw,36px)}.navigation{padding-top:4px}.navigation a:first-child{grid-column:auto}}

/* Constant light; brief shivers replace the previous brightness pulse. */
.header .halloween-neon{margin:0;animation:halloween-shiver 3.6s linear infinite;transform-origin:center}
@keyframes halloween-shiver{0%,24%,100%{transform:translate(0,0) rotate(0deg)}3%,9%,15%,21%{transform:translate(-1.3px,.4px) rotate(-.6deg)}6%,12%,18%{transform:translate(1.3px,-.4px) rotate(.6deg)}}
@media(prefers-reduced-motion:reduce){.header .halloween-neon{animation:none;transform:none}}

/* Player entrance: large title, card fan, then the four player actions. */
.player-home .header{display:block;position:relative;padding:18px 0 8px}
.player-home .header .brand{position:absolute;top:14px;left:0}
.player-home .header .halloween-neon{font-size:clamp(54px,6vw,76px);width:max-content;max-width:100%;margin:0 auto}
.player-home .navigation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:780px;margin:0 auto;padding:12px 0 22px;gap:10px}
.player-home .navigation a{min-height:48px;font-size:15px;font-weight:650}
.player-home .hero{display:block;max-width:780px;margin:auto;padding:30px 0}
@media(max-width:700px){.player-home .header{padding:16px 0 4px}.player-home .header .brand{top:10px}.player-home .header .brand svg{width:48px;height:40px}.player-home .header .halloween-neon{font-size:clamp(46px,12vw,62px)}.player-home .navigation{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 0 18px}.player-home .navigation a{font-size:13px}.player-home .hero{padding-top:24px}}

@font-face{font-family:"Metal Mania";src:url("./MetalMania-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
/* A full-width invitation, followed by explanation without duplicate actions. */
.player-home .hero{max-width:none;text-align:center;padding:28px 0 30px}
.player-home .welcome-title{font:400 clamp(34px,4.6vw,58px)/1.15 "Metal Mania",fantasy;color:#f7dfaa;letter-spacing:.015em;margin:0 0 20px;text-wrap:balance;text-shadow:0 2px 0 #633279,0 4px 0 #351b4f,0 0 18px #bd78d840}
.player-home .hero-copy>p:not(.eyebrow){max-width:780px;margin-left:auto;margin-right:auto}
@media(max-width:700px){.player-home .hero{padding:24px 0}.player-home .welcome-title{font-size:clamp(32px,8.5vw,48px);margin-bottom:18px}}

/* One numbered journey, directly below the welcome heading. */
.player-home .player-steps{counter-reset:list-item;max-width:1020px;margin:26px auto 0;padding:22px 0;gap:24px;text-align:left;border-top:0}
.player-home .player-steps li{display:flex;align-items:flex-start;gap:14px;min-width:0}
.player-home .player-steps .step-number{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;margin:0;border:1px solid #b98de8;border-radius:50%;background:linear-gradient(145deg,#623484,#291735);color:#dbff95;font:400 30px/1 "Metal Mania",fantasy;box-shadow:0 3px 0 #0e081b,0 0 14px #a064cf30}
.player-home .player-steps b{font:400 27px/1.2 "Metal Mania",fantasy;color:#f7dfaa}
.player-home .player-steps div>span{font-size:14px;line-height:1.5;margin-top:8px;color:#e0cfe9}
@media(max-width:700px){.player-home .player-steps{max-width:420px;gap:24px;margin-top:22px;padding:12px 0 24px}.player-home .player-steps b{font-size:26px}}


/* Clickable original miniature cards below the instructions. */
.player-home .navigation,.player-home .player-steps{border:0}
.player-home .card-frieze{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:5px;max-width:1020px;margin:20px auto;align-items:center;padding:6px 0}
.player-home .card-frieze :is(img,canvas){display:block;width:100%;height:auto;min-width:0;border-radius:4px;box-shadow:0 3px 8px #0008}
.player-home .player-steps{margin:0 auto;padding:20px 0;gap:24px}
.player-home .hero{padding-bottom:8px}
@media(max-width:700px){.player-home .card-frieze{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:14px auto}.player-home .card-frieze>.player-card:nth-child(n+9){display:none}.player-home .player-steps{margin:0 auto;padding:18px 0}}

.player-home .ticket-awakening{font:400 clamp(28px,3vw,38px)/1.25 "Metal Mania",fantasy;color:#b988ff;text-shadow:0 0 3px #743fe0,0 0 9px #863fdf80;margin:0 auto 16px;animation:halloween-shiver 3.6s linear infinite;transform-origin:center;text-wrap:balance}
@media(prefers-reduced-motion:reduce){.player-home .ticket-awakening{animation:none;transform:none}}

/* The physical-card objective sits centered beneath the first three steps. */
.player-home .player-steps .prize-step{grid-column:1/-1;justify-content:center;align-items:center;max-width:900px;width:100%;margin:12px auto 0;padding:20px 18px;text-align:center;border-radius:16px;background:radial-gradient(ellipse at center,#63306b55,transparent 75%)}
.player-home .prize-step b{font-size:clamp(26px,2.5vw,34px);line-height:1.25;color:#ffbd70;text-shadow:0 2px 0 #622b35,0 0 12px #ff922333}
.player-home .prize-step .step-number{color:#ffcf89;border-color:#c49262;flex-shrink:0}
@media(max-width:700px){.player-home .player-steps .prize-step{flex-direction:column;gap:12px;padding:18px 8px;margin-top:4px}.player-home .prize-break{display:none}}

/* Seven original cards, with an accessible full-screen viewer. */
.player-home .player-fan{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;width:100%;max-width:910px;margin:0 auto;padding:22px 0 18px}
.player-card{display:block;min-width:0;border-radius:7px;cursor:zoom-in;touch-action:manipulation}
.player-home .player-fan .player-card :is(img,canvas){display:block;width:100%;max-width:none;height:auto;aspect-ratio:1000/1375;object-fit:contain;margin:0;position:static;transform:none;border-radius:7px;box-shadow:0 6px 16px #0008}
.player-card:focus-visible{outline:3px solid #b988ff;outline-offset:3px}
.card-viewer{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:calc(64px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));border:0;background:#100a19f7;overflow:hidden}
.card-viewer::backdrop{background:#100a19}
.card-viewer[open]{display:flex;align-items:center;justify-content:center}
.card-viewer-image{display:block;width:100%;height:100%;object-fit:contain}
.card-viewer-close{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:16px;min-height:44px;padding:8px 18px;border:1px solid #b988ff;border-radius:10px;background:#29163e;color:#fff;font:600 16px/1.4 system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.card-viewer-close:focus-visible{outline:3px solid #ffdc83;outline-offset:3px}
html.card-viewer-open{overflow:hidden}
@media(max-width:700px){.player-home .player-fan{gap:4px;padding:18px 0 14px}}

/* Keep the fourth instruction aligned with its number on phones and tablets. */
@media(max-width:1024px){
  .player-home .player-steps .prize-step{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;gap:14px;margin:0;padding:0;text-align:left;background:none}
  .player-home .player-steps .prize-step>div{min-width:0}
  .player-home .player-steps .prize-step b{font-size:26px;line-height:1.2}
}

/* Each visible lower-frieze card grows and returns before the next one. */
.player-home .card-frieze>.player-card{position:relative;animation:frieze-pulse 38.4s ease-in-out infinite;animation-delay:var(--card-delay,0s);transform-origin:center}
@keyframes frieze-pulse{0%,6.25%,100%{transform:scale(1);z-index:0}3.125%{transform:scale(4);z-index:2}}
.player-home .card-frieze>.player-card:nth-child(1){--card-delay:0.0s}
.player-home .card-frieze>.player-card:nth-child(2){--card-delay:2.4s}
.player-home .card-frieze>.player-card:nth-child(3){--card-delay:4.8s}
.player-home .card-frieze>.player-card:nth-child(4){--card-delay:7.2s}
.player-home .card-frieze>.player-card:nth-child(5){--card-delay:9.6s}
.player-home .card-frieze>.player-card:nth-child(6){--card-delay:12.0s}
.player-home .card-frieze>.player-card:nth-child(7){--card-delay:14.4s}
.player-home .card-frieze>.player-card:nth-child(8){--card-delay:16.8s}
.player-home .card-frieze>.player-card:nth-child(9){--card-delay:19.2s}
.player-home .card-frieze>.player-card:nth-child(10){--card-delay:21.6s}
.player-home .card-frieze>.player-card:nth-child(11){--card-delay:24.0s}
.player-home .card-frieze>.player-card:nth-child(12){--card-delay:26.4s}
.player-home .card-frieze>.player-card:nth-child(13){--card-delay:28.8s}
.player-home .card-frieze>.player-card:nth-child(14){--card-delay:31.2s}
.player-home .card-frieze>.player-card:nth-child(15){--card-delay:33.6s}
.player-home .card-frieze>.player-card:nth-child(16){--card-delay:36.0s}

@media(max-width:700px){.player-home .card-frieze>.player-card{animation-name:frieze-pulse-mobile;animation-duration:19.2s}}
@keyframes frieze-pulse-mobile{0%,12.5%,100%{transform:scale(1);z-index:0}6.25%{transform:scale(4);z-index:2}}
html.card-viewer-open .card-frieze>.player-card{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.player-home .card-frieze>.player-card{animation:none;transform:none}}

/* Room for the doubled artwork; edge cards grow toward the inside. */
.player-home .card-frieze{margin:48px auto}
.player-home .card-frieze>.player-card:first-child{transform-origin:left center}
.player-home .card-frieze>.player-card:last-child{transform-origin:right center}
@media(max-width:700px){.player-home .card-frieze{margin:48px auto}.player-home .card-frieze>.player-card:nth-child(8){transform-origin:right center}}

/* Clearance for fourfold growth, including the second card near either edge. */
.player-home .card-frieze{margin:clamp(90px,13vw,140px) auto}
.player-home .card-frieze>.player-card:nth-child(2){transform-origin:left center}
.player-home .card-frieze>.player-card:nth-last-child(2){transform-origin:right center}
@media(max-width:700px){.player-home .card-frieze{margin:clamp(90px,26vw,180px) auto}.player-home .card-frieze>.player-card:nth-child(7){transform-origin:right center}}

/* Pink transparent neon to the left of the Halloween title. */
.player-home .header .brand{grid-area:auto;top:8px;left:0}
.player-home .header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:24px;align-items:center;padding:96px 8px 32px}
.player-home .player-neon-note{grid-column:1;grid-row:1;min-width:0;width:100%;max-width:320px;justify-self:center;transform:rotate(-9deg)}
.player-home .player-neon-note :is(img,canvas){display:block;width:100%;height:auto;background:transparent;animation:neon-sputter 7.6s linear infinite}
.player-home .header .halloween-neon{grid-column:2;grid-row:1}
.player-home .halloween-neon .neon-maudit{animation:neon-sputter 8.8s linear infinite;animation-delay:1.6s}
.player-home .halloween-neon .neon-halloween{animation:neon-sputter 9.4s linear infinite;animation-delay:3.3s}
@keyframes neon-sputter{0%,14%,20%,49%,56%,100%{opacity:1;filter:brightness(1)}16%,51%{opacity:.68;filter:brightness(.8)}18%,53%{opacity:1;filter:brightness(1.15)}}
@media(max-width:700px){
 .player-home .header{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px;padding:78px 6px 32px}
 .player-home .header .halloween-neon{font-size:clamp(32px,10vw,62px)}
 .player-home .player-neon-note{max-width:280px}
}
@media(prefers-reduced-motion:reduce){.player-home .player-neon-note :is(img,canvas),.player-home .halloween-neon span{animation:none!important;opacity:1;filter:none}}

/* A companion neon on the right; keep both captions readable on phones. */
.player-home .player-neon-tickets{grid-column:3;transform:rotate(9deg)}
.player-home .player-neon-tickets :is(img,canvas){animation-delay:2.4s}
@media(max-width:700px){
 .player-home .header{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:58px 8px 30px}
 .player-home .header .halloween-neon{grid-column:1/-1;grid-row:1;font-size:clamp(46px,12vw,62px)}
 .player-home .player-neon-note{grid-column:1;grid-row:2;max-width:280px}
 .player-home .player-neon-tickets{grid-column:2}
}

/* Handwritten luminous tubes, in two lines, with the original slight tilt. */
.player-home .player-neon-note{transform:rotate(-9deg);filter:none}
.player-home .player-neon-tickets{transform:rotate(9deg);filter:none}

/* Match the apparent letter height, not the two differently worded image widths. */
.player-home .player-neon-tickets :is(img,canvas){width:80%;margin-inline:auto}

/* Show the whole landscape animation within the same full-screen card viewer. */
.card-viewer-video{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
.card-viewer-image[hidden],.card-viewer-video[hidden]{display:none}

/* Gentle sequential growth of the seven entrance cards. */
.player-home .player-fan>.player-card{position:relative;animation:entrance-card-pulse 16.8s ease-in-out infinite;animation-delay:var(--entrance-delay,0s);transform-origin:center}
.player-home .player-fan>.player-card:first-child{transform-origin:left center}
.player-home .player-fan>.player-card:last-child{transform-origin:right center}
@keyframes entrance-card-pulse{0%,14.2857%,100%{transform:scale(1);z-index:0}7.142857%{transform:scale(var(--entrance-peak,1.14));z-index:2}}
.player-home .player-fan>.player-card:nth-child(2){--entrance-delay:2.4s}
.player-home .player-fan>.player-card:nth-child(3){--entrance-delay:4.8s}
.player-home .player-fan>.player-card:nth-child(4){--entrance-delay:7.2s}
.player-home .player-fan>.player-card:nth-child(5){--entrance-delay:9.6s}
.player-home .player-fan>.player-card:nth-child(6){--entrance-delay:12s}
.witch-play{position:absolute;bottom:5px;right:5px;display:grid;place-items:center;width:25px;height:25px;border:1px solid #caff8d;border-radius:50%;background:#15260be6;color:#d5ff9c;font:700 13px/1 system-ui;box-shadow:0 0 8px #aaff5870;pointer-events:none}
.player-home .witch-hint{margin:0 auto 6px;text-align:center;font-size:14px;line-height:1.35}
.player-home .witch-hint a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:4px 10px;color:#caff8d;cursor:pointer;text-underline-offset:4px}
html.card-viewer-open .player-fan>.player-card{animation-play-state:paused}
@media(max-width:700px){.witch-play{width:19px;height:19px;bottom:3px;right:3px;font-size:10px}.player-home .witch-hint{font-size:12px}}
@media(prefers-reduced-motion:reduce){.player-home .player-fan>.player-card{animation:none;transform:none}}

/* Give the animated witch a stronger invitation, without an extra text row. */
.player-home .player-fan>.animated-witch{--entrance-peak:1.7}
.player-home .player-fan{padding-top:90px;padding-bottom:65px}
.player-home .witch-play{top:-12px;bottom:auto;left:50%;right:auto;transform:translateX(-50%)}
@media(max-width:700px){.player-home .witch-play{top:-9px}.player-home .player-fan{padding-top:clamp(46px,10vw,75px);padding-bottom:clamp(32px,8vw,60px)}}

/* The orange skeleton uses the same larger invitation as the green witch. */
.player-home .player-fan>.animated-skeleton{--entrance-peak:1.7}
.animated-skeleton .witch-play{border-color:#ffd092;background:#382009ed;color:#ffd092;box-shadow:0 0 8px #ff8b3870}

/* Violet vampire: same prominence, growing inward from the end of the row. */
.player-home .player-fan>.animated-vampire{--entrance-peak:1.7}
.animated-vampire .witch-play{border-color:#e5b4ff;background:#2f1149ed;color:#e5b4ff;box-shadow:0 0 8px #bb64ff90}

/* Green pumpkin: first card grows inward, with the shared green play badge. */
.player-home .player-fan>.animated-pumpkin{--entrance-peak:1.7}

/* Blue rat: cropped original animation, same play affordance. */
.player-home .player-fan>.animated-rat{--entrance-peak:1.7}
.animated-rat .witch-play{border-color:#9be4ff;background:#092b43ed;color:#9be4ff;box-shadow:0 0 8px #38baff90}

.player-home .player-fan>.player-card:nth-child(7){--entrance-delay:14.4s}

/* Orange raven: same invitation as the other animated cards. */
.player-home .player-fan>.animated-raven{--entrance-peak:1.7}
.animated-raven .witch-play{border-color:#ffd092;background:#382009ed;color:#ffd092;box-shadow:0 0 8px #ff8b3870}

/* Blue werewolf: same invitation as the other animated cards. */
.player-home .player-fan>.animated-wolf{--entrance-peak:1.7}
.animated-wolf .witch-play{border-color:#9be4ff;background:#092b43ed;color:#9be4ff;box-shadow:0 0 8px #38baff90}

/* Increase the player home title by exactly 20 percent. */
.player-home .header .halloween-neon{font-size:clamp(64.8px,7.2vw,91.2px)}
@media(max-width:700px){.player-home .header .halloween-neon{font-size:clamp(55.2px,14.4vw,74.4px)}}