.hskduel-ui .home-logo:not(.hskduel-identity){visibility:hidden}
.hskduel-ui .home-logo.hskduel-identity{display:flex;flex-direction:column;align-items:center;position:relative;filter:none!important;width:100%;max-width:580px;max-height:none;margin:0 auto;overflow:visible;color:var(--fg)}
.hskduel-ui .hskduel-stage{position:relative;width:100%;max-width:440px;aspect-ratio:480/360;isolation:isolate}
.hskduel-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hskduel-stage canvas{z-index:3}
.hskduel-stage .hskduel-slot{position:absolute;left:50%;top:48%;width:38%;transform:translate(-50%,-50%);transition:transform 540ms cubic-bezier(.22,.8,.25,1);z-index:2}.hskduel-stage .hskduel-gem{display:block;opacity:0;visibility:hidden}.hskduel-stage .hskduel-gem>.stone-cell{width:100%}
.hskduel-stage .hskduel-gem.is-active{opacity:1;visibility:visible}.hskduel-stage .hskduel-gem.is-falling{animation:hskduel-fall 580ms cubic-bezier(.24,.7,.23,1) both}
.hskduel-stage .hskduel-ring{position:absolute;left:50%;top:78%;width:28%;height:8%;border:1px solid currentColor;border-radius:50%;opacity:0;transform:translate(-50%,-50%);transform-origin:center}
.hskduel-identity.is-releasing .hskduel-ring{animation:hskduel-impact 800ms 260ms ease-out both}
.hskduel-ui .hskduel-wordmark{font-family:'Bansho Sans',Montserrat,Arial,sans-serif;font-size:clamp(26px,3.25vw,54px);font-weight:450;line-height:1.2;letter-spacing:.25em;margin:0 -.25em 0 0;white-space:nowrap}
.hskduel-ui .home-menu .level-card{transition:background 150ms,color 150ms,border-color 150ms,box-shadow 150ms}
.hskduel-ui .home-menu .level-card.hskduel-hover{background:var(--fg);color:var(--bg);border-color:var(--fg);box-shadow:0 5px 22px #0000000c}
.hskduel-ui .home-menu:has(.hskduel-hover) .level-card.primary:not(.hskduel-hover){background:var(--bg);color:var(--fg);border-color:var(--line)}
.hskduel-ui .home-menu .home-brand{min-width:0}
.hskduel-ui .home-brand .syllabus-label{display:none}

.hskduel-ui .boot-screen img{filter:none!important;max-height:250px}

@keyframes hskduel-fall{0%{opacity:0;transform:translateY(-105px)}55%{opacity:1;transform:translateY(5px)}72%{transform:translateY(-3px)}100%{opacity:1;transform:translateY(0)}}
@keyframes hskduel-impact{0%{opacity:0;transform:scale(.35)}14%{opacity:.55}100%{opacity:0;transform:scale(2.1)}}
@media(max-width:800px){.hskduel-ui .home-logo.hskduel-identity{width:100%;max-width:330px;margin:0 auto}.hskduel-ui .hskduel-stage{max-width:270px}.hskduel-ui .hskduel-wordmark{font-size:30px}.hskduel-ui .home-brand .online-now{margin-top:3px}}
@media(max-width:650px){.hskduel-ui .hskduel-stage{width:clamp(167px,28dvh,233px);height:auto;aspect-ratio:4/3}.hskduel-ui .hskduel-wordmark{font-size:26px}.hskduel-ui .home-menu .home-brand{margin-bottom:16px}.hskduel-ui .auth-brand .hskduel-stage{width:200px}}
@media(prefers-reduced-motion:reduce){.hskduel-stage .hskduel-gem,.hskduel-stage .hskduel-slot,.hskduel-stage .hskduel-ring{animation:none!important;transition:none!important}.hskduel-stage canvas{display:none}}

.hskduel-identity:not([data-level="4"]) .hskduel-slot{transform:translate(-50%,-50%)}
/* Element colours follow the selected level throughout practice and duel setup. */
.hskduel-ui{--accent:#bddbe9;--aura:#85b9d225}
.hskduel-ui[data-element="2"]{--accent:#7bdec0;--aura:#43b89425}
.hskduel-ui[data-element="3"]{--accent:#ffb374;--aura:#f06d2828}
.hskduel-ui[data-element="4"]{--accent:#e8cf8b;--aura:#d7a94324}
.hskduel-ui .level-card[data-level="1"],.hskduel-ui [data-duel-level="1"]{--card-accent:#bddbe9;--card-aura:#73b3e024}
.hskduel-ui .level-card[data-level="2"],.hskduel-ui [data-duel-level="2"]{--card-accent:#7bdec0;--card-aura:#43b89424}
.hskduel-ui .level-card[data-level="3"],.hskduel-ui [data-duel-level="3"]{--card-accent:#ffb374;--card-aura:#f06d2826}
.hskduel-ui .home-menu .level-card,.hskduel-ui .duel-level-options button{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(115deg,var(--card-aura,#b3975920),var(--bg) 75%)!important;color:var(--fg)!important;border:1px solid color-mix(in srgb,var(--card-accent,#d7bc7b) 25%,var(--line))!important;box-shadow:inset 0 1px #ffffff08,0 14px 45px #00000012;border-radius:23px!important}
.hskduel-ui .home-menu .level-card.hskduel-hover,.hskduel-ui .home-menu .level-card.primary,.hskduel-ui .duel-level-options button.selected{border-color:var(--card-accent,#d7bc7b)!important;box-shadow:inset 0 0 45px var(--card-aura,#b3975920),0 8px 36px var(--card-aura,#b3975920)}
.hskduel-ui #home-challenge{--card-accent:#efd794;--card-aura:#a8904226;background:linear-gradient(115deg,#5e9e8a14,#cd702f14,#b7973922)!important}
.hskduel-ui .practice-options button.selected,.hskduel-ui .setup-steps [aria-current=step]{border-color:var(--accent)!important;background:linear-gradient(125deg,var(--aura),var(--soft))!important;color:var(--fg)!important;box-shadow:0 5px 30px var(--aura)}
.hskduel-ui .setup-words .controls>label,.hskduel-ui .setup-words .controls>button{background:linear-gradient(125deg,var(--aura),var(--soft));border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.hskduel-ui input:focus-visible,.hskduel-ui select:focus-visible,.hskduel-ui button:focus-visible{outline-color:var(--accent)}
.hskduel-ui .duel-player.is-you{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:linear-gradient(130deg,var(--aura),var(--bg) 80%)}
.hskduel-ui .duel-player progress::-webkit-progress-value{background:var(--accent)}
.hskduel-identity[data-level="4"] .hskduel-slot[data-slot="1"]{transform:translate(-112%,-45%) rotate(-9deg)}
.hskduel-identity[data-level="4"] .hskduel-slot[data-slot="2"]{transform:translate(12%,-45%) rotate(9deg)}
.hskduel-identity[data-level="4"] .hskduel-slot[data-slot="3"]{transform:translate(-50%,-20%)}
html[data-theme=light].hskduel-ui{--accent:#345d72;--aura:#78badb20}html[data-theme=light].hskduel-ui[data-element="2"]{--accent:#176d52;--aura:#53b99522}html[data-theme=light].hskduel-ui[data-element="3"]{--accent:#a84514;--aura:#f4974422}
.hskduel-ui .menu-dust{color:#c8571c!important}.hskduel-stage{color:var(--accent)}.one-avatar{display:inline-block;vertical-align:middle;margin-right:10px;border-radius:9px}

/* The signed-out screen keeps the complete crest and the ambient embers. */
html.hskduel-ui[data-auth=guest] body>.menu-dust{display:block}

.hskduel-ui .boot-screen{min-height:75dvh;place-content:center}
.hsk-boot-mark{display:flex;flex-direction:column;align-items:center;gap:28px}
.hskduel-ui .hsk-boot-mark img{width:160px;height:160px;max-height:none;border-radius:34px;box-shadow:0 0 65px #edab4025;animation:hsk-boot-breathe 2.4s ease-in-out infinite}
.hsk-boot-mark b{font-family:'Bansho Sans',Montserrat,Arial,sans-serif;font-size:22px;font-weight:500;letter-spacing:.22em;margin-right:-.22em}
.hsk-boot-dots{display:flex;gap:9px}
.hsk-boot-dots i{width:6px;height:6px;border-radius:50%;background:#82bdeb;animation:hsk-boot-dot 1.4s ease-in-out infinite}
.hsk-boot-dots i:nth-child(2){background:#ffac60;animation-delay:.16s}
.hsk-boot-dots i:nth-child(3){background:#60bd93;animation-delay:.32s}
@keyframes hsk-boot-breathe{50%{transform:translateY(-5px);box-shadow:0 0 80px #edab4040}}
@keyframes hsk-boot-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.hskduel-ui .hsk-boot-mark img,.hsk-boot-dots i{animation:none}}

/* Warm, rising sparks for the dark theme. */
.hskduel-ui .menu-dust::before{content:"";position:absolute;inset:55% -12% -10%;background:radial-gradient(ellipse at 15% 100%,#df6b2024,transparent 62%),radial-gradient(ellipse at 95% 95%,#e7a1411a,transparent 58%);animation:hsk-ember-glow 9s ease-in-out infinite alternate}
.hskduel-ui .menu-dust>i{width:2.4px;height:calc(var(--dust-size)*2);border-radius:65% 35% 55% 45%;background:linear-gradient(to top,#cf4c13 5%,#f39728 65%,#ffe2a0);box-shadow:0 0 3px #dd641e66,0 0 8px #ef9a3038;animation-name:hsk-ember-rise;animation-duration:calc(var(--dust-time)*.72)}
.hskduel-ui .menu-dust>i:nth-child(3n){width:1.5px;height:3px;box-shadow:0 0 3px #db631e70}
.hskduel-ui .menu-dust>i:nth-child(5n){width:2.5px;height:7px;background:linear-gradient(to top,#b9471d,#ee9134 60%,#fff0bf)}
.hskduel-ui .menu-dust>i:nth-child(5n)::after{content:"";position:absolute;bottom:4px;left:1px;width:1px;height:12px;background:linear-gradient(transparent,#ed882858);transform:rotate(12deg);transform-origin:bottom}
.hskduel-ui .menu-dust>i:nth-child(n+33){display:none}
html[data-theme=dark].hskduel-ui .menu-dust>i{background:linear-gradient(to top,#e86821,#ffd894);box-shadow:0 0 4px #ff9d5270,0 0 11px #ef791e45}
html[data-theme=dark].hskduel-ui .menu-dust::before{opacity:.6}
@keyframes hsk-ember-rise{
 0%{transform:translate3d(0,0,0) rotate(-18deg) scale(.65);opacity:0}
 10%{transform:translate3d(calc(var(--dust-drift)*-.15),-12dvh,0) rotate(12deg);opacity:.88}
 32%{transform:translate3d(calc(var(--dust-drift)*.4),-35dvh,0) rotate(-22deg);opacity:.7}
 52%{transform:translate3d(calc(var(--dust-drift)*.15),-57dvh,0) rotate(16deg);opacity:.48}
 76%{transform:translate3d(calc(var(--dust-drift)*.8),-82dvh,0) rotate(-12deg) scale(.75);opacity:.25}
 100%{transform:translate3d(var(--dust-drift),-108dvh,0) rotate(22deg) scale(.35);opacity:0}
}
@keyframes hsk-ember-glow{from{transform:translate3d(-1%,2%,0) scale(1);opacity:.65}to{transform:translate3d(1%,-1%,0) scale(1.04);opacity:1}}
@media(max-width:720px){.hskduel-ui .menu-dust>i:nth-child(n+19){display:none}.hskduel-ui .menu-dust::before{inset:62% -20% -8%}}
@media(prefers-reduced-motion:reduce){.hskduel-ui .menu-dust::before,.hskduel-ui .menu-dust>i{animation:none}}

/* Give the two login links the same baseline and touch target. */
.hskduel-ui .account-links{align-items:center;flex-wrap:wrap;gap:4px 24px}
.hskduel-ui .account-links :is(button,a){display:inline-flex;align-items:center;box-sizing:border-box;min-height:44px;margin:0;padding:8px 0;font-size:13px;line-height:20px;color:var(--fg);text-underline-offset:3px}

/* Keep light mode free of ambient particles and their glow, including menus. */
html.hskduel-ui:not([data-theme=dark]) .menu-dust{display:none!important}

/* Only the focused or pointed-at menu choice carries the selection outline. */
.hskduel-ui .home-menu .level-card.primary:not(:focus-visible):not(:hover){border-color:var(--line)!important;box-shadow:none}
.hskduel-ui .home-menu .level-card:is(:focus-visible,:hover){border-color:var(--accent)!important;box-shadow:inset 0 0 0 1px var(--accent);outline:none}
.hskduel-ui .home-menu:has(.level-card:focus-visible) .level-card:not(:focus-visible){border-color:var(--line)!important;box-shadow:none;outline:none}

/* Account actions stay clear alongside the game's elemental crest. */
.hskduel-ui .email-state-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:22px;background:var(--soft);color:var(--accent);margin:0 0 24px}.email-state-icon svg{width:34px;height:34px}.email-status{font-size:15px;line-height:1.6;color:var(--muted)}.email-address{font-size:16px;font-weight:600;overflow-wrap:anywhere;margin:16px 0 28px}.email-rule{font-size:12px;color:var(--muted);margin-top:-10px}.email-wide{width:100%;margin-top:12px}#email-error:empty{display:none}#email-error:not(:empty){margin-block:12px}