/* 用途：曜黑金殿電腦及手機版型。執行方式：由 landing.html 載入。
   注意：文字皆由動畫圖片承載；CSS 僅處理裝飾與佈局，不產生文字。 */
:root {
  color-scheme:dark;
  --bg:#0c0d0d;
  --gold:#d6b16a;
  --line:rgba(205,173,111,.18);
  --muted:#9c9689
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0;
  background:var(--bg);
  color:#e9e1d3;
  font-family:Arial,sans-serif
}

a {
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent
}

h1,h2,h3,p {
  margin:0
}

img {
  display:block;
  max-width:100%;
  height:auto
}

picture {
  display:block;
  max-width:100%
}

.type {
  object-fit:contain
}

a:focus-visible {
  outline:2px solid #f1d69d;
  outline-offset:7px
}

.shell {
  width:min(1200px,calc(100% - 112px));
  margin-inline:auto
}

.header {
  height:94px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:2;
  background:#0c0d0deb
}

.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.brand {
  display:block;
  width:117px
}

.header nav {
  display:flex;
  align-items:center;
  gap:38px
}

.nav-link {
  padding:14px 0;
  opacity:.9;
  transition:opacity .2s
}

.nav-link:hover {
  opacity:1
}

.nav-cta {
  border:1px solid #8b7248;
  padding:13px 22px;
  display:flex;
  gap:24px;
  align-items:center
}

.arrow {
  display:block;
  width:19px;
  height:1px;
  background:currentColor;
  position:relative;
  color:var(--gold);
  flex-shrink:0
}

.arrow:after {
  content:"";
  position:absolute;
  right:0;
  top:-3px;
  width:7px;
  height:7px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg)
}

.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 73% 40%,#30291a50,transparent 55%),linear-gradient(115deg,#101111,#0c0d0d 60%)
}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.09;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E")
}

.hero-glow {
  position:absolute;
  width:800px;
  height:800px;
  background:radial-gradient(ellipse,#b5863820,transparent 65%);
  right:-40px;
  top:-160px;
  z-index:-1
}

.hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:665px;
  align-items:center;
  gap:16px
}

.hero-copy {
  position:relative;
  z-index:1;
  padding:42px 0 80px
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px
}

.diamond {
  display:block;
  width:6px;
  height:6px;
  background:var(--gold);
  transform:rotate(45deg);
  flex-shrink:0
}

h1 {
  display:grid;
  gap:12px;
  max-width:425px
}

h1 .type {
  width:100%;
  height:auto
}

h1 picture {
  width:100%
}

.hero-rule {
  width:46px;
  height:1px;
  background:linear-gradient(90deg,var(--gold),#806342);
  margin:30px 0 24px
}

.hero-sub {
  margin-bottom:13px
}

.hero-desc {
  margin-bottom:33px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:14px
}

.button {
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  padding:16px 25px;
  position:relative;
  transition:transform .2s,box-shadow .2s
}

.button:hover {
  transform:translateY(-3px)
}

.primary {
  background:linear-gradient(110deg,#a87c39,#e5c58b 48%,#bc954f);
  border:1px solid #e5c58b;
  box-shadow:0 6px 30px #b18b3f15
}

.primary:hover {
  box-shadow:0 8px 35px #c89f4c33
}

.primary .arrow {
  color:#382919
}

.secondary {
  border:1px solid #62543b;
  background:#141411
}

.hero-note {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:23px
}

.small-shield {
  width:11px;
  height:13px;
  border:1px solid #8c8069;
  clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);
  display:block
}

.palace {
  position:relative;
  height:565px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:15px;
  perspective:1000px
}

.arch {
  position:absolute;
  bottom:39px;
  left:50%;
  transform:translateX(-50%);
  border:1px solid #b58a3c40;
  border-bottom:0;
  border-radius:50% 50% 0 0;
  box-shadow:inset 0 0 28px #b88c2910,0 0 25px #b88c2908
}

.arch-outer {
  width:480px;
  height:558px
}

.arch-middle {
  width:450px;
  height:540px;
  border-color:#bd934355
}

.arch-inner {
  width:414px;
  height:520px;
  border-color:#bd934329
}

.palace-rays {
  position:absolute;
  inset:0;
  background:conic-gradient(from 150deg at 50% 75%,transparent 0deg,#dcb76805 20deg,transparent 30deg,#dcb7680a 60deg,transparent 80deg);
  clip-path:polygon(10% 0,90% 0,60% 90%,40% 90%)
}

.emblem {
  position:relative;
  width:378px;
  height:378px;
  border-radius:50%;
  background:linear-gradient(145deg,#f3db9e,#63491f 24%,#ddbc76 35%,#5c411c 60%,#f3d59a 83%,#81602b);
  padding:12px;
  box-shadow:14px 20px 40px #0009,-3px -3px 8px #ebc97633;
  transform:rotate(-9deg) rotateY(-12deg);
  margin-top:-14px;
  animation:float 8s ease-in-out infinite
}

.emblem-teeth {
  position:absolute;
  inset:6px;
  border-radius:50%;
  background:repeating-conic-gradient(#f6d390 0deg 1deg,#5e421f 1deg 2deg);
  mask:radial-gradient(transparent 66%,black 66%)
}

.emblem-ring {
  position:absolute;
  inset:14px;
  border:1px solid #f4d798aa;
  border-radius:50%;
  box-shadow:inset 0 0 0 6px #241d11,inset 0 0 0 8px #bd944f,inset 0 0 0 10px #352717
}

.emblem-core {
  position:absolute;
  inset:33px;
  display:flex;
  align-items:center;
  flex-direction:column;
  border-radius:50%;
  border:1px solid #bd944f80;
  background:radial-gradient(ellipse at 30% 20%,#3f3424,#171612 65%,#282216);
  box-shadow:inset 3px 5px 18px #0008;
  padding-top:44px;
  overflow:hidden
}

.emblem-core:after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(125deg,transparent 20%,#ffe4a313 40%,transparent 55%);
  pointer-events:none
}

.seal-top {
  width:239px;
  opacity:.85
}

.crown {
  width:49px;
  height:30px;
  fill:none;
  stroke:#d7b36e;
  stroke-width:1.5;
  margin-top:23px;
  margin-bottom:13px
}

.seal-logo {
  width:231px;
  filter:drop-shadow(1px 3px 1px #0008)
}

.seal-divider {
  display:flex;
  gap:10px;
  align-items:center;
  margin:22px 0 15px
}

.seal-divider i {
  width:35px;
  height:1px;
  background:#c59e5866
}

.seal-divider .diamond {
  width:4px;
  height:4px
}

.seal-bottom {
  width:212px
}

.seal-year {
  width:196px;
  margin-top:16px;
  opacity:.8
}

.pedestal {
  position:absolute;
  bottom:17px;
  left:50%;
  transform:translateX(-50%);
  width:440px;
  height:66px;
  border-radius:50%;
  background:linear-gradient(180deg,#252115 0%,#171813 34%,#a1824429 36%,#0c0d0d 52%);
  box-shadow:0 -2px 2px #aa82443b,0 -14px 55px #aa824412;
  z-index:-1
}

.spark {
  position:absolute;
  width:6px;
  height:6px;
  background:#f6dfab;
  box-shadow:0 0 15px #f5c45b;
  transform:rotate(45deg)
}

.spark-one {
  top:115px;
  right:35px
}

.spark-two {
  bottom:128px;
  left:35px;
  width:4px;
  height:4px
}

.spark-three {
  top:50px;
  left:90px;
  width:3px;
  height:3px
}

.scroll-cue {
  position:absolute;
  bottom:19px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px
}

.scroll-cue span {
  display:block;
  width:1px;
  height:24px;
  background:linear-gradient(#b39153,transparent)
}

.features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-block:1px solid var(--line);
  padding:29px 0;
  background:linear-gradient(90deg,#17171022,#24201533,#17171022)
}

.feature {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:8px 24px;
  border-right:1px solid var(--line)
}

.feature:last-child {
  border:0
}

.feature-icon {
  width:42px;
  height:42px;
  flex-shrink:0
}

.feature-icon svg {
  width:100%;
  height:100%;
  stroke:#c7a666;
  stroke-width:1.2;
  fill:none
}

.feature h2 {
  margin-bottom:12px
}

.collection {
  padding-top:77px;
  padding-bottom:74px
}

.section-top {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  margin-bottom:34px
}

.section-kicker {
  margin-bottom:18px
}

.section-top h2 {
  margin-bottom:15px
}

.text-link {
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:3px;
  flex-shrink:0
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}

.venue-card {
  border:1px solid #c7a6662e;
  background:#131414;
  position:relative;
  overflow:hidden;
  transition:transform .3s,border-color .3s
}

.venue-card:hover {
  transform:translateY(-6px);
  border-color:#c7a66688
}

.card-art {
  height:236px;
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 70%,#b18a3b25,transparent 65%),linear-gradient(145deg,#24231b,#111312)
}

.card-art:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#131414,transparent 28%)
}

.orbital {
  position:absolute;
  width:210px;
  height:210px;
  border:1px solid #b79b5933;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%
}

.orbital:before {
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid #b79b591c;
  border-radius:50%
}

.orbital:after {
  content:"";
  width:5px;
  height:5px;
  background:#d9b76e;
  box-shadow:0 0 8px #ddc186;
  position:absolute;
  left:32px;
  top:25px;
  transform:rotate(45deg)
}

.art-floor {
  position:absolute;
  width:230px;
  height:34px;
  bottom:17px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:#b1934122;
  filter:blur(12px)
}

.crystal {
  position:absolute;
  clip-path:polygon(25% 0,75% 0,100% 27%,50% 100%,0 27%);
  background:conic-gradient(from 30deg at 50% 28%,#e9ca80,#5d3e1c,#d1a758,#fff0bf,#95713a,#e3c584);
  filter:drop-shadow(0 10px 15px #000)
}

.crystal-main {
  width:134px;
  height:156px;
  left:50%;
  top:45px;
  transform:translateX(-50%) rotate(-8deg)
}

.crystal-left {
  width:65px;
  height:78px;
  left:45px;
  top:123px;
  transform:rotate(16deg);
  opacity:.65
}

.crystal-right {
  width:47px;
  height:58px;
  right:43px;
  top:95px;
  transform:rotate(-15deg);
  opacity:.75
}

.playing-card {
  position:absolute;
  width:100px;
  height:139px;
  border:1px solid #d5b56d;
  border-radius:7px;
  background:linear-gradient(140deg,#e4cd99,#8c703b);
  box-shadow:6px 12px 23px #0008;
  padding:9px
}

.playing-card:before {
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid #54402488;
  border-radius:3px
}

.playing-card svg {
  width:100%;
  height:100%;
  fill:#30261a
}

.playing-card.rear {
  top:45px;
  left:calc(50% - 82px);
  transform:rotate(-23deg);
  background:linear-gradient(145deg,#494131,#a08756)
}

.playing-card.front {
  top:54px;
  left:calc(50% - 14px);
  transform:rotate(16deg)
}

.chip {
  position:absolute;
  width:51px;
  height:51px;
  border-radius:50%;
  border:5px dashed #c8a966;
  background:radial-gradient(circle,#2c291f 45%,#b39759 47%,#29251b 53%);
  box-shadow:2px 5px 0 #6b542b,5px 9px 15px #0008;
  transform:rotateX(30deg)
}

.chip-one {
  bottom:27px;
  left:65px
}

.chip-two {
  bottom:21px;
  right:57px;
  width:44px;
  height:44px
}

.trophy {
  position:absolute;
  width:178px;
  height:190px;
  top:29px;
  left:50%;
  transform:translateX(-50%) rotate(-7deg);
  filter:drop-shadow(9px 12px 12px #0009)
}

.card-copy {
  padding:8px 24px 27px;
  position:relative
}

.card-kicker {
  margin-bottom:12px
}

.card-copy h3 {
  margin-bottom:13px
}

.round-arrow {
  position:absolute;
  right:22px;
  bottom:54px;
  width:32px;
  height:32px;
  border:1px solid #a98c4a55;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center
}

.round-arrow .arrow {
  width:12px
}

.round-arrow .arrow:after {
  width:5px;
  height:5px;
  top:-2px
}

.invitation {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-block:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 110%,#9b743223,transparent 70%);
  padding:51px 20px 48px;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:0
}

.invitation h2 {
  margin:1px 0 27px
}

.invitation-ornament {
  position:absolute;
  width:500px;
  height:500px;
  border:1px solid #b38e4922;
  top:-240px;
  border-radius:50%;
  z-index:-1
}

.invitation-ornament:after {
  content:"";
  position:absolute;
  inset:20px;
  border-radius:50%;
  border:1px solid #b38e4916
}

.footer {
  min-height:136px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.footer .brand {
  width:85px;
  opacity:.8
}

.footer-notes {
  display:grid;
  gap:10px
}

.copyright {
  opacity:.7
}

@keyframes float {
  0%,100% {
    transform:translateY(0) rotate(-9deg) rotateY(-12deg)
  }
  50% {
    transform:translateY(-9px) rotate(-7deg) rotateY(-10deg)
  }
}

@media(min-width:1500px) {
  .hero-grid {
    min-height:710px
  }
  .palace {
    transform:scale(1.06)
  }
}

@media(max-width:1100px) {
  .shell {
    width:calc(100% - 64px)
  }
  .hero-grid {
    min-height:610px;
    grid-template-columns:1fr 1fr
  }
  .palace {
    transform:scale(.83);
    transform-origin:center;
    width:100%
  }
  .hero-copy {
    padding-bottom:65px
  }
  h1 {
    max-width:345px
  }
  .hero-actions {
    gap:10px
  }
  .button {
    padding:15px 19px;
    gap:18px
  }
  .feature {
    gap:15px;
    padding:8px 14px
  }
  .section-top h2 {
    max-width:480px
  }
  .card-copy {
    padding-inline:18px
  }
  .round-arrow {
    right:15px
  }
  .footer {
    gap:20px
  }
  .copyright {
    max-width:170px
  }
}

@media(max-width:760px) {
  .shell {
    width:calc(100% - 40px)
  }
  .header {
    height:76px
  }
  .brand {
    width:97px
  }
  .header nav {
    gap:0
  }
  .nav-link {
    display:none
  }
  .nav-cta {
    padding:11px 15px;
    gap:18px
  }
  .hero-grid {
    display:flex;
    flex-direction:column;
    min-height:0;
    gap:0
  }
  .hero-copy {
    padding:39px 0 0;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center
  }
  .eyebrow {
    gap:10px;
    margin-bottom:22px
  }
  .eyebrow img {
    width:251px
  }
  h1 {
    max-width:300px;
    gap:9px;
    width:100%
  }
  .hero-rule {
    margin:22px 0 18px;
    width:34px
  }
  .hero-sub {
    margin-bottom:10px
  }
  .hero-sub img {
    width:253px
  }
  .hero-desc {
    margin-bottom:25px
  }
  .hero-desc img {
    width:284px
  }
  .hero-actions {
    width:100%;
    justify-content:center;
    gap:10px
  }
  .button {
    min-height:50px;
    padding:14px 17px;
    gap:17px
  }
  .hero-actions .primary img {
    width:117px
  }
  .hero-actions .secondary img {
    width:83px
  }
  .hero-note {
    margin-top:18px;
    gap:5px
  }
  .hero-note img {
    width:250px
  }
  .palace {
    height:365px;
    transform:none;
    margin-top:27px;
    width:100%;
    margin-bottom:49px
  }
  .arch-outer {
    width:324px;
    height:366px;
    bottom:0
  }
  .arch-middle {
    width:303px;
    height:353px;
    bottom:0
  }
  .arch-inner {
    width:280px;
    height:340px;
    bottom:0
  }
  .emblem {
    width:271px;
    height:271px;
    padding:9px;
    margin-top:-9px
  }
  .emblem-ring {
    inset:10px;
    box-shadow:inset 0 0 0 4px #241d11,inset 0 0 0 6px #bd944f,inset 0 0 0 8px #352717
  }
  .emblem-core {
    inset:24px;
    padding-top:29px
  }
  .seal-top {
    width:172px
  }
  .crown {
    width:36px;
    height:22px;
    margin-top:17px;
    margin-bottom:9px
  }
  .seal-logo {
    width:170px
  }
  .seal-divider {
    margin:15px 0 11px
  }
  .seal-divider i {
    width:25px
  }
  .seal-bottom {
    width:155px
  }
  .seal-year {
    width:141px;
    margin-top:10px
  }
  .pedestal {
    width:322px;
    bottom:-12px;
    height:51px
  }
  .spark-one {
    top:65px;
    right:9px;
    width:4px;
    height:4px
  }
  .spark-two {
    bottom:75px;
    left:12px
  }
  .spark-three {
    top:27px;
    left:53px
  }
  .scroll-cue {
    bottom:14px
  }
  .features {
    padding:8px 0;
    grid-template-columns:1fr
  }
  .feature {
    justify-content:flex-start;
    gap:22px;
    padding:20px 25px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .feature:last-child {
    border:0
  }
  .feature h2 {
    margin-bottom:9px
  }
  .feature-icon {
    width:35px;
    height:35px
  }
  .feature h2 img {
    width:auto;
    max-height:22px
  }
  .collection {
    padding-top:43px;
    padding-bottom:42px
  }
  .section-top {
    display:block;
    margin-bottom:26px
  }
  .section-kicker {
    margin-bottom:15px
  }
  .section-top h2 {
    max-width:100%;
    margin-bottom:12px
  }
  .section-top h2 img {
    width:100%
  }
  .section-top p img {
    max-width:100%
  }
  .text-link {
    margin-top:22px;
    width:fit-content
  }
  .cards {
    grid-template-columns:1fr;
    gap:19px
  }
  .card-art {
    height:213px
  }
  .card-copy {
    padding:9px 23px 25px
  }
  .round-arrow {
    right:24px;
    bottom:51px
  }
  .crystal-main {
    top:36px
  }
  .orbital {
    top:7px
  }
  .playing-card.rear {
    top:33px
  }
  .playing-card.front {
    top:42px
  }
  .trophy {
    top:17px
  }
  .invitation {
    padding:38px 18px 35px
  }
  .invitation h2 img {
    width:100%
  }
  .invitation h2 {
    margin-bottom:24px;
    width:min(100%,320px)
  }
  .invitation .section-kicker img {
    max-width:255px
  }
  .footer {
    padding-top:30px;
    padding-bottom:30px;
    min-height:0;
    flex-direction:column;
    align-items:center;
    gap:22px;
    text-align:center
  }
  .footer-notes {
    justify-items:center;
    gap:10px
  }
  .copyright {
    max-width:none
  }
  .footer .brand {
    width:84px
  }
}

@media(max-width:360px) {
  .shell {
    width:calc(100% - 32px)
  }
  .hero-actions .button {
    gap:12px;
    padding-inline:12px
  }
  .hero-actions .primary img {
    width:109px
  }
  .hero-actions .secondary img {
    width:77px
  }
  .palace {
    transform:scale(.92);
    margin-block:12px 33px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .emblem {
    animation:none
  }
  a {
    transition:none!important
  }
}