/* Polished Tropical A — hub presentation only; catalogue and game actions unchanged. */
body[data-scene="hub"]{overflow:auto;background:#f4faf4;color:#143f46}
body[data-scene="hub"] #app{min-height:100dvh;background:radial-gradient(ellipse at 0 20%,#b9ebd549,transparent 45%),radial-gradient(ellipse at 100% 75%,#ffe5a351,transparent 40%)}
body[data-scene="hub"] .topbar{position:relative;background:#ffffffeb;border-bottom:1px solid #d3e9e3;z-index:2;padding-block:12px}
/* Organic wordmark instead of the old rectangular blue plaque. This remains the mode button. */
.topbar .brand.game-mode-switch{background:transparent;border:0;border-radius:24px;box-shadow:none;color:#075d69;padding:8px 12px;display:flex;align-items:center;gap:10px;text-align:left;font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;font-size:24px;font-weight:850;line-height:1.08;letter-spacing:-.7px}
.topbar .brand.game-mode-switch .brand-mark{display:grid;flex:0 0 auto;width:48px;height:48px;border-radius:50% 46% 48% 44%;background:linear-gradient(150deg,#e6fbef,#b0e6cf);border:2px solid #fff;box-shadow:0 3px 8px #0d5b6426;color:#0c6a74;font-size:30px;transform:rotate(-7deg)}
.topbar .brand.game-mode-switch small{color:#47736f;font:700 9px system-ui,sans-serif;letter-spacing:1.7px;margin-top:5px}
.topbar .brand.game-mode-switch .game-mode-label{font-size:9px;letter-spacing:.4px;color:#47736f}
body[data-scene="explore"] .topbar .brand.game-mode-switch{color:#fff;text-shadow:0 2px 4px #003e4c; background:#07434cdb;border-radius:22px}
body[data-scene="explore"] .topbar .brand.game-mode-switch small{color:#fff}
.experience-hub{max-width:1200px;margin:auto;padding:28px 28px 58px}
.hub-intro{text-align:center;margin:0 auto 26px;max-width:720px}
.hub-kicker{font:800 11px system-ui,sans-serif;letter-spacing:.18em;color:#278779;margin:0 0 8px}
.hub-intro h1{font:850 clamp(28px,4vw,43px)/1.12 ui-rounded,'Trebuchet MS',system-ui,sans-serif;letter-spacing:-1.3px;color:#075d69;margin:0 0 10px}
.hub-intro p:not(.hub-kicker){font:500 17px/1.5 system-ui,sans-serif;color:#507671;margin:0}
.hub-modes{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;margin-bottom:32px}
.hub-mode{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:340px;padding:28px;text-align:left;border:3px solid #fff;border-radius:30px;color:#fff;background:#106a70;font:inherit;cursor:pointer;box-shadow:0 6px 0 #c7e2d9,0 12px 28px #174f511b;transition:transform .2s,box-shadow .2s}
.hub-mode:before{content:'';position:absolute;inset:0;z-index:-2;background:url('./island.webp') center 47%/cover;transform:scale(1.015)}
.hub-mode-explore:before{background-image:url('./assets/panama-welcome.jpg');background-position:65% center}
.hub-mode:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#064650fa 0%,#075b69d9 33%,#075b6930 72%,transparent)}
.hub-mode-explore:after{background:linear-gradient(0deg,#145940fa 0%,#145940cd 33%,#1459401a 72%,transparent)}
.hub-mode-label{position:absolute;top:20px;left:22px;font:850 10px system-ui;letter-spacing:.12em;color:#155b5b;background:#fff7dd;padding:8px 12px;border-radius:30px;box-shadow:0 3px 7px #003b4b2b}
.hub-mode strong{font:850 clamp(28px,3.4vw,38px)/1.12 ui-rounded,'Trebuchet MS',system-ui,sans-serif;letter-spacing:-1px;text-shadow:0 2px 6px #003d4940}
.hub-mode-detail{font:500 15px/1.45 system-ui;max-width:370px;color:#fff;margin:9px 0 17px}
.hub-mode-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:#ffda62;color:#214d45;padding:12px 20px;border-radius:17px;font:850 16px system-ui;box-shadow:0 4px 0 #c29435}
.hub-mode-explore .hub-mode-cta{background:#d4f4b6;box-shadow:0 4px 0 #7fa95e;color:#285239}
.hub-mode:hover{transform:translateY(-3px);box-shadow:0 8px 0 #bedcd3,0 16px 30px #174f5125}
.hub-mode:active{transform:translateY(1px)}
.hub-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;font:850 24px ui-rounded,'Trebuchet MS',system-ui;color:#175d63}
.hub-progress{border:0;background:transparent;color:#256a69;font:750 14px system-ui;padding:10px;min-height:44px;cursor:pointer}
.hub-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0 24px}
.hub-category{--category:#efe5ff;--category-ink:#5c4385;--category-edge:#d8c9ee;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-width:0;border:2px solid white;border-radius:25px;background:var(--category);color:var(--category-ink);min-height:145px;padding:17px 10px;box-shadow:0 5px 0 var(--category-edge);cursor:pointer;transition:transform .18s,box-shadow .18s;font-family:system-ui}
.hub-category[data-category="places"]{--category:#d4f1e5;--category-ink:#14685c;--category-edge:#b0dcc9}
.hub-category[data-category="learn"]{--category:#ffedb6;--category-ink:#78551d;--category-edge:#efd495}
.hub-category-icon{font-size:40px;line-height:1.2;margin-bottom:7px;display:block;transform-origin:50% 80%}
.hub-category strong{font-size:22px;font-weight:850}
.hub-category small{font-size:13px;font-weight:600;line-height:1.35;margin-top:5px}
.hub-category:hover{transform:translateY(-2px)}
.hub-category[aria-pressed="true"]{outline:3px solid #087d80;outline-offset:3px}
.hub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hub-grid[hidden]{display:none}
.hub-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-width:0;padding:0;border:2px solid #fff;border-radius:23px;background:#fff;color:#194d53;text-align:left;font:inherit;cursor:pointer;box-shadow:0 4px 0 #d6e7dd;transition:transform .18s}
.hub-card:hover{transform:translateY(-3px)}
.hub-picture{display:grid;place-items:center;height:120px;background:linear-gradient(150deg,hsl(var(--card-hue) 65% 90%),hsl(var(--card-hue) 55% 78%));overflow:hidden}
.hub-symbol{font-size:50px;line-height:1;filter:drop-shadow(0 4px 3px #1b5f5420)}
.hub-card[data-group="places"] .hub-picture{background:linear-gradient(0deg,#136c6630,#ffffff10),url('./assets/panama-welcome.jpg') center/cover}
.hub-card[data-group="learn"] .hub-picture{background:linear-gradient(0deg,#145d5c55,#ffffff10),url('./island.webp') 50% 60%/cover}
.hub-card[data-group="places"] .hub-symbol,.hub-card[data-group="learn"] .hub-symbol{background:#fffffff2;border-radius:50%;width:65px;height:65px;display:grid;place-items:center;font-size:38px}
.hub-caption{display:block;padding:15px 29px 18px 15px;flex:1}.hub-caption strong{font:800 16px/1.3 system-ui;display:block}.hub-caption small{font:500 12px/1.4 system-ui;display:block;margin-top:7px;color:#526f6a}.hub-go{position:absolute;right:12px;bottom:19px;font:800 19px system-ui;color:#16877c}
.hub-return{min-width:44px;min-height:44px}.experience-hub button:focus-visible,.topbar .brand:focus-visible{outline:3px solid #ed9b28;outline-offset:5px}
/* Only tiny icons move continuously: no large image pans or GPU-heavy blur filters. */
@media(prefers-reduced-motion:no-preference){body[data-scene="hub"] .brand-mark{animation:hub-emblem-drift 6s ease-in-out infinite}.hub-category-icon{animation:hub-icon-drift 5s ease-in-out infinite}.hub-category:nth-child(2) .hub-category-icon{animation-delay:-1.6s}.hub-category:nth-child(3) .hub-category-icon{animation-delay:-3.3s}}
@keyframes hub-icon-drift{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes hub-emblem-drift{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(-2deg)}}
@media(max-width:900px){.hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hub-mode{min-height:320px;padding:24px}.experience-hub{padding-inline:22px}}
@media(max-width:600px){.experience-hub{padding:20px 14px 38px}.hub-intro{margin-bottom:18px}.hub-intro h1{font-size:29px;letter-spacing:-1px}.hub-intro p:not(.hub-kicker){font-size:15px}.hub-modes{grid-template-columns:1fr;gap:17px;margin-bottom:27px}.hub-mode{min-height:280px;padding:23px;border-radius:25px}.hub-mode-explore{min-height:250px}.hub-mode strong{font-size:31px}.hub-mode-detail{font-size:14px}.hub-mode-label{top:17px;left:19px}.hub-mode-cta{font-size:15px}.hub-section-head{font-size:21px;gap:8px}.hub-progress{font-size:12px;padding:8px 0}.hub-tabs{gap:9px;margin-top:14px}.hub-category{min-height:126px;border-radius:20px;padding:13px 5px}.hub-category-icon{font-size:32px}.hub-category strong{font-size:16px}.hub-category small{font-size:11px}.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hub-picture{height:106px}.hub-caption strong{font-size:15px}.topbar .brand.game-mode-switch{font-size:19px;padding:5px;gap:7px}.topbar .brand.game-mode-switch .brand-mark{width:36px;height:36px;font-size:23px}.topbar .brand.game-mode-switch small{font-size:7px;letter-spacing:1px}.topbar .brand.game-mode-switch .game-mode-label{font-size:7px}}
@media(max-width:390px){.topbar .brand.game-mode-switch{font-size:16px;gap:4px}.topbar .brand.game-mode-switch .brand-mark{width:29px;height:29px;font-size:20px}.hub-intro h1{font-size:27px}.hub-category small{font-size:10px}.hub-section-head{font-size:19px}}
@media(prefers-reduced-motion:reduce){.hub-mode,.hub-card,.hub-category{transition:none}.hub-mode:hover,.hub-card:hover,.hub-category:hover{transform:none}.hub-category-icon,body[data-scene="hub"] .brand-mark{animation:none}}
/* Supersede legacy expedition plaque's !important outline without changing mode action. */
body:is([data-scene="entry"],[data-scene="explore"],[data-scene="islandQuest"]) .topbar .brand.game-mode-switch{background:#07434cdb!important;border:0!important;border-radius:24px!important;box-shadow:0 4px 14px #002f3620;color:#fff!important}
body[data-scene="entry"] .topbar .brand.game-mode-switch small,body[data-scene="islandQuest"] .topbar .brand.game-mode-switch small{color:#fff}
@media(max-width:780px){body:is([data-scene="explore"],[data-scene="islandQuest"]) .topbar .brand.game-mode-switch{font-size:15px;gap:6px;padding:7px 9px;max-width:190px}body:is([data-scene="explore"],[data-scene="islandQuest"]) .topbar .brand.game-mode-switch .brand-mark{display:none}}

/* Illustrated destination-specific previews; never repeat one city screenshot for every place. */
.hub-card .hub-picture{background-size:cover;background-position:center}
.hub-card .hub-symbol{align-self:end;justify-self:start;margin:8px;font-size:23px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#fffdf0e8}