/* Fantasy homepage theme — isolated to .home-page, preserves existing behavior. */
body.home-page{--bg:#100e0e;--panel:#211b19;--ink:#efe1c6;--muted:#bcae98;--line:#6b4b2d;--gold:#dfb46c;--gold-soft:#33271c;--fill:#d7a45a;--dark:#0b0909;--dark-ink:#f6e9ce;--dark-muted:#c2b49b;--moss:#35231d;background:#100e0e;color:#efe1c6}
.home-page .top{background:rgba(9,8,9,.94);border-bottom:1px solid #76522f;backdrop-filter:blur(16px)}
.home-page .brand{font-family:serif;font-size:26px;color:#f3cb80;text-shadow:0 2px 12px #8b441d}
.home-page .top nav a{color:#c5b49c}.home-page .top nav a.on,.home-page .top nav a:hover{color:#f6d28c}
.home-page .cta.line{background:#342c1e;color:#e7c78c;border:1px solid #977044}
.home-page .hero{position:relative;isolation:isolate;min-height:650px;padding:110px 0 0;background:#100d0c url('img/plaza.png') center 32%/cover no-repeat}
.home-page .hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,8,9,.94),rgba(10,8,9,.53) 55%,rgba(10,8,9,.82)),linear-gradient(0deg,#100e0e,transparent 55%)}
.home-page .hero-in{max-width:1200px;margin:auto;text-align:center}
.home-page .hero h1{font-family:serif;font-size:clamp(70px,12vw,160px);letter-spacing:.12em;color:#f9dc9e;text-shadow:0 4px 0 #6e321c,0 8px 35px #100503}
.home-page .hero .sub{max-width:none;margin:24px auto 0;color:#e8d1ae;font-size:clamp(17px,2vw,24px)}
.home-page .stack{margin:64px auto 0;max-width:1200px;padding:0 24px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.home-page .fold{height:auto;width:auto;margin:0;background:rgba(25,19,17,.8);border:1px solid #8c673d;clip-path:none;border-radius:4px;z-index:1}
.home-page .fold .tab{position:static;height:auto;padding:12px 22px;background:none;clip-path:none;color:#e5c591}
.home-page .fold:hover{transform:translateY(-3px);border-color:#e4b971}
.home-page .fold.front{flex:0 0 100%;background:linear-gradient(145deg,rgba(27,19,18,.96),rgba(12,10,11,.96));padding:25px;margin-top:14px;border:1px solid #9a713f}
.home-page .front .tab-front{display:none}
.home-page .front-in{grid-template-columns:1fr auto;gap:24px;padding:0}
.home-page .front-text .lead{color:#e9d7b7;font-size:19px;max-width:600px}
.home-page .dia-hero{width:180px;opacity:.88}
.home-page .btn,.home-page .btn.pri{clip-path:none;border:1px solid #d5a45e;border-radius:4px;background:linear-gradient(180deg,#a63222,#5f120d);color:#ffe3aa;box-shadow:inset 0 0 0 1px #5d261b;padding:13px 28px}
.home-page .btn.soft{background:#191513;color:#e6c28a}
.home-page .btn:hover{background:#9d4228;color:#fff0c8}
.home-page .home section{padding:90px var(--m) 0}
.home-page .home h2{font-family:serif;font-size:clamp(30px,4vw,48px);text-align:center;color:#eac47e;letter-spacing:.08em;margin-bottom:34px}
.home-page .tiles3{max-width:1180px;margin:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.home-page .st{height:auto;min-height:260px;margin:0;clip-path:none;border:1px solid #7e5a35;background:linear-gradient(145deg,#2c211b,#100e0e);padding:28px;border-radius:4px;gap:24px}
.home-page .fig{font-family:serif;color:#efc477;font-size:clamp(44px,5vw,75px)}
.home-page .st .cap{color:#d0baa0}
.home-page .calc input{background:#211b18;color:#f4d7a4;border:1px solid #8a6237}
.home-page .board{max-width:1180px;margin:auto}
.home-page .tl{background-color:#211916;color:#ebd3ad;border-color:#755434}
.home-page .tl .big,.home-page .tl b{color:#efc57d}
.home-page .steps .bar{max-width:1180px;margin:auto}
.home-page .close{background:linear-gradient(90deg,#21140f,#0b0909);border-top:1px solid #674427;margin-top:100px}
.home-page .close h2{color:#f2cb83}
.home-page .mark-foot{background:#090808;border-top:1px solid #6a492b}
@media(max-width:760px){.home-page .top .in{flex-wrap:wrap}.home-page .top nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}.home-page .top nav a{white-space:nowrap}.home-page .hero{padding-top:70px}.home-page .hero h1{font-size:clamp(56px,15vw,90px)}.home-page .stack{padding:0 14px;gap:8px}.home-page .fold .tab{padding:8px 12px;font-size:13px}.home-page .front-in{grid-template-columns:1fr}.home-page .dia-hero{display:none}.home-page .tiles3{grid-template-columns:1fr}.home-page .st{min-height:180px}.home-page .home section{padding-top:60px}}
@media(prefers-reduced-motion:reduce){.home-page *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* Finishing pass: cinematic composition, restrained ornament, responsive grid. */
.home-page{overflow-x:hidden;background:radial-gradient(ellipse at 50% 30%,#231913 0,#100e0e 55%);color:#ead9bb}
.home-page .hero{background-image:linear-gradient(90deg,rgba(9,7,8,.85),rgba(9,7,8,.2) 52%,rgba(9,7,8,.8)),url('img/plaza.png');background-position:center,center 40%;background-size:cover;box-shadow:inset 0 -80px 85px #100e0e}
.home-page .hero::after{content:none!important}
.home-page .hero h1{position:relative;line-height:1.2;font-weight:900;filter:drop-shadow(0 10px 15px #000);background:linear-gradient(#fff0c0 5%,#e8bb69 37%,#a86a35 70%,#ffe2a1 95%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px #71451e}
.home-page .hero .sub{letter-spacing:.12em;text-shadow:0 3px 9px #000}
.home-page .hero-in::before{content:'✦  經 典 奇 幻 冒 險  ✦';display:block;font-size:13px;letter-spacing:.35em;color:#d5ae71;margin-bottom:20px}
.home-page .stack{align-items:stretch}
.home-page .fold:not(.front){flex:1 1 155px;text-align:center;min-width:0;box-shadow:0 7px 18px #0007}
.home-page .fold:not(.front) .tab{justify-content:center}
.home-page .fold.front{position:relative;box-shadow:0 16px 50px #0009,inset 0 0 0 3px #2c2019;padding:34px 38px}
.home-page .fold.front::before,.home-page .fold.front::after{content:'◆';position:absolute;color:#d1a45c;font-size:18px;line-height:1}
.home-page .fold.front::before{top:10px;left:12px}.home-page .fold.front::after{bottom:10px;right:12px}
.home-page .front-text .lead{margin-bottom:22px}
.home-page .dia-hero{clip-path:none;aspect-ratio:1;border:5px ridge #a97c42;border-radius:50%;overflow:hidden;box-shadow:0 0 0 8px #21150e,0 0 30px #000}
.home-page .dia-hero img{object-fit:cover}
.home-page .home section{max-width:1320px;margin-inline:auto}
.home-page .home section.stats{padding-top:104px}
.home-page .home h2::after{content:'◆ ───── ◆';display:block;font-family:serif;color:#a7773d;font-size:16px;letter-spacing:.4em;margin-top:18px}
.home-page .st{position:relative;overflow:hidden;box-shadow:0 14px 36px #0007,inset 0 0 0 4px #19110f}
.home-page .st::before{content:'';position:absolute;inset:8px;border:1px solid #604529;pointer-events:none}
.home-page .st::after{content:'✧';position:absolute;right:28px;top:14px;font-size:32px;color:#6f5236}
.home-page .st .fig{display:block;font-variant-numeric:lining-nums}
.home-page .st .cap{max-width:32ch;position:relative}
.home-page .st1{background:radial-gradient(circle at 90% 10%,#4a2b18,#1e1715 65%)}.home-page .st2{background:radial-gradient(circle at 90% 10%,#3a251f,#181313 70%)}.home-page .st3{background:radial-gradient(circle at 90% 10%,#28302a,#161815 70%)}
.home-page .feat .board{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:94px;gap:14px}
.home-page .feat .tl{clip-path:none;border:1px solid #795638;border-radius:5px;box-shadow:inset 0 0 0 4px #18110e,0 12px 24px #0006;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.home-page .feat a.tl:hover{transform:translateY(-5px);border-color:#d4a562;box-shadow:0 16px 30px #0009,0 0 22px #9c60202e}
.home-page .feat .t-head{background:transparent;border:0;box-shadow:none}
.home-page .feat .t-head h2{text-align:left}
.home-page .feat .t-head h2::after{letter-spacing:.12em}
.home-page .feat .t-bag{background:radial-gradient(circle at 50% 70%,#594026,#211612 65%)}
.home-page .feat .t-doll{background:radial-gradient(circle at 90% 10%,#503329,#201617 72%)}
.home-page .feat .t-weapon{background:radial-gradient(circle at 95% 15%,#513f22,#1c1614 72%)}
.home-page .feat .t-attr{background:radial-gradient(circle at 95% 15%,#244044,#171a1d 72%)}
.home-page .feat .t-boss{background:radial-gradient(circle at 95% 15%,#503027,#1e1514 72%)}
.home-page .feat .t-log{background:#161310}
.home-page .feat .t-update{background:radial-gradient(circle at 90% 10%,#344032,#171915 72%)}
.home-page .feat .tcap{background:rgba(15,11,10,.94);border-bottom:1px solid #755133;color:#e9d6b5}
.home-page .feat .tcap b{color:#f1c879}
.home-page .feat .t-bag .tcap{background:rgba(21,14,10,.94);color:#e9d6b5}
.home-page .feat .t-bag img{max-height:calc(100% - 65px);max-width:100%;object-fit:contain}
.home-page .feat .t-log img{max-width:100%;object-fit:contain}
.home-page .feat .t-attr .icons{margin-top:18px}
.home-page .feat .t-attr .ico{filter:drop-shadow(0 3px 8px #000)}
.home-page .steps .seg{clip-path:none;min-height:225px;position:relative;background:linear-gradient(145deg,#32241c,#171210);border:1px solid #805b36;border-radius:4px;color:#dfd0b8;box-shadow:inset 0 0 0 4px #16100e}
.home-page .steps .seg::before{content:'Ⅰ';font-family:serif;font-size:54px;color:#8f673d;position:absolute;top:4px;right:22px}
.home-page .steps .s2::before{content:'Ⅱ'}.home-page .steps .s3::before{content:'Ⅲ'}
.home-page .steps .seg b{color:#eac47e}
.home-page .steps .bar{gap:15px}
.home-page .close{min-height:0;margin-top:110px;padding:48px 0;background:radial-gradient(ellipse at 25% 40%,#4c2b1b,#110d0b 66%);border-block:1px solid #684629}
.home-page .close-in{max-width:1180px;margin:auto;min-height:380px;grid-template-columns:1fr 1fr;gap:50px;padding:20px}
.home-page .dia-close{clip-path:none;border-radius:50%;overflow:hidden;border:8px ridge #9e7541;aspect-ratio:1;width:min(100%,350px);margin:0 auto}
.home-page .close-text{padding:24px}
.home-page .close h2{font:700 clamp(34px,4vw,54px)/1.3 serif}
.home-page .mark-foot{padding:55px 0 35px}
.home-page .mark{height:auto;max-width:420px;gap:8px;margin-bottom:45px}
.home-page .blk{font-size:clamp(48px,7vw,95px);height:auto!important;clip-path:none;background:transparent!important;color:#d7ae6c!important;text-shadow:0 3px 12px #000}
.home-page .fcols{border-top:1px solid #463421;padding-top:35px}
.home-page .fl b{color:#e7bf7e}
.home-page .legal{border-top:1px solid #34281c;padding-top:20px;max-width:none}
.home-page .news .feed-item{clip-path:none;background:#241a16;border:1px solid #6d4b30;border-radius:4px;color:#ead9bd}
.home-page .news .feed-item span{color:#baa98d}
@media(max-width:820px){
 .home-page .hero{padding-top:65px}
 .home-page .hero h1{font-size:clamp(54px,13vw,110px)}
 .home-page .stack{margin-top:42px}
 .home-page .fold:not(.front){flex-basis:calc(50% - 10px)}
 .home-page .front-in{grid-template-columns:1fr}
 .home-page .dia-hero{display:none}
 .home-page .feat .board{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
 .home-page .feat .t-head{grid-column:1/-1}
 .home-page .feat .t-bag{grid-column:1/-1;height:420px}
 .home-page .feat .t-doll,.home-page .feat .t-weapon,.home-page .feat .t-log,.home-page .feat .t-update{grid-column:1/-1;min-height:175px}
 .home-page .feat .t-log{height:220px}
 .home-page .feat .t-attr,.home-page .feat .t-boss{grid-column:auto;min-height:210px}
 .home-page .steps .bar{flex-direction:column}
 .home-page .steps .seg{min-height:155px}
 .home-page .close-in{grid-template-columns:1fr;gap:10px}
 .home-page .dia-close{order:2;width:240px}
 .home-page .close-text{order:1;text-align:center}
 .home-page .fcols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 .home-page .top .in{gap:8px;padding:12px 16px}
 .home-page .brand{font-size:22px}
 .home-page .cta.line{font-size:12px;padding:7px 10px}
 .home-page .top nav{flex:0 0 100%;gap:0}
 .home-page .top nav a{padding:7px 10px;font-size:13px}
 .home-page .hero{min-height:0;padding-top:52px}
 .home-page .hero-in::before{font-size:10px;letter-spacing:.16em}
 .home-page .hero h1{font-size:clamp(50px,14vw,80px)}
 .home-page .hero .sub{font-size:15px;letter-spacing:.03em;padding:0 10px}
 .home-page .stack{padding:0 12px;gap:8px}
 .home-page .fold:not(.front){flex-basis:calc(50% - 8px)}
 .home-page .fold:not(.front) .tab{font-size:12px;padding:11px 6px}
 .home-page .fold.front{padding:24px 20px}
 .home-page .front-text .lead{font-size:16px}
 .home-page .front-text .acts{display:grid;gap:8px}
 .home-page .btn{display:block;text-align:center;margin:0!important;padding:12px 14px}
 .home-page .home section{padding:65px 16px 0}
 .home-page .home h2{font-size:31px}
 .home-page .tiles3{grid-template-columns:1fr}
 .home-page .st{min-height:180px;padding:26px}
 .home-page .feat .t-bag{height:370px}
 .home-page .feat .t-attr,.home-page .feat .t-boss{grid-column:1/-1;min-height:155px}
 .home-page .feat .tl{padding:22px}
 .home-page .feat .t-bag,.home-page .feat .t-log{padding:0}
 .home-page .feat .t-head{padding:0}
 .home-page .close{margin-top:70px}
 .home-page .close-text .acts{display:grid;gap:8px}
 .home-page .fcols{grid-template-columns:1fr}
 .home-page .fl.fl2{grid-column:1/-1}
 .home-page .mark{margin-bottom:24px}
}

/* 與 logo 首屏整合（2026-10-21）：首屏由 logo 圖負責，不再鋪遊戲截圖；深色卡上的試算文字要看得見 */
.home-page .hero{background:var(--dark);min-height:0;padding-top:0;box-shadow:none}
.home-page .hero:before{content:none}
.home-page .hero h1.logo{background:none;filter:none;font-size:0;line-height:0;letter-spacing:0;text-shadow:none}
.home-page .st .calc{color:#d0baa0}
.home-page .st .calc output{color:#efc477}


/* Art direction v2 — ornamental fantasy layers without external dependencies. */
.home-page{--ornament:url('img/fantasy-ornament.svg')}
.home-page .hero{background-image:linear-gradient(180deg,rgba(9,6,8,.32) 0%,rgba(9,6,8,.58) 55%,#100e0e 100%),linear-gradient(90deg,#100d0ce8,#130e0b20 50%,#100d0ce8),url('img/plaza.png');background-position:center,center,center;background-size:cover;min-height:0}
.home-page .hero::before{background:radial-gradient(ellipse at 50% 23%,transparent 0%,#09070785 76%),linear-gradient(0deg,#100e0e 0%,transparent 45%);z-index:0}
.home-page .hero-in{position:relative;z-index:2}
.home-page .hero h1.logo{position:relative;z-index:2;max-width:660px;margin:0 auto;padding:15px 25px 0;font-size:initial;line-height:1;filter:drop-shadow(0 12px 26px #000);background:none;-webkit-text-stroke:0}
.home-page .hero h1.logo img{display:block;width:min(100%,620px);height:auto;margin:auto;filter:drop-shadow(0 8px 15px #000)}
.home-page .hero-kicker{font-family:serif;font-size:clamp(18px,2.3vw,29px);font-weight:700;letter-spacing:.3em;color:#f5c578;text-shadow:0 3px 10px #000;margin:0 auto 8px}
.home-page .hero .sub{margin:0 auto;color:#f5e4ca;font-size:clamp(15px,1.5vw,19px);letter-spacing:.1em}
.home-page .hero-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;margin:27px auto 12px}
.home-page .hero-actions .btn{min-width:185px;margin:0;text-align:center;font-size:16px}
.home-page .hero::after{content:''!important;display:block!important;position:absolute;inset:auto 0 0;width:100%;height:110px;clip-path:none;background:linear-gradient(0deg,#100e0e,transparent);pointer-events:none;z-index:0}
.home-page .stack{position:relative;z-index:3;margin-top:36px}
.home-page .stack::before{content:'';position:absolute;inset:-18px -18px auto;height:1px;background:linear-gradient(90deg,transparent,#b27b43 20%,#f4d19a 50%,#b27b43 80%,transparent)}
.home-page .fold.front{border-image:none}
.home-page .front::before,.home-page .front::after{font-size:17px}
.home-page .home h2{position:relative}
.home-page .home h2::before{content:'✧';font-size:.65em;display:inline-block;vertical-align:middle;margin-right:.55em;color:#a77a44}
.home-page .home h2::after{content:'◆ ───── ◆';opacity:.8}
.home-page .stats .st::after{content:'✦'}
.home-page .stats .st1::after{content:'✧'}
.home-page .feat .tl{isolation:isolate}
.home-page .feat .t-doll::after,.home-page .feat .t-weapon::after,.home-page .feat .t-attr::after,.home-page .feat .t-boss::after,.home-page .feat .t-update::after{content:'';position:absolute;right:-18px;bottom:-50px;width:190px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ca873c29,transparent 70%);z-index:-1}
.home-page .feat .feature-symbol{position:absolute;right:18px;bottom:3px;font-family:serif;font-size:clamp(80px,10vw,165px);line-height:1;color:#e3ae5e18;pointer-events:none;transition:transform .25s}
.home-page .feat a.tl:hover .feature-symbol{transform:rotate(-10deg) scale(1.08)}
.home-page .feat .t-doll .feature-symbol{color:#dd986a25}
.home-page .feat .t-attr .feature-symbol{color:#6dbfe12a}
.home-page .feat .t-boss .feature-symbol{color:#f2aa6624}
.home-page .feat .t-bag::after,.home-page .feat .t-log::after{content:'';position:absolute;inset:6px;border:1px solid #ba86404d;pointer-events:none}
.home-page .feat .t-bag img{filter:drop-shadow(0 12px 20px #000)}
.home-page .gallery{padding-top:110px}
.home-page .gallery-heading{text-align:center}
.home-page .gallery-heading .eyebrow{display:block;color:#a9885c;letter-spacing:.35em;font-size:11px;font-weight:700;margin-bottom:10px}
.home-page .gallery-heading h2{margin-bottom:18px}
.home-page .gallery-heading p{color:#bda990;margin:0 auto 32px;line-height:1.7}
.home-page .gallery-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:16px;max-width:1180px;margin:auto}
.home-page .gallery-shot{position:relative;margin:0;min-height:265px;overflow:hidden;background:#181310;border:1px solid #87603a;box-shadow:0 16px 36px #0008,inset 0 0 0 4px #21170f}
.home-page .gallery-shot::before{content:'';position:absolute;inset:7px;border:1px solid #bd8b484f;z-index:2;pointer-events:none}
.home-page .gallery-shot img{display:block;width:100%;height:100%;min-height:265px;max-height:340px;object-fit:cover;image-rendering:auto;transition:transform .45s ease,filter .45s ease;filter:saturate(.88) contrast(1.08)}
.home-page .gallery-shot:nth-child(2) img{object-fit:contain;padding:18px;background:radial-gradient(circle,#443222,#130f0d 78%);image-rendering:pixelated}
.home-page .gallery-shot:nth-child(3) img{object-fit:contain;padding:18px;background:radial-gradient(circle,#34302a,#130f0d 78%);image-rendering:pixelated}
.home-page .gallery-shot:hover img{transform:scale(1.035);filter:saturate(1.05)}
.home-page .gallery-shot figcaption{position:absolute;z-index:3;bottom:0;left:0;right:0;padding:30px 18px 15px;background:linear-gradient(0deg,#080707ed,transparent);font:700 19px serif;color:#f1d19a;text-shadow:0 2px 6px #000}
.home-page .gallery-shot figcaption small{display:block;margin-top:4px;color:#bba27d;font:10px sans-serif;letter-spacing:.2em}
.home-page .gallery-note{text-align:center;color:#99866f;font-size:12px;margin-top:16px}
.home-page .steps .seg{background-image:linear-gradient(140deg,#3a261d,#130f0e)}
.home-page .steps .seg:hover{border-color:#c59658}
.home-page .close{position:relative}
.home-page .close::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 20%,#ad602114,transparent 65%);pointer-events:none}
.home-page .mark-foot{position:relative}
.home-page .mark-foot::before{content:'✦';display:block;text-align:center;font-size:18px;color:#ac7d42;margin-bottom:15px}
@media(max-width:950px){.home-page .gallery-grid{grid-template-columns:1fr 1fr}.home-page .gallery-primary{grid-column:1/-1}.home-page .gallery-primary img{max-height:350px}}
@media(max-width:560px){.home-page .hero h1.logo{padding:8px 12px 0}.home-page .hero h1.logo img{width:100%}.home-page .hero-kicker{font-size:17px;letter-spacing:.16em}.home-page .hero-actions{padding:0 14px;display:grid;grid-template-columns:1fr 1fr;gap:9px}.home-page .hero-actions .btn{min-width:0;font-size:13px;padding:12px 8px}.home-page .gallery{padding-top:65px}.home-page .gallery-grid{grid-template-columns:1fr}.home-page .gallery-primary{grid-column:auto}.home-page .gallery-shot,.home-page .gallery-shot img{min-height:220px}.home-page .gallery-shot img{max-height:280px}.home-page .feat .feature-symbol{font-size:100px}}

/* 與 logo 首屏整合（PR #2 之後）：首屏維持 logo 滿版、不鋪截圖；保留 PR 的標語與兩顆按鈕 */
.home-page .hero{background:var(--dark);min-height:0;padding-top:0}
.home-page .hero::before,.home-page .hero::after{content:none!important;display:none!important}
.home-page .hero h1.logo{max-width:none;margin:0;padding:0;filter:none;font-size:0;line-height:0;height:min(66vh,56.25vw);min-height:300px}
.home-page .hero h1.logo img{width:100%;max-width:none;height:100%;margin:0;object-fit:cover;object-position:50% 42%;filter:none}
.home-page .hero-in{margin-top:calc(var(--m) * -.8)}
@media(max-width:820px){.home-page .hero h1.logo{height:62vw;min-height:0}}