@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#080d15;--panel:#111a27;--panel2:#151f2d;--line:#273141;--ink:#eef2f4;--muted:#a8b2be;--soft:#6e8190;--accent:#d9ff86;--accent-dark:#172212;--radius:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body:before{content:"";position:absolute;left:0;top:0;width:100%;height:950px;pointer-events:none;background:radial-gradient(ellipse at 78% 9%,rgba(88,116,88,.13),transparent 35%),radial-gradient(ellipse at 9% 30%,rgba(44,76,114,.12),transparent 41%);z-index:-1}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
img{display:block;max-width:100%}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:'Space Grotesk','DM Sans',sans-serif;letter-spacing:-.05em}
h1 em,h2 em{font-weight:500;font-style:normal;color:var(--accent)}
.site-shell{max-width:1620px;margin:auto;overflow:hidden}
.topbar{height:91px;padding:0 clamp(22px,5vw,86px);display:flex;align-items:center;gap:36px;border-bottom:1px solid rgba(188,216,228,.1)}
.brand{display:inline-flex;gap:12px;align-items:center;flex-shrink:0}
.brand-symbol{width:30px;height:30px;position:relative;transform:rotate(-18deg);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px}
.brand-symbol span{background:var(--accent);border-radius:2px 2px 4px 2px}
.brand-symbol span:nth-child(2){opacity:.67}
.brand-symbol span:nth-child(3){opacity:.48}
.brand-symbol span:nth-child(4){opacity:.88}
.brand-type{font:700 23px/1 'Space Grotesk',sans-serif;letter-spacing:-.08em}
.brand-type>span{color:var(--accent)}
.brand-type small{display:block;font:700 7px/1 'DM Sans',sans-serif;letter-spacing:.31em;color:var(--soft);margin-top:6px}
.site-nav{display:flex;align-items:center;gap:32px;margin:0 auto;font-size:13px;font-weight:700;color:#aeb9c4}
.site-nav a,.footer>a:last-child{transition:color .2s}
.site-nav a:hover,.footer>a:last-child:hover{color:var(--accent)}
.header-action{font-size:12px;font-weight:700;padding:10px 0;border-bottom:1px solid #677949;white-space:nowrap}
.header-action span{color:var(--accent);margin-left:14px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;padding:76px clamp(22px,5vw,86px) 85px;min-height:675px}
.hero-copy{max-width:620px}
.eyebrow,.section-topline,.kicker,.image-overline,.corner-label,.hero-image-caption>span:last-child,.catalog-count,.status-pill,.library-note,.filter,.search-hint{font-family:'DM Sans',sans-serif}
.eyebrow{display:flex;align-items:center;gap:11px;color:var(--accent);font-size:10px;letter-spacing:.22em;font-weight:700;margin-bottom:23px}
.live-dot{width:7px;height:7px;background:var(--accent);box-shadow:0 0 18px #a9e967;border-radius:50%}
.hero h1{font-size:clamp(48px,5vw,77px);line-height:1.065;letter-spacing:-.075em;margin-bottom:28px}
.hero-intro{font-size:16px;line-height:1.85;color:#a6b4c0;max-width:515px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.button{display:inline-flex;justify-content:space-between;align-items:center;gap:35px;border-radius:7px;padding:14px 20px;font-size:13px;font-weight:700;transition:transform .2s,background .2s,border-color .2s}
.button:hover{transform:translateY(-3px)}
.button-primary{background:var(--accent);color:#10180a}
.button-primary:hover{background:#edffbb}
.button-subtle{border:1px solid #3a4957;background:rgba(255,255,255,.018)}
.button-subtle:hover{background:#1a2532;border-color:#677e8b}
.hero-caption{display:flex;align-items:center;gap:16px;margin-top:53px;font-size:11px;line-height:1.7;color:var(--soft)}
.hero-caption strong{color:#d5dce3}
.accent-line{height:32px;width:2px;background:var(--accent)}
.hero-art{height:480px;position:relative;isolation:isolate;border:1px solid rgba(229,241,254,.18);border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#202b3a,#090c12);box-shadow:0 24px 95px #0008}
.hero-art:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.09) 4px);pointer-events:none}
.hero-art>img{height:100%;width:100%;object-fit:cover;filter:brightness(.76) saturate(.88);opacity:.95}
.hero-art-gradient{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,21,.65),transparent 44%,rgba(5,9,14,.98)),linear-gradient(95deg,rgba(6,11,17,.28),transparent 63%)}
.corner-label{position:absolute;top:26px;left:29px;font-size:10px;font-weight:700;letter-spacing:.17em;color:#ecf3f4}
.hero-image-caption{position:absolute;left:30px;bottom:29px;display:flex;flex-direction:column;gap:4px;z-index:1}
.image-overline{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.2em}
.hero-image-caption strong{font:700 clamp(26px,3vw,44px)/1.15 'Space Grotesk',sans-serif;letter-spacing:-.05em}
.hero-image-caption>span:last-child{font-size:9px;letter-spacing:.15em;font-weight:700;color:#afbac5;margin-top:5px}
.sep{padding:0 7px;color:var(--accent)}
.hero-decoration{position:absolute;right:27px;bottom:27px;font:700 23px/1 'Space Grotesk',sans-serif;letter-spacing:-.06em;color:var(--accent);z-index:1}
.hero-decoration span{font-size:12px;color:#b7c5c9}
.signal-strip{border-block:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:25px clamp(22px,5vw,86px);gap:28px;background:#0b111b}
.signal-strip>div{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap;font-size:11px}
.signal-strip strong{font-size:12px}
.signal-strip div>span:last-child{color:#8495a3}
.signal-icon{font-size:18px;color:var(--accent);line-height:1}
.games-section,.connect-section{padding:92px clamp(22px,5vw,86px) 110px}
.section-topline{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:.2em;color:#84949f;padding-bottom:21px;border-bottom:1px solid var(--line)}
.section-topline>span:last-child{color:#81939e}
.section-topline>span:last-child span{color:var(--accent)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin:55px 0 39px}
.kicker{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--accent);margin-bottom:10px}
.section-heading h2,.about-section h2,.connect-section h2{font-size:clamp(38px,4vw,60px);line-height:1.1;margin-bottom:18px}
.section-heading p:not(.kicker){max-width:610px;color:#9aabb8;font-size:14px;line-height:1.8;margin:0}
.catalog-count{white-space:nowrap;border:1px solid #485747;border-radius:4px;color:var(--accent);padding:9px 12px;font-size:10px;letter-spacing:.1em}
.library-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px}
.filter-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.filter{border:1px solid transparent;border-radius:6px;padding:9px 16px;background:transparent;color:#8d9daa;font-size:12px;font-weight:700;transition:color .2s,background .2s}
.filter:hover{color:#fff}
.filter.active{background:#1d2934;border-color:#425364;color:#f1f4f5}
.filter span{color:var(--accent);font-size:10px;margin-left:5px}
.search-field{min-width:220px;max-width:290px;flex:1;position:relative;display:flex;align-items:center;background:#111b26;border:1px solid #283748;border-radius:7px;height:42px}
.search-field:focus-within{border-color:#b5db72}
.search-symbol{font-size:25px;color:#8c9baa;margin-left:13px;line-height:1}
.search-field input{min-width:0;width:100%;background:none;outline:none;border:0;color:#f6f8f9;padding:9px 10px;font-size:12px}
.search-field input::placeholder{color:#70818e}
.search-hint{color:#70818e;border:1px solid #4b5965;border-radius:4px;font-size:10px;font-weight:700;margin-right:11px;padding:0 6px}
.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.game-card{overflow:hidden;min-width:0;background:linear-gradient(170deg,#121e2b,#0f1722);border:1px solid #293747;border-radius:12px;transition:transform .25s,border-color .25s,box-shadow .25s}
.game-card:hover{transform:translateY(-5px);border-color:#758e77;box-shadow:0 19px 37px #0005}
.game-thumb{height:210px;position:relative;overflow:hidden;background:linear-gradient(130deg,#253548,#080e18)}
.game-thumb img{width:100%;height:100%;object-fit:cover;filter:brightness(.78) saturate(.8);transition:transform .5s}
.game-card:hover .game-thumb img{transform:scale(1.045)}
.game-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(5,10,17,.84))}
.game-thumb-top{position:absolute;z-index:1;top:16px;left:17px;right:17px;display:flex;justify-content:space-between;gap:8px}
.thumb-label,.version-label{display:inline-flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.12em;font-weight:700;border-radius:4px;padding:6px 8px;background:#0b131bdc;color:#d9e2e8;border:1px solid #71829064}
.version-label{color:var(--accent)}
.game-index{position:absolute;z-index:1;right:17px;bottom:12px;color:#e7f0f2bd;font:700 14px 'Space Grotesk';letter-spacing:.05em}
.game-content{padding:23px 21px 21px}
.game-category{color:var(--accent);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:6px}
.game-content h3{font-size:clamp(21px,2vw,27px);line-height:1.18;min-height:58px;letter-spacing:-.05em;margin-bottom:9px}
.game-description{font-size:12px;color:#99a8b4;line-height:1.7;min-height:62px;margin-bottom:19px}
.game-meta{display:flex;justify-content:space-between;color:#8295a3;gap:7px;font-size:10px;padding-bottom:18px;border-bottom:1px solid #293745}
.game-meta strong{color:#d4dfe7;font-weight:600}
.platform-list{display:flex;flex-direction:column;gap:8px;margin-top:17px}
.platform-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:7px;padding:11px 12px;background:#1c2835;border:1px solid #304151;min-height:49px}
.platform-name{display:flex;align-items:center;gap:8px;font-weight:700;font-size:12px}
.platform-name .os-icon{display:grid;place-items:center;width:17px;height:17px;font-size:16px;color:var(--accent)}
.platform-version{display:block;color:#8fa2af;font-size:10px;letter-spacing:.01em;font-weight:500;line-height:1.4}
.platform-button{white-space:nowrap;border:1px solid #4b6259;background:#d9ff86;color:#112014;font-size:10px;font-weight:800;letter-spacing:.03em;padding:7px 9px;border-radius:4px}
.platform-button:hover{background:#ecffbd}
.platform-row.unavailable{background:#151f2b;border-color:#253542}
.platform-row.unavailable .os-icon{color:#6b7f91}
.platform-unavailable{font-size:10px;color:#8d9daa}
.details-link{width:100%;background:none;border:0;color:#b2c2cb;text-align:left;padding:18px 0 0;font-size:11px;font-weight:700;display:flex;justify-content:space-between}
.details-link:hover{color:var(--accent)}
.empty-state{padding:44px;border:1px dashed #516574;color:#9ab0bc;border-radius:10px;text-align:center}
.library-note{margin:28px 0 0;font-size:11px;color:#8e9eaa}
.library-note span{color:var(--accent);font-size:18px;margin-right:7px}
.about-section{display:grid;grid-template-columns:1fr 1fr;gap:9%;padding:91px clamp(22px,5vw,86px) 94px;background:#dbe2dc;color:#15252a}
.about-section .section-topline{border-color:#aebbb7;margin-bottom:50px;color:#667c79}
.about-section .kicker{color:#587342}
.about-section h2{font-size:clamp(43px,4.5vw,69px);margin-bottom:25px}
.about-section h2 em{color:#647e48}
.about-identity>p:not(.kicker){color:#4e6265;line-height:1.85;max-width:515px}
.text-link{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;border-bottom:1px solid #647e48;padding-bottom:6px}
.text-link span{margin-left:20px}
.about-points{align-self:end;border-top:1px solid #a9b7b1}
.about-points article{display:grid;grid-template-columns:42px 1fr;gap:20px;border-bottom:1px solid #a9b7b1;padding:21px 0}
.about-points article>span{font-size:11px;color:#5e794d;font-weight:700}
.about-points h3{font-size:20px;letter-spacing:-.04em;margin-bottom:6px}
.about-points p{margin:0;color:#56696b;font-size:12px;line-height:1.75}
.connect-section{padding-bottom:102px}
.connect-section h2{margin:52px 0 36px}
.connect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px}
.connect-card{background:#121c29;border:1px solid #2b3949;border-radius:11px;min-height:290px;padding:25px;display:flex;flex-direction:column;align-items:flex-start}
.connect-card-top{width:100%;display:flex;justify-content:space-between;align-items:start;gap:8px}
.connect-icon{display:grid;place-items:center;font:700 26px/1 'Space Grotesk',sans-serif;border:1px solid #50605c;background:#25312c;color:var(--accent);width:46px;height:46px;border-radius:10px}
.status-pill{border:1px solid #465465;color:#8da0ac;font-size:8px;letter-spacing:.09em;padding:6px 7px;border-radius:4px;white-space:nowrap}
.connect-card h3{font-size:24px;line-height:1.15;margin:30px 0 12px}
.connect-card p{font-size:12px;line-height:1.75;color:#9baab7}
.connect-card a,.inactive-link{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;width:100%;border-top:1px solid #33404f;padding-top:18px;font-size:11px;font-weight:700}
.inactive-link{color:#8697a5}
.connect-card a:hover{color:var(--accent)}
.connect-card-accent{background:#d9ff86;color:#19271a;border-color:#c1ec75}
.connect-card-accent .connect-icon{background:#bedf76;border-color:#a0bc6b;color:#1f311c}
.connect-card-accent .light-pill{border-color:#9ebd67;color:#4c633e}
.connect-card-accent p{color:#506349}
.connect-card-accent a{border-color:#accb76}
.connect-card-accent a:hover{color:#4c6b2a}
.footer{padding:33px clamp(22px,5vw,86px) 38px;border-top:1px solid var(--line);display:flex;gap:29px;align-items:center}
.footer p{font-size:10px;color:#728694;line-height:1.6;max-width:700px;margin:0}
.footer>a:last-child{font-size:9px;font-weight:700;letter-spacing:.12em;margin-left:auto;white-space:nowrap}
.footer-brand .brand-type{font-size:22px}
.game-dialog{width:min(620px,calc(100vw - 24px));max-height:min(85vh,900px);overflow:auto;color:#f0f4f6;background:#111d29;border:1px solid #546b72;border-radius:15px;padding:0;box-shadow:0 30px 100px #000b}
.game-dialog::backdrop{background:#050a11d9;backdrop-filter:blur(6px)}
.dialog-close{position:absolute;top:14px;right:14px;width:35px;height:35px;border:1px solid #7b8b90;border-radius:50%;background:#111b24bb;color:#fff;font-size:22px;line-height:1}
.dialog-image{height:230px;width:100%;object-fit:cover;filter:brightness(.85)}
.dialog-body{padding:29px}
.dialog-body .kicker{letter-spacing:.12em;font-size:10px}
.dialog-body h2{font-size:35px;line-height:1.12;margin-bottom:12px}
.dialog-body>p{color:#a5b5c2;font-size:13px;line-height:1.8}
.detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px 0}
.detail-fact{padding:14px;border:1px solid #344657;background:#162330;border-radius:7px}
.detail-fact small{display:block;text-transform:uppercase;letter-spacing:.12em;color:#8fa1ad;font-weight:700;font-size:9px}
.detail-fact strong{font-size:12px}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap}
.detail-actions a{font-size:12px;font-weight:700;padding:11px 16px;border:1px solid #5c7862;border-radius:5px}
.detail-actions a:first-child{background:var(--accent);color:#1a2714}
.detail-actions a:hover{opacity:.8}
.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}
.skip-link{position:absolute;top:-90px;left:10px;background:var(--accent);color:#111;padding:12px;z-index:10}
.skip-link:focus{top:10px}
@media(max-width:1100px){.hero{gap:28px}.hero h1{font-size:clamp(44px,5.2vw,60px)}.hero-art{height:420px}.signal-strip>div{display:block}.signal-icon{margin-right:8px}.game-grid{gap:13px}.game-content{padding:17px}.game-content h3{font-size:21px}.connect-card{padding:20px}}
@media(max-width:800px){.topbar{height:74px}.header-action{display:none}.site-nav{margin-left:auto;gap:20px}.hero{grid-template-columns:1fr;padding-top:55px;gap:36px}.hero-copy{max-width:700px}.hero h1{font-size:clamp(44px,7vw,67px)}.hero-art{height:340px}.hero-caption{margin-top:30px}.signal-strip{grid-template-columns:1fr 1fr;gap:14px}.signal-strip>div:last-child{grid-column:span 2}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-section{grid-template-columns:1fr;gap:45px}.about-section .section-topline{margin-bottom:30px}.connect-grid{grid-template-columns:1fr 1fr}.connect-card-accent{grid-column:span 2;min-height:225px}}
@media(max-width:560px){.topbar{padding-inline:18px}.brand-type{font-size:21px}.brand-symbol{width:24px;height:24px}.site-nav{gap:13px;font-size:11px}.hero,.games-section,.connect-section,.about-section{padding-left:20px;padding-right:20px}.hero{padding-top:46px;padding-bottom:52px}.hero h1{font-size:clamp(41px,10vw,58px)}.hero-intro{font-size:14px}.hero-art{height:275px}.hero-image-caption strong{font-size:29px}.hero-image-caption>span:last-child{font-size:8px;letter-spacing:.04em;max-width:240px}.hero-decoration{display:none}.signal-strip{padding:21px;grid-template-columns:1fr}.signal-strip>div:last-child{grid-column:auto}.signal-strip>div{display:flex}.games-section,.connect-section{padding-top:63px;padding-bottom:72px}.section-heading{align-items:start;flex-direction:column;margin:40px 0 25px}.section-heading h2,.connect-section h2{font-size:42px}.library-controls{align-items:stretch;flex-direction:column}.search-field{max-width:none;width:100%}.game-grid{grid-template-columns:1fr}.game-thumb{height:205px}.game-content h3{min-height:0;font-size:25px}.game-description{min-height:0}.about-section{padding-top:64px;padding-bottom:70px}.about-section h2{font-size:50px}.connect-grid{grid-template-columns:1fr}.connect-card-accent{grid-column:auto}.connect-card{min-height:265px}.footer{align-items:flex-start;flex-wrap:wrap;padding:27px 20px}.footer p{order:3;flex-basis:100%}.footer>a:last-child{margin-left:auto}.detail-facts{grid-template-columns:1fr}.dialog-body{padding:22px}.dialog-image{height:170px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* ===== AEON / OCEAN-MINT DESIGN SYSTEM ===== */
:root {
  --bg:#031824;--panel:#082735;--panel2:#0e3540;--line:#174657;
  --ink:#e9fcfb;--muted:#a3c9ca;--soft:#78adb7;
  --accent:#6af1d4;--accent-dark:#062c31;
}
body{background:radial-gradient(ellipse at 75% 2%,#0a3b50 0%,#062733 25%,#041b29 57%,#031824 100%);color:#e7fcfa}
body:before{background:radial-gradient(ellipse at 82% 9%,#0abcbf26,transparent 43%),radial-gradient(ellipse at 8% 23%,#2689c11c,transparent 36%);height:1200px}
.topbar{height:90px;background:#052332cc;backdrop-filter:blur(22px);border-bottom:1px solid #34cdb359;position:relative;z-index:3}
.brand{gap:12px}
.brand-avatar{width:63px;height:63px;display:block;position:relative;overflow:hidden;border-radius:50%;border:1px solid #3bcbbb77;background:linear-gradient(145deg,#0b3343,#07313c);box-shadow:0 0 24px #19d9b328;flex-shrink:0}
.brand-avatar img{height:100%;width:100%;object-fit:cover;transform:scale(1.85) translateY(15%);position:relative;z-index:2}
.brand-avatar-fallback{font-size:32px;display:grid;place-items:center;position:absolute;inset:0}
.brand-type{font-size:30px;font-weight:700;letter-spacing:-.065em;font-style:italic;white-space:nowrap}
.brand-type>span{color:#76f8ce}
.brand-type small{font-style:normal;color:#9de7dc;font-size:8px;letter-spacing:.46em;margin-top:7px}
.site-nav{gap:32px}
.site-nav a{font-size:12px;color:#c3e2e4;padding:9px 10px;border-radius:22px}
.site-nav a:hover{color:#f1fffd;background:#15566355}
.site-nav .nav-home{color:#c9fff0;background:linear-gradient(145deg,#0a696c7a,#0c434d70);border:1px solid #60e7c1a0;box-shadow:inset 0 1px 8px #3af6c322,0 0 17px #48ffcf2e;padding:7px 16px}
.nav-home:first-letter{font-size:19px}
.header-action{border:1px solid #67ddc6aa;border-radius:14px;padding:10px 17px;box-shadow:0 0 12px #2ff6c321;font-size:12px}
.header-action span{color:#97ffe5}
.hero{min-height:0;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);padding-top:42px;padding-bottom:35px;gap:8px;align-items:center}
.hero-copy{position:relative;z-index:1}
.hero .eyebrow{margin-bottom:13px;font-size:9px;letter-spacing:.18em;color:#87e9d4}
.hero h1{font-size:clamp(43px,5.7vw,83px);letter-spacing:-.075em;margin-bottom:5px;line-height:1.08;font-style:italic;text-shadow:0 6px 19px #0019}
.hero h1 em{color:#f0ffff}
.hero h1 .digit-accent{color:#62eecb}
.hero-tagline{font-size:clamp(18px,2vw,24px);line-height:1.3;font-family:'Space Grotesk',sans-serif;font-weight:700;font-style:italic;color:#dbf7f6;margin:11px 0 25px;letter-spacing:-.035em}
.hero-intro{border-left:3px solid #61f5d3;padding-left:18px;max-width:590px;font-size:15px;color:#b6d9dc;line-height:1.76}
.hero-actions{margin-top:26px}
.button{border-radius:22px;padding:12px 21px}
.button-primary{color:#063333;background:linear-gradient(115deg,#77ffe0,#55dbd2)}
.button-primary:hover{background:#a8fff0}
.button-subtle{border-color:#54d9cc99;background:#0b4c5a55;color:#d5faf7}
.button-subtle:hover{background:#12576b}
.hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:29px}
.hero-tags span{font-size:10px;letter-spacing:.02em;border:1px solid #50dac782;border-radius:30px;padding:8px 12px;color:#d2f3f1;background:linear-gradient(145deg,#165e615c,#0b3b4b3c)}
.hero-mascot{height:440px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate}
.hero-aura{position:absolute;inset:12% 10%;background:radial-gradient(ellipse,#08ffba50 0%,#009dbd31 36%,transparent 72%);filter:blur(30px);z-index:-1}
.aura-ring{position:absolute;aspect-ratio:1;border-radius:50%;inset:auto;z-index:-1;opacity:.6}
.aura-ring-one{width:min(83%,380px);border:3px solid #30e9d0a0;box-shadow:0 0 30px #42ffc63f;transform:rotate(-23deg)}
.aura-ring-two{width:min(95%,460px);border:1px dashed #34d8c15a;transform:rotate(17deg)}
.hero-mascot img{width:min(100%,480px);height:auto;max-height:100%;object-fit:contain;border-radius:15px;filter:drop-shadow(0 10px 33px #04baba30);-webkit-mask-image:radial-gradient(ellipse 70% 75% at center,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 70% 75% at center,#000 60%,transparent 100%)}
.spark{position:absolute;font-size:29px;color:#adffe6;text-shadow:0 0 20px #46ffda}
.spark-one{top:10%;left:11%}.spark-two{right:10%;bottom:20%}
.hero-mascot-note{position:absolute;right:1px;bottom:2px;letter-spacing:.2em;font-size:8px;color:#78b8c0;font-weight:700}
.signal-strip{background:linear-gradient(95deg,#063443bb,#074e5261,#053441b0);border-block:1px solid #218c93a3;padding-block:18px}
.signal-strip .signal-icon{color:#64f4cf}
.signal-strip strong{color:#e0fbf7}
.signal-strip div>span:last-child{color:#8cbdc4}
.games-section{padding-top:67px}
.section-topline{border-color:#2c70806b;color:#8bc4c9}
.section-topline>span:last-child{color:#8ac7c7}
.section-topline>span:last-child span{color:#70f7d3}
.section-heading{margin-top:42px;margin-bottom:28px}
.section-heading h2,.about-section h2,.connect-section h2{font-style:italic}
.section-heading p:not(.kicker){color:#aed0d2}
.kicker{color:#7cead3}
.catalog-count{border-color:#4acfc6a8;color:#93fadd;border-radius:20px}
.filter.active{background:linear-gradient(140deg,#0b5f68,#0c4558);border-color:#53ceba;color:#edfffb;box-shadow:0 0 16px #2bdca725}
.filter:hover{color:#92ffdd}
.search-field{background:#092f3b;border-color:#2a6871}
.search-symbol{color:#6dcab9}
.search-field input::placeholder{color:#8bb2ba}
.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.game-card{background:linear-gradient(180deg,#0e3442,#082532 48%,#061d2b);border-color:#22717b;border-radius:17px;box-shadow:0 8px 33px #0005;display:flex;flex-direction:column}
.game-card:hover{border-color:#68e5ce;box-shadow:0 0 25px #43eccc36,0 22px 45px #0006;transform:translateY(-5px)}
.game-cover{height:clamp(260px,30vw,430px);position:relative;display:flex;align-items:stretch;justify-content:center;background:radial-gradient(circle at 50% 35%,#124a56,#031721);overflow:hidden;border-bottom:1px solid #387f85}
.game-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0319234d 0%,transparent 22%);pointer-events:none}
.cover-image{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s,filter .5s;filter:saturate(.96)}
.game-card:hover .cover-image{transform:scale(1.025);filter:saturate(1.07)}
.cover-release-pill{position:absolute;z-index:2;right:15px;top:15px;background:#032f3fd9;border:1px solid #5ce6ceb3;backdrop-filter:blur(8px);color:#b5ffec;padding:6px 10px;border-radius:9px;font-size:10px;letter-spacing:.12em;font-weight:800}
.game-content{display:flex;flex-direction:column;flex:1;padding:21px 23px 24px}
.game-category{color:#7fe9d0;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;gap:10px}
.game-id{color:#6da8b6}
.game-content h3{font-size:clamp(22px,2.1vw,27px);min-height:0;line-height:1.16;margin:13px 0 10px;color:#f1fffe;letter-spacing:-.055em}
.game-description{color:#9fced4;min-height:0;font-size:12px;line-height:1.6;margin:0 0 17px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.game-status{display:flex;align-items:center;gap:8px;color:#79dcbf;font-size:11px;margin-top:auto;padding-bottom:17px}
.status-light{height:7px;width:7px;border-radius:50%;background:#66eabe;box-shadow:0 0 12px #5dfbd1}
.platform-list{margin-top:0;gap:8px}
.platform-row{background:linear-gradient(125deg,#0c4350,#0b3642);border-color:#317c81;border-radius:10px;padding:10px 13px}
.platform-row:hover{border-color:#63d4c4}
.platform-name .os-icon{color:#7fffe0}
.platform-version{color:#a6cbd0}
.platform-button{background:#62efcf;border-color:#62efcf;border-radius:7px;color:#073438;padding:9px 12px}
.platform-button:hover{background:#a1ffe4}
.platform-row.unavailable{background:#0b2a36;border-color:#255767}
.platform-unavailable{color:#a5bfc5}
.details-link{border-top:1px solid #286472;color:#bae1df;padding-top:18px;margin-top:18px}
.details-link:hover{color:#71ffda}
.library-note{color:#93bdc4}
.about-section{background:linear-gradient(135deg,#0a4958,#0c5960 48%,#0b4054);color:#ebfffc;border-top:1px solid #2ea7a5b0;border-bottom:1px solid #2ea7a5b0}
.about-section .section-topline{border-color:#68c6c67a;color:#c3e3e3}
.about-section .kicker,.about-section h2 em{color:#8bffdb}
.about-identity>p:not(.kicker),.about-points p{color:#b4d3d5}
.about-points,.about-points article{border-color:#63b0b36c}
.about-points article>span{color:#7ff6d6}
.text-link{border-color:#75f2d0}
.connect-card{background:linear-gradient(170deg,#0c3441,#082431);border-color:#2d7981}
.connect-icon{background:#0c5b5c;border-color:#54bcb4;color:#91ffdc}
.status-pill{border-color:#4b898e;color:#abd1d0}
.connect-card p{color:#a5cbd0}
.connect-card a,.inactive-link{border-color:#326c76}
.connect-card-accent{background:linear-gradient(130deg,#0f877f,#067578);color:#eefffd;border-color:#66e7ca;box-shadow:inset 0 0 35px #48ffbe1b}
.connect-card-accent .connect-icon{background:#096c73;color:#adffdc;border-color:#85e4ca}
.connect-card-accent .light-pill{border-color:#85e4ca;color:#c8fcf0}
.connect-card-accent p{color:#d0e8e8}
.connect-card-accent a{border-color:#81d9c5}
.connect-card-accent a:hover{color:#9cffe4}
.footer{border-color:#207c8266;background:#041c29}
.footer .brand-type{font-size:24px}
.game-dialog{background:#082733;border-color:#6bd3c6}
.dialog-fact,.detail-fact{background:#0c3644;border-color:#2c7580}
.detail-actions a:first-child{background:#75ebd0;color:#0b323b}
@media(min-width:1350px){.game-cover{height:415px}}
@media(max-width:1100px){.site-nav{gap:10px}.hero{grid-template-columns:1fr 1fr}.hero-mascot{height:390px}.game-grid{gap:14px}.game-content{padding:17px}.game-cover{height:340px}}
@media(max-width:800px){.topbar{height:75px}.site-nav a{padding:8px}.hero{grid-template-columns:1fr;padding-top:43px}.hero-mascot{height:380px;max-width:610px;width:100%;margin:auto}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-cover{height:350px}}
@media(max-width:560px){.brand-avatar{width:45px;height:45px}.brand-type{font-size:22px}.brand-type small{font-size:7px}.site-nav{gap:1px}.site-nav a{font-size:10px;padding:7px 5px}.site-nav .nav-home{padding:7px 8px}.nav-home span{display:none}.hero{padding-top:32px;gap:5px}.hero h1{font-size:clamp(44px,11vw,58px)}.hero-tagline{font-size:18px}.hero-mascot{height:290px}.hero-tags{gap:7px}.hero-tags span{font-size:9px;padding:7px 10px}.game-grid{grid-template-columns:1fr;gap:22px}.game-cover{height:380px}.game-content h3{font-size:24px}.about-section{padding-top:65px}.footer{padding-bottom:32px}}

/* ===== NOVEMBER 01: STREAMLINED SITE + FULL-BLEED MASCOT =====
   Replaces boxed art, numerical chapter labels, and avatar-style brand.
   Keeps the game cards and release controls unchanged.
*/
.topbar{gap:18px;padding:0 clamp(22px,4.8vw,80px);border-bottom:1px solid #4ee8d087}
.brand{position:relative;gap:6px;min-width:265px;align-self:stretch;align-items:center}
.brand-mark{display:block;position:relative;flex:0 0 94px;width:94px;height:79px;overflow:hidden;isolation:isolate}
.brand-mark img{position:absolute;display:block;top:0;left:50%;width:145px;height:145px;max-width:none;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 1px 3px #a3ffe388);-webkit-mask-image:radial-gradient(ellipse 53% 42% at 50% 33%,#000 67%,transparent 100%);mask-image:radial-gradient(ellipse 53% 42% at 50% 33%,#000 67%,transparent 100%)}
.brand-mark:after{content:"";position:absolute;bottom:4px;left:2px;right:1px;height:16px;transform:rotate(-8deg);border-bottom:3px solid #51f5ce;border-radius:0 0 75% 75%;box-shadow:0 5px 12px #24e9bd80}
.brand-wordmark{display:flex;flex-direction:column;align-items:flex-start;position:relative;font-family:'Space Grotesk',sans-serif;line-height:1;transform:skewX(-9deg)}
.brand-wordmark strong{font-size:33px;font-weight:700;letter-spacing:-.07em;font-style:italic;color:#f5ffff;text-shadow:0 2px 8px #0ccba550}
.brand-wordmark strong span{color:#72ffe1}
.brand-wordmark small{font-family:'DM Sans',sans-serif;font-size:8px;font-style:normal;letter-spacing:.5em;font-weight:800;margin-left:9px;margin-top:8px;color:#bcf5e8}
.brand-wordmark:after{content:"";position:absolute;bottom:-9px;left:-4px;width:100%;height:2px;background:linear-gradient(90deg,transparent,#5eebc5 25%,#9cffe8 67%,transparent);box-shadow:0 0 11px #3effd6b8}
.site-nav{gap:clamp(11px,2.3vw,32px)}
.site-nav a{font-size:13px;padding:8px 13px}
.hero{position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;min-height:525px;gap:0;padding:54px clamp(22px,5vw,86px) 64px;background:
radial-gradient(ellipse 68% 90% at 88% 37%,#0b726d55,transparent 80%),
linear-gradient(111deg,#031e2d 0%,#052b3a 53%,#073f45 100%);border-bottom:1px solid #0e7777}
.hero:before{position:absolute;z-index:0;inset:0;content:"";pointer-events:none;background:linear-gradient(90deg,#041d2bfa 0%,#052737f4 26%,#06313f88 48%,transparent 76%),linear-gradient(0deg,#04242b9e 0%,transparent 32%)}
.hero:after{position:absolute;inset:auto -5% -67px -5%;content:"";height:165px;pointer-events:none;background:radial-gradient(ellipse at 65% 0%,#3bf4bf3b,transparent 65%);z-index:1}
.hero-copy{position:relative;z-index:2;width:min(61%,760px);max-width:760px;margin-top:0}
.hero h1{font-size:clamp(48px,5.8vw,86px);line-height:1.04;letter-spacing:-.078em;margin-bottom:8px}
.hero-tagline{font-size:clamp(17px,1.85vw,25px);line-height:1.35;margin:13px 0 24px}
.hero-intro{max-width:615px;color:#c1e3e3;font-size:15px;line-height:1.8;letter-spacing:0}
.hero-actions{margin-top:26px}
.hero-tags{margin-top:26px}
.hero-mascot{position:absolute;z-index:0;top:0;bottom:0;right:-1%;width:66%;height:auto;max-width:none;overflow:hidden;pointer-events:none;display:block;isolation:auto}
.hero-mascot img{position:absolute;top:-190px;right:-20px;width:min(61vw,910px);height:auto;max-width:none;max-height:none;border:0;border-radius:0;object-fit:unset;filter:saturate(1.10) drop-shadow(0 15px 40px #14abac42);-webkit-mask-image:radial-gradient(ellipse 70% 66% at 52% 35%,#000 51%,#000b 65%,transparent 91%);mask-image:radial-gradient(ellipse 70% 66% at 52% 35%,#000 51%,#000b 65%,transparent 91%)}
.games-section{padding-top:58px}
.section-heading{margin-top:0}
.section-heading .kicker{font-weight:800;font-size:13px;color:#80fbdc}
.section-heading h2{font-style:italic}
.about-section .about-identity>.kicker{margin-top:0}
.about-points article{grid-template-columns:36px 1fr;gap:16px}
.about-points .point-icon{color:#85f8d9;font-size:22px;font-weight:400;line-height:1.2}
.connect-section h2{margin-top:0}
@media(min-width:1450px){
  .hero{min-height:535px}
  .hero-mascot img{top:-220px;right:-5px;width:930px}
}
@media(max-width:1100px){
  .brand{min-width:224px}
  .brand-mark{flex-basis:68px;width:68px;height:65px}
  .brand-mark img{width:118px;height:118px}
  .brand-wordmark strong{font-size:27px}
  .site-nav{gap:4px}
  .site-nav a{font-size:12px;padding:7px 8px}
  .hero{min-height:485px}
  .hero-copy{width:61%}
  .hero-mascot{width:69%}
  .hero-mascot img{top:-85px;right:-70px;width:740px}
}
@media(max-width:800px){
  .topbar{height:74px}
  .hero{display:flex;min-height:540px;padding-top:48px;padding-bottom:56px}
  .hero-copy{width:min(94%,670px)}
  .hero-mascot{width:85%;opacity:.46;right:-25%}
  .hero-mascot img{top:-50px;right:-15px;width:750px}
  .hero:before{background:linear-gradient(90deg,#031e2cf9,#052d3ce8 55%,#073d4e9c)}
  .site-nav{margin-left:auto}
  .header-action{display:none}
}
@media(max-width:560px){
  .topbar{padding-inline:16px;gap:8px}
  .brand{min-width:auto;gap:2px}
  .brand-mark{flex-basis:48px;width:48px;height:53px}
  .brand-mark img{width:100px;height:100px;top:0}
  .brand-mark:after{height:10px;bottom:2px}
  .brand-wordmark strong{font-size:22px}
  .brand-wordmark small{font-size:6px;letter-spacing:.35em;margin-left:5px;margin-top:5px}
  .site-nav{gap:1px}
  .site-nav a{font-size:11px;padding:6px 7px}
  .hero{min-height:555px;padding-top:48px;padding-bottom:48px}
  .hero-copy{width:100%}
  .hero h1{font-size:clamp(40px,11vw,57px)}
  .hero-intro{font-size:14px;line-height:1.7}
  .hero-mascot{right:-35%;width:105%;opacity:.33}
  .hero-mascot img{width:620px;top:10px;right:-15px}
  .hero:before{background:linear-gradient(90deg,#041e2bed 0%,#052e3ce6 66%,#062b3cb8 100%)}
  .games-section{padding-top:45px}
}

/* Hide the wordmark baked into the square illustration so the hero is fox-only. */
.hero-mascot img{clip-path:inset(0 0 39% 0)}

/* ===== LAYERED ASSET SKIN (separate transparent mascot, lockup, waves) ===== */
.topbar .brand {min-width:0;align-self:center;height:auto;display:flex;align-items:center;transform:none}
.brand-lockup {display:block;width:clamp(210px,19vw,295px);height:auto;max-height:83px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(10,242,207,.16))}
.brand-lockup:hover {filter:drop-shadow(0 0 14px rgba(69,255,221,.48))}
.hero {background:linear-gradient(105deg,#041d2d 0%,#052f3f 52%,#0a3d4b 100%);min-height:540px;overflow:hidden}
.hero:before {z-index:1;background:linear-gradient(90deg,rgba(2,22,35,.98) 0%,rgba(4,30,45,.91) 30%,rgba(4,36,48,.57) 49%,rgba(4,40,52,0) 72%)}
.hero-wave-art {position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url("assets/ps4rt-waves.webp");background-repeat:no-repeat;background-size:cover;background-position:center 52%;opacity:.67;filter:saturate(1.2);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 100%)}
.hero-mascot {z-index:1;position:absolute;top:0;right:-1%;bottom:0;width:58%;height:100%;max-width:none;pointer-events:none;opacity:1}
.hero-mascot img {position:absolute;top:auto;right:clamp(0px,4vw,70px);bottom:-25px;width:clamp(465px,43vw,680px);height:auto;max-width:none;max-height:none;border:0;border-radius:0;clip-path:none;object-fit:contain;filter:drop-shadow(0 0 26px rgba(56,249,210,.2));-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 83%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 83%,transparent 100%)}
.hero-copy {z-index:3;width:min(60%,760px)}
.hero h1, .hero-tagline {position:relative;z-index:3}
.games-section {position:relative;isolation:isolate;overflow:hidden}
.library-wave-art {position:absolute;pointer-events:none;z-index:-1;left:-6%;right:-6%;bottom:-175px;height:620px;background-image:url("assets/ps4rt-waves.webp");background-size:100% auto;background-repeat:no-repeat;background-position:center bottom;opacity:.29;filter:saturate(1.05);transform:scaleX(-1)}
.games-section .section-heading,.games-section .library-controls,.games-section .game-grid,.games-section .library-note {position:relative;z-index:1}
@media(min-width:1450px) {
  .hero {min-height:555px}
  .hero-mascot img {width:680px;right:clamp(0px,3vw,55px);bottom:-40px}
}
@media(max-width:1100px) {
  .brand-lockup {width:225px;max-height:70px}
  .hero {min-height:500px}
  .hero-copy {width:63%}
  .hero-mascot {width:62%;right:-3%}
  .hero-mascot img {width:clamp(465px,50vw,600px);right:-20px;bottom:-35px}
}
@media(max-width:800px) {
  .brand-lockup {width:210px;max-height:66px}
  .hero {min-height:525px}
  .hero-copy {width:min(94%,680px)}
  .hero-wave-art {opacity:.46;background-position:60% center}
  .hero-mascot {width:83%;right:-22%;opacity:.4}
  .hero-mascot img {width:590px;right:-30px;bottom:-45px}
  .hero:before {background:linear-gradient(90deg,rgba(3,23,36,.98) 0%,rgba(4,28,44,.91) 58%,rgba(4,30,46,.35) 100%)}
  .library-wave-art {opacity:.23;background-size:auto 100%;height:490px}
}
@media(max-width:560px) {
  .topbar .brand {min-width:0}
  .brand-lockup {width:148px;max-height:54px}
  .hero {min-height:530px;padding-top:40px}
  .hero-copy {width:100%}
  .hero-wave-art {opacity:.4;background-position:67% center}
  .hero-mascot {width:105%;right:-44%;opacity:.29}
  .hero-mascot img {width:510px;right:0;bottom:-24px}
  .hero:before {background:linear-gradient(90deg,rgba(3,24,37,.95) 0%,rgba(4,28,43,.81) 78%,rgba(4,30,46,.47) 100%)}
  .library-wave-art {opacity:.16}
}

/* ===== UNIFIED SITE CANVAS — one visual environment across sections =====
   The atmospheric effects belong to the PAGE, not to individual panels.
   Wave 1 crosses the hero/library boundary; wave 2 continues into lower content.
   All content remains HTML, accessible, and independently responsive. */
body {background:#031a27}
body::before {display:none}
.site-shell {
  width:100%;
  max-width:none;
  position:relative;
  overflow:clip;
  background:
    radial-gradient(ellipse 65% 20% at 85% 11%,rgba(10,159,164,.22),transparent 90%),
    radial-gradient(ellipse 70% 23% at 12% 39%,rgba(9,119,146,.15),transparent 88%),
    radial-gradient(ellipse 65% 28% at 85% 72%,rgba(13,118,120,.18),transparent 90%),
    linear-gradient(180deg,#041d2c 0%,#07323e 27%,#052934 56%,#073542 78%,#031d2c 100%);
}
main {
  position:relative;
  isolation:isolate;
  background:transparent;
}
main::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    url("assets/ps4rt-waves.webp"),
    url("assets/ps4rt-waves.webp");
  background-repeat:no-repeat,no-repeat;
  background-size:min(2050px,116vw) auto,min(1900px,112vw) auto;
  background-position:center 275px,center 1430px;
  opacity:.39;
  filter:saturate(1.25);
}
main::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 43% 12% at 74% 17%,rgba(41,224,197,.14),transparent 90%),
    radial-gradient(ellipse 65% 13% at 20% 34%,rgba(24,163,189,.11),transparent 90%),
    radial-gradient(ellipse 58% 18% at 75% 67%,rgba(22,178,159,.10),transparent 90%);
}
main>section {position:relative;z-index:1}
.topbar {
  background:linear-gradient(180deg,rgba(3,30,43,.72),rgba(3,30,43,.18));
  border-bottom:1px solid rgba(95,231,216,.25);
  box-shadow:none;
}
.hero {
  background:transparent;
  border-bottom:0;
  min-height:525px;
  padding-bottom:50px;
}
.hero::before {
  z-index:1;
  background:linear-gradient(90deg,
    rgba(3,24,37,.96) 0%,
    rgba(3,27,41,.85) 28%,
    rgba(4,34,45,.52) 47%,
    rgba(4,37,46,.13) 67%,
    transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 100%);
}
.hero::after {
  z-index:1;
  height:150px;
  bottom:-78px;
  background:radial-gradient(ellipse at 65% 45%,rgba(63,233,205,.21),transparent 70%);
}
.hero-wave-art,.library-wave-art {display:none}
.hero-mascot {z-index:2}
.hero-copy {z-index:3}
.games-section {
  background:transparent;
  border:0;
  padding-top:35px;
  overflow:visible;
}
.games-section .section-heading,
.games-section .library-controls,
.games-section .game-grid,
.games-section .library-note {position:relative;z-index:2}
.section-heading {margin:10px 0 28px}
.about-section {
  background:
    radial-gradient(ellipse 70% 94% at 25% 50%,rgba(17,116,120,.17),transparent 87%);
  border:0;
  color:#eafffb;
}
.connect-section {background:transparent;border:0}
.connect-card:not(.connect-card-accent) {
  background:linear-gradient(160deg,rgba(11,52,65,.86),rgba(6,35,50,.78));
  backdrop-filter:blur(7px);
}
.footer {background:rgba(2,23,34,.26);border-top-color:rgba(67,197,187,.21)}
@media(min-width:1700px) {
  .topbar,.hero,.games-section,.about-section,.connect-section,.footer {
    padding-left:max(5vw,calc((100vw - 1640px)/2 + 56px));
    padding-right:max(5vw,calc((100vw - 1640px)/2 + 56px));
  }
}
@media(max-width:1100px) {
  main::before {
    background-position:center 280px,center 1330px;
    background-size:125% auto,125% auto;
    opacity:.34;
  }
  .hero {min-height:495px}
}
@media(max-width:800px) {
  main::before {
    background-position:60% 275px,center 1150px;
    background-size:auto 570px,auto 600px;
    opacity:.28;
  }
  .hero {min-height:535px}
  .hero::before {
    background:linear-gradient(90deg,rgba(3,23,36,.94),rgba(4,28,43,.71) 74%,rgba(4,30,46,.36));
  }
}
@media(max-width:560px) {
  main::before {
    background-position:66% 320px,58% 1080px;
    background-size:auto 445px,auto 445px;
    opacity:.23;
  }
  .hero {min-height:530px}
  .games-section {padding-top:25px}
  .hero::before {
    background:linear-gradient(90deg,rgba(3,22,35,.94),rgba(3,27,41,.82) 80%,rgba(4,30,46,.54));
  }
}

/* ===== NEON CATALOG CONTROLS / PORTRAIT FRAME =====
   Desktop cards pair a true portrait crop with links on the right.
   The source retailer images contain white margins; a narrow overflow-hidden
   cover frame crops those away without making a fake white card. */
.game-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:20px;
  row-gap:22px;
  align-items:stretch;
}
.game-card {
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1fr);
  gap:0;
  min-width:0;
  min-height:395px;
  padding:5px;
  overflow:hidden;
  border:1.5px solid rgba(95,244,219,.85);
  border-radius:20px;
  background:linear-gradient(138deg,rgba(22,91,95,.85),rgba(4,32,45,.93) 50%,rgba(9,66,78,.86));
  box-shadow:inset 0 0 0 1px rgba(65,209,194,.15),0 0 13px rgba(48,239,212,.18),0 15px 36px rgba(0,13,22,.3);
  transition:transform .23s ease,border-color .23s ease,box-shadow .23s ease;
}
.game-card:hover {
  transform:translateY(-4px);
  border-color:#afffe9;
  box-shadow:inset 0 0 0 1px rgba(146,255,224,.45),0 0 22px rgba(45,246,214,.43),0 21px 40px rgba(0,13,22,.42);
}
.game-cover {
  display:block;
  position:relative;
  min-width:0;
  height:100%;
  min-height:385px;
  max-height:none;
  padding:0;
  margin:0;
  overflow:hidden;
  background:#061f2f;
  border:1px solid rgba(155,254,237,.75);
  border-radius:15px;
  box-shadow:0 0 13px rgba(35,245,210,.14);
}
.game-cover::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(168,255,237,.3),inset 0 -25px 22px rgba(0,28,40,.1);
  background:none;
}
.game-cover .cover-image {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:50% 50%;
  transform:scale(1.05);
  filter:saturate(1.02);
  transition:transform .35s ease,filter .35s ease;
}
.game-card:hover .cover-image {transform:scale(1.085);filter:saturate(1.12)}
.game-content {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:19px 15px 13px 20px;
}
.game-category {
  font-size:10px;
  color:#7febd3;
  letter-spacing:.07em;
  line-height:1.35;
  margin:0 0 8px;
}
.game-content h3 {
  font-size:clamp(20px,1.65vw,27px);
  line-height:1.12;
  margin:0 0 11px;
  letter-spacing:-.048em;
  min-height:0;
  font-style:italic;
}
.game-description {
  font-size:12px;
  line-height:1.55;
  color:#c5e0e3;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0 0 13px;
}
.game-status {
  margin:auto 0 13px;
  padding:0;
  font-weight:700;
  color:#8ff3d7;
  font-size:10px;
  letter-spacing:.005em;
}
.status-light {height:6px;width:6px;background:#7affd4}
.platform-list {display:flex;flex-direction:column;gap:9px;margin:0}
.platform-row {
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-width:0;
  min-height:51px;
  padding:8px 9px;
  border:1px solid #69deca;
  border-radius:10px;
  background:linear-gradient(145deg,rgba(37,131,135,.43),rgba(11,69,82,.73) 72%,rgba(21,100,107,.48));
  box-shadow:inset 0 1px 0 rgba(176,255,246,.14),inset 0 -2px 9px rgba(19,181,173,.15),0 0 8px rgba(50,235,212,.18);
  color:#f2fffc;
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
a.platform-row-link:hover,
a.platform-row-link:focus-visible {
  transform:translateX(2px);
  border-color:#b6fff0;
  background:linear-gradient(145deg,rgba(63,171,166,.65),rgba(17,94,104,.85));
  box-shadow:inset 0 1px 0 rgba(197,255,244,.24),0 0 18px rgba(77,255,225,.43);
}
.platform-icon {display:block;width:25px;height:25px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(87,255,215,.23))}
.platform-label {display:block;flex:1;min-width:0;font-weight:800;font-size:12px;line-height:1.16;letter-spacing:-.015em}
.platform-label small {display:block;font-size:9px;font-weight:500;color:#b2e3e0;margin-top:3px;line-height:1.1}
.platform-arrow {display:block;flex-shrink:0;margin-left:auto;font-size:18px;line-height:1;color:#caffee;font-weight:800;text-shadow:0 0 8px rgba(142,255,228,.65)}
.platform-row-pending {
  background:linear-gradient(120deg,rgba(14,68,80,.66),rgba(7,44,60,.65));
  border-color:rgba(67,144,153,.9);
  color:#d5eeee;
  box-shadow:inset 0 1px rgba(110,197,196,.08);
}
.platform-row-pending .platform-icon {opacity:.7;filter:none}
.platform-row-pending .platform-label small {color:#8dbac2}
.platform-pending-text {flex-shrink:0;font-size:9px;font-weight:600;color:#94bdc1;max-width:65px;text-align:right;line-height:1.15}
.details-link {
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:47px;
  text-align:left;
  border:1px solid #69deca;
  border-radius:10px;
  padding:8px 10px;
  margin:9px 0 0;
  background:linear-gradient(145deg,rgba(35,117,126,.46),rgba(9,67,80,.69));
  box-shadow:inset 0 1px 0 rgba(176,255,246,.12),0 0 9px rgba(50,235,212,.15);
  font-size:12px;
  font-weight:800;
  color:#f0fffb;
  transition:border-color .18s,box-shadow .18s,transform .18s,background .18s;
  cursor:pointer;
}
.details-link:hover,.details-link:focus-visible {
  color:white;
  background:linear-gradient(145deg,rgba(51,161,160,.57),rgba(12,88,100,.85));
  border-color:#b9fff2;
  box-shadow:0 0 18px rgba(77,255,225,.42);
  transform:translateX(2px);
}
.details-link .docs-icon {width:23px;height:23px;flex-shrink:0;color:#c7fff0}
.library-controls .filter {
  border:1px solid rgba(73,169,173,.5);
  border-radius:10px;
  padding:9px 15px;
  background:rgba(6,48,65,.49);
  color:#b7e0df;
}
.library-controls .filter:hover {border-color:#70e6d2;box-shadow:0 0 11px rgba(78,234,207,.2);color:white}
.library-controls .filter.active {
  color:#eafffa;
  border:1px solid #80ffdf;
  background:linear-gradient(125deg,rgba(15,114,121,.86),rgba(7,75,94,.75));
  box-shadow:inset 0 0 9px rgba(133,255,233,.13),0 0 15px rgba(83,248,223,.26);
}
.search-field {border:1px solid rgba(100,214,207,.7);box-shadow:0 0 7px rgba(34,234,214,.11);border-radius:10px}
.search-field:focus-within {border-color:#97ffe4;box-shadow:0 0 16px rgba(80,254,221,.32)}
.hero-actions .button {box-shadow:0 0 12px rgba(50,241,219,.19)}
.hero-actions .button:hover {box-shadow:0 0 22px rgba(59,244,221,.39)}
@media(max-width:1440px) {
  .game-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}
  .game-card {min-height:386px;grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
  .game-cover {min-height:376px}
  .game-content h3 {font-size:clamp(21px,2.2vw,28px)}
  .game-content {padding:20px 18px}
}
@media(max-width:900px) {
  .game-grid {grid-template-columns:1fr;max-width:690px;margin-inline:auto}
  .game-card {grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
  .game-cover {min-height:360px}
}
@media(max-width:560px) {
  .game-grid {grid-template-columns:1fr;gap:17px}
  .game-card {grid-template-columns: minmax(0,.73fr) minmax(0,1fr);min-height:315px;padding:4px;border-radius:15px}
  .game-cover {min-height:306px;border-radius:11px}
  .game-content {padding:14px 9px 10px 12px}
  .game-category {font-size:8px;margin-bottom:6px}
  .game-content h3 {font-size:clamp(16px,4.4vw,22px);margin-bottom:9px}
  .game-description {font-size:10px;line-height:1.35;-webkit-line-clamp:2;margin-bottom:7px}
  .game-status {font-size:9px;margin:auto 0 9px}
  .platform-list {gap:6px}
  .platform-row {min-height:43px;gap:5px;padding:6px;border-radius:8px}
  .platform-icon {width:20px;height:20px}
  .platform-label {font-size:10px}
  .platform-label small {font-size:8px}
  .platform-arrow {font-size:14px}
  .platform-pending-text {max-width:47px;font-size:8px}
  .details-link {min-height:40px;margin-top:6px;border-radius:8px;padding:6px;font-size:10px;gap:5px}
  .details-link .docs-icon {width:20px;height:20px}
}
@media(max-width:380px) {
  .game-card {grid-template-columns:minmax(0,.66fr) minmax(0,1fr)}
  .game-description {display:none}
  .platform-pending-text {display:none}
}
@media(prefers-reduced-motion:reduce) {
  .game-card,.cover-image,.platform-row,.details-link,.filter {transition:none !important}
}

/* ===== CLEAN LOCAL COVER ASSETS =====
   All three cards reference prepared 480x840 front-art WebPs in assets/covers/.
   Do not zoom the artwork or reconstruct the retailer's white packaging edges. */
.game-cover {background:#052739;border-color:rgba(105,251,219,.8)}
.game-cover .cover-image {
  object-fit:fill;
  object-position:center;
  transform:none;
  filter:none;
}
.game-card:hover .cover-image {transform:none;filter:saturate(1.04)}
.game-cover::after {background:none;box-shadow:inset 0 0 0 1px rgba(125,249,218,.19)}
.game-content {justify-content:flex-start}
@media(max-width:560px) {
  .game-cover .cover-image {object-fit:fill}
}

/* Remote retail-cover backup is used only if a local cleaned WebP is missing.
   Do not stretch square product photos into the tall cover slot. */
.game-cover .cover-image.cover-remote {
  object-fit:cover;
  object-position:center;
  transform:scale(1.1);
}
.game-cover .cover-image.cover-remote[data-game-id="star-ocean"] {
  transform:scale(1.2);
}
.game-cover .cover-image.cover-remote[data-game-id="valkyria-revolution"] {
  transform:scale(1.08);
}
.game-card:hover .cover-image.cover-remote {filter:saturate(1.06)}
.game-cover .cover-image.cover-unavailable {opacity:0}

/* ===== DIRECT COVER ART (NO NESTED FRAME) =====
   Portrait is now a direct grid child of .game-card.
   Natural 4:7 aspect ratio controls its height, so no clipping or stretching.
   The existing outer neon card is the only container/border. */
.game-card {
  align-items:stretch;
  min-height:0;
}
.game-card > img.game-cover-art {
  display:block;
  position:static;
  grid-column:1;
  grid-row:1;
  align-self:start;
  justify-self:stretch;
  width:100%;
  height:auto;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:none;
  aspect-ratio:4 / 7;
  object-fit:contain;
  object-position:center;
  padding:0;
  margin:0;
  border:0;
  border-radius:13px;
  background:transparent;
  box-shadow:none;
  filter:none;
  transform:none;
  opacity:1;
}
.game-card:hover > img.game-cover-art {transform:none;filter:none}
.game-card > .game-content {
  grid-column:2;
  grid-row:1;
  min-width:0;
}
.game-card > img.game-cover-art.cover-remote {
  object-fit:contain;
  transform:none;
}
.game-card:hover > img.game-cover-art.cover-remote {transform:none}
.game-card > img.game-cover-art.cover-unavailable {opacity:0}
@media(max-width:560px) {
  .game-card > img.game-cover-art {border-radius:10px}
}

/* ===== PRESERVE INTACT SOURCE COVER ART =====
   The previous 480x840 cover WebPs were cropped at export; changing the HTML
   container could never restore missing text. Full uncut cover source images
   are square retail photos with varying white margins, so use per-title ratios
   close to each photograph's actual inner box-art area. The outer neon card is
   the only visible frame; no nested wrapper or transformed zooms. */
.game-card {
  align-items:stretch;
  min-height:0;
}
.game-card > img.game-cover-art,
.game-card > img.game-cover-art.cover-remote {
  grid-column:1;
  grid-row:1;
  justify-self:stretch;
  align-self:center;
  display:block;
  position:static;
  width:100%;
  height:auto;
  max-width:100%;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:12px;
  box-shadow:none;
  aspect-ratio:3 / 4;
  object-fit:cover;
  object-position:center;
  transform:none;
  filter:none;
}
.game-card > img.game-cover-art[data-game-id="sakura-wars"] {aspect-ratio:4 / 5}
.game-card > img.game-cover-art[data-game-id="star-ocean"] {aspect-ratio:7 / 10}
.game-card > img.game-cover-art[data-game-id="valkyria-revolution"] {aspect-ratio:3 / 4}
.game-card:hover > img.game-cover-art,
.game-card:hover > img.game-cover-art.cover-remote {transform:none;filter:none}
@media(max-width:560px) {
  .game-card > img.game-cover-art {border-radius:9px}
}

/* ===== USER-SUPPLIED UNCROPPED COVER ART =====
   The three source PNGs already contain the entire rectangular cover.
   Never force a made-up aspect ratio or scale them into a cropped viewport. */
.game-card > img.game-cover-art,
.game-card > img.game-cover-art.cover-remote {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  min-height:0;
  align-self:center;
  justify-self:stretch;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center;
  transform:none;
  filter:none;
  padding:0;
  margin:0;
  border:0;
  border-radius:12px;
  box-shadow:none;
}
.game-card > img.game-cover-art[data-game-id="sakura-wars"],
.game-card > img.game-cover-art[data-game-id="star-ocean"],
.game-card > img.game-cover-art[data-game-id="valkyria-revolution"] {
  aspect-ratio:auto;
}
.game-card:hover > img.game-cover-art,
.game-card:hover > img.game-cover-art.cover-remote {
  transform:none;
  filter:none;
}
@media(max-width:560px) {
  .game-card > img.game-cover-art {border-radius:9px}
}

/* Hero platform badges share the same actual SVG marks as release buttons. */
.hero-tags span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:34px;
}
.hero-platform-icon {
  display:block;
  width:19px;
  height:19px;
  flex:0 0 19px;
  object-fit:contain;
  filter:drop-shadow(0 0 5px rgba(100,255,220,.30));
}
@media(max-width:560px) {
  .hero-tags span {gap:5px}
  .hero-platform-icon {width:17px;height:17px;flex-basis:17px}
}

/* Code Fairy: showcase the cover, but clearly mark both platform builds unavailable. */
.game-card--development .game-status--development {
  color:#d2dee0;
  font-weight:700;
}
.game-card--development .game-status--development .status-light {
  background:#a9b8bf;
  box-shadow:0 0 9px rgba(174,192,199,.32);
}
.game-card--development .platform-row-disabled,
.game-card--development .platform-row-disabled:hover {
  background:linear-gradient(135deg,rgba(61,82,94,.36),rgba(25,45,58,.64));
  border:1px solid rgba(129,151,159,.48);
  box-shadow:inset 0 1px rgba(202,218,221,.055);
  color:#aebcc4;
  transform:none;
  cursor:default;
}
.game-card--development .platform-row-disabled .platform-icon {
  opacity:.48;
  filter:grayscale(1);
}
.game-card--development .platform-row-disabled .platform-label,
.game-card--development .platform-row-disabled .platform-label small,
.game-card--development .platform-row-disabled .platform-pending-text {
  color:#a0b1b8;
}

/* Header navigation: the same outlined teal pill treatment as About PS4RT. */
.topbar .site-nav {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:10px;
  margin:0 auto;
}
.topbar .site-nav .nav-pill,
.topbar .support-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:40px;
  padding:9px 18px;
  border:1px solid rgba(84,217,204,.72);
  border-radius:22px;
  background:rgba(11,76,90,.32);
  color:#d5faf7;
  font-size:12px;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(195,255,243,.06),0 0 11px rgba(58,230,205,.08);
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.topbar .site-nav .nav-pill:hover,
.topbar .site-nav .nav-pill:focus-visible,
.topbar .support-action:hover,
.topbar .support-action:focus-visible {
  background:rgba(18,91,107,.79);
  color:#fff;
  border-color:#96ffe6;
  box-shadow:0 0 18px rgba(62,240,207,.29);
  transform:translateY(-2px);
}
.topbar .site-nav .nav-pill span,
.topbar .support-action span {color:#85ffe0}
.topbar .support-action {
  flex-shrink:0;
  margin:0;
  border-color:rgba(116,245,214,.9);
}
@media(max-width:900px) {
  .topbar .site-nav {gap:6px}
  .topbar .site-nav .nav-pill {padding:9px 12px;font-size:11px}
  .topbar .support-action {padding:9px 12px}
}
@media(max-width:800px) {
  .topbar {
    display:flex;
    flex-wrap:wrap;
    height:auto;
    min-height:74px;
    column-gap:12px;
    row-gap:8px;
    padding-top:9px;
    padding-bottom:10px;
  }
  .topbar .brand {order:1}
  .topbar .support-action {order:2;display:inline-flex;margin-left:auto}
  .topbar .site-nav {
    order:3;
    width:100%;
    flex-basis:100%;
    margin:0;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:thin;
  }
  .topbar .site-nav .nav-pill {flex:1 1 0;min-width:0;padding:9px 7px}
}
@media(max-width:380px) {
  .topbar .site-nav {gap:5px}
  .topbar .site-nav .nav-pill {font-size:10px;padding:8px 5px}
  .topbar .support-action {font-size:11px;padding:8px 11px}
}
@media(prefers-reduced-motion:reduce) {
  .topbar .site-nav .nav-pill,.topbar .support-action {transition:none}
}

/* Full game-story synopses: show the writing instead of clipping it. */
.game-description {
  display:block;
  min-height:0;
  max-height:none;
  overflow:visible;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  -webkit-box-orient:initial;
  color:#c5e0e3;
  font-size:12px;
  line-height:1.58;
  margin:0 0 16px;
}
.game-content {justify-content:flex-start}
.game-status {margin-top:auto;padding-top:12px}
@media(max-width:560px) {
  /* Narrow screens need a stacked card to fit 3-sentence summaries legibly. */
  .game-card {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    min-height:0;
    gap:0;
    padding:8px;
  }
  .game-card > img.game-cover-art {
    grid-column:1;
    grid-row:1;
    width:min(100%,270px);
    justify-self:center;
    align-self:center;
    height:auto;
    max-height:none;
  }
  .game-card > .game-content {
    grid-column:1;
    grid-row:2;
    padding:17px 13px 12px;
  }
  .game-description {
    display:block;
    -webkit-line-clamp:unset;
    line-clamp:unset;
    overflow:visible;
    font-size:12px;
    line-height:1.58;
    margin-bottom:16px;
  }
  .game-status {margin-top:0;padding-top:4px}
}


/* ===== RELEASE CATALOG PAGINATION (6 CARDS PER PAGE) ===== */
.catalog-pagination {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin:32px 0 12px;
  padding:18px 0 5px;
  border-top:1px solid rgba(108,206,203,.32);
}
.catalog-pagination[hidden] {display:none}
.page-summary {color:#a4cbd0;font-size:12px;font-weight:600}
.page-buttons {display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.page-btn {
  min-width:38px;
  min-height:38px;
  padding:8px 12px;
  color:#dbfbf6;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(96,205,201,.57);
  border-radius:9px;
  background:linear-gradient(135deg,rgba(20,90,102,.55),rgba(7,52,68,.7));
  box-shadow:0 0 8px rgba(63,220,203,.09);
  transition:background .17s,border-color .17s,box-shadow .17s;
  cursor:pointer;
}
.page-btn:hover:not(:disabled),.page-btn:focus-visible {
  border-color:#acffe6;
  background:#155b65;
  box-shadow:0 0 15px rgba(82,255,215,.25);
}
.page-btn--active,.page-btn--active:disabled {
  color:#06313a;
  background:linear-gradient(130deg,#88ffe2,#5bdad4);
  border-color:#96ffe7;
  box-shadow:0 0 15px rgba(83,246,216,.35);
  cursor:default;
}
.page-btn:disabled:not(.page-btn--active) {opacity:.42;cursor:not-allowed}
.page-ellipsis {color:#a0c3c5;font-size:14px;padding:0 3px}
@media(max-width:900px) {
  .catalog-pagination {justify-content:center;text-align:center}
  .page-buttons {justify-content:center}
}
@media(max-width:560px) {
  .catalog-pagination {gap:11px}
  .page-btn {min-width:35px;min-height:36px;padding:7px 10px}
}
@media(prefers-reduced-motion:reduce) {.page-btn {transition:none}}

/* ===== WIDE SCREEN: ONE FRAME, FULL-BLEED SKIN =====
   21:9 / 32:9 layouts use the same virtual ~1760px content band for
   the navbar, copy, cards and lower sections. Atmospheric art stays
   edge-to-edge instead of forcing the content to fill a 3440/5120px row.
   This also improves regular high-resolution desktop viewports. */
@media(min-width:1700px) {
  :root {--wide-inset:max(4vw,calc((100vw - 1760px)/2))}
  .site-shell {
    width:100%;
    max-width:none;
    overflow:clip;
    background:
      radial-gradient(ellipse 34% 17% at 91% 8%,rgba(12,145,151,.25),transparent 95%),
      radial-gradient(ellipse 36% 20% at 3% 29%,rgba(5,113,147,.18),transparent 93%),
      radial-gradient(ellipse 42% 27% at 89% 68%,rgba(17,126,138,.17),transparent 94%),
      linear-gradient(180deg,#041d2c 0%,#07323e 27%,#052934 56%,#073542 78%,#031d2c 100%);
  }
  .topbar,.hero,.games-section,.about-section,.connect-section,.footer {
    padding-left:var(--wide-inset);
    padding-right:var(--wide-inset);
  }
  .topbar {
    max-width:none;
    gap:24px;
  }
  .hero {
    min-height:590px;
    padding-top:58px;
    padding-bottom:54px;
  }
  .hero-copy {
    width:min(750px,49%);
    max-width:750px;
    flex:0 1 auto;
  }
  .hero h1 {font-size:clamp(64px,4vw,84px)}
  .hero-tagline {font-size:clamp(21px,1.45vw,25px)}
  .hero-intro {max-width:650px;font-size:15px;line-height:1.76}
  .hero-mascot {
    left:auto;
    right:var(--wide-inset);
    top:0;
    bottom:0;
    width:660px;
    height:100%;
    max-width:none;
    opacity:1;
  }
  .hero-mascot img {
    left:auto;
    right:0;
    top:auto;
    bottom:-42px;
    width:595px;
    max-width:none;
    height:auto;
    clip-path:none;
  }
  /* Recenter the wave art beneath the actual content, not the viewport edges. */
  main::before {
    background-size:min(100vw,4200px) auto,min(100vw,3800px) auto;
    background-position:50% 320px,50% 1640px;
    opacity:.33;
  }
  main::after {
    background:
      radial-gradient(ellipse 25% 11% at 75% 14%,rgba(41,224,197,.14),transparent 95%),
      radial-gradient(ellipse 34% 16% at 20% 39%,rgba(24,163,189,.13),transparent 93%),
      radial-gradient(ellipse 36% 19% at 80% 73%,rgba(22,178,159,.1),transparent 91%);
  }
  .games-section {
    padding-top:46px;
  }
  .game-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:24px;
    row-gap:28px;
  }
  .game-content h3 {font-size:clamp(23px,1.65vw,28px)}
  .game-description {font-size:13px;line-height:1.6}
  .game-card {min-height:0}
  .about-section,.connect-section {padding-top:74px;padding-bottom:85px}
}
/* Layout remains two columns on narrower desktop and stacks on mobile via
   existing breakpoints. Ultra-wide artwork uses a persistent cyan atmosphere
   behind the centered content, not a rectangular background tile. */

/* ===== CURVED HERO -> LIBRARY TRANSITION =====
   The hero no longer cuts its glow at a horizontal edge. The library owns a
   scalable SVG wave, so its curve remains continuous on 16:9, 21:9 and 32:9. */
.hero {
  overflow:visible;
  border-bottom:0;
}
.hero-mascot {
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 79%,rgba(0,0,0,.72) 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 79%,rgba(0,0,0,.72) 88%,transparent 100%);
}
.games-section {
  position:relative;
  z-index:2;
  overflow:visible;
  border-top:0;
}
.games-section .section-wave {
  position:absolute;
  display:block;
  left:0;
  right:0;
  top:-115px;
  width:100%;
  height:200px;
  max-width:none;
  pointer-events:none;
  overflow:visible;
  z-index:1;
}
.games-section .section-heading,
.games-section .library-controls,
.games-section .game-grid,
.games-section .catalog-pagination {
  position:relative;
  z-index:2;
}
@media(max-width:800px) {
  .games-section .section-wave {top:-95px;height:165px}
}
@media(max-width:560px) {
  .games-section .section-wave {top:-78px;height:135px}
  .hero-mascot {
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);
  }
}

/* Aeon logo lockup: keep the supplied transparent asset sharp and uncropped. */
.topbar .brand {flex:0 0 auto;min-width:0;line-height:0}
.topbar .brand-lockup {
  display:block;
  width:clamp(215px,19vw,325px);
  height:auto;
  max-height:76px;
  aspect-ratio:2048 / 682;
  object-fit:contain;
  object-position:left center;
  border:0;
  border-radius:0;
  background:transparent;
  filter:drop-shadow(0 2px 9px rgba(30,235,197,.18));
}
@media(max-width:1100px) {
  .topbar .brand-lockup {width:230px;max-height:70px}
}
@media(max-width:800px) {
  .topbar .brand-lockup {width:210px;max-height:65px}
}
@media(max-width:560px) {
  .topbar .brand-lockup {width:155px;max-height:53px}
}

/* Give the full horizontal lockup room to breathe, rather than letterboxing
   it inside the older 74px-tall header. */
@media(min-width:801px) {
  .topbar {min-height:104px;height:auto;padding-top:4px;padding-bottom:4px}
  .topbar .brand-lockup {
    width:clamp(230px,18vw,300px);
    max-height:none;
    aspect-ratio:auto;
  }
}
@media(max-width:800px) {
  .topbar {min-height:74px;height:auto}
  .topbar .brand-lockup {max-height:none;aspect-ratio:auto}
}

/* Two aligned contributor columns, scoped to the existing card. */
#contributors .contributors-head,
#contributors .contributor-row {
  display:grid;
  grid-template-columns:minmax(130px,35%) minmax(0,1fr);
  column-gap:18px;
  width:100%;
}
#contributors .contributors-head {
  margin-top:18px;
  padding-bottom:10px;
  color:#9ed4d1;
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
#contributors .contributors-list {
  width:100%;
  margin:0;
  padding:0;
}
#contributors .contributor-row {
  padding:14px 0;
  border-top:1px solid rgba(96,192,191,.35);
}
#contributors .contributor-row dt,
#contributors .contributor-row dd {
  min-width:0;
  margin:0;
  font-size:13px;
  line-height:1.55;
  overflow-wrap:break-word;
}
#contributors .contributor-row dd {color:#c1dadd}
#contributors .contributor-row a {
  display:inline;
  width:auto;
  margin:0;
  padding:0;
  border:0;
  color:#e8fffa;
  font-size:13px;
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(137,244,216,.5);
  text-underline-offset:3px;
}
#contributors .contributor-row a:hover,
#contributors .contributor-row a:focus-visible {color:#94ffe1}
@media(max-width:430px) {
  #contributors .contributors-head {display:none}
  #contributors .contributor-row {
    grid-template-columns:minmax(0,1fr);
    row-gap:4px;
  }
  #contributors .contributors-list {margin-top:14px}
}

/* Discord and GitHub icon links: obvious yet compact hover feedback. */
.connect-card a.connect-icon-link {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  flex:0 0 46px;
  width:46px;
  height:46px;
  margin:0;
  padding:0;
  border:0;
  border-radius:10px;
  text-decoration:none;
  cursor:pointer;
}
.connect-card .connect-icon-link .connect-icon {
  transition:transform .23s cubic-bezier(.2,.8,.2,1),
             background-color .23s ease,
             border-color .23s ease,
             color .23s ease,
             box-shadow .23s ease;
}
.connect-card .connect-icon-link:hover .connect-icon,
.connect-card .connect-icon-link:focus-visible .connect-icon {
  background:#24b6aa;
  color:#052d33;
  border-color:#c1ffed;
  box-shadow:0 0 0 4px rgba(117,255,219,.18),
             0 0 24px rgba(71,255,213,.5),
             0 9px 18px rgba(0,12,22,.3);
  transform:translateY(-4px) scale(1.1);
}
.connect-card a.connect-icon-link:focus-visible {
  outline:2px solid #b4ffea;
  outline-offset:4px;
}
@media(prefers-reduced-motion:reduce) {
  .connect-card .connect-icon-link .connect-icon {transition:none}
  .connect-card .connect-icon-link:hover .connect-icon,
  .connect-card .connect-icon-link:focus-visible .connect-icon {transform:none}
}