/* Illustrated world hub: each destination is a building in the existing city art set. */
#homeScreen > .home-layout { display:none!important; }
#homeScreen .hub-world { width:100%; padding:14px 18px 0; color:#f8eac4; }
#homeScreen .hub-stage { display:grid; grid-template-columns:clamp(230px,15vw,288px) minmax(0,1fr); align-items:stretch; gap:14px; }
#homeScreen .hub-profile-rail.side-stack { height:auto; max-height:none; min-width:0; gap:14px; align-self:start; }
#homeScreen .hub-profile-rail .card { flex:none; border-color:#bfa16a; box-shadow:inset 0 0 0 3px #dfbd7540,0 12px 24px #04172488; }
#homeScreen .hub-profile-rail .card-body { padding:14px 16px; }
#homeScreen .hub-profile-rail .destiny-card .card-body { grid-template-columns:82px minmax(0,1fr); column-gap:11px; height:100%; align-content:space-between; }
#homeScreen .hub-profile-rail .destiny-card .hex-portrait { width:82px; height:clamp(98px,11svh,124px); }
#homeScreen .hub-profile-rail .destiny-card .hero-name { font-size:20px; }
#homeScreen .hub-profile-rail .destiny-card .hero-name span { font-size:12px; line-height:1.5; }
#homeScreen .hub-profile-rail .panel-heading h2 { font-size:23px; }
#homeScreen .hub-profile-rail .destiny-actions { display:block; grid-column:2; margin-top:7px; }
#homeScreen .hub-profile-rail .destiny-actions .text-button { min-height:28px; color:#f4d497; font-size:12px; }
#homeScreen .hub-profile-rail .elements-card .card-body { display:flex; flex-direction:column; justify-content:space-between; height:100%; }
#homeScreen .hub-profile-rail .elements-card .element-line { width:100%; margin:8px 0; }
#homeScreen .hub-profile-rail .elements-card .small-note { line-height:1.5; }
#homeScreen .hub-map { position:relative; width:100%; min-height:680px; aspect-ratio:1672/941; overflow:hidden; isolation:isolate; border:1px solid #bb965e; background:#264c5f url('./city-art/city-scene-v3.webp') center/cover no-repeat; box-shadow:inset 0 0 0 5px #071e2b83,0 18px 42px #020f1b9e; }
#homeScreen .hub-map::before { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,#071e307a 0%,transparent 25%,transparent 73%,#061b2b88 100%),linear-gradient(90deg,#091b2b70,transparent 31%,transparent 77%,#0b25346b); pointer-events:none; }
#homeScreen .hub-map-heading { position:absolute; z-index:4; left:3%; top:3%; padding:12px 18px 14px; max-width:450px; background:linear-gradient(90deg,#071e2cdd,#082736a8 80%,transparent); border-left:3px solid #e4bd76; text-shadow:0 2px 8px #000; pointer-events:none; }
#homeScreen .hub-map-heading small { color:#f5d492; letter-spacing:.22em; font-size:11px; }
#homeScreen .hub-map-heading h1 { margin:4px 0 2px; color:#ffe5a4; font:700 clamp(25px,2.6vw,45px)/1.2 var(--display); letter-spacing:.08em; }
#homeScreen .hub-map-heading p { margin:0; font-size:13px; color:#edf1df; }
#homeScreen .hub-map-compass { position:absolute; z-index:3; right:3%; top:3%; color:#f7e6bc; font-size:12px; letter-spacing:.12em; text-shadow:0 2px 8px #000; }
#homeScreen .hub-buildings { position:absolute; inset:0; z-index:2; }
#homeScreen .hub-building { position:absolute; left:var(--site-x); top:var(--site-y); width:var(--site-width); transform:translate(-50%,-47%); display:flex; flex-direction:column; align-items:center; border:0; padding:0; color:#fff2d5; background:none; text-align:center; text-decoration:none; filter:drop-shadow(0 12px 12px #071d25b9); transition:filter .2s,transform .2s; cursor:pointer; }
#homeScreen .hub-building:hover,#homeScreen .hub-building:focus-visible { z-index:6; transform:translate(-50%,-50%) scale(1.085); filter:drop-shadow(0 16px 18px #081a27dc) drop-shadow(0 0 15px #ffdf8ec4); }
#homeScreen .hub-building:focus-visible { outline:2px solid #ffe3a0; outline-offset:5px; }
#homeScreen .hub-building-art { position:relative; display:block; width:100%; aspect-ratio:1.26; }
#homeScreen .hub-building-art::before { content:""; position:absolute; left:10%; right:10%; bottom:5%; height:30%; border-radius:50%; background:radial-gradient(ellipse,#ffdc86a1 0%,#ffdc8640 38%,transparent 72%); opacity:.52; transition:opacity .2s; }
#homeScreen .hub-building:hover .hub-building-art::before,#homeScreen .hub-building:focus-visible .hub-building-art::before { opacity:1; }
#homeScreen .hub-building-art img { position:relative; display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; user-select:none; }
#homeScreen .hub-building-sign { position:relative; display:grid; min-width:max-content; max-width:130%; padding:5px 32px 6px 15px; margin-top:-4px; border:1px solid #e8c27b; border-radius:3px; background:linear-gradient(120deg,#0b3040ed,#072332f5); box-shadow:inset 0 0 0 2px #e8c27b2e,0 5px 12px #041724aa; }
#homeScreen .hub-building-sign strong { color:#ffe3a6; font:700 clamp(16px,1.15vw,22px)/1.2 var(--display); letter-spacing:.09em; }
#homeScreen .hub-building-sign small { margin-top:2px; color:#e3e9de; font-size:10px; line-height:1.2; white-space:nowrap; }
#homeScreen .hub-building-sign i { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#ffe4a5; font-size:16px; font-style:normal; }
#homeScreen .hub-city { z-index:1; }
#homeScreen .hub-garden,#homeScreen .hub-civilization { z-index:2; }
#homeScreen .hub-realm { z-index:3; }
#homeScreen .hub-chess { z-index:4; }
#homeScreen .hub-chess .hub-building-sign { isolation:isolate; white-space:nowrap; }
#homeScreen .hub-realm .hub-building-sign { background:linear-gradient(120deg,#4f3924f5,#132e39f5); box-shadow:inset 0 0 0 2px #f4d59b48,0 5px 16px #071c24c4,0 0 17px #e7bd6877; }
#homeScreen .hub-map-note { margin:10px auto 13px; text-align:center; color:#d8cead; font-size:12px; letter-spacing:.08em; }
@media(min-width:901px){
  #homeScreen .hub-stage { width:100%; height:max(510px,calc(100svh - 175px)); margin:0; }
  #homeScreen .hub-map { min-height:0; height:100%; aspect-ratio:auto; }
  #homeScreen .hub-profile-rail.side-stack { display:grid; grid-template-rows:minmax(0,45fr) minmax(0,55fr); align-self:stretch; height:100%; overflow:visible; }
  #homeScreen .hub-profile-rail .card { min-height:0; }
}
@media(min-width:901px) and (max-height:900px){
  #homeScreen .hub-profile-rail .card-body { padding:9px 10px; }
  #homeScreen .hub-profile-rail .panel-heading { padding-bottom:6px; }
  #homeScreen .hub-profile-rail .panel-heading h2 { margin-top:2px; font-size:19px; }
  #homeScreen .hub-profile-rail .eyebrow { font-size:8px; }
  #homeScreen .hub-profile-rail .destiny-card .card-body { grid-template-columns:66px minmax(0,1fr); column-gap:8px; }
  #homeScreen .hub-profile-rail .destiny-card .hex-portrait { width:66px; height:82px; margin-top:5px; }
  #homeScreen .hub-profile-rail .destiny-card .hex-lines { width:48px; height:74px; }
  #homeScreen .hub-profile-rail .destiny-card .hero-name { margin-top:5px; font-size:17px; }
  #homeScreen .hub-profile-rail .destiny-card .hero-name span { font-size:10px; }
  #homeScreen .hub-profile-rail .destiny-card .tag-row { margin-top:0; gap:3px; }
  #homeScreen .hub-profile-rail .destiny-card .tag { padding:1px 3px; font-size:9px; }
  #homeScreen .hub-profile-rail .destiny-actions { margin-top:2px; padding-top:0; }
  #homeScreen .hub-profile-rail .destiny-actions .text-button { min-height:24px; font-size:11px; }
  #homeScreen .hub-profile-rail .elements-card .element-line { grid-template-columns:31px minmax(0,1fr) 25px; gap:5px; margin:2px 0; }
  #homeScreen .hub-profile-rail .elements-card .element-mark { gap:2px; font-size:11px; }
  #homeScreen .hub-profile-rail .elements-card .count { font-size:10px; }
  #homeScreen .hub-profile-rail .elements-card .bar { height:5px; }
  #homeScreen .hub-profile-rail .elements-card .element-note { padding:5px 6px; font-size:10px; }
  #homeScreen .hub-profile-rail .elements-card .small-note { margin-top:3px; font-size:9px; }
}
@media(min-width:901px) and (max-width:1360px){
  #homeScreen .hub-stage { height:max(490px,calc(100svh - 205px)); }
}
@media(min-width:901px) and (max-width:1360px) and (max-height:760px){
  body:has(#homeScreen.active) .prototype-ribbon { min-height:22px; padding-block:2px; }
  body:has(#homeScreen.active) .topbar { min-height:0; padding-block:6px; }
  #homeScreen .hub-stage { height:max(430px,calc(100svh - 180px)); }
  #homeScreen .hub-profile-rail .destiny-card .hex-portrait { height:65px; }
  #homeScreen .hub-profile-rail .elements-card .element-line { margin:0; }
  #homeScreen .hub-map-note { margin:6px auto 8px; }
}
@media(max-width:900px){
  #homeScreen .hub-stage { grid-template-columns:minmax(0,1fr); }
  #homeScreen .hub-profile-rail.side-stack { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
  #homeScreen .hub-profile-rail .card { min-width:0; }
  #homeScreen .hub-profile-rail .card-body { height:100%; }
  #homeScreen .hub-profile-rail .elements-card .element-note { margin-top:10px; }
}
@media(max-width:1100px){
  #homeScreen .hub-world { padding:10px 10px 0; }
  #homeScreen .hub-map { min-height:600px; }
  #homeScreen .hub-building-sign { padding:4px 22px 5px 9px; }
  #homeScreen .hub-building-sign strong { font-size:15px; }
  #homeScreen .hub-building-sign small { display:none; }
  #homeScreen .hub-building-sign i { right:7px; font-size:12px; }
}
@media(min-width:901px) and (max-width:1100px){
  #homeScreen .hub-map { min-height:0; }
}
@media(max-width:700px){
  #homeScreen .hub-profile-rail.side-stack { display:flex; flex-direction:row; align-items:flex-start; order:-1; gap:10px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; }
  #homeScreen .hub-profile-rail .card { flex:0 0 min(82vw,310px); scroll-snap-align:start; }
  #homeScreen .hub-profile-rail .card-body { padding:14px 13px; }
  #homeScreen .hub-profile-rail .panel-heading h2 { font-size:21px; }
  #homeScreen .hub-profile-rail .elements-card .element-line { margin:6px 0; }
  #homeScreen .hub-map { min-height:980px; aspect-ratio:auto; background-position:center; background-size:auto 100%; }
  #homeScreen .hub-map-heading { left:13px; top:12px; padding:8px 11px; max-width:calc(100% - 26px); }
  #homeScreen .hub-map-heading h1 { font-size:25px; }
  #homeScreen .hub-map-heading p { font-size:11px; }
  #homeScreen .hub-map-compass { display:none; }
  #homeScreen .hub-buildings { inset:105px 5px 15px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,1fr); gap:2px; align-items:center; }
  #homeScreen .hub-building { position:relative; left:auto; top:auto; width:100%; transform:none; filter:drop-shadow(0 9px 10px #071a27d0); }
  #homeScreen .hub-city { grid-column:1 / -1; justify-self:center; max-width:50%; }
  #homeScreen .hub-building:hover,#homeScreen .hub-building:focus-visible { transform:translateY(-5px) scale(1.03); }
  #homeScreen .hub-building-art { width:min(100%,205px); aspect-ratio:1.1; }
  #homeScreen .hub-building-sign { min-width:0; max-width:100%; width:90%; margin-top:-6px; }
  #homeScreen .hub-building-sign strong { font-size:17px; }
  #homeScreen .hub-map-note { padding:0 12px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce){#homeScreen .hub-building{transition:none}}