/* Fixed, non-zoomable frame: the page never scrolls, only the inner lists do. */
html, body { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; margin: 0;
  overscroll-behavior: none; touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; -webkit-touch-callout: none;
  background: #0b1020; color: #e9e6f5; font: 15px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
#root { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
h1 { font-size: 26px; margin: 0; letter-spacing: 0.04em; background: linear-gradient(90deg, #c084fc, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { margin: 0 0 8px; } h3 { margin: 14px 0 6px; font-size: 16px; }
.muted { color: #9a95b3; } .tiny { font-size: 12px; } .error { color: #fb7185; min-height: 1.2em; margin: 4px 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input { background: #171a2e; border: 1px solid #2d3252; color: #fff; border-radius: 10px; padding: 11px 12px; font-size: 15px; width: 100%; }
input:focus { outline: 2px solid #7c3aed55; border-color: #a78bfa; }
.btn { background: #232746; color: #fff; border: 1px solid #3a3f66; border-radius: 12px; padding: 11px 16px; font-size: 15px; font-weight: 600; cursor: pointer; }
.btn.primary { background: linear-gradient(135deg, #7c3aed, #0891b2); border-color: transparent; }
.btn.big { width: 100%; padding: 16px; font-size: 18px; }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn:disabled { opacity: 0.5; }
.link { background: none; border: none; color: #a78bfa; font-size: 13px; cursor: pointer; padding: 6px; }

/* auth */
#auth { align-items: center; justify-content: center; padding: 20px; }
.panel { width: 100%; max-width: 440px; background: #12152a; border: 1px solid #23274a; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.vessel-pick { display: flex; gap: 10px; }
.vessel-pick label { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 12px; border: 1px solid #2d3252; cursor: pointer; }
.vessel-pick label.on { border-color: #a78bfa; background: #1b1737; box-shadow: 0 0 14px #7c3aed55; }
.vessel-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.vessel-pick .vprev { display: block; width: 96px; height: 96px; } .vessel-pick .vprev svg, .vessel-pick .vprev canvas { width: 96px; height: 96px; display: block; }

/* home */
#home header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 6px; }
#admin header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 6px; }
/* The admin page (Tyson, 2026-09-07): sign-ins, practice matches per player and
   every settled PvP result. Its own screen, and the outer frame never scrolls --
   only this inner column does, like every other screen in the app. */
#admin .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 14px calc(18px + env(safe-area-inset-bottom)); }
#admin h2 { font-size: 15px; margin: 16px 0 6px; color: #cbd5e1; letter-spacing: 0.04em; text-transform: uppercase; }
#admin .cards { display: flex; flex-wrap: wrap; gap: 8px; }
#admin .card { flex: 1 1 96px; background: #171a33; border: 1px solid #23274a; border-radius: 12px; padding: 10px 12px; }
#admin .card b { display: block; font-size: 20px; }
#admin .card span { font-size: 11px; color: #9a95b3; letter-spacing: 0.05em; text-transform: uppercase; }
#admin table { width: 100%; border-collapse: collapse; font-size: 13px; }
#admin th { text-align: left; font-weight: 600; color: #9a95b3; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 6px; border-bottom: 1px solid #23274a; }
#admin td { padding: 6px 6px; border-bottom: 1px solid #1b1e39; white-space: nowrap; }
#admin td.name { white-space: normal; word-break: break-word; }
#admin .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#admin .win { color: #86efac; } #admin .draw { color: #fcd34d; } #admin .muted { color: #9a95b3; }
#admin .empty { color: #9a95b3; font-size: 13px; padding: 8px 2px; }
/* the invisible way in, in the slot the install button had once it is installed */
#auth-admin.ghost { opacity: 0; transition: opacity 0.15s; }
#auth-admin.ghost:focus-visible { opacity: 1; outline: 2px solid #a78bfa; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #auth-admin.ghost { transition: none; } }
.hdr-right { display: flex; align-items: center; gap: 4px; }
.pill { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #7c3aed, #0891b2); color: #fff; border: none; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px #7c3aed55; white-space: nowrap; }
.pill svg { flex: none; }
.pill.mode { background: #12152a; border: 1px solid #a78bfa; color: #e9d5ff; box-shadow: none; padding: 6px 10px; letter-spacing: 0.04em; }
#result-mode { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; }
#install { position: absolute; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 15; }
.install-card { background: #12152a; border: 1px solid #23274a; border-radius: 18px; padding: 20px; max-width: 400px; width: 100%; max-height: 100%; overflow-y: auto; }
.install-card h3 { margin: 0 0 4px; font-size: 20px; } .install-card > p.muted, .install-head p.muted { margin: 0; font-size: 13px; }
.install-head { display: flex; gap: 12px; align-items: center; text-align: left; } .install-head img { flex: none; border-radius: 14px; box-shadow: 0 4px 14px #0008; }
.inline-icon { vertical-align: -5px; border-radius: 5px; margin-left: 4px; }
/* the app's name and the install button share the top row (Tyson, 2026-09-06) */
.auth-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.auth-head h1 { flex: none; }
#auth-install { margin: 0; flex: none; } #auth-install img { border-radius: 5px; }
#setup { position: absolute; inset: 0; background: #000b; display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 31; }
.setup-card h3 { margin: 14px 0 8px; font-size: 15px; color: #cbd5e1; }
.setup-card .vessel-pick { gap: 10px; }
.setup-card .vessel-pick label { cursor: pointer; }
.setup-card .seg { justify-content: center; }
/* the landing-page demo: a phone-shaped window under the sign-in form */
/* The sign-in demo sits above the form and takes only the height the form has
   not claimed, so the login below it is always on screen (Tyson, 2026-09-06).
   The frame keeps the phone's shape, so its width follows from that height --
   never the other way round, which is what used to push the form off a short
   screen. On a short screen the panel trims itself (see the media rule below)
   rather than letting either half win. */
#auth { justify-content: center; overflow: hidden; }
#auth .panel { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
#auth-demo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin: 2px 0 0; }
#auth-demo p { text-align: center; margin: 0; flex: none; }
#auth-demo .demo-frame { position: relative; flex: none; height: 120px; aspect-ratio: 390 / 844; width: auto; max-width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid #23274a; background: #0b1020; box-shadow: 0 12px 34px #0009; }
#auth-demo iframe { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; }
#auth-demo iframe.on { opacity: 1; }
/* Short screens: the sign-in panel gives up its roomier spacing so that the
   demo above it and the Sign in button below it are both on screen at once. */
@media (max-height: 780px) {
  #auth { padding: 10px; }
  #auth .panel { gap: 8px; padding: 14px; }
  #auth .vessel-pick .vprev, #auth .vessel-pick .vprev svg, #auth .vessel-pick .vprev canvas { width: 62px; height: 62px; }
  #auth-mode-seg + p.tiny { display: none; }
  #auth-demo p { display: none; }
}
@media (max-height: 620px) {
  #auth h1 { font-size: 21px; }
  #auth .panel > p.muted:first-of-type { display: none; }
  #auth-install { display: none; }
}
.install-card .seg { margin: 14px 0; } .install-card .seg .btn svg, #install-now svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
#install-now { margin: 10px 0 4px; }
.steps { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.steps li { display: flex; align-items: center; gap: 10px; background: #0f1226; border: 1px solid #23274a; border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.35; }
.steps li::before { counter-increment: s; content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; background: #7c3aed; color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.steps .ico { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #1b1737; display: grid; place-items: center; color: #c4b5fd; }
.steps .ico svg { width: 22px; height: 22px; } .steps b { color: #fff; }
.install-note { color: #9a95b3; font-size: 13px; margin: 8px 0 12px; }
/* iPhone install walkthrough: pick your browser, then drawn steps for it */
.install-card .ask { margin: 14px 0 8px; font-size: 14px; font-weight: 600; }
.browsers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.browsers .btn { flex: 1 1 30%; min-width: 92px; }
.browsers .btn.on { border-color: #22d3ee; background: #0b2a33; color: #a5f3fc; }
.picsteps li { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 6px 10px; }
.picsteps .say { grid-column: 2; }
.picwrap { grid-column: 2; display: block; background: #0b1020; border: 1px solid #23274a; border-radius: 10px; padding: 8px; margin-top: 4px; }
.pic { width: 100%; height: auto; display: block; }
.pic.wide { width: 100%; max-width: 300px; margin: 4px auto 10px; }
.cant { background: #2a1020; border: 1px solid #f43f5e66; color: #fda4af; border-radius: 12px; padding: 12px; margin: 4px 0 10px; font-size: 14px; line-height: 1.4; }
.cant b { color: #fff; }
#copy-link { width: 100%; margin-bottom: 10px; }
.install-ok { display: flex; align-items: center; gap: 10px; background: #0f2a1e; border: 1px solid #14532d; color: #bbf7d0; border-radius: 12px; padding: 12px; margin: 12px 0; font-size: 14px; } .install-ok svg { width: 22px; height: 22px; flex: none; }
#install-close { width: 100%; }
#home main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px 12px; overscroll-behavior: contain; }
#tabs { display: flex; border-top: 1px solid #23274a; background: #0f1226; padding-bottom: env(safe-area-inset-bottom); }
#tabs button { flex: 1; background: none; border: none; color: #8f8aab; padding: 12px 2px; font-size: 12px; font-weight: 600; }
#tabs button.active { color: #fff; border-top: 2px solid #a78bfa; margin-top: -1px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.item { position: relative; background: #12152a; border: 1px solid #23274a; border-radius: 14px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #ddd; cursor: pointer; }
.item .nm { font-size: 11px; line-height: 1.2; text-align: center; min-height: 2.4em; }
.item .qty { position: absolute; top: 6px; right: 8px; font-size: 11px; color: #c4b5fd; font-weight: 700; }
.item .eq { position: absolute; top: 6px; left: 8px; font-size: 10px; color: #67e8f9; }
.item.t2 { border-color: #7c3aed88; } .item.t3 { border-color: #f59e0b99; box-shadow: 0 0 12px #f59e0b33; }
.detail-card.t2 { border-color: #7c3aed; } .detail-card.t3 { border-color: #f59e0b; }
.fslots { display: flex; gap: 10px; justify-content: center; margin: 0 -12px; padding: 8px 12px; position: sticky; top: -8px; z-index: 5; background: linear-gradient(180deg, #0b1020 82%, #0b102000); }
.fslot { width: 100px; height: 112px; border: 2px dashed #3a3f66; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; text-align: center; padding: 4px; }
.fslot.filled { border-style: solid; border-color: #a78bfa; background: #1b1737; }
.fslot.picking { border-color: #67e8f9; box-shadow: 0 0 0 3px #67e8f944; }
.fslot .ph { font-size: 28px; color: #3a3f66; }
/* z-index 14: above the sticky loadout slots (5) and rematch bar (6) — on an iPad they painted over the card — below the install sheet (15), toasts (20) and the welcome (30) */
#detail { position: absolute; inset: 0; z-index: 14; background: #000a; display: flex; align-items: center; justify-content: center; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); }
.detail-card { background: #12152a; border: 1px solid #23274a; border-radius: 18px; padding: 20px; max-width: 380px; width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; text-align: center; box-shadow: 0 14px 40px #000a; }
.detail-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; text-align: left; margin: 12px 0; }
.detail-card dt { color: #9a95b3; } .detail-card .tier { color: #c4b5fd; font-size: 13px; margin: 2px 0 6px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; } td, th { padding: 6px 4px; text-align: left; border-bottom: 1px solid #23274a; } th { color: #9a95b3; font-weight: 600; }
#home:has(#detail:not([hidden])) ~ #toast, #home:has(#welcome:not([hidden])) ~ #toast { bottom: auto; top: max(14px, env(safe-area-inset-top)); }
#toast { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); background: #2d1b69; color: #fff; padding: 10px 16px; border-radius: 12px; max-width: 90%; z-index: 20; box-shadow: 0 6px 20px #0008; }

/* battle */
#battle { background: #05070f; }
.hud { display: flex; align-items: center; gap: 8px; padding: 6px 12px; height: 40px; }
.hud .name { font-weight: 700; min-width: 60px; font-size: 13px; }
.hud .hp { font-variant-numeric: tabular-nums; width: 34px; text-align: right; font-size: 13px; }
/* health bars: a glossy, ten-segment gauge; the chunk just lost lingers as a pale
   ghost and drains a moment later, and the bar pulses when a player is nearly out */
.bar { flex: 1; height: 16px; background: #0b0e1f; border-radius: 8px; overflow: hidden; position: relative; border: 1px solid #2b3060; box-shadow: inset 0 2px 4px #000a; }
.bar div { height: 100%; width: 100%; }
.bar .ghost { position: absolute; inset: 0; background: #ffffff66; transition: width 0.9s ease-out 0.35s; }
.bar .fill { position: relative; transition: width 0.15s; }
.bar.opp .fill { background: linear-gradient(90deg, #f43f5e, #fb923c); box-shadow: 0 0 10px #f43f5e99; }
.bar.me .fill { background: linear-gradient(90deg, #22d3ee, #a3e635); box-shadow: 0 0 10px #22d3ee99; }
.bar::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1.5px), #0b1020cc calc(10% - 1.5px) 10%); pointer-events: none; z-index: 2; }
.bar::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(180deg, #ffffff4d, transparent); border-radius: 8px 8px 0 0; pointer-events: none; z-index: 2; }
.bar.low .fill { animation: hplow 0.7s ease-in-out infinite; }
@keyframes hplow { 50% { filter: brightness(1.7) saturate(1.3); } }
.arena-wrap { flex: 1; position: relative; min-height: 0; display: flex; justify-content: center; }
#arena-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#arena-bg[hidden] { display: none; }
/* positioned on purpose: WebKit paints an in-flow <svg> underneath the absolutely placed background, and
   only will-change used to lift it -- which Chrome on iOS (WebKit too) never got (2026-09-08) */
#arena { position: relative; z-index: 0; height: 100%; width: 100%; touch-action: none; display: block; }
#arena.hit { animation: shake 0.18s; }
@keyframes shake { 25% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }
.mid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0.55; }
#timer { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
#battle-status { position: absolute; inset: auto 16px 40% 16px; text-align: center; background: #12152acc; padding: 12px; border-radius: 12px; }
/* battle controls: FIRE and SPECIAL on the left, weapon slots in the middle, the movement pad on the right */
#controls { display: flex; align-items: stretch; gap: 8px; padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); height: 176px; user-select: none; }
.btn-col { display: flex; flex-direction: column; gap: 8px; width: 96px; flex: none; }
.pad-btn { flex: 1; border-radius: 18px; border: 2px solid #3a3f66; background: #12152a; color: #fff; font-weight: 800; letter-spacing: 0.08em; font-size: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; touch-action: none; position: relative; overflow: hidden; }
.pad-btn.fire { background: radial-gradient(circle at 50% 35%, #7c3aed, #3b0764 75%); border-color: #a78bfa; box-shadow: 0 0 18px #7c3aed66, inset 0 -6px 12px #0006; }
.pad-btn.fire.active { transform: scale(0.96); box-shadow: 0 0 28px #c084fc, inset 0 0 18px #fff4; background: radial-gradient(circle at 50% 35%, #a78bfa, #6d28d9 75%); }
/* auto-fire on: the button stays lit gold and breathes; a hand-held heavy shell fills it as it charges */
.pad-btn.fire.auto { transform: none; border-color: #fde68a; background: radial-gradient(circle at 50% 35%, #b45309, #7c2d12 75%); box-shadow: 0 0 24px #fbbf24aa, inset 0 0 14px #fff3; animation: autoglow 1.4s ease-in-out infinite; }
@keyframes autoglow { 50% { box-shadow: 0 0 34px #fde68a, inset 0 0 18px #fff5; } }
.pad-btn.fire .sub { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; position: relative; z-index: 1; }
.pad-btn.fire > span:first-child { position: relative; z-index: 1; }
.pad-btn.fire::before { content: ''; position: absolute; inset: 0; background: conic-gradient(#fde68a var(--charge, 0%), transparent 0); opacity: 0.45; pointer-events: none; }
.pad-btn.fire.charged { box-shadow: 0 0 34px #fde68a, inset 0 0 20px #fff6; animation: autoglow 0.5s ease-in-out infinite; }
#auto-tip { position: absolute; top: 16%; left: 50%; transform: translateX(-50%); width: min(88%, 320px); background: #12152aee; border: 1px solid #fbbf24aa; border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.4; color: #e9e6ff; box-shadow: 0 8px 30px #000a; transition: opacity 0.6s; pointer-events: none; z-index: 4; }
#auto-tip b { color: #fde68a; } #auto-tip.fade { opacity: 0; }
.pad-btn.special { background: radial-gradient(circle at 50% 35%, #0e7490, #083344 75%); border-color: #22d3ee; }
.pad-btn.special .art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }
.pad-btn.special .lbl, .pad-btn.special .sn { position: relative; z-index: 1; text-shadow: 0 1px 3px #000, 0 0 10px #000; }
.pad-btn.special .lbl { font-size: 11px; } .pad-btn.special .sn { font-size: 9px; font-weight: 500; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.1em; }
.pad-btn.special.ready { box-shadow: 0 0 22px #22d3ee99; position: relative; }
.pad-btn.special.ready::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; box-shadow: 0 0 30px #67e8f9; opacity: 0.5; animation: spready 1.6s ease-in-out infinite; will-change: opacity; pointer-events: none; }
@keyframes spready { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.pad-btn.special.used, .pad-btn.special.none { opacity: 0.45; filter: grayscale(0.6); animation: none; box-shadow: none; }
.pad-btn.special.used::after, .pad-btn.special.none::after { display: none; }
#slots { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
/* a weapon slot is its ability's picture, edge to edge, with the name on a scrim along the foot */
.slot { flex: 1; position: relative; min-height: 0; background: #12152a; border: 2px solid #23274a; border-radius: 12px; padding: 0; overflow: hidden; color: #eee; display: block; text-align: left; }
.slot.active { border-color: #a78bfa; box-shadow: 0 0 0 1px #a78bfa66, 0 0 14px #a78bfa55; }
.slot .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.slot .n { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 6px 3px; font-size: 10px; line-height: 1.1; background: linear-gradient(180deg, transparent, #000d 75%); text-shadow: 0 1px 2px #000; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slot .cd { position: absolute; left: 0; right: 0; bottom: 0; background: #0009; height: 0; pointer-events: none; }
#pad { position: relative; width: 160px; flex: none; border-radius: 50%; background: radial-gradient(circle, #1b1e33 0%, #12152a 60%, #0b1020 100%); border: 2px solid #3a3f66; touch-action: none; align-self: center; height: 160px; }
#pad .ring { position: absolute; inset: 22px; border-radius: 50%; border: 1px dashed #3a3f66; }
#pad::before, #pad::after { content: ''; position: absolute; left: 50%; top: 50%; background: #3a3f66; }
#pad::before { width: 1px; height: 70%; transform: translate(-50%, -50%); } #pad::after { height: 1px; width: 70%; transform: translate(-50%, -50%); }
#pad .knob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: linear-gradient(135deg, #a78bfa, #22d3ee); box-shadow: 0 4px 16px #0008, 0 0 14px #a78bfa88; pointer-events: none; transition: transform 0.05s; }
#pad.live { border-color: #a78bfa; } #pad.live .knob { box-shadow: 0 4px 16px #0008, 0 0 26px #c084fc; }
/* every pop-up box fits inside the app with a buffer all round and scrolls inside itself when it is
   too tall (Tyson, 2026-09-06): the result panel, the ability card, the install sheet, the welcome
   card and the favourite sheet all follow the same rule — container padding is the buffer, the box
   has max-height 100 % and its own scroller */
#result { align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); text-align: center; }
#result .panel { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
.drop { background: #1b1737; border: 1px solid #7c3aed; border-radius: 14px; padding: 12px; margin: 8px 0; }
.drop h3 { margin: 6px 0 2px; }

.chk { display: flex; gap: 10px; align-items: center; padding: 6px 0; } .chk input { width: 20px; height: 20px; }

/* 3D mode: the health bars and timer are meshes in the scene */
#battle.gl .bar, #battle.gl .mid { display: none; }
#battle.gl { background: #020617; }
.seg { display: flex; gap: 8px; } .seg .btn { flex: 1; } .seg .btn.on { border-color: #a78bfa; background: #1b1737; }

#arena-name { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: #12152acc; border: 1px solid #a78bfa66; font-size: 13px; letter-spacing: 0.06em; color: #e9d5ff; opacity: 0; pointer-events: none; white-space: nowrap; }
#arena-name.show { animation: arena-cap 5s ease forwards; }
@keyframes arena-cap { 0% { opacity: 0; transform: translate(-50%, -8px); } 12% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* countdown pops (2D) */
#arena .cd { transform-box: fill-box; transform-origin: center; }
#arena .cd.pop { animation: cdpop 0.9s cubic-bezier(.2,.9,.3,1.2); }
#arena .cd.fight { fill: #fde68a; stroke: #b45309; font-size: 96px; }
@keyframes cdpop { 0% { transform: scale(2.2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.8; } }

/* intro / outro splash layer */
#fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fff 0%, #c084fc55 30%, transparent 65%); animation: fxflash 0.9s ease-out forwards; }
@keyframes fxflash { 0% { opacity: 1; transform: scale(0.2); } 100% { opacity: 0; transform: scale(1.6); } }
.fx-banner { position: absolute; left: -10%; right: -10%; padding: 10px 0; text-align: center; font-weight: 800; font-size: 26px; letter-spacing: 0.08em; color: #fff; text-shadow: 0 2px 12px #000; transform: skewY(-6deg); opacity: 0; }
.fx-banner.left { top: 24%; background: linear-gradient(90deg, transparent, #7c3aedcc 30%, #7c3aedcc 70%, transparent); animation: fxleft 3.2s cubic-bezier(.2,.8,.2,1) forwards; }
.fx-banner.right { top: 60%; background: linear-gradient(90deg, transparent, #0891b2cc 30%, #0891b2cc 70%, transparent); animation: fxright 3.2s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes fxleft { 0% { transform: translateX(-110%) skewY(-6deg); opacity: 0; } 18% { transform: translateX(0) skewY(-6deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(110%) skewY(-6deg); opacity: 0; } }
@keyframes fxright { 0% { transform: translateX(110%) skewY(-6deg); opacity: 0; } 18% { transform: translateX(0) skewY(-6deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(-110%) skewY(-6deg); opacity: 0; } }
.fx-vs { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); font-size: 64px; font-weight: 900; font-style: italic; background: linear-gradient(180deg, #fde68a, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px #f59e0b); animation: fxvs 3.2s cubic-bezier(.2,.9,.3,1.3) forwards; opacity: 0; }
@keyframes fxvs { 0% { transform: translate(-50%, -50%) scale(4) rotate(-20deg); opacity: 0; } 22% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; } }
.fx-arena { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); text-align: center; font-size: 18px; letter-spacing: 0.12em; color: #e9d5ff; text-shadow: 0 0 14px #a78bfa; white-space: nowrap; animation: fxarena 3.4s ease forwards; opacity: 0; }
.fx-arena small { display: block; font-size: 10px; letter-spacing: 0.4em; opacity: 0.7; }
@keyframes fxarena { 0% { opacity: 0; letter-spacing: 0.6em; } 25% { opacity: 1; letter-spacing: 0.12em; } 85% { opacity: 1; } 100% { opacity: 0; } }
.fx-shade { position: absolute; inset: 0; animation: fxshade 0.6s ease forwards; }
.fx-shade.win { background: radial-gradient(circle, #fde68a22, #0b102099 70%); } .fx-shade.lose { background: radial-gradient(circle, #f43f5e22, #000000cc 70%); } .fx-shade.draw { background: #0b102088; }
@keyframes fxshade { from { opacity: 0; } to { opacity: 1; } }
.fx-result { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-size: 58px; font-weight: 900; letter-spacing: 0.1em; }
.fx-result.win { color: #fde68a; text-shadow: 0 0 24px #f59e0b, 0 4px 0 #92400e; } .fx-result.lose { color: #fb7185; text-shadow: 0 0 24px #e11d48, 0 4px 0 #4c0519; } .fx-result.draw { color: #e2e8f0; text-shadow: 0 0 18px #94a3b8; }
.fx-letter { display: inline-block; opacity: 0; animation: fxletter 0.7s cubic-bezier(.2,.9,.3,1.4) forwards; }
@keyframes fxletter { 0% { transform: translateY(-60px) scale(2.4) rotate(-12deg); opacity: 0; } 60% { transform: translateY(6px) scale(0.95); opacity: 1; } 100% { transform: none; opacity: 1; } }
.fx-result.lose .fx-letter { animation-name: fxletterfall; }
@keyframes fxletterfall { 0% { transform: translateY(-40px) scale(1.6); opacity: 0; } 50% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(10px) rotate(3deg); opacity: 0.9; } }
.fx-bit { position: absolute; top: -4%; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: hsl(var(--h), 90%, 65%); animation: fxconf var(--t) linear var(--d) forwards; opacity: 0; }
.fx-bit.lose { width: 5px; height: 5px; border-radius: 50%; background: hsl(20, 90%, 55%); box-shadow: 0 0 8px #f97316; animation-name: fxember; top: auto; bottom: -2%; }
.fx-bit.draw { background: #cbd5e1; width: 4px; height: 4px; border-radius: 50%; }
@keyframes fxconf { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(var(--r)); opacity: 0.9; } }
@keyframes fxember { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-90vh) translateX(20px); opacity: 0; } }

/* social */
.panel.small { padding: 12px; gap: 8px; margin-bottom: 8px; }
.list { margin: 6px 0; }
.row-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #23274a; flex-wrap: wrap; }
.row-item > span:nth-child(2) { flex: 1; min-width: 120px; }
.row-item.challenge { background: #1b1737; border: 1px solid #7c3aed; border-radius: 12px; padding: 10px; margin: 6px 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #3a3f66; flex: none; }
.dot.on { background: #4ade80; box-shadow: 0 0 8px #4ade80; }

.fslot .tag { font-size: 9px; letter-spacing: 0.15em; color: #9a95b3; } .fslot.special { border-color: #22d3ee88; } .fslot.special.filled { background: #0b2a33; border-color: #22d3ee; }
.item .spm { position: absolute; bottom: 4px; right: 6px; font-size: 9px; color: #67e8f9; text-transform: uppercase; letter-spacing: 0.08em; }
tr.me td { color: #c4b5fd; font-weight: 700; }

/* duplicate drops: the big X */
.dupwrap { position: relative; display: inline-block; } .dupwrap .icon { opacity: 0.55; filter: grayscale(0.5); }
.dupx { position: absolute; inset: 0; width: 100%; height: 100%; } .dupx line { stroke: #f43f5e; stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px #f43f5e); }
.drop.dup { border-color: #f43f5e; }
.dropcount { margin: 10px 0 2px; font-weight: 700; color: #c4b5fd; }
/* a forge result already in your inventory: marked before you commit the merge */
.havetag { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #fda4af; border: 1px solid #f43f5e66; border-radius: 999px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; vertical-align: 2px; }
.odds .odd.have, .odds li.have { color: #fda4af; }
.detail-card .tier.have { color: #fda4af; }
/* forge odds */
.odds { text-align: left; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
/* forge results are tappable: each opens its card with the live demo */
#forge-preview .see { cursor: pointer; }
#forge-preview .main-see { background: none; border: none; color: inherit; font: inherit; padding: 0; display: block; margin: 0 auto; }
#forge-preview .main-see h3 { margin: 6px 0 2px; }
#forge-preview .odd.see:hover, #forge-preview li.see:hover, #forge-preview .main-see:hover { filter: brightness(1.25); }
#forge-preview li.see { border-radius: 8px; padding: 2px 4px; }
.odd { padding: 8px 10px; border-radius: 10px; background: #171a2e; font-size: 13px; } .odd b { display: inline-block; min-width: 42px; color: #fff; }
.odd.main { border: 1px solid #a78bfa; } .odd.alt ul { margin: 4px 0 0; padding-left: 18px; } .odd.alt li { display: flex; align-items: center; gap: 6px; }
.odd.prime { border: 1px solid #f59e0b; color: #fde68a; }
.item.prime, .detail-card.prime { border-color: #f59e0b; box-shadow: 0 0 16px #f59e0b55; }

/* skins */
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.skin { background: #12152a; border: 1px solid #23274a; border-radius: 14px; padding: 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.skin.on { border-color: #a78bfa; box-shadow: 0 0 14px #7c3aed55; }
.skin.other { opacity: 0.7; }
.skin.rare { border-color: #1d4ed8; } .skin.epic { border-color: #7e22ce; } .skin.legendary { border-color: #b45309; background: linear-gradient(180deg, #1c1503, #12152a); }
.sprev { display: block; width: 100%; max-width: 150px; aspect-ratio: 1; }
.sprev svg, .sprev canvas { width: 100%; height: 100%; display: block; }
.skin .nm { font-weight: 700; font-size: 14px; margin-top: 4px; }
.rar { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: #9a95b3; }
.rar.rare { color: #60a5fa; } .rar.epic { color: #c084fc; } .rar.legendary { color: #fbbf24; }
.skin .std { font-size: 12px; color: #9a95b3; min-height: 1.2em; }
.skin .btn { margin-top: 6px; }
.skins-empty { grid-column: 1 / -1; }
.drop.skin-drop { border-color: #fbbf24; } .drop.skin-drop .sprev { margin: 0 auto; max-width: 130px; }
.drop.skin-drop.common { border-color: #7c3aed; } .drop.skin-drop.rare { border-color: #60a5fa; } .drop.skin-drop.epic { border-color: #c084fc; }

.fx-arena em { display: block; font-style: normal; font-size: 12px; color: #c4b5fd; margin: 4px auto 0; letter-spacing: 0.02em; white-space: normal; max-width: 86vw; }
.fx-arena { max-width: 94vw; }
.fx-result { font-size: min(58px, 14vw); white-space: nowrap; }

/* rematch bar (Loadout tab) */
#rematch-bar { position: sticky; top: -8px; z-index: 6; margin: 0 -12px; padding: 10px 12px; background: #0b1020; border-bottom: 1px solid #23274a; }
.rematch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #12152a; border: 1px solid #7c3aed; border-radius: 14px; padding: 10px 12px; }
.rematch .who { flex: 1 1 160px; font-size: 14px; } .rematch .who b { color: #fff; }
.ready-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; background: #1f2937; color: #9a95b3; border: 1px solid #374151; white-space: nowrap; }
.ready-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.ready-pill.on { background: #052e16; color: #86efac; border-color: #166534; } .ready-pill.on::before { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.ready-pill.wait::before { animation: pulse 1s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.rematch .acts { display: flex; gap: 8px; }
.tab.has-rematch .fslots { top: 66px; }

/* mouse play */
#battle.mouse { cursor: crosshair; } #battle.mouse #pad { opacity: 0.3; } #battle.mouse .pad-btn { opacity: 0.8; }

/* nothing in the app is selectable text; only real inputs keep selection */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img, svg, canvas, button { -webkit-user-drag: none; user-select: none; }

/* the map pad: a small map of your half of the arena */
#pad.map { width: 176px; height: 124px; border-radius: 16px; background: linear-gradient(180deg, #151935, #0b1020); }
/* tilt (Tyson, 2026-09-06): a line above the pad — centre by default, three steps each way, 10° a step — so you can shoot around corners */
.pad-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: none; }
#tilt { display: flex; align-items: center; gap: 6px; width: 176px; height: 20px; touch-action: none; user-select: none; }
#tilt .tl, #tilt .tv { font-size: 9px; letter-spacing: 0.14em; color: #7b81b5; width: 28px; flex: none; }
#tilt .tv { text-align: right; font-variant-numeric: tabular-nums; color: #a5f3fc; }
#tilt .ticks { flex: 1; height: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; background: #0b1020; border: 1px solid #23274a; border-radius: 10px; position: relative; }
#tilt .ticks::before { content: ''; position: absolute; left: 10px; right: 10px; top: 50%; height: 1px; background: #23274a; }
#tilt .ticks i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3a3f66; transition: transform 0.1s, background 0.1s; }
#tilt .ticks i.c { width: 10px; height: 10px; background: #5b6099; }
#tilt .ticks i.on { background: linear-gradient(135deg, #a78bfa, #22d3ee); transform: scale(1.35); box-shadow: 0 0 8px #67e8f9aa; }
#tilt.live .ticks { border-color: #67e8f9; }
#battle.wide #controls .pad-col { align-self: center; }
#battle.wide #tilt { width: 168px; }
#pad.map .ring { inset: 8px; border-radius: 10px; border: 1px dashed #3a3f66; background: linear-gradient(90deg, transparent 49.5%, #23274a 49.5%, #23274a 50.5%, transparent 50.5%), linear-gradient(180deg, transparent 49.5%, #23274a 49.5%, #23274a 50.5%, transparent 50.5%); }
#pad.map::after { content: 'MOVE'; position: absolute; right: 9px; bottom: 5px; font-size: 10px; letter-spacing: 0.14em; color: #5b5f88; pointer-events: none; }
#pad.map.live { border-color: #a78bfa; }
#pad.map .knob { width: 26px; height: 26px; margin: -13px 0 0 -13px; box-shadow: 0 2px 8px #0008, 0 0 10px #a78bfa88; }

/* favourites and notes */
.item .fav { position: absolute; right: 5px; bottom: 3px; font-size: 15px; line-height: 1; color: #3a3f66; padding: 4px; cursor: pointer; }
/* violet = favourite weapon (a filled weapon slot), cyan = favourite special (the special slot), split = both */
.item .fav.on.w, .favbig.on.w { color: #a78bfa; text-shadow: 0 0 8px #a78bfa88; }
.item .fav.on.s, .favbig.on.s { color: #22d3ee; text-shadow: 0 0 8px #22d3ee88; }
.item .fav.on.b, .favbig.on.b { color: transparent; background: linear-gradient(90deg, #a78bfa 50%, #22d3ee 50%); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 5px #7cc4f088); }
.item.faved-w { border-color: #a78bfa66; } .item.faved-s { border-color: #22d3ee66; } .item.faved-b { border-color: #a78bfa66; box-shadow: 0 0 0 1.5px #22d3ee55; }
#fav-sheet { position: fixed; inset: 0; z-index: 60; background: #0008; display: flex; align-items: flex-end; justify-content: center; padding: max(20px, env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
#fav-sheet[hidden] { display: none; }
.fav-card { background: #12152a; border: 1px solid #23274a; border-radius: 18px; padding: 16px; width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 8px; box-shadow: 0 14px 40px #000a; text-align: center; box-sizing: border-box; }
.fav-title { margin: 0; font-weight: 700; } .fav-card .muted { margin: 0 0 4px; }
.fav-card .btn.fav-w { border-color: #a78bfa; color: #ddd6fe; } .fav-card .btn.fav-w.on { background: #1b1737; }
.fav-card .btn.fav-s { border-color: #22d3ee; color: #a5f3fc; } .fav-card .btn.fav-s.on { background: #0b2a33; }
.fav-card .btn.fav-b { border-color: #7cc4f0; background: linear-gradient(90deg, #1b1737, #0b2a33); } .fav-card .btn.fav-b.on { box-shadow: 0 0 0 2px #7cc4f066; }
.item .memo { position: absolute; left: 6px; bottom: 5px; font-size: 12px; color: #67e8f9; }
.detail-card { position: relative; }
.favbig { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 26px; line-height: 1; color: #3a3f66; cursor: pointer; padding: 4px; }
.notes { display: block; text-align: left; margin: 10px 0 12px; font-size: 13px; color: #9a95b3; }
.notes textarea { display: block; width: 100%; margin-top: 4px; background: #0b1020; color: #fff; border: 1px solid #23274a; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; resize: vertical; min-height: 64px; }
.notes textarea:focus { outline: none; border-color: #a78bfa; }

/* saved builds */
.builds { background: #12152a; border: 1px solid #23274a; border-radius: 14px; padding: 10px 12px; margin: 10px 0 4px; }
.builds-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .builds-head b { flex: 1; }
#build-form { display: flex; gap: 8px; margin-top: 10px; } #build-form input { flex: 1; min-width: 0; background: #0b1020; color: #fff; border: 1px solid #23274a; border-radius: 10px; padding: 8px 10px; font: inherit; }
.build-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.build { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'icons name' 'icons acts'; gap: 4px 12px; align-items: center; background: #0b1020; border: 1px solid #23274a; border-radius: 12px; padding: 8px 10px; }
.build.on { border-color: #a78bfa; box-shadow: 0 0 12px #7c3aed44; }
.b-icons { grid-area: icons; display: flex; gap: 4px; }
.b-slot { width: 38px; height: 38px; border-radius: 9px; background: #12152a; border: 1px solid #23274a; display: grid; place-items: center; font-size: 11px; color: #3a3f66; font-weight: 700; position: relative; }
.b-slot.sp { border-color: #f59e0b88; } .b-slot.missing { opacity: 0.4; } .b-slot.missing::after { content: '✕'; position: absolute; color: #f43f5e; font-size: 20px; font-weight: 800; opacity: 1; }
.b-name { grid-area: name; font-weight: 700; font-size: 14px; }
.b-acts { grid-area: acts; display: flex; gap: 6px; flex-wrap: wrap; }
.btn.danger { border-color: #7f1d1d; color: #fca5a5; }

/* wide battle screens (landscape phones, tablets, desktops): the controls become a
   side column so the arena keeps the full height. The class is set from the battle
   screen's own size (see app.js), so it follows the actual frame, not the viewport. */
/* wide frames (landscape phones, tablets, desktops): the controls stay a bar along the
   bottom — never a side column (Tyson, 2026-09-06). Both health rows share the top
   line and the bar is shorter than the portrait one, so the arena keeps its height. */
#battle.wide { display: grid; grid-template-rows: 40px minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#battle.wide .hud.top { grid-column: 1; grid-row: 1; }
#battle.wide .hud.bottom { grid-column: 2; grid-row: 1; border-left: 1px solid #23274a; }
#battle.wide .arena-wrap { grid-row: 2; grid-column: 1 / -1; }
#battle.wide #controls { grid-row: 3; grid-column: 1 / -1; justify-self: center; width: min(100%, 1100px); height: 140px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); gap: 10px; border-top: 1px solid #23274a; background: #0b1020; }
#battle.wide #controls .btn-col { flex-direction: row; width: auto; flex: none; gap: 8px; }
#battle.wide #controls .pad-btn { width: 112px; }
#battle.wide #controls #slots { flex-direction: row; flex: 1; min-width: 0; }
#battle.wide #controls .slot { min-height: 0; }
#battle.wide #controls .slot .n { font-size: 11px; padding-top: 16px; }
#battle.wide #controls #pad, #battle.wide #controls #pad.map { width: 168px; height: 102px; align-self: center; }
#battle.wide #battle-status { inset: auto 22% 40% 22%; }
/* a landscape phone is short: a slimmer bar leaves the arena what height there is */
@media (max-height: 520px) {
  #battle.wide #controls { height: 104px; padding-top: 4px; gap: 8px; }
  #battle.wide #controls #pad, #battle.wide #controls #pad.map { width: 136px; height: 72px; }
  #battle.wide #tilt { width: 136px; height: 16px; }
  #battle.wide #controls .pad-btn { width: 96px; font-size: 12px; }
  #battle.wide #controls .slot .n { font-size: 10px; padding-top: 10px; }
}

/* first-login welcome */
#welcome { position: absolute; inset: 0; background: #000b; display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 30; }
.welcome-card { background: linear-gradient(180deg, #171a33, #12152a); border: 1px solid #7c3aed; border-radius: 18px; padding: 22px 20px; max-width: 400px; width: 100%; max-height: 100%; overflow-y: auto; text-align: center; box-shadow: 0 12px 40px #0009; }
.welcome-card h2 { margin: 6px 0 10px; font-size: 24px; }
.welcome-card p { margin: 8px 0; font-size: 14px; line-height: 1.45; color: #cbd5e1; }
.welcome-card b { color: #fff; }
.w-hero { display: flex; gap: 18px; justify-content: center; align-items: flex-end; margin-bottom: 4px; }
.w-hero svg { width: 84px; height: 96px; display: block; filter: drop-shadow(0 6px 14px #0007); }
.w-nums { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.w-nums li { background: #0b1020; border: 1px solid #23274a; border-radius: 12px; padding: 10px 12px; font-size: 14px; color: #cbd5e1; }
.w-nums b { color: #a78bfa; font-size: 16px; }
.welcome-card .btn { margin-top: 12px; }

/* ability attack demo (detail card) */
.demo { width: 100%; max-width: 240px; margin: 4px auto 8px; aspect-ratio: 600 / 660; background: radial-gradient(circle at 50% 82%, #191d3a, #0b1020 70%); border: 1px solid #23274a; border-radius: 14px; overflow: hidden; }
.demo-svg { width: 100%; height: 100%; display: block; }
.demo.arena { max-width: 200px; aspect-ratio: 600 / 1000; background: radial-gradient(circle at 50% 90%, #191d3a, #0b1020 70%); }   /* the special demo shows the whole arena */
.demo-seg { max-width: 240px; margin: 0 auto 10px; } .demo-seg .btn.small { padding: 5px 6px; font-size: 12px; line-height: 1.15; white-space: nowrap; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40px; }
.demo-seg .btn .sub { font-size: 10px; font-weight: 500; color: #a5f3fc; letter-spacing: 0.04em; }
.detail-card .debuff b { color: #fbbf24; }

.tier.heavy { color: #fbbf24; }

/* the search for a player follows you round the home screen */
#queue-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 12px 6px; padding: 8px 12px; border-radius: 12px; background: #7c3aed33; border: 1px solid #a78bfa66; font-size: 14px; }
#queue-bar .row { display: flex; gap: 6px; margin: 0; }
#queue-bar-text::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: qdots 1.5s steps(4) infinite; }
@keyframes qdots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.mode-toggle { position: relative; z-index: 3; font-size: 11px; line-height: 1; padding: 4px 7px; margin-right: 6px; border-radius: 7px; border: 1px solid #ffffff55; background: #ffffff1a; color: #fff; font-weight: 700; letter-spacing: 0.02em; }
.mode-toggle:active { background: #ffffff33; }
.mode-toggle.flip { padding: 4px 6px; display: inline-flex; align-items: center; }
.mode-toggle.flip svg { display: block; }
.mode-toggle.flip.on { background: #7c8cff; border-color: #a9b4ff; color: #0b1020; }
#controls.flip { flex-direction: row-reverse; }   /* pad on the left, the buttons on the right (Tyson, 2026-09-06) */
.tier.beam { color: #67e8f9; }

/* wide screens (tablets, desktops): the home content is a centred column that
   fills its width — panels stretch, grids get more columns — instead of a
   phone-width card hugging the left edge */
@media (min-width: 720px) {
  #home main > .tab { max-width: 1100px; margin: 0 auto; }
  #home main .panel { max-width: none; }
  #home main .grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  #home #queue-bar { max-width: 1100px; margin-left: auto; margin-right: auto; }
  #home main .fslots { justify-content: center; }
}