/* Alley scenes: the backdrop, main menu and crew grab. Scenes are drawn at 800x600 and scaled to the arena by --k. */
:root { --ink: #120d1a; --paper: #f6f1ff; --line: #3a2b52; --nova: #4fd1ff; --viper: #ff4fa3; --bolt: #ffc83c; --moss: #64e66e; }
#backdrop { position: absolute; inset: 1px; display: none; overflow: hidden; background: #1a1424; }
#backdrop > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#backdrop .rain { position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background: repeating-linear-gradient(104deg, transparent 0 22px, rgba(200,220,255,.55) 22px 23px, transparent 23px 61px);
  background-size: 120px 120px; animation: rain .5s linear infinite; }
@keyframes rain { to { background-position: -26px 120px; } }
body:is([data-mode="menu"], [data-mode="settings"], [data-mode="collection"], [data-mode="grab"], [data-mode="online"]) #backdrop { display: block; }
body:is([data-mode="menu"], [data-mode="settings"], [data-mode="collection"], [data-mode="grab"], [data-mode="online"]) #top { visibility: hidden; }
body:is([data-mode="menu"], [data-mode="settings"], [data-mode="collection"], [data-mode="grab"], [data-mode="online"]) #power { display: none; }
/* the menu screens fill the whole window, like How to play; the arena (play, results) keeps its own size */
body:is([data-mode="menu"], [data-mode="settings"], [data-mode="collection"], [data-mode="grab"], [data-mode="online"]) #backdrop { position: fixed; inset: 0; z-index: 4; }
body:is([data-mode="menu"], [data-mode="settings"], [data-mode="collection"], [data-mode="grab"], [data-mode="online"]) :is(#menu, #grab, #settings, #collection, #online) {
  position: fixed; inset: 0; padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
body:is([data-mode="menu"], [data-mode="grab"]) .sc { left: var(--fl, 0); top: var(--ft, 0); width: var(--fw, 800px); height: var(--fh, 600px); transform: scale(var(--fk, 1)); }
/* results tell their own story: the match HUD behind them would contradict it */
body[data-mode="results"] :is(#top, #power, #feed) { visibility: hidden; }
.ov.scene { padding: 0; overflow: hidden; }
.ov.scene.open { display: block; animation: none; }
.sc { position: absolute; left: 0; top: 0; width: 800px; height: 600px; transform: scale(var(--k, 1)); transform-origin: 0 0; font-family: 'Chakra Petch', Consolas, sans-serif; color: var(--paper); }
.sc svg { overflow: visible; }

/* logo: a neon tube that flickers on, over pink spray paint with drips */
.tube { font: 400 15px Bungee, Impact, sans-serif; letter-spacing: 6px; color: #d9f8ff; text-shadow: 0 0 4px var(--nova), 0 0 12px var(--nova), 0 0 24px var(--nova); animation: flick 1.4s steps(1); }
.tube.off { opacity: .18; text-shadow: none; } /* a dead tube: still there, unlit (src/ui.js sputters it) */
.spark { position: fixed; z-index: 30; width: 7px; height: 2px; margin: -1px 0 0 -3px; border-radius: 1px; pointer-events: none; background: #fff; box-shadow: 0 0 4px #bff3ff, 0 0 9px var(--nova); }
@keyframes flick { 0% { opacity: 0; } 12% { opacity: 1; } 16% { opacity: .2; } 22% { opacity: 1; } 30% { opacity: .4; } 34%, 100% { opacity: 1; } }
.sc .logo { position: relative; display: inline-block; margin-top: 10px; transform: rotate(-3deg); animation: none; text-shadow: none; }
.sc .logo b { font: 400 60px/1 Bungee, Impact, sans-serif; white-space: nowrap; color: var(--viper); letter-spacing: 1px;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink), 8px 8px 0 #4fd1ff55; }
.sc .logo svg { position: absolute; left: 0; top: 50px; width: 100%; height: 28px; }

/* the crew in their home corners, the same corners they start in */
.corner { position: absolute; width: 196px; }
.corner > svg { display: block; width: 168px; height: 200px; margin: 0 auto; filter: drop-shadow(0 6px 0 rgba(0,0,0,.5)); }
.corner.tl { left: 6px; top: 6px; } .corner.tr { right: 6px; top: 6px; }
.corner.bl { left: 6px; bottom: 4px; } .corner.br { right: 6px; bottom: 4px; }
.corner.tr > svg, .corner.br > svg { transform: scaleX(-1); }
.corner .tag { display: flex; align-items: center; gap: 8px; margin: -16px auto 0; width: 170px; position: relative; background: rgba(12,9,20,.92); border: 2px solid var(--c); padding: 4px 8px; }
.corner .tag i { width: 12px; height: 12px; background: var(--c); flex: none; }
.corner .tag b { font: 400 15px Bungee, Impact, sans-serif; color: var(--c); }
.corner .tag span { margin-left: auto; font-size: 11px; color: #b6abd3; }

/* the menu: the focused item is being claimed, your line runs around it and your ship sits in front */
.mcol { position: absolute; left: max(206px, 50% - 194px); right: max(206px, 50% - 194px); /* as wide as on a 4:3 screen, however wide the window */ top: 20px; bottom: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sc .goal { margin: 22px 0 12px; font-size: 13px; font-weight: 700; color: var(--bolt); letter-spacing: 0; text-shadow: 2px 2px 0 #000; }
.mmenu { display: flex; flex-direction: column; gap: 6px; width: 290px; }
#menu .mitem { position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 12px; height: 34px; padding: 0 14px 0 40px;
  background: rgba(18,13,26,.88); border: 0; color: #cfc4ea; font: 400 15px Bungee, Impact, sans-serif; letter-spacing: 0; transform: none; box-shadow: none; transition: background .12s, color .12s; }
#menu .mitem.big { height: 50px; font-size: 26px; color: var(--paper); }
#menu .mitem kbd { margin-left: auto; font: 700 11px 'Chakra Petch', Consolas, sans-serif; color: #8f80b3; border: 1px solid var(--line); padding: 0 5px; }
#menu .mitem .trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#menu .mitem .trail rect { fill: none; stroke: var(--line); stroke-width: 2; }
#menu .mitem .ship { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; opacity: 0; }
#menu .mitem.focus { color: var(--paper); background: rgba(79,209,255,.14); animation: none; }
#menu .mitem.focus .trail rect { stroke: var(--nova); stroke-width: 3; stroke-dasharray: 10 6; animation: march .6s linear infinite; filter: drop-shadow(0 0 4px var(--nova)); }
#menu .mitem.focus .ship { opacity: 1; }
#menu .mitem.focus kbd { color: var(--nova); border-color: var(--nova); }
@keyframes march { to { stroke-dashoffset: -16; } }
.sc .mbar { height: 5px; border: 0; background: #2a2140; margin-top: 4px; }
/* level, league and today's jobs in one line under the menu; it opens Collection, where the jobs are listed */
#menu .mchip { margin-top: auto; width: 290px; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; font: 500 12px 'Chakra Petch', Consolas, sans-serif; color: #b6abd3; }
#menu .mchip b { font: 400 13px Bungee, Impact, sans-serif; color: var(--nova); }
#menu .mchip .mbar { flex: 1; margin: 0; height: 4px; }
#menu .mchip .mbar > div { background: var(--nova); }
#menu .mchip span { white-space: nowrap; }
#menu .mchip .alldone { color: var(--moss); }
#menu .mchip i { font-style: normal; font-size: 16px; color: var(--nova); }
.cjobs { width: min(100%, 680px); background: rgba(12,9,20,.92); border-left: 4px solid var(--bolt); padding: 6px 10px 8px; font-size: 12px; text-align: left; }
.cjobs h3 { margin: 0 0 2px; font: 700 12px 'Chakra Petch', Consolas, sans-serif; color: var(--bolt); display: flex; justify-content: space-between; }
.cjobs h3 span { font-weight: 500; color: #8f80b3; }
.job.done > span { color: var(--moss); }
.job { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; margin-top: 3px; }
.job .mbar { grid-column: 1 / -1; margin-top: 0; height: 3px; }
.job.done { color: var(--moss); }

/* crew grab: everyone picks at once, the first press wins the character */
.ghead { position: absolute; left: 0; right: 0; top: 18px; text-align: center; }
.ghead h2 { margin: 0; font: 400 34px Bungee, Impact, sans-serif; color: var(--paper); letter-spacing: 0; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--viper); }
.ghead p { margin: 4px 0 0; font-size: 13px; color: #cfc4ea; }
.clock { position: absolute; left: 50%; top: 152px; width: 96px; height: 96px; margin-left: -48px; }
.clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock circle { fill: none; stroke-width: 8; }
.clock .zone { stroke: #ff5a3c; stroke-dasharray: 264; filter: drop-shadow(0 0 6px #ff5a3c); }
.clock b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 44px Bungee, Impact, sans-serif; color: var(--paper); }
.clock.go b { color: #ff5a3c; animation: beat .3s ease-out; }
@keyframes beat { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.cards { position: absolute; left: 24px; right: 24px; bottom: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
#grab .gcard { position: relative; height: 318px; background: rgba(12,9,20,.9); border: 3px solid var(--line); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start;
  align-items: center; gap: 0; padding: 34px 0 0; letter-spacing: 0; transition: transform .15s, border-color .15s, box-shadow .15s; }
#grab .gcard::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--c)); opacity: .18; }
#grab .gcard > svg { position: relative; width: 150px; height: 180px; }
#grab .gcard .key { position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; display: grid; place-items: center; font: 400 18px Bungee, Impact, sans-serif; color: var(--ink); background: var(--c); }
#grab .gcard h3 { position: relative; margin: 6px 0 2px; font: 400 22px Bungee, Impact, sans-serif; color: var(--c); }
#grab .gcard p { position: relative; margin: 0 10px; font: 500 12px 'Chakra Petch', Consolas, sans-serif; text-align: center; color: #cfc4ea; }
#grab .gcard.open { border-color: var(--c); }
#grab .gcard.open.focus { transform: translateY(-4px); background: rgba(12,9,20,.9); box-shadow: 0 0 16px var(--c); }
.stamp { position: absolute; left: 50%; top: 92px; transform: translateX(-50%) rotate(-12deg); padding: 4px 12px; font: 400 20px Bungee, Impact, sans-serif; white-space: nowrap;
  border: 4px solid currentColor; background: rgba(12,9,20,.85); display: none; }
#grab .gcard.taken { border-color: var(--line); }
#grab .gcard.taken > :is(svg, h3, p) { opacity: .35; filter: grayscale(.7); }
#grab .gcard.taken .stamp { display: block; color: #cfc4ea; animation: slam .25s cubic-bezier(.2,1.6,.4,1); }
#grab .gcard.mine { border-color: var(--paper); box-shadow: 0 0 0 3px var(--c), 0 0 24px var(--c); transform: translateY(-6px); }
#grab .gcard.mine .stamp { display: block; color: var(--c); animation: slam .25s cubic-bezier(.2,1.6,.4,1); }
#grab .gcard.miss { animation: shake .3s; }
/* a card you have not unlocked: the character in shadow, its level on a tag */
#grab .gcard.lockme { border-color: var(--line); }
#grab .gcard.lockme > svg { filter: brightness(0) opacity(.5); }
#grab .gcard.lockme > :is(h3, p) { opacity: .5; }
#grab .gcard.lockme .key { background: var(--line); }
.lockbadge { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); padding: 4px 10px; font: 400 15px Bungee, Impact, sans-serif; color: #cfc4ea; background: rgba(12,9,20,.95); border: 2px solid var(--line); white-space: nowrap; }
.newbadge { position: absolute; top: 8px; right: 8px; padding: 3px 8px; font: 400 13px Bungee, Impact, sans-serif; color: var(--ink); background: #ffd24f; box-shadow: 0 0 12px #ffd24f; animation: newPulse 1s ease-in-out infinite alternate; }
@keyframes newPulse { to { transform: scale(1.12); box-shadow: 0 0 20px #ffd24f; } }
#grab .gcard:not(.open) .newbadge { display: none; }
@keyframes slam { 0% { transform: translateX(-50%) rotate(-12deg) scale(2.2); opacity: 0; } 100% { transform: translateX(-50%) rotate(-12deg) scale(1); opacity: 1; } }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { #backdrop .rain, .tube, #menu .mitem.focus .trail rect, .clock.go b { animation: none; } }

/* ---------- the other screens in the same street style ---------- */
.ov, #howto { font-family: 'Chakra Petch', Consolas, sans-serif; }
.ov h2, #howto h2 { font: 400 26px Bungee, Impact, sans-serif; letter-spacing: 0; color: var(--paper); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--viper); }
.ov h2 span { font-family: 'Chakra Petch', Consolas, sans-serif; -webkit-text-stroke: 0; text-shadow: none; color: #b6abd3; }
.ov h4, #howto h4 { font: 700 12px 'Chakra Petch', Consolas, sans-serif; color: var(--bolt); letter-spacing: .5px; text-transform: none; }
#settings, #collection, #online { background: rgba(18,13,26,.72); }
/* online: name and waiting room */
#online .onl { margin: 6px 0; font-size: 15px; color: #cfc4ea; text-align: center; }
#online .onl b { font: 400 22px Bungee, Impact, sans-serif; color: var(--paper); }
#online .onl.dim { font-size: 13px; color: #8f80b3; }
#online input { width: min(100%, 320px); margin: 8px 0; padding: 10px 12px; font: 400 18px Bungee, Impact, sans-serif; color: var(--paper); background: rgba(12,9,20,.95); border: 2px solid var(--line); outline: none; text-align: center; text-transform: uppercase; }
#online input:focus { border-color: var(--nova); box-shadow: 0 0 12px #4fd1ff66; }
#online .onl.err { color: #ff8f8f; }
#online input.code { width: 180px; font-size: 30px; letter-spacing: 10px; }
/* a private room: the code big enough to read out loud, then the four seats */
#online .rcode { display: flex; gap: 8px; margin: 0 0 10px; }
#online .rcode i { font: 400 34px Bungee, Impact, sans-serif; font-style: normal; color: var(--paper); width: 50px; padding: 4px 0; text-align: center; background: rgba(12,9,20,.95); border: 2px solid var(--nova); box-shadow: 0 0 12px #4fd1ff55; }
#online .lseats { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: 8px; margin: 0 0 10px; }
#online .ls { padding: 8px 10px; border: 2px dashed var(--line); text-align: left; }
#online .ls b { display: block; font: 400 15px Bungee, Impact, sans-serif; color: #6f628f; overflow: hidden; text-overflow: ellipsis; }
#online .ls span { font-size: 11px; color: #8f80b3; }
#online .ls.on { border-style: solid; border-color: var(--nova); background: rgba(79,209,255,.08); }
#online .ls.on b { color: var(--paper); }
#online .ls.me { border-color: var(--bolt); }
#online .ls.on span { color: var(--bolt); }
#online .seats { display: flex; gap: 10px; margin: 6px 0 2px; }
#online .seats i { width: 22px; height: 22px; border: 2px solid var(--line); transform: rotate(45deg); }
#online .seats i.on { background: var(--nova); border-color: var(--nova); box-shadow: 0 0 10px var(--nova); }
.ov .card { background: rgba(12,9,20,.92); border: 0; border-left: 4px solid var(--line); }
.ov .btn { font: 400 13px Bungee, Impact, sans-serif; letter-spacing: 0; background: rgba(18,13,26,.92); border: 2px solid var(--line); color: #cfc4ea; }
.ov .btn.big { font-size: 18px; color: var(--paper); }
.ov .btn.focus { border-color: var(--nova); background: rgba(79,209,255,.14); color: var(--paper); box-shadow: 0 0 12px rgba(79,209,255,.35); transform: none; animation: none; }
.ov .btn.set { font: 500 14px 'Chakra Petch', Consolas, sans-serif; }
.ov .btn.set b { font-family: Bungee, Impact, sans-serif; font-weight: 400; color: var(--bolt); }
.ov .btn.item { font: 400 12px Bungee, Impact, sans-serif; }
.ov .btn kbd { font-family: 'Chakra Petch', Consolas, sans-serif; }

/* results: the winner's face next to the verdict */
#results { background: rgba(12,9,20,.7); }
.rtop { display: flex; align-items: center; gap: 18px; }
.wface { position: relative; width: 120px; flex: none; text-align: center; }
.wface svg { width: 120px; height: 144px; filter: drop-shadow(0 5px 0 rgba(0,0,0,.5)); animation: rhead .6s cubic-bezier(.2,1.6,.4,1); }
.wface b { display: block; margin-top: -14px; position: relative; font: 400 15px Bungee, Impact, sans-serif; color: var(--c); background: rgba(12,9,20,.95); border: 2px solid var(--c); padding: 2px 6px; }
.rhead { font: 400 44px Bungee, Impact, sans-serif; color: var(--paper); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--nova); }
.rhead.win { color: var(--bolt); text-shadow: 4px 4px 0 var(--viper); }

/* how to play */
#howto { background: #1a1424 repeating-linear-gradient(0deg, transparent 0 23px, #241b31 23px 25px); color: #e2dcf2; }
#howto .head span { color: #b6abd3; }
#howto .rules > div, #howto .card { background: rgba(12,9,20,.92); border: 0; border-left: 4px solid var(--c, var(--nova)); }
#howto .rules > div:nth-child(4n + 2), #howtoDemos .card:nth-child(4n + 2) { --c: var(--viper); }
#howto .rules > div:nth-child(4n + 3), #howtoDemos .card:nth-child(4n + 3) { --c: var(--bolt); }
#howto .rules > div:nth-child(4n + 4), #howtoDemos .card:nth-child(4n + 4) { --c: var(--moss); }
#howto .card h3 { font: 400 15px Bungee, Impact, sans-serif; color: var(--c, var(--nova)); }
#howto .crewrow { display: flex; gap: 6px; margin: -6px 0 4px auto; }
#howto .head { gap: 16px; align-items: center; }
#howto .crewrow svg { width: 44px; height: 53px; }

/* collection: the crew, locked ones as dark silhouettes with the level that unlocks them */
.crewgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; width: min(100%, 680px); }
.crewgrid > div { background: rgba(12,9,20,.92); border-bottom: 3px solid var(--c); padding: 4px 2px 5px; text-align: center; }
.crewgrid svg { width: 100%; height: 64px; }
.crewgrid b { display: block; font: 400 11px Bungee, Impact, sans-serif; color: var(--c); }
.crewgrid em { font-style: normal; font-size: 10px; color: #b6abd3; }
.crewgrid .locked { border-bottom-color: var(--line); }
.crewgrid .locked svg { filter: brightness(0) opacity(.45); }
.crewgrid .locked b { color: #6f6290; }
@media (max-width: 720px) { .crewgrid { grid-template-columns: repeat(4, 1fr); } }

/* online search: a radar sweeping for players; each player who joins lights a blip */
#online .radar { position: relative; width: 140px; height: 140px; margin: 4px 0; border-radius: 50%; border: 2px solid #4fd1ff55;
  background: radial-gradient(circle, transparent 32%, #4fd1ff22 33%, transparent 34%, transparent 64%, #4fd1ff22 65%, transparent 66%), rgba(12,9,20,.9); overflow: hidden; }
#online .radar .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 300deg, #4fd1ff66 360deg); animation: sweep 2s linear infinite; }
#online .radar .blip { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #3a2b52; transition: background .3s, box-shadow .3s; }
#online .radar .blip.on { background: var(--nova); box-shadow: 0 0 10px var(--nova); animation: blipIn .4s cubic-bezier(.2,1.6,.4,1); }
#online .radar .b0 { left: 50%; top: 50%; } #online .radar .b1 { left: 72%; top: 30%; } #online .radar .b2 { left: 28%; top: 70%; } #online .radar .b3 { left: 70%; top: 74%; }
#online .searching::after { content: ''; animation: dots 1.2s steps(4) infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blipIn { from { transform: scale(2.4); } }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@media (prefers-reduced-motion: reduce) { #online .radar .sweep, #online .searching::after { animation: none; } }

/* ---------- rewards ---------- */
/* the menu's NEW sticker on Collection: pops in once, then a shimmer every few seconds */
.mbadge { position: relative; overflow: hidden; margin-left: 8px; padding: 1px 6px; font: 400 10px Bungee, Impact, sans-serif; color: var(--ink); background: var(--viper); border: 2px solid var(--ink); transform: rotate(-4deg); display: inline-block;
  animation: stickerIn .3s .4s cubic-bezier(.2,1.6,.4,1) both; }
.mbadge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.8) 50%, transparent 70%); transform: translateX(-120%); animation: shimmer 4s 1s infinite; }
@keyframes stickerIn { from { transform: rotate(-4deg) scale(0); } }
@keyframes shimmer { 0%, 85% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
/* Collection: your level and how far to the next one */
.cxp { width: min(100%, 680px); display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; background: rgba(12,9,20,.92); border-left: 4px solid var(--nova); padding: 6px 10px; }
.cxp b { font: 400 16px Bungee, Impact, sans-serif; color: var(--nova); }
.cxp .mbar > div { background: var(--nova); }
.cxp span { grid-column: 1 / -1; font-size: 12px; color: #b6abd3; }
/* NEW tag on an unlock you have not looked at; .pending -> .revealing breaks it out of its lock */
.newtab { position: absolute; top: 0; left: 0; z-index: 2; padding: 1px 6px; font: 400 9px Bungee, Impact, sans-serif; color: var(--ink); background: var(--viper); border: 1px solid var(--ink); font-style: normal; }
.crewgrid > div { position: relative; }
:is(.btn.item, .crewgrid > div).pending :is(canvas, svg) { filter: grayscale(1) brightness(.35); }
:is(.btn.item, .crewgrid > div).revealing { animation: revealLift 1.2s ease-out; z-index: 3; }
:is(.btn.item, .crewgrid > div).revealing :is(canvas, svg) { animation: colorIn .4s .6s ease-out both; filter: grayscale(1) brightness(.35); }
:is(.btn.item, .crewgrid > div).revealing::after { content: ''; position: absolute; inset: -2px; border: 2px solid var(--pc, var(--c)); animation: ringOut .5s .6s ease-out both; pointer-events: none; }
@keyframes revealLift { 0% { transform: none; } 20%, 70% { transform: scale(1.08) translateY(-4px); } 30%, 40% { transform: scale(1.08) translateY(-4px) rotate(-2deg); } 35%, 45% { transform: scale(1.08) translateY(-4px) rotate(2deg); } 100% { transform: none; } }
@keyframes colorIn { 0% { filter: grayscale(1) brightness(2); } 30% { filter: brightness(1.8); } 100% { filter: none; } }
@keyframes ringOut { from { opacity: 1; box-shadow: 0 0 0 0 var(--pc, var(--c)); } to { opacity: 0; box-shadow: 0 0 0 14px transparent; } }
/* results: a level that goes up pops with a burst */
#results .lvl { position: relative; }
#results .lvl b { position: relative; display: inline-block; }
#results .lvl.lvup b { animation: lvPop .38s cubic-bezier(.2,1.6,.4,1); }
#results .lvl.lvup b::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 3px solid var(--nova); animation: burst .5s ease-out forwards; }
@keyframes lvPop { 50% { transform: scale(1.35); } }
@keyframes burst { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
/* results: unlock cards, locked until their turn, then the lock shakes, breaks and the item colours in */
.unlocks { width: min(100%, 680px); display: flex; flex-wrap: wrap; gap: 8px; }
.ucard { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: #0d0b16; border: 2px solid var(--ink); box-shadow: 0 0 0 1px var(--line); opacity: .55; }
.ucard .uprev { position: relative; width: 104px; height: 56px; display: grid; place-items: center; }
.ucard .uprev svg:not(.lock) { height: 56px; width: auto; }
.ucard .uprev canvas { width: 104px; height: 48px; }
.ucard .uprev > :is(svg:not(.lock), canvas) { filter: grayscale(1) brightness(.35); }
.ucard .ulock { position: absolute; inset: 0; display: grid; place-items: center; }
.ucard .ulock svg { width: 18px; height: 22px; fill: #cfc4ea; stroke: #cfc4ea; }
.ucard .utext b { display: block; font: 400 14px Bungee, Impact, sans-serif; color: var(--paper); }
.ucard .utext span { font-size: 11px; color: #8f80b3; }
.ucard.reveal { opacity: 1; animation: cardIn .2s ease-out; border-color: var(--viper); }
.ucard.reveal .ulock { animation: lockShake .16s .2s 2, lockBreak .18s .45s ease-in forwards; }
.ucard.reveal .uprev > :is(svg:not(.lock), canvas) { animation: colorIn .4s .6s ease-out both; }
.ucard.reveal .utext b { animation: stamp .22s .8s cubic-bezier(.2,1.6,.4,1) both; color: #ffd24f; }
@keyframes cardIn { from { transform: scale(.9); } }
@keyframes lockShake { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes lockBreak { to { transform: scale(1.3); opacity: 0; } }
@keyframes stamp { from { transform: scale(1.3); opacity: 0; } }
/* results: the buttons wait (dimmed) until the rewards have played; the first press finishes them */
/* REMATCH and MENU stay pinned to the bottom edge while the rewards scroll under them, so the screen can open at
   the top (YOU WIN) and the buttons are still in reach */
#results .btns { position: sticky; bottom: -18px; z-index: 3; margin-top: auto; padding: 14px 0 18px; width: min(100%, 680px);
  background: linear-gradient(to bottom, transparent, rgba(12,9,20,.96) 28%); }
#results:not(.settled) .btns .btn { opacity: .6; }
#results.skipped * { animation-duration: .01s !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { .mbadge, .mbadge::after, .revealing, .revealing *, .ucard.reveal, .ucard.reveal * { animation: none !important; filter: none !important; } .ucard.reveal .ulock { display: none; } }