/* Cinzel draws names and titles. Its digits look like Roman letters (1 reads as I), so they come from Barlow: the
   face leaves out U+0030-0039 and every stack is Cinzel,Barlow,serif. */
@font-face{font-family:Cinzel;src:url('./fonts/cinzel.ttf') format('truetype');font-weight:400 900;font-display:swap;unicode-range:U+0000-002F,U+003A-10FFFF}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#menu.reference-selection{--cyan:#d7c298;--cream:#e6e3de;--edge:#687d96;display:block;padding:0;overflow:hidden;background:#16120f url('./art/reference/shore-scene.webp') center/cover no-repeat;touch-action:auto;color:var(--cream)}
#menu.reference-selection[hidden]{display:none}
#menu.reference-selection::before{content:none}
#menu.reference-selection .intro{position:relative;display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;min-height:0;text-align:left}
#menu .roster-heading{position:absolute;left:0;top:0;width:32%;height:20.7%;display:flex;padding:0;margin:0;border:0;align-items:center;gap:0;background:linear-gradient(90deg,transparent 65%,#16120fd9)}
#menu .shore-wordmark{position:relative;width:66%;height:100%;margin:0;flex:none;transform:none;background:url('./art/reference/reference-source.png') 0 0/100vw 100dvh no-repeat;mask-image:linear-gradient(to right,#000 calc(100% - 8px),transparent);font-size:0}
#menu .ancient-motto{margin:0 0 0 5%;color:#cdbfa4;font:11px/2 Cinzel,Barlow,serif;text-transform:uppercase;letter-spacing:3px}
#menu .selection-nav{position:absolute;inset:0 0 auto 32.25%;height:7.75%;display:flex;align-items:center;justify-content:space-between;padding:0 2.5% 0 2%;border-bottom:1px solid #9a7a4b66;background:linear-gradient(180deg,#16120fe6,#100d0bcc);box-shadow:0 1px 0 #000a;z-index:4}
#menu .selection-tabs{display:flex;height:100%;align-items:stretch;gap:30px}
#menu .selection-tabs button{position:relative;min-height:44px;padding:0 8px;border:0;background:none;color:#c4b8a2;font:12px Cinzel,Barlow,serif;text-transform:uppercase;letter-spacing:3px}
#menu .selection-tabs button[aria-current=page]{color:var(--mr-parchment);text-shadow:0 1px 2px #000}
#menu .selection-tabs button[aria-current=page]::after{content:'';position:absolute;bottom:13px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--mr-gold) 20%,var(--mr-gold) 80%,transparent);box-shadow:0 1px 0 #000}
#menu .selection-account{display:flex;align-items:center;gap:18px;margin-left:20px}
#menu .icon-button{display:grid;place-items:center;min-width:30px;min-height:44px;padding:4px;background:none;border:0}
#menu .icon-button img{width:21px;height:21px;filter:invert(82%) sepia(.35)}
#menu #tidecaller-profile{display:flex;align-items:center;gap:11px;background:none;border:0;text-align:left;min-height:44px;padding:0;color:#e0dbd0;font:14px Barlow,sans-serif;white-space:nowrap}
#menu #tidecaller-profile small{display:block;font-size:11px;letter-spacing:1px;margin-top:5px;color:var(--mr-muted)}
#menu .profile-portrait{height:50px;width:50px;display:block;flex:none;border-radius:50%;border:2px solid #7d6240;box-shadow:0 0 0 1px #000,0 0 0 2px #c9a66b40;background:url('./art/reference/reference-source.png') 86.95% .86%/3072% 1728%;overflow:hidden}
#menu .roster-layout{display:contents}
#menu .hero-feature::before{content:'';position:absolute;inset:0 0 0 55%;background:linear-gradient(90deg,transparent,#120e0bd4 70%);pointer-events:none}
#menu .hero-feature{position:absolute;left:32%;top:7.75%;bottom:10.7%;width:68%;display:block;min-width:0;min-height:0;overflow:visible;background:none}
#menu .hero-stage{position:absolute;left:-4%;top:-5%;height:119%;width:62%;min-height:0;margin:0;padding:0;display:block;background:none;overflow:visible;pointer-events:none}
#menu .hero-stage::before{content:'';position:absolute;left:14%;right:14%;top:12%;bottom:4%;border-radius:50%;background:radial-gradient(ellipse at 50% 55%,#f2b36a3d,#c9874a1a 45%,transparent 70%);filter:blur(6px)}
#menu .hero-stage::after{content:'';position:absolute;left:28%;right:28%;bottom:3.5%;height:5%;border-radius:50%;background:radial-gradient(ellipse,#000000b3,transparent 70%)}
#menu #hero-picture{width:100%;height:100%;display:block}
#menu #hero-art{position:relative;z-index:1;display:block;width:100%;height:88%;max-width:none;max-height:none;padding:0;margin:12% 0 0;object-fit:contain;object-position:center bottom;mask-image:none;filter:brightness(1.1) drop-shadow(0 0 1px #000) drop-shadow(-6px 10px 14px #000a);animation:none;transition:opacity .18s}
#menu .hero-copy{position:absolute;left:auto;right:2%;top:37%;width:39%;margin:0;padding:0;align-self:auto;text-align:left;text-shadow:0 2px 6px #0d0a08}
#menu .hero-title{display:flex;align-items:center;gap:15px}
#menu .hero-sigil{display:block;width:42px;height:58px;flex:none;background:url('./art/reference/reference-source.png') calc(1101/1494*100%) calc(332/806*100%)/3657.14% 1489.66% no-repeat;filter:grayscale(1) brightness(.6) contrast(6);mix-blend-mode:screen}
#menu .hero-copy h2{font:600 clamp(25px,2.6vw,44px)/1.08 Cinzel,Barlow,serif;letter-spacing:2px;text-transform:uppercase;color:var(--mr-parchment);margin:0;overflow-wrap:normal}
#menu .hero-copy>span{display:block;margin:4px 0 0 57px;color:var(--mr-bronze-hi);font:13px/1.4 Cinzel,Barlow,serif;letter-spacing:3px;text-transform:uppercase}
#menu .hero-copy p{display:block;margin:10px 0 8px 57px;font:italic 500 15px/1.4 Barlow,sans-serif;color:var(--mr-text)}
#menu #hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin-left:57px}
#menu #hero-tags span{border:1px solid #6e573a;border-radius:2px;padding:2px 9px;color:var(--mr-parchment);font:600 10px/1.2 Barlow,sans-serif;text-transform:uppercase;letter-spacing:1.2px;background:#15110ed9;box-shadow:inset 0 1px 0 #ffffff0d}
#menu #hero-preview{position:absolute;right:4%;top:59.4%;width:37%;margin:0;padding:0;align-self:auto}
#menu .hero-move-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0}
#menu .hero-move-preview button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:start;gap:0;min-width:0;min-height:0;height:auto;margin:0;padding:0;border:0;background:none;box-shadow:none;color:var(--mr-text);font:10px/1.2 Barlow,sans-serif;text-transform:uppercase;text-align:center}
#menu .hero-move-preview button>span:not(.painted-spell){width:100%;margin-top:5px;min-height:18px;font:10px/1.15 Barlow,sans-serif;letter-spacing:.25px}
#menu .preview-spell-art{display:block;width:100%;height:auto;aspect-ratio:1;flex:none;border:1px solid #7d6240;border-radius:2px;background-size:200% 200%;box-shadow:0 0 0 1px #000,0 4px 10px #0009;filter:saturate(.65) sepia(.22)}
#menu .hero-move-preview button[aria-pressed=true] .preview-spell-art{border:2px solid var(--mr-gold);box-shadow:0 0 0 1px #000,0 0 0 3px #dcb46e33,0 4px 10px #0009;filter:none}
#menu .hero-move-preview kbd{display:block;min-width:21px;line-height:16px;height:18px;border:1px solid #6e573a;border-radius:2px;color:var(--mr-parchment);font:600 12px/16px Barlow,sans-serif;background:#120f0ccc}
#menu .reference-spell{background-image:url('./art/reference/reference-source.png')!important;background-size:1920% 1080%;background-position:calc(var(--spell-x)/1456*100%) calc(488/784*100%)}
#menu #hero-spell-note{position:absolute;right:11.6%;top:77.2%;width:29.4%;height:19.2%;min-height:0;margin:0;padding:10px 11px;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:7px 10px;border:1px solid #5c4630;border-top-color:#7d6240;border-radius:2px;background:linear-gradient(180deg,#1d1813f0,#120f0cf2);box-shadow:var(--mr-bevel),var(--mr-frame);color:var(--mr-text);font:12px/1.25 Barlow,sans-serif;overflow:hidden;text-shadow:none}
#menu #hero-spell-note>.painted-spell{grid-column:1;grid-row:1/3;width:52px;height:52px;border:1px solid #7d6240;background-size:200% 200%;border-radius:2px;filter:saturate(.8) sepia(.12)}
#menu #hero-spell-note>.reference-spell{background-size:1920% 1080%}
#menu #hero-spell-note strong{font:600 12px/1.2 Cinzel,Barlow,serif;color:var(--mr-parchment);text-transform:uppercase;letter-spacing:.8px;padding-right:18px}
#menu #hero-spell-note .detail-key{position:absolute;right:11px;top:9px;border:1px solid #6e573a;border-radius:2px;padding:1px 5px;font:600 11px Barlow,sans-serif;color:var(--mr-bronze-hi)}
#menu #hero-spell-note .detail-copy{display:block;min-height:0;overflow:auto;scrollbar-width:thin;grid-column:2;grid-row:2}
#menu #hero-spell-note .detail-copy>span{display:block;font-family:Barlow,sans-serif;font-size:11px;line-height:1.25;-webkit-line-clamp:unset;overflow:visible}
#menu #hero-spell-note small{display:block;margin-top:7px;font:11px/1.2 Barlow,sans-serif;color:var(--mr-muted)}
#menu .roster-browser{position:absolute;left:0;top:20.7%;width:32%;height:65.3%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:50px minmax(0,1fr);gap:12px;padding:10px 24px 13px 16px;margin:0;border:1px solid #5c4630;border-top-color:#7d6240;background:linear-gradient(180deg,#191510ee,#110e0bf2);box-shadow:var(--mr-bevel),0 8px 24px #000a;min-width:0;min-height:0;overflow:hidden}
#menu .roster-title{position:absolute;bottom:0;right:0;display:none}
#menu #role-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;height:50px;min-height:0;min-width:0;margin:0;padding:0;overflow:hidden;white-space:normal}
#menu #role-filters button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:2px 0;margin:0;border:1px solid #4d433733;border-radius:0;background:transparent;color:#c2b6a0;font:600 10px Barlow,sans-serif;text-transform:uppercase;letter-spacing:.6px}
#menu #role-filters .role-icon{display:block;flex:none;background-image:url('./art/reference/reference-source.png');background-size:6678.26% 3756.52%;background-position:calc(var(--role-x)/1513*100%) calc(196/841*100%)}
#menu #role-filters button img,#menu #role-filters button .role-icon{width:23px;height:23px;margin-bottom:3px;filter:grayscale(1) sepia(.6) brightness(1.15)}
#menu #role-filters button[aria-pressed=true]{background:linear-gradient(180deg,#3a2f22b3,#1c1712b3);border:1px solid var(--mr-bronze-hi);color:var(--mr-parchment);box-shadow:inset 0 1px 0 #ffffff14,inset 0 -2px 0 var(--mr-gold)}
#menu #role-filters button[aria-pressed=true] img{filter:invert(90%)}
#menu .hero-picks{position:relative;display:grid;grid-column:1;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(88px,1fr);gap:11px 12px;padding:0;margin:0;min-height:0;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;touch-action:pan-y;cursor:auto;align-content:stretch;scrollbar-width:thin;scrollbar-color:#6e573a #15110e;overscroll-behavior:contain}
#menu .hero-picks button{position:relative;display:flex;flex:none;flex-direction:column;min-width:0;min-height:0;width:100%;height:100%;margin:0;padding:0;gap:0;border:1px solid #5c4630;border-radius:1px;background:#17130f;box-shadow:0 0 0 1px #000,0 4px 10px #0009;overflow:hidden;cursor:pointer;scroll-snap-align:none;touch-action:pan-y;container-type:size;--card-label-height:22px;color:#e8e3da}
#menu .hero-picks button::before,#menu .hero-picks button::after{content:none}
#menu .hero-picks button[aria-pressed=true]{border:2px solid var(--mr-gold);background:#1f1a15;box-shadow:0 0 0 1px #000,0 0 0 3px #dcb46e40,0 4px 12px #000b;color:var(--mr-parchment)}
#menu .hero-picks button>span.hero-card-name{display:grid;place-items:center;width:100%;height:22px;min-height:22px;padding:1px 0;margin:0;background:linear-gradient(180deg,#1a1611,#100d0a);border-top:1px solid #3b3127;font:600 10px/1 Cinzel,Barlow,serif;text-transform:uppercase;text-decoration:none;text-align:center;letter-spacing:.4px;white-space:nowrap;z-index:1}
#menu .hero-picks button[aria-pressed=true]>span.hero-card-name{background:linear-gradient(180deg,#3a2f22,#211a13);color:#f3dca6;text-decoration:none}
#menu .hero-picks button>span.reference-portrait{padding:0;margin:0;text-decoration:none;display:block;flex:1;min-height:0;width:100%;background-color:#14110e;background-size:cover;background-position:50% 22%;background-repeat:no-repeat;box-shadow:inset 0 0 12px #000a;transition:filter .18s}
/* Each card shows the bust rendered from that hero's 3D model (roster.js sets the image). */
#menu .hero-picks button:not([aria-pressed=true])>span.reference-portrait{filter:saturate(.82) brightness(.9)}
#menu .hero-picks button:hover>span.reference-portrait,#menu .hero-picks button:focus-visible>span.reference-portrait{filter:none}
#menu .roster-footer{position:absolute;bottom:0;left:0;width:100%;height:10.7%;min-height:0;padding:0;margin:0;display:block;border-top:1px solid #7d624099;background:linear-gradient(180deg,#14100dd9,#0e0c0af0);box-shadow:0 -1px 0 #000a;z-index:3;overflow:visible}
#menu .arcade-brand{position:absolute;left:0;top:0;width:32%;height:100%;display:flex;align-items:center;text-decoration:none;overflow:hidden}
#menu .brand-source{display:block;flex:none;width:198px;height:80px;background:url('./art/reference/reference-source.png') 0 -771px/1536px 864px no-repeat}
#menu .arcade-motto{font:10px/1.8 Cinzel,Barlow,serif;color:#bcae96;text-transform:uppercase;letter-spacing:2px;border-left:1px solid #7d624055;padding-left:21px}
#menu .start-action{position:absolute;right:1.2%;top:-10px;width:28%;display:block}
#menu .roster-footer #play{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:46px;padding:5px 15px;margin:0;border:1px solid var(--mr-gold);outline:1px solid #5c4630;outline-offset:3px;border-radius:2px;background:linear-gradient(180deg,#4a3a25,#2b2117 55%,#1d160f);box-shadow:inset 0 1px 0 #ffe8b833,inset 0 0 18px #00000080,0 6px 18px #000b;color:#f5e6c4;text-shadow:0 1px 2px #000;font:600 15px/1.2 Cinzel,Barlow,serif;letter-spacing:1px;text-transform:uppercase;clip-path:polygon(2% 0,98% 0,100% 20%,100% 80%,98% 100%,2% 100%,0 80%,0 20%)}
#menu #play .play-sigil{display:block;width:27px;height:33px;flex:none;background:url('./art/reference/reference-source.png') -1143px -769px/1536px 864px no-repeat}
#menu #play img{width:25px;height:30px;filter:invert(86%) sepia(.4);flex:none}
#menu #play .play-sigil{filter:grayscale(1) sepia(.7) brightness(1.2)}
#menu #play img:last-child{width:17px;height:22px;margin-left:auto}
#menu #play:disabled{opacity:.7;filter:saturate(.6);color:#cbbfa8}
#menu .roster-footer .menu-links{position:absolute;right:1.7%;top:auto;bottom:8px;width:27.5%;display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;padding:0;flex-wrap:nowrap}
#menu .roster-footer .menu-links button{display:flex;align-items:center;gap:8px;min-height:38px;padding:2px 0;border:0;background:none;font:600 11px Barlow,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#bfb29b;white-space:nowrap}
#menu .menu-links kbd{border:1px solid #6e573a;border-radius:2px;background:#120f0cd9;padding:3px 7px;color:var(--mr-parchment);font:600 12px Barlow,sans-serif;box-shadow:inset 0 1px 0 #ffffff0d}
#menu #load-error{position:absolute;left:35%;bottom:12px;width:30%;font:13px Barlow,sans-serif;color:#ecc4b8}
#menu .shore-secret{position:absolute;right:2%;top:10.9%;margin:0;color:#d2c4aa;font:10px/2 Cinzel,Barlow,serif;letter-spacing:2px;text-transform:uppercase;text-shadow:0 2px 5px #000;pointer-events:none}
#menu .shore-secret span{display:block;width:20px;border-top:1px solid #c9a66b;margin-top:10px}
#menu .shore-memory{position:absolute;right:1.6%;bottom:14.8%;margin:0;color:#d2c4aa;font:9px/2 Cinzel,Barlow,serif;letter-spacing:2px;text-transform:uppercase;text-shadow:0 2px 5px #000;pointer-events:none}
#menu button:focus-visible,#menu a:focus-visible{outline:2px solid var(--mr-gold);outline-offset:3px}
@media(min-width:1000px) and (max-height:700px){#menu .roster-footer .menu-links{bottom:4px}#menu .roster-footer .menu-links button{min-height:28px}#menu .hero-copy{top:29%}#menu #hero-preview{top:55%}#menu #hero-spell-note{top:77%;height:21%}#menu .hero-copy p{display:none}#menu .hero-copy h2{font-size:30px}#menu .hero-picks button>span.hero-card-name{font-size:10px}}
@media(max-width:999px) and (min-width:600px){
 #menu .selection-nav{padding:0 12px;left:34%;height:12%}#menu .selection-tabs{gap:11px}#menu .selection-tabs button{font-size:9px;letter-spacing:1px;padding:0 4px}#menu .selection-tabs button[aria-current=page]::after{bottom:2px}#menu .selection-account{gap:5px;margin-left:10px}#menu #tidecaller-profile{display:none}
 #menu .roster-heading{width:34%;height:19%}#menu .shore-wordmark{width:100%;background-size:100vw 100dvh}#menu .ancient-motto{display:none}
 #menu .roster-browser{width:34%;top:19%;height:65%;padding:6px 8px;grid-template-rows:38px minmax(0,1fr);gap:6px}#menu #role-filters{height:38px}#menu #role-filters button{font-size:8px;letter-spacing:0;min-height:32px}#menu #role-filters button img,#menu #role-filters button .role-icon{width:18px;height:18px}
 #menu .hero-picks{gap:6px;grid-template-rows:repeat(4,minmax(58px,1fr));grid-auto-rows:58px}#menu .hero-picks button{--card-label-height:16px}#menu .hero-picks button>span.hero-card-name{font-size:8px;letter-spacing:0;height:16px;min-height:16px}
 #menu .hero-feature{left:34%;top:12%;bottom:16%;width:66%}#menu .hero-stage{left:-5%;top:-4%;width:53%;height:125%}#menu .hero-copy{right:3%;top:11%;width:48%}#menu .hero-sigil{width:24px;height:28px}#menu .hero-title{gap:8px}#menu .hero-copy h2{font-size:24px;letter-spacing:1px}#menu .hero-copy>span{font-size:9px;margin-left:32px;letter-spacing:1px}#menu .hero-copy p{font-size:11px;line-height:1.25;margin:7px 0 6px 0}#menu #hero-tags{margin-left:0;gap:5px}#menu #hero-tags span{font-size:8px;padding:2px 5px;letter-spacing:.5px}
 #menu #hero-preview{right:3%;top:45%;width:48%}#menu .hero-move-preview{gap:8px}#menu .hero-move-preview button>span:not(.painted-spell){font-size:8px;min-height:14px;margin-top:3px}#menu .hero-move-preview kbd{height:15px;font-size:10px;line-height:13px}
 #menu #hero-spell-note{right:3%;top:79%;height:21%;width:48%;padding:6px;grid-template-columns:35px minmax(0,1fr);gap:4px 7px}#menu #hero-spell-note>.painted-spell{width:35px;height:35px}#menu #hero-spell-note strong{font-size:10px}#menu #hero-spell-note .detail-copy>span,#menu #hero-spell-note small{font-size:9px;line-height:1.2}#menu #hero-spell-note small{margin-top:3px}#menu #hero-spell-note .detail-key{right:7px;top:6px;font-size:9px}
 #menu .roster-footer{height:16%}#menu .arcade-brand{width:34%}#menu .brand-source{width:180px;height:65px;background-position:0 -771px}#menu .arcade-motto{display:none}#menu .start-action{width:46%;right:2%;top:3px}#menu .roster-footer #play{min-height:34px;font-size:12px;padding:3px 10px}#menu #play .play-sigil{display:block;width:27px;height:33px;flex:none;background:url('./art/reference/reference-source.png') -1143px -769px/1536px 864px no-repeat}
#menu #play img{height:22px;width:20px}#menu #play .play-sigil{height:22px;width:18px;background-size:1024px 576px;background-position:-762px -512px}#menu .roster-footer .menu-links{right:2%;width:46%;top:38px;bottom:auto}#menu .roster-footer .menu-links button{font-size:9px;letter-spacing:.5px;min-height:22px}#menu .menu-links kbd{font-size:10px;padding:1px 4px}#menu .shore-secret,#menu .shore-memory{display:none}
}
@media(max-width:599px){
 #menu.reference-selection{background-position:48% center}
 #menu .selection-nav{left:0;height:46px;padding:0 12px;top:0}#menu .selection-tabs{gap:12px}#menu .selection-tabs button{font-size:9px;letter-spacing:1px;padding:0 3px;min-height:40px}#menu .selection-tabs button[aria-current=page]::after{bottom:3px}#menu .selection-tabs [data-menu-tab=shop]{display:none}#menu .selection-account{gap:5px;margin-left:5px}#menu .icon-button{min-width:24px}#menu .icon-button img{width:18px;height:18px}#menu #tidecaller-profile{display:none}
 #menu .roster-heading{left:9px;top:46px;height:90px;width:145px;z-index:1}#menu .shore-wordmark{width:145px;height:90px;background-size:696px 392px;background-position:0 0}#menu .ancient-motto{display:none}
 #menu .hero-feature{left:0;top:48px;width:100%;height:42%;bottom:auto;min-height:0}
 #menu .hero-stage{left:-5%;top:35px;width:48%;height:98%;z-index:0}#menu .hero-copy{right:12px;top:35px;width:57%;z-index:1}#menu .hero-title{gap:6px}#menu .hero-sigil{display:none}#menu .hero-copy h2{font-size:22px;letter-spacing:1px;overflow-wrap:normal}#menu .hero-copy>span{margin-left:0;font-size:9px;letter-spacing:1px;margin-top:4px}#menu .hero-copy p{display:none}#menu #hero-tags{margin:7px 0 0;gap:5px}#menu #hero-tags span{font-size:8px;padding:2px 5px;letter-spacing:.4px}
 #menu #hero-preview{right:12px;top:36%;width:56%;z-index:1}#menu .hero-move-preview{gap:6px}#menu .hero-move-preview button>span:not(.painted-spell){font-size:8px;line-height:1.1;min-height:23px;letter-spacing:0}#menu .hero-move-preview kbd{font-size:10px;height:16px;line-height:14px}
 #menu #hero-spell-note{right:12px;top:66%;width:56%;height:31%;padding:6px;grid-template-columns:32px minmax(0,1fr);gap:4px 6px;z-index:1}#menu #hero-spell-note>.painted-spell{width:32px;height:32px}#menu #hero-spell-note strong{font-size:10px}#menu #hero-spell-note .detail-copy>span{font-size:10px;line-height:1.25}#menu #hero-spell-note small{font-size:9px;margin-top:5px}#menu #hero-spell-note .detail-key{right:6px;top:6px;font-size:9px}
 #menu .roster-browser{left:10px;top:calc(48px + 43%);width:calc(100% - 20px);height:calc(100% - 48px - 43% - 95px - env(safe-area-inset-bottom));padding:7px;grid-template-rows:38px minmax(0,1fr);gap:7px;background:#13100dee}#menu #role-filters{height:38px}#menu #role-filters button{min-height:34px;font-size:8px;letter-spacing:0}#menu #role-filters button img,#menu #role-filters button .role-icon{width:18px;height:18px;margin-bottom:2px}#menu .hero-picks{grid-template-rows:repeat(4,minmax(57px,1fr));grid-auto-rows:57px;gap:6px}#menu .hero-picks button{--card-label-height:16px}#menu .hero-picks button>span.hero-card-name{height:16px;min-height:16px;font-size:8px;letter-spacing:0}
 #menu .roster-footer{height:85px;padding-bottom:env(safe-area-inset-bottom);box-sizing:content-box;background:#14100de8}#menu .arcade-brand{display:none}#menu .start-action{left:12px;right:12px;top:6px;width:auto}#menu .roster-footer #play{min-height:41px;font-size:12px;gap:10px;padding:5px 14px}#menu #play .play-sigil{display:block;width:27px;height:33px;flex:none;background:url('./art/reference/reference-source.png') -1143px -769px/1536px 864px no-repeat}
#menu #play img{width:22px;height:25px}#menu #play .play-sigil{height:25px;width:22px;background-size:1280px 720px;background-position:-952.5px -640.8px}#menu .roster-footer .menu-links{left:12px;right:12px;top:48px;bottom:auto;width:auto}#menu .roster-footer .menu-links button{min-height:33px;font-size:10px;letter-spacing:.5px}#menu .menu-links kbd{padding:2px 5px;font-size:10px}#menu .shore-secret,#menu .shore-memory{display:none}#menu #load-error{left:12px;bottom:86px;width:calc(100% - 24px);background:#14100d}
}
@media(max-width:599px) and (max-height:680px){#menu .roster-heading{height:64px;width:110px}#menu .shore-wordmark{width:110px;height:64px;background-size:528px 297px}#menu .hero-copy{top:12px}#menu .hero-copy h2{font-size:18px}#menu .hero-copy>span{font-size:8px}#menu #hero-tags{margin-top:4px}#menu #hero-tags span{font-size:7px}#menu .hero-stage{top:20px;height:96%}#menu #hero-preview{top:32%;width:57%}#menu .hero-move-preview button>span:not(.painted-spell){font-size:7px;min-height:20px}#menu #hero-spell-note{top:67%;height:30%;width:57%;padding:4px;grid-template-columns:25px minmax(0,1fr);gap:3px 4px}#menu #hero-spell-note>.painted-spell{height:25px;width:25px}#menu #hero-spell-note strong{font-size:8px}#menu #hero-spell-note .detail-copy>span,#menu #hero-spell-note small{font-size:8px}#menu .roster-browser{grid-template-rows:32px minmax(0,1fr);gap:5px}#menu #role-filters{height:32px}#menu #role-filters button{min-height:30px;font-size:7px}#menu #role-filters button img,#menu #role-filters button .role-icon{height:15px;width:15px}#menu .hero-picks{grid-template-rows:repeat(4,55px)}#menu .roster-footer{height:79px}#menu .roster-footer .menu-links{top:44px}#menu .roster-footer #play{min-height:37px}}
@media(prefers-reduced-motion:reduce){#menu *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(min-width:1000px) and (max-width:1199px){#menu .selection-tabs{gap:16px}#menu .selection-tabs button{font-size:10px;letter-spacing:2px}#menu .selection-account{gap:10px}#menu #tidecaller-profile{display:none}#menu .hero-copy h2{font-size:22px;letter-spacing:1px}#menu .hero-title{gap:10px}#menu .hero-sigil{width:26px;height:36px}#menu .hero-copy>span{margin-left:36px;font-size:10px;letter-spacing:1px}#menu .hero-copy p,#menu #hero-tags{margin-left:36px}#menu .start-action{width:37%;right:2%}#menu .roster-footer #play{font-size:12px;letter-spacing:.6px}#menu .roster-footer .menu-links{right:2%;width:37%}}

@media(max-width:360px){#menu .roster-footer #play{font-size:11px;letter-spacing:.5px}}

@media(max-width:1199px){#menu .hero-picks button>span.hero-card-name{font:500 9px/1 Barlow,sans-serif;letter-spacing:0}#menu #role-filters button{font-size:8px;letter-spacing:0}}
@media(min-width:1000px) and (max-width:1199px){#menu .arcade-motto,#menu .shore-memory{display:none}}

#menu .fal-tidewarden-spell,#menu .fal-identity-spell{background-size:200% 200%!important;background-repeat:no-repeat!important}

/* The 3D arena behind the hero select: main.js adds .arena-3d after the selected hero's model draws. The painted stage
   and portrait step aside, and soft shade at the edges keeps the panels and text readable over the bright ground. */
#menu.reference-selection.arena-3d{background:radial-gradient(ellipse 70% 80% at 50% 50%,transparent 50%,#120e0b99),linear-gradient(0deg,#120e0bb3,transparent 24%)}
#menu.arena-3d #hero-art{visibility:hidden}
#menu.arena-3d .hero-stage::before,#menu.arena-3d .hero-stage::after{content:none}
#menu.arena-3d .hero-feature::before{inset:0 0 0 42%;background:linear-gradient(90deg,transparent,#120e0be6 42%)}
@media(max-width:999px) and (min-width:600px){#menu.arena-3d .hero-feature::before{inset:0 0 0 30%}}
@media(max-width:599px){#menu.arena-3d .hero-feature::before{inset:0 0 0 28%}}