* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; height: 100dvh; overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation; background: radial-gradient(ellipse at 20% 0%, #1b0b45, transparent 55%), radial-gradient(ellipse at 80% 0%, #05505e, transparent 55%), #030614; color: #e0f2fe; font-family: "Segoe UI", system-ui, sans-serif; }
body { display: flex; align-items: center; justify-content: center; }
#app { position: relative; width: min(100vw, calc(100vh * 16 / 9)); width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; container-type: inline-size; }
#stage { width: 100%; height: 100%; display: block; border-radius: 8px; touch-action: none; }
.hidden { display: none !important; }

@font-face { font-family: "Russo One"; src: url("fonts/RussoOne-Regular.ttf") format("truetype"); font-display: swap; }
button {
  --edge: var(--t-edge, #38bdf8); --depth: 0cqw;
  position: relative; font: 400 1.5cqw "Russo One", "Arial Black", Impact, sans-serif; letter-spacing: .08em; color: #fff; cursor: pointer; border: 0; border-radius: 0;
  padding: 1cqw 2.4cqw 1.3cqw; margin-bottom: 0; min-width: 8cqw;
  background: url("img/ui/btn_steel.png") center / 100% 100% no-repeat transparent;
  text-shadow: 0 .12cqw .25cqw rgba(0, 0, 0, .8); transition: filter .15s, transform .08s;
}
button:hover:not(:disabled) { filter: brightness(1.2) saturate(1.1); transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(.25cqw) scale(.98); filter: brightness(.95); }
button:disabled { opacity: .4; cursor: default; filter: grayscale(.6); }
button.primary, button.sel, #tools button.on { background-image: url("img/ui/btn_cyan.png"); }
button[data-back], #adminClose, #hubClose, #lobbyCancel, #leaveBtn { background-image: url("img/ui/btn_gold.png"); color: #2a1600; text-shadow: 0 .1cqw 0 rgba(255, 240, 180, .6); }
#leaveBtn { position: absolute; left: 1cqw; top: 1cqw; pointer-events: auto; font-size: 1.1cqw; padding: .6cqw 1.6cqw .9cqw; min-width: 6cqw; z-index: 6; }
#tray #backBtn { position: absolute; left: -59cqw; top: -10cqw; z-index: 6; font-size: 1.1cqw; padding: .6cqw 1.6cqw .9cqw; min-width: 6cqw; background-image: url("img/ui/btn_gold.png"); color: #2a1600; text-shadow: 0 .1cqw 0 rgba(255, 240, 180, .6); }
button.done { opacity: .45; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 1.6cqw; overflow-y: auto; scrollbar-width: thin; padding: 1cqw 0; background: radial-gradient(ellipse at center, rgba(var(--t-over, 3, 9, 20), .5), rgba(var(--t-over, 2, 5, 14), .82)); backdrop-filter: blur(2px); border-radius: 8px; }
h1 { font-size: 7cqw; letter-spacing: .25em; margin: 0; color: var(--t-title, #67e8f9); text-shadow: 0 0 24px rgba(var(--t-glow, 8, 145, 178), .8); }
h2 { font-size: 5cqw; margin: 0; letter-spacing: .12em; }
.tag, #overText { margin: 0; color: var(--t-tag, #7dd3fc); font-size: 1.8cqw; }
.diff { display: flex; gap: 1cqw; }
.link { color: #67e8f9; font-size: 1.3cqw; }
.row { display: flex; gap: 1cqw; }

#hud { position: absolute; top: 1.2cqw; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: .6cqw; pointer-events: none; }
#bannerWrap { --bn: var(--t-accent, #2de2e6); --bn-text: #d9fffb; --bn-fill: 6, 40, 56; filter: drop-shadow(0 0 .9cqw var(--bn)); animation: bnpulse 1.8s ease-in-out infinite; }
#bannerWrap:has(.enemy) { --bn: #ff4d4d; --bn-text: #ffd0c8; --bn-fill: 58, 8, 14; }
#bannerWrap:has(.win) { --bn: #facc15; --bn-text: #fff3b0; --bn-fill: 52, 36, 4; }
#bannerWrap:has(.lose) { --bn: #f87171; --bn-text: #ffd0c8; --bn-fill: 58, 8, 14; }
@keyframes bnpulse { 50% { filter: drop-shadow(0 0 1.5cqw var(--bn)); } }
#banner {
  --notch: 1.5cqw; position: relative; isolation: isolate; overflow: hidden; font-size: 2.3cqw; font-weight: 900; letter-spacing: .16em; padding: .5cqw 4.6cqw;
  color: var(--bn-text); text-shadow: 0 0 .9cqw var(--bn); background: var(--bn);
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 50%);
}
#banner::before {
  content: ""; position: absolute; inset: 2px; z-index: -1;
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 50%);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px), linear-gradient(rgba(var(--bn-fill), .92), rgba(var(--bn-fill), .72));
}
#banner::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 25%; left: -30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); animation: bnsweep 2.6s linear infinite;
}
@keyframes bnsweep { to { left: 110%; } }
.themes { display: grid; grid-template-columns: repeat(4, 20cqw); gap: .8cqw; justify-content: center; }
#themeMenu, #skinMenu { gap: .8cqw; }
.pagelogo { width: 28cqw; height: auto; display: block; filter: drop-shadow(0 .4cqw .8cqw rgba(0, 0, 0, .6)); }
.themes button { display: flex; flex-direction: column; gap: .2cqw; align-items: center; padding: .4cqw .4cqw .6cqw; font-size: 1.15cqw; }
.themes button img { width: 100%; height: auto; aspect-ratio: 16 / 5.6; object-fit: cover; margin: 0 0 .2cqw; display: block; }
.themes button small { font: 400 .85cqw "Segoe UI", system-ui, sans-serif; letter-spacing: 0; color: #bae6fd; padding: 0 .4cqw; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#stats { display: flex; gap: 1.2cqw; font-size: 1.2cqw; color: #7dd3fc; }
#stats span { padding: .2cqw 1cqw; border-radius: 99px; background: rgba(7, 24, 39, .8); }
#stats .fl { font-weight: 700; }
#stats .fl.you { color: #86efac; border: 1px solid #22c55e; }
#stats .fl.foe { color: #fca5a5; border: 1px solid #ef4444; }

#tray { position: absolute; left: 60cqw; right: 3cqw; top: 11cqw; display: flex; flex-direction: column; align-items: stretch; gap: 1cqw; }
#rotateHint { display: none; position: fixed; left: 0; right: 0; top: 0; z-index: 50; padding: 10px 12px; text-align: center; font: 600 14px "Segoe UI", system-ui, sans-serif; color: #e0f2fe; background: rgba(3, 9, 20, .92); border-bottom: 1px solid #38bdf8; }
@media (orientation: portrait) and (max-width: 700px) { #rotateHint { display: block !important; } }
#tray .row { flex-wrap: wrap; gap: .8cqw; }
#tray .row button { flex: 1 1 auto; font-size: 1.25cqw; padding: .7cqw 1cqw; white-space: nowrap; }
#tray .row button.primary { flex-basis: 100%; }
#ships { display: flex; flex-direction: column; gap: .8cqw; }

.modes { display: flex; flex-direction: column; gap: 1cqw; width: 40cqw; }
.modes button { display: flex; flex-direction: column; gap: .3cqw; align-items: center; }
.modes button small { font: 400 1.1cqw "Segoe UI", system-ui, sans-serif; letter-spacing: 0; color: #bae6fd; }
.modes button.sel { --edge: #facc15; }
.modes img { height: 2.6cqw; margin-top: .4cqw; }
#tools { display: flex; gap: .8cqw; pointer-events: auto; }
#tools button { font-size: 1.1cqw; padding: .3cqw 1cqw; }


.tabs { display: flex; gap: .5cqw; flex-wrap: wrap; justify-content: center; max-width: 90cqw; }
.tabs button { font-size: 1cqw; padding: .3cqw .9cqw; }

.hubbody { width: 74cqw; max-height: 46cqw; overflow-y: auto; font: 400 1.3cqw "Segoe UI", system-ui, sans-serif; text-align: left; padding: 1cqw; background: linear-gradient(rgba(6, 30, 56, .72), rgba(3, 10, 24, .8)); border: 1px solid rgba(45, 226, 230, .55); border-radius: 0; clip-path: polygon(1.2cqw 0, 100% 0, 100% calc(100% - 1.2cqw), calc(100% - 1.2cqw) 100%, 0 100%, 0 1.2cqw); }
.hubbody h3 { margin: 1cqw 0 .4cqw; font-size: 1.2cqw; letter-spacing: .15em; color: #67e8f9; }
.hubbody .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12cqw, 1fr)); gap: .8cqw; margin-bottom: .8cqw; }
.stat { background: rgba(14, 116, 144, .22); border-left: 3px solid #2de2e6; padding: .7cqw 1cqw; display: flex; flex-direction: column; }
.stat small { color: #7dd3fc; font-size: .9cqw; letter-spacing: .1em; }
.stat b { font-size: 1.7cqw; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; padding: .4cqw .6cqw; border-bottom: 1px solid rgba(125, 211, 252, .12); }
.row .side { color: #bae6fd; display: flex; gap: .5cqw; align-items: center; }
.on { color: #4ade80; font-style: normal; font-size: .9cqw; }
.mini { font-size: .95cqw; padding: .25cqw .8cqw; }
.ach { display: grid; grid-template-columns: 1fr 14cqw 8cqw; gap: 1cqw; align-items: center; padding: .4cqw 0; opacity: .6; }
.ach.done { opacity: 1; }
.ach small { display: block; color: #7dd3fc; }
.ach .bar { height: .7cqw; background: rgba(255, 255, 255, .1); border-radius: 1cqw; overflow: hidden; }
.ach .bar i { display: block; height: 100%; background: #22d3ee; }
.ach.done .bar i { background: #facc15; }
#chat { position: absolute; left: 1cqw; top: 14cqw; width: 11cqw; display: flex; flex-direction: column; gap: .5cqw; pointer-events: auto; align-items: stretch; z-index: 5; }
#chat.hidden { display: none; }
#chat button { font-size: 1cqw; padding: .4cqw .5cqw; width: 100%; white-space: nowrap; }
#chatLog { order: -1; color: #bae6fd; font: 400 1cqw "Segoe UI", system-ui, sans-serif; text-shadow: 0 1px 3px #000; word-break: break-word; margin-bottom: .3cqw; }

#score { position: absolute; top: 51.6cqw; left: 0; right: 0; display: flex; gap: 3cqw; justify-content: center; font: 600 .95cqw "Segoe UI", system-ui, sans-serif; letter-spacing: .05em; }
#score .a { color: #bfdbfe; }
#score .b { color: #fecaca; }

/* Phones: compact menu with larger touch targets */
.menugrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw 1.6cqw; width: 62cqw; }
.menugrid button { font-size: 1.9cqw; padding: 1.3cqw 1cqw; }
#menu { gap: 1.2cqw; }
#menu h1 { font-size: 5.5cqw; }
.native .link { display: none; }
.diff button { font-size: 1.6cqw; padding: .9cqw 2cqw; }

/* Admin panel */
#admin { gap: 1cqw; }
#admin h2 { font-size: 3.4cqw; }
#adminMsg { min-height: 1.4cqw; margin: 0; }
#adminMsg.bad { color: #fca5a5; }
.adminfilter { width: 100%; box-sizing: border-box; padding: .5cqw .8cqw; margin-bottom: .6cqw; background: rgba(3, 10, 24, .8); border: 1px solid rgba(45, 226, 230, .55); color: #e0f2fe; font: 400 1.2cqw "Segoe UI", system-ui, sans-serif; }
.arow { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; padding: .5cqw .6cqw; border-bottom: 1px solid rgba(125, 211, 252, .12); }
.arow .who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.arow .who small { color: #7dd3fc; font-size: 1cqw; overflow-wrap: anywhere; }
.arow .acts { display: flex; gap: .4cqw; align-items: center; }
.arow.banned { background: rgba(127, 29, 29, .25); }
.arow.blocked { background: rgba(120, 83, 9, .25); }
.badge { font-size: .9cqw; letter-spacing: .1em; padding: .15cqw .6cqw; border: 1px solid #4ade80; color: #4ade80; }
.badge.blocked { border-color: #fbbf24; color: #fbbf24; }
.badge.banned { border-color: #f87171; color: #f87171; }
.mini.danger { border-color: #f87171; color: #fecaca; }
#admin select { font: 400 1.2cqw "Segoe UI", system-ui, sans-serif; background: rgba(3, 10, 24, .9); color: #e0f2fe; border: 1px solid rgba(45, 226, 230, .55); padding: .3cqw; }
#admin input[type="checkbox"] { width: 1.6cqw; height: 1.6cqw; accent-color: #22d3ee; }

/* Profile hub */
#hub { gap: 1cqw; }
#hub h2 { font-size: 3.4cqw; }
.hubbody::-webkit-scrollbar { width: .6cqw; }
.hubbody::-webkit-scrollbar-thumb { background: #22d3ee; }
.hero { display: flex; align-items: center; gap: 1.4cqw; padding: 1cqw 1.4cqw; margin-bottom: 1cqw; background: linear-gradient(90deg, rgba(88, 28, 180, .35), rgba(6, 182, 212, .22)); border-left: 4px solid #a855f7; }
.hero .avatar { width: 5cqw; height: 5cqw; display: grid; place-items: center; border-radius: 50%; font: 800 2.6cqw "Segoe UI", sans-serif; color: #fff; background: radial-gradient(circle at 30% 30%, #2de2e6, #6d28d9); box-shadow: 0 0 1.4cqw rgba(45, 226, 230, .7); }
.hero .who { flex: 1; display: flex; flex-direction: column; }
.hero .who b { font-size: 2.2cqw; letter-spacing: .06em; }
.hero .who small { color: #7dd3fc; letter-spacing: .12em; }
.ring { --p: 0; width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#2de2e6 calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0); }
.ring span { width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: #06182e; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 800 1.7cqw "Segoe UI", sans-serif; }
.ring small { font-size: .65cqw; color: #7dd3fc; letter-spacing: .1em; }
.acc { display: grid; grid-template-columns: 9cqw 1fr 5cqw 8cqw; gap: 1cqw; align-items: center; padding: .4cqw 0; }
.acc span { color: #7dd3fc; letter-spacing: .1em; font-size: 1.1cqw; }
.acc small { color: #94a3b8; text-align: right; }
.bar { height: .8cqw; background: rgba(255, 255, 255, .1); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #6d28d9, #2de2e6); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(16cqw, 1fr)); gap: .9cqw; }
.badge { position: relative; display: flex; flex-direction: column; gap: .3cqw; padding: .9cqw 1cqw; background: rgba(8, 30, 56, .7); border: 1px solid rgba(125, 211, 252, .2); opacity: .6; }
.badge > i { position: absolute; top: .6cqw; right: .8cqw; font-style: normal; color: #64748b; }
.badge.done { opacity: 1; border-color: #facc15; box-shadow: inset 0 0 1.4cqw rgba(250, 204, 21, .15); }
.badge.done > i { color: #facc15; }
.badge small { color: #7dd3fc; }
.badge span { color: #cbd5e1; font-size: 1cqw; }
.badge.done .bar i { background: #facc15; }
.medal { font-style: normal; display: inline-grid; place-items: center; width: 2.2cqw; height: 2.2cqw; margin-right: .5cqw; font-weight: 800; background: rgba(255, 255, 255, .1); border-radius: 50%; }
.medal.m0 { background: #facc15; color: #1a1400; }
.medal.m1 { background: #cbd5e1; color: #0f172a; }
.medal.m2 { background: #d6894a; color: #1a0d00; }
.you { display: flex; align-items: baseline; gap: 1.4cqw; padding: .9cqw 1.4cqw; background: linear-gradient(90deg, rgba(6, 182, 212, .3), rgba(88, 28, 180, .25)); border-left: 4px solid #2de2e6; }
.you small { color: #7dd3fc; letter-spacing: .12em; }
.you b { font-size: 2cqw; color: #facc15; }
.row b { color: #e0f7ff; }
#anticheat { background: radial-gradient(ellipse at center, #06162b, #02050e); }
.aclist { list-style: none; padding: 0; margin: 0; font-size: 1.5cqw; color: #64748b; }
.aclist li { margin: .6cqw 0; } .aclist b { display: inline-block; width: 2cqw; }
.aclist .ok { color: #e6f7ff; } .aclist .ok b { color: #22c55e; }
.aclist .warn b { color: #facc15; } .aclist .bad { color: #fca5a5; } .aclist .bad b { color: #ef4444; }
.acbar { width: 30cqw; height: 1cqw; border: 2px solid #22d3ee; } .acbar i { display: block; height: 100%; width: 0; background: #22d3ee; transition: width .3s; }

#skinList { display: grid; grid-template-columns: repeat(7, 12.5cqw); gap: .7cqw; justify-content: center; width: auto; }
#skinList button { padding: .5cqw .3cqw .6cqw; font-size: .95cqw; }
#skinList img { height: 4.2cqw; max-width: 100%; object-fit: contain; margin-top: .2cqw; }

/* Duo Warfare main menu (artwork is a 16:9 poster, UI is laid out in percentages of it) */
#menu.dw { display: block; background: none; backdrop-filter: none; padding: 0; overflow: hidden; }
#menu .dwbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
#menu .dwtop button, #menu .dwcards button { all: unset; box-sizing: border-box; position: absolute; cursor: pointer; clip-path: none; transition: filter .15s, transform .15s; }
#menu .dwtop button.hidden { display: none !important; }
#menu .dwtop button { top: 2.6%; width: 10.1%; height: 5.9%; }
#menu .dwtop button#hubBtn { width: 10.3%; }
#menu .dwtop button img { position: absolute; inset: 0; width: 100%; height: 100%; }
#menu .dwtop button b { position: absolute; left: 36%; top: 50%; transform: translateY(-50%); font: 700 1.05cqw "Segoe UI", system-ui, sans-serif; letter-spacing: .08em; color: #fff; white-space: nowrap; }
#menu .dwcards button { width: 35.2%; height: 11.85%; }
#menu .dwcards button img { position: absolute; inset: 0; width: 100%; height: 100%; }
#menu .dwcards button b { position: absolute; left: 20.2%; top: 20%; font: 800 1.95cqw "Segoe UI", system-ui, sans-serif; letter-spacing: .04em; color: #fff; text-shadow: 0 .1cqw .4cqw #000; }
#menu .dwcards button small { position: absolute; left: 20.2%; top: 60%; font: 500 1.05cqw "Segoe UI", system-ui, sans-serif; color: #cbd5e1; text-shadow: 0 .1cqw .3cqw #000; }
#menu .dwtop button:hover, #menu .dwcards button:hover { filter: brightness(1.3) saturate(1.2); transform: translateY(-.15cqw); }
#menu .dwtop button:active, #menu .dwcards button:active { transform: translateY(.1cqw); }
#menu .dwtag { position: absolute; left: 0; right: 0; top: 39.6%; margin: 0; text-align: center; font: 600 1.05cqw "Segoe UI", system-ui, sans-serif; letter-spacing: .38em; color: #cbd5e1; text-shadow: 0 0 .6cqw #000; }
#menu .dwdiff { position: absolute; left: 2.4%; top: 85.4%; display: flex; flex-direction: column; gap: .7cqw; }
#menu .dwdiff span { font: 700 1cqw "Segoe UI", system-ui, sans-serif; letter-spacing: .12em; color: #94a3b8; }
#menu .dwdiff #difficulty { display: flex; gap: .9cqw; }
#menu .dwdiff button { all: unset; box-sizing: border-box; cursor: pointer; width: 10.2cqw; height: 3.4cqw; display: grid; place-items: center; font: 400 1.2cqw "Russo One", "Arial Black", sans-serif; letter-spacing: .1em; color: #cbd5e1; border: 0; border-radius: 0; background: url("img/ui/btn_steel.png") center / 100% 100% no-repeat; text-shadow: 0 1px 2px #000; margin-bottom: 0; }
#menu .dwdiff button.sel { color: #fff; border-color: #7dd3fc; filter: brightness(1.25) saturate(1.3); transform: translateY(.25cqw); }
#menu .dwfoot { position: absolute; right: 2.4%; bottom: 3%; display: flex; flex-direction: column; align-items: flex-end; gap: .4cqw; text-shadow: 0 0 .5cqw #000; }
#menu .dwfoot .tag { font-size: 1.1cqw; }
#menu .dwfoot .link { font-size: 1.05cqw; }

/* hover rocket */
#menu .dwtop button, #menu .dwcards button { overflow: hidden; }
#menu .dwtop button::after, #menu .dwcards button::after { content: ""; position: absolute; top: 50%; left: 0; width: 46px; height: 18px; margin-top: -9px; opacity: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 18'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23475a78'/%3E%3Cstop offset='.3' stop-color='%23f3f8ff'/%3E%3Cstop offset='.6' stop-color='%23a2b0c8'/%3E%3Cstop offset='1' stop-color='%23202c42'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a31616'/%3E%3Cstop offset='.3' stop-color='%23ff8f7a'/%3E%3Cstop offset='.6' stop-color='%23e0302a'/%3E%3Cstop offset='1' stop-color='%23560a0c'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ff7a1a' stop-opacity='0'/%3E%3Cstop offset='.7' stop-color='%23ffb84a'/%3E%3Cstop offset='1' stop-color='%23fff6c8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 9Q6 4 13 5.5V12.5Q6 14 0 9Z' fill='url(%23f)'/%3E%3Cpath d='M15 5 12 0h5l4 5ZM15 13l-3 5h5l4-5Z' fill='%23c73a30'/%3E%3Crect x='13' y='4' width='18' height='10' fill='url(%23s)'/%3E%3Cpath d='M31 4Q40 4.5 46 9 40 13.5 31 14Z' fill='url(%23r)'/%3E%3Ccircle cx='22' cy='9' r='2.6' fill='%23123a5c' stroke='%23c9dcf0' stroke-width='.8'/%3E%3C/svg%3E") no-repeat center / contain; }
#menu .dwtop button:hover::after, #menu .dwcards button:hover::after { animation: rocketFly .7s cubic-bezier(.5, 0, .3, 1) 1; }
@keyframes rocketFly { 0% { left: -50px; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

#fsBtn { position: fixed; right: 10px; bottom: 10px; z-index: 60; font-size: 13px; padding: 6px 12px; border-radius: 10px; --depth: 3px; letter-spacing: .04em; margin-bottom: 0; }
.native #fsBtn { display: none; }