:root{--v31-bg:#080f1e;--v31-surface:#101b2e;--v31-cream:#f5f0e7;--v31-muted:#aebbd0;--v31-gold:#eac28a;--v31-line:rgb(222 231 249/14%)}
.v31-start{--parallax-x:0px;--parallax-y:0px;display:block;min-height:100dvh;color:var(--v31-cream);background:radial-gradient(ellipse at 32% 45%,#1d4564,#0c1729 62%,#080f1e);font-family:"Segoe UI",system-ui,sans-serif}
.v31-start::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(0deg,#080f1e 0,transparent 28%),radial-gradient(ellipse at 68% 42%,transparent 0 13%,rgb(8 15 30/18%) 60%);pointer-events:none}
.v31-start::after{content:"";position:absolute;z-index:1;right:0;bottom:0;left:0;height:34%;pointer-events:none;background:radial-gradient(ellipse at 35% 0,rgb(42 104 137/16%),transparent 48%),radial-gradient(ellipse at 74% 8%,rgb(24 91 132/12%),transparent 44%),linear-gradient(180deg,transparent,#07101e 68%)}
.v31-header{position:absolute;z-index:8;top:0;left:0;right:0;height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,76px);border-bottom:1px solid var(--v31-line);background:linear-gradient(#07101cd9,transparent)}
.v31-brand{display:flex;align-items:center;gap:13px;text-align:left}.v31-brand>span{display:grid;place-items:center;width:43px;height:43px;border:1px solid #d5aa73;border-radius:12px;background:linear-gradient(140deg,#47371f,#111b2b);color:#f9d59b;font-size:22px}.v31-brand strong{font:400 20px/1.05 Georgia,serif}.v31-brand small{display:block;margin-top:6px;color:var(--v31-gold);font:800 8px/1 "Segoe UI",sans-serif;letter-spacing:.2em;text-transform:uppercase}
.v31-header nav{display:flex;gap:9px}.v31-header button{min-height:0;padding:10px 16px;border:1px solid var(--v31-line);border-radius:999px;background:rgb(255 255 255/5%);box-shadow:none;color:#e8eefa;font-size:12px}.v31-header button:hover{background:rgb(255 255 255/14%)}
.v31-hero-art{position:absolute;inset:0 33% 0 0;background:url('../images/v31/hero-art.webp') 39% center/cover no-repeat;transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1.035);transition:transform .6s cubic-bezier(.2,.8,.2,1);mask-image:linear-gradient(90deg,#000 0 66%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0 66%,transparent 100%);will-change:transform}
.v31-hero-art canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;pointer-events:none}
.v31-shade{position:absolute;z-index:1;inset:0;background:radial-gradient(circle at 40% 47%,rgb(56 196 255/11%),transparent 22%),linear-gradient(90deg,transparent 0 43%,rgb(8 15 30/35%) 58%,#080f1e 74%)}
.v31-copy{position:absolute;z-index:4;top:50%;right:clamp(32px,7vw,110px);width:min(43%,610px);transform:translateY(-48%);padding:42px 0 42px 34px;text-align:left}.v31-kicker{display:flex;align-items:center;gap:13px;margin:0;color:var(--v31-gold);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.v31-kicker::before{content:"";width:33px;height:1px;background:var(--v31-gold)}.v31-copy h1{margin:22px 0 13px;color:var(--v31-cream);font:400 clamp(58px,6vw,94px)/.98 Georgia,serif;letter-spacing:-.045em;text-shadow:0 10px 45px #000}.v31-copy h1 span{display:block;color:var(--v31-gold);font-size:1em}.v31-subtitle{margin:0 0 23px;color:#f3d7aa;font:400 13px/1 Georgia,serif;letter-spacing:.2em;text-transform:uppercase}.v31-description{max-width:440px;margin:0 0 28px;color:#c6d2e1;font-size:15px;line-height:1.8}.v31-copy .enter-adventure{position:relative;display:inline-flex;width:auto;min-width:245px;min-height:54px;gap:20px;align-items:center;justify-content:center;overflow:hidden;border:1px solid #ffe1a8;border-radius:6px;padding:14px 23px;background:linear-gradient(135deg,#ffe2a7,#d7a363);box-shadow:0 10px 35px rgb(227 170 96/25%);color:#162034;font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.v31-copy .enter-adventure::after{content:"";position:absolute;inset:-80% auto -80% -50%;width:25%;background:linear-gradient(90deg,transparent,#fff9,transparent);transform:rotate(25deg);transition:left .65s}.v31-copy .enter-adventure:hover::after,.v31-copy .enter-adventure:focus-visible::after{left:125%}.v31-copy .enter-adventure:hover{transform:translateY(-2px);box-shadow:0 14px 45px rgb(227 170 96/48%)}.v31-copy>small{display:block;margin-top:13px;color:#aebbd0;font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.v31-footer{position:absolute;z-index:4;right:clamp(24px,5vw,76px);bottom:26px;left:clamp(24px,5vw,76px);display:flex;justify-content:space-between;color:rgb(208 218 228/68%);font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.developer-credit{position:absolute;right:0;bottom:20px;display:grid;justify-items:end;gap:3px;max-width:min(620px,72vw);color:#dfeaf7;font-size:10px;letter-spacing:.06em;text-align:right;text-transform:none;text-shadow:0 2px 7px #000}.developer-credit[hidden]{display:none}.credit-label{color:#d7af72;font-size:8px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.credit-people{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px}.credit-people img{width:24px;height:24px;border:1px solid rgb(226 188 126/62%);border-radius:50%;object-fit:cover}.credit-school a{color:#cfe8ff;text-decoration:none}.credit-school a:hover,.credit-school a:focus-visible{text-decoration:underline}
.v31-start.portal-hot .v31-hero-art{filter:saturate(1.08) brightness(1.04)}.v31-start.portal-activating .v31-copy{animation:v31-copy-away .65s ease forwards}.v31-start.portal-activating .v31-hero-art{animation:v31-portal-zoom .8s cubic-bezier(.2,.8,.2,1) forwards}
.v31-start .landing-settings{z-index:20;right:clamp(24px,5vw,76px);bottom:auto;top:72px;color:#eef4ff;background:linear-gradient(145deg,#1b2d47,#0c1627);border-color:rgb(213 173 115/36%)}
@keyframes v31-copy-away{to{opacity:0;transform:translateY(-48%) translateX(28px)}}@keyframes v31-portal-zoom{to{transform:translate3d(-5%,0,0) scale(1.22);filter:brightness(1.28)}}

body:has(#menu:not(.hidden)){overflow:hidden;background:#080f1e}.menu-panel{width:100%;max-height:100dvh;height:100dvh;margin:0;padding:0 clamp(22px,5vw,72px) 60px;overflow:auto;border:0;border-radius:0;background:linear-gradient(180deg,#0b1424,#080f1e);box-shadow:none;color:var(--v31-cream);text-align:left}.world-header{position:sticky;z-index:10;top:0;display:flex;align-items:center;justify-content:space-between;min-height:82px;margin:0 calc(clamp(22px,5vw,72px)*-1) 55px;padding:0 clamp(22px,5vw,72px);border-bottom:1px solid var(--v31-line);background:rgb(8 15 30/94%);backdrop-filter:blur(14px)}.world-header .menu-controls{margin:0}.world-header button{min-height:40px;border:1px solid var(--v31-line);border-radius:999px;padding:8px 15px;background:rgb(255 255 255/6%);box-shadow:none;color:#e8eefa;font-size:11px}.menu-panel>.eyebrow{display:flex;align-items:center;gap:13px;margin:0;color:var(--v31-gold);letter-spacing:.2em}.menu-panel>.eyebrow::before{content:"";width:33px;height:1px;background:var(--v31-gold)}.menu-panel>h1{margin:15px 0 6px;color:var(--v31-cream);font:400 clamp(42px,5vw,68px)/1 Georgia,serif;letter-spacing:-.035em}.menu-panel>h1 span{color:var(--v31-gold);font-size:1em}.menu-message{max-width:none;margin:12px 0 28px;color:var(--v31-muted);font-size:14px}.profile-form{margin:40px 0;max-width:620px}.profile-form label{color:var(--v31-gold)}
.difficulty-picker{max-width:none;margin:0 0 30px;padding:18px;border:1px solid var(--v31-line);border-radius:12px;background:rgb(255 255 255/4%)}.difficulty-picker small{color:var(--v31-muted)}.difficulty-picker select{border:1px solid rgb(255 255 255/22%);background:#101d30;color:#fff}
.level-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:0}.level-card{display:grid;grid-template-rows:190px auto;min-height:365px;padding:0;border:1px solid color-mix(in srgb,var(--world-accent,#eac28a) 32%,transparent);border-radius:12px;background:#132138;box-shadow:none;text-align:left;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}.level-card::after{display:none}.level-card:hover:not(:disabled),.level-card:focus-visible:not(:disabled){transform:translateY(-6px);border-color:var(--world-accent,#eac28a);box-shadow:0 20px 50px #0009,0 0 30px color-mix(in srgb,var(--world-accent,#eac28a) 16%,transparent);filter:none}.level-card .world-art{position:relative;width:100%;height:190px;object-fit:cover;background:linear-gradient(145deg,var(--card-sky),var(--card-ground));transition:transform .5s}.level-card .world-art-wrap{position:relative;overflow:hidden}.level-card .world-art-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#111d30c7,transparent 58%);pointer-events:none}.level-card:hover:not(:disabled) .world-art{transform:scale(1.055)}.level-card .card-status{position:absolute;z-index:2;top:14px;left:14px;background:rgb(9 17 29/82%);backdrop-filter:blur(8px);border:1px solid rgb(255 255 255/28%);font-size:9px;letter-spacing:.08em}.level-card .world-copy{display:flex;flex-direction:column;padding:20px}.level-card h2{margin:0 0 8px;font:400 24px/1.1 Georgia,serif}.level-card .period{margin:0 0 11px;color:var(--world-accent,#eac28a);font-size:11px}.level-card .summary{margin:0;color:var(--v31-muted);font-size:12px;line-height:1.55}.level-card .world-link{margin-top:auto;padding-top:16px;color:var(--world-accent,#eac28a);font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.level-card .prerequisite{margin:8px 0 0;color:#ffd09a;font-size:10px}.level-card.locked{filter:saturate(.35);opacity:.76}
@media(max-width:1120px){.level-list{grid-template-columns:repeat(3,1fr)}.v31-copy{right:4vw;width:46%}}
@media(max-width:760px){.v31-header{height:68px;padding:0 18px}.v31-header nav{gap:5px}.v31-header nav button{padding:8px;font-size:0}.v31-header nav button::first-letter{font-size:12px}.v31-header nav button:nth-child(1)::after{content:"★";font-size:13px}.v31-header nav button:nth-child(2)::after{content:"⚙";font-size:13px}.v31-header nav button:nth-child(3)::after{content:"?";font-size:13px}.v31-brand strong{font-size:16px}.v31-brand>span{width:37px;height:37px}.v31-hero-art{inset:0 0 39% 0;background-position:39% center;mask-image:linear-gradient(#000 0 65%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0 65%,transparent 100%);transform:scale(1.02)}.v31-shade{background:linear-gradient(0deg,#080f1e 31%,rgb(8 15 30/82%) 48%,transparent 78%)}.v31-copy{top:auto;right:22px;bottom:47px;left:22px;width:auto;transform:none;padding:0}.v31-copy h1{margin:11px 0 8px;font-size:clamp(47px,13vw,70px)}.v31-copy h1 span{display:inline}.v31-description{font-size:13px;line-height:1.55;margin-bottom:16px}.v31-kicker,.v31-subtitle{font-size:9px}.v31-copy .enter-adventure{min-height:48px}.v31-footer{display:none}.v31-start.portal-activating .v31-copy{animation:v31-mobile-away .5s ease forwards}.world-header{margin-bottom:35px}.world-header .menu-controls button{font-size:0;padding:8px 11px}.world-header .menu-controls button::after{font-size:11px}.world-header #leaderboard-button::after{content:"Scores"}.world-header #menu-help-button::after{content:"Help"}.world-header #new-player-button::after{content:"New"}.level-list{grid-template-columns:repeat(2,1fr);gap:12px}.level-card{grid-template-rows:145px auto;min-height:315px}.level-card .world-art{height:145px}.difficulty-picker{grid-template-columns:1fr}.menu-panel{padding-inline:18px}.world-header{margin-inline:-18px;padding-inline:18px}.menu-panel>h1{font-size:42px}}
@keyframes v31-mobile-away{to{opacity:0;transform:translateY(22px)}}
@media(max-width:430px){.v31-copy h1{font-size:45px}.v31-description{display:none}.v31-copy .enter-adventure{width:100%}.level-list{grid-template-columns:1fr}.level-card{grid-template-rows:180px auto}.level-card .world-art{height:180px}}
@media(orientation:landscape) and (max-height:560px){.v31-header{height:52px}.v31-brand>span{width:32px;height:32px}.v31-hero-art{inset:0 37% 0 0;mask-image:linear-gradient(90deg,#000 0 66%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 0 66%,transparent)}.v31-shade{background:linear-gradient(90deg,transparent 0 42%,#080f1e 72%)}.v31-copy{top:52%;right:4%;bottom:auto;left:auto;width:43%;transform:translateY(-45%)}.v31-copy h1{font-size:clamp(35px,8vh,54px)}.v31-description{display:none}.v31-copy .enter-adventure{width:auto;min-height:42px;margin-top:4px}.v31-copy>small{display:none}}
@media(prefers-reduced-motion:reduce){.v31-hero-art,.level-card,.level-card .world-art,.v31-copy .enter-adventure{animation:none!important;transition:none!important;transform:none!important}.v31-hero-art canvas{display:none}}
@media(max-width:760px){.v31-header nav button::first-letter{font-size:0}.v31-hero-art{bottom:34%}}

/* Match the V3.1 prototype's shallower hero crop on larger screens. */
@media(min-width:761px) and (min-height:561px){.v31-hero-art{bottom:auto;height:82dvh}}
.world-empty{position:relative;display:flex;min-height:260px;gap:34px;align-items:center;justify-content:center;margin-top:10px;overflow:hidden;border:1px solid var(--v31-line);border-radius:14px;padding:42px;background:radial-gradient(circle at 26% 50%,rgb(61 140 184/14%),transparent 31%),linear-gradient(135deg,rgb(255 255 255/4%),rgb(255 255 255/1%));text-align:left}.world-empty h2{margin:0 0 12px;color:var(--v31-cream);font:400 clamp(27px,3vw,42px)/1.1 Georgia,serif}.world-empty p{max-width:570px;margin:0;color:var(--v31-muted);font-size:14px;line-height:1.75}.empty-orbit{position:relative;flex:0 0 110px;width:110px;height:110px;border:1px solid rgb(106 214 255/34%);border-radius:50%;box-shadow:inset 0 0 32px rgb(66 187 238/12%),0 0 35px rgb(66 187 238/10%)}.empty-orbit::before,.empty-orbit::after{content:"";position:absolute;border-radius:50%;border:1px solid rgb(234 194 138/55%);transform:rotate(28deg)}.empty-orbit::before{inset:17px -8px}.empty-orbit::after{inset:-8px 17px;transform:rotate(-28deg)}.empty-orbit i{position:absolute;top:50%;left:50%;width:13px;height:13px;border-radius:50%;background:#eac28a;box-shadow:0 0 19px #eac28a;transform:translate(-50%,-50%)}
@media(max-width:760px){.world-header #home-button::after{content:"Home"}.world-empty{min-height:300px;flex-direction:column;gap:24px;padding:32px 22px;text-align:center}.empty-orbit{flex-basis:90px;width:90px;height:90px}}
@media(prefers-reduced-motion:no-preference){.empty-orbit::before{animation:empty-orbit 12s linear infinite}.empty-orbit::after{animation:empty-orbit 16s linear infinite reverse}}@keyframes empty-orbit{to{transform:rotate(388deg)}}

/* Database-driven world artwork layers. The banner remains scenery; isolated
   island art and civilization medallions are independent, optional assets. */
.world-island{position:absolute;z-index:1;left:50%;bottom:2%;width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 15px 13px rgb(0 0 0/58%));transform:translateX(-50%);transition:transform .45s ease}
.level-card:hover:not(:disabled) .world-island,.level-card:focus-visible:not(:disabled) .world-island{transform:translateX(-50%) translateY(-4px) scale(1.035)}
.world-medallion{position:absolute;z-index:3;top:12px;right:12px;width:42px;height:42px;border:2px solid color-mix(in srgb,var(--world-accent,#eac28a) 72%,#fff);border-radius:50%;object-fit:cover;background:#0d192b;box-shadow:0 5px 18px #000a}
.world-island-fallback{position:absolute;z-index:1;left:50%;bottom:13%;width:54%;height:29%;border-radius:50%;background:radial-gradient(ellipse at 50% 8%,color-mix(in srgb,var(--world-accent,#eac28a) 62%,#ddd),var(--card-ground) 58%,#07101e 100%);box-shadow:0 18px 20px #0009,0 -7px 24px color-mix(in srgb,var(--world-accent,#eac28a) 20%,transparent);transform:translateX(-50%)}
.world-island-fallback::after{content:"";position:absolute;inset:56% 12% -32%;background:linear-gradient(125deg,transparent 20%,var(--card-ground) 22% 40%,#07101e 42% 58%,var(--card-ground) 60% 78%,transparent 80%);clip-path:polygon(0 0,100% 0,78% 100%,55% 63%,42% 100%,20% 62%)}
.world-art-wrap:has(.world-island) .world-island-fallback{display:none}
@media(max-width:760px){.world-header #sound-button::after{content:"Sound"}.world-medallion{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.world-island{transition:none}}
@media(max-width:760px){.v31-footer:has(.developer-credit:not([hidden])){display:block;right:12px;bottom:8px;left:12px}.v31-footer>span{display:none}.developer-credit{right:0;bottom:0;max-width:70vw;font-size:8px}.credit-people img{width:20px;height:20px}}
@media(orientation:landscape) and (max-height:560px){.developer-credit{max-width:58vw}.credit-school{display:none}}