@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  color-scheme: dark;
  font-family: "Noto Sans TC", system-ui, sans-serif;
  color: #f8f5eb;
  background: #07101a;
  font-synthesis: none;
  --ink: #07101a;
  --paper: #f8f5eb;
  --muted: rgba(239,244,247,.65);
  --line: rgba(255,255,255,.13);
  --cyan: #61e8d4;
  --gold: #ffc75a;
  --orange: #ff7954;
  --page: min(2560px, calc(100vw - clamp(32px, 6vw, 180px)));
  --radius: clamp(22px, 2.2vw, 46px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 300px; min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 17% 4%, #183d4b 0, transparent 28%), radial-gradient(circle at 87% 17%, #342642 0, transparent 25%), linear-gradient(150deg,#08121d 0%,#07101a 52%,#0b111d 100%); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 78%); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.noise { position:fixed; inset:0; z-index:10; opacity:.045; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.orb { position:fixed; z-index:-1; width:40vw; aspect-ratio:1; border-radius:50%; filter:blur(80px); opacity:.13; pointer-events:none; }
.orb-one { top:20%; left:-18%; background:#28d9cf; }
.orb-two { top:55%; right:-20%; background:#fa8059; }

.site-header { width:var(--page); min-height:clamp(82px,8vw,116px); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand > span:last-child { display:flex; flex-direction:column; line-height:1; }
.brand b { font-family:"Space Grotesk",sans-serif; font-size:clamp(20px,1.35vw,29px); letter-spacing:.06em; }
.brand small { margin-top:5px; color:var(--muted); font-family:"Space Grotesk",sans-serif; font-size:clamp(9px,.48vw,12px); letter-spacing:.28em; }
.brand-symbol { width:42px; height:42px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:7px; border:1px solid var(--line); border-radius:14px; transform:rotate(-7deg); background:rgba(255,255,255,.04); }
.brand-symbol i { align-self:end; border-radius:5px; background:var(--paper); }
.brand-symbol i:nth-child(1) { height:48%; background:var(--cyan); }
.brand-symbol i:nth-child(2) { height:95%; }
.brand-symbol i:nth-child(3) { height:68%; background:var(--orange); }
.header-actions { display:flex; align-items:center; gap:clamp(10px,1.5vw,24px); }
.live-status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:clamp(13px,.52vw + 8px,16px); font-weight:700; }
.live-status i,.availability i { width:8px; height:8px; border-radius:50%; background:#64ef9b; box-shadow:0 0 0 5px rgba(100,239,155,.12),0 0 18px #64ef9b; }
.sound-toggle { min-height:44px; display:flex; align-items:center; gap:9px; padding:8px 14px; color:#f9f6ed; background:rgba(255,255,255,.055); border:1px solid var(--line); border-radius:999px; cursor:pointer; font-size:clamp(13px,.52vw + 8px,16px); font-weight:800; transition:.2s ease; }
.sound-toggle:hover { transform:translateY(-2px); background:rgba(255,255,255,.1); }
.sound-toggle[aria-pressed="true"] { color:#07101a; background:var(--cyan); border-color:var(--cyan); }
.sound-icon { display:grid; place-items:center; width:25px; aspect-ratio:1; border-radius:50%; color:var(--ink); background:var(--paper); font-weight:900; }

main { width:var(--page); margin:auto; }
.hero { min-height:clamp(520px,60vh,980px); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); align-items:center; gap:8vw; padding:clamp(72px,9vh,150px) 0; }
.eyebrow { margin:0 0 20px; color:var(--cyan); font-family:"Space Grotesk",sans-serif; font-size:clamp(12px,.55vw + 7px,16px); font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.eyebrow span { display:inline-grid; place-items:center; min-width:35px; min-height:25px; margin-right:9px; color:var(--ink); background:var(--cyan); border-radius:999px; letter-spacing:0; }
.hero h1 { max-width:1300px; margin:0; font-family:"Space Grotesk","Noto Sans TC",sans-serif; font-size:clamp(62px,8.4vw,196px); line-height:.88; letter-spacing:-.065em; }
.hero h1 em { color:transparent; -webkit-text-stroke:1.5px rgba(248,245,235,.78); font-style:normal; }
.hero-lead { max-width:880px; margin:clamp(28px,4vw,62px) 0 0; color:var(--muted); font-size:clamp(18px,.7vw + 10px,30px); line-height:1.75; }
.hero-side { align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:clamp(28px,4vh,60px); min-width:0; }
.hero-stats { padding:clamp(24px,2.4vw,42px); border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.035); backdrop-filter:blur(20px); }
.hero-stats > div { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); }
.hero-stats strong { font-family:"Space Grotesk",sans-serif; font-size:clamp(32px,3vw,57px); color:var(--gold); }
.hero-stats span { color:var(--muted); font-size:clamp(14px,.55vw + 8px,17px); font-weight:700; }
.hero-stats p { margin:25px 0 0; color:rgba(255,255,255,.46); font-size:clamp(13px,.5vw + 8px,16px); line-height:1.7; }
.scroll-cue { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; min-height:clamp(92px,7vw,126px); padding:clamp(16px,1.5vw,24px) clamp(16px,1.7vw,28px) clamp(16px,1.5vw,24px) clamp(22px,2.3vw,40px); overflow:hidden; color:var(--paper); border:1px solid rgba(97,232,212,.2); border-radius:999px; background:linear-gradient(100deg,rgba(97,232,212,.1),rgba(255,255,255,.025) 58%,rgba(255,199,90,.06)); text-decoration:none; box-shadow:0 18px 50px rgba(0,0,0,.14); transition:transform .25s ease,border-color .25s ease,background .25s ease; }
.scroll-cue::before { content:""; position:absolute; width:44%; aspect-ratio:1; right:-10%; border-radius:50%; background:radial-gradient(circle,rgba(97,232,212,.17),transparent 67%); filter:blur(8px); pointer-events:none; }
.scroll-cue:hover { transform:translateY(5px); border-color:rgba(97,232,212,.52); background:linear-gradient(100deg,rgba(97,232,212,.17),rgba(255,255,255,.04) 58%,rgba(255,199,90,.1)); }
.scroll-cue > span { position:relative; display:flex; flex-direction:column; gap:5px; }
.scroll-cue small { color:var(--cyan); font-family:"Space Grotesk",sans-serif; font-size:clamp(10px,.4vw + 6px,13px); font-weight:700; letter-spacing:.2em; }
.scroll-cue > span strong { font-size:clamp(18px,.75vw + 10px,27px); letter-spacing:.02em; }
.scroll-cue > i { position:relative; width:clamp(62px,5vw,88px); aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:rgba(5,17,27,.55); box-shadow:inset 0 0 0 7px rgba(255,255,255,.025),0 0 35px rgba(97,232,212,.12); font-size:clamp(25px,2vw,38px); font-style:normal; }
.scroll-cue > i::before { content:""; position:absolute; inset:-6px; border:1px dashed rgba(97,232,212,.42); border-radius:50%; animation:orbitSpin 10s linear infinite; }
.scroll-cue b { animation:arrowDrift 1.8s ease-in-out infinite; }

.games-section { padding:clamp(70px,9vw,140px) 0; border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:clamp(34px,4vw,65px); }
.section-heading .eyebrow { margin-bottom:12px; }
.section-heading h2,.next-up h2 { margin:0; font-size:clamp(34px,3.3vw,78px); line-height:1.1; letter-spacing:-.04em; }
.section-heading > p { max-width:490px; margin:0 0 5px; color:var(--muted); font-size:clamp(15px,.55vw + 9px,19px); line-height:1.7; }
.game-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,2.7vw,48px); }
.game-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.045); box-shadow:0 30px 80px rgba(0,0,0,.24); transition:transform .35s cubic-bezier(.2,.75,.25,1),border-color .25s ease; }
.game-card:hover { transform:translateY(-9px); border-color:rgba(255,255,255,.28); }
.card-cover { position:relative; display:block; min-height:clamp(390px,37vw,900px); margin-bottom:-1px; overflow:hidden; color:#fff; text-decoration:none; isolation:isolate; }
.card-cover::after { content:""; position:absolute; z-index:2; right:0; bottom:0; left:0; height:27%; pointer-events:none; background:linear-gradient(180deg,rgba(13,24,37,0),rgba(14,24,37,.56) 50%,#101b29 100%); }
.cover-image,.maze-space,.cover-wash { position:absolute; inset:0; }
.cover-image { background:url('/games/skyforge/assets/skyforge-canyon.png') center/cover; transform:scale(1.03); transition:transform .8s cubic-bezier(.2,.75,.25,1); }
.game-card:hover .cover-image { transform:scale(1.09); }
.cover-wash { z-index:1; background:linear-gradient(180deg,rgba(4,17,26,.14),rgba(5,14,24,.06) 40%,rgba(12,22,34,.38) 75%,rgba(16,27,41,.62) 100%),linear-gradient(110deg,rgba(12,31,46,.25),transparent 60%); }
.cover-topline { position:absolute; z-index:4; top:clamp(18px,2vw,31px); left:clamp(18px,2vw,31px); right:clamp(18px,2vw,31px); display:flex; align-items:center; justify-content:space-between; }
.game-number,.availability { display:inline-flex; align-items:center; gap:9px; min-height:34px; padding:7px 11px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(7,15,24,.36); backdrop-filter:blur(11px); font-family:"Space Grotesk",sans-serif; font-size:clamp(10px,.43vw + 6px,13px); font-weight:700; letter-spacing:.11em; }
.availability { letter-spacing:.04em; }
.availability i { width:6px; height:6px; box-shadow:0 0 11px #64ef9b; }
.cover-title { position:absolute; z-index:4; left:clamp(22px,2.7vw,46px); right:clamp(22px,2.7vw,46px); bottom:clamp(22px,2.7vw,45px); }
.cover-title p { margin:0 0 6px; color:var(--gold); font-size:clamp(14px,.55vw + 8px,18px); font-weight:800; letter-spacing:.08em; }
.cover-title h3 { margin:0; font-size:clamp(38px,4.35vw,96px); line-height:1; letter-spacing:-.055em; text-shadow:0 5px 30px rgba(0,0,0,.35); }
.cover-title > span { display:block; margin-top:11px; color:rgba(255,255,255,.68); font-family:"Space Grotesk",sans-serif; font-size:clamp(11px,.48vw + 6px,14px); font-weight:700; letter-spacing:.22em; }
.sky-art { position:absolute; z-index:2; inset:0; pointer-events:none; }
.bird { position:absolute; top:36%; left:27%; width:clamp(35px,4vw,68px); aspect-ratio:1; border-radius:52% 50% 45% 48%; background:radial-gradient(circle at 67% 30%,#fff 0 8%,transparent 9%),radial-gradient(circle at 66% 31%,#171b1d 0 3%,transparent 4%),linear-gradient(145deg,#ffce54 0 18%,#ed654c 19% 75%,#a93131); box-shadow:0 12px 18px rgba(24,38,46,.24); transform:rotate(18deg); animation:birdFloat 3.4s ease-in-out infinite; }
.bird::before { content:""; position:absolute; width:45%; height:25%; right:-25%; top:40%; clip-path:polygon(0 0,100% 50%,0 100%); background:#ffd45d; }
.bird::after { content:""; position:absolute; width:35%; height:20%; left:10%; top:47%; border-radius:70% 20% 70% 20%; background:#96363b; transform:rotate(28deg); }
.flight-path { position:absolute; top:48%; left:16%; width:42%; height:17%; border-top:3px dotted rgba(255,255,255,.75); border-radius:50%; transform:rotate(-19deg); }
.fortress { position:absolute; right:12%; bottom:24%; width:25%; height:29%; display:flex; align-items:end; justify-content:space-around; filter:drop-shadow(0 22px 16px rgba(0,0,0,.28)); }
.fortress i { width:18%; height:78%; background:linear-gradient(90deg,#6a7981,#a9bbc0 45%,#51636d); border-radius:4px 4px 0 0; box-shadow:0 -11px 0 #475a64; }
.fortress i:nth-child(2) { height:100%; background:linear-gradient(90deg,#9b673e,#d99d60 45%,#74472f); }
.maze-space { overflow:hidden; background:radial-gradient(circle at 50% 44%,#28364a 0,#10151f 43%,#07090d 78%); perspective:900px; }
.maze-glow { position:absolute; inset:13%; border-radius:50%; background:rgba(245,158,11,.18); filter:blur(45px); }
.maze-board { position:absolute; width:70%; aspect-ratio:1; left:15%; top:12%; border:clamp(8px,1vw,15px) solid #a77943; border-radius:7px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 30px),linear-gradient(135deg,#5f4028,#b7814f); box-shadow:inset 0 0 0 3px rgba(255,219,164,.23),0 48px 55px rgba(0,0,0,.55); transform:rotateX(57deg) rotateZ(-28deg); transform-style:preserve-3d; transition:transform .7s cubic-bezier(.2,.75,.25,1); }
.game-card:hover .maze-board { transform:rotateX(54deg) rotateZ(-24deg) translateZ(12px); }
.wall { position:absolute; display:block; height:4.5%; border-radius:3px; background:linear-gradient(#e2b67e,#805430); box-shadow:0 8px 4px rgba(28,14,7,.34); }
.w1{width:48%;left:7%;top:14%}.w2{width:35%;right:7%;top:28%;transform:rotate(90deg)}.w3{width:55%;left:23%;top:43%}.w4{width:42%;left:-4%;top:62%;transform:rotate(90deg)}.w5{width:35%;right:4%;top:70%}.w6{width:28%;left:9%;top:84%}.w7{width:31%;left:28%;top:28%;transform:rotate(90deg)}.w8{width:37%;right:17%;top:83%;transform:rotate(90deg)}
.marble,.goal { position:absolute; width:10%; aspect-ratio:1; border-radius:50%; transform:translateZ(22px); }
.marble { top:12%; left:12%; background:radial-gradient(circle at 32% 27%,#fff,#aab4bf 22%,#303943 65%,#11151b); box-shadow:8px 12px 10px rgba(0,0,0,.45); animation:marbleMove 5s ease-in-out infinite; }
.goal { right:10%; bottom:9%; border:5px solid #61e8d4; box-shadow:0 0 25px #61e8d4,inset 0 0 18px rgba(97,232,212,.55); }
.card-info { position:relative; z-index:1; padding:clamp(24px,2.5vw,43px); background:linear-gradient(180deg,#101b29 0%,#0d1724 100%); }
.card-info > p { min-height:3.7em; margin:0; color:var(--muted); font-size:clamp(16px,.6vw + 9px,24px); line-height:1.78; }
.tag-row { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 28px; }
.tag-row span { padding:7px 11px; color:rgba(255,255,255,.76); border:1px solid var(--line); border-radius:999px; font-size:clamp(12px,.43vw + 7px,15px); font-weight:700; }
.progress-block { min-height:67px; margin-bottom:22px; padding:15px 17px; border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.13); }
.progress-block > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:clamp(12px,.45vw + 7px,15px); }
.progress-block span { color:var(--muted); }
.progress-block strong { color:var(--gold); }
.progress-track { height:5px; margin-top:12px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); }
.progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--orange),var(--gold)); transition:width .8s cubic-bezier(.2,.75,.25,1); }
.difficulty-dots { display:flex; align-items:center; gap:6px; margin-top:12px; }
.difficulty-dots i { flex:1; height:5px; border-radius:999px; background:linear-gradient(90deg,#61e8d4,#ffcb59); opacity:calc(.35 + var(--i, 0) * .1); }
.difficulty-dots i:nth-child(2){--i:1}.difficulty-dots i:nth-child(3){--i:2}.difficulty-dots i:nth-child(4){--i:3}.difficulty-dots i:nth-child(5){--i:4}.difficulty-dots i:nth-child(6){--i:5}
.play-button { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 17px 14px 22px; color:var(--ink); border-radius:18px; background:var(--paper); text-decoration:none; transition:transform .2s ease,background .2s ease; }
.play-button:hover { transform:translateY(-3px); background:var(--gold); }
.play-button span { display:flex; flex-direction:column; font-size:clamp(18px,.7vw + 10px,28px); font-weight:900; }
.play-button small { margin-bottom:3px; color:rgba(7,16,26,.5); font-family:"Space Grotesk",sans-serif; font-size:10px; letter-spacing:.18em; }
.play-button > i { width:47px; aspect-ratio:1; display:grid; place-items:center; border-radius:14px; color:#fff; background:var(--ink); font-size:25px; font-style:normal; transition:transform .2s ease; }
.play-button:hover > i { transform:translateX(3px); }

.next-up { min-height:clamp(260px,27vw,420px); display:grid; grid-template-columns:auto 1fr minmax(280px,.65fr); align-items:center; gap:clamp(25px,4vw,70px); margin:clamp(30px,6vw,90px) 0 clamp(70px,9vw,140px); padding:clamp(28px,4vw,64px); border:1px dashed rgba(255,255,255,.22); border-radius:var(--radius); background:linear-gradient(110deg,rgba(97,232,212,.05),rgba(255,121,84,.04)); }
.next-mark { width:clamp(66px,7vw,110px); aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--cyan); background:rgba(255,255,255,.03); font-family:"Space Grotesk",sans-serif; font-size:clamp(38px,4vw,67px); font-weight:300; }
.next-up .eyebrow { margin-bottom:11px; }
.next-up > p { margin:0; color:var(--muted); font-size:clamp(15px,.55vw + 9px,19px); line-height:1.75; }
footer { width:var(--page); min-height:100px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:25px; color:rgba(255,255,255,.43); border-top:1px solid var(--line); font-family:"Space Grotesk",sans-serif; font-size:clamp(11px,.42vw + 7px,14px); letter-spacing:.08em; }
footer a { color:rgba(255,255,255,.68); text-decoration:none; }

@keyframes birdFloat { 0%,100%{transform:translateY(0) rotate(18deg)}50%{transform:translateY(-11px) rotate(14deg)} }
@keyframes marbleMove { 0%,100%{top:12%;left:12%}35%{top:33%;left:33%}65%{top:54%;left:64%}82%{top:69%;left:77%} }
@keyframes orbitSpin { to{transform:rotate(360deg)} }
@keyframes arrowDrift { 0%,100%{transform:translateY(-3px)}50%{transform:translateY(5px)} }

@media (max-width: 980px) {
  .hero { grid-template-columns:minmax(0,1fr); min-width:0; min-height:auto; gap:50px; padding:90px 0; }
  .hero-copy,.hero-side { min-width:0; }
  .hero-side { width:min(620px,100%); max-width:100%; margin:0; overflow:visible; }
  .game-grid { grid-template-columns:1fr; }
  .card-cover { min-height:clamp(390px,72vw,650px); }
  .card-info > p { min-height:auto; }
  .next-up { grid-template-columns:auto 1fr; }
  .next-up > p { grid-column:2; }
}

@media (max-width: 640px) {
  :root { --page:calc(100vw - 30px); --radius:22px; }
  .site-header { min-height:84px; }
  .live-status { display:none; }
  .sound-toggle { padding:8px 10px; }
  .sound-toggle #soundLabel { display:none; }
  .hero { padding:72px 0; }
  .hero h1 { max-width:100%; font-size:clamp(48px,15.5vw,70px); line-height:.93; letter-spacing:-.055em; }
  .hero h1 em { display:block; overflow-wrap:anywhere; }
  .hero-lead { max-width:100%; font-size:17px; overflow-wrap:anywhere; }
  .hero-stats > div { flex-wrap:wrap; }
  .scroll-cue { min-height:86px; }
  .section-heading { display:block; }
  .section-heading > p { margin-top:20px; }
  .card-cover { min-height:430px; }
  .cover-title h3 { font-size:clamp(38px,13vw,61px); }
  .availability { display:none; }
  .card-info { padding:22px; }
  .next-up { grid-template-columns:1fr; }
  .next-up > p { grid-column:auto; }
  footer { min-height:140px; flex-direction:column; align-items:flex-start; justify-content:center; gap:9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}