/* Shared design system for nextapplab.eu and idle.nextapplab.eu (dark, square, condensed caps).
   Tokens come from the reference: bg #181819, alt #202020, text #C1BEC5, headings #FCFBFF,
   accents #EBC451 / #FF8888, Barlow Condensed 600 for headings, DM Sans for text. */
:root{--bg:#181819;--alt:#202020;--extra:#3C3B3E;--bd:#5C5B5E;--line:#2c2b2e;--text:#C1BEC5;--dark:#FCFBFF;--light:#88878C;
  --y:#EBC451;--yh:#D7B44C;--p:#FF8888;--ph:#CC6D6D;--v:#A688FF;--ghost:#323033;--gut:20px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.62 "DM Sans",system-ui,sans-serif;letter-spacing:.1px;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:var(--dark);text-decoration-color:var(--bd);text-underline-offset:3px}a:hover{color:var(--y)}
p{margin:0 0 1em}
h1,h2,h3,h4,h5{font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;color:var(--dark);margin:0 0 .5em}
h1{font-size:clamp(50px,7.6vw,110px);line-height:.95;letter-spacing:-.6px}
h2{font-size:clamp(36px,4.2vw,57px);line-height:1;letter-spacing:-.6px}
h3{font-size:clamp(26px,2.5vw,35px);line-height:1.086;letter-spacing:-.35px}
h4{font-size:24px;line-height:1.2}
h5{font-size:21px;line-height:1.15}
.sub{display:block;font:700 14px/18px "DM Sans",sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--dark);margin:0 0 18px}
.sub.y{color:var(--y)}.sub.p{color:var(--p)}
.lead{font-size:20px;color:var(--dark)}
.muted{color:var(--light)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
.wrap{max-width:1290px;margin:0 auto;padding:0 var(--gut)}
@media(min-width:900px){:root{--gut:40px}}
@media(min-width:1370px){.wrap{padding:0}}
section{padding:110px 0}.alt{background:var(--alt)}
.center{text-align:center}.center .lead,.center>p{margin-left:auto;margin-right:auto}
.narrow{max-width:720px}

/* Nav: transparent over the hero, menu left, logo centre, action right; hamburger on phones. */
.nav{position:absolute;inset:0 0 auto;z-index:20}
.nav .wrap{display:flex;align-items:center;height:110px;gap:24px;position:relative}
.nav .menu{display:flex;gap:26px}
.nav .menu a{font:600 17px/1.5 "Barlow Condensed",sans-serif;text-transform:uppercase;text-decoration:none;color:var(--dark);padding:4px 0;border-bottom:2px solid transparent}
.nav .menu a:hover,.nav .menu a[aria-current]{border-color:var(--dark);color:var(--dark)}
.nav .brand{position:absolute;left:50%;transform:translateX(-50%);text-decoration:none}
.logo{font:600 30px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:1px;color:var(--dark)}.logo b{color:var(--y);font-weight:600}
.nav .act{margin-left:auto}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--dark);width:44px;height:44px;padding:10px;cursor:pointer}
.burger span{display:block;height:2px;background:currentColor;margin:5px 0}
@media(max-width:899px){
  .nav .wrap{height:76px}.nav .act{display:none}.burger{display:block}
  .nav .brand{position:static;transform:none}
  .nav .menu{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);padding:10px var(--gut) 24px;border-bottom:1px solid var(--line)}
  .nav.open .menu{display:flex}.nav .menu a{padding:12px 0;font-size:22px;border:0}
}

/* Buttons: square, uppercase DM Sans 500, 1.4px tracking. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:500 14px/21px "DM Sans",sans-serif;text-transform:uppercase;letter-spacing:1.4px;text-decoration:none;padding:16px 30px;background:var(--y);color:#181819;border:2px solid var(--y);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:transparent;color:var(--y)}
.btn.o{background:transparent;color:var(--dark);border-color:var(--dark)}.btn.o:hover{background:var(--dark);color:#181819}
.btn.dark{background:#181819;border-color:#181819;color:var(--dark)}.btn.dark:hover{background:transparent;color:#181819}
.btns{display:flex;gap:14px;flex-wrap:wrap}.center .btns,.btns.c{justify-content:center}
@media(max-width:520px){.btns .btn{width:100%}}

/* Hero: full-bleed art fading into the page. */
.hero{position:relative;min-height:780px;display:flex;align-items:flex-end;padding:140px 0 90px;background:#0e0e10 center/cover no-repeat;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,24,25,.6) 0,rgba(24,24,25,0) 26%,rgba(24,24,25,.25) 55%,var(--bg) 100%);pointer-events:none}
.hero>.wrap{position:relative;z-index:2;width:100%}
.hero h1{color:var(--y)}
.hero .lead{max-width:680px}

/* Link cards: title + arrow, 1px rule, text. */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 30px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 30px}
.lc h3,.lc h4{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:26px;border-bottom:1px solid var(--bd);margin-bottom:26px}
.lc .ar{flex:none;font:300 34px/1 "DM Sans",sans-serif;transition:transform .25s,color .25s}
.lc:hover .ar{color:var(--y);transform:translate(4px,-4px)}
.lc p:last-child{margin:0}
.lc .tag{display:inline-block;font:700 12px/1 "DM Sans";letter-spacing:1.2px;text-transform:uppercase;color:var(--y);margin-bottom:14px}

/* Split: media + copy. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,8vw,140px);align-items:center}
.split>img,.split>picture img{width:100%}
.split.top{align-items:start}

/* Rule lists (caps rows with a top rule). */
.rl{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}
.rl li{font:600 21px/1.2 "Barlow Condensed",sans-serif;text-transform:uppercase;color:var(--dark);padding:18px 0;border-top:1px solid var(--bd)}
.rl.one{grid-template-columns:minmax(0,1fr)}
.rl li small{display:block;font:400 16px/1.5 "DM Sans",sans-serif;text-transform:none;color:var(--text);margin-top:6px;letter-spacing:.1px}

/* Numbers: big ghost digits with the label on top. */
.nums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:50px 30px}
.num{position:relative;min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.num b{font:600 clamp(96px,10vw,150px)/1 "Barlow Condensed",sans-serif;color:var(--ghost);letter-spacing:-2px}
.num span{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font:600 22px/1.1 "Barlow Condensed",sans-serif;text-transform:uppercase;color:var(--dark);padding:0 6px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 30px}
.stat b{display:block;font:600 clamp(60px,6vw,80px)/1 "Barlow Condensed",sans-serif;color:var(--dark);padding-bottom:18px;border-bottom:1px solid var(--bd);margin-bottom:16px}
.stat span{font:600 20px/1.2 "Barlow Condensed",sans-serif;text-transform:uppercase;color:var(--dark)}

/* Marquee: huge caps rows sliding in opposite directions. */
.marq{position:relative;overflow:hidden;padding:50px 0}
.row{display:flex;width:max-content;white-space:nowrap;font:600 7.3vw/1.02 "Barlow Condensed",sans-serif;text-transform:uppercase;color:var(--y);animation:mq 60s linear infinite}
.row span{padding-right:.5em}.row.r{animation-direction:reverse;color:var(--p)}
@keyframes mq{to{transform:translateX(-50%)}}

/* Panels. */
.card{background:var(--alt);padding:50px}.alt .card{background:var(--bg)}
.pink,.alt .card.pink{background:var(--p);color:#181819}.pink h3,.pink h4,.pink .sub,.pink a{color:#181819}
.pink .rl li{color:#181819;border-color:rgba(24,24,25,.35)}.pink .rl li small{color:#2a2224}
.note{border-left:2px solid var(--y);padding:4px 0 4px 20px;color:var(--text)}

/* Media. */
.video{position:relative;background:#000}
.video video{width:100%;aspect-ratio:16/9;object-fit:cover}
.shots{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
.shots img{flex:0 0 min(300px,72vw);scroll-snap-align:start;height:auto}
.dots{display:flex;gap:10px;justify-content:center;margin-top:24px}
.dots button{width:12px;height:12px;border-radius:50%;border:2px solid var(--bd);background:none;padding:0;cursor:pointer}
.dots button[aria-current]{background:var(--y);border-color:var(--y)}
.roster{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:14px}
.roster figure{margin:0;background:var(--alt);padding:14px 10px 12px;text-align:center;transition:background .25s,transform .25s}
.alt .roster figure{background:var(--bg)}
.roster figure:hover{background:var(--extra);transform:translateY(-4px)}
.roster img{width:100%;height:auto;max-width:96px;margin:0 auto;aspect-ratio:1}
.roster figcaption{font:600 15px/1.1 "Barlow Condensed",sans-serif;text-transform:uppercase;color:var(--dark);margin-top:8px;overflow-wrap:anywhere}
.roster figcaption i{display:block;font:500 11px/1.4 "DM Sans";letter-spacing:1px;font-style:normal;color:var(--light);margin-top:2px}
.roster .r3 figcaption i{color:var(--y)}.roster .r2 figcaption i{color:var(--v)}
.biomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.biomes figure{margin:0}.biomes .bg{aspect-ratio:544/112;background:#0e0e10 left center/auto 100% repeat-x}
.biomes figcaption{font:600 18px/1.2 "Barlow Condensed";text-transform:uppercase;color:var(--dark);padding:12px 0;border-bottom:1px solid var(--line)}
.strip{height:clamp(140px,18vw,240px);background:#0e0e10 left center/auto 100% repeat-x}

/* Tables and FAQ. */
.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:left;vertical-align:top;padding:18px 0;border-top:1px solid var(--bd)}
.spec th{font:600 20px/1.2 "Barlow Condensed";text-transform:uppercase;color:var(--dark);width:34%;padding-right:20px}
details{border-top:1px solid var(--bd)}details:last-child{border-bottom:1px solid var(--bd)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font:600 22px/1.2 "Barlow Condensed";text-transform:uppercase;color:var(--dark)}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font:300 30px/0.8 "DM Sans";color:var(--y);flex:none}
details[open] summary:after{content:"–"}
details>div{padding:0 0 22px;max-width:820px}

/* Forms. */
form.contact{display:grid;gap:18px}
.contact label{font:700 12px/1 "DM Sans";letter-spacing:1.2px;text-transform:uppercase;color:var(--light)}
.contact input,.contact textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--bd);color:var(--dark);font:inherit;padding:10px 0 12px;border-radius:0}
.contact input:focus,.contact textarea:focus{outline:0;border-color:var(--y)}
:focus-visible{outline:2px solid var(--y);outline-offset:3px}

/* Footer. */
footer{border-top:1px solid var(--line);padding:34px 0;font-size:15px;color:var(--light)}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:16px 40px;flex-wrap:wrap}
footer .links{display:flex;flex-wrap:wrap;gap:8px 24px}
footer a{color:var(--dark);text-decoration:none}
footer .legal{flex-basis:100%;font-size:13px}

/* Legal pages. */
.page-head{padding:170px 0 40px}
.legal{max-width:860px}
.legal h1{font-size:clamp(44px,6vw,72px);color:var(--y)}
.legal h2{font-size:clamp(28px,3vw,36px);margin-top:1.6em}
.legal h3{font-size:24px;margin-top:1.4em}
.legal table{border-collapse:collapse;width:100%;margin:14px 0;font-size:16px;display:block;overflow-x:auto}
.legal th,.legal td{border:1px solid var(--bd);padding:10px 12px;text-align:left;vertical-align:top}
.legal th{font-family:"Barlow Condensed";text-transform:uppercase;color:var(--dark);font-weight:600}
.legal .meta{color:var(--light)}.legal li{margin:.35em 0}.legal a{overflow-wrap:anywhere}

/* Entrance animation: fade in and up, only when motion is allowed and JS is on. */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.in{opacity:1;transform:none}

@media(max-width:1100px){.nums{grid-template-columns:repeat(3,minmax(0,1fr))}.roster{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:899px){
  body{font-size:17px}
  section{padding:72px 0}
  .grid3,.grid2,.split,.rl{grid-template-columns:minmax(0,1fr)}
  .grid3,.grid2{gap:44px}.split{gap:40px}.rl{gap:0}
  .hero{min-height:640px;padding:110px 0 56px}
  .card{padding:30px 24px}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}.num{min-height:110px}.num span{font-size:18px}
  .roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.roster figure{padding:10px 6px}.roster figcaption{font-size:13px}
  .biomes{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .spec th{width:40%}
  .page-head{padding:120px 0 20px}
}
@media(max-width:520px){.stats{gap:30px 18px}.biomes figcaption{font-size:15px}}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* site */
.hero.key{background-size:100% auto;background-position:center top;min-height:calc(56.25vw + 200px);padding-bottom:70px}
.hero.key:after{background:linear-gradient(180deg,rgba(24,24,25,.55) 0,rgba(24,24,25,0) 18%,rgba(24,24,25,0) calc(56.25vw - 300px),rgba(24,24,25,.9) calc(56.25vw - 40px),var(--bg) calc(56.25vw + 10px))}
.hero.key h1{font-size:clamp(46px,6.4vw,96px)}
.hero.key .kicker{color:var(--dark)}
.band{background:var(--alt);padding:90px 0}
.tour{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;margin-top:50px}
.tour div{padding:34px 30px 30px 0;border-top:1px solid var(--bd)}
.tour div+div{padding-left:30px;border-left:1px solid var(--bd)}
.tour b{display:block;font:600 64px/1 "Barlow Condensed";color:var(--y);margin-bottom:10px}
.tour div+div b{color:var(--p)}
.rates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--bd);border:1px solid var(--bd);margin:24px 0}
.rates div{background:var(--alt);padding:16px 10px;text-align:center}
.rates b{display:block;font:600 34px/1 "Barlow Condensed";color:var(--dark)}
.rates span{font:700 11px/1.4 "DM Sans";letter-spacing:1px;text-transform:uppercase;color:var(--light)}
.rates .l b{color:var(--y)}.rates .e b{color:var(--v)}
.ghosts{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center}
.board{background:var(--bg);border:1px solid var(--line)}
.board li{display:grid;grid-template-columns:40px 1fr auto;gap:12px;padding:14px 20px;border-top:1px solid var(--line);font-size:16px}
.board li:first-child{border-top:0}.board li b{font:600 20px/1 "Barlow Condensed";color:var(--light)}
.board li.me{background:rgba(235,196,81,.08)}.board li.me span:nth-child(2){color:var(--y)}
.board li span:last-child{font-family:"Barlow Condensed";font-weight:600;font-size:19px;color:var(--dark)}
.board ol{list-style:none;margin:0;padding:0}
.board .cap{padding:14px 20px;font:700 12px/1 "DM Sans";letter-spacing:1.2px;text-transform:uppercase;color:var(--light);border-bottom:1px solid var(--line)}
.dev{background:#0e0e10 center/cover no-repeat;position:relative}
.dev:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,24,25,.96) 0,rgba(24,24,25,.8) 50%,rgba(24,24,25,.35) 100%)}
.dev .wrap{position:relative}
@media(max-width:899px){
  .hero.key{min-height:0;padding-top:calc(76px + 56.25vw - 40px);background-size:100% auto;background-position:center 76px}
  .hero.key:after{background:linear-gradient(180deg,var(--bg) 0,var(--bg) 76px,rgba(24,24,25,0) 90px,rgba(24,24,25,0) calc(76px + 56.25vw - 90px),var(--bg) calc(76px + 56.25vw))}
  .tour,.ghosts{grid-template-columns:minmax(0,1fr)}.tour div+div{padding-left:0;border-left:0}.tour b{font-size:52px}
  .rates b{font-size:26px}.rates span{font-size:10px;letter-spacing:.5px}
  .board li{grid-template-columns:30px 1fr auto;padding:12px 14px;font-size:15px}
  .dev:before{background:rgba(24,24,25,.9)}
  .split>img[src*="slide"]{max-width:280px!important}
}
/* Interactive game sections (showcase.js). Pixel art is always drawn at whole sprite pixels, never smoothed. */
.spr{width:var(--w);height:var(--h);background-repeat:no-repeat;background-size:var(--sw) var(--h);background-position:0 0;image-rendering:pixelated;flex:none}
.spr.play{animation:spr var(--d) steps(var(--n)) var(--it) both}
.spr.flip{transform:scaleX(-1)}
.spr.fx{mix-blend-mode:screen;pointer-events:none}
@keyframes spr{from{background-position:0 0}to{background-position:calc(var(--sw) * -1) 0}}

/* Battle */
.battle{position:relative;background:#0e0e10;border:1px solid var(--line)}
.battle canvas{display:block;width:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.b-hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:18px 20px}
.b-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.b-biome small{display:block;font:700 12px/1 "DM Sans";letter-spacing:1.4px;color:var(--y);margin-bottom:6px}
.b-biome b{display:block;font:600 clamp(24px,3vw,40px)/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark);text-shadow:0 2px 0 rgba(0,0,0,.6)}
.b-biome span{display:block;font-size:15px;color:var(--dark);opacity:.85;text-shadow:0 1px 2px #000;margin-top:4px}
.b-gold{display:flex;align-items:center;gap:8px;font:600 24px/1 "Barlow Condensed";color:var(--y);text-shadow:0 2px 0 rgba(0,0,0,.6)}
.b-gold img{width:24px;height:24px}
.b-pips{display:flex;gap:6px;align-items:center}
.b-pips i{width:clamp(14px,2.4vw,26px);height:8px;background:rgba(24,24,25,.7);border:1px solid rgba(252,251,255,.35)}
.b-pips i.done{background:var(--dark);border-color:var(--dark)}.b-pips i.on{background:var(--y);border-color:var(--y)}
.b-pips i.boss{width:clamp(22px,3.4vw,36px);border-color:var(--p)}.b-pips i.boss.on{background:var(--p)}.b-pips i.boss.done{background:var(--p);border-color:var(--p)}
.b-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.b-boss{min-width:min(360px,46%);text-align:right}
.b-boss .row1{display:flex;justify-content:space-between;font:600 18px/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark);margin-bottom:6px;text-shadow:0 1px 2px #000}
.b-boss .bar{height:8px;background:rgba(24,24,25,.8);border:1px solid rgba(252,251,255,.4)}
.b-boss .bar i{display:block;height:100%;width:100%;background:var(--p);transition:width .15s}
.b-banner{position:absolute;left:0;right:0;top:42%;text-align:center;font:600 clamp(40px,7vw,96px)/1 "Barlow Condensed";text-transform:uppercase;color:var(--y);text-shadow:0 4px 0 rgba(0,0,0,.55);opacity:0;pointer-events:none}
.b-banner.show{animation:bnr 1.8s ease both}
@keyframes bnr{0%{opacity:0;transform:scale(1.4)}15%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
.b-ctl{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-top:18px}
.b-ctl .grp{display:flex;gap:10px}
.b-ctl button{font:500 13px/1 "DM Sans";letter-spacing:1.3px;text-transform:uppercase;color:var(--dark);background:transparent;border:1px solid var(--bd);padding:12px 16px;cursor:pointer;min-width:44px}
.b-ctl button:hover{border-color:var(--y);color:var(--y)}
.b-ctl .note{font-size:14px;color:var(--light)}

/* Evolution lab */
.evo{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;align-items:start}
.evo-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.evo-pick{background:var(--bg);border:1px solid var(--line);padding:6px;cursor:pointer;aspect-ratio:1}
.alt .evo-pick{background:var(--bg)}
.evo-pick img{width:100%;height:auto}
.evo-pick:hover{border-color:var(--bd)}
.evo-pick[aria-pressed=true]{border-color:var(--y);background:var(--extra)}
.evo-pick.r3{box-shadow:inset 0 -3px 0 var(--y)}.evo-pick.r2{box-shadow:inset 0 -3px 0 var(--v)}
.evo-stage{position:relative;background:radial-gradient(ellipse at 50% 62%,rgba(235,196,81,.12),transparent 60%),var(--bg);border:1px solid var(--line);padding:30px 24px 26px;display:flex;flex-direction:column;align-items:center;min-height:620px;overflow:hidden}
.evo-stage.r2{background:radial-gradient(ellipse at 50% 62%,rgba(166,136,255,.14),transparent 60%),var(--bg)}
.evo-head{text-align:center}
.evo-head b{display:block;font:600 clamp(34px,4vw,52px)/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark)}
.evo-head span{font:700 12px/1 "DM Sans";letter-spacing:1.4px;text-transform:uppercase;color:var(--light)}
.evo-base{position:relative;display:grid;grid-template-rows:100%;place-items:center;height:300px;width:100%;margin-top:-20px}
.evo-base>*{grid-area:1/1}
.evo-base .spr.dim{opacity:.35;transition:opacity .6s}
.evo-base .evo-fx{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .5s;grid-area:auto}
.evo-base .evo-fx.beam{top:auto;bottom:0;transform:translateX(-50%)}
.evo-fx.gone{opacity:0}
.evo-stars{display:flex;gap:8px;font-size:28px;line-height:1;color:var(--ghost)}
.evo-stars i{font-style:normal;transition:transform .25s,color .25s}
.evo-stars i.on{color:var(--y);animation:star .4s ease}
@keyframes star{0%{transform:scale(.4)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.evo-label{font:600 20px/1.2 "Barlow Condensed";text-transform:uppercase;color:var(--y);margin:12px 0 18px;min-height:24px;text-align:center}
.evo-forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:100%;max-width:560px;min-height:236px;align-content:start;opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.evo-forms.in{opacity:1;transform:none}
.evo-form{background:var(--alt);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:0 12px 14px;overflow:hidden}
.evo-form .spr{margin:-28px 0 -16px}
.evo-form-name{display:flex;align-items:center;gap:10px;font:600 22px/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark)}
.evo-form-name img{width:32px;height:32px}
.evo-form-name small{display:block;font:700 11px/1.4 "DM Sans";letter-spacing:1.2px;color:var(--light)}
.evo-replay{margin-top:18px}

@media(max-width:899px){
  .b-hud{padding:10px 12px}.b-biome span{display:none}.b-gold{font-size:18px}.b-gold img{width:18px;height:18px}
  .b-boss .row1{font-size:14px}
  .evo{grid-template-columns:minmax(0,1fr);gap:24px}
  .evo-list{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}.evo-pick{padding:2px}
  .evo-stage{min-height:0;padding:22px 12px}
  .evo-base{height:210px}
  .evo-forms{gap:10px;min-height:250px}.evo-form-name{font-size:17px}.evo-form-name img{width:24px;height:24px}
}
@media(max-width:520px){.evo-list{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Live-ops time machine */
.lo{display:grid;gap:22px}
.lo-top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.lo-top b{font:600 clamp(26px,3vw,38px)/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark)}
.lo-phase{font:700 12px/1 "DM Sans";letter-spacing:1.3px;text-transform:uppercase;padding:8px 10px;border:1px solid var(--y);color:var(--y)}
.lo-phase.rot{border-color:var(--p);color:var(--p)}
.lo-top .grp{display:flex;gap:12px;align-items:center}
.lo-top button{font:500 13px/1 "DM Sans";letter-spacing:1.3px;text-transform:uppercase;color:var(--dark);background:transparent;border:1px solid var(--bd);padding:12px 16px;cursor:pointer}
.lo-track{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
.lo-week{flex:0 0 108px;display:flex;flex-direction:column;gap:5px;align-items:center;background:var(--bg);border:1px solid var(--line);padding:8px 6px;cursor:pointer;transition:border-color .2s,transform .2s}
.lo-week small{font:700 11px/1 "DM Sans";letter-spacing:1px;color:var(--light)}
.lo-week .spr{flex:none}
.lo-week.rot{border-style:dashed}
.lo-week.on{border-color:var(--y);transform:translateY(-4px)}.lo-week.on small{color:var(--y)}
.lo-week.rot.on{border-color:var(--p)}.lo-week.rot.on small{color:var(--p)}
.lo-inf{flex:0 0 120px;display:flex;flex-direction:column;justify-content:center;align-items:center;font:600 44px/1 "Barlow Condensed";color:var(--p)}
.lo-inf small{font:700 10px/1.3 "DM Sans";letter-spacing:1px;text-transform:uppercase;color:var(--light);text-align:center;margin-top:6px}
.lo input[type=range]{width:100%;accent-color:var(--y)}
.lo-now{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:start}
.lo-card{background:var(--bg);border:1px solid var(--line);padding:18px}
.lo-card h5{font-size:15px;letter-spacing:1px;color:var(--light);margin:0 0 14px}
.lo-events{display:grid;gap:14px}
.lo-event{display:grid;gap:6px;animation:deal .45s ease both}
.lo-event .spr{max-width:100%}
.lo-event b{font:600 24px/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark)}
.lo-event span{font-size:15px;line-height:1.5}
.lo-event small{font:700 11px/1.4 "DM Sans";letter-spacing:1px;text-transform:uppercase;color:var(--y)}
.lo-banner img{width:100%;height:auto;image-rendering:pixelated;display:block;margin-bottom:10px}
.lo-banner b{font:600 22px/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark)}
.lo-banner p{font-size:14px;color:var(--light);margin:8px 0 0}
.lo-ghosts{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.lo-ghosts b{font:600 44px/1 "Barlow Condensed";color:var(--y);font-variant-numeric:tabular-nums}
.lo-ghosts span{font-size:14px;color:var(--light)}
.lo-board{list-style:none;margin:0;padding:0}
.lo-board li{display:grid;grid-template-columns:26px 32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 6px;border-top:1px solid var(--line);font-size:15px}
.lo-board li b{font:600 18px/1 "Barlow Condensed";color:var(--light)}
.lo-board li img{width:32px;height:32px;image-rendering:pixelated}
.lo-board li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lo-board li em{font:600 17px/1 "Barlow Condensed";font-style:normal;color:var(--dark);font-variant-numeric:tabular-nums}
.lo-board li.me{background:rgba(235,196,81,.1)}.lo-board li.me span{color:var(--y)}

/* Template Hub illustration (an editor window) */
.hub{background:#1e1e21;border:1px solid #3a393d;box-shadow:0 30px 60px rgba(0,0,0,.45);font-size:15px;position:relative}
.hub-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;background:#29282c;border-bottom:1px solid #3a393d}
.hub-bar .dots{display:flex;gap:6px}.hub-bar .dots i{width:11px;height:11px;border-radius:50%;background:#46454a}
.hub-bar b{font:600 18px/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark);letter-spacing:.5px}
.hub-mode{display:flex;border:1px solid #46454a}.hub-mode span{font:700 11px/1 "DM Sans";letter-spacing:1px;text-transform:uppercase;padding:6px 10px;color:var(--light)}.hub-mode span.on{background:var(--y);color:#181819}
.hub-health{margin-left:auto;display:flex;gap:12px;font:600 16px/1 "Barlow Condensed";font-variant-numeric:tabular-nums}
.hub-health i{font-style:normal}.hub-health .ok{color:#7fd08a}.hub-health .warn{color:var(--y)}.hub-health .bad{color:var(--p)}
.hub-body{display:grid;grid-template-columns:200px minmax(0,1fr);height:520px}
.hub-panel{overflow-y:auto}
.hub-nav{display:flex;flex-direction:column;border-right:1px solid #3a393d;padding:10px 0;background:#232226}
.hub-nav button{background:none;border:0;border-left:3px solid transparent;text-align:left;padding:11px 16px;color:var(--text);font:500 14px/1 "DM Sans";cursor:pointer}
.hub-nav button:hover{color:var(--dark)}
.hub-nav button[aria-pressed=true]{border-left-color:var(--y);color:var(--dark);background:#2c2b30}
.hub-nav .soon{color:#6d6c72;cursor:default;font-size:13px}
.hub-panel{padding:20px;min-width:0}
.hub-panel.in{animation:fadein .3s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}}
.hub-hint{font-size:14px;color:var(--light);margin:0 0 16px;max-width:620px}
.hub-feats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.hub-feat{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;background:#262529;border:1px solid #3a393d;padding:12px;cursor:pointer;transition:border-color .2s,opacity .2s}
.hub-feat input{position:absolute;opacity:0;pointer-events:none}
.hub-feat .sw{grid-row:span 2;width:34px;height:18px;border-radius:9px;background:#46454a;position:relative;transition:background .2s}
.hub-feat .sw:after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#bdbcc2;transition:transform .2s}
.hub-feat.on{border-color:#4b4a50}.hub-feat.on .sw{background:var(--y)}.hub-feat.on .sw:after{transform:translateX(16px);background:#181819}
.hub-feat:not(.on){opacity:.55}
.hub-feat b{font:600 17px/1.1 "Barlow Condensed";text-transform:uppercase;color:var(--dark)}
.hub-feat small{font-size:12px;color:var(--light)}
.hub-feat:focus-within{outline:2px solid var(--y);outline-offset:2px}
.hub-slider{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 90px;gap:16px;align-items:center;padding:12px 0;border-top:1px solid #333236}
.hub-slider label{font-size:14px;color:var(--dark)}
.hub-slider input{width:100%;accent-color:var(--y)}
.hub-slider output{font:600 18px/1 "Barlow Condensed";color:var(--y);text-align:right;font-variant-numeric:tabular-nums}
.hub-row-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;font:700 12px/1 "DM Sans";letter-spacing:1.2px;text-transform:uppercase;color:var(--light)}
.hub-list{max-height:360px;overflow-y:auto;border:1px solid #333236}
.hub-item{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:6px 10px;border-top:1px solid #2e2d31}
.hub-item img{width:32px;height:32px;image-rendering:pixelated}
.hub-item b{font:600 17px/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark)}
.hub-item span{font-size:13px;color:var(--light)}
.hub-item.new{background:rgba(235,196,81,.08);animation:fadein .4s ease both}
.hub-btn{font:500 12px/1 "DM Sans";letter-spacing:1.1px;text-transform:uppercase;color:var(--dark);background:#2f2e33;border:1px solid #4b4a50;padding:8px 12px;cursor:pointer}
.hub-btn:hover{border-color:var(--y);color:var(--y)}
.hub-btn.y{background:var(--y);color:#181819;border-color:var(--y)}.hub-btn.y:hover{background:transparent;color:var(--y)}
.hub-checks{list-style:none;margin:0;padding:0}
.hub-checks li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 4px;border-top:1px solid #333236}
.hub-checks i{font-style:normal;font-weight:700}
.hub-checks .blocker i{color:var(--p)}.hub-checks .warning i{color:var(--y)}.hub-checks .done i{color:#7fd08a}
.hub-checks .done span{color:var(--light);text-decoration:line-through}
.hub-term{background:#141416;border:1px solid #333236;padding:16px;min-height:250px;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.hub-line{animation:fadein .25s ease both;overflow-wrap:anywhere}
.hub-line.you{color:var(--dark);margin-bottom:8px}.hub-line.ai{color:var(--y);margin:8px 0}.hub-line.step{color:#9fd6a7}
.hub-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.hub-skills i{font:500 12px/1 ui-monospace,Menlo,monospace;font-style:normal;border:1px solid #3a393d;padding:6px 8px;color:var(--text)}
.hub-toast{position:absolute;right:16px;bottom:16px;max-width:min(360px,80%);background:var(--y);color:#181819;font-size:14px;padding:10px 14px;opacity:0;pointer-events:none}
.hub-toast.show{animation:toast 2.6s ease both}
@keyframes toast{0%{opacity:0;transform:translateY(10px)}10%,80%{opacity:1;transform:none}100%{opacity:0}}
@media(max-width:899px){
  .lo-now{grid-template-columns:minmax(0,1fr)}
  .lo-week{flex-basis:108px}
  .hub-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:640px}
  .hub-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid #3a393d;padding:0}
  .hub-nav button{border-left:0;border-bottom:3px solid transparent;white-space:nowrap;padding:12px}
  .hub-nav button[aria-pressed=true]{border-bottom-color:var(--y)}
  .hub-nav .soon{display:none}
  .hub-panel{padding:14px}
  .hub-feats{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-feat{grid-template-columns:minmax(0,1fr);padding:10px}.hub-feat .sw{grid-row:auto}
  .hub-slider{grid-template-columns:minmax(0,1fr) 70px}.hub-slider input{grid-column:1/-1;grid-row:2}
  .hub-item{grid-template-columns:32px minmax(0,1fr) auto}.hub-item span{display:none}
  .hub-health{margin-left:0}
}

:root{--tab:url(/assets/game/ui/tab.png);--card:url(/assets/game/ui/card.png);--slot:url(/assets/game/ui/slot.png);--window:url(/assets/game/ui/window.png);--gb:url(/assets/game/ui/btn_gold_normal_136x44.png)}
/* Summon: the game's summoning circle, card backs and rarity frames */
.sm{display:grid;gap:18px}
.sm-banners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sm-banner{position:relative;background:#0e0e10;border:0;padding:0;cursor:pointer;text-align:left;color:var(--dark);overflow:hidden;outline:2px solid transparent;outline-offset:2px;transition:outline-color .2s,transform .2s}
.sm-banner img{width:100%;height:auto;image-rendering:pixelated;display:block;filter:saturate(.5) brightness(.6);transition:filter .25s}
.sm-banner span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 8px;background:linear-gradient(transparent,rgba(12,10,20,.92));font:600 18px/1 "Barlow Condensed";text-transform:uppercase}
.sm-banner small{display:block;font:700 10px/1.4 "DM Sans";letter-spacing:1px;color:var(--y)}
.sm-banner[aria-pressed=true]{outline-color:var(--y)}.sm-banner[aria-pressed=true] img,.sm-banner:hover img{filter:none}
.sm-stage{position:relative;aspect-ratio:270/200;max-height:720px;width:100%;background:#120f1c center/cover no-repeat;image-rendering:pixelated;overflow:hidden;display:grid;place-items:center}
.sm-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 45%,rgba(10,8,16,.4) 90%);pointer-events:none}
.sm-stage.pulling:before{background:radial-gradient(ellipse at 50% 55%,rgba(166,136,255,.18),rgba(10,8,16,.5) 80%);transition:background .4s}
.sm-portal{position:absolute;z-index:1;left:0;right:0;top:0;bottom:0;pointer-events:none;display:grid;place-items:center;mix-blend-mode:screen}
.sm-portal>*{grid-area:1/1}
.sm-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.6vw,22px);width:min(92%,820px);perspective:1200px}
.sm-card{position:relative;aspect-ratio:96/128}
.sm-card.empty{visibility:hidden}
.sm-card.rest{opacity:.35;transform:scale(.9)}
.sm-card.dealt{opacity:0;transform:translateY(40%) scale(.3) rotate(-10deg)}
.sm-card.dealt.in{opacity:1;transform:none;transition:transform .5s cubic-bezier(.2,.9,.3,1.2),opacity .3s}
.sm-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.sm-card.flip .sm-inner{transform:rotateY(180deg)}
.sm-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-size:100% 100%;image-rendering:pixelated}
.sm-front{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding-top:4%;border:10px solid transparent;border-image:var(--card) 8 / 10px stretch;background:linear-gradient(var(--c1),var(--c2)) padding-box;--c1:#3b4252;--c2:#1c2029;--glow:rgba(210,215,230,.35)}
.sm-front:before{content:"";position:absolute;inset:-4px;background:radial-gradient(ellipse at 50% 32%,var(--glow),transparent 62%);pointer-events:none}
.sm-card.r1 .sm-front{--c1:#24457a;--c2:#111d33;--glow:rgba(95,160,255,.65)}
.sm-card.r2 .sm-front{--c1:#4b2a86;--c2:#1d1036;--glow:rgba(176,120,255,.75)}
.sm-card.r3 .sm-front{--c1:#8a5a12;--c2:#2e1b05;--glow:rgba(255,205,80,.9)}
.sm-front>*{position:relative}
.sm-frame{width:100%;aspect-ratio:82/65;background-size:100% 100%;image-rendering:pixelated;display:grid;place-items:center}
.sm-frame img{width:64%;height:auto;image-rendering:pixelated}
.sm-front b{font:600 clamp(11px,1.5vw,18px)/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark);text-align:center;text-shadow:0 1px 0 #000}
.sm-front small{font:700 clamp(8px,.8vw,10px)/1 "DM Sans";letter-spacing:1px;text-transform:uppercase;color:var(--light)}
.sm-card.r1 small{color:#8fb4ea}.sm-card.r2 small{color:var(--v)}.sm-card.r3 small{color:var(--y)}
.sm-card.r3.flip{animation:legpulse 1.6s ease-in-out infinite alternate}
@keyframes legpulse{to{filter:drop-shadow(0 0 14px rgba(235,196,81,.8))}}
.sm-rays,.sm-flash,.sm-pop{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);z-index:-1}
.sm-flash,.sm-pop{z-index:2}
.sm-rays{animation:spin 8s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.sm-splash[hidden]{display:none}
.sm-splash{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,48px);background:radial-gradient(ellipse at 35% 50%,rgba(150,90,20,.95),rgba(12,9,18,.97) 65%);cursor:pointer;animation:fadein .4s ease both;padding:20px}
.sm-key{width:min(46%,512px);height:auto;image-rendering:pixelated;animation:keyin .7s cubic-bezier(.2,.9,.3,1.2) both}
.sm-key.small{width:min(30%,256px)}
@keyframes keyin{from{transform:scale(.6) translateY(40px);opacity:0}}
.sm-splash small{display:block;font:700 13px/1 "DM Sans";letter-spacing:2px;text-transform:uppercase;color:var(--y)}
.sm-splash b{display:block;font:600 clamp(40px,6vw,86px)/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark);margin:8px 0}
.sm-splash span{font-size:13px;color:var(--light)}
.sm-ctl{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;justify-content:space-between}
.sm-pity{flex:1 1 260px}
.sm-pity .row1{display:flex;justify-content:space-between;font:600 18px/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark);margin-bottom:8px}
.sm-pity .bar{height:10px;background:#0e0e10;border:1px solid var(--bd)}.sm-pity .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yh),var(--y));transition:width .4s}
.sm-tally{font-size:14px;color:var(--light);margin-top:8px}
.gbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:204px;height:66px;padding:0 22px 6px;border:0;background:var(--gb) center/100% 100% no-repeat;image-rendering:pixelated;cursor:pointer;font:600 22px/1 "Barlow Condensed";text-transform:uppercase;color:#3a2206;text-shadow:0 1px 0 rgba(255,236,170,.6);transition:transform .1s,filter .2s}
.gbtn:hover{filter:brightness(1.1)}.gbtn:active{transform:translateY(2px)}
.gbtn small{font-size:15px;display:inline-flex;align-items:center;gap:4px}
.gbtn img{width:16px;height:16px;image-rendering:pixelated}
.gbtn.steel{color:#1c2230;text-shadow:0 1px 0 rgba(255,255,255,.5)}

/* Modifier draft: a boss falls, three cards turn over, the one taken joins the run */
.dm{position:relative}
.dm-stage{position:relative;height:190px;background:#0e0e10 left bottom/auto 100% repeat-x;image-rendering:pixelated;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.dm-stage:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(24,24,25,.1),rgba(24,24,25,.85))}
.dm-boss{position:relative;z-index:1;margin-bottom:-6px}
.dm-name{position:absolute;left:14px;top:12px;z-index:2;font:600 18px/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark);text-shadow:0 1px 2px #000}
.dm-banner{position:absolute;left:0;right:0;top:40%;z-index:3;text-align:center;font:600 clamp(28px,4vw,46px)/1 "Barlow Condensed";text-transform:uppercase;color:var(--y);text-shadow:0 3px 0 rgba(0,0,0,.6);opacity:0;pointer-events:none}
.dm-banner.show{animation:bnr 1.6s ease both}
.dm-hand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:-40px;position:relative;z-index:4;perspective:1100px;min-height:260px;padding:0 6px}
.dm-card{position:relative;background:none;border:0;padding:0;cursor:pointer;aspect-ratio:122/170;opacity:0;transform:translateY(40px) rotate(-4deg);transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .3s}
.dm-card.in{opacity:1;transform:none}
.dm-hold{visibility:hidden}
.dm-card.in:hover{transform:translateY(-8px)}
.dm-card.taken{transform:translateY(-30px) scale(1.06);transition-duration:.3s}
.dm-card.gone{opacity:0;transform:translateY(40px) scale(.9)}
.dm-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.dm-card.flip .dm-inner{transform:rotateY(180deg)}
.dm-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:16px solid transparent;border-image:var(--card) 8 fill / 16px stretch;image-rendering:pixelated}
.dm-back{background:repeating-linear-gradient(45deg,rgba(235,196,81,.08) 0 6px,transparent 6px 12px)}
.dm-front{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 4px;text-align:center}
.dm-rar{font:700 10px/1 "DM Sans";letter-spacing:1.2px;text-transform:uppercase;color:#c9c3d8;background:rgba(0,0,0,.35);padding:5px 8px;width:100%}
.dm-card.r1 .dm-rar{background:#27416a;color:#cfe0ff}.dm-card.r2 .dm-rar{background:#4a3380;color:#e4d9ff}.dm-card.r3 .dm-rar{background:#8a6414;color:#fff3c9}
.dm-slot{display:grid;place-items:center;width:72px;height:72px;border:10px solid transparent;border-image:var(--slot) 8 fill / 10px stretch;image-rendering:pixelated}
.dm-slot img{width:48px;height:48px;image-rendering:pixelated}
.dm-front b{font:600 clamp(16px,1.6vw,22px)/1.05 "Barlow Condensed";text-transform:uppercase;color:var(--dark)}
.dm-tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.dm-tags i{font:700 9px/1 "DM Sans";letter-spacing:1px;text-transform:uppercase;font-style:normal;background:rgba(0,0,0,.35);padding:4px 6px;color:var(--text)}
.dm-take{margin-top:auto;font:600 16px/1 "Barlow Condensed";text-transform:uppercase;color:#3a2206;background:var(--y);padding:6px 16px}
.dm-card.r3.flip{filter:drop-shadow(0 0 16px rgba(235,196,81,.45))}.dm-card.r2.flip{filter:drop-shadow(0 0 12px rgba(166,136,255,.4))}
.dm-pop{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);pointer-events:none}
.dm-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:22px}
.dm-run{display:flex;flex-wrap:wrap;gap:6px;min-height:52px;align-items:center;flex:1 1 280px}
.dm-empty{font-size:14px;color:var(--light)}
.dm-chip{display:grid;place-items:center;width:46px;height:46px;border:8px solid transparent;border-image:var(--slot) 8 fill / 8px stretch;image-rendering:pixelated}
.dm-chip img{width:28px;height:28px;image-rendering:pixelated}
.dm-chip.new{animation:chip .5s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes chip{from{transform:translateY(-60px) scale(1.6);opacity:0}}
.dm-sets{display:flex;flex-wrap:wrap;gap:8px}
.dm-set{display:flex;align-items:center;gap:8px;font:700 11px/1 "DM Sans";letter-spacing:1.1px;text-transform:uppercase;color:var(--light);background:#0e0e10;padding:8px 10px}
.dm-set span{display:flex;gap:3px}.dm-set span i{width:8px;height:8px;background:#3a393d}.dm-set span i.on{background:var(--y)}
.dm-set.on{background:var(--y);color:#181819}.dm-set.on span i{background:#181819}
.dm-btns{display:flex;gap:10px}
.dm-btns button{font:500 13px/1 "DM Sans";letter-spacing:1.3px;text-transform:uppercase;color:var(--dark);background:transparent;border:1px solid var(--bd);padding:12px 16px;cursor:pointer}
.dm-btns button:hover{border-color:var(--y);color:var(--y)}

/* Shop: a game window with the shop scene as its header */
.shop{position:relative;border:18px solid transparent;border-image:var(--window) 8 fill / 18px stretch;image-rendering:pixelated;padding:0;overflow:hidden}
.sh-head{position:relative;margin:-4px -4px 10px;height:118px;background:#1b1626 center 40%/cover no-repeat;image-rendering:pixelated;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:10px 12px}
.sh-head:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,16,30,.1),rgba(20,16,30,.85))}
.sh-head>*{position:relative}
.sh-title{position:absolute;left:12px;top:10px;font:600 26px/1 "Barlow Condensed";text-transform:uppercase;color:var(--dark);text-shadow:0 2px 0 #000;letter-spacing:.5px}
.sh-wallet{display:flex;align-items:center;gap:8px;font:600 24px/1 "Barlow Condensed";color:var(--dark);font-variant-numeric:tabular-nums;background:rgba(10,8,16,.75);border:1px solid rgba(235,196,81,.35);padding:6px 12px}
.sh-wallet img{width:24px;height:24px;image-rendering:pixelated}
.sh-wallet.pop{animation:pop .5s ease}
@keyframes pop{40%{transform:scale(1.15)}}
.sh-vip{display:flex;align-items:center;gap:8px;min-width:200px;background:rgba(10,8,16,.75);padding:6px 10px}
.sh-vip img{width:30px;height:auto;image-rendering:pixelated}
.sh-vip b{font:600 18px/1 "Barlow Condensed";color:var(--y);white-space:nowrap}
.sh-vip .bar{flex:1;height:8px;background:rgba(255,255,255,.12)}.sh-vip .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yh),var(--y));transition:width .5s}
.sh-tabs{display:flex;gap:4px;margin-bottom:10px}
.sh-tabs button{flex:1;font:600 17px/1 "Barlow Condensed";text-transform:uppercase;color:#d8d2e6;background:none;border:10px solid transparent;border-image:var(--tab) 8 fill / 10px stretch;image-rendering:pixelated;padding:4px 6px;cursor:pointer;filter:brightness(.7);transition:filter .2s}
.sh-tabs button:hover{filter:brightness(.9)}
.sh-tabs button[aria-pressed=true]{filter:none;color:var(--y)}
.sh-panel{height:500px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#5a5570 transparent}
.sh-panel.in{animation:fadein .3s ease both}
.sh-hero{position:relative;background:rgba(10,8,16,.55);animation:fadein .35s ease both}
.sh-hero-art{position:relative;aspect-ratio:256/96;background:center/cover no-repeat;image-rendering:pixelated}
.sh-ribbon{position:absolute;left:-2px;bottom:10px;font:600 24px/1 "Barlow Condensed";text-transform:uppercase;color:#3a2206;background:linear-gradient(#f6d77a,#d9a635);padding:8px 18px 8px 14px;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%);text-shadow:0 1px 0 rgba(255,240,190,.6)}
.sh-pill{position:absolute;right:8px;top:8px;font:600 15px/1 "Barlow Condensed";color:#fff;background:rgba(200,60,60,.9);padding:6px 9px;font-variant-numeric:tabular-nums}
.sh-pill.gold{top:40px;background:rgba(10,8,16,.8);color:var(--y);font-size:13px}
.sh-hero-body{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;flex-wrap:wrap}
.sh-items{display:flex;flex-wrap:wrap;gap:6px}
.sh-item{position:relative;width:54px;height:54px;display:grid;place-items:center;border:8px solid transparent;border-image:var(--slot) 8 fill / 8px stretch;image-rendering:pixelated}
.sh-item img{width:30px;height:30px;image-rendering:pixelated}
.sh-item.hero img{width:36px;height:36px}
.sh-item em{position:absolute;right:-6px;bottom:-8px;font:600 13px/1 "Barlow Condensed";font-style:normal;color:var(--dark);text-shadow:0 1px 0 #000,1px 0 0 #000,-1px 0 0 #000,0 -1px 0 #000}
.sh-perk{margin:0;font-size:14px;color:var(--text);max-width:280px}
.sh-cta{min-width:150px}
.gbtn:disabled{filter:grayscale(1) brightness(.6);cursor:default}
.sh-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.sh-thumb{position:relative;background:rgba(10,8,16,.55);border:0;padding:0;cursor:pointer;text-align:left;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .2s}
.sh-thumb img{width:100%;height:auto;aspect-ratio:256/96;object-fit:cover;image-rendering:pixelated;display:block;filter:brightness(.7);transition:filter .2s}
.sh-thumb b{display:block;font:600 13px/1.1 "Barlow Condensed";text-transform:uppercase;color:var(--dark);padding:6px 6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-thumb em{display:block;font:600 13px/1 "Barlow Condensed";font-style:normal;color:var(--y);padding:3px 6px 6px}
.sh-thumb:hover img,.sh-thumb[aria-pressed=true] img{filter:none}
.sh-thumb[aria-pressed=true]{outline-color:var(--y)}
.sh-packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sh-pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;border:12px solid transparent;border-image:var(--card) 8 fill / 12px stretch;image-rendering:pixelated;padding:14px 4px 6px;cursor:pointer;color:var(--text);transition:transform .15s;overflow:visible}
.sh-pack:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,rgba(186,120,255,calc(.18 + var(--t,0) * .07)),transparent 70%);pointer-events:none}
.sh-pack.t1{--t:1}.sh-pack.t2{--t:2}.sh-pack.t3{--t:3}.sh-pack.t4{--t:4}.sh-pack.t5{--t:5}
.sh-pack>*{position:relative}
.sh-pack:hover{transform:translateY(-4px)}
.sh-pack.bought{animation:pop .45s ease}
.sh-pack-art{width:88px;height:88px;image-rendering:pixelated;filter:drop-shadow(0 4px 10px rgba(160,90,255,.45))}
.sh-pack b{display:flex;align-items:center;gap:5px;font:600 24px/1 "Barlow Condensed";color:var(--dark);font-variant-numeric:tabular-nums}
.sh-pack b img{width:16px;height:16px;image-rendering:pixelated}
.sh-pack s{font-size:13px;color:var(--light)}.sh-pack span{font-size:12px;color:var(--light)}
.sh-price{margin-top:6px;font:600 18px/1 "Barlow Condensed";font-style:normal;color:#3a2206;background:linear-gradient(#f6d77a,#d9a635);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);padding:8px 14px;width:80%;text-align:center}
.sh-flag{position:absolute;top:-6px;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 10px/1 "DM Sans";letter-spacing:1px;text-transform:uppercase;font-style:normal;background:var(--y);color:#181819;padding:5px 8px;z-index:2}
.sh-flag.x2{background:var(--p)}
.sh-burst{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);pointer-events:none}
.sh-ads{display:grid;gap:6px}
.sh-ad{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;background:rgba(10,8,16,.55);padding:6px 10px 6px 6px}
.sh-slot{display:grid;place-items:center;width:48px;height:48px;border:8px solid transparent;border-image:var(--slot) 8 fill / 8px stretch;image-rendering:pixelated}
.sh-slot img{width:28px;height:28px;image-rendering:pixelated}
.sh-ad b{font:600 17px/1.1 "Barlow Condensed";text-transform:uppercase;color:var(--dark)}
.sh-dots{display:flex;gap:3px;margin-top:5px}.sh-dots i{width:10px;height:6px;background:#3a393d}.sh-dots i.on{background:var(--y)}
.sh-ad.out{opacity:.55}
.sh-watch{position:relative;overflow:hidden;font:600 16px/1 "Barlow Condensed";text-transform:uppercase;color:#10261a;background:linear-gradient(#8fe0a0,#4fb56a);border:0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);padding:10px 14px;cursor:pointer;min-width:96px}
.sh-watch:disabled{background:#3a393d;color:var(--light);box-shadow:none;cursor:default}
.sh-watch.playing{background:#2c2b30;color:var(--dark)}
.sh-watch.playing i{position:absolute;left:0;bottom:0;height:3px;background:#8fe0a0;animation:adbar 1.4s linear both}
@keyframes adbar{from{width:0}to{width:100%}}
.sh-toast{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:max-content;max-width:90%;background:var(--y);color:#181819;font-size:14px;padding:10px 14px;opacity:0;pointer-events:none;z-index:3}
.sh-toast.show{animation:toast2 2.8s ease both}
@keyframes toast2{0%{opacity:0;transform:translate(-50%,10px)}10%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.lo-board li img.medal{width:24px;height:24px}

@media(max-width:899px){
  .sm-banners{gap:6px}.sm-banner span{font-size:13px;padding:14px 8px 6px}.sm-banner small{display:none}
  .sm-stage{aspect-ratio:auto;min-height:420px}
  .sm-grid{width:96%;gap:6px}
  .gbtn{min-width:150px;height:52px;font-size:18px;padding:0 14px 5px}
  .dm-hand{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:0}
  .dm-face{border-width:10px;border-image-width:10px}
  .dm-slot{width:48px;height:48px;border-width:6px}.dm-slot img{width:32px;height:32px}
  .dm-tags{display:none}.dm-take{font-size:13px;padding:4px 8px}
  .shop{border-width:12px;border-image-width:12px}
  .sh-head{height:104px;flex-wrap:wrap}.sh-vip{min-width:0;flex:1}
  .sh-panel{height:560px}
  .sh-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-packs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-cta{min-width:0;width:100%}
}