/* Fal moonlit citadel with native hero and selection controls. */
#menu{--opening-gold:#bfa571;--opening-cream:#ede6d7;--opening-muted:#c1c5bc;padding:clamp(16px,3vh,36px) clamp(16px,4vw,60px);padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));overflow:hidden;background:#120f0c;isolation:isolate;}
#menu::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#120f0c20,#120f0c40 38%,#120f0c9e 64%,#120f0c85),linear-gradient(0deg,#120f0cdf,transparent 38%,#120f0cb0),url('./art/illustrated/opening-citadel.webp') center/cover no-repeat;pointer-events:none;z-index:-1}
#menu .intro{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:22px;width:min(1440px,100%);height:100%;max-height:100%;margin:0 auto;min-height:0}
.roster-heading{margin:0;padding:0 0 18px;border-color:#bfa57155;align-items:center;gap:14px;flex-wrap:nowrap}
.title-lockup{display:flex;align-items:center;gap:18px}.title-sigil{width:60px;height:60px;flex:none;fill:none;stroke:#d0b986;stroke-width:1;filter:drop-shadow(0 0 12px #e6be7644)}
#menu .roster-heading h1{font:700 clamp(32px,3.8vw,55px)/1 Cinzel,Barlow,serif;letter-spacing:-1.5px;transform:none;color:var(--opening-cream);text-shadow:0 4px 24px #0008}
.roster-heading p{font:16px/1.35 Barlow,sans-serif;letter-spacing:1px;color:#e4e1db;text-shadow:0 2px 8px #000;margin:8px 0 0}
.roster-heading .match-format{margin-left:auto;text-align:right;font-size:16px;color:#d2c6ab;max-width:230px;line-height:1.4}
.roster-layout{min-height:0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);gap:clamp(25px,4vw,60px)}
.hero-feature{min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.7fr);grid-template-rows:auto minmax(0,1fr) auto;gap:12px 24px;text-align:left;position:relative;background:none;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}
#menu .hero-stage{height:100%;min-height:300px;width:100%;grid-column:1;grid-row:1/4;margin:0;align-self:stretch;position:relative;display:flex;align-items:end;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 90%,#1b171266,transparent 65%)}
#menu .hero-stage::before{content:'';inset:7% 4% 9%;border:1px solid #bfa57150;border-radius:50% 50% 4px 4px;filter:none;background:radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--hero-color) 27%,transparent),transparent 69%);box-shadow:inset 0 0 0 8px #b9a3700b,0 0 40px #b9c3a912;mask-image:linear-gradient(#000 65%,transparent)}
#menu .hero-stage::after{content:'';position:absolute;bottom:5%;left:10%;right:10%;height:13%;border:1px solid #d0b87f55;border-radius:50%;background:radial-gradient(ellipse,#83a9a12b,transparent 65%);box-shadow:0 0 25px #b1cac517;pointer-events:none}
#menu #hero-art{height:92%;max-height:550px;width:100%;position:relative;z-index:1;object-fit:contain;object-position:center bottom;padding:12px 3px 6%;filter:drop-shadow(0 14px 17px #0008) drop-shadow(0 0 18px color-mix(in srgb,var(--hero-color) 14%,transparent));animation:legend-arrive .45s ease-out}
#menu .hero-copy{grid-column:2;grid-row:1;align-self:end;padding-top:12px}
#menu .hero-copy h2{font:700 clamp(28px,3vw,44px)/1.04 Cinzel,Barlow,serif;color:var(--opening-cream);letter-spacing:-.6px;overflow-wrap:anywhere}
#menu .hero-copy>span{font:700 12px/1.4 Barlow,sans-serif;text-transform:uppercase;letter-spacing:2px;margin-top:9px;color:var(--hero-color)}
#menu .hero-copy p{font:16px/1.5 Barlow,sans-serif;color:#d5d1cb;margin:13px 0 0}
#hero-preview{grid-column:2;grid-row:2;align-self:start;min-width:0}
.hero-copy,.hero-stats{text-shadow:0 2px 9px #000c}.hero-stats{padding:15px 0;margin:17px 0;border-color:#bfa57140;gap:6px;text-align:left}.hero-stats div+div{border-left:0;padding-left:0}.hero-stats dt{font-size:10px;letter-spacing:1.4px;color:#b5b8b1}.hero-stats dd{font-size:19px;color:#e4d6b7;line-height:1.1;margin-top:7px}
.hero-move-preview{gap:8px;grid-template-columns:1fr 1fr}
.hero-move-preview button{display:flex;flex-direction:column;align-items:start;gap:8px;min-height:100px;padding:8px;border:1px solid #b3aca040;border-radius:3px;background:linear-gradient(135deg,#2e2822a6,#191511bd);font:700 14px/1.1 Barlow,sans-serif;box-shadow:none}
.hero-move-preview button[aria-pressed=true]{background:#2f2923df;border-color:#d1b880;box-shadow:0 0 15px #cbbea817}.preview-spell-art{width:44px;height:44px;display:block;flex:none;border:1px solid #c2bbaf75;border-radius:3px;background-size:200% 200%}.hero-move-preview small{font-size:10px;margin-top:4px;color:#c1c5bc}
#hero-spell-note{grid-column:2;grid-row:3;min-height:0;padding:10px 0 0;border-top:1px solid #bfa57135;margin:0;color:#ddd8ce;font:14px/1.5 Barlow,sans-serif}
.roster-browser{min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);padding:0 0 0 20px;border-left:1px solid #bfa57165}
.roster-title{margin:0 0 13px}.roster-title h2{font:700 26px/1.1 Cinzel,Barlow,serif;color:var(--opening-cream)}.roster-title>span{font:13px Barlow;color:#bfc2bb;white-space:nowrap}
#role-filters{min-width:0;gap:3px;padding:0 0 10px;margin:0 0 5px;scrollbar-width:thin;overscroll-behavior-x:contain}
#role-filters button{min-height:38px;padding:7px 11px;font-size:13px;border-color:transparent;border-bottom:1px solid #b1ada636;border-radius:0;background:transparent;color:#c1c5bc}
#role-filters button[aria-pressed=true]{background:#b2965e33;color:#e5d2a7;border-color:#ceb178}
#menu .hero-picks{min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(123px,1fr);gap:8px;overflow:auto;padding:3px 6px 6px 3px;scrollbar-width:thin;scrollbar-color:#a18a58 #1b1713;overscroll-behavior:contain;touch-action:pan-y;align-content:start}
#menu .hero-picks button{position:relative;flex:none;min-width:0;min-height:123px;justify-content:end;padding:7px 4px 8px;gap:4px;border:1px solid #b0b6a83e;border-radius:3px;background:linear-gradient(145deg,#27221dc7,#16120fd4);box-shadow:inset 0 0 18px #0004;color:#e4dbca;transition:background .18s,border-color .18s}
#menu .hero-picks img{height:clamp(64px,10vh,94px);max-height:100px;width:100%;padding:2px;object-fit:contain;object-position:center;filter:drop-shadow(0 4px 4px #0008)}
#menu .hero-picks span{font:700 15px/1.1 Barlow,sans-serif;white-space:normal;text-align:center}#menu .hero-picks small{font:10px/1.2 Barlow;letter-spacing:1px;color:#a8ada2;margin-top:5px}
#menu .hero-picks button[aria-pressed=true]{border-color:#d8bc83;background:linear-gradient(145deg,color-mix(in srgb,var(--hero-color) 20%,#27221e),#1a1612);box-shadow:inset 0 -2px #cfb379,0 0 12px #ceb77c1c}
#menu .hero-picks button[aria-pressed=true]::after{content:'';position:absolute;top:6px;right:6px;width:7px;height:7px;transform:rotate(45deg);background:#e8cf97;box-shadow:0 0 8px #e8c584}
.roster-footer{position:static;display:flex;justify-content:space-between;align-items:center;margin:0;padding:15px 0 0;min-height:78px;gap:20px;background:none;border-top:1px solid #bfa57155;z-index:2;flex-wrap:nowrap}
.start-action{display:flex;align-items:center;gap:24px;min-width:0}#ready-legend{font:16px/1.4 Barlow;color:#cfc6ad;max-width:220px}
#menu .roster-footer .primary{width:290px;min-height:55px;font:800 22px/1 Barlow;letter-spacing:1.4px;border-radius:3px;border:1px solid #e9cf96;background:linear-gradient(110deg,#b0955b,#dfc489 50%,#ba9f67);box-shadow:inset 0 0 0 3px #2824201a,0 6px 24px #0005;color:#1c1a17;flex:none}
#menu .roster-footer .primary:disabled{filter:saturate(.5);color:#3b3734;cursor:wait}
.roster-footer .menu-links{display:flex;flex-wrap:nowrap;margin:0;gap:clamp(12px,2vw,30px)}.roster-footer .menu-links button{font:700 14px Barlow;color:#d5d1c9;min-height:44px;border-bottom:1px solid transparent}.roster-footer .menu-links button:hover{border-color:#bfa571}
#menu button:focus-visible{outline:2px solid #f7dc9d;outline-offset:2px}
#load-error{margin:0;font:14px/1.3 Barlow;color:#ebc4b6;max-width:220px}
/* Panels: an umber slab in a thin bronze frame, lit at the top edge. */
dialog:not(.spellbook-sheet):not(.market){background:linear-gradient(180deg,#221d17f7,#14110df9);border:1px solid #7d6240;border-radius:3px;box-shadow:inset 0 1px 0 #ffffff12,inset 0 0 0 1px #000,0 0 0 1px #000,0 22px 80px #000b}dialog:not(.spellbook-sheet) h2{font-family:Cinzel,Barlow,serif;font-weight:600;letter-spacing:.6px;color:var(--mr-parchment)}
.map-destinations{flex-wrap:wrap;gap:7px}.map-destinations button{flex:1 1 42%;min-height:44px;background:#2a241e;border-color:#938a7a68;color:#e5dcca}
@keyframes legend-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px) and (min-width:701px){.roster-layout{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:20px}.hero-feature{grid-template-columns:minmax(0,1fr) minmax(160px,.85fr);gap:10px 15px}#menu .hero-stage{min-height:260px}.roster-browser{padding-left:15px}.hero-move-preview button{min-height:90px;font-size:13px}#ready-legend{display:none}}
@media(max-width:700px){
 #menu::before{background-position:center,center,28% center}
 #menu{padding:12px 14px max(8px,env(safe-area-inset-bottom));padding-top:max(12px,env(safe-area-inset-top))}#menu .intro{gap:12px}.roster-heading{padding-bottom:11px;gap:8px}.title-lockup{gap:10px}.title-sigil{width:32px;height:32px}#menu .roster-heading h1{font-size:29px;letter-spacing:-1px}.roster-heading p{font-size:12px;margin-top:5px;letter-spacing:.4px}.roster-heading .match-format{font-size:10px;max-width:105px;line-height:1.3}
 .roster-layout{grid-template-columns:1fr;grid-template-rows:minmax(180px,.95fr) minmax(140px,1fr);gap:14px}.hero-feature{grid-template-columns:minmax(105px,.75fr) minmax(0,1.25fr);grid-template-rows:auto 1fr auto;gap:6px 12px;overflow:auto}#menu .hero-stage{height:100%;min-height:175px;grid-row:1/4;grid-column:1}#menu #hero-art{height:100%;max-height:280px;padding-bottom:7%}#menu .hero-copy{padding-top:2px}#menu .hero-copy h2{font-size:27px}#menu .hero-copy>span{font-size:10px;letter-spacing:1.2px;margin-top:5px}#menu .hero-copy p{font-size:13px;line-height:1.3;margin-top:6px}.hero-stats{margin:7px 0;padding:7px 0;gap:4px}.hero-stats dt{font-size:8px;letter-spacing:.6px}.hero-stats dd{font-size:14px;margin-top:3px}.hero-move-preview{gap:5px}.hero-move-preview button{flex-direction:row;align-items:center;gap:5px;padding:4px;min-height:42px;font-size:11px;border-radius:3px}.preview-spell-art{width:28px;height:31px}.hero-move-preview small{font-size:8px;line-height:1.15;margin-top:3px}#hero-spell-note{font-size:12px;line-height:1.35;padding-top:6px}
 .roster-browser{padding:0;border-left:0;border-top:1px solid #bfa5713a;padding-top:11px}.roster-title{margin-bottom:8px}.roster-title h2{font-size:20px}.roster-title>span{font-size:11px}#role-filters{padding-bottom:7px;margin-bottom:2px}#role-filters button{min-height:35px;padding:6px 9px;font-size:12px}
 #menu .hero-picks{grid-auto-rows:102px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:2px 3px 4px 2px}#menu .hero-picks button{min-height:102px;padding:4px 3px 7px}#menu .hero-picks img{height:60px;max-height:60px}#menu .hero-picks span{font-size:13px}#menu .hero-picks small{font-size:8px;margin-top:3px}
 .roster-footer{position:static;margin:0;padding:10px 0 0;min-height:0;gap:5px;display:grid;grid-template-columns:1fr}.start-action{display:block}#menu .roster-footer .primary{width:100%;min-height:48px;font-size:19px}.roster-footer .menu-links{width:100%;justify-content:space-between;gap:10px}.roster-footer .menu-links button{min-height:32px;font-size:12px}#ready-legend{display:none}#load-error{max-width:none;font-size:12px}
}
@media(max-height:650px) and (max-width:700px){#menu .intro{gap:8px}.roster-layout{grid-template-rows:minmax(155px,.95fr) minmax(110px,1fr);gap:9px}.roster-heading{padding-bottom:8px}#menu .hero-stage{min-height:155px}#menu .hero-copy h2{font-size:24px}#menu .hero-copy p{font-size:12px}.hero-stats{padding-block:5px;margin:5px 0}.hero-move-preview button{min-height:38px}.roster-browser{padding-top:8px}.roster-title{margin-bottom:5px}#menu .hero-picks{grid-auto-rows:94px}#menu .hero-picks button{min-height:94px}#menu .hero-picks img{height:52px}#menu .roster-footer .primary{min-height:44px}.roster-footer .menu-links button{min-height:28px}}
@media(max-height:520px) and (min-width:701px){#menu{padding:9px 24px}#menu .intro{gap:9px}.roster-heading{padding-bottom:8px}.title-sigil{width:32px;height:32px}#menu .roster-heading h1{font-size:30px}.roster-heading p{font-size:11px;margin-top:3px}.roster-heading .match-format{font-size:12px;max-width:none}.roster-layout{grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr);gap:24px}.hero-feature{grid-template-columns:minmax(110px,.65fr) minmax(0,1fr);gap:7px 15px}#menu .hero-stage{min-height:200px;width:100%;height:100%;grid-row:1/4}#menu .hero-copy{padding-top:3px}#menu .hero-copy h2{font-size:25px}#menu .hero-copy>span{font-size:9px;margin-top:4px}#menu .hero-copy p{font-size:12px;line-height:1.3;margin-top:7px}.hero-stats{margin:7px 0;padding:6px 0}.hero-stats dt{font-size:8px}.hero-stats dd{font-size:14px;margin-top:3px}.hero-move-preview button{min-height:39px;padding:4px;flex-direction:row;gap:5px;font-size:11px}.preview-spell-art{width:29px;height:29px}.hero-move-preview small{font-size:8px}.roster-title h2{font-size:20px}.roster-title{margin-bottom:7px}#role-filters button{min-height:31px;padding:5px 9px;font-size:12px}#role-filters{padding-bottom:5px}#menu .hero-picks{grid-auto-rows:88px}#menu .hero-picks button{min-height:88px;padding:4px}#menu .hero-picks img{height:48px}#menu .hero-picks span{font-size:12px}#menu .hero-picks small{font-size:8px}.roster-footer{padding-top:8px;min-height:47px}#menu .roster-footer .primary{min-height:41px;width:230px;font-size:18px}.roster-footer .menu-links button{min-height:36px;font-size:12px}#ready-legend{display:none}#hero-spell-note{font-size:12px}}
@media(prefers-reduced-motion:reduce){#menu *,#menu *::before,#menu *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* Shore of the Ancients selection art pass */
#menu .hero-picks{grid-auto-rows:minmax(168px,1fr);gap:10px}
#menu .hero-picks button{min-height:168px;padding:0;overflow:hidden;isolation:isolate;justify-content:flex-end;background:linear-gradient(180deg,color-mix(in srgb,var(--hero-color) 14%,#27211b),#14100d)}
#menu .hero-picks button::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 34%,#100d0b44 57%,#100d0bf4 88%),linear-gradient(135deg,color-mix(in srgb,var(--hero-color) 12%,transparent),transparent 56%);pointer-events:none}
#menu .hero-card-portrait{position:absolute;inset:0;display:block;z-index:0;overflow:hidden;background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--hero-color) 30%,#3c3631),#191511 73%)}
#menu .hero-picks .hero-card-portrait img{width:100%;height:100%;max-height:none;padding:0;object-fit:cover;object-position:center 20%;transform:scale(1.08);filter:drop-shadow(0 12px 12px #0008) saturate(1.08) contrast(1.04);transition:transform .22s ease,filter .22s ease}
#menu .hero-picks button>span{position:relative;z-index:2;width:100%;padding:36px 8px 11px;background:linear-gradient(transparent,#120f0ced 48%);font:700 15px/1.08 Barlow,sans-serif;text-shadow:0 2px 8px #000;text-align:left}
#menu .hero-picks button>span small{display:block;text-align:left}
#menu .hero-picks button:hover .hero-card-portrait img,#menu .hero-picks button:focus-visible .hero-card-portrait img{transform:scale(1.16);filter:drop-shadow(0 12px 12px #0008) saturate(1.2) contrast(1.08)}
#menu .hero-picks button[aria-pressed=true] .hero-card-portrait img{transform:scale(1.14)}
.hero-move-preview button{position:relative;min-height:112px;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.hero-move-preview button:hover,.hero-move-preview button:focus-visible{transform:translateY(-2px);border-color:var(--hero-color);background:linear-gradient(135deg,color-mix(in srgb,var(--hero-color) 16%,#2e2822),#191511)}
#hero-spell-note{display:grid;gap:5px;padding:12px 14px;margin-top:8px;border:1px solid #bfa57145;border-radius:4px;background:#17130fc7;box-shadow:inset 0 0 22px #0003}
#hero-spell-note strong{font:700 15px/1.15 Barlow,sans-serif;color:#edddbc}
#hero-spell-note span{font:14px/1.4 Barlow,sans-serif;color:#dfdbd4}
#hero-spell-note small{font:11px/1.35 Barlow,sans-serif;color:var(--hero-color);letter-spacing:.35px}
@media(max-width:700px){#menu .hero-picks{grid-auto-rows:minmax(144px,1fr)}#menu .hero-picks button{min-height:144px}#hero-spell-note{font-size:13px}}