/* Full-screen atlas and floating glass surfaces. */
.saved-game-dialog{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid #ffffff26;border-radius:20px;background:#102733;color:#f3f1e8;font:15px/1.5 var(--f-display)}
.saved-game-dialog::backdrop{background:#020b13b3}
.saved-game-dialog form{display:flex;flex-direction:column;gap:12px}
.saved-game-dialog h2{margin:0;font-size:26px}
.saved-game-dialog p{margin:0 0 8px;color:#b6cbd0}
.saved-game-dialog button{min-height:48px;padding:12px;border:1px solid #ffffff30;border-radius:12px;background:#18313d;color:inherit;font:600 16px var(--f-display);cursor:pointer}
.saved-game-dialog button[value="continue"]{background:#f8cf75;color:#102733;border-color:#f8cf75}
.saved-game-dialog button:focus-visible{outline:2px solid #f8cf75;outline-offset:3px}
html,body,.wrap{width:100%;height:100%;min-height:0;padding:0}
.stage{display:block;width:100%!important;height:100%!important;border-radius:0;box-shadow:none;container-type:normal}
.mapwrap{position:absolute;inset:0;container-type:inline-size}
#map{transition:filter .6s,opacity .6s}
body:not(.map-interactive) #map{pointer-events:none;touch-action:auto;cursor:default}
body:not(.map-interactive) .zoomctl,body:not(.map-interactive) .map-hint{visibility:hidden}
body.online-screen:has(.online-panel[data-phase="hub"]) #map,
body.online-screen:has(.online-panel[data-phase="lobby"]) #map,
body.online-screen:has(.online-panel[data-phase="finished"]) #map{pointer-events:none;touch-action:auto}
.mapwrap::after{background:radial-gradient(ellipse at 50% 44%,transparent 15%,rgba(3,13,22,.58) 100%)}
.panel{position:absolute;inset:auto auto 24px 50%;transform:translateX(-50%);width:min(460px,calc(100% - 32px));height:min(570px,72dvh);container-type:inline-size;border:1px solid rgba(182,218,220,.24);border-radius:24px;padding:16px;gap:8px;overflow:hidden;background:rgba(10,28,39,.78);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 24px 90px #020c1466,inset 0 1px #ffffff12;z-index:5}
.card,.special{background:rgba(11,29,40,.86);padding:26px;gap:16px;overflow:auto;border-radius:inherit}
.card::before,.special::before{display:none}
.panel:has(>.card:not([hidden]))>.sides,.panel:has(>.card:not([hidden]))>.dice,.panel:has(>.card:not([hidden]))>.result{visibility:hidden}
.card h1{font-size:36px}.card h2{font-size:27px}.card .kicker{font-size:10px;padding:6px 10px}
.mode{padding:16px 20px;border-radius:12px}.mode b{font-size:21px}.mode span{font-size:11px}.mode i{width:30px;height:30px;font-size:18px}
.intro-foot{display:none!important}.how summary{font-size:10px}.how .rules{font-size:13px}.rules{font-size:14px;gap:12px}.rules li{grid-template-columns:20px 1fr;gap:10px}.rules li b{font-size:12px}
.hud{padding:24px 28px;display:flex;justify-content:space-between;gap:12px;background:linear-gradient(#04121ac7,transparent);z-index:2}
.ibtn{width:36px;height:36px;font-size:18px}.hud .count{font-size:11px}.map-brand{display:none!important}
.map-hint{left:28px;bottom:24px;display:block;font-size:10px;border:0;background:transparent;color:#b5cdcf80}
.pop{top:70px;left:28px;gap:8px;padding:10px;border-radius:12px}.pop .btn{height:36px;padding:0 10px;font-size:11px;border-radius:8px}
.shell-home{position:absolute;top:24px;left:78px;z-index:12;display:flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid #bfdcde30;border-radius:30px;background:#0b202b99;backdrop-filter:blur(16px);font:11px var(--f-mono);cursor:pointer}
.shell-home span{color:var(--gold)}
.home-screen .panel{visibility:hidden;pointer-events:none}
.home-screen #map{filter:blur(3px) saturate(.7);opacity:.65}
.home-screen .hud,.home-screen .map-hint,.home-screen .shell-home{visibility:hidden}
.home-screen .mapwrap::after{background:linear-gradient(180deg,#04121a66,transparent 35%,#04121a99),radial-gradient(ellipse at center,#07172255 20%,#04121a88 100%)}
.home-screen .pop{display:none}
.home-screen .mapwrap{pointer-events:none}
.home-landing{position:absolute;inset:0;z-index:10;overflow-y:auto;display:flex;flex-direction:column;padding:34px clamp(24px,5vw,80px);isolation:isolate}
.home-masthead{display:flex;align-items:center;justify-content:space-between;gap:20px}
.home-wordmark{display:flex;align-items:center;gap:12px;font:800 17px var(--f-display);letter-spacing:.14em}
.home-mark{display:grid;place-items:center;width:32px;height:36px;color:#f8cf75}.home-mark svg{width:32px;height:36px}
.home-status{display:flex;align-items:center;gap:9px;font:10px var(--f-mono);letter-spacing:.13em;color:#b6cdd0}
.home-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#9ee1c0;box-shadow:0 0 12px #9ee1c066}
.home-content{width:min(1080px,100%);margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 0}
.home-eyebrow{font:10px var(--f-mono);letter-spacing:.3em;text-transform:uppercase;color:#e6c88a;margin:0 0 20px}
.home-content h1{font:700 clamp(64px,8vw,108px)/1.05 var(--f-display);letter-spacing:-.055em;margin:0;text-wrap:balance;text-shadow:0 4px 40px #03111a66}
.home-content h1 em{font-style:normal;color:#f4d797}
.home-content h1.home-logo{width:min(720px,100%);line-height:0}
.home-logo img{display:block;width:100%;height:auto}
.home-subtitle{font-size:clamp(17px,1.65vw,22px);line-height:1.7;color:#d7e0df;max-width:470px;margin:18px 0 44px;text-wrap:balance}
.home-options{display:grid;grid-template-columns:repeat(var(--home-columns,2),minmax(0,1fr));gap:18px;width:100%;text-align:left}
.home-option{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:222px;padding:28px 30px;border:1px solid #d9e5e838;border-radius:20px;color:#f5f3ec;background:linear-gradient(120deg,#8facc21c,#142e3c70);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 1px #ffffff12,0 18px 50px #020c1438;cursor:pointer;transition:transform .2s,border-color .2s,background .2s}
.home-option:hover{border-color:#c7e5eab3;background:linear-gradient(120deg,#a9cada30,#1c3a497d)}
.home-option:focus-visible,.shell-home:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.home-option-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:24px}
.home-option-icon{width:38px;height:38px;color:#b3d9e0}
.home-option-tag{font:9px var(--f-mono);letter-spacing:.12em;color:#d0dbd9;border:1px solid #d5e8e02b;border-radius:20px;padding:6px 9px;background:#ffffff06}
.home-option b{font:600 clamp(25px,3vw,34px) var(--f-display);letter-spacing:-.04em}
.home-option.multi{border-color:#f8cf7566;background:linear-gradient(120deg,#f8cf7522,#142e3c80)}.home-option.multi .home-option-icon{color:var(--gold)}.home-option.multi:hover{border-color:var(--gold)}
.home-option-description{font-size:13px;line-height:1.6;color:#b9cdce;margin-top:7px;padding-right:10px}
@media(max-width:900px) and (min-width:601px){.home-options{grid-template-columns:1fr 1fr}}

.home-footnote{font:10px var(--f-mono);letter-spacing:.06em;color:#a1b8bc;margin-top:24px}
.home-support{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;min-height:44px;margin-top:24px;padding:10px 18px;border:1px solid #e9c46a55;border-radius:999px;background:#142e3c99;color:#f4d797;font:500 13px var(--f-display);text-decoration:none}
.home-support svg{width:20px;height:20px;flex:none}
.home-support:hover{border-color:#e9c46a;background:#294047}
.home-support:focus-visible{outline:2px solid #f4d797;outline-offset:4px}
.home-legal{display:flex;justify-content:center;gap:18px;margin-top:16px;font:12px var(--f-display)}
.home-legal a{color:#8fa9ae;text-decoration:none}.home-legal a:hover{color:#f3f1e8;text-decoration:underline;text-underline-offset:3px}
.home-legal a:focus-visible{outline:2px solid #f4d797;outline-offset:3px;border-radius:3px}
.home-footer{display:flex;justify-content:space-between;gap:20px;color:#92abb2;font:9px var(--f-mono);letter-spacing:.15em}
.single-menu .panel{top:50%;bottom:auto;transform:translate(-50%,-50%);height:min(590px,calc(100dvh - 140px))}
@media(max-width:600px){
 .home-screen #map{transform:scale(2.7)}
 .home-landing{padding:24px 22px}.home-wordmark{font-size:13px;gap:8px}.home-status{font-size:8px;letter-spacing:.06em}.home-content{padding:40px 0}.home-content h1{font-size:48px}.home-eyebrow{font-size:8px;letter-spacing:.22em}.home-subtitle{margin:18px 0 26px;font-size:13px}.home-options{grid-template-columns:1fr;gap:12px}.home-option{min-height:156px;padding:20px 22px;border-radius:16px}.home-option-top{margin-bottom:10px}.home-option-icon{width:29px;height:29px}.home-option b{font-size:27px}.home-option-description{font-size:12px}.home-footnote{font-size:8px;margin-top:18px}.home-footer{font-size:7px;letter-spacing:.07em}.hud{padding:20px}.shell-home{top:20px;left:66px}.map-hint{display:none}.panel{bottom:16px;height:min(540px,66dvh);border-radius:20px}.card,.special{padding:20px}
}
@media(max-height:650px) and (min-width:601px){.home-landing{padding-top:20px;padding-bottom:20px}.home-content{padding:20px 0}.home-content h1{font-size:48px}.home-subtitle{margin:14px 0 20px}.home-option{min-height:170px;padding:20px 26px}.home-option-top{margin-bottom:12px}.home-option-icon{height:28px;width:28px}.home-option b{font-size:28px}.home-footnote{margin-top:16px}}
@media(prefers-reduced-motion:reduce){#map,.home-option{transition:none}}

.home-option.soon{cursor:default;opacity:.72}.home-option.soon:hover{transform:none;border-color:#e9c46a55;background:linear-gradient(120deg,#c9a35a26,#142e3c80)}
.home-option-soon{margin-top:6px;font:italic 500 13px var(--f-display);letter-spacing:.02em;color:#e9c46a}
/* cards carry only a title and tag now, so they can be shorter */
.home-option{min-height:150px!important}.home-content h1{margin-bottom:28px}

/* The offline release shows only local modes; online cards return when enabled. */
html.online-enabled{--home-columns:2}
body.game-modes-screen .shell-home{visibility:visible}
body.game-modes-screen #gameModesLanding{padding-top:84px}
html:not(.online-enabled) .home-option.soon{order:1}

/* Performance: nothing above the live map blurs its backdrop. The browser re-blurs the canvas behind every
   such element on each redraw (World Conquest redraws every frame), which made the map lag, most of all on
   high-density screens. Slightly more opaque fills keep the same look. Static screens (home, dialogs) keep their blur. */
.panel,.shell-home,.zoomctl,.ibtn,.profile-chip{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.panel{background:rgba(10,28,39,.93)}
.shell-home{background:#0b202be8}
.profile-chip{background:#102936eb}

/* One menu entry point; navigation and preferences live in a modal sidebar. */
#shellHome{position:absolute;top:22px;left:24px;width:44px;height:44px;min-height:44px;padding:10px;display:grid;place-items:center;border:1px solid #ffffff26;border-radius:14px;background:#0c202bf2;color:#f3f1e8;visibility:visible;z-index:30}
#shellHome svg{width:22px;height:22px}
#shellHome:hover{background:#203e4c;border-color:#f8cf7570}
.clean #shellHome{visibility:hidden}
.hud .count{margin-inline:auto}
#pop.game-sidebar{position:fixed;inset:0 auto 0 0;margin:0;width:min(340px,calc(100vw - 32px));height:100dvh;max-width:none;max-height:none;display:flex;flex-direction:column;gap:24px;padding:24px;border:0;border-right:1px solid #ffffff26;border-radius:0 22px 22px 0;background:#0c202b;color:#f3f1e8;box-shadow:16px 0 60px #0006;font:400 15px/1.4 var(--f-display);overflow-y:auto;overscroll-behavior:contain;color-scheme:dark;animation:sidebarIn .18s ease-out}
#pop.game-sidebar::backdrop{background:#020b1399}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sidebar-header h2{margin:0;font:800 25px/1.2 var(--f-display);letter-spacing:-.035em}
.game-sidebar button{font:600 15px/1.3 var(--f-display);color:inherit;border:1px solid #ffffff26;border-radius:12px;background:#ffffff08;padding:12px 14px;min-height:46px;cursor:pointer}
.game-sidebar button:hover{background:#ffffff14;border-color:#ffffff50}
.game-sidebar button:focus-visible{outline:2px solid #f8cf75;outline-offset:3px}
#sidebarClose{width:40px;height:40px;min-height:40px;padding:0;font-size:25px;background:none;border-color:transparent}
.sidebar-nav,.sidebar-actions{display:flex;flex-direction:column;gap:8px}
.sidebar-nav button,.sidebar-actions button{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
#sidebarHome{background:#f8cf751a;border-color:#f8cf7540;color:#f8cf75}
.sidebar-settings{padding-top:20px;border-top:1px solid #ffffff17}
.sidebar-settings h3{margin:0 0 12px;font:600 11px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#a4b6ba}
.sidebar-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.sidebar-setting button{min-width:64px;padding:10px 12px}
.sidebar-setting button[aria-pressed="true"]{color:#f8cf75;border-color:#f8cf7555;background:#f8cf751a}
.sidebar-actions{margin-top:auto;padding-top:20px;border-top:1px solid #ffffff17}
.sidebar-actions:not(:has(button:not([hidden]))){display:none}
.sidebar-actions kbd{font:500 11px var(--f-mono);padding:3px 7px;border:1px solid #ffffff26;border-radius:5px;color:#a4b6ba}
.game-sidebar .sidebar-danger,.game-sidebar .warn{color:#f17171}
@keyframes sidebarIn{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){#pop.game-sidebar{animation:none}}