/* Harbor Arcade 2: original cinematic library surface. Local assets only. */
:root{color-scheme:dark;--ink:#10100f;--panel:#191917;--line:#45443c;--text:#f1eee5;--muted:#b9b7ac;--gold:#d7c395;--gold-hover:#eddfbd;--body:"Segoe UI",Arial,sans-serif;--display:Impact,"Arial Black","Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--ink);color:var(--text);font:16px/1.5 var(--body)}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}svg{display:block}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold-hover);outline-offset:5px}button:disabled{cursor:default}img{max-width:100%}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;white-space:nowrap}.skip-link{position:fixed;left:20px;top:-90px;background:var(--gold);color:var(--ink);padding:14px 20px;z-index:20}.skip-link:focus{top:12px}.site-header{height:82px;position:absolute;top:0;left:0;width:100%;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,88px);border-bottom:1px solid #ffffff26;background:linear-gradient(#10100fbd,#10100f30)}.brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-size:22px;line-height:1;letter-spacing:1.5px}.brand svg{width:34px;height:38px;fill:var(--gold)}.brand-sub{display:block;font-family:var(--body);font-size:10px;letter-spacing:5.4px;font-weight:700;margin-top:5px}.site-header nav{display:flex;gap:36px;align-items:center;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px}.site-header nav a{display:grid;place-items:center;min-height:44px;position:relative}.site-header nav a:hover{color:var(--gold)}.site-header nav .nav-active::after{position:absolute;bottom:-19px;height:2px;background:var(--gold);content:"";left:0;right:0}.site-header .admin-link{padding:0 24px;border:1px solid #d7c39580}.hero{position:relative;isolation:isolate;min-height:740px;height:min(920px,100svh);overflow:hidden;display:flex;align-items:center;background:#181712}.hero-art{z-index:-2;position:absolute;inset:0;background:url('/assets/harbor-hero.png') center/cover no-repeat}.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0c0c0bd4 0%,#10100f8a 34%,#10100f00 75%),linear-gradient(0deg,#10100f 0%,#10100f00 30%,#10100f00 80%,#10100f40 100%)}.hero-content{width:100%;padding:90px clamp(20px,7.4vw,128px) 66px;max-width:1700px;margin:auto}.eyebrow{color:var(--gold);letter-spacing:3px;font-size:11px;font-weight:700;line-height:1.7;margin:0 0 19px}.hero .eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:3px;margin-bottom:32px}.hero .eyebrow span{width:24px;height:1px;background:var(--gold)}.hero-overline{font-size:clamp(11px,1vw,14px);font-weight:700;letter-spacing:4.5px;margin:0 0 8px;color:#e0d7bf}.hero h1{font-family:var(--display);font-size:clamp(68px,9.2vw,144px);line-height:.96;font-weight:900;letter-spacing:-1px;margin:0 0 24px;max-width:900px;text-shadow:0 3px 18px #0005;overflow-wrap:anywhere}.hero-description{font-size:16px;line-height:1.7;max-width:420px;margin:0 0 30px;color:#e1ded4}.hero-actions{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}.action{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:52px;padding:13px 25px;font-weight:750;letter-spacing:1.2px;text-transform:uppercase;font-size:12px;border:1px solid transparent;transition:background .16s,color .16s,border-color .16s}.action-primary{background:var(--gold);color:#151511;border-color:var(--gold);box-shadow:inset 0 0 0 3px #1d1b1425}.action-primary:hover{background:var(--gold-hover);border-color:var(--gold-hover)}.action-primary svg{width:18px;height:18px;fill:currentColor}.action-outline{background:#10100f30;border-color:#aaa3917d;color:var(--text)}.action-outline:hover{border-color:var(--gold);background:#d7c39514}.hero-note{margin:15px 0 0;font-size:11px;color:#cbc5b5;letter-spacing:1px}.hero-bottom{position:absolute;bottom:24px;left:clamp(20px,5vw,88px);right:clamp(20px,5vw,88px);display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:2px;color:var(--muted)}.hero-bottom>a{display:flex;gap:24px;align-items:center;min-height:44px}.hero-bottom>a span{font-size:20px;color:var(--gold)}.section-wrap{max-width:1512px;margin:0 auto;padding-left:clamp(20px,5vw,88px);padding-right:clamp(20px,5vw,88px)}.library{padding-top:74px;padding-bottom:96px;min-height:500px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}.section-heading .eyebrow{margin-bottom:10px}.section-heading h2,.how-inner h2{font:900 clamp(32px,4vw,58px)/1.05 var(--display);letter-spacing:.5px;margin:0;overflow-wrap:anywhere}.library-count{color:var(--muted);font-size:13px;margin:0 0 6px;white-space:nowrap}.library-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--line);padding:30px 0 18px;margin-bottom:30px}.filters{display:flex;gap:10px;flex-wrap:wrap}.filter{border:1px solid transparent;color:var(--muted);min-height:44px;padding:9px 16px;background:transparent;letter-spacing:1.2px;font-size:11px;text-transform:uppercase;font-weight:700}.filter:hover{color:var(--text)}.filter.active{border-color:var(--gold);color:var(--gold);background:#d7c3950d}.search{display:flex;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid #69665b;width:248px;padding:8px 0;flex-shrink:0}.search svg{width:17px;fill:none;stroke:var(--muted);stroke-width:1.5;flex-shrink:0}.search input{border:0;background:transparent;color:var(--text);min-width:0;width:100%;font-size:13px;padding:3px 0}.search input::placeholder{color:var(--muted);opacity:1}.search:focus-within{border-color:var(--gold)}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.game-card{min-width:0;background:var(--panel);border:1px solid #3e3b32;position:relative;transition:border-color .18s}.game-card:hover{border-color:#99845b}.game-art-link{display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(140deg,#423d2d,#24251d);position:relative}.game-art-link img{width:100%;height:100%;object-fit:cover;transition:transform .25s,filter .25s;filter:saturate(.8)}.game-card:hover .game-art-link img{transform:scale(1.025);filter:saturate(1)}.game-art-link::after{position:absolute;inset:0;content:"";background:linear-gradient(0deg,#1919177d,transparent 55%)}.platform-badge{position:absolute;left:18px;top:18px;z-index:1;color:#e2dac6;background:#10100fd4;border:1px solid #b7a47b70;font-size:9px;font-weight:700;letter-spacing:2px;padding:5px 9px}.game-body{padding:22px}.game-meta{color:var(--muted);font-size:10px;letter-spacing:1.5px;margin:0 0 8px;text-transform:uppercase}.game-body h3{font:900 28px/1.2 var(--display);margin:0 0 18px;letter-spacing:.5px;overflow-wrap:anywhere}.game-actions{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid #454238;padding-top:18px}.game-actions .action{min-height:44px;padding:9px 17px;font-size:11px}.details-link{font-size:12px;color:var(--muted);min-height:44px;display:flex;align-items:center;gap:12px}.details-link:hover{color:var(--gold)}.library-message{color:var(--muted);font-size:14px;margin-top:24px}.library-message:empty{display:none}.retry[hidden]{display:none}.how-section{background:linear-gradient(120deg,#201e18,#141411);border-block:1px solid #51493866}.how-inner{padding-top:74px;padding-bottom:74px;display:grid;grid-template-columns:1fr 1fr;gap:60px}.how-copy{color:var(--muted);font-size:14px;line-height:1.7;margin:22px 0 0}.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:29px;align-self:center}.steps li{display:flex;gap:22px;align-items:start}.step-number{font:900 36px/1 var(--display);color:#928160;min-width:44px}.steps h3{font-size:16px;margin:0 0 5px;letter-spacing:.3px}.steps p{font-size:13px;line-height:1.7;margin:0;color:var(--muted)}.site-footer{min-height:132px;display:flex;justify-content:space-between;align-items:center;gap:30px;font-size:11px;color:var(--muted)}.footer-brand{font-size:17px;letter-spacing:1px;gap:5px;white-space:nowrap;color:var(--text)}.footer-brand span{color:var(--gold)}.site-footer>a:last-child{text-decoration:underline;text-underline-offset:4px;min-height:44px;display:flex;align-items:center}
@media(min-width:1600px){.hero-art{background-position:50% 50%}.hero-content{padding-left:128px}}@media(max-width:950px){.hero{min-height:700px}.hero-art{background-position:60% center}.hero::before{background:linear-gradient(90deg,#10100fe0,#10100f55 75%),linear-gradient(0deg,#10100f,transparent 35%)}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.how-inner{gap:30px}.site-footer{flex-wrap:wrap;justify-content:start;padding-block:28px;gap:10px 30px}.site-footer p{margin:0}.site-footer>a:last-child{margin-left:auto}.site-header nav{gap:22px}.hero-content{padding-left:6vw}}
@media(max-width:580px){.site-header{height:72px;padding-inline:20px}.brand{font-size:18px;gap:8px}.brand svg{width:27px;height:31px}.brand-sub{font-size:8px;letter-spacing:4.4px}.site-header nav{gap:20px;font-size:10px;letter-spacing:1px}.site-header nav>a:nth-child(2){display:none}.site-header .admin-link{padding:0 12px}.site-header nav .nav-active::after{bottom:-14px}.hero{min-height:740px;height:90svh;max-height:940px;align-items:end}.hero-art{background-position:69% center}.hero::before{background:linear-gradient(0deg,#10100f 0%,#10100fa8 54%,#10100f00 90%),linear-gradient(90deg,#10100f85,transparent)}.hero-content{padding:160px 24px 120px}.hero .eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:22px}.hero-overline{font-size:10px;letter-spacing:2px}.hero h1{font-size:70px;margin-bottom:20px}.hero-description{font-size:14px;max-width:300px}.hero-actions{gap:10px}.action{padding-inline:18px;letter-spacing:.8px;font-size:11px;gap:12px}.hero-bottom{left:24px;right:24px;bottom:20px;font-size:8px;letter-spacing:1px}.hero-bottom>span{max-width:150px}.hero-bottom>a{gap:10px}.library{padding-block:48px 58px}.section-heading{align-items:start;gap:12px;flex-direction:column}.section-heading h2{font-size:36px}.eyebrow{font-size:10px;letter-spacing:2px}.library-count{margin:0}.library-toolbar{align-items:stretch;flex-direction:column;gap:16px;padding-top:20px}.search{width:100%}.filter{padding-inline:14px}.game-grid{grid-template-columns:minmax(0,1fr);gap:24px}.game-art-link{aspect-ratio:16/10}.game-body{padding:20px}.how-inner{grid-template-columns:1fr;padding-block:50px;gap:36px}.how-inner h2{font-size:40px}.steps{gap:26px}.steps p br,.how-copy br{display:none}.site-footer{display:flex;flex-direction:column;align-items:start;gap:12px}.site-footer>a:last-child{margin-left:0}.site-footer .brand{font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.game-card:hover img{transform:none}}@media(forced-colors:active){.action,.filter,.game-card,.site-header .admin-link{border:1px solid ButtonText}.hero::before{background:Canvas;opacity:.7}a:focus-visible,button:focus-visible,input:focus-visible{outline-color:Highlight}}