:root{
  --ink:#071315;--moon:#eef6ef;--muted:#9db5ad;--gold:#d8c79e;
  --serif:'Noto Serif TC','Songti TC','PMingLiU',serif;
  --sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  color-scheme:dark;
}
html{background:#081417}
body{overflow-x:hidden;color:var(--moon);font-family:var(--sans);background:
  radial-gradient(ellipse 75% 36% at 50% 0%,#21443b6b,transparent 76%),
  linear-gradient(180deg,#0a191a 0,#0a171c 44%,#071114 100%);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid #d3e7ca;outline-offset:4px}
.ambient .slowly-aurora{--sl-aurora-a:#326f64;--sl-aurora-b:#375976;--sl-aurora-c:#7c5368;--sl-aurora-opacity:.25;--sl-aurora-blur:100px}
.ambient .sbs-stars{opacity:.42;color:#d4f3e0}
.page::before{content:"";position:absolute;inset:0 0 auto;height:820px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 70% 45% at 50% 44%,#9fd4b009,transparent 85%)}
.hero{text-align:center;padding-top:clamp(34px,6vw,62px);padding-bottom:clamp(10px,2.5vw,18px)}
.hero h1{margin:0;color:#eff7ec;font:700 clamp(30px,6vw,58px)/1.2 var(--serif);letter-spacing:.18em;text-indent:.18em;text-shadow:0 6px 35px #adddc122}
.showcase{padding-bottom:18px}
.showcase-top{display:flex;justify-content:flex-end;align-items:center;min-height:34px;margin:0 0 4px}
.icon-button{display:grid;place-items:center;min-width:42px;min-height:42px;padding:0;border:0;background:transparent;color:#c8dfd0;font:500 22px/1 var(--serif)}
.icon-button:hover,.icon-button:focus-visible,.nav-button:hover,.nav-button:focus-visible{color:#fff8e5}
.nav-button{appearance:none;border:0;background:transparent;color:#c8dfd0;font:400 28px/1 var(--serif);padding:4px 10px}
.spotlight{--stage-accent:#b5d0ad;min-height:clamp(415px,54vw,600px);margin:0 auto;background:radial-gradient(ellipse 35% 44% at 50% 52%,color-mix(in srgb,var(--stage-accent) 14%,transparent),transparent 90%);transition:background .4s ease}
.spotlight::before{content:"";position:absolute;left:50%;top:51%;width:min(82vw,730px);height:89%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(ellipse,#0b292632,transparent 67%);filter:blur(24px)}
.stage-meta{position:absolute;right:1.5%;bottom:4px;color:#cde1d884;font:italic 11px/1.4 Georgia,serif;letter-spacing:.14em}
.feature-card{width:min(332px,80vw);min-height:430px;padding:16px 18px 15px;border:1px solid color-mix(in srgb,var(--stage-accent) 54%,#c4dac8);border-radius:11px 11px 6px 6px;background:radial-gradient(ellipse at 50% 27%,color-mix(in srgb,var(--stage-accent) 14%,transparent),transparent 68%),linear-gradient(156deg,#1b3630 0%,#102627 45%,#09181d 100%);box-shadow:inset 0 0 0 4px #071316,inset 0 0 0 5px #d0ecdd25,0 26px 65px #0009,0 0 45px color-mix(in srgb,var(--stage-accent) 12%,transparent);transition:box-shadow .5s,border-color .5s,transform .5s;isolation:isolate}
.feature-card .card-topline{padding:0 2px 10px}
.card-category,.tile-category{color:var(--stage-accent);font:500 12px/1.45 var(--serif);letter-spacing:.17em}
.card-number,.tile-number{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;border:1px solid #e4dab08c;background:#081818ad;color:#ebdfbd;font:italic 20px/1 Georgia,serif}
.card-visual{height:154px;margin:0 0 12px;overflow:hidden;isolation:isolate;border-top:1px solid #dcefe319;border-bottom:1px solid #dcefe319;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--stage-accent) 25%,transparent),transparent 73%)}
.card-visual-halo{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,#ffffff13,transparent 68%);filter:blur(10px)}
.art-icon{position:relative;z-index:1;display:block;color:var(--stage-accent);font:700 clamp(68px,8vw,93px)/1 var(--serif);white-space:nowrap;text-align:center;text-shadow:0 0 28px color-mix(in srgb,var(--stage-accent) 55%,transparent),0 4px 17px #0007;--sbs-breathe-color:var(--stage-accent)}
.card-body{flex:1;text-align:center;justify-content:center}
.card-body h3{margin:0;color:#f4fff5;font:600 clamp(21px,2.5vw,27px)/1.35 var(--serif);letter-spacing:.09em;text-wrap:balance}
.stage-description{margin:10px auto 0;max-width:17em;color:#c8d7cf;font:400 13px/1.72 var(--serif);letter-spacing:.03em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.play-link{display:flex;justify-content:flex-start;align-items:center;gap:0;padding:10px 6px 1px;border:0;border-top:1px solid color-mix(in srgb,var(--stage-accent) 37%,transparent);text-decoration:none;color:var(--stage-accent);font:600 25px/1.2 var(--sans);letter-spacing:0;--sbs-shine-color:#f2fff6aa}
.play-link:hover{color:var(--stage-accent)}
.play-link[aria-disabled="true"]{opacity:.5;pointer-events:none}
.spotlight--arriving .feature-card{animation:card-materialize .6s cubic-bezier(.2,.85,.25,1) both}
@keyframes card-materialize{from{opacity:.35;transform:translateY(12px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}
.showcase-controls{margin-top:2px}
.stage-nav{margin:10px auto 0;padding:8px 0 4px;min-height:132px;overflow:visible}
.stage-tab{width:108px;height:128px;margin-left:-32px}
.stage-tab:first-child{margin-left:0}
.stage-tab:hover,.stage-tab:focus-visible{transform:translateY(calc(var(--fan-rise,0px) - 16px)) rotate(0deg);z-index:250}
.stage-tab.is-current{transform:translateY(calc(var(--fan-rise,0px) - 12px)) rotate(0deg);z-index:260}
.stage-back-face{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;border-radius:11px 11px 6px 6px;border:1px solid #cbe0d22c;background:radial-gradient(circle at 50% 28%,#ecf9ff12,transparent 28%),linear-gradient(160deg,#143038 0%,#0a1d24 54%,#081318 100%);box-shadow:inset 0 0 0 3px #09181d,inset 0 0 0 4px #cfeadc1c,0 10px 28px #0008;overflow:hidden}
.stage-back-face::before,.stage-back-face::after{content:"";position:absolute;inset:10px;border:1px solid #adcfc31f;border-radius:8px}
.stage-back-face::after{inset:24px;border-radius:50%;border-color:#d9e7cc24}
.stage-back-mark{font:700 18px/1.2 var(--serif);letter-spacing:.22em;text-indent:.22em;color:#edf5ef}
.stage-back-core{margin-top:6px;color:#b7d4ca;font:400 22px/1 var(--serif);text-shadow:0 0 18px #a2dac66c}
.stage-back-sub{margin-top:7px;color:#8ea89f;font:500 10px/1.2 var(--sans);letter-spacing:.22em}
.stage-back-no{position:absolute;right:10px;bottom:8px;color:#dcc99c;font:italic 14px/1 Georgia,serif}
.deck-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:12px 0 8px}
.deck-head h2{margin:0;color:#f2f7f1;font:600 22px/1.35 var(--serif);letter-spacing:.14em}
.chip{appearance:none;min-height:36px;padding:0 14px;border:1px solid #d1e6d738;border-radius:999px;background:#0b161ac4;color:#bfd0c7;font:500 12px/1 var(--sans);letter-spacing:.08em;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.chip:hover,.chip:focus-visible,.chip.is-active{border-color:#f0e3bd80;color:#fff7e6;background:#0f2124ee}
.game-hand{min-height:248px;padding:18px 0 10px;overflow:visible}
.game-tile{width:144px;min-height:192px;margin-left:-38px;padding:10px 10px 12px;border:1px solid color-mix(in srgb,var(--accent) 40%,#d6e4da2e);border-radius:11px 11px 6px 6px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 36%),linear-gradient(160deg,#143038 0%,#0a1d24 54%,#081318 100%);box-shadow:inset 0 0 0 3px #09181d,inset 0 0 0 4px #cfeadc1c,0 10px 28px #0008;color:#eff6f0}
.game-tile:first-child{margin-left:0}
.game-tile:hover,.game-tile:focus-visible,.game-tile.is-selected{transform:translateY(calc(var(--fan-rise,0px) - 18px)) rotate(0deg);z-index:300;border-color:color-mix(in srgb,var(--accent) 65%,#fff);box-shadow:inset 0 0 0 3px #09181d,inset 0 0 0 4px #effbe230,0 18px 34px #000b,0 0 22px color-mix(in srgb,var(--accent) 34%,transparent)}
.tile-art{flex:1 0 84px;min-height:84px;margin:8px 0 10px;border-top:1px solid #dcefe31a;border-bottom:1px solid #dcefe31a;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 68%)}
.tile-icon{color:var(--accent);font:700 40px/1 var(--serif);text-shadow:0 0 22px color-mix(in srgb,var(--accent) 55%,transparent)}
.game-tile-name{display:block;color:#f4fff5;font:600 14px/1.45 var(--serif);letter-spacing:.06em;text-align:center;text-wrap:balance}
.empty{margin:8px 0 0;color:#b9cfc3;font:400 13px/1.7 var(--serif)}
.load-status{margin:18px auto 0;padding:0 0 18px;color:#d7ddd8;font:400 13px/1.8 var(--sans)}
.load-status button{margin-left:8px;padding:0;border:0;background:transparent;color:#fff7e1;text-decoration:underline}
.site-footer{padding:34px 16px 26px;color:#aac2b5;font:400 12px/1.4 var(--sans);letter-spacing:.08em}
.stage-fx{z-index:0;pointer-events:none}
.stage-fx .fx{position:absolute;inset:0;display:none;pointer-events:none}
.spotlight[data-effect-slot="1"] .fx--celestial,
.spotlight[data-effect-slot="2"] .fx--portal,
.spotlight[data-effect-slot="4"] .fx--dust,
.spotlight[data-effect-slot="5"] .fx--sunburst{display:block}
.fx-enso,.fx-orbit-position,.fx-gate-position,.fx-sun-wheel{position:absolute;left:50%;top:49%;translate:-50% -50%}
.fx-enso{width:min(83%,540px);aspect-ratio:1;color:color-mix(in srgb,var(--stage-accent) 61%,#fff);opacity:.48;--sbs-enso-speed:65s}
.fx-orbit-position{width:min(72%,470px);aspect-ratio:1}
.fx-orbit{width:100%;height:100%;color:var(--stage-accent);opacity:.52;--sbs-orbit-border:1px dashed color-mix(in srgb,var(--stage-accent) 40%,transparent);--sbs-orbit-speed:25s;--sbs-orbit-dot-size:8px;--sbs-orbit-glow:18px}
.fx-star{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--stage-accent);box-shadow:0 0 14px 2px var(--stage-accent);animation:fx-twinkle 3s ease-in-out infinite alternate}
.fx-star--a{left:22%;top:25%}.fx-star--b{right:16%;top:60%;animation-delay:-1.1s}.fx-star--c{left:35%;bottom:13%;animation-delay:-2s}
@keyframes fx-twinkle{to{opacity:.2;transform:scale(.6)}}
.fx-gate-position{width:min(73%,440px);height:min(73%,440px)}
.fx-gate{width:100%;height:100%;border-radius:50%;--sbs-flow-thickness:2px;--sbs-flow-color:color-mix(in srgb,var(--stage-accent) 90%,white);--sbs-flow-speed:8s;opacity:.68}
.fx-gate-inner{width:100%;height:100%;border-radius:inherit;background:radial-gradient(circle,#ffffff06 0,transparent 60%)}
.fx-gate-spark{position:absolute;width:10px;height:2px;border-radius:999px;background:color-mix(in srgb,var(--stage-accent) 95%,white);box-shadow:0 0 12px color-mix(in srgb,var(--stage-accent) 60%,white);animation:fx-gate-spark 5.6s linear infinite}
.fx-gate-spark--a{left:22%;top:40%}.fx-gate-spark--b{right:21%;top:57%;animation-delay:-2.8s}
@keyframes fx-gate-spark{0%{transform:translateX(0)}50%{transform:translateX(33px)}100%{transform:translateX(0)}}
.fx--dust{--sl-glow-a:color-mix(in srgb,var(--stage-accent) 24%,transparent);--sl-glow-b:rgba(157,214,216,.15);--sl-glow-a-size:260px;--sl-glow-b-size:210px;--sl-glow-a-x:-30px;--sl-glow-a-y:-10px;--sl-glow-b-x:-10px;--sl-glow-b-y:-20px}
.fx-dust-haze{position:absolute;inset:23% 19%;border-radius:50%;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--stage-accent) 15%,transparent),transparent 72%);filter:blur(16px)}
.fx-particle{position:absolute;left:var(--px);top:var(--py);--slowly-particle-color:color-mix(in srgb,var(--stage-accent) 78%,white);--slowly-particle-size:5px;--slowly-particle-distance:-20px;--slowly-particle-duration:calc(2.8s + (var(--i) * .16s));--slowly-particle-delay:calc(var(--i) * -.22s)}
.fx-sun-wheel{width:min(82%,460px);aspect-ratio:1;border-radius:50%;opacity:.38;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--stage-accent) 35%,transparent) 0 7deg,transparent 7deg 18deg);mask:radial-gradient(circle,transparent 0 34%,#000 34.5% 61%,transparent 61.5%)}
.fx-sun-streak{position:absolute;left:50%;top:50%;width:min(62%,340px);height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--stage-accent) 92%,white),transparent);box-shadow:0 0 18px color-mix(in srgb,var(--stage-accent) 45%,transparent);translate:-50% -50%}
.fx-sun-streak--a{transform:rotate(26deg)}.fx-sun-streak--b{transform:rotate(-26deg)}
@media(max-width:900px){
  .feature-card{width:min(318px,84vw)}
  .game-tile{width:132px;min-height:183px;margin-left:-42px}
}
@media(max-width:620px){
  .hero{padding-top:30px;padding-bottom:6px}
  .hero h1{font-size:34px;letter-spacing:.14em;text-indent:.14em}
  .spotlight{min-height:396px}
  .feature-card{width:min(288px,86vw);min-height:390px;padding:14px 14px 13px}
  .card-visual{height:136px}
  .card-body h3{font-size:20px}
  .stage-description{font-size:12px;max-width:15em}
  .stage-nav{min-height:116px}
  .stage-tab{width:88px;height:104px;margin-left:-38px}
  .stage-back-mark{font-size:15px}
  .stage-back-core{font-size:18px}
  .stage-back-sub{font-size:8px}
  .deck-head{align-items:flex-start;gap:10px}
  .deck-head h2{font-size:18px}
  .game-hand{min-height:210px;padding-top:10px}
  .game-tile{width:116px;min-height:160px;margin-left:-44px;padding:8px 8px 10px}
  .tile-art{flex-basis:70px;min-height:70px;margin:6px 0 8px}
  .tile-icon{font-size:31px}
  .game-tile-name{font-size:12px;line-height:1.35}
  .tile-category{font-size:10px}
  .tile-number{width:28px;height:28px;font-size:17px}
}
@media(max-width:390px){
  .wrap{padding-inline:12px}
  .feature-card{width:min(272px,88vw)}
  .stage-tab{width:82px;height:98px;margin-left:-40px}
  .game-tile{width:108px;min-height:154px;margin-left:-46px}
}
@media(prefers-reduced-motion:reduce){
  .fx-star,.fx-gate-spark,.spotlight--arriving .feature-card{animation:none}
}

/* V3：牌組改為可滑動扇形手牌；無分類膠囊按鈕。 */
.deck-head{margin:10px 0 0}
.hand-viewport{outline-offset:-4px}
.hand-viewport:focus-visible{outline:1px solid #c5e2cb68}
.game-hand{min-height:204px;padding:0}
.game-tile{margin-left:-38px}
.game-tile:first-child{margin-left:0}
.hand-arrow{
  color:#c6dcd09c;
  font:400 40px/1 Georgia,serif;
  text-shadow:0 0 14px #081318;
  transition:opacity .2s ease,color .2s ease;
}
.hand-arrow:disabled{opacity:.08;cursor:default}
.hand-arrow:not(:disabled){opacity:.65}
.hand-arrow:not(:disabled):hover,.hand-arrow:not(:disabled):focus-visible{opacity:1;color:#f1f8e9}
@media(max-width:900px){.game-tile{margin-left:-42px}}
@media(max-width:620px){
  .hand-viewport{padding:37px 26px 35px}
  .game-hand{min-height:177px}
  .game-tile{margin-left:-44px}
  .hand-arrow{width:27px;height:50px;font-size:34px}
}
@media(max-width:390px){.game-tile{margin-left:-46px}}
@media(prefers-reduced-motion:reduce){.hand-viewport{scroll-behavior:auto}}
/* 中央手牌微微浮起，滑到哪張就先看清楚哪張；不會改動主舞台選擇。 */
.game-tile.is-selected:not(.is-hand-focus):not(:hover):not(:focus-visible){
  transform:translateY(var(--fan-rise,0px)) rotate(var(--fan-rotate,0deg));
  z-index:var(--fan-z,1);
}
.game-tile.is-hand-focus{
  transform:translateY(-16px) rotate(0deg);
  z-index:325;
  border-color:color-mix(in srgb,var(--accent) 70%,#fff);
  box-shadow:inset 0 0 0 3px #09181d,inset 0 0 0 4px #effbe230,0 18px 34px #000b,0 0 18px color-mix(in srgb,var(--accent) 25%,transparent);
}
/* 一頁已能看完全部手牌時，左右箭頭自動隱藏。 */
.hand-carousel:not(.can-scroll) .hand-arrow{opacity:0;pointer-events:none}

/* 與下方手牌一致的小箭頭，緊貼五張專屬牌背兩側。 */
.stage-hand-controls{margin:0 auto 10px;gap:25px}
.stage-hand-controls .stage-nav{margin:10px 0 0}
.stage-hand-controls .stage-hand-arrow{width:28px;height:50px;font-size:34px;align-self:center}
@media(max-width:620px){
  .stage-hand-controls{gap:18px}
  .stage-hand-controls .stage-hand-arrow{width:25px;font-size:32px}
}
@media(max-width:350px){
  .stage-hand-controls{gap:10px}
  .stage-hand-controls .stage-tab{width:72px;height:90px;margin-left:-37px}
  .stage-hand-controls .stage-tab:first-child{margin-left:0}
  .stage-hand-controls .stage-hand-arrow{width:22px;font-size:30px}
}

/* 首頁極光藝術字：原圖透明留白較大，以容器裁切視覺範圍；不修改圖檔本身。 */
.hero{padding-top:clamp(14px,3.2vw,32px);padding-bottom:clamp(4px,1vw,10px)}
.hero .hero-art-title{display:block;position:relative;width:min(100%,950px);aspect-ratio:4.15 / 1;margin:0 auto;overflow:hidden;text-indent:0;letter-spacing:normal;text-shadow:none}
.hero .hero-art-title img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;max-width:none}
@media(max-width:620px){.hero{padding-top:16px;padding-bottom:4px}}

/* 第三展位：引用軍火庫 Grid Overlay，宿主僅決定網格範圍、密度及強度。 */
.feature-card .slot-grid.slowly-grid-overlay{
  position:absolute;inset:0;display:none;z-index:0;overflow:hidden;
  --sl-grid-size:43px;opacity:.8;pointer-events:none;border-radius:inherit;
}
.spotlight[data-effect-slot="3"] .feature-card .slot-grid.slowly-grid-overlay{display:block}
.feature-card .card-topline,.feature-card .card-visual,.feature-card .card-body,.feature-card .play-link{position:relative;z-index:1}
@media(max-width:620px){.feature-card .slot-grid.slowly-grid-overlay{--sl-grid-size:36px;opacity:.72}}