/* Title screen, main lobby ("ล็อบบี้หลัก") and hero-select hooks (dist/home-ui.mjs, dist/keyart.mjs).
   Original Ayodea look: jade glass panels with gold kanok edges, lotus/prang motifs, Chonburi titles and
   Chakra Petch numerals. Scoped to .home-screen / #home-dialog / hero-select hooks only. */
#game{
 --hm-gold:#e9c77f;--hm-gold-hi:#fff1c4;--hm-gold-lo:#9c6a2a;--hm-ink:#f3efdc;--hm-muted:#a9c2bc;
 --hm-glass:linear-gradient(160deg,#10363ae8,#06191ceb);--hm-edge:#e9c77f70;
 /* AYODEA ARENA wordmark (assets/brand/arena/ayodea-arena-logo-*.webp, 1600 x 854) and the Thai name plaque under it
    where the lockup puts it: .5483 of the wordmark's width down, 78% of its width (not under 250px while the logo is). */
 --hm-logo-w:min(52vw,72vh,820px);--hm-logo-h:calc(var(--hm-logo-w) * .5336);--hm-logo-top:calc((100dvh - var(--hm-logo-h)) * .24);
 --hm-name-top:calc(var(--hm-logo-w) * .5483);--hm-name-w:max(calc(var(--hm-logo-w) * .7804),min(250px,var(--hm-logo-w)));
}
/* Until home-ui.mjs runs, a static splash (same logo and name geometry as the title) hides the hero select. Its wordmark
   is the file the title's srcset then takes, so it is not fetched twice: image-set takes the first x at or above the
   DPR, srcset the first file at or above --hm-logo-w x DPR, and the rules below give each range of --hm-logo-w the x
   values that make the two agree on DPR 1, 2 and 3 (tests/arena-logo.test.mjs checks a dense grid of viewports). */
#game:not([data-home])::before{content:'';position:absolute;inset:0;z-index:35;background:url('./assets/brand/arena/ayodea-arena-name.svg') 50% calc(var(--hm-logo-top) + var(--hm-name-top))/var(--hm-name-w) auto no-repeat,url('./assets/brand/arena/ayodea-arena-logo-1600.webp') 50% var(--hm-logo-top)/var(--hm-logo-w) auto no-repeat,radial-gradient(ellipse 80% 70% at 50% 35%,#0d3a3a,#03100f 72%);background-image:url('./assets/brand/arena/ayodea-arena-name.svg'),image-set(url('./assets/brand/arena/ayodea-arena-logo-800.webp') 1x,url('./assets/brand/arena/ayodea-arena-logo-1600.webp') 2x),radial-gradient(ellipse 80% 70% at 50% 35%,#0d3a3a,#03100f 72%)}
/* logo wider than 533 px (1600/3): 2400 on DPR 3 */
@media (min-width:1026px) and (min-height:741px){#game:not([data-home])::before{background-image:url('./assets/brand/arena/ayodea-arena-name.svg'),image-set(url('./assets/brand/arena/ayodea-arena-logo-800.webp') 1x,url('./assets/brand/arena/ayodea-arena-logo-1600.webp') 2x,url('./assets/brand/arena/ayodea-arena-logo-2400.webp') 3x),radial-gradient(ellipse 80% 70% at 50% 35%,#0d3a3a,#03100f 72%)}}
/* wider than 800 px: 1600 on DPR 1, 2400 above */
@media (min-width:1539px) and (min-height:1112px){#game:not([data-home])::before{background-image:url('./assets/brand/arena/ayodea-arena-name.svg'),image-set(url('./assets/brand/arena/ayodea-arena-logo-1600.webp') 1x,url('./assets/brand/arena/ayodea-arena-logo-2400.webp') 2x),radial-gradient(ellipse 80% 70% at 50% 35%,#0d3a3a,#03100f 72%)}}
/* at most 400 px (800/2): 800 up to DPR 2 (iPhone SE/11/XR), 1600 on DPR 3 */
@media (max-width:769px),(max-height:555px){#game:not([data-home])::before{background-image:url('./assets/brand/arena/ayodea-arena-name.svg'),image-set(url('./assets/brand/arena/ayodea-arena-logo-800.webp') 2x,url('./assets/brand/arena/ayodea-arena-logo-1600.webp') 3x),radial-gradient(ellipse 80% 70% at 50% 35%,#0d3a3a,#03100f 72%)}}
/* at most 266 px (800/3): 800 up to DPR 3 */
@media (max-width:512px),(max-height:370px){#game:not([data-home])::before{background-image:url('./assets/brand/arena/ayodea-arena-name.svg'),image-set(url('./assets/brand/arena/ayodea-arena-logo-800.webp') 3x,url('./assets/brand/arena/ayodea-arena-logo-1600.webp') 4x),radial-gradient(ellipse 80% 70% at 50% 35%,#0d3a3a,#03100f 72%)}}
.hm-defs{position:absolute;width:0;height:0;overflow:hidden}
.hm-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.keyart-canvas{position:absolute;inset:0;z-index:30;display:block;width:100%;height:100%;background:#02090b;touch-action:manipulation}
.home-screen{position:absolute;inset:0;z-index:31;color:var(--hm-ink);font-family:Sarabun,sans-serif}
.home-screen.is-entering{animation:hm-in .34s cubic-bezier(.2,.8,.2,1) both}
.home-screen.is-leaving{animation:hm-out .24s ease-in both}
/* Descendants opt back in with pointer-events:auto, so the fade-out switches them off too. */
.home-screen.is-leaving,.home-screen.is-leaving *{pointer-events:none!important}
@keyframes hm-in{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
@keyframes hm-out{to{opacity:0;transform:scale(.985)}}
.home-screen button{font-family:inherit}
.home-screen button:focus-visible,.home-dialog :focus-visible,.home-back:focus-visible,.home-mode-switch button:focus-visible{outline:3px solid #ffe29b;outline-offset:3px}

/* ---------- TITLE ---------- */
.title-screen{cursor:pointer;user-select:none;-webkit-user-select:none;background:radial-gradient(ellipse 75% 65% at 50% 45%,transparent 55%,#010607c0)}
.title-logo{position:absolute;left:50%;top:var(--hm-logo-top);width:var(--hm-logo-w);margin:0;translate:-50% 0;line-height:0;filter:drop-shadow(0 10px 28px #000c) drop-shadow(0 0 22px #e9c77f40)}
.title-wordmark{display:block;width:100%;height:auto}
/* The Thai name plaque is vector outlines (sharp at any DPR); inside the h1 so logo and name are one heading. */
.title-name{position:absolute;left:50%;top:var(--hm-name-top);width:var(--hm-name-w);height:auto;translate:-50% 0}
/* Masked by the wordmark file itself (home-ui.mjs maskShimmer sets the srcset pick), hidden until that mask is set. */
.logo-shimmer{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:none center/100% 100% no-repeat;mask:none center/100% 100% no-repeat;mix-blend-mode:screen;visibility:hidden}
.logo-shimmer[data-mask]{visibility:visible}
/* The sweep moves by transform (a compositor animation), not background-position (a repaint every frame). */
.logo-shimmer::before{content:'';position:absolute;top:0;bottom:0;left:0;width:260%;background:linear-gradient(105deg,transparent 42%,#fffbe6d0 50%,transparent 58%);transform:translateX(-73.8%);animation:hm-shimmer 4.2s ease-in-out 1s infinite}
@keyframes hm-shimmer{0%{transform:translateX(-73.8%)}55%,100%{transform:translateX(12.3%)}}
.title-foot{position:absolute;left:50%;bottom:max(7vh,calc(18px + env(safe-area-inset-bottom)));translate:-50% 0;display:grid;justify-items:center;gap:8px;width:min(440px,72vw)}
.title-load{width:100%;height:9px;padding:2px;border:1px solid #e9c77f99;border-radius:9px;background:#041214d0;box-shadow:0 0 14px #000a,inset 0 0 6px #000}
.title-load i{display:block;height:100%;border-radius:6px;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#2fae86,#8fe7bd 60%,#fff0c2);box-shadow:0 0 10px #8fe7bd90;transition:transform .25s ease-out}
.title-status{margin:0;font:500 13px 'Chakra Petch',Sarabun,sans-serif;letter-spacing:.04em;color:#bcd5cc;text-shadow:0 2px 6px #000}
.title-tap{display:flex;align-items:center;gap:14px;padding:6px 20px;border:0;background:none;font:clamp(19px,2.6vw,27px)/1.3 Chonburi,serif;color:var(--hm-gold-hi);text-shadow:0 0 14px #e9c77fb0,0 2px 8px #000;animation:hm-pulse 1.6s ease-in-out infinite}
.title-tap::before,.title-tap::after{content:'';width:clamp(34px,6vw,70px);height:2px;background:linear-gradient(90deg,transparent,var(--hm-gold));clip-path:polygon(0 50%,100% 0,100% 100%)}
.title-tap::after{transform:scaleX(-1)}
@keyframes hm-pulse{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
.title-screen.is-ready .title-load,.title-screen.is-ready .title-status{display:none}
.title-screen.is-failed .title-status{color:#f3b3a8}

/* ---------- HOME ---------- */
.home{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top top" ". events" "bottom bottom";gap:10px 16px;padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));pointer-events:none;background:radial-gradient(ellipse 80% 70% at 42% 48%,transparent 50%,#01080ab0),linear-gradient(180deg,#01080aa8,transparent 20%,transparent 70%,#01080ad0)}
.home-top,.home-bottom,.home-events,.home-tools,.home-play,.play-row{pointer-events:none}
.home-profile,.home-stats,.home-icons>*,.home-events>*,.home-nav,.mode-chips,.play-row>*,.home-logo{pointer-events:auto}
.hm-panel{position:relative;background:var(--hm-glass);border:1px solid var(--hm-edge);box-shadow:inset 0 1px 0 #fff1c422,0 10px 26px #000a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hm-panel::before,.hm-panel::after{content:'';position:absolute;top:-6px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -4 30 30'%3E%3Cpath d='M0 0C10-2 20 4 24 12c-5-4-10-5-15-3 5 1 9 5 10 10-5-4-11-5-17-2C7 13 7 6 0 0Z' fill='%23e9c77f'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.hm-panel::before{left:-6px}.hm-panel::after{right:-6px;transform:scaleX(-1)}
.home-top{grid-area:top;position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-height:72px}
.home-profile{display:flex;align-items:center;gap:12px;padding:6px 18px 6px 6px;border-radius:48px 16px 16px 48px;min-width:0}
.profile-avatar{position:relative;flex:none;width:68px;height:68px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#2d6e62,#082125)}
.profile-avatar img{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);border-radius:50%;object-fit:cover;object-position:50% 16%}
.profile-avatar img[data-art=thumb]{object-position:50% 50%}
.avatar-frame{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);filter:drop-shadow(0 0 6px #e9c77f66)}
.profile-meta{display:grid;gap:4px;min-width:0}
.profile-name{display:flex;align-items:center;gap:6px;min-width:0}
.profile-name strong{font:600 clamp(15px,1.5vw,19px)/1.2 'Chakra Petch',Sarabun,sans-serif;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.profile-level{display:flex;align-items:center;gap:8px;font:600 13px 'Chakra Petch',Sarabun,sans-serif}
.profile-level b{color:var(--hm-gold);font-weight:700}
.level-track{width:clamp(70px,9vw,120px);height:6px;border-radius:4px;background:#031113;border:1px solid #e9c77f55;overflow:hidden}
.level-track i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#3bbf92,#fff0c2)}
.profile-rank{display:flex;align-items:center;gap:4px;color:#d7e6df;font-weight:500}
.rank-mini{display:inline-flex;width:20px;height:20px}
.rank-mini svg,.rank-badge svg{width:100%;height:100%}
.home-logo{position:absolute;left:50%;top:-4px;translate:-50% 0;width:clamp(150px,17vw,250px);height:auto;filter:drop-shadow(0 6px 16px #000c)}
.home-tools{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.home-stats{display:grid;grid-template-columns:repeat(3,auto);align-items:center;column-gap:18px;padding:6px 18px 4px;border-radius:14px}
.home-stats span{display:grid;justify-items:center;line-height:1.1}
.home-stats small{font-size:11.5px;color:var(--hm-muted)}
.home-stats b{font:700 20px 'Chakra Petch',sans-serif;font-variant-numeric:tabular-nums;color:var(--hm-gold-hi)}
.home-stats em{grid-column:1/-1;justify-self:center;margin-top:1px;font:500 11px 'Chakra Petch',Sarabun,sans-serif;font-style:normal;color:#8fb0a8}
.home-icons{display:flex;gap:8px}
.hm-icon-btn{display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:12px;border:1px solid var(--hm-edge);background:var(--hm-glass);color:var(--hm-gold-hi);box-shadow:0 6px 16px #0009}
.hm-icon-btn svg{width:22px;height:22px}
.hm-icon-btn[aria-pressed=false]{color:#7f9994}
.hm-icon-btn.small{position:relative;width:26px;height:26px;border-radius:8px;box-shadow:none;background:#0a2a2c}
/* The small pencil keeps its look but takes a 42 px touch target. */
.hm-icon-btn.small::after{content:'';position:absolute;inset:-8px}
.hm-icon-btn.small svg{width:14px;height:14px}
.home-events{grid-area:events;align-self:start;display:flex;flex-direction:column;gap:10px;width:clamp(200px,21vw,284px);padding-top:6px}
.event-card{position:relative;display:grid;align-content:center;justify-items:start;gap:1px;min-height:clamp(58px,11vh,96px);padding:8px 29% 8px 14px;border-radius:14px;border:1px solid var(--hm-edge);text-align:left;overflow:hidden;background:linear-gradient(90deg,#06191cf5 48%,#06191c66 82%,#06191c20),var(--card-art) right -8px top 20%/auto 150% no-repeat,radial-gradient(circle at 85% 40%,#2c6b5f,#0a2327 70%);box-shadow:0 8px 20px #0009,inset 0 1px 0 #fff1c422;transition:transform .18s,border-color .18s}
.event-card:hover{transform:translateX(-3px);border-color:var(--hm-gold)}
.event-card strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;font:clamp(14px,1.35vw,17px)/1.3 Chonburi,serif;color:var(--hm-gold-hi);white-space:nowrap}
.event-card small{font-size:12px;color:#b4cbc4;white-space:nowrap}
.event-card.online{border-color:#8fe7bd88}
.event-tag{display:inline-block;padding:1px 8px;border-radius:6px;background:#e9c77f;color:#1b2419;font:600 11px 'Chakra Petch',Sarabun,sans-serif;letter-spacing:.04em}
.event-card.online .event-tag{background:#74dcae}
/* Online presence chip (aggregate count only): beside the mode switch, opens the "สมาชิกออนไลน์" page. The green ring
   pulses by transform/opacity only while the number is live; it stays still when unknown, stale or reduced motion. */
.presence-dot{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:#5ee39a;box-shadow:0 0 0 2px #06231d,0 0 8px #5ee39acc}
.presence-dot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid #5ee39a;opacity:0}
.is-unknown .presence-dot{background:#7f9994;box-shadow:0 0 0 2px #06231d}
.presence-chip{position:relative;display:inline-flex;pointer-events:auto;align-items:center;gap:7px;min-height:36px;padding:4px 15px 4px 12px;border-radius:18px;border:1px solid #8fe7bd77;background:var(--hm-glass);color:#d7e6df;font:600 13px 'Chakra Petch',Sarabun,sans-serif;white-space:nowrap;box-shadow:0 6px 16px #0009,inset 0 1px 0 #fff1c422;transition:border-color .18s}
.presence-chip[hidden]{display:none}
.presence-chip b{min-width:1.1em;font:700 16px/1 'Chakra Petch',sans-serif;font-variant-numeric:tabular-nums;text-align:right;color:#c6f7dc}
.presence-chip:hover{border-color:#8fe7bd}
.presence-chip.is-unknown b{color:#9fb8b4}
.presence-chip.is-live .presence-dot::after{animation:hm-presence 2.4s ease-out infinite}
@keyframes hm-presence{0%{opacity:.75;transform:scale(.45)}70%,100%{opacity:0;transform:scale(1.25)}}
.home-bottom{grid-area:bottom;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.home-nav{display:flex;gap:4px;padding:6px;border-radius:16px}
.home-nav button{display:grid;justify-items:center;gap:3px;min-width:78px;padding:8px 6px 6px;border:1px solid transparent;border-radius:12px;background:none;font:600 13px Sarabun,sans-serif;color:#e5eee6}
.home-nav button svg{width:26px;height:26px;color:var(--hm-gold)}
.home-nav button:hover{background:#e9c77f18;border-color:#e9c77f44}
.home-play{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
/* The presence chip shows left of the mode switch but out of the flow, so it never widens the bottom row (a 568 px
   phone has no pixel to spare there, and a squeezed menu bar wraps its labels). It sits over the key art above the
   menu bar, which is always shorter than the START row. Portrait puts it back in the row. Bot-only builds hide the row. */
.mode-row{position:relative;display:flex;align-items:center;gap:8px}
.mode-row>.presence-chip{position:absolute;top:50%;right:calc(100% + 8px);translate:0 -50%}
.mode-chips{display:flex;gap:6px;padding:4px;border-radius:30px;background:#041416d8;border:1px solid #e9c77f44}
.mode-chip{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:24px;border:1px solid transparent;background:none;font:600 13px Sarabun,sans-serif;color:#b8cbc5;white-space:nowrap}
.mode-chip svg{width:17px;height:17px}
.mode-chip[aria-pressed=true]{color:#16261f;background:linear-gradient(180deg,#fff0c2,#e2b862);border-color:#fff3cf;box-shadow:0 0 14px #e9c77f55}
.play-row{display:flex;align-items:center;gap:12px}
.rank-badge{display:grid;justify-items:center;gap:0;width:78px;font:600 12px Sarabun,sans-serif;color:var(--hm-gold-hi);text-shadow:0 2px 4px #000}
.rank-badge svg{width:66px;height:66px;filter:drop-shadow(0 4px 10px #000c) drop-shadow(0 0 8px #e9c77f44)}
.home-start{position:relative;display:grid;justify-items:center;align-content:center;min-width:clamp(200px,21vw,290px);min-height:clamp(62px,10.5vh,82px);padding:6px 36px;border-radius:18px 18px 18px 18px;border:1px solid #fff3cf;overflow:hidden;background:linear-gradient(180deg,#fff3cc 0%,#f0cf82 38%,#cf9f4f 100%);color:#1a2519;box-shadow:inset 0 -4px 0 #9c7232,inset 0 2px 0 #fffc,0 0 0 3px #06161b,0 0 0 4px #e9c77f99,0 10px 30px #000c,0 0 36px #e9b85c55;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%)}
.home-start .start-label{font:clamp(28px,3.4vw,40px)/1.05 Chonburi,serif;letter-spacing:.06em;text-shadow:0 1px 0 #fff8}
.home-start small{font:600 12.5px 'Chakra Petch',Sarabun,sans-serif;letter-spacing:.03em;opacity:.82}
.home-start::after{content:'';position:absolute;top:0;bottom:0;left:0;width:26%;background:linear-gradient(100deg,transparent,#fffbe8c0,transparent);transform:translateX(-154%) skewX(-20deg);animation:hm-shine 3.2s ease-in-out infinite;pointer-events:none}
.home-start:active{translate:0 1px}
@keyframes hm-shine{0%,55%{transform:translateX(-154%) skewX(-20deg)}100%{transform:translateX(500%) skewX(-20deg)}}

/* ---------- HOME intro (home-intro.mjs: the first TITLE → HOME of a visit, in step with the title shout) ----------
   #game[data-intro]: logo (A: the shout lights the title logo, HOME hidden and inert) → clash (B: the veil lifts for the
   key art's first clash) → ui (C: the logo flies onto its HOME slot, the lobby cascades in, START last); fade = reduced
   motion. Only opacity and transforms move (scale/translate, the shimmer's translate); the key art is dimmed by a veil
   above it, never filtered. The logo's steps are classes on .title-logo set by home-ui.mjs at the shout's words. */
#game[data-intro] .title-screen{background:none;cursor:default}
#game[data-intro] .title-screen::before,#game[data-intro] .title-screen::after{content:'';position:absolute;inset:0;pointer-events:none}
#game[data-intro] .title-screen::before{background:radial-gradient(ellipse 75% 65% at 50% 45%,transparent 55%,#010607c0);transition:opacity .35s ease-out}
#game[data-intro] .title-screen::after{background:radial-gradient(ellipse 85% 75% at 50% 36%,#020f10a0,#010608e8 78%);opacity:0}
#game[data-intro=logo] .title-screen::after{animation:hm-veil .8s ease-out both}
#game[data-intro=clash] .title-screen::after{animation:hm-unveil .45s ease-out both}
/* C: above HOME, so the flying logo is not darkened by the lobby's own shading; its vignette hands over to HOME's. */
#game[data-intro=ui] .title-screen{z-index:32}
#game[data-intro=ui] .title-screen::before{opacity:0}
#game[data-intro] .title-logo{z-index:1;transition:translate .6s cubic-bezier(.3,.7,.3,1)}
/* B: the lockup steps up out of the clash's way (translate stays put through C, so the FLIP of home-ui.mjs still holds). */
#game[data-intro] .title-logo.is-lifted{translate:-50% calc(-1 * min(9dvh,max(0px,var(--hm-logo-top) - 10px)))}
#game[data-intro] .title-foot{opacity:0;transition:opacity .25s ease-out}
#game[data-intro] .logo-shimmer::before{animation:none}
/* A gold glow behind the lockup (inside the logo's own stacking context, under the wordmark). */
#game[data-intro] .title-logo::before{content:'';position:absolute;left:-32%;right:-32%;top:-48%;bottom:-78%;z-index:-1;background:radial-gradient(closest-side,#ffe9b0a0,#f3c77042 42%,#e9b85c16 70%,#e9b85c00);opacity:0;pointer-events:none}
/* A: sink under the war cry, ignite on "อโยเดีย", sweep again on "ออนไลน์", the ribbon unfurls on "ศึกยอดขุนพล", a punch on "พล!". */
#game[data-intro] .title-logo.is-dark .title-wordmark{animation:hm-sink .45s ease-in both}
#game[data-intro] .title-logo.is-dark::before{animation:hm-charge 1.1s ease-in-out infinite alternate}
#game[data-intro] .title-logo.is-folded .title-name{animation:hm-fold .3s ease-in both}
#game[data-intro] .title-logo.beat-name .title-wordmark{animation:hm-ignite .8s cubic-bezier(.16,.84,.3,1) both}
#game[data-intro] .title-logo.beat-name.is-lit .title-wordmark{animation:hm-ignite-lit .55s ease-out both}
#game[data-intro] .title-logo.beat-name::before{animation:hm-glow 1.1s ease-out both}
#game[data-intro] .title-logo.beat-name .logo-shimmer::before{animation:hm-sweep 1.05s cubic-bezier(.35,.05,.25,1) both}
#game[data-intro] .title-logo.beat-online::before{animation:hm-glow-again .9s ease-out both}
#game[data-intro] .title-logo.beat-online .logo-shimmer::before{animation:hm-sweep-again 1.05s cubic-bezier(.35,.05,.25,1) both}
#game[data-intro] .title-logo.beat-title .title-name{animation:hm-unfurl .6s cubic-bezier(.2,.9,.3,1.12) both}
#game[data-intro] .title-logo.beat-title::before{animation:hm-glow-title .9s ease-out both}
#game[data-intro] .title-logo.beat-last{animation:hm-punch .35s ease-out}
#game[data-intro] .title-logo.beat-last::before{animation:hm-flare .7s ease-out both}
/* C: the ribbon and the glow let go as the logo takes off (home-ui.mjs flyLogo transforms .title-logo); it fades out on
   landing while the HOME logo, hidden until then, fades in on the same spot. */
#game[data-intro=ui] #title-screen .title-name{animation:hm-out .22s ease-in both}
#game[data-intro=ui] #title-screen .title-logo::before{animation:hm-glow-out .3s ease-in both}
#game[data-intro-landed] #title-screen .title-logo{opacity:0}
#game:is([data-intro=logo],[data-intro=clash]) #home{visibility:hidden}
#game:is([data-intro=logo],[data-intro=clash],[data-intro=ui]) #home .home-logo{opacity:0}
#game[data-intro=ui][data-intro-landed] #home .home-logo{opacity:1;transition:opacity .16s ease-out}
#game[data-intro=ui] #home{animation:hm-fade .4s ease-out both}
#game[data-intro=fade] #home{animation:hm-fade .3s ease-out both}
/* The cascade, seconds after the 'ui' step (INTRO_CASCADE in home-intro.mjs; every entrance ends by INTRO.ready .78):
   profile and stats drop in, the icons and cards follow, the menu and the mode row rise, START comes last. */
#game[data-intro=ui] #home :is(.home-profile,.home-stats,.home-icons>*,.home-events>*,.home-nav,.mode-row,.rank-badge,.home-start){animation:hm-rise .42s cubic-bezier(.2,.8,.2,1) both}
#game[data-intro=ui] #home .home-profile{animation-name:hm-from-top;animation-delay:.04s}
#game[data-intro=ui] #home .home-stats{animation-name:hm-from-top;animation-delay:.1s}
#game[data-intro=ui] #home .home-icons>*{animation-name:hm-pop;animation-delay:.14s}
#game[data-intro=ui] #home .home-icons>:nth-child(2){animation-delay:.18s}
#game[data-intro=ui] #home .home-icons>:nth-child(3){animation-delay:.22s}
#game[data-intro=ui] #home .home-icons>:nth-child(4){animation-delay:.26s}
#game[data-intro=ui] #home .home-events>*{animation-name:hm-from-right;animation-delay:.12s}
#game[data-intro=ui] #home .home-events>:nth-child(2){animation-delay:.19s}
#game[data-intro=ui] #home .home-events>:nth-child(3){animation-delay:.26s}
#game[data-intro=ui] #home .home-nav{animation-delay:.2s}
#game[data-intro=ui] #home .mode-row{animation-delay:.28s}
#game[data-intro=ui] #home .rank-badge{animation-name:hm-pop;animation-delay:.32s}
#game[data-intro=ui] #home .home-start{animation:hm-start-in .4s cubic-bezier(.2,.9,.3,1.2) .36s both}
/* START's gold flash (a class home-ui.mjs removes when it ends): a burst of light across the button, under its clip. */
#home .home-start.is-flash::before{content:'';position:absolute;inset:-10% -4%;background:radial-gradient(ellipse 58% 70% at 50% 50%,#fffdf2,#ffe7a6d0 35%,#ffe7a600 72%);animation:hm-start-flash .7s ease-out both;pointer-events:none}
@keyframes hm-fade{from{opacity:0}}
@keyframes hm-out{to{opacity:0}}
@keyframes hm-veil{from{opacity:0}to{opacity:1}}
@keyframes hm-unveil{from{opacity:1}to{opacity:0}}
@keyframes hm-sink{to{opacity:.14;scale:.95}}
@keyframes hm-charge{from{opacity:.1;scale:.85}to{opacity:.38;scale:1}}
@keyframes hm-fold{to{opacity:0;scale:.28 1}}
@keyframes hm-ignite{0%{opacity:.14;scale:1.14}38%{opacity:1}100%{opacity:1;scale:1}}
@keyframes hm-ignite-lit{0%{scale:1.07}100%{scale:1}}
@keyframes hm-glow{0%{opacity:0;scale:.55}28%{opacity:1;scale:1.05}100%{opacity:.32;scale:1}}
@keyframes hm-glow-again{0%{opacity:.32;scale:1}30%{opacity:.8;scale:1.08}100%{opacity:.32;scale:1}}
@keyframes hm-glow-title{0%{opacity:.32;scale:1}30%{opacity:.85;scale:1.1}100%{opacity:.35;scale:1}}
@keyframes hm-flare{0%{opacity:.35;scale:1}18%{opacity:1;scale:1.22}100%{opacity:.35;scale:1.06}}
@keyframes hm-glow-out{from{opacity:.35;scale:1.06}to{opacity:0;scale:1.1}}
@keyframes hm-sweep{from{transform:translateX(-73.8%)}to{transform:translateX(12.3%)}}
@keyframes hm-sweep-again{from{transform:translateX(-73.8%)}to{transform:translateX(12.3%)}}
@keyframes hm-unfurl{0%{opacity:0;scale:.28 1}55%{opacity:1}100%{opacity:1;scale:1 1}}
@keyframes hm-punch{0%,100%{scale:1}35%{scale:1.045}}
@keyframes hm-from-top{from{opacity:0;transform:translateY(-18px)}}
@keyframes hm-from-right{from{opacity:0;transform:translateX(44px)}}
@keyframes hm-rise{from{opacity:0;transform:translateY(22px)}}
@keyframes hm-pop{from{opacity:0;transform:scale(.6)}}
@keyframes hm-start-in{0%{opacity:0;transform:scale(.72)}55%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:none}}
@keyframes hm-start-flash{0%{opacity:0;transform:scale(.4)}22%{opacity:1}100%{opacity:0;transform:scale(1.5)}}

/* ---------- dialogs ---------- */
.home-dialog{width:min(920px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:20px 22px;color:var(--hm-ink);background:linear-gradient(160deg,#12393d,#061a1e);border:1px solid #d7b36e;border-radius:16px;box-shadow:0 30px 100px #000c,inset 0 1px 0 #fff1c433}
.home-dialog::backdrop{background:#01100fc4;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.home-dialog[data-kind=rename]{width:min(420px,calc(100% - 24px))}
.home-dialog[data-kind=prep]{width:min(460px,calc(100% - 24px))}
.home-dialog[data-kind=presence]{width:min(540px,calc(100% - 24px))}
.hd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.hd-head h2{margin:2px 0 0;font:24px/1.3 Chonburi,serif;color:var(--hm-gold-hi)}
.hd-head .eyebrow{font-size:12px;letter-spacing:.14em;color:#cbb37a}
.hd-close{flex:none;padding:7px 12px;font-size:13px;color:var(--hm-ink);border-color:#e9c77f66}
.hd-news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.news-card{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border:1px solid #e9c77f44;border-radius:12px;background:#071d20}
.news-card img{width:100%;height:130px;object-fit:contain;object-position:50% 30%;background:radial-gradient(circle at 50% 60%,#2a6a5e,#0a2327 70%)}
.news-card>div{padding:10px 12px 12px}
.news-card h3{margin:6px 0 4px;font:17px/1.3 Chonburi,serif;color:var(--hm-gold-hi)}
.news-card p{margin:0;font-size:13.5px;line-height:1.6;color:#c7d8d2}
.hd-howto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.hd-howto section{padding:10px 14px;border-left:2px solid var(--hm-gold);background:#061a1e99;border-radius:0 10px 10px 0}
.hd-howto h3{margin:0 0 4px;font:16px Chonburi,serif;color:var(--hm-gold-hi)}
.hd-howto p,.hd-howto li{margin:0;font-size:14px;line-height:1.7;color:#cfe0da}
.hd-howto ul{margin:0;padding-left:18px}
.hd-howto kbd{display:inline-block;padding:0 6px;border:1px solid #e9c77f66;border-radius:4px;background:#0b2a2c;font:600 12px 'Chakra Petch',sans-serif;color:var(--hm-gold-hi)}
.catalog-tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto}
.catalog-tabs button{flex:1;min-width:66px;padding:7px 8px;border:1px solid #58766b66;border-radius:8px;background:#0b242b;font-size:14px;white-space:nowrap}
.catalog-tabs [aria-pressed=true]{color:#f1d99b;border-color:var(--hm-gold);background:#3d3d2755}
.catalog{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:14px;min-height:0}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;align-content:start;max-height:min(56vh,440px);overflow:auto;padding:2px}
.catalog-item{display:grid;justify-items:center;gap:3px;padding:8px 4px;border:1px solid #58766b66;border-radius:10px;background:#0b232c;font-size:12.5px;text-align:center}
.catalog-item img{width:52px;height:52px;border-radius:8px;object-fit:cover;box-shadow:0 3px 10px #0008}
.catalog-item strong{font-weight:500;line-height:1.25}
.catalog-item small{color:var(--hm-gold);font:600 12px 'Chakra Petch',sans-serif}
.catalog-item[aria-pressed=true]{border-color:var(--hm-gold);background:#34432b77}
.catalog-detail{padding:14px;border:1px solid #657b6044;border-radius:10px;background:#061b25;font-size:14px;line-height:1.6}
.catalog-title{display:flex;align-items:center;gap:10px}
.catalog-title img{width:64px;height:64px;border-radius:9px;object-fit:cover}
.catalog-title h3{margin:0;font-size:17px;line-height:1.3}
.catalog-cat{font:600 12.5px 'Chakra Petch',Sarabun,sans-serif;color:var(--hm-gold)}
.catalog-stats{color:#e6eee6}.catalog-effect{color:#a7e3cb}.catalog-recipe{margin:6px 0;font-size:13px;color:#bcd0c8}
.catalog-detail small{color:#89a9a4;font-size:12px}
.hd-prep{display:grid;gap:14px}
.hd-prep label{display:grid;gap:5px;font-size:14px;color:#cfe0da}
.hd-prep select{width:100%;min-width:0}
.hd-prep .prep-check{display:flex;align-items:center;gap:8px}
.hd-prep input[type=checkbox]{width:19px;height:19px;accent-color:#d6b46d}
.prep-actions{display:flex;gap:8px;flex-wrap:wrap}
.prep-actions button{flex:1;color:var(--hm-ink);border-color:#e9c77f66}
.hd-prep small{color:#89a9a4;font-size:12px}
.hd-rename{display:grid;gap:8px}
.hd-rename label{font-size:14px;color:#cfe0da}
.hd-rename input{font:600 18px 'Chakra Petch',Sarabun,sans-serif;color:#f4ead3;background:#092d32;border:1px solid #809e8b90;border-radius:10px;padding:10px 12px}
.hd-rename input[aria-invalid=true]{border-color:#ee9288}
.rename-hint{margin:0;font-size:13px;color:#9fb8b4;min-height:1.6em}
.rename-hint.is-error{color:#f3b3a8}
.rename-actions{display:flex;gap:8px;margin-top:6px}
.rename-actions button{flex:1;padding:10px;font-size:16px}
.rename-actions .secondary{color:var(--hm-ink)}
/* "สมาชิกออนไลน์": one big live number, three framed counts (.ay-frame-sm draws 3 px outside: the gaps keep it clear). */
.hd-presence{display:grid;gap:12px}
.presence-now{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:10px 14px;border:1px solid #8fe7bd55;border-radius:12px;background:radial-gradient(ellipse 70% 120% at 50% 0,#1d5a4b99,transparent 70%),#071d20;font-size:15px;color:#cfe0da}
.presence-now b{font:700 clamp(34px,5vw,46px)/1 'Chakra Petch',sans-serif;font-variant-numeric:tabular-nums;color:#c6f7dc;text-shadow:0 0 18px #5ee39a66}
.presence-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.presence-stat{display:grid;align-content:center;gap:4px;margin:0;padding:10px 10px 12px;border-radius:10px;background:#061a1e;text-align:center}
.presence-stat dt{font-size:12.5px;line-height:1.35;color:var(--hm-muted)}
.presence-stat dd{margin:0;font:600 13px 'Chakra Petch',Sarabun,sans-serif;color:#dfe9e3}
.presence-stat dd b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--hm-gold-hi)}
.hd-presence.is-stale :is(.presence-now b,.presence-stat dd b){opacity:.6}
.presence-updated{margin:0;font:500 13px 'Chakra Petch',Sarabun,sans-serif;text-align:center;color:#a9c2bc}
.presence-note{margin:-4px 0 0;font-size:12.5px;line-height:1.55;text-align:center;color:#89a9a4}
.presence-actions{display:flex;justify-content:center}
.presence-actions .primary{min-width:min(240px,100%);padding:10px 18px;font-size:16px}

/* ---------- hero-select hooks (topbar back button, mode switch, per-mode primary action) ---------- */
.home-back,.home-mode-switch{display:none}
#game:has(#lobby:not([hidden])) .home-back{display:inline-flex}
#game:has(#lobby:not([hidden])) .home-mode-switch{display:flex}
.home-back{align-items:center;gap:4px;height:38px;padding:0 12px 0 6px;border:1px solid #e9c77f88;border-radius:10px;background:#0a2629e6;color:var(--hm-gold-hi);font:600 14px Sarabun,sans-serif;white-space:nowrap;box-shadow:0 4px 12px #0008}
.home-back svg{width:20px;height:20px}
#game:has(#lobby:not([hidden])) .brand .crest{display:none}
.home-mode-switch{position:absolute;left:50%;top:14px;translate:-50% 0;gap:4px;padding:4px;border-radius:26px;background:#041416e6;border:1px solid #e9c77f55;box-shadow:0 6px 16px #0009}
.home-mode-switch button{display:flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid transparent;border-radius:22px;background:none;font:600 13px Sarabun,sans-serif;color:#b8cbc5;white-space:nowrap}
.home-mode-switch svg{width:16px;height:16px}
.home-mode-switch [aria-pressed=true]{color:#16261f;background:linear-gradient(180deg,#fff0c2,#e2b862);border-color:#fff3cf}
/* Bot mode keeps the online panel (sign-in, queue, name) in its plain look; online mode makes it the primary action. */
#lobby[data-play-mode=online] .lobby-cta{display:none}
#lobby[data-play-mode=online] .online-panel{border-color:#e9c77fb0;box-shadow:0 0 0 1px #e9c77f40,0 0 30px #e9c77f2a,inset 0 1px 0 #fff1c433}
#lobby[data-play-mode=online] #online-start{flex:1 1 100%;min-height:54px;padding:8px 18px;border-radius:12px;border:1px solid #fff0c0;background:linear-gradient(180deg,#fff0c2 0%,#eecb7d 40%,#c99a4b 100%);color:#16261f;font:20px/1.2 Chonburi,serif;box-shadow:inset 0 -3px 0 #9c7232,inset 0 2px 0 #fffa,0 0 0 3px #06161b,0 0 0 4px #dfbc7470,0 6px 20px #e0b86740}
#lobby[data-play-mode=online] #online-start:disabled{opacity:.7;filter:saturate(.35) brightness(.85)}
/* Aggregate online numbers above the queue status (home-ui.mjs); a still dot, no pulse in the hero select. */
#lobby .online-panel .online-presence{display:flex;align-items:center;gap:7px;margin:8px 0 0;font:600 12.5px 'Chakra Petch',Sarabun,sans-serif;font-variant-numeric:tabular-nums;color:#b9d8cc}
#lobby .online-panel .online-presence[hidden]{display:none}
#lobby .online-panel .online-presence.is-unknown{color:#8fa9a4}
/* Just after HOME's START the hero select ignores taps: its #start / queue button sits under START on phones. */
#lobby[data-arriving],#lobby[data-arriving] *{pointer-events:none!important}
/* Result card gains a third way out. margin:auto (not the overlay's flex centring) keeps an overflowing card scrollable
   from its top ornament. */
#home-result-home{color:inherit}
#result .small-card{margin:auto}
/* VS screen: the small logo sits above the map title (drawn here, so lobby-ui.mjs markup stays untouched). */
.vs-head::before{content:'';display:block;width:clamp(110px,15vw,200px);aspect-ratio:640/341;margin:0 auto 6px;background:url('./assets/brand/arena/ayodea-arena-logo-sm.webp') center/contain no-repeat;filter:drop-shadow(0 6px 14px #000c)}
@media (max-height:500px){
 .vs-head::before{width:clamp(78px,11vw,118px);margin-bottom:2px}
 /* Landscape phones: the three result buttons share one row so "กลับล็อบบี้หลัก" stays above the fold. */
 #result .small-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px;max-width:560px;padding:14px 20px 16px}
 #result .small-card>:not(button){grid-column:1/-1}
 #result .small-card h2{font-size:26px;line-height:1.3;margin:2px 0 4px}
 #result .small-card p{margin:2px 0;font-size:14px;line-height:1.45}
 #result #result-stats{padding:7px 10px;margin:8px 0 4px}
 #result .small-card button{margin-top:6px;min-height:44px;padding:6px 8px;font-size:14px;line-height:1.25}
}

/* ---------- landscape phones and short windows ---------- */
@media (max-height:560px) and (orientation:landscape){
 .home{gap:6px 10px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .home-top{min-height:52px}
 .home-profile{gap:8px;padding:4px 12px 4px 4px}
 .profile-avatar{width:48px;height:48px}
 .profile-avatar img{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}
 .profile-name strong{font-size:14px;max-width:14ch}
 .profile-level{gap:6px;font-size:12px}
 .level-track{width:60px}
 .home-logo{width:clamp(110px,15vw,160px);top:-2px}
 .home-tools{flex-direction:row-reverse;align-items:flex-start;gap:6px}
 .home-icons{gap:5px}
 .hm-icon-btn{width:40px;height:40px;border-radius:10px}
 .hm-icon-btn svg{width:18px;height:18px}
 .home-stats{column-gap:10px;padding:3px 10px 2px;border-radius:10px}
 .home-stats b{font-size:15px}
 .home-stats small{font-size:10.5px}
 .home-stats em{display:none}
 .home-events{gap:6px;width:clamp(176px,27vw,222px);padding-top:0}
 .event-card{min-height:0;height:clamp(44px,13vh,62px);padding:4px 25% 4px 10px;border-radius:11px}
 .event-card strong{font-size:13px}
 .event-card small{display:none}
 .event-tag{font-size:10px;padding:0 6px}
 .home-nav{padding:4px;border-radius:13px}
 .home-nav button{min-width:58px;padding:5px 4px 4px;font-size:11.5px;gap:1px}
 .home-nav button svg{width:21px;height:21px}
 .home-play{gap:6px}
 .mode-chip{min-height:40px;padding:4px 12px;font-size:12px}
 .mode-chip svg{width:14px;height:14px}
 .rank-badge{width:54px;font-size:11px}
 .rank-badge svg{width:46px;height:46px}
 .home-start{min-width:clamp(150px,22vw,210px);min-height:52px;padding:4px 26px}
 .home-start .start-label{font-size:26px}
 .home-start small{font-size:11px}
 .home-mode-switch{top:10px}
 .home-mode-switch button{min-height:40px;padding:4px 12px;font-size:12px}
 .home-back{height:40px;font-size:13px}
 .hd-news{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .news-card img{height:78px}
 .news-card p{font-size:12.5px;line-height:1.5}
 .catalog-grid{max-height:calc(100dvh - 170px)}
 .home-dialog{padding:14px 16px}
 .hd-head h2{font-size:20px}
 .presence-chip{min-height:32px;padding:2px 13px 2px 10px;font-size:12px}
 .presence-chip::before{content:'';position:absolute;inset:-5px -2px}
 .presence-chip b{font-size:14px}
 .hd-presence{gap:8px}
 .presence-now{padding:6px 12px;font-size:14px}
 .presence-now b{font-size:30px}
 .presence-stats{gap:10px}
 .presence-stat{padding:6px 8px 8px;gap:2px}
 .presence-stat dt{font-size:11.5px}
 .presence-stat dd b{font-size:18px}
 .presence-note{margin:-2px 0 0;font-size:11.5px;line-height:1.45}
 .presence-actions .primary{padding:8px 16px;font-size:15px}
}
@media (max-height:400px) and (orientation:landscape){
 .home-top{min-height:46px}
 .profile-avatar{width:42px;height:42px}
 .event-card{height:40px}
 .event-card strong{font-size:12.5px}
 .mode-chips{padding:3px}
 .home-start{min-height:46px}
 .home-start .start-label{font-size:23px}
}
@media (max-width:820px){
 .home-nav button{min-width:54px}
 /* No room between the profile card and the tools: the small logo tucks under the profile card. */
 .home-logo{left:2px;top:calc(100% + 6px);translate:none;width:clamp(96px,17vw,132px)}
 .catalog{grid-template-columns:minmax(0,1fr) 220px}
 #lobby[data-play-mode=online] #online-start{font-size:17px;min-height:46px}
}
@media (max-width:640px){
 .home-back span{display:none}
 .home-back{padding:0 6px}
 .home-mode-switch span{max-width:0;overflow:hidden}
 .home-mode-switch [aria-pressed=true] span{max-width:none}
}
/* Portrait (a rotate prompt covers phones; tablets/desktop windows still get a usable stack). */
@media (orientation:portrait){
 /* minmax(0,…) and min-width:0: three event cards (an online build) share the width instead of widening the column past
    the screen (their titles already end in an ellipsis). */
 .home{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "events" "bottom"}
 .home-events{flex-direction:row;width:auto;justify-self:stretch}
 .home-events>*{flex:1;min-width:0;padding-right:12px;background-size:auto 110%}
 .home-top{flex-wrap:wrap}
 .home-logo{position:static;translate:none;order:-1;flex:0 0 auto;width:min(46vw,220px);margin:0 calc((100% - min(46vw,220px))/2)}
 .home-bottom{flex-direction:column-reverse;align-items:stretch}
 .home-play{align-items:stretch}
 .mode-row>.presence-chip{position:relative;top:auto;right:auto;translate:none}
 .mode-row>.mode-chips{flex:1}
 .play-row{justify-content:flex-end}
 .home-nav{justify-content:space-around}
 .hd-news,.hd-howto{grid-template-columns:1fr}
 .catalog{grid-template-columns:1fr}
}
@media (max-width:560px){.hd-news,.hd-howto{grid-template-columns:1fr}.catalog{grid-template-columns:1fr}.catalog-grid{max-height:40vh}}
@media (max-width:420px){.presence-stats{grid-template-columns:1fr}}

/* Touch devices: blurring what sits behind a panel means re-blurring the animated key art every frame. */
@media (pointer:coarse){
 .hm-panel{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,#10363af7,#06191cf9)}
 .home-dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#01100fe6}
}
@media (prefers-reduced-motion:reduce){
 .home-screen,.home-screen *,.home-screen *::before,.home-screen *::after,.home-dialog *{animation:none!important;transition:none!important}
 .title-tap{opacity:1}
 .presence-dot::after{animation:none!important}
 /* The intro's reduced form: one short fade of the lobby, nothing moves. */
 #game[data-intro=fade] #home{animation:hm-fade .3s ease-out both!important}
}