/* Swarm Zero: a WebGL canvas fills the stage; the HUD, the upgrade cards and the menus are HTML over it */
.sz { display: flex; flex-direction: column; color: #dfe9ff; --sz-top: 48px; }
.sz-stage { position: relative; width: 100%; height: min(78vh, 700px); min-height: 380px; background: #04060f; overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
@media (max-width: 600px) { .sz-stage { height: auto; aspect-ratio: 3 / 4; max-height: 76vh; min-height: 0; } }
#sz-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

/* HUD */
.sz-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sz-top { position: absolute; left: 0; right: 0; top: 0; height: var(--sz-top); display: flex; align-items: center; gap: 12px; padding: 0 8px 0 14px;
  background: linear-gradient(180deg, rgba(4,6,15,0.78), rgba(4,6,15,0)); }
.sz-top > button { pointer-events: auto; }
.sz-stat, .sz-clock { display: flex; flex-direction: column; line-height: 1.05; min-width: 44px; }
.sz-clock { align-items: center; }
.sz-k { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8aa3c4; white-space: nowrap; }
.sz-stat b { font-size: 21px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sz-clock b { font-size: 19px; font-weight: 800; color: #ffd166; font-variant-numeric: tabular-nums; }
.sz-clock.is-zero b { color: #ff6b81; text-shadow: 0 0 12px rgba(255,107,129,0.7); }
.sz-clock.is-over b { color: #b9a6ff; }
.sz-combo { display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: 0.35; transition: opacity .2s; min-width: 38px; }
.sz-combo.on { opacity: 1; }
.sz-combo b { font-size: 18px; font-weight: 900; color: #ffd166; text-shadow: 0 0 10px rgba(255,209,102,0.6); font-variant-numeric: tabular-nums; line-height: 1; display: inline-block; }
.sz-combo.hot b { color: #ff6b81; text-shadow: 0 0 12px rgba(255,107,129,0.8); }
.sz-combo b.sz-pop { animation: sz-pop .28s cubic-bezier(.3,1.6,.5,1); }
@keyframes sz-pop { 40% { transform: scale(1.5); } }
.sz-combo i { display: block; width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.14); overflow: hidden; }
.sz-combo i span { display: block; height: 100%; background: linear-gradient(90deg, #ff6b81, #ffd166); transform-origin: left center; }
.sz-sp { flex: 1 1 auto; }
.sz-tool { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid #1c2b4a; background: rgba(11,19,40,0.8);
  color: #bfe0ff; cursor: pointer; touch-action: manipulation; padding: 0; transition: border-color .15s, color .15s, opacity .15s; }
.sz-tool svg { width: 19px; height: 19px; }
@media (hover: hover) { .sz-tool:hover:not(:disabled) { border-color: #55d6ff; color: #fff; } }
.sz-tool:focus-visible { outline: 2px solid #55d6ff; outline-offset: 2px; }
.sz-tool:disabled { opacity: 0.35; cursor: default; }
#sz-pause .pl { display: none; } #sz-pause.is-paused .pl { display: inline; } #sz-pause.is-paused .pz { display: none; }
#sz-sound .off { display: none; } #sz-sound[aria-pressed="true"] { color: #6f84a3; } #sz-sound[aria-pressed="true"] .on { display: none; } #sz-sound[aria-pressed="true"] .off { display: inline; }
.sz-xp { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(85,214,255,0.12); }
.sz-xp span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #2f9bff, #55d6ff 60%, #b8f6ff); transform-origin: left center; transform: scaleX(0); box-shadow: 0 0 10px rgba(85,214,255,0.7); }
.sz-lvl { position: absolute; left: 14px; top: calc(var(--sz-top) + 2px); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #9fecff; text-shadow: 0 1px 4px #04060f; }
.sz-boss[hidden], .sz-banner[hidden] { display: none; }
.sz-boss { position: absolute; left: 50%; top: calc(var(--sz-top) + 4px); transform: translateX(-50%); width: min(60%, 360px); text-align: center; }
.sz-boss span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #ff9fb0; text-shadow: 0 1px 4px #04060f; margin-bottom: 3px; }
.sz-boss i { display: block; height: 8px; border-radius: 4px; background: rgba(20,8,16,0.8); border: 1px solid rgba(255,107,129,0.55); overflow: hidden; }
.sz-boss i span { height: 100%; margin: 0; background: linear-gradient(90deg, #ff3d5a, #ff9a4d); transform-origin: left center; }
.sz-banner { position: absolute; left: 0; right: 0; top: 24%; text-align: center; pointer-events: none; animation: sz-banner 2.6s ease-out both; }
.sz-banner b { display: block; font-size: clamp(22px, 5.4vw, 40px); font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 0 22px rgba(85,214,255,0.8), 0 2px 8px #04060f; }
.sz-banner span { display: block; margin-top: 4px; font-size: clamp(12px, 2.6vw, 15px); font-weight: 700; letter-spacing: 0.08em; color: #bfe0ff; text-shadow: 0 1px 6px #04060f; }
.sz-banner.warn b { text-shadow: 0 0 22px rgba(255,107,129,0.9), 0 2px 8px #04060f; color: #ffe1e6; }
.sz-banner.gold b { text-shadow: 0 0 22px rgba(255,209,102,0.9), 0 2px 8px #04060f; color: #fff3c4; }
@keyframes sz-banner { 0% { opacity: 0; transform: scale(1.25); } 10% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.sz-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 10px; padding: 0 10px 10px 12px;
  background: linear-gradient(0deg, rgba(4,6,15,0.7), rgba(4,6,15,0)); }
.sz-hull { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 7px; width: clamp(120px, 26%, 220px); }
.sz-hull i { display: block; height: 10px; border-radius: 5px; background: rgba(8,20,16,0.85); border: 1px solid rgba(125,255,176,0.5); overflow: hidden; }
.sz-hull i span { display: block; height: 100%; background: linear-gradient(90deg, #3ddc84, #b8ffd6); transform-origin: left center; transition: transform .12s; }
.sz-hull.low i { border-color: #ff6b81; animation: sz-low .7s ease-in-out infinite alternate; } .sz-hull.low i span { background: linear-gradient(90deg, #ff3d5a, #ff9a4d); }
@keyframes sz-low { to { box-shadow: 0 0 12px rgba(255,107,129,0.9); } }
.sz-hull b { font-size: 13px; font-weight: 800; color: #eafff2; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px #04060f; min-width: 2.2em; }
.sz-counts { display: flex; gap: 10px; align-items: center; }
.sz-count { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: #bfe0ff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px #04060f; }
.sz-count svg { width: 13px; height: 13px; color: #55d6ff; } .sz-count-warm svg { color: #ffd166; }
.sz-build { display: grid; grid-template-columns: repeat(5, auto); gap: 4px; justify-content: end; }
.sz-bi { position: relative; width: 28px; height: 28px; }
.sz-bi canvas { display: block; width: 100%; height: 100%; }
.sz-bi em { position: absolute; right: -2px; bottom: -3px; min-width: 13px; padding: 0 2px; border-radius: 6px; background: #04060f; border: 1px solid #1c2b4a; font-size: 9.5px; font-weight: 800; font-style: normal; line-height: 12px; text-align: center; color: #dfe9ff; }
.sz-bi.max em { color: #1a1200; background: #ffd166; border-color: #ffd166; }
.sz-bi.sz-new { animation: sz-pop .4s cubic-bezier(.3,1.6,.5,1); }

/* the thumb stick only shows while a finger is down */
.sz-stick[hidden] { display: none; }
.sz-stick { position: absolute; z-index: 2; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(85,214,255,0.35); background: rgba(85,214,255,0.06); pointer-events: none; }
.sz-stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(159,236,255,0.4); border: 2px solid rgba(191,243,255,0.8); }

/* level-up cards */
.sz-cards[hidden], .sz-overlay[hidden], .sz-toast[hidden] { display: none; }
.sz-cards { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px;
  background: radial-gradient(ellipse at center, rgba(4,6,15,0.6), rgba(4,6,15,0.86)); animation: sz-fade .18s ease-out both; overflow: auto; }
@keyframes sz-fade { from { opacity: 0; } }
.sz-cards-h { text-align: center; }
.sz-cards-h b { display: block; font-size: clamp(22px, 4.6vw, 32px); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: 0 0 20px rgba(85,214,255,0.8); }
.sz-cards-h span { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: #8aa3c4; }
.sz-cardrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 720px); }
.sz-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 12px 14px; min-height: 196px; border-radius: 16px; border: 1.5px solid #24406e;
  background: linear-gradient(180deg, #101c3a, #0b1328); color: #dfe9ff; font: inherit; text-align: center; cursor: pointer; touch-action: manipulation;
  transition: transform .12s, border-color .12s, box-shadow .12s; animation: sz-card .28s cubic-bezier(.2,1.2,.4,1) both; }
.sz-card:nth-child(2) { animation-delay: .05s; } .sz-card:nth-child(3) { animation-delay: .1s; }
@keyframes sz-card { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@media (hover: hover) { .sz-card:hover { transform: translateY(-3px); border-color: #55d6ff; box-shadow: 0 8px 26px rgba(85,214,255,0.22); } }
.sz-card:focus-visible, .sz-card.is-focus { outline: none; border-color: #55d6ff; box-shadow: 0 0 0 2px rgba(85,214,255,0.55), 0 8px 26px rgba(85,214,255,0.22); }
.sz-card.is-locked { pointer-events: none; }
.sz-card canvas { width: 54px; height: 54px; flex: none; }
.sz-card-n { position: absolute; left: 9px; top: 8px; min-width: 20px; height: 20px; border-radius: 6px; border: 1px solid #2a4170; background: #071024; font-size: 11px; font-weight: 800; line-height: 18px; color: #8aa3c4; }
.sz-card-tag { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #55d6ff; }
.sz-card-t { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.15; }
.sz-card-x { font-size: 12.5px; line-height: 1.35; color: #b9c9e6; }
.sz-card-p { margin-top: auto; padding-top: 4px; font-size: 11px; font-weight: 700; color: #ffd166; }
.sz-card-new .sz-card-tag { color: #7dffb0; }
.sz-card-evo { border-color: #ffd166; background: linear-gradient(180deg, #2a2110, #131024); box-shadow: 0 0 22px rgba(255,209,102,0.25); }
.sz-card-evo .sz-card-tag { color: #ffd166; }
.sz-card-sp .sz-card-tag { color: #b9a6ff; }
.sz-cards-f { display: flex; gap: 10px; align-items: center; }
.sz-pend { font-size: 12px; font-weight: 700; color: #8aa3c4; }
@media (max-width: 560px) {
  .sz-cards { gap: 9px; padding: 10px; }
  .sz-stage:has(> .sz-cards:not([hidden])) :is(.sz-stat, .sz-combo, .sz-clock, .sz-lvl) { visibility: hidden; }
  .sz-cardrow { grid-template-columns: 1fr; gap: 8px; }
  .sz-card { display: grid; grid-template-columns: 48px 1fr; grid-template-areas: "ico tag" "ico t" "ico x" "ico p"; align-items: center; justify-items: start; text-align: left; gap: 1px 12px; padding: 10px 12px 10px 14px; min-height: 84px; }
  .sz-card canvas { grid-area: ico; width: 46px; height: 46px; } .sz-card-tag { grid-area: tag; } .sz-card-t { grid-area: t; font-size: 16px; } .sz-card-x { grid-area: x; } .sz-card-p { grid-area: p; padding-top: 1px; }
  .sz-card-n { display: none; }
  .sz-overlay { padding: 8px; } .sz-panel { padding: 14px 14px 12px; } .sz-panel.is-over { padding: 11px 12px 9px; }
  .sz-panel.is-over .sz-sub { margin: 3px 0 4px; } .sz-panel.is-over .sz-final { margin: 4px 0 2px; } .sz-panel.is-over .sz-final b { font-size: 31px; }
  .sz-panel.is-over:has(.sz-newbest) .sz-bestline { display: none; }
  .sz-panel.is-over .sz-bestline, .sz-panel.is-over .sz-downed { margin-top: 6px; } .sz-panel.is-over .sz-grid { margin-top: 8px; gap: 5px; } .sz-panel.is-over .sz-grid > div { padding: 4px 3px 3px; }
  .sz-panel.is-over .sz-chips { margin-top: 6px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .sz-panel.is-over .sz-chips::-webkit-scrollbar { display: none; } .sz-panel.is-over .sz-chips > * { flex: 0 0 auto; white-space: nowrap; }
  .sz-panel.is-over .sz-chips > :first-child { margin-left: auto; } .sz-panel.is-over .sz-chips > :last-child { margin-right: auto; } .sz-panel.is-over .sz-btns { margin-top: 8px; gap: 6px; } .sz-panel.is-over .sz-btn-main { min-height: 44px; flex: 1 1 100%; } .sz-panel.is-over .sz-btn { min-height: 42px; }
}

/* menus */
.sz-overlay { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 12px; background: radial-gradient(ellipse at center, rgba(4,6,15,0.5), rgba(4,6,15,0.84)); overflow: auto; }
.sz-overlay.is-title { background: radial-gradient(ellipse at center, rgba(4,6,15,0.42), rgba(4,6,15,0.78)); }
.sz-panel { width: min(100%, 400px); max-height: 100%; overflow: auto; box-sizing: border-box; padding: 20px 20px 16px; border-radius: 20px; border: 1px solid #1c2b4a; background: rgba(11,19,40,0.94);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(85,214,255,0.06) inset; text-align: center; animation: sz-panel .22s ease-out both; }
.sz-panel.is-wide { width: min(100%, 470px); }
@keyframes sz-panel { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.sz-logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sz-logo canvas { width: 46px; height: 46px; }
.sz-title { margin: 0; font-size: clamp(27px, 7vw, 38px); font-weight: 900; letter-spacing: 0.04em; line-height: 1.05; color: #fff; text-shadow: 0 0 24px rgba(85,214,255,0.55); }
.sz-title span { color: #ffd166; text-shadow: 0 0 24px rgba(255,209,102,0.55); }
.sz-title-s { font-size: clamp(22px, 5.6vw, 29px); }
.sz-title.warn { text-shadow: 0 0 24px rgba(255,107,129,0.6); } .sz-title.gold { text-shadow: 0 0 24px rgba(255,209,102,0.7); color: #fff3c4; }
.sz-sub { margin: 6px 0 14px; font-size: 14px; line-height: 1.4; color: #b9c9e6; }
.sz-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 13px; border: 1px solid #1c2b4a; background: #071024; }
.sz-segb { min-height: 40px; padding: 0 4px; border: 0; border-radius: 9px; background: transparent; color: #8aa3c4; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.sz-segb[aria-checked="true"] { background: linear-gradient(180deg, #1d3a6a, #14294f); color: #fff; box-shadow: 0 0 0 1px rgba(85,214,255,0.55) inset; }
.sz-segb:focus-visible, .sz-btn:focus-visible, .sz-link:focus-visible, .sz-toggle:focus-visible { outline: 2px solid #55d6ff; outline-offset: 2px; }
.sz-modeinfo { margin: 9px 0 0; min-height: 2.7em; font-size: 12.5px; line-height: 1.35; color: #8aa3c4; }
.sz-modeinfo b { color: #ffd166; font-weight: 700; }
.sz-btns { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 12px; }
.sz-btn { min-height: 44px; padding: 0 18px; border-radius: 13px; border: 1px solid #2a4170; background: #101c3a; color: #dfe9ff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; touch-action: manipulation; transition: border-color .15s, transform .1s, filter .15s; }
.sz-btn kbd { margin-left: 6px; font: inherit; font-size: 11px; font-weight: 800; padding: 1px 5px; border-radius: 5px; border: 1px solid currentColor; opacity: 0.6; }
@media (hover: hover) { .sz-btn:hover:not(:disabled) { border-color: #55d6ff; } .sz-btn-main:hover:not(:disabled) { filter: brightness(1.08); } }
.sz-btn:active:not(:disabled) { transform: scale(0.97); }
.sz-btn:disabled { opacity: 0.4; cursor: default; }
.sz-btn-main { flex: 1 1 100%; min-height: 52px; border: 0; background: linear-gradient(180deg, #7de3ff, #37b8ee); color: #03101c; font-size: 18px; font-weight: 900; letter-spacing: 0.03em; box-shadow: 0 6px 24px rgba(85,214,255,0.35); }
.sz-btn-warm { border-color: rgba(255,209,102,0.6); color: #ffe6a8; }
.sz-links { display: flex; justify-content: center; gap: 2px; margin-top: 8px; flex-wrap: wrap; }
.sz-link { min-height: 40px; padding: 0 11px; border: 0; background: transparent; color: #9fcfff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; border-radius: 9px; touch-action: manipulation; }
@media (hover: hover) { .sz-link:hover { color: #fff; background: rgba(85,214,255,0.08); } }
.sz-bestline { margin: 10px 0 0; font-size: 13px; color: #8aa3c4; } .sz-bestline b { color: #fff; font-variant-numeric: tabular-nums; }
.sz-final { margin: 10px 0 4px; }
.sz-final b { display: block; font-size: clamp(34px, 9vw, 46px); font-weight: 900; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(85,214,255,0.5); }
.sz-newbest { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: #ffd166; color: #1a1200; font-size: 11px; font-weight: 900; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; }
.sz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.sz-grid > div { padding: 7px 4px 6px; border-radius: 11px; background: #071024; border: 1px solid #16233f; }
.sz-grid b { display: block; margin-top: 2px; font-size: 16px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.sz-downed { margin: 10px 0 0; font-size: 13px; color: #8aa3c4; } .sz-downed b { color: #ff9fb0; }
.sz-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 10px; }
.sz-chip { padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,209,102,0.5); background: rgba(255,209,102,0.1); color: #ffe6a8; font-size: 11.5px; font-weight: 700; }
.sz-how { list-style: none; margin: 12px 0 0; padding: 0; text-align: left; display: grid; gap: 8px; }
.sz-how li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; font-size: 13.5px; line-height: 1.38; color: #cfdcf5; }
.sz-how canvas { width: 34px; height: 34px; } .sz-how b { color: #fff; }
.sz-rows { display: grid; gap: 6px; margin-top: 12px; }
.sz-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 12px 0 14px; border-radius: 12px; border: 1px solid #16233f; background: #071024; color: #dfe9ff; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; text-align: left; touch-action: manipulation; }
.sz-toggle i { position: relative; flex: none; width: 42px; height: 24px; border-radius: 12px; background: #1c2b4a; transition: background .15s; }
.sz-toggle i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #8aa3c4; transition: transform .15s, background .15s; }
.sz-toggle[aria-checked="true"] i { background: #1f6f95; } .sz-toggle[aria-checked="true"] i::after { transform: translateX(18px); background: #9fecff; }
.sz-rec { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; margin-top: 12px; text-align: left; font-size: 13.5px; color: #b9c9e6; }
.sz-rec b { color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.sz-h3 { margin: 14px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #8aa3c4; }
.sz-evos { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.sz-evos span { display: block; aspect-ratio: 1; border-radius: 9px; border: 1px solid #16233f; background: #071024; opacity: 0.32; filter: grayscale(1); }
.sz-evos span.found { opacity: 1; filter: none; border-color: rgba(255,209,102,0.55); }
.sz-evos canvas { display: block; width: 100%; height: 100%; }
.sz-note { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: #8aa3c4; }

.sz-toast { position: absolute; left: 50%; bottom: 64px; z-index: 4; transform: translateX(-50%); max-width: 86%; padding: 8px 14px; border-radius: 999px; background: rgba(11,19,40,0.92); border: 1px solid #2a4170; color: #dfe9ff;
  font-size: 13px; font-weight: 700; text-align: center; pointer-events: none; animation: sz-toast 2.4s ease-out both; }
.sz-toast.gold { border-color: rgba(255,209,102,0.7); color: #ffe6a8; }
@keyframes sz-toast { 0% { opacity: 0; transform: translate(-50%, 8px); } 8% { opacity: 1; transform: translate(-50%, 0); } 82% { opacity: 1; } 100% { opacity: 0; } }

.sz-help { margin-top: 10px; }
.sz-help kbd { display: inline-block; min-width: 1.5em; padding: 1px 5px; margin: 0 1px; border-radius: 5px; border: 1px solid #2a4170; background: #0b1328; font: inherit; font-size: 0.86em; font-weight: 700; text-align: center; color: #dfe9ff; }
.sz-help .hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .sz-help .hint-kb { display: none; } .sz-help .hint-touch { display: inline; } }
.sz-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* short stages (a phone on its side): tighten everything */
.sz-short { --sz-top: 42px; }
.sz-short .sz-stat b { font-size: 17px; } .sz-short .sz-clock b { font-size: 16px; }
.sz-short .sz-panel { padding: 12px 16px 10px; width: min(100%, 520px); }
.sz-short .sz-title { font-size: 24px; } .sz-short .sz-logo canvas { width: 34px; height: 34px; }
.sz-short .sz-sub { margin: 3px 0 8px; font-size: 12.5px; }
.sz-short .sz-modeinfo { margin-top: 5px; min-height: 0; font-size: 12px; }
.sz-short .sz-btns { margin-top: 8px; } .sz-short .sz-btn-main { min-height: 44px; flex: 1 1 auto; }
.sz-short .sz-links { margin-top: 2px; } .sz-short .sz-bestline { margin-top: 5px; }
.sz-short .sz-final { margin: 4px 0 0; } .sz-short .sz-final b { font-size: 28px; }
.sz-short .sz-grid { grid-template-columns: repeat(6, 1fr); margin-top: 6px; } .sz-short .sz-grid b { font-size: 14px; }
.sz-short .sz-chips, .sz-short .sz-downed { margin-top: 6px; }
.sz-short .sz-how { grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 8px; } .sz-short .sz-how li { font-size: 12.5px; }
.sz-short .sz-rows { grid-template-columns: 1fr 1fr; margin-top: 8px; }
.sz-short .sz-cards { gap: 6px; padding: 8px; justify-content: flex-start; }
.sz-short .sz-stage:has(> .sz-cards:not([hidden])) :is(.sz-stat, .sz-combo, .sz-clock, .sz-lvl) { visibility: hidden; }
.sz-short .sz-cards-h b { font-size: 19px; } .sz-short .sz-cards-h span { display: none; }
.sz-short .sz-cardrow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 760px); }
.sz-short .sz-card { display: flex; flex-direction: column; text-align: center; align-items: center; min-height: 0; padding: 8px 8px 8px; gap: 2px; }
.sz-short .sz-card canvas { width: 38px; height: 38px; } .sz-short .sz-card-t { font-size: 14.5px; } .sz-short .sz-card-x { font-size: 11.5px; line-height: 1.28; }
.sz-short .sz-banner { top: 20%; } .sz-short .sz-bi { width: 24px; height: 24px; }

/* full screen */
.stage.is-immersive .stage-body > .sz { min-height: 0; }
.stage.is-immersive .sz-stage { flex: 1 1 auto; height: auto; aspect-ratio: auto; max-height: none; min-height: 0; }
.stage.is-immersive .sz-help { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sz-cards, .sz-card, .sz-panel, .sz-combo b.sz-pop, .sz-bi.sz-new, .sz-hull.low i { animation: none; }
  .sz-banner { animation: sz-banner-still 2.6s linear both; } .sz-toast { animation: sz-banner-still 2.4s linear both; }
  .sz-card, .sz-btn { transition: none; }
}
@keyframes sz-banner-still { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }