:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eeeede;background:#141c1b;font-synthesis:none;--gold:#d5bc7d;--muted:#9ea9a1;--line:#c3c9a51c}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;min-height:100dvh;background:radial-gradient(ellipse at 75% 35%,#30453a55,transparent 52%),#141c1b}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #ead394;outline-offset:5px}button:disabled{cursor:wait}svg{display:block}button svg,a svg{width:20px;height:20px;flex-shrink:0}button[hidden],[hidden]{display:none!important}
.site-header{height:84px;padding:0 5%;display:flex;align-items:center;gap:65px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-size:12px;letter-spacing:2.2px;white-space:nowrap;color:#cbd4c1}.brand svg{width:31px;height:31px;color:#c8ba86}.brand strong{font-weight:600;color:#f0eedf}.primary-nav{height:100%;display:flex;gap:32px;align-items:stretch}.primary-nav a{display:flex;align-items:center;font-size:12px;color:#99a89e;position:relative}.primary-nav a:hover{color:#f0e4bd}.primary-nav a[aria-current]{color:#ebd698}.primary-nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#d6bd7a;box-shadow:0 -4px 15px #dec18044}.build-label{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.5px;color:#aebaa9}.build-label i{width:5px;height:5px;border-radius:50%;background:#c2bc8d}.build-label span{color:#78877e;border-left:1px solid var(--line);padding-left:12px;margin-left:3px}
.home-main{max-width:1440px;margin:auto;padding:0 5%;min-height:calc(100dvh - 134px);display:flex;flex-direction:column;justify-content:center}.hero{display:grid;grid-template-columns:minmax(330px,.9fr) minmax(0,1.25fr);align-items:center;gap:24px;padding:48px 0 38px;position:relative}.eyebrow{margin:0 0 18px;color:var(--gold);font-size:9px;letter-spacing:2.7px;font-weight:600;display:flex;align-items:center;gap:10px}.eyebrow::before{content:"";width:22px;height:1px;background:#bda874}h1{font-size:clamp(42px,4.6vw,65px);font-weight:500;line-height:1.1;letter-spacing:-2.7px;margin:0;color:#efeddd}h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#d1c394;letter-spacing:-2px}.hero-description{font-size:13px;line-height:1.9;color:#a7b2a8;margin:20px 0 28px;max-width:350px}.play-panel{max-width:355px}.mode{position:relative;display:flex;align-items:center;gap:13px;background:linear-gradient(105deg,#26312c,#1f2926);border:1px solid #a7ae8b38;padding:15px 17px;box-shadow:inset 3px 0 #d2bd80}.mode-icon{color:#cab780;width:29px;height:29px;padding:4px}.mode-copy{display:flex;flex-direction:column;gap:5px}.mode-copy strong{font-size:13px;font-weight:550;color:#e5e7d8}.mode-copy span{font-size:10px;color:#a0afa1}.mode-count{margin-left:auto;font-size:10px;color:#c0c8b6;display:flex;gap:7px;align-items:center}.mode-count svg{width:15px;height:15px;color:#acb99e}.play-button{margin-top:10px;border:1px solid #e1c88d;box-shadow:inset 0 0 0 3px #26312615,0 5px 20px #0002;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:58px;background:linear-gradient(110deg,#dfc98d,#c1a96d);color:#263027;font-size:13px;letter-spacing:2.5px;font-weight:750;transition:filter .2s,transform .2s}.play-button:hover{filter:brightness(1.12);transform:translateY(-2px)}.play-button:active{transform:translateY(0)}.play-button svg{width:18px;height:18px}.play-note{font-size:10px;color:#9aa89b;margin:12px 0 0;display:flex;align-items:center;gap:7px}.play-note svg{width:12px;height:12px;color:#b8b594}
.arena-art{position:relative;min-width:0;aspect-ratio:1.22;display:flex;align-items:center;justify-content:center;isolation:isolate}.arena-art::before{content:"";position:absolute;width:87%;aspect-ratio:1;border:1px solid #a8b48a14;border-radius:50%;background:radial-gradient(circle,#78886b10,transparent 68%);z-index:-1}.arena-art::after{content:"";position:absolute;width:73%;aspect-ratio:1;border:1px solid #a8b48a14;border-radius:50%;z-index:-1}.art-cross{position:absolute;width:9px;height:9px;border:1px solid #b7b48950;transform:rotate(45deg)}.cross-one{left:19%;top:12%}.cross-two{right:11%;bottom:24%}.art-label{position:absolute;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:3px;color:#98a58b;white-space:nowrap}.art-label.top{top:2%}.art-label.bottom{bottom:3%;color:#aebca3;letter-spacing:2px;display:flex;align-items:center;gap:12px}.art-label.bottom::before,.art-label.bottom::after{content:"";width:25px;height:1px;background:#a0ae8950}.hero-board{width:110%;max-width:none;flex-shrink:0;overflow:visible;filter:drop-shadow(0 25px 22px #0005)}.hero-tile{stroke:#25352e;stroke-width:2;fill:#4b5b4c}.hero-tile.alternate{fill:#465648}.hero-tile.blue{fill:#3f6671;stroke:#2e4951}.hero-tile.red{fill:#785a50;stroke:#523f38}.hero-tile.selected{fill:#85968c;stroke:#c1d4c2;stroke-width:2.5}.hero-board .monster{filter:drop-shadow(0 9px 3px #10171466)}.hero-board .tile-spark{fill:#b5c69c;opacity:.65}.hero-board .unit-floor{fill:#142522;opacity:.55}.hero-board .unit-halo{fill:none;stroke:#c0cda0;stroke-width:2;opacity:.6}
.roster-strip{display:flex;align-items:center;gap:32px;padding:22px 0 26px;border-top:1px solid var(--line)}.roster-heading{min-width:150px}.roster-heading p{margin:0 0 6px;font-size:9px;letter-spacing:1.6px;color:#b6c1ad}.roster-heading span{font-size:11px;color:#839487}.roster-monster{display:flex;align-items:center;gap:13px;min-width:163px}.portrait{width:52px;height:52px;background:radial-gradient(circle,#69735255,#34453655);border:1px solid #b8c39322;position:relative;display:grid;place-items:center}.portrait img{width:60px;height:60px;object-fit:contain;transform:translateY(-3px);filter:drop-shadow(0 3px 2px #0005)}.roster-monster strong{font-size:13px;font-weight:500;display:block;color:#e0e3d5}.roster-monster small{display:block;font-size:10px;color:#9aa996;margin-top:5px}.roster-note{margin-left:auto;font-size:11px;color:#8e9e90;line-height:1.8;text-align:right;max-width:210px}.roster-note strong{color:#c1c9b5;font-weight:400}.site-footer{padding:0 5%;height:50px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:9px;color:#829184;gap:18px}.site-footer p{margin:0}.site-footer a{color:#b6c0aa;display:flex;align-items:center;gap:7px}.site-footer a:hover{color:#ebd498}.site-footer svg{width:13px;height:13px}
.queue-dialog{border:1px solid #9d9e704d;background:radial-gradient(ellipse at 50% 0,#35463777,transparent 65%),#1b2621;color:#efeedf;width:min(590px,calc(100% - 32px));padding:0;max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 25px 100px #0009}.queue-dialog::backdrop{background:#0d1512cc;backdrop-filter:blur(8px)}.dialog-topline{display:flex;align-items:center;justify-content:space-between;padding:17px 22px;border-bottom:1px solid var(--line)}.dialog-preview{font-size:9px;letter-spacing:1.4px;color:#bac5ad;display:flex;align-items:center;gap:8px}.dialog-preview::before{content:"";width:5px;height:5px;border-radius:50%;background:#bcbe86}.close-queue{background:none;border:0;width:30px;height:30px;color:#aab9a3;display:grid;place-items:center;padding:5px}.close-queue:hover{color:#f0dfb4}.queue-body{text-align:center;padding:32px 40px 28px}.queue-emblem{margin:0 auto 22px;display:grid;place-items:center;width:58px;height:58px;position:relative;color:#d4c284}.queue-emblem::before,.queue-emblem::after{content:"";position:absolute;inset:0;border:1px solid #d0bf8033;transform:rotate(45deg)}.queue-emblem::after{inset:-7px;border-top-color:#d0bf80;border-bottom-color:#d0bf80;animation:search-turn 7s linear infinite}.queue-emblem svg{width:25px;height:25px}.queue-dialog[data-state="found"] .queue-emblem::after{animation:none;transform:rotate(45deg);border-color:#d0bf8099}.queue-kicker{font-size:9px;letter-spacing:2px;color:#b0bb9f;margin:0 0 10px}.queue-body h2{font-family:Georgia,"Times New Roman",serif;font-size:34px;font-weight:400;letter-spacing:-.6px;line-height:1.15;margin:0;color:#ece8cf;outline:none}.queue-description{color:#a4b29e;font-size:12px;line-height:1.7;margin:12px auto 0;max-width:350px;min-height:40px}.queue-meta{display:flex;align-items:center;justify-content:center;gap:13px;margin:22px 0;font-size:10px;color:#bbc7ae}.queue-meta span+span{border-left:1px solid #b6c8a333;padding-left:13px}.queue-meta time{font-variant-numeric:tabular-nums;color:#e0d29f;min-width:31px;display:inline-block}.queue-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:24px}.queue-slot{padding:17px 12px 15px;border:1px solid #a8be912d;background:#a0b78009;display:flex;align-items:center;flex-direction:column}.queue-avatar{width:60px;height:60px;display:grid;place-items:center;border:1px solid #abbd8e33;border-radius:50%;background:radial-gradient(circle,#717c3d66,transparent);margin-bottom:12px}.queue-avatar img{width:65px;height:65px;object-fit:contain}.queue-slot strong{font-size:12px;font-weight:500;color:#e1e6d4}.queue-slot small{font-size:9px;color:#b5c5a1;margin-top:7px;display:flex;align-items:center;gap:5px}.queue-slot small::before{content:"";width:4px;height:4px;background:#b6ca98;border-radius:50%}.queue-slot.waiting{border-style:dashed;background:transparent}.waiting .queue-avatar{background:transparent;border-style:dashed;color:#a8b49b}.waiting .queue-avatar svg{width:22px;height:22px;opacity:.7}.queue-slot.waiting strong{color:#9aa890}.queue-slot.waiting small{color:#7e937e}.waiting small::before{background:#7e937e;animation:search-pulse 1.8s ease-in-out infinite}.queue-body .play-button{margin:0}.cancel-button{width:100%;min-height:46px;color:#c9d0ba;background:#d0d8b408;border:1px solid #b5c39a42;font-size:11px;letter-spacing:.3px}.cancel-button:hover{border-color:#c7d7ae;color:#f2e8c5}.preview-controls{border-top:1px solid var(--line);background:#111b1660;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}.preview-controls p{font-size:10px;line-height:1.7;color:#95a78e;margin:0;max-width:240px}.simulate-button{font-size:10px;color:#d8c48b;border:0;border-bottom:1px solid #d8c48b55;padding:7px 0;white-space:nowrap;background:none}.simulate-button:hover{color:#ffebb0}.found-preview-copy{color:#b9c5a7;font-size:10px}.noscript{margin:20px 5%;color:#e7cea1;font-size:13px}
@keyframes search-turn{to{transform:rotate(405deg)}}@keyframes search-pulse{50%{opacity:.3}}
@media(min-width:1500px){.hero{padding-top:65px;padding-bottom:55px}.home-main{padding-left:64px;padding-right:64px}.hero-description{font-size:14px}.arena-art{aspect-ratio:1.3}}
@media(max-width:1000px){.site-header{gap:35px}.hero{grid-template-columns:1fr 1.05fr;gap:0}.hero-board{width:119%}h1{font-size:48px}.art-label.top{top:-3%}.art-label.bottom{bottom:-3%}.roster-strip{gap:22px}.roster-heading{min-width:130px}.roster-monster{min-width:140px}.roster-note{font-size:10px;max-width:165px}}
@media(max-width:760px){.site-header{height:70px;padding:0 6%;gap:25px}.brand{font-size:10px;letter-spacing:1.3px;gap:9px}.brand svg{width:26px;height:26px}.primary-nav{gap:20px}.primary-nav a{font-size:11px}.build-label{display:none}.primary-nav{margin-left:auto}.home-main{padding:0 7%;min-height:calc(100dvh - 120px)}.hero{grid-template-columns:1fr;padding:39px 0 28px;gap:15px}.hero-copy{text-align:center;z-index:1}.eyebrow{justify-content:center;font-size:8px;margin-bottom:15px}.eyebrow::before{display:none}h1{font-size:47px;letter-spacing:-2px}.hero-description{margin:16px auto 23px;font-size:12px;max-width:330px}.play-panel{margin:auto;max-width:380px}.play-note{justify-content:center}.arena-art{grid-row:2;width:85%;margin:10px auto 0;aspect-ratio:1.6;max-width:450px}.arena-art::before{width:65%}.arena-art::after{width:55%}.hero-board{width:100%}.art-label.top,.art-cross{display:none}.art-label.bottom{bottom:-1%;font-size:7px}.roster-strip{flex-wrap:wrap;justify-content:center;gap:22px 28px;padding:24px 0}.roster-heading{width:100%;text-align:center}.roster-heading p{margin-bottom:5px}.roster-heading span{font-size:10px}.roster-monster{min-width:128px;gap:10px}.roster-note{display:none}.site-footer{height:auto;min-height:50px;padding:15px 6%;font-size:8px}.site-footer p{max-width:250px;line-height:1.7}.site-footer a{white-space:nowrap}}
@media(max-width:400px){.primary-nav{gap:16px}.brand{font-size:9px;letter-spacing:1px}.brand svg{width:22px}.primary-nav a{font-size:10px}h1{font-size:42px}.hero-description{font-size:11px}.arena-art{width:95%}.queue-body{padding:27px 22px 24px}.queue-body h2{font-size:30px}.preview-controls{flex-direction:column;gap:6px;text-align:center}.preview-controls p{max-width:270px}.queue-description{font-size:11px}.queue-slot{padding:14px 8px}.queue-slots{gap:10px}}
@media(max-height:750px) and (min-width:761px){.site-header{height:70px}.hero{padding-top:30px;padding-bottom:27px}.home-main{min-height:calc(100dvh - 120px)}h1{font-size:51px}.hero-description{margin:15px 0 22px}.arena-art{aspect-ratio:1.4}.art-label.top{top:0}.art-label.bottom{bottom:0}.roster-strip{padding-top:18px;padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep entry and queue controls reachable around phone safe areas. */
@media(max-width:900px){.site-header{padding-top:env(safe-area-inset-top);height:calc(70px + env(safe-area-inset-top))}.close-queue{width:44px;height:44px}.site-footer{padding-bottom:max(15px,env(safe-area-inset-bottom))}.primary-nav a{min-height:44px}.play-button,.cancel-button{touch-action:manipulation}}