/* Arcade revamp ("wow" layer): the world map home, the animated game select, and motion on every screen.
   Loaded after style.css. Colours come from the theme variables, so every site and theme keeps its palette.
   All motion stops with the Motion setting (html.no-motion, style.css) and with reduced motion (below). */

@keyframes wow-dash{to{stroke-dashoffset:-32;}}
@keyframes wow-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes wow-hop{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@keyframes wow-blink{50%{opacity:0;}}
@keyframes wow-flicker{0%,92%,100%{opacity:1;}93%{opacity:.35;}95%{opacity:1;}96%{opacity:.6;}}
@keyframes wow-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent-amber) 70%, transparent), 4px 4px 0 #000;}50%{box-shadow:0 0 0 12px transparent, 4px 4px 0 #000;}}
@keyframes wow-tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes wow-rise{0%{transform:translateY(0) rotateY(0);opacity:0;}10%{opacity:.9;}100%{transform:translateY(-105vh) rotateY(720deg);opacity:0;}}
@keyframes wow-march{0%,100%{transform:translateX(-18px);}50%{transform:translateX(18px);}}
@keyframes wow-fall{0%{transform:translateY(-44px);opacity:0;}25%{opacity:1;}100%{transform:translateY(36px);opacity:1;}}
@keyframes wow-ball{0%,100%{transform:translate(-34px,18px);}50%{transform:translate(34px,-26px);}}
@keyframes wow-flap{0%,100%{transform:translateY(14px);}50%{transform:translateY(-14px);}}
@keyframes wow-spin{to{transform:rotate(360deg);}}
@keyframes wow-run{from{transform:translateX(60px);}to{transform:translateX(-80px);}}
@keyframes wow-glowb{0%,100%{border-color:var(--accent-amber);}50%{border-color:#F5C542;}}
@keyframes wow-pop{0%{transform:scale(.7);opacity:0;}70%{transform:scale(1.04);}100%{transform:scale(1);opacity:1;}}
@keyframes wow-shine{0%{transform:translateX(-120%) skewX(-20deg);}55%,100%{transform:translateX(520%) skewX(-20deg);}}
@keyframes wow-in{from{opacity:0;}to{opacity:1;}}
@keyframes wow-inL{0%{transform:translateX(-60vw);}60%{transform:translateX(16px);}100%{transform:none;}}
@keyframes wow-inR{0%{transform:translateX(60vw);}60%{transform:translateX(-16px);}100%{transform:none;}}
@keyframes wow-vs{0%{transform:scale(4);opacity:0;}40%{transform:scale(.9);opacity:1;}55%{transform:scale(1.12);}100%{transform:scale(1);}}
@keyframes wow-vsb{0%,100%{transform:scale(1);}50%{transform:scale(1.16);}}
@keyframes wow-shake{0%,100%{transform:none;}25%{transform:translate(-4px,2px);}50%{transform:translate(3px,-3px);}75%{transform:translate(-2px,-2px);}}
@keyframes wow-cd{0%{transform:scale(2.4);opacity:0;}35%{transform:scale(.92);opacity:1;}55%{transform:scale(1.06);}100%{transform:scale(1);}}
@keyframes wow-slide{from{transform:translateX(50px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes wow-rankup{0%{background:color-mix(in srgb, var(--success) 45%, transparent);}100%{background:transparent;}}
@keyframes wow-up{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-18px);opacity:0;}}
@keyframes wow-rainbow{0%,100%{color:#F5C542;}33%{color:var(--accent-amber);}66%{color:var(--accent-magenta);}}
@keyframes wow-spinY{to{transform:rotateY(360deg);}}
@keyframes wow-fill{from{width:0;}}
@keyframes wow-float{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-10px) rotate(1deg);}}
@keyframes wow-ok{0%{transform:scale(0);}70%{transform:scale(1.3);}100%{transform:scale(1);}}
@keyframes wow-stripe{to{background-position:24px 0;}}

.px{font-family:'Press Start 2P',monospace; font-weight:400;}

/* ---------- every screen: a quick arcade entrance ---------- */
.screen.active{animation:wow-in .35s ease-out;}
.screen.active > .section-head h2,#compDetailBody > .section-head h2,#warCreateBody > .section-head h2{text-shadow:3px 3px 0 #000, 0 0 16px color-mix(in srgb, var(--accent-amber) 70%, transparent); animation:wow-flicker 4s infinite;}

/* ---------- floating coins behind the page ---------- */
.wow-coins{position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden;}
.wow-coins i{position:absolute; bottom:-24px; width:14px; height:14px; background:#F5C542; box-shadow:inset -4px -4px 0 #A87E10; animation:wow-rise 9s linear infinite; opacity:0;}
.wow-coins i:nth-child(1){left:7%;} .wow-coins i:nth-child(2){left:31%; animation-delay:3s;} .wow-coins i:nth-child(3){left:62%; animation-delay:6s;} .wow-coins i:nth-child(4){left:90%; animation-delay:1.5s;}
html.playing .wow-coins{display:none;}

/* ---------- winners ticker (home and the mode screens) ---------- */
.wow-tick{background:var(--accent-amber); color:var(--on-accent); overflow:hidden; white-space:nowrap; font-family:'Press Start 2P',monospace; font-size:9px; margin:0 0 12px; box-shadow:4px 4px 0 #000;}
.wow-tick:empty{display:none;}
.wow-tick > div{display:inline-block; padding:9px 0; animation:wow-tick 36s linear infinite;}
.wow-tick:hover > div{animation-play-state:paused;}
.wow-tick span{margin:0 22px;} .wow-tick b{font-weight:400; text-decoration:underline;}
.no-motion .wow-tick .dup{display:none;}

/* boss fight: the biggest live Token WAR */
.wboss{display:flex; gap:18px; align-items:center; width:100%; margin:14px 0 0; padding:12px 16px; text-align:left; cursor:pointer; font-family:inherit; color:var(--text-primary);
  background:var(--bg-panel); border:4px solid var(--accent-amber); animation:wow-pulse 1.6s infinite;}
.wboss[hidden]{display:none;}
.wboss .wb-tag{font-family:'Press Start 2P',monospace; font-size:10px; color:var(--accent-amber); flex-shrink:0; animation:wow-blink 1s steps(1) infinite;}
.wboss .wb-txt{flex:1; font-size:22px; line-height:1.15;}
.wboss .wb-go{font-family:'Press Start 2P',monospace; font-size:10px; background:var(--accent-amber); color:var(--on-accent); padding:11px 12px; flex-shrink:0;}
.wboss:focus-visible{outline:2px solid var(--text-primary); outline-offset:3px;}

/* ---------- SELECT YOUR GAME ---------- */
.wgames-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 14px;}
.wgames-head h2{font-family:'Press Start 2P',monospace; font-weight:400; font-size:16px; margin:0;}
.wgames-head span{color:var(--text-muted); font-size:19px;}
.wgames{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px;}
.wgame{position:relative; overflow:hidden; background:var(--bg-panel); border:4px solid var(--border); padding:10px; display:flex; flex-direction:column; gap:8px; cursor:pointer; text-align:left; font-family:inherit; color:var(--text-primary);
  box-shadow:4px 4px 0 #000; transition:transform .12s, border-color .12s; animation:wow-pop .45s ease-out backwards;}
.wgame:hover,.wgame:focus-visible{transform:translate(-2px, -2px); border-color:var(--accent-amber); outline:none;}
.wgame.hot{border-color:var(--accent-amber); box-shadow:0 0 0 4px var(--bg), 0 0 0 8px #F5C542, 4px 4px 0 8px #000; animation:wow-pop .45s ease-out backwards, wow-glowb 1.2s infinite;}
.wgame:nth-child(2){animation-delay:.06s;} .wgame:nth-child(3){animation-delay:.12s;} .wgame:nth-child(4){animation-delay:.18s;}
.wgame:nth-child(5){animation-delay:.24s;} .wgame:nth-child(6){animation-delay:.3s;} .wgame:nth-child(7){animation-delay:.36s;} .wgame:nth-child(8){animation-delay:.42s;}
.wg-scr{position:relative; height:110px; background:var(--bg-panel-alt); overflow:hidden; display:flex; align-items:center; justify-content:center; gap:12px;}
.wg-scr i{display:block; flex-shrink:0;}
.wg-nm{font-family:'Press Start 2P',monospace; font-size:9px; line-height:1.4;}
.wg-live{font-size:19px; color:var(--text-muted);} .wg-live b{font-weight:400; color:#F5C542;}
.wgame.prac{border-style:dashed; align-items:center; justify-content:center; text-align:center; gap:10px;}
.wgame.prac .wg-nm{color:var(--success); line-height:1.9;}
.wgame.prac[hidden]{display:none;}
/* the little scenes, one per game */
.sc-stacker i{width:54px; height:20px; background:var(--accent-magenta); box-shadow:0 24px 0 var(--accent-amber), 27px 48px 0 var(--accent-amber); animation:wow-fall 1.6s steps(4) infinite;}
.sc-breaker{flex-direction:column; justify-content:space-between !important; padding:10px 0;}
.sc-breaker i:nth-child(1){height:10px; width:70%; background:#F5C542;} .sc-breaker i:nth-child(2){width:12px; height:12px; background:var(--text-primary); animation:wow-ball 1.4s ease-in-out infinite;} .sc-breaker i:nth-child(3){height:8px; width:30%; background:var(--text-primary);}
.sc-flap{justify-content:space-around !important;} .sc-flap i:nth-child(1){width:24px; height:24px; background:#F5C542; animation:wow-flap .8s ease-in-out infinite;} .sc-flap i:nth-child(2){width:22px; height:90px; background:var(--success);}
.sc-miner{justify-content:space-around !important;} .sc-miner i:nth-child(1){width:40px; height:40px; background:var(--text-muted); animation:wow-spin 4s linear infinite;} .sc-miner i:nth-child(2){width:16px; height:16px; background:var(--accent-magenta); animation:wow-bob 1s infinite;}
.sc-invader{flex-direction:column; justify-content:space-between !important; padding:12px 0;}
.sc-invader i:nth-child(1){width:24px; height:18px; background:var(--accent-amber); box-shadow:34px 0 0 var(--accent-amber), -34px 0 0 var(--accent-amber); animation:wow-march 2.4s ease-in-out infinite;}
.sc-invader i:nth-child(2){width:28px; height:12px; background:var(--success);}
.sc-gems i{width:24px; height:24px; background:var(--success); animation:wow-spin 2s linear infinite;} .sc-gems i:nth-child(2){background:var(--accent-magenta); animation-delay:.5s;} .sc-gems i:nth-child(3){background:#F5C542; animation-delay:1s;}
.sc-runner{align-items:flex-end !important; padding-bottom:12px; gap:40px !important;} .sc-runner i:nth-child(1){width:18px; height:32px; background:var(--text-primary); animation:wow-hop .5s steps(2) infinite;} .sc-runner i:nth-child(2){width:28px; height:16px; background:var(--accent-amber); animation:wow-run 1.4s linear infinite;}

/* a game picked from the grid: the Cups and Token WARs lists show only that game */
.wow-gamechip{display:inline-flex; align-items:center; gap:10px; margin:0 0 12px; padding:7px 10px; background:var(--bg-panel-alt); border:2px solid var(--accent-amber); font-size:19px;}
.wow-gamechip button{font-family:'Press Start 2P',monospace; font-size:8px; background:var(--accent-amber); color:var(--on-accent); border:0; padding:6px 8px; cursor:pointer;}

/* ---------- mode bar ---------- */
.mode-tile.on{animation:wow-glowc 1.4s infinite;}
@keyframes wow-glowc{0%,100%{border-color:var(--c);}50%{border-color:#F5C542;}}
.mode-tile .mode-ic{display:inline-block; animation:wow-bob 2.4s ease-in-out infinite;}
.mode-tile:nth-child(2) .mode-ic{animation-delay:.5s;} .mode-tile:nth-child(3) .mode-ic{animation-delay:1s;}
.mode-dot{animation:wow-blink 1s steps(1) infinite;}

/* ---------- Cups and Token WAR cards ---------- */
.mini-card{overflow:hidden; animation:wow-pop .45s ease-out backwards;}
.mini-grid > .mini-card:nth-child(2){animation-delay:.05s;} .mini-grid > .mini-card:nth-child(3){animation-delay:.1s;} .mini-grid > .mini-card:nth-child(4){animation-delay:.15s;}
.mini-grid > .mini-card:nth-child(5){animation-delay:.2s;} .mini-grid > .mini-card:nth-child(6){animation-delay:.25s;} .mini-grid > .mini-card:nth-child(n+7){animation-delay:.3s;}
.mini-card::after{content:""; position:absolute; top:0; bottom:0; left:0; width:50px; background:rgba(255,255,255,.07); pointer-events:none; animation:wow-shine 5s ease-in-out infinite;}
.mini-grid > .mini-card:nth-child(2n)::after{animation-delay:1.2s;} .mini-grid > .mini-card:nth-child(3n)::after{animation-delay:2.4s;}
.mini-card .mini-go{animation:wow-blink 1.2s steps(1) infinite;}
.mini-card:hover .mini-go{animation:none; color:#F5C542;}
.mini-flag{z-index:1;}
.mini-time.urgent .mini-bar i{background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 6px, transparent 6px 12px); animation:wow-stripe .5s linear infinite;}

/* ---------- a Cup or Token WAR page ---------- */
.wow-vs{display:flex; flex-direction:column; align-items:center; gap:12px; padding:22px 12px 18px; margin:0 0 16px; background:var(--bg-panel); border:3px solid var(--border); box-shadow:6px 6px 0 #000; overflow:hidden;}
.wow-vs-row{display:flex; align-items:center; gap:clamp(16px, 5vw, 44px);}
.wow-coin{display:flex; flex-direction:column; align-items:center; gap:8px;}
.wow-coin:first-child{animation:wow-inL .9s ease-out both;} .wow-coin:last-child{animation:wow-inR .9s ease-out both;}
.wow-coin i{display:flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%; background:var(--k); color:#000; font-family:'Press Start 2P',monospace; font-size:12px; font-style:normal;
  box-shadow:inset -9px -11px 0 rgba(0,0,0,.3), 0 0 0 6px var(--bg), 0 0 0 10px var(--text-primary); animation:wow-spinY 5s linear 1s infinite;}
.wow-coin:last-child i{animation-delay:1.5s;}
.wow-coin b{font-family:'Press Start 2P',monospace; font-weight:400; font-size:11px;} .wow-coin small{font-size:18px; color:var(--text-muted);}
.wow-x{font-family:'Press Start 2P',monospace; font-size:44px; color:#F5C542; text-shadow:5px 5px 0 #000, 0 0 24px rgba(245,197,66,.7); animation:wow-vsb 1.2s ease-in-out infinite;}
.wow-vs h2{font-family:'Press Start 2P',monospace; font-weight:400; font-size:clamp(14px, 2.6vw, 24px); margin:0; text-align:center; text-shadow:4px 4px 0 #000; line-height:1.4;}
.wow-chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
.wow-chips span{font-family:'Press Start 2P',monospace; font-size:8px; background:var(--bg-panel-alt); padding:7px 9px;}
.wow-chips .hot{background:var(--accent-amber); color:var(--on-accent); animation:wow-blink 1s steps(1) infinite;}
.wow-pots{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin:0 0 16px;}
.wow-pot{background:var(--bg-panel); border:4px solid var(--k); padding:14px; display:flex; flex-direction:column; gap:8px;}
.wow-pot > span{font-family:'Press Start 2P',monospace; font-size:9px; color:var(--k);}
.wow-pot > b{font-family:'Press Start 2P',monospace; font-weight:400; font-size:clamp(13px, 2vw, 19px);}
.wow-pot > div{height:12px; background:var(--bg-panel-alt);} .wow-pot > div i{display:block; height:100%; background:var(--k); animation:wow-fill 1.6s ease-out both;}
.wow-pot > small{font-size:18px; color:var(--text-muted);}
#compDetailBody .lb-table tr.top1 .rk{animation:wow-rainbow 1.6s infinite;}
#compDetailBody .lb-table tr.wow-up td{animation:wow-rankup 2.4s ease-out;}
#compDetailBody .lb-table tr.wow-up .rk::after{content:" ▲"; color:var(--success); font-size:.8em; display:inline-block; animation:wow-up 2.4s ease-out forwards;}
#compDetailBody .cta-row > .btn:not(.secondary):not([disabled]){animation:wow-pulse 1.6s infinite;}

/* ---------- Create a Token WAR ---------- */
.wow-steps{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin:0 0 16px;}
.wow-steps > div{display:flex; flex-direction:column; gap:6px;}
.wow-steps > div > div{height:10px; background:var(--bg-panel-alt);} .wow-steps > div > div i{display:block; height:100%; width:100%; background:var(--success); animation:wow-fill .6s ease-out backwards;}
.wow-steps span{font-family:'Press Start 2P',monospace; font-size:8px; color:var(--text-muted);}
.wow-steps .ok span{color:var(--success);} .wow-steps .now span{color:#F5C542; animation:wow-blink 1s steps(1) infinite;} .wow-steps .now i{background:#F5C542; width:50%;}
.wow-steps > div:nth-child(2) i{animation-delay:.25s;} .wow-steps > div:nth-child(3) i{animation-delay:.5s;}
.wow-prev{background:var(--bg-panel); border:4px solid var(--accent-amber); padding:16px; display:flex; flex-direction:column; gap:10px; box-shadow:8px 8px 0 #000; margin:0 0 18px; animation:wow-float 3s ease-in-out infinite;}
.wow-prev > small{font-family:'Press Start 2P',monospace; font-size:8px; color:var(--text-muted);}
.wow-prev > span.tag{align-self:flex-start; font-family:'Press Start 2P',monospace; font-size:8px; background:var(--accent-amber); color:var(--on-accent); padding:5px 7px;}
.wow-prev > b{font-family:'Press Start 2P',monospace; font-weight:400; font-size:13px; line-height:1.4; word-break:break-word;}
.wow-prev > em{font-style:normal; font-size:20px; color:var(--text-muted);}
.wow-prev .two{display:flex; gap:8px;} .wow-prev .two div{flex:1; background:var(--bg-panel-alt); padding:8px;} .wow-prev .two small{display:block; font-size:17px; color:var(--text-muted);}
.wow-prev .two b{font-family:'Press Start 2P',monospace; font-weight:400; font-size:10px; word-break:break-word;} .wow-prev .two div + div b{color:#F5C542;}
#warCreateBody .war-tok.ok{animation:wow-in .3s ease-out;}
#warCreateBody .cta-row > .btn:not(.secondary):not([disabled]){animation:wow-pulse 1.6s infinite;}

/* ---------- Arena ---------- */
#lobby .opp-card{animation:wow-slide .45s ease-out backwards;}
#lobby .opp-card:nth-child(2){animation-delay:.1s;} #lobby .opp-card:nth-child(3){animation-delay:.2s;} #lobby .opp-card:nth-child(n+4){animation-delay:.3s;}
#match .versus{animation:wow-shake .4s 1s 2;}
#match .vplayer:first-child{animation:wow-inL .8s ease-out both;} #match .vplayer:last-child{animation:wow-inR .8s ease-out both;}
#match .vs-mark{font-family:'Press Start 2P',monospace; font-size:clamp(30px, 6vw, 56px); color:#F5C542; text-shadow:5px 5px 0 #000, 0 0 30px rgba(245,197,66,.85); animation:wow-vs .8s .6s ease-out both;}
#match .vplayer .avatar{box-shadow:0 0 0 4px var(--bg), 0 0 0 7px var(--accent-amber), 0 0 30px color-mix(in srgb, var(--accent-amber) 60%, transparent);}
#match .vplayer:last-child .avatar{box-shadow:0 0 0 4px var(--bg), 0 0 0 7px var(--success), 0 0 30px color-mix(in srgb, var(--success) 60%, transparent);}
#depositBtn:not([disabled]){animation:wow-pulse 1.6s infinite;}
#countdown.wow-cd{font-family:'Press Start 2P',monospace; font-size:clamp(16px, 3.4vw, 26px); color:#F5C542; text-shadow:4px 4px 0 #000, 0 0 22px rgba(245,197,66,.8); animation:wow-cd .5s ease-out;}

/* ---------- phones ---------- */
@media (max-width:700px){
  .wboss{flex-wrap:wrap; gap:8px;} .wboss .wb-txt{flex-basis:100%; font-size:20px;}
  .wgames{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px;}
  .wgame{flex:0 0 148px; scroll-snap-align:start;}
  .wg-scr{height:84px;}
  .wow-steps span{font-size:6px;}
  .wow-coin i{width:64px; height:64px; font-size:9px;}
  .wow-x{font-size:30px;}
}

/* reduced motion: still, everything readable */
@media (prefers-reduced-motion:reduce){
  .wow-coins{display:none;}
  .wgame,.wgame *,.wow-tick > div,.mini-card,.mini-card::after,.wow-vs *,.wow-pot *,.wow-steps *,.wow-prev,#match *,#countdown,#lobby .opp-card,.mode-tile,.mode-tile *,.screen.active,.wboss,.wboss *{animation:none !important;}
  .wow-tick .dup{display:none;}
}
.no-motion .wow-coins{display:none;}

/* phones: the Cup page's two panels used to push the page 30px wider than the screen */
@media (max-width:760px){ .comp-detail{grid-template-columns:minmax(0, 1fr);} .comp-detail > .panel{min-width:0; overflow-x:auto;} }