/* Shared illustrated menu language. Preserve established mobile pages and focus flow. */
:root{--menu-art:url('art/world-00.png');--menu-ink:#0d354f;--menu-cream:#fff4d4;--menu-purple:#6545b4;--menu-gold:#ffd164;--menu-teal:#007f87}
body:has(#menu:not([hidden]))::before,body:has(#modal:not([hidden]))::before{content:"";position:fixed;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,#0828419c,#08284130 65%,#08284160),var(--menu-art) center/cover no-repeat}
html body dialog:not(#campaignmap):not(#storyintro){color:var(--menu-cream);background:linear-gradient(120deg,#082b48a6,#143b5870),var(--menu-art) center/cover no-repeat;border:3px solid #fff0cd;border-radius:18px;box-shadow:0 8px 0 #122e5666,0 20px 60px #06182855}
html body dialog:not(#storyintro)::backdrop{background:linear-gradient(#153a5655,#153a5688),var(--menu-art) center/cover no-repeat}
html body :is(#weaponguide,#enemylibrary,#controllersettings,#playerhub,#leaderboarddialog,#recoveryboard){width:calc(var(--app-width,100vw) - 28px - var(--safe-left,0px) - var(--safe-right,0px));max-width:none;height:calc(var(--app-height,100dvh) - 24px - var(--safe-top,0px) - var(--safe-bottom,0px));max-height:none;margin:0;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 24px;box-sizing:border-box}
html body :is(dialog,#modal) h2{color:#fff9dd;font-weight:950;letter-spacing:.015em;text-shadow:0 3px 0 #173554;font-size:clamp(25px,3vw,40px)}
html body #modal{border:3px solid #fff1d0;background:#123c59d9;box-shadow:0 7px 0 #0e2d5480;border-radius:18px;color:#fff4d7}
html body :is(dialog,#modal) :is(h3,strong){color:inherit}
html body :is(dialog,#modal) p{color:#e9f3f4}
html body :is(dialog:not(#campaignmap),#modal,#menu) button:not(.upgrade){border:2px solid #fff0cf;background:#176a82;color:#fff9e8;border-radius:11px;box-shadow:0 4px 0 #17304f;font-weight:800;letter-spacing:0}
html body :is(dialog:not(#campaignmap),#modal,#menu) button:not(.upgrade):hover:not(:disabled){filter:brightness(1.12)}
html body :is(dialog,#modal,#menu) button:focus-visible{outline:3px solid #ffcf53;outline-offset:3px}
html body :is(dialog,#modal,#menu) button:disabled{opacity:.55;box-shadow:none}
html body :is(dialog:not(#campaignmap),#modal,#menu) :is(button.primary,#start,#continue,#guidekit,#endlessbegin){background:#ffcc61;color:#17394c;border-color:#fff0bd;box-shadow:0 4px 0 #a26426}
html body :is(dialog:not(#campaignmap),#modal,#menu) :is(button[aria-pressed=true],button[aria-selected=true],button.active){background:#ffcd64;color:#17394c;border-color:#fff1c1;box-shadow:0 4px 0 #9b642b}
html body :is(#closeweaponguide,#enemyclose,#hubclose,#closeleaderboard,#closerecovery,#closelayout,#closeplaytest,#quithome,#modalmap,#closecontroller,#closeinstall,#cancelreset){background:#6747b8!important;color:#fff6e0!important;border-color:#fff0d4!important;border-radius:24px!important}
html body :is(#guideprevious,#guidenext,#enemyprev,#enemynext,#enemyworldprev,#enemyworldnext,#hubprevious,#hubnext,#leaderboardprevious,#leaderboardnext){background:#6847b8!important;color:#fff6e0!important;border:3px solid #fff0d4!important;min-height:44px;font-weight:900}
html body :is(dialog,#modal) :is(select,input:not([type=range]):not([type=checkbox]),textarea){background:#103f59;color:#fff5db;border:2px solid #dfeddd;border-radius:9px;accent-color:#ffc94d}
html body :is(dialog,#modal) input[type=range]{accent-color:#ffc94d}
html body :is(dialog,#modal) input[type=checkbox]{accent-color:#ffc94d}
/* Gun and creature selection use the same illustrated stage and bordered cards. */
html body :is(#weaponguide,#enemylibrary) :is(.guidepicture,.enemyportrait){border:3px solid #fff0cd;border-radius:14px;background:linear-gradient(145deg,#087f89e8,#143d66d9);box-shadow:0 5px 0 #122f5366;overflow:hidden}
html body :is(#weaponguide,#enemylibrary) :is(.guidecopy,.enemycopy){background:#103651df;border:2px solid #fff0cd88;border-radius:14px;padding:clamp(12px,2vw,24px);overflow:auto;min-height:0}
html body :is(#guideweaponname,#enemyentryname){color:#ffe08b!important;font-size:clamp(25px,3vw,40px);text-shadow:0 2px 0 #17314a;line-height:1.1}
html body :is(#guidecounter,#enemyentrynumber){color:#ffdc77;font-weight:900}
html body #guideweaponunlock{background:#076e72;border:2px solid #aedfc9;color:#fff6d9;border-radius:10px}
html body #guideweaponunlock.unlocked{background:#008577;color:#fff2c8}
/* Upgrades, loadouts and collection cards stay aligned and keep their pictures. */
html body #upgrades .upgrade{border:3px solid #fff0cf;border-radius:12px;background:linear-gradient(145deg,#057d85,#15546f);color:#fff3d5;box-shadow:0 5px 0 #132f53;transform:none;text-align:left}
html body #upgrades .upgrade :is(strong,h3){color:#ffdd80}
html body #upgrades .upgrade :is(span,p,small){color:#e2f4f0}
html body #upgrades .upgrade:hover{transform:translateY(-2px);border-color:#ffda79}
html body :is(.rewardsummary,.mission-goals,.unlock-preview,.hubcard,.settings-panel,.volumecontrol,.controllerhelp,.layout-preview){border-color:#fbe2ad80;border-radius:12px}
html body :is(#controllersettings,#playerhub,#recoveryboard,#leaderboarddialog) :is([data-settings-panel],#hubcontent,.recoverygrid){background:#103851d9;border-radius:12px;padding:12px;min-height:0}
html body :is(#playerhub,#leaderboarddialog,#recoveryboard) :is(table,article){background:#103851db;color:#fff4dc;border-color:#fff0cf66}
html body :is(#playerhub,#leaderboarddialog) :is(th,td){border-color:#c1e0df40}
html body #menu .menuactions button{background:#057f87;border:3px solid #fff0cf;border-radius:12px;box-shadow:0 5px 0 #173152;transform:none}
html body #menu .menuactions button:hover{transform:translateY(-2px)}
html body #menu #start{background:#ffcd64;color:#17394c;border:3px solid #fff0bd}
html body #menu h1{text-shadow:0 4px 0 #12354e,0 8px 20px #12354e88}
html body #menu h1 span{transform:none}
@media(orientation:landscape) and (max-height:500px){
 html body :is(#weaponguide,#enemylibrary,#controllersettings,#playerhub,#leaderboarddialog,#recoveryboard){padding:10px 14px;height:calc(var(--app-height,100dvh) - 16px - var(--safe-top,0px) - var(--safe-bottom,0px))}
 html body :is(dialog,#modal) h2{font-size:23px;margin-top:0;margin-bottom:6px}
 html body :is(#guideweaponname,#enemyentryname){font-size:23px}
 html body :is(#weaponguide,#enemylibrary) :is(.guidecopy,.enemycopy){padding:10px 12px}
 html body :is(#controllersettings,#playerhub,#recoveryboard,#leaderboarddialog) :is([data-settings-panel],#hubcontent,.recoverygrid){padding:8px}
 html body :is(dialog:not(#campaignmap),#modal,#menu) button:not(.upgrade){box-shadow:0 3px 0 #17304f}
}
@media(prefers-reduced-motion:reduce){html body #upgrades .upgrade:hover,html body #menu .menuactions button:hover{transform:none}}