/* A playable invitation in the landscape. Only the lightwork moves; the label stays still. */
.battle-demo-seal {
    position:relative;z-index:3;justify-self:center;
    display:flex;flex-direction:column;align-items:center;width:246px;min-height:216px;
    padding:0 8px 10px;border:0;border-radius:34px;
    background:none;color:#fff6df;font:inherit;cursor:pointer;isolation:isolate;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.battle-demo-seal::before {
    content:"";position:absolute;inset:23% -12% -8%;z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse,#071e30c4 10%,#09213380 40%,transparent 70%);
    filter:blur(8px);
}
.battle-seal-art { position:relative;display:grid;place-items:center;width:164px;height:145px;margin-bottom:4px; }
.battle-seal-aura { position:absolute;inset:-15%;border-radius:50%;background:radial-gradient(ellipse,#86eee02b 0,#b8daa21a 28%,#efca6510 48%,transparent 70%);transition:opacity .4s; }
.battle-seal-orbit { position:absolute;inset:5px 14px;border-radius:50%;pointer-events:none; }
.battle-seal-orbit.orbit-outer {
    border:1px solid #f5daa141;box-shadow:0 0 16px #ffdd7615,inset 0 0 15px #f1d57e0c;
    background:conic-gradient(from 20deg,transparent 5%,#f6d89908 11%,#f5dda75c 17%,#fff2cd 18%,transparent 19%,transparent 68%,#9df3ee90 75%,transparent 77%);
    mask:radial-gradient(transparent 67%,#000 68%);animation:battle-seal-turn 34s linear infinite;
}
.battle-seal-orbit.orbit-inner { inset:18px 27px;border:1px dashed #bdebec4f;transform:rotate(-25deg);animation:battle-seal-turn 48s linear infinite reverse; }
.battle-seal-track { position:absolute;inset:1px 9px;border:1px solid transparent;border-top-color:#a5e8ed85;border-bottom-color:#f4d48651;border-radius:50%;transform:rotate(-35deg) scaleY(.82); }
.battle-seal-track::before,.battle-seal-track::after { content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#fff0c5;box-shadow:0 0 12px 2px #f8d58b88;top:9px;left:27px; }
.battle-seal-track::after { top:auto;left:auto;bottom:9px;right:27px;background:#a9f1ed;box-shadow:0 0 12px #74eae7; }
.battle-seal-core {
    position:relative;width:84px;height:84px;display:grid;place-items:center;border-radius:50%;
    border:1px solid #e6dbac94;
    background:radial-gradient(ellipse at 35% 17%,#86d8d636,transparent 64%),linear-gradient(150deg,#2b4b55e6,#122938ef 60%,#152c3df2);
    box-shadow:inset 0 1px 1px #ffffd938,inset 0 -2px 9px #020e24b3,0 6px 25px #04142190,0 0 28px #c9efba18;
    transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s;
}
.battle-seal-core svg { width:41px;height:41px;margin-left:1px;overflow:visible;filter:drop-shadow(0 0 9px #fce4ac3b); }
.battle-seal-core svg path:first-child { fill:#f6dfaa;stroke:#fff1ca;stroke-width:.6;stroke-linejoin:round; }
.battle-seal-core svg path:last-child { stroke:#aee9e0;stroke-width:.85;opacity:.65; }
.battle-seal-eyebrow { margin-top:0;color:#b5dedc;font-size:8px;font-weight:650;letter-spacing:.25em;line-height:1.8;text-shadow:0 1px 8px #061725; }
.battle-demo-seal strong { display:flex;align-items:center;gap:9px;font-size:17px;line-height:1.5;font-weight:650;letter-spacing:-.025em;text-shadow:0 2px 12px #061726; }
.battle-demo-seal strong>span { color:#f1d48f;font-size:17px;font-weight:400;transition:transform .25s; }
.battle-seal-note { margin-top:4px;font-size:10px;line-height:1.5;color:#aacbd0;letter-spacing:.025em;text-shadow:0 1px 8px #061725; }
.battle-demo-seal:hover .battle-seal-core { border-color:#ffebb4;transform:translateY(-2px);box-shadow:inset 0 1px 1px #ffffd938,inset 0 -2px 9px #020e24b3,0 8px 30px #04142190,0 0 30px #c9efba28; }
.battle-demo-seal:hover strong>span { transform:translate(2px,-2px); }
.battle-demo-seal:active .battle-seal-core { transform:translateY(1px) scale(.96);box-shadow:inset 0 4px 12px #020e24c0,0 0 42px #f5da8970; }
.horizon-hero .battle-demo-seal:focus-visible { outline:2px solid #f0d49a;outline-offset:5px; }
@keyframes battle-seal-turn { to { rotate:360deg; } }

/* Native top-layer dialog: the page and its scroll position stay underneath. */
html.battle-demo-open { overflow:hidden;scrollbar-gutter:stable; }
.landing-next.battle-demo-active *,.landing-next.battle-demo-active *::before,.landing-next.battle-demo-active *::after { animation-play-state:paused!important; }
.landing-next.battle-demo-active .horizon-landscape { transition:none; }
.battle-demo-dialog {
    position:fixed;inset:0;width:min(1560px,calc(100vw - 64px));height:min(960px,calc(100dvh - 56px));
    max-width:none;max-height:none;margin:auto;padding:0;overflow:hidden;
    border:1px solid #b0d0d357;border-radius:24px;color:#edf6f5;background:#112735;
    box-shadow:0 35px 140px #020d1ab3,0 0 0 1px #01162366,inset 0 1px #e6f8ed1c;
}
.battle-demo-dialog::backdrop { background:#04111fd1;backdrop-filter:blur(9px) saturate(.7); }
.battle-demo-dialog[open] { animation:battle-dialog-arrive .42s cubic-bezier(.16,1,.3,1) both; }
.battle-demo-dialog[open]::backdrop { animation:battle-backdrop-arrive .3s ease both; }
.battle-demo-dialog.is-closing { animation:battle-dialog-leave .18s ease both;pointer-events:none; }
.battle-demo-dialog.is-closing::backdrop { animation:battle-backdrop-leave .18s ease both; }
.battle-demo-shell { height:100%;display:flex;flex-direction:column;min-height:0; }
.battle-demo-bar { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;flex:0 0 auto;border-bottom:1px solid #b0d6de24;background:radial-gradient(ellipse at 40% -50%,#3e77773b,transparent 72%),#112735; }
.battle-demo-heading { display:flex;align-items:center;gap:13px;min-width:0; }
.battle-demo-mark { color:#eed294;font-size:28px;text-shadow:0 0 18px #edcd8d33; }
.battle-demo-kicker { display:block;color:#acd9d6;font-size:8px;font-weight:650;letter-spacing:.2em;margin-bottom:3px; }
.battle-demo-heading h2 { color:#edf6f5;font-size:17px;letter-spacing:-.02em;line-height:1.3;margin:0; }
.battle-demo-close { display:flex;align-items:center;gap:16px;flex:0 0 auto;padding:5px 0 5px 10px;min-height:44px;background:transparent;border:0;color:#c0d4da;font:inherit;font-size:11px;cursor:pointer; }
.battle-demo-close>span:last-child { display:grid;place-items:center;width:34px;height:34px;border:1px solid #b6d2d143;border-radius:10px;line-height:0;background:#82b2b70a;transition:border-color .2s,background .2s; }
.battle-demo-close svg { display:block;width:18px;height:18px; }
.battle-demo-close:hover>span:last-child { background:#82b2b724;border-color:#cae2d4a1; }
.battle-demo-close:focus-visible { outline:2px solid #eaca91;outline-offset:5px;border-radius:8px; }
/* Dialog autofocus and focus restoration retain focus without a touch/mouse ring. */
html[data-battle-demo-input="pointer"] .horizon-hero .battle-demo-seal:focus-visible,
html[data-battle-demo-input="pointer"] .combat-demo-link:focus-visible,
html[data-battle-demo-input="pointer"] .battle-demo-close:focus-visible { outline:none; }
.battle-demo-stage { position:relative;flex:1;min-height:0;isolation:isolate;overflow:hidden;background:var(--theme-canvas,#edf5f2); }
.battle-demo-frame { display:block;width:100%;height:100%;border:0;opacity:0;transition:opacity .3s ease; }
.battle-demo-loading { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:32px;background:radial-gradient(ellipse at 50% 35%,#254b56,#112735 65%);color:#e6f0ea;text-align:center;z-index:1;transition:opacity .35s,visibility .35s; }
.battle-demo-loading strong { font-size:22px;font-weight:600;letter-spacing:-.02em; }
.battle-demo-loading>span:not(.battle-demo-loading-orbit) { font-size:12px;color:#b4cad0; }
.battle-demo-loading p { max-width:330px;font-size:12px;line-height:1.7;color:#b4cad0; }
.battle-demo-loading-orbit { position:relative;width:76px;height:76px;margin-bottom:15px;border:1px solid #98d5d537;border-top-color:#ebd08f;border-right-color:#9cd9cd;border-radius:50%;box-shadow:inset 0 0 24px #b6e3d70d,0 0 25px #b6e3d70a;animation:battle-seal-turn 2.5s linear infinite; }
.battle-demo-loading-orbit::after { content:"";position:absolute;inset:9px;border:1px solid #98d5d537;border-bottom-color:#ebd08f;border-radius:50%; }
.battle-demo-dialog.is-ready .battle-demo-loading { opacity:0;visibility:hidden;pointer-events:none; }
.battle-demo-dialog.is-ready .battle-demo-frame { opacity:1; }
@keyframes battle-dialog-arrive { from { opacity:0;transform:translateY(22px) scale(.97); } to { opacity:1;transform:none; } }
@keyframes battle-dialog-leave { to { opacity:0;transform:translateY(8px) scale(.99); } }
@keyframes battle-backdrop-arrive { from { opacity:0; } to { opacity:1; } }
@keyframes battle-backdrop-leave { to { opacity:0; } }

@media(min-width:1200px) {
    .battle-demo-seal { position:absolute;left:50%;bottom:110px;transform:translateX(-50%); }
}
@media(min-width:1101px) and (min-height:801px) {
    .battle-demo-seal { width:276px;min-height:244px; }
    .battle-seal-art { width:190px;height:170px;margin-bottom:6px; }
    .battle-seal-core { width:104px;height:104px; }
    .battle-seal-core svg { width:48px;height:48px; }
    .battle-demo-seal strong { font-size:19px; }
    .battle-seal-eyebrow { font-size:9px;letter-spacing:.24em; }
    .battle-seal-note { font-size:11px; }
    .battle-seal-aura { animation:battle-seal-breathe 8s ease-in-out infinite alternate; }
}
@keyframes battle-seal-breathe { from { opacity:.65;scale:.96; } to { opacity:1;scale:1.04; } }
@media(min-width:701px) and (max-height:800px) {
    .battle-demo-seal { min-height:201px; }
    .battle-seal-art { width:150px;height:133px; }
    .battle-seal-core { width:77px;height:77px; }
    .horizon-caption { display:none; }
}
@media(min-width:701px) and (max-width:1100px) {
    .landing-next .horizon-inner { padding-block:160px 105px; }
    .landing-next .horizon-copy { min-width:0; }
    .landing-next .horizon-copy h1 { font-size:clamp(52px,6.5vw,70px); }
    .horizon-actions { flex-wrap:wrap;gap:14px 22px; }
    .battle-demo-seal { width:230px;min-height:216px; }
    .battle-demo-seal strong { font-size:16px; }
    .horizon-caption { display:none; }
}
@media(max-width:700px) {
    .battle-demo-seal { margin:20px auto 0;width:250px;min-height:210px; }
    .battle-seal-art { width:158px;height:140px; }
    .landing-next .horizon-inner { padding-bottom:105px; }
    .landing-next .horizon-hero { min-height:0; }
    .battle-demo-dialog { width:calc(100vw - 12px);height:calc(100dvh - 12px);border-radius:17px; }
    .battle-demo-bar { padding:10px 13px;gap:8px; }
    .battle-demo-heading { gap:9px; }
    .battle-demo-heading h2 { font-size:15px; }
    .battle-demo-kicker { font-size:7px;letter-spacing:.16em; }
    .battle-demo-mark { font-size:23px; }
    .battle-demo-close { padding:0 0 0 5px; }
    .battle-demo-close>span:first-child { display:none; }
}
@media(max-width:400px) { .battle-demo-seal { margin-top:13px; } }
@media(prefers-reduced-motion:reduce) {
    .battle-demo-seal *,.battle-demo-dialog,.battle-demo-dialog::backdrop,.battle-demo-dialog * { animation:none!important;transition:none!important; }
}
.battle-demo-dialog[data-motion="still"],.battle-demo-dialog[data-motion="still"]::backdrop,.battle-demo-dialog[data-motion="still"] * { animation:none!important;transition:none!important; }
@media(forced-colors:active) {
    .battle-demo-seal { border:1px solid ButtonText;background:Canvas;color:ButtonText; }
    .battle-seal-orbit,.battle-seal-track,.battle-seal-aura { display:none; }
    .battle-seal-core { border-color:ButtonText; }
    .battle-seal-core svg path { fill:ButtonText;stroke:ButtonText; }
    .battle-demo-dialog { border-color:CanvasText; }
}