@font-face{font-family:'Bungee';src:url(../fonts/bungee-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bungee';src:url(../fonts/bungee-latin-ext-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bungee';src:url(../fonts/bungee-vietnamese-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Bungee';src:url(../fonts/russo-one-cyrillic-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Barlow K';src:url(../fonts/barlow-condensed-latin-800-italic.woff2) format('woff2');font-weight:800;font-style:italic;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow K';src:url(../fonts/barlow-condensed-latin-ext-800-italic.woff2) format('woff2');font-weight:800;font-style:italic;font-display:block;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow K';src:url(../fonts/barlow-condensed-vietnamese-800-italic.woff2) format('woff2');font-weight:800;font-style:italic;font-display:block;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Barlow K';src:url(../fonts/roboto-condensed-cyrillic-800-italic.woff2) format('woff2');font-weight:800;font-style:italic;font-display:block;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Barlow K';src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow K';src:url(../fonts/barlow-condensed-latin-ext-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:block;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow K';src:url(../fonts/barlow-condensed-vietnamese-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:block;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Barlow K';src:url(../fonts/roboto-condensed-cyrillic-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:block;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{
  --ink:#0c1230;--ink2:#1b2352;--orange:#ff6a1f;--gold:#ffd23f;--cyan:#3ee8ff;--pink:#ff3d8b;--lime:#b6ff3b;--violet:#8b5cff;--white:#fffaf0;
  --disp:'Bungee','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  --body:'Barlow K','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
}
/* Japanese and Korean take their own system faces (the same characters are drawn differently in each) */
body.lang-ja{--disp:'Bungee','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Noto Sans JP',sans-serif;--body:'Barlow K','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Noto Sans JP',sans-serif}
body.lang-ko{--disp:'Bungee','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;--body:'Barlow K','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif}
/* Traditional Chinese takes the Traditional system faces (the simplified ones draw some characters in mainland forms) */
body.lang-zht{--disp:'Bungee','PingFang TC','Hiragino Sans CNS','Microsoft JhengHei','Noto Sans TC',sans-serif;--body:'Barlow K','PingFang TC','Hiragino Sans CNS','Microsoft JhengHei','Noto Sans TC',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
/* the phone's own text size setting is not applied on top of the game's (see TXTK) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{width:100%;height:100%;overflow:hidden;background:#070b1f;color:var(--white)}
body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html{cursor:var(--cur,crosshair)}*{cursor:inherit}
body{font-family:var(--body)}
#app{position:fixed;inset:0}
#app canvas{display:block;width:100%;height:100%}
.o{text-shadow:0 0 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink),0 4px 0 var(--ink)}
.o3{text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),3px 3px 0 var(--ink),-3px 3px 0 var(--ink),3px -3px 0 var(--ink),-3px -3px 0 var(--ink),0 6px 0 var(--ink),3px 6px 0 var(--ink),-3px 6px 0 var(--ink)}
.disp{font-family:var(--disp);letter-spacing:.02em}
.zh .disp{letter-spacing:.06em}
.zh,.zh *{font-weight:900;font-synthesis:none}
.hidden{display:none!important}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:var(--sat,0px) var(--sar,0px) var(--sab,0px) var(--sal,0px);pointer-events:none;opacity:0;transition:opacity .35s}
#hud.on{opacity:1}
#hudTL{position:absolute;left:22px;top:18px}
#hearts{display:flex;gap:2px;height:36px}
#hearts img{width:39px!important;height:36px;image-rendering:pixelated;transition:transform .15s}
#hearts img.pop{animation:hpop .35s}
#buffs{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.bf{display:grid;grid-template-columns:34px auto;grid-template-rows:auto 7px;column-gap:7px;align-items:center;animation:bfIn .35s cubic-bezier(.2,1.6,.4,1)}
.bf canvas{grid-row:1/3;width:34px;height:34px;filter:drop-shadow(0 2px 0 #0c1230)}
.bf b{font-family:var(--disp);font-weight:400;font-size:calc((14px) / var(--tz,1));line-height:1;color:var(--bc);letter-spacing:.03em}
.bf i{display:block;width:118px;height:7px;border:2px solid #0c1230;border-radius:4px;background:#1a1f4a;overflow:hidden}
.bf u{display:block;height:100%;background:var(--bc)}
.bf.end{animation:bfBlink .25s steps(2) infinite}
@keyframes bfIn{from{transform:translateX(-24px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes bfBlink{50%{opacity:.35}}
@keyframes hpop{0%{transform:scale(1.6) rotate(-10deg)}100%{transform:scale(1)}}
.bar{position:relative;height:10px;width:170px;background:rgba(12,18,48,.72);border:2px solid var(--ink);border-radius:2px;overflow:hidden;box-shadow:0 2px 0 var(--ink)}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(180deg,#9ff6ff,var(--cyan) 55%,#16a9c7);transition:width .18s}
#hudTC{position:absolute;left:50%;top:14px;transform:translateX(-50%);text-align:center}
#waveLbl{font-family:var(--disp);font-size:calc((22px) / var(--tz,1));line-height:1}
#waveLbl small{font-size:calc((13px) / var(--tz,1));color:#b9c3ff;margin-left:6px}
#hudTC .bar{width:220px;margin:7px auto 0;height:8px}
#waveFill{background:linear-gradient(180deg,#ffb3cf,var(--pink) 60%,#c4185a)!important}
#bossWrap{margin-top:6px}
#bossName{font-family:var(--disp);font-size:calc((13px) / var(--tz,1));color:#ffb3cf}
#bossWrap .bar{width:360px;height:14px}
#bossFill{background:linear-gradient(180deg,#ffd0e2,#ff3d6e 55%,#a5123d)!important}
#hudTR{position:absolute;right:30px;top:18px;display:flex;flex-direction:column;align-items:flex-end}
#scoreNum{font-family:var(--disp);font-size:calc((28px) / var(--tz,1));color:var(--gold);line-height:1}
#scoreNum.bump{animation:cbump .2s}
@keyframes cbump{0%{transform:scale(1.15)}100%{transform:scale(1)}}
/* slot */
#slot{margin-top:10px;padding:8px 8px 6px;background:linear-gradient(180deg,#2a1d5e,#160f38);border:3px solid var(--ink);border-radius:6px;box-shadow:0 4px 0 var(--ink),inset 0 2px 0 rgba(255,255,255,.18);transform:translateX(130%);transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
#slot.on{transform:none}
#slot .reels{display:flex;gap:6px}
#slot canvas{width:58px;height:84px;background:#fff8e6;border:2px solid var(--ink);border-radius:3px}
#slotLbl{font-family:var(--disp);font-size:calc((12px) / var(--tz,1));text-align:center;margin-top:5px;color:var(--gold);height:15px;white-space:nowrap}
#slot.win{animation:slotwin .5s 3}
@keyframes slotwin{50%{box-shadow:0 4px 0 var(--ink),0 0 26px 6px rgba(255,210,63,.75),inset 0 2px 0 rgba(255,255,255,.18)}}
/* style */
#styleBox{position:absolute;right:26px;top:43%;transform:translateY(-50%);text-align:right;width:220px}
#rank{font-family:var(--disp);font-size:calc((92px) / var(--tz,1));line-height:.9;display:inline-block;transform:skewX(-10deg);transform-origin:right bottom;opacity:.35;transition:opacity .2s}
#rank.live{opacity:1}
#rank.slam{animation:slam .38s cubic-bezier(.2,1.6,.4,1)}
@keyframes slam{0%{transform:skewX(-10deg) scale(2.2);opacity:0}100%{transform:skewX(-10deg) scale(1);opacity:1}}
#rankName{font-family:var(--disp);font-size:calc((15px) / var(--tz,1));margin-top:2px}
#styleBox .bar{width:170px;margin:5px 0 0 auto;height:7px}
#rankFill{background:linear-gradient(90deg,#fff,var(--gold))!important;transition:none!important}
/* streak ladder */
#streakBox{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:14px}
#streakNum{font-family:var(--disp);text-align:right;min-width:96px;line-height:1;padding-bottom:2px}
#streakNum b{display:block;font-weight:400;font-size:calc((44px) / var(--tz,1));color:#fff}
#streakNum span{display:block;font-size:calc((13px) / var(--tz,1));color:#ffb38a;margin-top:2px}
#streakNum.pop b{animation:spop .32s cubic-bezier(.2,1.6,.4,1)}
@keyframes spop{0%{transform:scale(1.8)}100%{transform:scale(1)}}
#ladder{display:flex;align-items:flex-end;height:58px}
.ln{position:relative;width:46px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.ln::before{content:'';position:absolute;bottom:11px;right:50%;width:100%;height:5px;background:#2b3166;box-shadow:0 0 0 2px var(--ink)}
.ln:first-child::before{display:none}
.ln i{position:relative;width:15px;height:15px;transform:rotate(45deg);background:#2b3166;border:3px solid var(--ink);margin-bottom:5px}
.ln.ms i{width:19px;height:19px;margin-bottom:3px}
.ln canvas{width:32px;height:32px;margin-bottom:3px;opacity:.35;filter:grayscale(.8)}
.ln.on i,.ln.on::before{background:var(--gold)}
.ln.on canvas{opacity:1;filter:none}
.ln.hit canvas{animation:mspop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes mspop{0%{transform:scale(2) rotate(-12deg)}100%{transform:scale(1)}}
.ln .k{position:absolute;bottom:-14px;font-family:var(--disp);font-size:calc((10px) / var(--tz,1));color:#8d97d8}
#streakBar{width:368px;height:8px;margin-top:5px}
#streakFill{background:linear-gradient(90deg,#ff9a3c,#ffd23f)!important;transition:none!important}
#streakBox.fever #streakFill{background:linear-gradient(90deg,#ff3d8b,#ff9a3c,#ffd23f)!important}
#streakBox.fever #streakNum span{color:#ff3d8b;animation:blink .25s infinite}
@keyframes blink{50%{opacity:.4}}
#streakCall{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);font-family:var(--disp);font-size:calc((30px) / var(--tz,1));white-space:nowrap;opacity:0}
#streakCall.big{font-size:calc((44px) / var(--tz,1))}
#streakCall.go{animation:scall 1.3s forwards}
@keyframes scall{0%{opacity:0;transform:translateX(-50%) scale(2.2) skewX(-8deg)}12%{opacity:1;transform:translateX(-50%) scale(1) skewX(-8deg)}75%{opacity:1;transform:translateX(-50%) translateY(-6px) skewX(-8deg)}100%{opacity:0;transform:translateX(-50%) translateY(-18px) skewX(-8deg)}}
/* toasts */
#toasts{position:absolute;left:22px;top:120px;display:flex;flex-direction:column;gap:6px}
.toast{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;background:linear-gradient(90deg,rgba(255,106,31,.95),rgba(255,61,139,.9));border:3px solid var(--ink);border-radius:4px;box-shadow:0 3px 0 var(--ink);animation:tin .35s cubic-bezier(.2,1.5,.4,1),tout .4s 2.6s forwards}
.toast img{width:44px;height:44px;background:rgba(12,18,48,.35);border-radius:3px}
.toast small{display:block;font-family:var(--disp);font-size:calc((11px) / var(--tz,1));color:#ffe9b0}
.toast b{display:block;font-family:var(--disp);font-size:calc((18px) / var(--tz,1));font-weight:400}
@keyframes tin{0%{transform:translateX(-120%)}100%{transform:none}}
@keyframes tout{to{transform:translateX(-130%);opacity:0}}

/* floating world text */
#ftx{position:fixed;inset:0;pointer-events:none;overflow:hidden;--ftk:var(--uip,1)}
.ft{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform,opacity;font-family:var(--disp)}
.ft.move{font-size:calc((max(13px, calc(22px * var(--ftk)))) / var(--tz,1))}
.ft.move.big{font-size:calc((max(15px, calc(32px * var(--ftk)))) / var(--tz,1))}
.ft.move.huge{font-size:calc((max(18px, calc(44px * var(--ftk)))) / var(--tz,1))}
.ft.tag{font-size:calc((max(10px, calc(14px * var(--ftk)))) / var(--tz,1));color:var(--gold)}
.ft.dmg{font-family:'Barlow K',var(--body);font-style:italic;font-weight:800;font-size:calc((max(13px, calc(26px * var(--ftk)))) / var(--tz,1))}
.ft.dmg.crit{font-size:calc((max(16px, calc(38px * var(--ftk)))) / var(--tz,1));color:var(--gold)}
/* PVP: a damage card per fighter along the bottom of the screen */
#pctBar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:none;align-items:flex-end;gap:10px}
#hud.smash #pctBar{display:flex}
#hud.smash #streakBox,#hud.smash #hearts{display:none}
#hud.onelife #hearts{display:none}
/* a fighter's card: its colour down the left; its name and lives along the top; the damage big at the bottom right */
.fc{position:relative;flex:none;width:180px;height:70px;display:grid;grid-template-columns:9px 1fr;grid-template-rows:26px 1fr;background:linear-gradient(180deg,rgba(28,34,84,.94),rgba(12,18,48,.94));border:3px solid var(--ink);border-radius:8px;overflow:hidden;box-shadow:0 4px 0 rgba(8,10,30,.6);animation:fcin .35s cubic-bezier(.2,1.4,.4,1);transition:opacity .35s,transform .35s}
.fc .st{grid-column:1;grid-row:1/3;background:var(--fc)}
.fc .top{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 9px 0 9px;min-width:0}
.fc .nm{font-family:var(--disp);font-size:calc((12px) / var(--tz,1));line-height:1;color:var(--fc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fc .stk{display:flex;gap:4px;flex:none}
.fc .stk i{width:10px;height:10px;border-radius:3px;background:var(--fc);box-shadow:0 0 0 2px var(--ink)}
.fc .stk i.off{background:#2b3166}
.fc .pv{grid-column:2;grid-row:2;justify-self:end;align-self:end;padding:0 10px 2px 0;font-family:'Barlow K',var(--body);font-style:italic;font-weight:800;font-size:calc((38px) / var(--tz,1));line-height:1;transform-origin:70% 70%}
.fc .pv small{font-size:calc((18px) / var(--tz,1));margin-left:2px}
.fc.you{box-shadow:0 4px 0 rgba(8,10,30,.6),0 0 0 2px var(--fc)}
#hud.vs #hudTC{display:none}
.fc.hit .pv{animation:fchit .3s}
.fc.big .pv{animation:fcbig .5s}
.fc.out{opacity:0;transform:translateY(26px) scale(.9)}
#pctBar.many .fc{width:166px}
#pctBar.many .fc .pv{font-size:calc((34px) / var(--tz,1))}
@keyframes fcin{0%{transform:translateY(30px);opacity:0}100%{transform:none;opacity:1}}
@keyframes fchit{0%{transform:translate(4px,-2px) scale(1.28)}30%{transform:translate(-4px,1px) scale(1.14)}60%{transform:translate(2px,0) scale(1.05)}100%{transform:none}}
@keyframes fcbig{0%{transform:translate(7px,-3px) scale(1.55)}20%{transform:translate(-6px,2px) scale(1.34)}40%{transform:translate(5px,-1px) scale(1.18)}70%{transform:translate(-2px,0) scale(1.06)}100%{transform:none}}
.ft.pct small{font-size:calc((max(10px, calc(14px * var(--ftk)))) / var(--tz,1));margin-left:1px}
.ft.coin{font-size:calc((max(10px, calc(16px * var(--ftk)))) / var(--tz,1));color:var(--gold)}
.ft.info{font-size:calc((max(10px, calc(16px * var(--ftk)))) / var(--tz,1))}
.ft.bonus{font-family:'Barlow K',var(--body);font-weight:800;font-style:italic;font-size:calc((max(10px, calc(15px * var(--ftk)))) / var(--tz,1));opacity:.85}
/* banner */
#banner{position:fixed;left:0;right:0;top:28%;text-align:center;pointer-events:none;zoom:var(--uip,1)}
#banner .b{display:inline-block;white-space:nowrap;font-family:var(--disp);font-size:calc((62px) / var(--tz,1));line-height:1;padding:10px 30px 6px;background:#0d0f22;border-bottom:5px solid #ff4a1c;box-shadow:8px 8px 0 rgba(0,0,0,.4);transform:skewX(-12deg)}
#banner .s{display:table;white-space:nowrap;margin:10px auto 0;padding:5px 14px 4px;background:#f6f3ec;color:#0d0f22;font-family:'Barlow K',var(--body);font-weight:700;font-size:calc((18px) / var(--tz,1));letter-spacing:.16em;text-transform:uppercase;transform:skewX(-12deg)}
#banner.go .b{animation:bin .36s cubic-bezier(.2,.9,.1,1) backwards}
#banner.go .s{animation:fadeup .4s .08s backwards}
#banner.out{animation:bout .3s forwards}
@keyframes bin{0%{transform:skewX(-12deg) translateX(-120px);clip-path:inset(0 100% 0 0)}100%{transform:skewX(-12deg);clip-path:inset(0 0 0 0)}}
@keyframes bout{to{opacity:0;transform:translateY(-16px)}}
@keyframes fadeup{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
/* cursor */
#cursor{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:50}
#cursor i,#cursor b{display:none!important}
#cursor i{position:absolute;width:12px;height:12px;border:3px solid #fff;filter:drop-shadow(0 0 0 var(--ink)) drop-shadow(1px 1px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink))}
#cursor i:nth-child(1){left:-15px;top:-15px;border-right:0;border-bottom:0}
#cursor i:nth-child(2){left:3px;top:-15px;border-left:0;border-bottom:0}
#cursor i:nth-child(3){left:-15px;top:3px;border-right:0;border-top:0}
#cursor i:nth-child(4){left:3px;top:3px;border-left:0;border-top:0}
#cursor b{position:absolute;left:-3px;top:-3px;width:6px;height:6px;background:#fff;box-shadow:0 0 0 2px var(--ink)}
#cursor span{position:absolute;left:21px;top:13px;font-family:var(--disp);font-size:calc((13px) / var(--tz,1));white-space:nowrap}
#cursor.hot i{border-color:var(--gold)}#cursor.hot span{color:var(--gold)}
#cursor.hot b{background:var(--gold)}
#cursor.ui i,#cursor.ui span{display:none}
#cursor.ui b{width:12px;height:12px;left:-2px;top:-2px;transform:rotate(45deg)}
/* the way on, on a run: chevrons at the right edge of the screen */
#goRight{position:fixed;z-index:30;right:26px;top:63%;margin-top:-34px;width:96px;height:68px;pointer-events:none;opacity:0;transition:opacity .35s}
#goRight.on{opacity:1}
#goRight i{position:absolute;top:8px;width:34px;height:34px;border-right:11px solid #ffd23f;border-top:11px solid #ffd23f;transform:rotate(45deg);filter:drop-shadow(3px 3px 0 var(--ink));animation:goR 1.1s infinite}
#goRight i:nth-child(1){left:0}#goRight i:nth-child(2){left:26px;animation-delay:.15s}#goRight i:nth-child(3){left:52px;animation-delay:.3s}
@keyframes goR{0%,100%{opacity:.25;transform:translateX(-6px) rotate(45deg)}40%{opacity:1;transform:translateX(4px) rotate(45deg)}}
.adI{width:30px;height:22px;border:3px solid var(--ink);border-radius:5px;background:#fff;position:relative}
.adI::after{content:'';position:absolute;left:9px;top:3px;border:6px solid transparent;border-left:9px solid var(--ink)}
#adStub{position:fixed;inset:0;z-index:999;background:rgba(7,10,30,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
#adStub b{font-family:var(--disp);font-size:calc((44px) / var(--tz,1));color:#fff}
#adStub i{width:220px;height:10px;border-radius:5px;background:#2c3577;position:relative;overflow:hidden}
#adStub i::after{content:'';position:absolute;left:0;top:0;bottom:0;width:100%;background:#ffd23f;animation:adBar 2s linear forwards;transform-origin:left}
@keyframes adBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#mark{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;border-left:9px solid transparent;border-right:9px solid transparent;border-top:13px solid #fff;filter:drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink));opacity:0;transition:opacity .08s}
#mark.on{opacity:1}#mark.hot{border-top-color:var(--gold)}
/* charge pips over a charged ball */
#pips{position:absolute;inset:0;pointer-events:none}
#edges{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.edge{position:absolute;left:0;top:0;width:52px;height:52px;margin:-26px 0 0 -26px;display:none}
.edge.on{display:block}
.edge svg{position:absolute;inset:0;width:100%;height:100%;fill:#ff5a6e;stroke:#0c1230;animation:edgeBob .7s ease-in-out infinite alternate}
.edge.l svg{transform:scaleX(-1)}
.edge.boss svg{fill:#ff3d8b}
.edge b{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-family:var(--disp);font-weight:400;font-size:calc((11px) / var(--tz,1));color:#fff;text-shadow:0 2px 0 #0c1230,0 0 3px #0c1230;white-space:nowrap}
@keyframes edgeBob{from{translate:0 0}to{translate:4px 0}}
.edge.l svg{animation-name:edgeBobL}
@keyframes edgeBobL{from{translate:0 0}to{translate:-4px 0}}
.cp{position:absolute;left:0;top:0;display:flex;gap:3px;transform-origin:50% 100%;opacity:0;transition:opacity .12s}
.cp.on{opacity:1}
.cp i{width:9px;height:9px;transform:rotate(45deg);background:rgba(12,18,48,.75);border:2px solid var(--ink)}
.cp i.f{background:var(--pc);box-shadow:0 0 6px var(--pc)}
.cp.max i.f{animation:pmax .18s infinite alternate}
@keyframes pmax{to{background:#fff}}
/* mode HUD */
#modeBox{margin-top:2px;line-height:1}
#modeBig{display:block;font-family:var(--disp);font-weight:400;font-size:calc((40px) / var(--tz,1));color:#fff}
#modeBig.bump{animation:cbump .2s}
#modeSmall{display:block;font-family:var(--disp);font-size:calc((14px) / var(--tz,1));color:#c9d1ff;margin-top:3px;min-height:15px}
/* ladder locks */
.ln .lockI{display:none;position:absolute;bottom:18px;width:26px!important;height:26px!important;opacity:1!important;filter:none!important}
.ln.lk .ic{opacity:.12!important}
.ln.lk .lockI{display:block}
/* reward cards */
.cf{position:relative;width:100%;height:100%;border:4px solid var(--ink);border-radius:14px;background:radial-gradient(ellipse at 50% 34%,color-mix(in srgb,var(--cc) 55%,#fff 10%) 0%,color-mix(in srgb,var(--cc) 40%,#1a2050) 45%,#151a44 100%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.18),inset 0 -40px 60px rgba(8,10,30,.5);display:flex;flex-direction:column;align-items:center;padding:14px 14px 16px;overflow:hidden}
.cf .ctag{font-family:var(--disp);font-size:calc((12px) / var(--tz,1));color:var(--ink);background:var(--cc);border:2px solid var(--ink);border-radius:4px;padding:3px 8px 2px;align-self:flex-start}
.cf .cart{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0}
.cf .cart img{width:88%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 0 rgba(8,10,30,.45))}
.cf .cname{font-family:var(--disp);font-weight:400;font-size:calc((26px) / var(--tz,1));color:#fff;text-align:center;line-height:1.05}
.cf .cdesc{font-family:var(--body);font-weight:700;font-size:calc((16px) / var(--tz,1));color:#dfe4ff;text-align:center;line-height:1.3;margin-top:8px}
#scrCard{background:radial-gradient(ellipse at 50% 46%,rgba(40,30,110,.75),rgba(5,7,24,.92) 70%);flex-direction:column}
#cardRays{position:absolute;left:50%;top:46%;width:1600px;height:1600px;margin:-800px 0 0 -800px;background:repeating-conic-gradient(from 0deg,rgba(255,226,140,.13) 0deg 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 28%,transparent 62%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 28%,transparent 62%);opacity:0;transition:opacity .5s;animation:rays 18s linear infinite}
@keyframes rays{to{transform:rotate(360deg)}}
#scrCard.lit #cardRays{opacity:1}
#cardWrap{position:relative;display:flex;flex-direction:column;align-items:center;opacity:0}
#cardWrap.in{animation:cwin .5s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes cwin{0%{opacity:0;transform:translateY(160px) scale(.6)}100%{opacity:1;transform:none}}
#cardKicker{font-family:var(--disp);font-size:calc((26px) / var(--tz,1));color:var(--gold);margin-bottom:18px;letter-spacing:.04em}
#cardStage{position:relative;width:300px;height:420px;perspective:1100px}
#card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.35,.5,1)}
#card.flip{transform:rotateY(180deg)}
#card .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#card .front{transform:rotateY(180deg)}
#card .back .bk{width:100%;height:100%;border:4px solid var(--ink);border-radius:14px;background:repeating-linear-gradient(45deg,#26307a 0 14px,#1d2563 14px 28px);box-shadow:inset 0 0 0 6px #3a46a0,inset 0 0 0 10px var(--ink);display:flex;align-items:center;justify-content:center}
#card .back b{font-family:'Bungee';font-weight:400;font-size:calc((40px) / var(--tz,1));line-height:.95;color:var(--gold);text-align:center;transform:rotate(-8deg);text-shadow:3px 3px 0 var(--orange),6px 6px 0 var(--ink)}
#cardWrap.lit #card .front .cf{animation:cglow 1.6s ease-out}
@keyframes cglow{0%{box-shadow:inset 0 0 0 3px rgba(255,255,255,.18),0 0 0 0 rgba(255,230,140,.9),0 0 120px 40px rgba(255,230,140,.9)}100%{box-shadow:inset 0 0 0 3px rgba(255,255,255,.18),0 0 0 0 rgba(255,230,140,0),0 0 60px 10px rgba(255,230,140,.25)}}
#cardSpark{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2;pointer-events:none}
#cardSpark canvas{position:absolute;left:-16px;top:-16px;width:32px;height:32px;animation:spark 1s cubic-bezier(.1,.8,.3,1) forwards;opacity:0}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(.4) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(1) rotate(var(--rt))}}
#cardNote{font-family:var(--body);font-weight:700;font-size:calc((18px) / var(--tz,1));color:#dfe4ff;margin-top:20px;height:24px;opacity:0;transition:opacity .4s .3s}
#cardWrap.lit #cardNote{opacity:1}
#bCard{margin-top:12px;min-width:220px}
.cc{aspect-ratio:.6}
.cc .cf .cart{flex:0 0 40%}.cc .cf .cart img{width:auto;height:92%}.cc .cf .cdesc{font-size:calc((13px) / var(--tz,1));margin-top:5px}
.cc .cf{padding:8px 8px 10px}.cc .cf .ctag{font-size:calc((9px) / var(--tz,1));padding:2px 5px 1px}.cc .cf .cname{font-size:calc((15px) / var(--tz,1))}
.cc .cb{width:100%;height:100%;border:4px solid var(--ink);border-radius:12px;background:repeating-linear-gradient(45deg,#232a66 0 10px,#1b2156 10px 20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.cc .cb b{font-family:var(--disp);font-weight:400;font-size:calc((40px) / var(--tz,1));color:#4b558f}
.cc .cb span{font-family:var(--disp);font-size:calc((12px) / var(--tz,1));color:#8d97d8}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#070b1f;font-family:var(--disp);font-size:calc((20px) / var(--tz,1));color:#9aa6e8;z-index:100}
#flashLayer{position:fixed;inset:0;pointer-events:none;background:#fff;opacity:0}
#danger{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(255,40,40,0) 52%,rgba(255,40,40,.42) 82%,rgba(255,30,30,.75) 100%)}
#hud:not(.on) #bHudMenu{pointer-events:none}
#hud.mini #styleBox,#hud.mini #streakBox,#hud.mini #streakCall,#hud.mini #hearts,#hud.mini #scoreNum{display:none}
#ctrlBoard{position:fixed;left:22px;bottom:22px;width:min(330px,calc(var(--vw,100vw) * .28));pointer-events:none;line-height:0;filter:drop-shadow(0 8px 0 rgba(10,8,30,.55))}
#bHudMenu{pointer-events:auto;display:flex;align-items:center;gap:10px;margin:0 0 10px 0;padding:8px 10px 8px 12px;min-height:44px;background:rgba(16,20,56,.72);border:2px solid rgba(255,255,255,.22);border-radius:10px;color:#fff;font-family:var(--disp);font-size:calc((18px) / var(--tz,1));letter-spacing:.03em;cursor:pointer;box-shadow:0 3px 0 rgba(8,10,30,.55);transition:background .15s,border-color .15s}
#bHudMenu .hb{display:flex;flex-direction:column;gap:4px}#bHudMenu .hb b{display:block;width:20px;height:4px;border-radius:1px;background:#fff;box-shadow:0 1px 0 var(--ink)}
#bHudMenu kbd{font-family:var(--body);font-weight:800;font-size:calc((12px) / var(--tz,1));line-height:1;color:#141a44;background:#e8ecf8;border-radius:4px;padding:4px 6px 3px;box-shadow:0 2px 0 #8a94c8}
#bHudMenu:hover{background:rgba(40,50,120,.85);border-color:rgba(255,210,63,.7)}
/* ================================================================ UI SYSTEM — "KICK PUNK"
   Hard-edged and loud like a sports poster, clean as a broadcast graphic: solid ink plates, paper-white borders, one
   signal red, gold for stars. Buttons, tabs and menu plates lean forward; cards stand upright in a white frame, their
   picture in its own window and their words on their own plate, never one over the other. Screens change behind a
   stepped wipe (its edge is made of blocks, like the game); things slam in from the side and settle hard.
   Everything is laid out on a 1280 x 720 board and scaled to the window by --uis. */
:root{--uis:1;--k:#0d0f22;--k2:#171b38;--k3:#232a52;--w:#f6f3ec;--r:#ff4a1c;--r2:#a8230a;--y:#ffd23f;--mute:#9aa2cc;--line:rgba(246,243,236,.16);
  --ease:cubic-bezier(.16,1,.3,1);--snap:cubic-bezier(.2,.9,.1,1);--sk:-12deg;--sh:6px 6px 0 rgba(0,0,0,.55)}
.screen img:not([src]){visibility:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:inherit;cursor:inherit;outline:none}
kbd{display:inline-flex;align-items:center;height:22px;padding:0 6px;font-family:var(--body);font-weight:700;font-size:calc((13px) / var(--tz,1));letter-spacing:.06em;line-height:1;color:var(--k);background:var(--w);text-shadow:none}
.mic{display:block;font-family:var(--body);font-style:normal;font-weight:700;font-size:calc((13px) / var(--tz,1));letter-spacing:.28em;text-transform:uppercase;line-height:1;color:var(--mute)}
.mic.r{color:var(--r)}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;zoom:var(--uis)}
.screen.dim{background:rgba(6,7,18,.7)}
.screen.blur{-webkit-backdrop-filter:blur(6px) saturate(.7);backdrop-filter:blur(6px) saturate(.7)}
.screen.page{flex-direction:column;align-items:stretch;justify-content:flex-start;overflow:hidden;
  background:repeating-linear-gradient(-62deg,rgba(246,243,236,.026) 0 2px,transparent 2px 20px),rgba(10,11,26,.91)}
/* the red slab under the title, and the page's name written huge and faint across the bottom */
.screen.page::before{content:'';position:absolute;left:-70px;top:-10px;width:var(--bandW,590px);height:104px;background:var(--r);transform:skewX(-30deg);transform-origin:left top;box-shadow:10px 10px 0 rgba(0,0,0,.4)}
.screen.page::after{content:attr(data-wm);position:absolute;right:-12px;bottom:-40px;font-family:'Bungee';font-size:calc((200px) / var(--tz,1));line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:2px rgba(246,243,236,.045);pointer-events:none}
.screen.page>*{position:relative;z-index:1}

/* the wipe between screens: two bands with a stepped edge sweep off to the right */
#wipe{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden;visibility:hidden}
#wipe i{position:absolute;left:0;top:0;width:calc(var(--vw,100vw) * 1.5);height:100%;transform:translateX(-33.4%);
  clip-path:polygon(33.4% 0,100% 0,100% 100%,0 100%,0 87.5%,4.2% 87.5%,4.2% 75%,8.4% 75%,8.4% 62.5%,12.6% 62.5%,12.6% 50%,16.8% 50%,16.8% 37.5%,21% 37.5%,21% 25%,25.2% 25%,25.2% 12.5%,29.4% 12.5%,29.4% 0)}
#wipe i:nth-child(1){background:var(--r)}
#wipe i:nth-child(2){background:#0b0c1c}
#wipe.go{visibility:visible}
#wipe.go i:nth-child(2){animation:wipeOut .44s cubic-bezier(.7,0,.25,1) forwards}
#wipe.go i:nth-child(1){animation:wipeOut .44s cubic-bezier(.7,0,.25,1) .08s forwards}
@keyframes wipeOut{from{transform:translateX(-33.4%)}to{transform:translateX(67%)}}

/* things arriving: a slam from the side; a tile stamped down; a panel cut open */
.screen:not(.hidden) .tbar .back{animation:slamL .36s var(--snap) backwards .12s}
.screen:not(.hidden) .ttl .mic{animation:slamL .36s var(--snap) backwards .16s}
.screen:not(.hidden) .rt span{animation:tileIn .3s var(--snap) backwards;animation-delay:calc(.16s + var(--j,0) * 45ms)}
.screen:not(.hidden) .tbR{animation:slamR .36s var(--snap) backwards .18s}
.screen:not(.hidden) .it{animation:cardIn .38s var(--snap) backwards;animation-delay:calc(.2s + var(--i,0) * 32ms)}
.screen:not(.hidden) .detail{animation:cutIn .46s var(--snap) backwards .16s}
@keyframes slamL{from{opacity:0;translate:-60px 0}}
@keyframes slamR{from{opacity:0;translate:60px 0}}
@keyframes tileIn{from{opacity:0;transform:rotate(calc(var(--rr) - 24deg)) scale(1.9) translateY(-8px)}}
@keyframes cardIn{from{opacity:0;transform:translateX(44px) skewX(-6deg);clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes cutIn{from{clip-path:inset(0 100% 0 0);transform:translateX(-20px)}to{clip-path:inset(0 0 0 0)}}
@keyframes rise{from{opacity:0;translate:-16px 0}to{opacity:1;translate:0 0}}

/* ---------- the top bar of a page ---------- */
.tbar{flex:none;display:flex;align-items:center;gap:22px;height:96px;padding:0 34px 4px;margin-bottom:10px}
.back{display:flex;align-items:center;gap:6px;height:44px;padding:0 18px 0 12px;background:var(--k);color:var(--w);font-family:var(--disp);font-size:calc((15px) / var(--tz,1));transform:skewX(var(--sk));box-shadow:4px 4px 0 rgba(0,0,0,.35);transition:background .1s,color .1s,transform .14s var(--snap)}
.back svg{width:22px;height:22px}
.back:hover,.back.kf{background:var(--w);color:var(--k);transform:skewX(var(--sk)) translateX(-4px)}
.ttl{display:flex;flex-direction:column;gap:7px}
.ttl .mic{color:var(--k);letter-spacing:.32em}
.rt{display:flex;align-items:center;gap:2px;font-weight:400}
.rt span{display:inline-block;font-family:var(--disp);font-size:calc((calc(var(--fs,34px) * var(--fit,1))) / var(--tz,1));line-height:1;padding:5px 7px 3px;transform:rotate(var(--rr,0deg)) translateY(var(--ty,0));box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.rt .c0{background:var(--w);color:var(--k)}.rt .c1{background:var(--k);color:var(--w)}.rt .c2{background:var(--k);color:var(--y)}
.rt .gap{width:8px;padding:0;background:none;box-shadow:none}
.tbar .tbR{margin-left:auto;display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;background:var(--k);border:2px solid var(--line);transform:skewX(var(--sk));font-family:var(--disp);font-size:calc((18px) / var(--tz,1));color:var(--w);white-space:nowrap}
.pill img{width:22px;height:22px}
.pill.gold{color:var(--y)}
/* tabs: a row of leaning plates; the chosen one red */
.seg{display:flex;gap:6px}
.seg button{display:flex;align-items:center;gap:9px;height:42px;padding:0 18px;background:var(--k);border:2px solid var(--line);transform:skewX(var(--sk));font-family:var(--disp);font-size:calc((15px) / var(--tz,1));color:var(--w);white-space:nowrap;transition:background .1s,border-color .1s,transform .14s var(--snap)}
.seg button small{font-family:var(--body);font-weight:700;font-size:calc((14px) / var(--tz,1));letter-spacing:.06em;color:var(--mute)}
.seg button:hover,.seg button.kf{border-color:var(--w);transform:skewX(var(--sk)) translateY(-2px)}
.seg button.on{background:var(--r);border-color:var(--r);color:#fff}
.seg button.on small{color:rgba(255,255,255,.8)}
/* the page body under the bar */
.body{flex:1;min-height:0;width:100%;max-width:1280px;margin:0 auto;display:flex;gap:26px;padding:0 34px 24px}
.body.col{flex-direction:column;align-items:center}
.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px}
.scroll{overflow-y:auto;overflow-x:hidden;padding:4px 14px 10px 4px;margin:-4px -14px -10px -4px}

/* ---------- buttons: leaning plates ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 30px;font-family:var(--disp);font-weight:400;font-size:calc((20px) / var(--tz,1));line-height:1;color:#fff;white-space:nowrap;
  background:var(--r);border:3px solid var(--r);transform:skewX(var(--sk));box-shadow:5px 5px 0 rgba(0,0,0,.6);transition:transform .14s var(--snap),box-shadow .14s var(--snap),background .1s,color .1s,border-color .1s}
.btn:hover,.btn.kf{background:var(--w);border-color:var(--w);color:var(--k);transform:skewX(var(--sk)) translate(-3px,-3px);box-shadow:8px 8px 0 var(--r)}
.btn:active{transform:skewX(var(--sk)) translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.6)}
.btn.alt{background:var(--k);border-color:var(--w);color:var(--w)}
.btn.alt:hover,.btn.alt.kf{background:var(--w);color:var(--k)}
.btn.go{background:#2fd27a;border-color:#2fd27a;color:var(--k)}
.btn.sm{min-height:42px;padding:0 18px;font-size:calc((15px) / var(--tz,1))}
.btn.lg{min-height:64px;padding:0 44px;font-size:calc((28px) / var(--tz,1))}
.btn.wide{display:flex;width:100%}
.btn:disabled{background:var(--k3);border-color:var(--k3);color:#6c7298;box-shadow:none;transform:skewX(var(--sk))}
.btn svg{width:22px;height:22px}
.btn:hover kbd,.btn.kf kbd{background:var(--k);color:var(--w)}
.ib{display:grid;place-items:center;width:48px;height:48px;background:var(--k);border:2px solid var(--w);color:var(--w);box-shadow:4px 4px 0 rgba(0,0,0,.45);transition:background .1s,color .1s,transform .14s var(--snap)}
.ib svg{width:24px;height:24px}
.ib.txt{width:auto;grid-auto-flow:column;gap:8px;padding:0 14px;font-family:var(--disp);font-size:calc((15px) / var(--tz,1))}
.ib.txt svg{width:20px;height:20px}
.ib:hover,.ib.kf{background:var(--r);border-color:var(--r);color:#fff;transform:translate(-2px,-2px)}

/* ---------- cards: a white frame, the picture in its window, the words on their plate ---------- */
.cx{position:relative;display:flex;flex-direction:column;background:var(--k);border:3px solid var(--w);box-shadow:var(--sh);transition:transform .14s var(--snap),box-shadow .14s var(--snap),border-color .1s}
.cx .art{position:relative;flex:none;width:100%;overflow:hidden;background:var(--k2);border-bottom:3px solid var(--w)}
.cx .art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.cx .pl{flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--k);color:var(--w);transition:background .1s}
.cx:hover,.cx.kf{transform:translate(-3px,-3px);box-shadow:9px 9px 0 rgba(0,0,0,.6)}
.cx:hover .art>img,.cx.kf .art>img{transform:scale(1.06)}
.cx.sel{border-color:var(--r);transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--r2)}
.cx.sel .art{border-bottom-color:var(--r)}
.cx.sel .pl{background:var(--r)}
.cx.lock{border-color:#4c5278}
.cx.lock .art{border-bottom-color:#4c5278}
.cx.lock .art>img{filter:grayscale(1) brightness(.32)}
.cx.lock .pl{color:#8a90b4}
.cx.lock.sel{border-color:var(--r)}.cx.lock.sel .pl{background:#5c2414;color:#ffd6c8}
.st3{display:flex;gap:1px;flex:none}
.st3 img{width:20px;height:20px}
.st3 img.off{filter:grayscale(1) brightness(.4)}
.lkI{width:24px;height:24px;flex:none;opacity:.85}
.nm{min-width:0;font-family:var(--body);font-weight:700;font-size:calc((18px) / var(--tz,1));letter-spacing:.05em;line-height:1.1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;transform:skewX(var(--sk));font-family:var(--body);font-weight:700;font-size:calc((13px) / var(--tz,1));letter-spacing:.16em;color:var(--k);background:#aab6ff;white-space:nowrap}
.tag.boss{background:#ff6aa8}.tag.run{background:#5ff0d2}.tag.special{background:var(--y)}.tag.waves{background:#aab6ff}
.ty{display:block;font-family:var(--body);font-style:normal;font-weight:700;font-size:calc((12px) / var(--tz,1));letter-spacing:.22em;line-height:1;margin-bottom:5px;color:#aab6ff}
.ty.boss{color:#ff6aa8}.ty.run{color:#5ff0d2}.ty.special{color:var(--y)}
.cx.sel .ty{color:#fff}

/* ---------- objectives: a star and what it asks, ruled like a form ---------- */
.goals{display:flex;flex-direction:column;text-align:left}
.goal{display:flex;align-items:center;gap:11px;min-height:40px;padding:6px 2px;border-bottom:1px solid var(--line);font-family:var(--body);font-weight:700;font-size:calc((17px) / var(--tz,1));line-height:1.15;color:var(--mute)}
.goal img{width:22px;height:22px;flex:none;filter:grayscale(1) brightness(.5)}
.goal.got{color:var(--w)}.goal.got img{filter:none}
.detail .goal{min-height:37px;padding:5px 2px}

/* ---------- the side panel with the chosen thing's details ---------- */
.detail{flex:none;width:372px;display:flex;flex-direction:column;background:var(--k);border:3px solid var(--w);box-shadow:8px 8px 0 rgba(0,0,0,.55)}
.detail .art{position:relative;flex:none;aspect-ratio:360/211;overflow:hidden;border-bottom:3px solid var(--w);background:var(--k2)}
.detail .art img{display:block;width:100%;height:100%;object-fit:cover}
.detail .art::after{content:'';position:absolute;inset:0;background:var(--r);transform:translateX(-101%);pointer-events:none}
.detail.swap .art::after{animation:sweep .34s var(--snap)}
@keyframes sweep{0%{transform:translateX(-101%)}45%{transform:none}100%{transform:translateX(101%)}}
.detail.locked .art img{filter:grayscale(1) brightness(.32)}
.detail .inf{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;padding:15px 20px 12px;overflow:hidden}
.detail.swap .inf>*{animation:rise .3s var(--snap) backwards}
.detail.swap .inf>:nth-child(2){animation-delay:.03s}.detail.swap .inf>:nth-child(3){animation-delay:.06s}.detail.swap .inf>:nth-child(4){animation-delay:.09s}.detail.swap .inf>:nth-child(5){animation-delay:.12s}
.detail .hd{display:flex;align-items:center;gap:10px}
.detail h2{font-family:var(--disp);font-weight:400;font-size:calc((28px) / var(--tz,1));line-height:1.06;color:var(--w);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail .row{display:flex;align-items:center;gap:12px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.detail .best{margin-left:auto;display:flex;align-items:baseline;gap:8px;font-family:var(--disp);font-size:calc((18px) / var(--tz,1));color:var(--y)}
.detail .best .mic{font-size:calc((12px) / var(--tz,1))}
.detail .lockMsg{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-family:var(--body);font-weight:700;font-size:calc((17px) / var(--tz,1));color:var(--w)}
.detail .lockMsg canvas{width:30px;height:30px;flex:none}
/* (the button is pinned to the foot of the panel, outside what the panel says: a longer name or a goal on two lines never moves it) */
.detail>.push{flex:none;width:auto;margin:0 20px 20px}
.detail.swap>.push{animation:rise .3s var(--snap) backwards .12s}
.rewRow{display:flex;gap:16px}.rewRow .rew{flex:1;min-width:0}
.rew{display:flex;align-items:center;gap:10px}
.rw{position:relative;width:44px;height:56px;flex:none;border:2px solid var(--w);overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,var(--cc,#3a4593),#14183a)}
.rw img{width:88%;height:88%;object-fit:contain}
.rw.q{background:repeating-linear-gradient(-45deg,#262c58 0 6px,#1b2046 6px 12px);border-color:#5a6090}
.rw.q b{font-family:var(--disp);font-weight:400;font-size:calc((20px) / var(--tz,1));color:#7a82b8}
.rw.sk{width:56px;background:radial-gradient(ellipse at 50% 60%,var(--cc,#3a4593),#14183a 80%)}
.rw.sk img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.rw.sk.q img{filter:brightness(0) opacity(.5)}
.rew .rtx{min-width:0;font-family:var(--body);font-weight:700;font-size:calc((12px) / var(--tz,1));letter-spacing:.2em;line-height:1.2;color:var(--mute);text-transform:uppercase}
.rew .rtx b{display:block;margin-top:3px;font-family:var(--body);font-weight:700;font-size:calc((17px) / var(--tz,1));letter-spacing:.04em;color:var(--w);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- HOME ---------- */
#scrTitle{justify-content:flex-end;padding-right:58px}
#homeCol{width:520px;display:flex;flex-direction:column;align-items:flex-end;padding-top:62px}
#logo{align-self:center;text-align:center;font-family:'Bungee';font-size:calc((72px) / var(--tz,1));line-height:.9;color:#fff;transform:skewX(-9deg) rotate(-4deg);
  text-shadow:0 1px 0 #ffd9b8,2px 2px 0 var(--orange),4px 4px 0 var(--orange),6px 6px 0 #d94a0a,8px 8px 0 #b83a05,10px 10px 0 var(--ink),12px 12px 0 var(--ink),14px 14px 18px rgba(0,0,0,.45)}
#logo span{display:block;color:var(--gold)}
#tagline{align-self:center;margin:16px 0 16px;padding:6px 14px 5px;background:var(--k);transform:skewX(var(--sk));font-family:var(--body);font-weight:700;font-size:calc((14px) / var(--tz,1));letter-spacing:.24em;color:var(--w);white-space:nowrap}
.screen:not(.hidden) #logo{animation:logoIn .5s var(--snap) backwards}
.screen:not(.hidden) #tagline{animation:slamR .4s var(--snap) backwards .12s}
@keyframes logoIn{from{opacity:0;transform:skewX(-9deg) rotate(-14deg) scale(1.6)}}
#homeMenu{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
/* a menu plate: ink with a white edge, leaning; the chosen one turns paper-white with a torn red flag behind it */
.hm{position:relative;display:flex;align-items:stretch;width:452px;height:70px;transform:skewX(-10deg);margin-right:calc(var(--i) * 13px);color:var(--w);transition:transform .14s var(--snap),color .08s}
.hm::before{content:'';position:absolute;left:-18px;right:-12px;top:-9px;bottom:-9px;background:var(--r);clip-path:polygon(0 22%,96% 0,100% 72%,3% 100%);transform:scaleX(0);transform-origin:left center;transition:transform .16s var(--snap)}
.hm .bg{position:absolute;inset:0;background:var(--k);border:3px solid var(--w);box-shadow:6px 6px 0 rgba(0,0,0,.5);transition:background .08s}
.hm .tx{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 16px 0 22px}
.hm .ix{font-family:var(--body);font-style:normal;font-weight:700;font-size:calc((12px) / var(--tz,1));letter-spacing:.26em;line-height:1;color:var(--r)}
.hm b{font-family:var(--disp);font-weight:400;font-size:calc((24px) / var(--tz,1));line-height:1;white-space:nowrap}
.hm small{font-family:var(--body);font-weight:700;font-size:calc((15px) / var(--tz,1));letter-spacing:.08em;line-height:1;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.hm .th{position:relative;flex:none;width:150px;margin:3px 3px 3px 0;overflow:hidden;border-left:3px solid var(--w);background:var(--k2)}
.hm .th img{position:absolute;left:-12%;top:0;width:124%;height:100%;object-fit:cover;transform:skewX(10deg);transition:transform .35s var(--ease)}
.hm:hover,.hm.kf{transform:skewX(-10deg) translateX(-14px);color:var(--k)}
.hm:hover::before,.hm.kf::before{transform:scaleX(1)}
.hm:hover .bg,.hm.kf .bg{background:var(--w)}
.hm:hover small,.hm.kf small{color:#4a4f70}
.hm:hover .th img,.hm.kf .th img{transform:skewX(10deg) scale(1.08)}
.hm:active{transform:skewX(-10deg) translateX(-10px) scale(.98)}
.hm.hero{height:104px;width:486px}
.hm.hero .bg{background:var(--r)}
.hm.hero .ix{color:#fff;opacity:.85}
.hm.hero b{font-size:calc((44px) / var(--tz,1))}
.hm.hero small{color:#fff;font-size:calc((17px) / var(--tz,1))}
.hm.hero .th{width:176px}
.hm.hero .pI{position:relative;flex:none;width:62px;display:grid;place-items:center;margin:3px 3px 3px 0;background:var(--k);color:var(--w);border-left:3px solid var(--w)}
.hm.hero .pI svg{width:30px;height:30px;transform:skewX(10deg)}
.hm.hero:hover::before,.hm.hero.kf::before{background:var(--k)}
.hm.hero:hover .ix,.hm.hero.kf .ix{color:var(--r);opacity:1}
.hm.hero:hover small,.hm.hero.kf small{color:var(--k)}
.hm.hero:hover .pI,.hm.hero.kf .pI{background:var(--r)}
.screen:not(.hidden) .hm{animation:hmIn .42s var(--snap) backwards;animation-delay:calc(.14s + var(--i) * 55ms)}
@keyframes hmIn{from{opacity:0;transform:skewX(-10deg) translateX(140px)}}
.dot{position:absolute;right:-8px;top:-8px;z-index:2;width:18px;height:18px;background:var(--r);border:3px solid var(--w);display:none;transform:skewX(10deg) rotate(45deg);animation:dotP 1.2s steps(2) infinite}
.dot.on{display:block}
@keyframes dotP{50%{background:var(--y)}}
#homeUtil{position:absolute;right:calc(30px + var(--sar) / var(--uis));top:calc(24px + var(--sat) / var(--uis));display:flex;gap:10px}
#ctrlBoard{position:fixed;left:22px;bottom:22px;width:330px;pointer-events:none;line-height:0;filter:drop-shadow(0 8px 0 rgba(10,8,30,.55))}

/* ---------- LEVELS ---------- */
#chTabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;flex:none;padding:0 6px;margin-top:4px}
.ch{position:relative;height:60px;padding:9px 10px 0 16px;background:var(--k);border:2px solid var(--line);transform:skewX(var(--sk));color:var(--w);transition:background .1s,border-color .1s,transform .14s var(--snap)}
.ch::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--cc)}
.ch .mic{font-size:calc((11px) / var(--tz,1));letter-spacing:.2em;color:var(--mute)}
.ch b{display:block;margin-top:6px;font-family:var(--disp);font-weight:400;font-size:calc((13px) / var(--tz,1));line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch small{position:absolute;right:9px;top:7px;display:flex;align-items:center;gap:3px;font-family:var(--body);font-weight:700;font-size:calc((13px) / var(--tz,1));color:var(--y)}
.ch small img{width:13px;height:13px}
.ch small canvas{width:16px;height:16px;opacity:.7}
.ch:hover,.ch.kf{border-color:var(--w);transform:skewX(var(--sk)) translateY(-2px)}
.ch.on{background:var(--r);border-color:var(--r)}
.ch.on::before{background:var(--w)}
.ch.on .mic{color:rgba(255,255,255,.75)}.ch.on small{color:#fff}
.ch.lock b{color:#7a80a8}
#levelGrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:18px 20px}
.lv{min-height:0}.lv .art{flex:1;min-height:0}
.lv .pl{height:58px;gap:12px}
.lv .no{flex:none;min-width:38px;font-family:var(--disp);font-weight:400;font-size:calc((30px) / var(--tz,1));line-height:1;color:var(--w);text-align:center}
.lv .tx{flex:1;min-width:0}
.lv.cur .no{color:var(--y)}
.lv.cur.sel .no{color:#fff}
.lv .new{flex:none;height:22px;padding:0 8px;display:flex;align-items:center;background:var(--y);color:var(--k);font-family:var(--body);font-weight:700;font-size:calc((12px) / var(--tz,1));letter-spacing:.18em;transform:skewX(var(--sk))}
.lv.sum{padding:16px 18px;justify-content:space-between;background:repeating-linear-gradient(-45deg,rgba(255,74,28,.12) 0 10px,transparent 10px 20px),var(--k)}
.lv.sum:hover{transform:none;box-shadow:var(--sh)}
.sum h3{margin-top:8px;font-family:var(--disp);font-weight:400;font-size:calc((24px) / var(--tz,1));line-height:1.05;color:var(--w)}
.sum .blocks{display:grid;grid-template-columns:repeat(15,1fr);gap:3px;margin:12px 0 7px}
.sum .blocks i{height:12px;background:var(--k3)}
.sum .blocks i.on{background:var(--y)}
.sum .sct{font-family:var(--disp);font-size:calc((16px) / var(--tz,1));color:var(--y)}
.sum .rews{display:flex;gap:8px;flex-wrap:wrap}
.sum .rw{width:38px;height:48px}.sum .rw.sk{width:48px}

/* ---------- MINI-GAMES ---------- */
#miniGrid{display:flex;flex-direction:column;gap:8px}
.sec{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 16px}
.sech{display:flex;align-items:center;gap:12px;margin:2px 0 0}
.sech::after{content:'';flex:1;height:2px;background:var(--line)}
.mg .art{flex:none;aspect-ratio:360/211}
.mg .pl{height:38px;gap:6px;padding:0 10px}
.mg .nm{flex:1;font-size:calc((14px) / var(--tz,1));letter-spacing:.03em}
/* the stars sit on a tab fixed to the picture's corner, framed like the card */
.mg .stb{position:absolute;right:0;bottom:0;display:flex;gap:1px;padding:4px 6px 3px 7px;background:var(--k);border-top:3px solid var(--w);border-left:3px solid var(--w)}
.mg .stb img{width:15px;height:15px}.mg .stb img.off{filter:grayscale(1) brightness(.4)}
.mg.sel .stb{border-color:var(--r)}

/* ---------- COLLECTION ---------- */
#colBody{position:relative}
.pane{flex:1;min-width:0;display:flex;flex-direction:column;background:rgba(13,15,34,.8);border:3px solid var(--w);box-shadow:8px 8px 0 rgba(0,0,0,.5);padding:18px 12px 18px 20px}
.pane .grid{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:grid;align-content:start;gap:18px 16px;padding:4px 14px 10px 4px}
#movesGrid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
#cardsGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
#beastGrid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr))}
#sgGrid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:16px 14px}
#scrCol.fit #colSkins{flex:none;width:604px;margin-left:auto}
#skinInfo{display:none}
/* (a fixed block laid from its top: the label and the name keep their place from look to look, whatever comes under them) */
#scrCol.fit #skinInfo{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;position:absolute;left:calc(40px + var(--sal) / var(--uis));bottom:calc(36px + var(--sab) / var(--uis));width:540px;height:236px;pointer-events:none}
#skinRole{padding:5px 12px 4px;background:var(--k);transform:skewX(var(--sk));font-family:var(--body);font-weight:700;font-size:calc((15px) / var(--tz,1));letter-spacing:.28em;color:var(--r)}
#skinRole{height:27px;line-height:18px}#skinRole:empty{visibility:hidden}
#skinName{max-width:100%;margin:8px 0 12px;padding:6px 18px 4px;background:var(--r);transform:skewX(var(--sk));box-shadow:7px 7px 0 var(--k);font-family:'Bungee';font-size:calc((48px) / var(--tz,1));line-height:1;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#skinLock{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;background:var(--k);border:2px solid var(--w);transform:skewX(var(--sk));font-family:var(--body);font-weight:700;font-size:calc((16px) / var(--tz,1));letter-spacing:.1em;color:var(--w)}
#skinLock svg{width:20px;height:20px;color:#5ff09a}
#skinLock canvas{width:22px;height:22px}
#skinLock.lock{border-color:var(--line);color:var(--mute)}
.screen:not(.hidden) #skinInfo>*{animation:slamL .4s var(--snap) backwards}
.sg .art{flex:none;aspect-ratio:1;background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--sc) 60%,#20264a),#14183a 75%)}
.sg .art>img{object-fit:cover;object-position:50% 4%;height:118%}
.sg .pl{height:32px;justify-content:center;padding:0 6px}
.sg .nm{font-family:var(--disp);font-size:calc((11px) / var(--tz,1));letter-spacing:.02em}
.sg.lock .art>img{filter:brightness(0) opacity(.45)}
.sg .lkI{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px}
.sg.on{border-color:var(--y)}
.sg.on .art{border-bottom-color:var(--y)}
.sg.on .pl{background:var(--y);color:var(--k)}
.sg.on::after{content:'';position:absolute;right:-10px;top:-10px;width:26px;height:26px;border:3px solid var(--k);background:var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%230d0f22' stroke-width='3.6' stroke-linecap='square'/%3E%3C/svg%3E") center/16px no-repeat}
.sg.pv{border-color:var(--r)}.sg.pv .art{border-bottom-color:var(--r)}.sg.pv .pl{background:var(--r);color:#fff}
.mv .art,.bc .art{flex:none;aspect-ratio:1.35;background:radial-gradient(ellipse at 50% 60%,#2c3577,#14183a 72%)}
.bc .art{aspect-ratio:1}
.mv .art>img,.bc .art>img{object-fit:contain}
.mv .pl,.bc .pl{flex:auto;flex-direction:column;align-items:flex-start;gap:5px;padding:10px 12px 12px}
.mv h3,.bc b{font-family:var(--disp);font-weight:400;font-size:calc((15px) / var(--tz,1));line-height:1.1;color:var(--w)}
.mv p,.bc span{font-family:var(--body);font-weight:700;font-size:calc((15px) / var(--tz,1));line-height:1.25;color:var(--mute)}
.mv .cnt{position:absolute;right:8px;top:8px;z-index:1;padding:3px 7px;background:var(--k);border:2px solid var(--y);font-family:var(--disp);font-size:calc((13px) / var(--tz,1));color:var(--y)}
.mv.lock .art>img{opacity:.7}
.bc.lock .art>img{filter:brightness(0) opacity(.45)}
.bc.lock b{color:#6a70a0}
.mv:hover,.bc:hover{transform:none;box-shadow:var(--sh)}
.mv:hover .art>img,.bc:hover .art>img{transform:none}
.cc .cb span{font-size:calc((13px) / var(--tz,1))}

/* ---------- PAUSE: a slanted stack of choices on the left, where you are on the right ---------- */
#scrPause{justify-content:space-between;padding:0 86px 0 96px}
#pauseL{display:flex;flex-direction:column;align-items:flex-start;gap:30px}
#pauseL .rt{--fs:52px}
#pauseMenu{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pm{position:relative;display:flex;align-items:center;gap:14px;height:58px;min-width:330px;padding:0 30px;margin-left:calc(56px - var(--i) * 14px);transform:skewX(-10deg);color:var(--w);transition:transform .14s var(--snap),color .08s}
.pm::before{content:'';position:absolute;left:-16px;right:-14px;top:-8px;bottom:-8px;background:var(--r);clip-path:polygon(0 24%,97% 0,100% 76%,2% 100%);transform:scaleX(0);transform-origin:left center;transition:transform .16s var(--snap)}
.pm .bg{position:absolute;inset:0;background:var(--k);border:3px solid var(--w);box-shadow:6px 6px 0 rgba(0,0,0,.5);transition:background .08s}
.pm b{position:relative;font-family:var(--disp);font-weight:400;font-size:calc((26px) / var(--tz,1));line-height:1}
.pm kbd{position:relative;margin-left:auto}
.pm.pri{height:72px;min-width:380px}
.pm.pri .bg{background:var(--r)}
.pm.pri b{font-size:calc((34px) / var(--tz,1))}
.pm:hover,.pm.kf{transform:skewX(-10deg) translateX(16px);color:var(--k)}
.pm:hover::before,.pm.kf::before{transform:scaleX(1)}
.pm:hover .bg,.pm.kf .bg{background:var(--w)}
.pm.pri:hover::before,.pm.pri.kf::before{background:var(--k)}
.pm:hover kbd,.pm.kf kbd{background:var(--k);color:var(--w)}
.screen:not(.hidden) .pm{animation:pmIn .38s var(--snap) backwards;animation-delay:calc(.06s + var(--i) * 45ms)}
@keyframes pmIn{from{opacity:0;transform:skewX(-10deg) translateX(-120px)}}
#pauseR{width:430px;padding:24px 26px 22px;background:var(--k);border:3px solid var(--w);box-shadow:8px 8px 0 rgba(0,0,0,.5)}
.screen:not(.hidden) #pauseR{animation:cutIn .44s var(--snap) backwards .1s}
#pauseR h2{margin:10px 0 16px;font-family:var(--disp);font-weight:400;font-size:calc((34px) / var(--tz,1));line-height:1.05;color:var(--w)}
#pauseR h2 small{display:block;margin-top:8px;font-family:var(--body);font-weight:700;font-size:calc((19px) / var(--tz,1));letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
#pauseGoalsW{padding-top:14px;border-top:2px solid var(--line)}
#pauseGoalsW .goals{margin-top:6px}

/* ---------- RESULTS: one band across the screen ---------- */
.res{flex-direction:column;gap:30px}
.res .band{width:100%;padding:30px 0;background:var(--k);border-top:7px solid var(--r);border-bottom:3px solid var(--w);transform:skewY(-3deg);box-shadow:0 14px 0 rgba(0,0,0,.35)}
.res .bandIn{transform:skewY(3deg);width:min(1000px,92%);margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.screen:not(.hidden) .band{animation:bandIn .42s var(--snap) backwards}
@keyframes bandIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.res h2.big{margin:10px 0 2px;padding:7px 28px 3px;font-family:var(--disp);font-weight:400;font-size:calc((64px) / var(--tz,1));line-height:1;color:#fff;background:var(--r);transform:skewX(var(--sk)) rotate(-2deg);box-shadow:8px 8px 0 #000;white-space:nowrap}
.res h2.big.bad{background:var(--w);color:var(--r)}
.res h2.big.gold{background:var(--y);color:var(--k)}
.screen:not(.hidden) h2.big{animation:titleIn .46s var(--snap) backwards .16s}
@keyframes titleIn{from{opacity:0;transform:skewX(var(--sk)) rotate(-12deg) scale(1.9)}}
.res .actions{display:flex;justify-content:flex-end;gap:18px;width:min(1000px,92%);padding-right:12px}
.screen:not(.hidden) .actions{animation:slamR .4s var(--snap) backwards .3s}
/* the three stars of a result, stamped down one after another, each with what it was for */
.stars3{display:flex;justify-content:center;gap:26px;margin:22px 0 6px}
.s3{width:180px;display:flex;flex-direction:column;align-items:center;gap:10px}
.s3 img{width:88px;height:88px;opacity:0}
.s3:nth-child(2) img{width:104px;height:104px;margin-top:-12px}
.s3.show img{animation:stamp .4s var(--snap) forwards}
.s3.off img{filter:grayscale(1) brightness(.4)}
.s3 span{padding:5px 10px 4px;background:var(--k2);font-family:var(--body);font-weight:700;font-size:calc((15px) / var(--tz,1));line-height:1.2;color:var(--mute);opacity:0}
.s3.show span{animation:rise .3s var(--snap) .1s forwards}
.s3.got span{background:var(--w);color:var(--k)}
@keyframes stamp{0%{opacity:0;scale:2.4;rotate:-28deg}60%{opacity:1;scale:.92;rotate:4deg}100%{opacity:1;scale:1;rotate:0deg}}
.resRow{display:flex;align-items:stretch;justify-content:center;gap:12px;margin-top:20px}
.scoreP,.sp{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:8px 16px 8px 14px;background:var(--k2);border-left:5px solid var(--r);text-align:left}
.scoreP b{font-family:var(--disp);font-weight:400;font-size:calc((36px) / var(--tz,1));line-height:1;color:var(--y)}
.stats{display:flex;gap:12px}
.sp{border-left-color:var(--w)}
.sp b{font-family:var(--disp);font-weight:400;font-size:calc((22px) / var(--tz,1));line-height:1;color:var(--w)}
.resRow2{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;min-height:46px}
.resRow2:empty{display:none}
.badge{display:inline-flex;align-items:center;height:32px;padding:0 14px;background:var(--y);color:var(--k);transform:skewX(var(--sk)) rotate(-3deg);font-family:var(--disp);font-size:calc((15px) / var(--tz,1));box-shadow:4px 4px 0 #000;white-space:nowrap}
.badge:empty{display:none}
.screen:not(.hidden) .badge{animation:stamp .4s var(--snap) backwards 1.15s}
#winSkins{display:flex;align-items:center;gap:8px}
#winSkins.hidden{display:none}
#winSkins .mic{margin-right:6px}
#winSkins .sw{width:46px;height:46px;border:2px solid var(--w);overflow:hidden;background:radial-gradient(circle at 50% 70%,var(--sc),#14183a 80%);transition:transform .14s var(--snap)}
#winSkins .sw img{width:100%;height:150%;object-fit:cover;object-position:50% 6%}
#winSkins .sw:hover,#winSkins .sw.kf{transform:translate(-2px,-2px)}
#winSkins .sw.on{border:3px solid var(--y);box-shadow:4px 4px 0 var(--r)}
#overMoves{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:16px;max-height:70px;overflow:hidden}
#overMoves:empty{display:none}
#overMoves span{padding:5px 9px 4px;background:var(--k2);font-family:var(--disp);font-size:calc((12px) / var(--tz,1));color:var(--w)}
#overMoves span b{color:var(--y);font-weight:400;margin-left:5px}
#bRevive.hidden{display:none}
/* the revive: one of three equal choices on the knock-out screen - the same size as the others, in at the same moment */
#bRevive .rvH{display:flex;gap:2px;margin-left:2px}#bRevive .rvH img{width:20px;height:auto;image-rendering:pixelated}
#bRevive kbd{margin-left:4px}
#scrOver .actions{align-items:center}
#scrOver .btn.late{opacity:0;pointer-events:none}
#scrOver .btn{transition:transform .14s var(--snap),box-shadow .14s var(--snap),background .1s,color .1s,border-color .1s,opacity .4s}
.adI{width:30px;height:22px;border:3px solid var(--k);border-radius:3px;background:#fff;position:relative;flex:none}
.adI::after{content:'';position:absolute;left:9px;top:3px;border:6px solid transparent;border-left:9px solid var(--k)}
#mrScore{margin:16px 0 0;font-family:'Bungee';font-size:calc((88px) / var(--tz,1));line-height:1;color:var(--y);text-shadow:6px 6px 0 #000}
#vsRows{display:flex;flex-direction:column;gap:8px;width:min(780px,100%);margin-top:22px}
.vsR{display:flex;align-items:center;gap:14px;padding:8px 18px;background:var(--k2);border-left:12px solid var(--vc);opacity:0;transform:translateX(-40px);transition:all .3s var(--snap)}
.vsR.in{opacity:1;transform:none}
.vsR.first{background:linear-gradient(90deg,rgba(255,210,63,.28),var(--k2) 60%)}
.vsR .pl{font-family:'Bungee';font-weight:400;font-size:calc((30px) / var(--tz,1));width:36px;color:var(--vc)}
.vsR .face{width:46px;height:46px;object-fit:cover;object-position:50% 10%;border:2px solid var(--vc);background:#14183a}
.vsR .nm{flex:1;text-align:left;font-family:var(--disp);font-size:calc((18px) / var(--tz,1));text-transform:none}
.vsR .st{font-family:var(--disp);font-size:calc((22px) / var(--tz,1));min-width:64px}
.vsR .st small{display:block;font-size:calc((11px) / var(--tz,1));color:var(--mute)}

/* ---------- VERSUS setup ---------- */
#vsBox{gap:16px;overflow:hidden;padding-top:4px}
#vsBox>*{zoom:var(--vk,1)}
#vsSlots{display:flex;gap:18px;justify-content:center;width:100%;flex:none}
.vsS{position:relative;flex:1;max-width:260px;height:262px;min-width:0;justify-content:flex-start;background:var(--k);border:3px solid var(--w);box-shadow:var(--sh);padding:34px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .14s var(--snap),box-shadow .14s var(--snap),border-color .1s}
.vsS::before{content:'';position:absolute;left:0;right:0;top:0;height:26px;background:var(--vc)}
.vsS.sel{border-color:var(--r);transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--r2)}
.vsS .tag{position:absolute;left:10px;top:4px;height:auto;padding:0;background:none;transform:none;font-family:var(--disp);font-size:calc((15px) / var(--tz,1));letter-spacing:0;color:#fff;text-shadow:2px 2px 0 var(--k)}
.vsS .pic{width:100px;height:106px;border:2px solid var(--line);background:radial-gradient(ellipse at 50% 60%,#2c3577,#14183a 70%);display:flex;align-items:center;justify-content:center}
.vsS .pic img{width:100px;height:106px;object-fit:contain}
.vsS .pic i{font-family:'Bungee';font-style:normal;font-size:calc((60px) / var(--tz,1));color:#5a63a8}
.vsS .nm{font-family:var(--disp);font-size:calc((14px) / var(--tz,1));letter-spacing:0;color:#fff;text-align:center;white-space:normal;line-height:1.1;overflow:visible}
.vsS .nm small{display:block;font-family:var(--body);font-weight:700;font-size:calc((13px) / var(--tz,1));letter-spacing:.12em;color:var(--mute);margin-top:3px}
.vsS .nm{height:36px;width:100%;flex:none}.vsS .nm span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vsS .nm small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vsS .pic{flex:none}.vsS .cpu{height:58px;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.vsS .hd{position:absolute;right:6px;top:3px;height:20px;display:flex;align-items:center;gap:8px}.vsS .hd .vsX{position:static}
.vsS .hd .cols{display:flex;gap:5px;margin:0}.vsS .hd .sw{width:17px;height:17px;border-width:2px}.vsS .hd .sw.on{outline:2px solid var(--y);outline-offset:1px}
.compact .vsS .nm{height:30px}.compact .vsS .cpu{height:52px}
.vsM b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vsS .cols{display:flex;gap:8px;margin:2px 0 4px}
.vsS .sw{width:30px;height:30px;border:2px solid var(--w)}
.vsS .sw.on{outline:3px solid var(--y);outline-offset:2px}
.vsS .vlv{display:flex;gap:6px;align-items:center;justify-content:center}
.vsS .stp{display:grid;place-items:center;width:36px;height:34px;color:#fff;background:var(--k2);border:2px solid var(--w);transform:skewX(var(--sk))}
.vsS .stp svg{width:18px;height:18px}
.vsS .stp:hover,.vsS .stp.kf{background:var(--r);border-color:var(--r)}
.vsS .lvv{min-width:72px;text-align:center;font-family:var(--disp);font-weight:400;font-size:calc((20px) / var(--tz,1));color:#fff}
.vsS .lvv.max{color:#ff6a6a;font-size:calc((17px) / var(--tz,1))}
.vsS .lvl2{font-family:var(--body);font-weight:700;font-size:calc((13px) / var(--tz,1));color:var(--y);letter-spacing:.2em;margin-top:2px}
.vsS.off{background:rgba(13,15,34,.6);border-style:dashed;border-color:#5a6090;box-shadow:none;align-items:center;justify-content:center}
.vsS.off::before{background:#2c3266}
.vsAdd{width:72px;height:72px;background:var(--k2);border:3px solid var(--w);color:var(--w);font-family:'Bungee';font-size:calc((40px) / var(--tz,1));line-height:1;text-align:center;transform:skewX(var(--sk));transition:transform .14s var(--snap),background .1s}
.vsAdd:hover,.vsAdd.kf{background:var(--r);border-color:var(--r);transform:skewX(var(--sk)) scale(1.06)}
.vsX{position:absolute;right:8px;top:3px;width:22px;height:20px;color:#fff;font-size:calc((15px) / var(--tz,1));font-weight:900;text-align:center}
#vsGrid{display:grid;grid-template-columns:repeat(var(--cols,16),60px);grid-auto-rows:60px;gap:8px;justify-content:center;flex:none}
.vsT{position:relative;width:60px;height:60px;border:2px solid var(--w);overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#2c3577,#14183a 75%);transition:transform .12s var(--snap)}
.vsT img{position:absolute;left:50%;top:-6%;width:170%;transform:translateX(-50%);pointer-events:none}
.vsT i{font-family:'Bungee';font-style:normal;font-size:calc((32px) / var(--tz,1));color:#a8b2ee;line-height:56px;display:block;text-align:center}
.vsT:hover,.vsT.kf{transform:translate(-2px,-2px)}
.vsT.on{border:3px solid var(--vc);box-shadow:4px 4px 0 var(--vc)}
.vsT.lock{filter:brightness(.25) grayscale(1);border-color:#4c5278}
#vsMaps{display:flex;flex-wrap:nowrap;gap:10px;justify-content:center;width:100%;flex:none}
.vsM{position:relative;flex:0 1 118px;min-width:0;background:var(--k);border:2px solid var(--w);transition:transform .14s var(--snap),box-shadow .14s var(--snap)}
.vsM img{display:block;width:100%;height:66px;object-fit:cover;border-bottom:2px solid var(--w)}
.vsM b{display:block;font-family:var(--body);font-weight:700;font-size:calc((13px) / var(--tz,1));letter-spacing:.08em;text-align:center;padding:5px 0 4px;color:var(--w);text-transform:uppercase}
.vsM:hover,.vsM.kf{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(0,0,0,.6)}
.vsM.on{border-color:var(--r);box-shadow:5px 5px 0 var(--r2)}
.vsM.on img{border-bottom-color:var(--r)}.vsM.on b{background:var(--r)}
#vsFoot{display:flex;align-items:center;gap:30px;margin-top:4px}
#vsStocks{display:flex;align-items:center;gap:8px}
#vsStocks span{margin-right:6px;font-family:var(--body);font-weight:700;font-size:calc((14px) / var(--tz,1));letter-spacing:.24em;color:var(--mute)}
.chip{min-width:40px;height:40px;padding:0 6px;font-family:var(--disp);font-size:calc((16px) / var(--tz,1));color:var(--w);background:var(--k);border:2px solid var(--w);transform:skewX(var(--sk));text-align:center;transition:transform .12s var(--snap)}
.chip:hover,.chip.kf{transform:skewX(var(--sk)) translateY(-2px)}
.chip.on{background:var(--y);border-color:var(--y);color:var(--k)}

/* ---------- SETTINGS ---------- */
.sheet{width:min(800px,100%);flex:0 1 auto;min-height:0;overflow-y:auto;background:var(--k);border:3px solid var(--w);box-shadow:8px 8px 0 rgba(0,0,0,.5);padding:10px 26px 18px}
.screen:not(.hidden) .sheet{animation:cutIn .44s var(--snap) backwards .14s}
#setBasic,#setKeys{display:flex;flex-direction:column}
.setRow{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:62px;padding:6px 2px;border-bottom:1px solid var(--line)}
.setRow>b{font-family:var(--disp);font-weight:400;font-size:calc((16px) / var(--tz,1));color:var(--w);flex:1;text-shadow:none}
.setRow.keys>b{flex:1.4}
.setSl{display:flex;align-items:center;gap:16px}
.setSl input{-webkit-appearance:none;appearance:none;width:270px;height:14px;background:linear-gradient(90deg,var(--r) 0 var(--v,50%),var(--k3) var(--v,50%));border:2px solid var(--w);outline:none}
.setSl input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:30px;background:var(--w);border:3px solid var(--k);box-shadow:3px 3px 0 #000}
.setSl input::-moz-range-thumb{width:14px;height:26px;background:var(--w);border:3px solid var(--k);border-radius:0}
.setSl span{font-family:var(--disp);font-size:calc((16px) / var(--tz,1));color:var(--y);width:40px;text-align:right}
.tog{position:relative;width:66px;height:32px;background:var(--k3);border:2px solid var(--w);transform:skewX(var(--sk));transition:background .14s}
.tog::after{content:'';position:absolute;left:3px;top:3px;width:24px;height:22px;background:#8a90b4;transition:transform .18s var(--snap),background .14s}
.tog.on{background:var(--r)}.tog.on::after{transform:translateX(32px);background:#fff}
.tog:hover,.tog.kf{box-shadow:4px 4px 0 rgba(0,0,0,.6)}
.opt2{display:flex;gap:6px}
.opt2 button{height:36px;padding:0 16px;background:var(--k2);border:2px solid var(--line);transform:skewX(var(--sk));font-family:var(--disp);font-size:calc((14px) / var(--tz,1));color:var(--w)}
.opt2 button.on{background:var(--r);border-color:var(--r)}
.opt2 button:not(.on):hover,.opt2 button.kf{border-color:var(--w)}
.kcap{min-width:118px;height:38px;font-family:var(--disp);font-size:calc((14px) / var(--tz,1));color:var(--k);background:var(--w);border:2px solid var(--w);box-shadow:3px 3px 0 #000;padding:0 10px;text-align:center;transition:transform .12s var(--snap)}
.kcap:hover,.kcap.kf{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--r)}
.kcap.none{color:#7a80a8;background:var(--k2);border-color:var(--line);box-shadow:none}
.kcap.cap{background:var(--y);border-color:var(--y);animation:kblink .5s infinite alternate}
@keyframes kblink{to{filter:brightness(1.25)}}
.setHint{font-family:var(--body);font-weight:700;font-size:calc((15px) / var(--tz,1));letter-spacing:.06em;color:var(--mute);text-align:center;margin:14px 0 4px}
#setKeys .btn{align-self:center;margin-top:8px}

/* ---------- reward-card reveal ---------- */
#bCard{margin-top:18px;min-width:240px}
#cardKicker{margin-bottom:22px;padding:7px 18px 5px;background:var(--k);border-left:6px solid var(--r);transform:skewX(var(--sk));font-family:var(--disp);font-size:calc((22px) / var(--tz,1));letter-spacing:.02em;color:var(--y);text-shadow:none;box-shadow:6px 6px 0 rgba(0,0,0,.45)}
#cardNote{text-shadow:none}

/* ---------- scroll bars: a dark groove and a red bar; nothing sideways ---------- */
.screen ::-webkit-scrollbar{width:10px;height:0}
.screen ::-webkit-scrollbar-track{background:rgba(246,243,236,.06)}
.screen ::-webkit-scrollbar-thumb{background:var(--r);min-height:40px}
.screen ::-webkit-scrollbar-thumb:hover{background:#ff7a50}
.screen ::-webkit-scrollbar-corner{background:transparent}
.screen *{scrollbar-width:thin;scrollbar-color:var(--r) rgba(246,243,236,.06)}

/* ---------- the HUD: the same plates, the same scale ---------- */
#hudTL,#hudTC,#hudTR,#styleBox,#streakBox,#pctBar,#toasts,#goRight{zoom:var(--uis)}
/* the shouts over the play follow the picture's scale, not the menus' (on a phone the menus are set larger) */
#streakCall{zoom:var(--uip,1)}
#bHudMenu{border-radius:0;background:var(--k);border:2px solid var(--w);transform:skewX(var(--sk));box-shadow:4px 4px 0 rgba(0,0,0,.45);transition:background .1s,color .1s}
#bHudMenu:hover{background:var(--r);border-color:var(--r)}
#bHudMenu kbd{border-radius:0;box-shadow:none}
#toasts{top:118px;gap:8px}
.toast{gap:10px;padding:5px 18px 5px 6px;border:0;border-radius:0;background:var(--k);border-left:6px solid var(--r);box-shadow:5px 5px 0 rgba(0,0,0,.5);transform:skewX(var(--sk));animation:tin .32s var(--snap),tout .3s 2.4s forwards}
.toast img{width:42px;height:42px;border-radius:0;background:var(--k2)}
.toast small{font-family:var(--body);font-weight:700;font-size:calc((11px) / var(--tz,1));letter-spacing:.24em;color:var(--r)}
.toast b{font-size:calc((17px) / var(--tz,1));color:var(--w)}
.toast.gone{animation:tout .22s forwards}
@keyframes tin{from{transform:skewX(var(--sk)) translateX(-120%)}}
@keyframes tout{to{transform:skewX(var(--sk)) translateX(-130%);opacity:0}}
/* the opening slate of a level: slides in at the left like a broadcast caption */
#intro{position:fixed;left:0;top:17%;pointer-events:none;zoom:var(--uip,1)}
#intro .sl{position:relative;padding:14px 46px 14px 40px;background:var(--k);border-bottom:3px solid var(--w);box-shadow:8px 8px 0 rgba(0,0,0,.45);opacity:0;transform:translateX(-120%) skewX(var(--sk));transform-origin:left bottom}
#intro .sl::before{content:'';position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--ic)}
#intro b{display:block;font-family:var(--disp);font-weight:400;font-size:calc((50px) / var(--tz,1));line-height:1;color:#fff;white-space:nowrap}
#intro span{display:block;margin-top:9px;font-family:var(--body);font-weight:700;font-size:calc((20px) / var(--tz,1));line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--ic)}
#intro.go .sl{animation:slate 2.6s var(--snap) forwards}
@keyframes slate{0%{transform:translateX(-120%) skewX(var(--sk))}12%{transform:translateX(-14px) skewX(var(--sk))}86%{transform:translateX(-14px) skewX(var(--sk));opacity:1}100%{transform:translateX(-120%) skewX(var(--sk));opacity:0}}
#hud:not(.on)~#intro{display:none}

#scrCol.fit{background:linear-gradient(90deg,rgba(10,11,26,.18) 0,rgba(10,11,26,.3) 36%,rgba(10,11,26,.88) 50%,rgba(10,11,26,.92))}
#scrCol.fit::after{opacity:.5}

/* ================================================================ TOUCH: phones and tablets held sideways */
/* the safe area (notches, rounded corners, the home bar): the picture runs edge to edge, the HUD, the menus and the
   thumbs' controls keep inside it. Turned on its side (html.rot), the screen's top is the view's left, and so on round */
:root{--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
html.rot{--sal:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-left,0px)}
.screen{padding:calc(var(--sat) / var(--uis)) calc(var(--sar) / var(--uis)) calc(var(--sab) / var(--uis)) calc(var(--sal) / var(--uis))}
/* the CrazyGames app: the system's status bar lies over the top of the game, its corners are rounded */
html.cgApp{--sat:max(env(safe-area-inset-top,0px),24px);--sar:max(env(safe-area-inset-right,0px),10px);--sab:max(env(safe-area-inset-bottom,0px),6px);--sal:max(env(safe-area-inset-left,0px),10px)}
/* (turned on its side, the lists are scrolled by the game itself, see VW: the browser's own panning would go the wrong way) */
html.rot .screen .scroll,html.rot .screen .grid,html.rot .screen #levelGrid,html.rot .screen .detail,html.rot .screen .sheet,html.rot .screen #vsGrid,html.rot .screen #vsMaps{touch-action:none}
html,body{touch-action:none;overscroll-behavior:none}
.screen .scroll,.screen .grid,.screen #levelGrid,.screen .detail,.screen .sheet,.screen #vsGrid,.screen #vsMaps{touch-action:pan-y}
#touch{position:fixed;inset:0;display:none;touch-action:none}
#touch.show{display:block}
body.touch #cursor,body.touch #ctrlBoard,body.touch kbd{display:none!important}
/* the stick: a plate with a knob; at rest it waits faintly where the thumb usually comes down */
#tStick{position:absolute;left:0;top:0;width:0;height:0;transition:opacity .18s}
#tStick.rest{opacity:.42}
#tStick .base{position:absolute;left:calc(var(--sr)*-1);top:calc(var(--sr)*-1);width:calc(var(--sr)*2);height:calc(var(--sr)*2);border-radius:50%;
  background:radial-gradient(circle,rgba(13,15,34,.18) 0 52%,rgba(13,15,34,.42) 53%);border:3px solid rgba(246,243,236,.55);box-shadow:0 4px 0 rgba(0,0,0,.35)}
#tStick .base::before,#tStick .base::after{content:'';position:absolute;top:50%;width:0;height:0;margin-top:-9px;border:9px solid transparent}
#tStick .base::before{left:9px;border-right:11px solid rgba(246,243,236,.7);border-left:0}
#tStick .base::after{right:9px;border-left:11px solid rgba(246,243,236,.7);border-right:0}
#tStick .knob{position:absolute;left:calc(var(--sr)*-.46);top:calc(var(--sr)*-.46);width:calc(var(--sr)*.92);height:calc(var(--sr)*.92);border-radius:50%;
  background:var(--w);border:3px solid var(--k);box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 -6px 0 rgba(13,15,34,.16)}
/* the buttons: ink discs with a white rim; a press sinks the button and fills it with its colour */
#tBtns .tb{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:50%;
  background:rgba(13,15,34,.5);border:3px solid rgba(246,243,236,.72);color:var(--w);box-shadow:0 5px 0 rgba(0,0,0,.4);transition:transform .06s,background .06s,box-shadow .06s;--c:var(--y)}
#tBtns .tb svg{width:46%;height:46%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
#tBtns .tb span{font-family:var(--disp);font-size:calc((10px) / var(--tz,1));line-height:1;letter-spacing:.04em;opacity:.85;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.zh #tBtns .tb span{font-size:calc((11px) / var(--tz,1));letter-spacing:.1em}
#tBtns .tb[data-a="kick"]{--c:var(--y);background:rgba(255,74,28,.8);border-color:var(--w)}
#tBtns .tb[data-a="kick"] svg{width:50%;height:50%}
#tBtns .tb[data-a="kick"] span{font-size:calc((12px) / var(--tz,1))}
#tBtns .tb.on{transform:translateY(4px) scale(.94);background:var(--c);color:var(--k);border-color:var(--w);box-shadow:0 1px 0 rgba(0,0,0,.4)}
#tBtns .tb.on svg{filter:none}
#tBtns .tb.on span{text-shadow:none;opacity:1}
/* where the next kick goes: four corner marks on the target */
#aimMark{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .15s}
#aimMark.on{opacity:1}
#aimMark::before,#aimMark::after{content:'';position:absolute;left:-17px;top:-17px;width:34px;height:34px;
  background:linear-gradient(var(--y),var(--y)) 0 0/12px 4px,linear-gradient(var(--y),var(--y)) 0 0/4px 12px,linear-gradient(var(--y),var(--y)) 100% 0/12px 4px,linear-gradient(var(--y),var(--y)) 100% 0/4px 12px,
  linear-gradient(var(--y),var(--y)) 0 100%/12px 4px,linear-gradient(var(--y),var(--y)) 0 100%/4px 12px,linear-gradient(var(--y),var(--y)) 100% 100%/12px 4px,linear-gradient(var(--y),var(--y)) 100% 100%/4px 12px;
  background-repeat:no-repeat;filter:drop-shadow(1px 0 0 var(--k)) drop-shadow(-1px 0 0 var(--k)) drop-shadow(0 1px 0 var(--k)) drop-shadow(0 -1px 0 var(--k))}
#aimMark::after{left:-3px;top:-3px;width:6px;height:6px;background:var(--y);transform:rotate(45deg)}
/* held upright: ask for the device to be turned */
#rotate{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--k);color:var(--w)}
#rotate svg{width:96px;height:96px;color:var(--y)}
#rotate b{font-family:var(--disp);font-weight:400;font-size:calc((20px) / var(--tz,1));letter-spacing:.04em;text-align:center;padding:0 24px}
/* (on CrazyGames only: there the portal asks for the turn; everywhere else the page turns itself, see VW) */
html.needRot body.touch #rotate{display:flex}
/* a phone held upright: the whole page laid on its side, a quarter turn clockwise (the phone is turned to the left) */
html.rot body{position:fixed;left:0;top:0;width:var(--vw);height:var(--vh);transform-origin:0 0;transform:translateX(var(--vh)) rotate(90deg)}
/* on a touch screen the game is played with the thumbs: the cards along the bottom go up to the top */
body.touch #hud.smash #pctBar{bottom:auto;top:84px}
body.touch #hud.smash.vs #pctBar{top:14px}
body.touch #setTabs{display:none}

/* ================================================================ COMPACT: the board for a phone on its side (960 x 540 and up) */
.compact .tbar{height:68px;padding:0 24px 2px;margin-bottom:6px;gap:18px}
.compact .screen.page::before{height:76px;width:var(--bandW,500px)}
.compact .screen.page::after{font-size:calc((150px) / var(--tz,1));bottom:-30px}
.compact .rt span{font-size:calc((calc(var(--fs,34px) * .8)) / var(--tz,1))}
.compact .ttl{gap:5px}
.compact .body{padding:0 24px 14px;gap:18px}
.compact .main{gap:12px}
.compact .detail{width:318px}
.compact .detail .inf{padding:11px 16px 9px;gap:7px;overflow-y:auto}
.compact .detail h2{font-size:calc((23px) / var(--tz,1))}
.compact #levelGrid{gap:12px 14px}
.compact .lv .pl{height:50px}
.compact .lv .no{font-size:calc((26px) / var(--tz,1))}
/* (compact: the mini-games, both sections, and the settings lists fit their sheet without a scroll bar) */
.compact #miniGrid{gap:5px}.compact .sec{gap:8px 12px}.compact .mg .pl{height:31px}
.compact .setRow{min-height:50px;padding:4px 2px}.compact .setRow.keys{min-height:46px}.compact .setHint{margin:8px 0 2px}
.compact #chTabs{gap:8px}
/* home: the logo goes up to the left, the plates down the right */
.compact #scrTitle{padding-right:36px}
.compact #homeCol{width:470px;padding-top:56px}
.compact #logo{position:absolute;left:calc(62px + var(--sal) / var(--uis));top:calc(30px + var(--sat) / var(--uis));font-size:calc((60px) / var(--tz,1))}
.compact #tagline{position:absolute;left:calc(44px + var(--sal) / var(--uis));top:calc(158px + var(--sat) / var(--uis));margin:0}
.compact #homeMenu{gap:9px}
.compact .hm{height:60px;width:420px;margin-right:calc(var(--i) * 10px)}
.compact .hm b{font-size:calc((22px) / var(--tz,1))}
.compact .hm .th{width:132px}
.compact .hm.hero{height:92px;width:452px}
.compact .hm.hero b{font-size:calc((38px) / var(--tz,1))}
.compact .hm.hero .th{width:150px}
.compact #homeUtil{top:calc(16px + var(--sat) / var(--uis));right:calc(24px + var(--sar) / var(--uis))}
/* pause */
.compact #pauseL{gap:16px}
.compact #pauseL .rt{--fs:46px}
.compact #pauseMenu{gap:9px}
.compact .pm{height:48px}
.compact .pm b{font-size:calc((22px) / var(--tz,1))}
.compact #pauseR{width:380px;padding:18px 20px 16px}
.compact #pauseR h2{font-size:calc((28px) / var(--tz,1));margin:8px 0 12px}
/* results */
.compact .res{gap:14px}
.compact .res .band{padding:16px 0}
.compact .res h2.big{font-size:calc((46px) / var(--tz,1));margin:6px 0 0}
.compact .stars3{margin:12px 0 2px;gap:18px}
.compact .s3 img{width:62px;height:62px}
.compact .s3:nth-child(2) img{width:74px;height:74px;margin-top:-8px}
.compact .s3 span{font-size:calc((13px) / var(--tz,1))}
.compact .resRow{margin-top:10px}
.compact .resRow2{margin-top:8px;min-height:40px}
.compact .scoreP b{font-size:calc((30px) / var(--tz,1))}
.compact .res .btn{min-height:48px;font-size:calc((18px) / var(--tz,1))}
.compact #mrScore{font-size:calc((64px) / var(--tz,1));margin-top:8px}
.compact #vsRows{margin-top:12px}
/* versus */
.compact #vsBox{gap:10px}
.compact .vsS{height:208px;padding:30px 8px 8px;gap:4px}
.compact .vsS .pic,.compact .vsS .pic img{width:70px;height:74px}
.compact .vsS .pic i{font-size:calc((42px) / var(--tz,1))}
.compact .vsT{width:48px;height:48px}
.compact #vsGrid{grid-template-columns:repeat(var(--cols,16),48px);grid-auto-rows:48px;gap:6px}
.compact .vsT i{font-size:calc((26px) / var(--tz,1));line-height:44px}
.compact .vsM{flex-basis:100px}
.compact .vsM img{height:54px}
.compact .vsM b{font-size:calc((12px) / var(--tz,1));padding:4px 0 3px}
.compact #vsFoot .btn.lg{min-height:54px;font-size:calc((24px) / var(--tz,1))}
.compact .hm .tx{gap:3px;padding:0 14px 0 20px}
.compact .hm .ix{font-size:calc((10px) / var(--tz,1))}
.compact .hm small{font-size:calc((13px) / var(--tz,1))}
.compact .hm.hero .tx{gap:5px}
.compact .hm.hero small{font-size:calc((15px) / var(--tz,1))}
.compact .detail .art{aspect-ratio:360/150}
.compact .goal{min-height:31px;padding:4px 2px;font-size:calc((15px) / var(--tz,1))}
.compact .goal img{width:19px;height:19px}
.compact .detail .rw{width:36px;height:46px}.compact .detail .rw.sk{width:46px}
.compact .rew .rtx b{font-size:calc((15px) / var(--tz,1))}
.compact .detail .btn{min-height:46px}.compact .detail>.push{margin:0 16px 14px}
.compact .lv.sum{padding:10px 12px}
.compact .sum h3{font-size:calc((19px) / var(--tz,1));margin-top:5px}
.compact .sum .blocks{margin:7px 0 5px}.compact .sum .blocks i{height:9px}
.compact .sum .rw{width:28px;height:36px}.compact .sum .rw.sk{width:36px}
.compact .ch{height:52px;padding:7px 8px 0 14px}
.compact .ch b{margin-top:4px}
.lv .nm{display:block}
.compact .tbar .rt span{font-size:calc((calc(var(--fs,34px) * .72 * var(--fit,1))) / var(--tz,1));padding:4px 6px 2px}
.compact .seg button{height:38px;padding:0 12px;gap:7px;font-size:calc((13px) / var(--tz,1))}
.compact .seg button small{font-size:calc((12px) / var(--tz,1))}
.compact .back{height:40px;padding:0 14px 0 10px;font-size:calc((14px) / var(--tz,1))}
.compact .pill{height:38px;font-size:calc((16px) / var(--tz,1));padding:0 14px}
.compact #scrCol.fit #colSkins{width:470px}
.compact #scrCol.fit #skinInfo{left:28px;bottom:24px;width:420px;height:206px}
.compact #skinName{font-size:calc((34px) / var(--tz,1))}
.compact #sgGrid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:12px 10px}
.compact .vsM{flex-basis:88px}
.compact .vsM img{height:48px}
.compact .vsM b{font-size:calc((11px) / var(--tz,1));letter-spacing:.04em}

#hud.vs #scoreNum{display:none}
/* starting over: a red-edged button, and the question it asks before it does anything */
.btn.danger{background:var(--k);border-color:var(--r);color:var(--r);box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.btn.danger:hover,.btn.danger.kf{background:var(--r);border-color:var(--r);color:#fff;box-shadow:6px 6px 0 rgba(0,0,0,.5)}
.btn.danger.on{background:var(--r);color:#fff}
.btn.danger.on:hover,.btn.danger.on.kf{background:var(--w);border-color:var(--w);color:var(--r)}
.setRow.warn{margin:4px -12px 0;padding:10px 12px;background:rgba(255,74,28,.12);border-bottom:0;border-left:5px solid var(--r)}
.setRow.warn>b{font-family:var(--body);font-weight:700;font-size:calc((16px) / var(--tz,1));line-height:1.3;color:#ffd6c8}
.zh .setRow.warn>b{font-weight:900}
.opt2.ask{flex:none;gap:10px}
.opt2.ask .btn{height:auto}

/* ================================================================ REWARDS: the card's button keeps its place; new outfits */
.btn.wait{visibility:hidden}
#bCard:not(.wait){animation:popIn .32s var(--snap)}
@keyframes popIn{from{opacity:0;transform:skewX(var(--sk)) translateY(14px) scale(.9)}}
/* a star flown by hand (09i flyStar): placed by transform each frame; its thread of fading dots, its sparks, its landing glints */
.flyX{position:fixed;left:0;top:0;z-index:71;pointer-events:none;will-change:transform}
.flyT,.flyG,.flyP{position:fixed;z-index:70;pointer-events:none;display:block}
.flyT{border-radius:50%;background:radial-gradient(circle,#fff6c8 0,#ffd23f 45%,rgba(255,177,31,0) 72%);animation:flyT .42s ease-out forwards}
@keyframes flyT{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(.2)}}
.flyG{background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);transform:rotate(var(--r));animation:flyG .4s ease-out forwards}
@keyframes flyG{from{opacity:1;transform:rotate(var(--r)) scale(1)}to{opacity:0;transform:rotate(calc(var(--r) + 60deg)) scale(.1)}}
.flyP{background:#ffe27a;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:flyP .46s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes flyP{from{opacity:1;transform:translate(0,0) scale(1.2)}to{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.2)}}
.s3.give{animation:give .34s var(--snap)}
@keyframes give{35%{transform:translateY(-5px) scale(1.05);filter:brightness(1.45)}}
#winNext.gulp .fr{animation:gulp .34s var(--snap)}
@keyframes gulp{0%{transform:scale(1)}30%{transform:scale(1.08,1.05)}65%{transform:scale(.985)}100%{transform:none}}
#winNext .fr::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(255,246,200,.55),rgba(255,246,200,0) 70%);opacity:0;pointer-events:none}
#winNext.gulp .fr::after{animation:frGlint .42s ease-out}
@keyframes frGlint{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
#winNext .ct.tick{animation:ctTick .3s var(--snap)}
@keyframes ctTick{35%{transform:scale(1.22);color:#fff}}
#winNext .ct{display:inline-block}
/* a portrait frame: the dark silhouette, the gold rising in it (shaped by the portrait), the colours on top */
.fr{position:relative;display:block;overflow:hidden;background:radial-gradient(ellipse at 50% 58%,#262d5e,#0b0e26 76%)}
.fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.fr .sil{filter:brightness(0) drop-shadow(0 0 .6px rgba(255,255,255,.6))}
.fr .liq{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;clip-path:inset(100% 0 0 0);transition:clip-path .5s cubic-bezier(.22,.8,.3,1);
  background:linear-gradient(180deg,#ffe98a,#ffd03a 22%,#f4ad1c)}
.fr.instant .liq{transition:none}
/* (no line across the frame at the fill level: the gold itself shows how far it has risen) */
.fr .col{opacity:0}
/* the result of a level: the ad offer on the left, the next star outfit on the right; both out of the flow */
.res .bandIn{position:relative}
#winAd,#winNext{position:absolute;top:50%;width:176px;transform:translateY(-50%)}
#winNext{right:0;display:flex;flex-direction:column;align-items:center;gap:7px}
#winNext .mic{color:var(--y);letter-spacing:.2em}
#winNext .fr{width:136px;height:153px;border:3px solid var(--w);box-shadow:5px 5px 0 rgba(0,0,0,.5)}
#winNext .ct{font-family:var(--disp);font-weight:400;font-size:calc((22px) / var(--tz,1));line-height:1;color:var(--y)}
#winNext .adb{display:flex;align-items:center;justify-content:center;gap:8px;width:152px;height:38px;background:#2fd27a;color:var(--k);transform:skewX(var(--sk));box-shadow:4px 4px 0 rgba(0,0,0,.5);transition:transform .14s var(--snap)}
#winNext .adb b{font-family:var(--disp);font-weight:400;font-size:calc((16px) / var(--tz,1));line-height:1;white-space:nowrap}
#winNext .adb .adI{width:22px;height:16px;border-width:2px}
#winNext .adb .adI::after{left:6px;top:2px;border-width:4px;border-left-width:6px}
#winNext .adb:hover,#winNext .adb.kf{background:#5ff09a;transform:skewX(var(--sk)) scale(1.06)}
#winNext .adb{visibility:hidden}
#winNext.near .adb{visibility:visible;animation:adGlow 1.2s ease-in-out infinite,nearPulse 1.2s ease-in-out infinite}
@keyframes nearPulse{50%{transform:skewX(var(--sk)) scale(1.08)}}
#winNext.full .adb{visibility:hidden}
#winNext.bump .fr{animation:nbump .28s var(--snap)}
@keyframes nbump{40%{transform:scale(1.08)}}
#winNext.full .fr{border-color:var(--y);animation:nfull .9s var(--snap)}
#winNext.full .fr .liq{filter:brightness(1.35)}
@keyframes nfull{0%{transform:scale(1)}25%{transform:scale(1.16) rotate(-3deg)}55%{transform:scale(.96)}100%{transform:none}}
#winAd{left:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 10px 10px;background:linear-gradient(180deg,#2a1d06,#141026);border:3px solid var(--y);color:var(--w);box-shadow:6px 6px 0 rgba(0,0,0,.55),0 0 0 0 rgba(255,210,63,0);animation:adGlow 1.6s ease-in-out infinite,adBob 2.4s ease-in-out infinite;overflow:hidden;transition:transform .14s var(--snap)}
@keyframes adGlow{50%{box-shadow:6px 6px 0 rgba(0,0,0,.55),0 0 26px 2px rgba(255,210,63,.55)}}
@keyframes adBob{50%{margin-top:-5px}}
#winAd::before{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);animation:adSheen 2.6s ease-in-out infinite}
@keyframes adSheen{0%,55%{left:-60%}100%{left:130%}}
#winAd .rib{position:absolute;left:0;right:0;top:0;padding:4px 0 3px;background:var(--y);color:var(--k);font-family:var(--disp);font-style:normal;font-size:calc((13px) / var(--tz,1));letter-spacing:.06em}
#winAd .pic{position:relative;width:120px;height:135px;background:radial-gradient(ellipse at 50% 60%,var(--sc),#14183a 75%);border:2px solid var(--w)}
#winAd .pic img{width:100%;height:100%;object-fit:cover}
#winAd .nm{font-family:var(--disp);font-weight:400;font-size:calc((15px) / var(--tz,1));line-height:1.1;max-width:156px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#winAd .cond{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:156px;height:50px}
#winAd .cond span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--body);font-weight:600;font-size:calc((12px) / var(--tz,1));line-height:1.25;color:rgba(255,255,255,.75)}
#winAd .cond em{font-style:normal;font-family:var(--disp);font-size:calc((13px) / var(--tz,1));line-height:1;color:var(--y)}
#winAd .cta svg{width:16px;height:16px;margin-right:4px;vertical-align:-2px}
#winAd.full{border-color:#fff2b0;animation:adGlow .8s ease-in-out infinite}
#winAd.full .pic{border-color:var(--y);box-shadow:0 0 18px rgba(255,210,63,.7)}
#winAd .cta{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:2px;padding:7px 6px 6px;background:#2fd27a;color:var(--k);transform:skewX(var(--sk))}
#winAd .cta b{font-family:var(--disp);font-weight:400;font-size:calc((15px) / var(--tz,1));line-height:1.1;white-space:nowrap}
#winAd .adI,#skinAd .adI{width:22px;height:16px;border-width:2px}
#winAd .adI::after,#skinAd .adI::after{left:6px;top:2px;border-width:4px;border-left-width:6px}
#winAd:hover,#winAd.kf{transform:translateY(-50%) scale(1.05)}
#winAd.bump{animation:adBump .5s var(--snap),adGlow 1.6s ease-in-out infinite}
@keyframes adBump{30%{transform:translateY(-50%) scale(1.12) rotate(-2deg)}}
.zh #winAd .rib,.zh #winAd .cta b{letter-spacing:.08em}
/* the fitting room: what a look you don't have costs in ads */
#skinAd{display:flex;align-items:center;gap:10px;margin-top:10px;height:44px;padding:0 16px;background:#2fd27a;color:var(--k);transform:skewX(var(--sk));box-shadow:5px 5px 0 rgba(0,0,0,.5);pointer-events:auto;animation:adGlow 1.6s ease-in-out infinite}
#skinAd b{font-family:var(--disp);font-weight:400;font-size:calc((16px) / var(--tz,1))}
/* the locker: a challenge's words, and how far along you are */
#skinProg{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px;padding:8px 14px 9px;background:rgba(13,15,34,.88);border-left:4px solid var(--sc,var(--y));transform:skewX(var(--sk))}
#skinProg .d{font-family:var(--body);font-weight:700;font-size:calc((16px) / var(--tz,1));letter-spacing:.02em;color:var(--w)}
#skinProg .pbar{display:block;width:260px;height:10px;background:#2a2e52;overflow:hidden}
#skinProg .pbar i{display:block;width:calc(var(--f) * 100%);height:100%;background:linear-gradient(90deg,#ffb11f,var(--y));box-shadow:0 0 8px rgba(255,210,63,.5)}
#skinProg b{font-family:var(--disp);font-weight:400;font-size:calc((17px) / var(--tz,1));color:var(--y)}
#skinProg .pbar+b{margin-top:-2px}
/* a secret look: nothing of it shows */
.sg.secret .art{background:radial-gradient(ellipse at 50% 60%,#232850,#11142e 75%)}
.sg.secret .q{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:'Bungee';font-size:calc((52px) / var(--tz,1));line-height:1;color:#3a4070;text-shadow:3px 3px 0 #0a0c20}
.sg.secret .nm{color:var(--mute)}
#skinAd:hover,#skinAd.kf{background:#5ff09a}
#skinAd.bump{animation:adBump2 .5s var(--snap)}
@keyframes adBump2{30%{transform:skewX(var(--sk)) scale(1.1)}}
#skinAd.hidden{display:none}
/* the moment itself */
#scrSkin{flex-direction:column;background:radial-gradient(ellipse at 50% 44%,rgba(40,30,110,.8),rgba(5,7,24,.94) 70%)}
#skRays{position:absolute;left:50%;top:44%;width:1600px;height:1600px;margin:-800px 0 0 -800px;background:repeating-conic-gradient(from 0deg,rgba(255,226,140,.12) 0deg 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 30%,transparent 62%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 30%,transparent 62%);opacity:0;transition:opacity .6s;animation:rays 30s linear infinite}
#scrSkin.lit #skRays{opacity:1}
#skWrap{position:relative;display:flex;flex-direction:column;align-items:center;opacity:0}
#skWrap.in{animation:cwin .5s cubic-bezier(.2,1.5,.4,1) forwards}
#skWhy{margin:-8px 0 18px;padding:6px 16px 5px;background:rgba(13,15,34,.85);transform:skewX(var(--sk));font-family:var(--body);font-weight:700;font-size:calc((17px) / var(--tz,1));letter-spacing:.04em;color:var(--w);white-space:nowrap}
#skKicker{height:40px;margin-bottom:20px;padding:8px 18px 0;background:var(--k);border-left:6px solid var(--y);transform:skewX(var(--sk));font-family:var(--disp);font-size:calc((22px) / var(--tz,1));color:var(--y);box-shadow:6px 6px 0 rgba(0,0,0,.5);white-space:nowrap}
#skStage{position:relative;width:288px;height:324px}
#skStage .fr{width:100%;height:100%;border:4px solid var(--w);box-shadow:10px 10px 0 rgba(0,0,0,.55)}
#scrSkin.fill #skStage .fr{animation:frShake .12s linear 10 .3s}
@keyframes frShake{50%{transform:translate(1px,-1px)}}
#scrSkin.lit #skStage .fr{border-color:var(--y);animation:frLit .7s var(--snap)}
@keyframes frLit{0%{transform:scale(1)}30%{transform:scale(1.07)}100%{transform:none}}
#scrSkin.lit #skStage .col{opacity:1;animation:colIn .7s ease-out}
@keyframes colIn{0%{filter:brightness(3) saturate(0)}100%{filter:none}}
#scrSkin.lit #skStage .liq{opacity:0;transition:opacity .5s .15s}
#skSpark{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2;pointer-events:none}
#skSpark canvas{position:absolute;left:-16px;top:-16px;width:32px;height:32px;animation:spark 1s cubic-bezier(.1,.8,.3,1) forwards;opacity:0}
#skStamp{position:absolute;right:-30px;top:16px;z-index:3;padding:6px 14px 4px;background:var(--r);color:#fff;font-family:var(--disp);font-weight:400;font-size:calc((20px) / var(--tz,1));white-space:nowrap;transform:rotate(8deg) scale(2.2);box-shadow:5px 5px 0 rgba(0,0,0,.5);opacity:0}
#scrSkin.lit #skStamp{animation:stamp2 .42s var(--snap) .15s forwards}
@keyframes stamp2{0%{opacity:0;transform:rotate(16deg) scale(2.4)}100%{opacity:1;transform:rotate(8deg) scale(1)}}
#skName{height:62px;margin-top:22px;padding:10px 22px 0;background:var(--sc,var(--r));color:#fff;font-family:'Bungee';font-size:calc((38px) / var(--tz,1));line-height:1;white-space:nowrap;transform:skewX(var(--sk));box-shadow:8px 8px 0 var(--k);visibility:hidden;text-shadow:3px 3px 0 rgba(0,0,0,.35)}
#skRole{height:30px;margin-top:10px;padding:5px 14px 0;background:var(--k);font-family:var(--body);font-weight:700;font-size:calc((15px) / var(--tz,1));letter-spacing:.28em;color:var(--w);transform:skewX(var(--sk));visibility:hidden}
#scrSkin.lit #skName{visibility:visible;animation:slamL .4s var(--snap) .2s backwards}
#scrSkin.lit #skRole{visibility:visible;animation:slamL .4s var(--snap) .3s backwards}
#skActs{display:flex;gap:16px;margin-top:22px;visibility:hidden}
#scrSkin.acts #skActs{visibility:visible;animation:popIn .32s var(--snap)}
.compact #skStage{width:200px;height:225px}
.compact #skKicker{height:34px;margin-bottom:12px;padding-top:6px;font-size:calc((18px) / var(--tz,1))}
.compact #skName{height:48px;margin-top:14px;padding-top:8px;font-size:calc((28px) / var(--tz,1))}
.compact #skRole{margin-top:6px}
.compact #skActs{margin-top:12px}
.compact #winAd,.compact #winNext{width:124px}
.compact #winAd .pic{width:74px;height:84px}
.compact #winAd{padding-top:24px}
.compact #winNext .fr{width:84px;height:95px}
.compact #winNext .ct{font-size:calc((16px) / var(--tz,1))}
.compact #winNext .adb{width:118px;height:30px}
.compact #winNext .adb b{font-size:calc((13px) / var(--tz,1))}
.compact #winNext{gap:5px}
.compact #winAd .cond{width:124px;height:40px}
.compact #winAd .cond span{font-size:calc((10px) / var(--tz,1))}
.compact #winAd .cond em{font-size:calc((11px) / var(--tz,1))}
.compact #skWhy{margin:-4px 0 10px;font-size:calc((14px) / var(--tz,1))}
.compact #skinProg{margin-top:6px;padding:5px 10px 6px}
.compact #skinProg .d{font-size:calc((13px) / var(--tz,1))}
.compact #skinProg .pbar{width:200px;height:8px}
.compact #cardStage{zoom:.66}
.compact #cardKicker{margin-bottom:12px}
.compact #cardNote{margin-top:10px;height:20px;font-size:calc((15px) / var(--tz,1))}
.compact #bCard{margin-top:8px;min-height:46px}
.compact #winAd,.compact #winNext{width:142px}
.compact #winAd .cta b,.compact #winAd .nm{font-size:calc((13px) / var(--tz,1))}

/* a challenge met in play: the corner card in gold, the look it gives in its colours */
.toast.ach{border-left-color:var(--y);animation:tin .32s var(--snap),tout .3s 3.9s forwards}
.toast.ach img{object-fit:cover;object-position:50% 8%;background:radial-gradient(ellipse at 50% 70%,var(--sc),#14183a 80%)}
.toast.ach img.ph{object-fit:contain;padding:9px}
.toast.ach small{color:var(--y)}
.toast.ach.secret{border-left-color:#c88cff}.toast.ach.secret small{color:#c88cff}
/* one ad from the next look */
#scrNear{background:radial-gradient(ellipse at 50% 46%,rgba(40,30,110,.72),rgba(5,7,24,.92) 70%)}
#nrWrap{display:flex;flex-direction:column;align-items:center;opacity:0;transform:scale(.9)}
#scrNear.in #nrWrap{animation:cwin .45s cubic-bezier(.2,1.5,.4,1) forwards}
#nrMic{letter-spacing:.3em}
#nrWhy{margin:-6px 0 14px;padding:5px 14px 4px;background:rgba(13,15,34,.85);transform:skewX(var(--sk));font-family:var(--body);font-weight:700;font-size:calc((16px) / var(--tz,1));letter-spacing:.04em;color:var(--w);white-space:nowrap}
.compact #nrWhy{margin:-2px 0 8px;font-size:calc((13px) / var(--tz,1))}
#nrTitle{margin:10px 0 18px;padding:8px 22px 4px;background:var(--y);color:var(--k);font-family:'Bungee';font-weight:400;font-size:calc((40px) / var(--tz,1));line-height:1;white-space:nowrap;transform:skewX(var(--sk));box-shadow:7px 7px 0 rgba(0,0,0,.55)}
#nrFr{width:216px;height:243px;border:4px solid var(--w);box-shadow:9px 9px 0 rgba(0,0,0,.55)}
#scrNear.lit #nrFr{border-color:var(--y);animation:frLit .7s var(--snap)}
#scrNear.lit #nrFr .col{opacity:1;animation:colIn .7s ease-out}
#scrNear.lit #nrFr .liq{opacity:0;transition:opacity .5s .15s}
#nrCount{margin:14px 0 16px;font-family:var(--disp);font-weight:400;font-size:calc((28px) / var(--tz,1));line-height:1;color:var(--y)}
#nrActs{display:flex;align-items:center;justify-content:center;gap:18px}
#bNrGo .adI{margin-right:2px}
.compact #nrTitle{margin:6px 0 10px;font-size:calc((28px) / var(--tz,1))}
.compact #nrFr{width:140px;height:158px}
.compact #nrCount{margin:8px 0 10px;font-size:calc((20px) / var(--tz,1))}
.compact #nrActs{gap:12px}
/* a look in the locker that one ad would finish */
.sg.near::before{content:'';position:absolute;left:6px;top:6px;z-index:2;width:12px;height:12px;background:#2fd27a;box-shadow:0 0 0 2px var(--k),0 0 10px rgba(47,210,122,.8);transform:rotate(45deg);animation:nearDot 1.2s ease-in-out infinite}
@keyframes nearDot{50%{transform:rotate(45deg) scale(1.25)}}
/* a long challenge title on a locked plate takes two short lines rather than being cut */
.sg.lock .pl{padding:0 4px}
.sg.lock .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;text-overflow:clip;font-size:calc((10px) / var(--tz,1));line-height:1.1;text-align:center}
.zh .sg.lock .nm{font-size:calc((11px) / var(--tz,1))}
/* the result with offers at its sides: the sides are kept for them, so the middle never runs under a card */
#scrWin .bandIn,#scrMiniRes .bandIn{width:min(1220px,96%);padding:0 192px;box-sizing:border-box}
#scrWin .resRow,#scrMiniRes .resRow{max-width:100%}
#scrWin .scoreP,#scrWin .sp{padding:8px 12px 8px 11px}
#scrWin .stats{gap:10px}
#scrWin .resRow{gap:10px}
.compact #scrWin .bandIn,.compact #scrMiniRes .bandIn{padding:0 150px}

/* the portal: a cover that keeps every button out of reach while an ad is on its way or playing */
#adCover{position:fixed;inset:0;z-index:500;display:none}
#adCover.on{display:block}
/* the CrazyGames account in the title's corner: a guest's way in, or who is signed in */
#homeUtil .cgu{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;background:rgba(13,15,34,.85);border:2px solid rgba(255,255,255,.25);color:var(--w);transform:skewX(var(--sk));transition:transform .14s var(--snap)}
#homeUtil .cgu.hidden{display:none}
#homeUtil .cgu img{width:28px;height:28px;object-fit:cover;transform:skewX(calc(var(--sk) * -1))}
#homeUtil .cgu b{font-family:var(--disp);font-weight:400;font-size:calc((15px) / var(--tz,1));line-height:1;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#homeUtil .cgu.guest{border-color:var(--y);color:var(--y)}
#homeUtil .cgu.guest:hover,#homeUtil .cgu.guest.kf{background:var(--y);color:var(--k);transform:skewX(var(--sk)) scale(1.05)}
.compact #homeUtil .cgu{height:38px;padding:0 10px}

/* the languages: two columns of names, each in its own script; the one in use lit */
#langGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:4px 2px}
#langGrid .lg{display:flex;align-items:center;justify-content:center;height:47px;padding:0 18px;background:var(--k2);border:2px solid var(--line);color:var(--w);transform:skewX(var(--sk));transition:transform .14s var(--snap),border-color .1s}
#langGrid .lg b{font-family:var(--disp);font-weight:400;font-size:calc((19px) / var(--tz,1));white-space:nowrap;line-height:1;transform:skewX(calc(var(--sk) * -1));text-transform:uppercase}
/* each name set in its own script's face: the Chinese ones at the display weight, Traditional in Traditional forms */
#langGrid .lg[lang=ja] b{font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Noto Sans JP',sans-serif;font-weight:900;font-synthesis:none;letter-spacing:.08em}
#langGrid .lg[lang=ko] b{font-family:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;font-weight:900;font-synthesis:none;letter-spacing:.06em}
#langGrid .lg[lang=zh-CN] b{font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:900;font-synthesis:none;letter-spacing:.08em}
#langGrid .lg[lang=zh-TW] b{font-family:'PingFang TC','Hiragino Sans CNS','Microsoft JhengHei','Noto Sans TC',sans-serif;font-weight:900;font-synthesis:none;letter-spacing:.08em}
#langGrid .lg.on{background:var(--r);border-color:var(--r)}
#langGrid .lg:not(.on):hover,#langGrid .lg.kf{border-color:var(--w);transform:skewX(var(--sk)) scale(1.03)}
.opt2 .langCur{display:flex;align-items:center;gap:8px}
.opt2 .langCur svg{width:18px;height:18px}
.compact #langGrid .lg{height:38px}
.compact #langGrid .lg b{font-size:calc((16px) / var(--tz,1))}