:root{--tk-width:100vw;--tk-height:100dvh;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#080b10;margin:0;touch-action:none}
body{position:fixed;inset:0;color:#fff}
#GameDiv{position:absolute;left:var(--safe-left);top:var(--safe-top);width:calc(var(--tk-width) - var(--safe-left) - var(--safe-right));height:calc(var(--tk-height) - var(--safe-top) - var(--safe-bottom));overflow:hidden}
.embedded{--safe-top:0px;--safe-right:0px;--safe-bottom:0px;--safe-left:0px}
#Cocos3dGameContainer,#GameCanvas{display:block;touch-action:none}
.tk-loading{--accent:#8bf6ec;--glow:#36dcc8;--deep:#062727;--warm:#a9baff;position:fixed;inset:0;width:var(--tk-width);height:var(--tk-height);z-index:1000;isolation:isolate;overflow:hidden;background:#050c14;color:#f7efda;font-family:"PingFang TC","Noto Sans TC",system-ui,sans-serif;text-align:left;transition:opacity .4s;box-sizing:border-box}
.tk-loading[hidden]{display:none}.tk-loading *{box-sizing:border-box}.tk-loading[data-game=cowboy]{--accent:#f0c175;--glow:#ff952c;--deep:#4c2312;--warm:#ffdb9b}.tk-loading[data-game=dragon]{--accent:#ffe29a;--glow:#ffc04a;--deep:#590d0e;--warm:#ffe8b5}
.load-world{position:absolute;inset:-3%;background:var(--background) center 42%/cover;opacity:.46;animation:world-drift 22s ease-in-out infinite alternate;z-index:-3}
.load-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#020a1044,#02060c88),linear-gradient(0deg,#03060bf5,transparent 35%,#03060b99),radial-gradient(ellipse at 35% 45%,transparent 10%,#020509a6 90%);z-index:-2}
.load-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.load-brand{position:absolute;left:max(5vw,24px);top:calc(var(--safe-top) + 25px);display:flex;gap:12px;align-items:center;z-index:4;color:#dfd4b5}.load-brand>b{font:600 31px Georgia;letter-spacing:-3px;border:1px solid #cdb47d80;width:50px;height:50px;display:grid;place-items:center;border-radius:50%;padding-right:3px}.load-brand>span{font-size:11px;line-height:1.6;letter-spacing:3px}.load-brand small{font-size:9px;letter-spacing:4px;color:#c4bba5}
.load-edition{position:absolute;right:5vw;top:calc(var(--safe-top) + 45px);font-size:9px;letter-spacing:3px;color:#dddfd0a8}.load-edition i{color:var(--accent);font-style:normal;margin:0 10px}.load-edition b{font:13px Georgia;color:var(--accent)}
.load-stage{position:absolute;inset:calc(var(--safe-top) + 85px) max(6vw,25px) calc(var(--safe-bottom) + 60px);max-width:1160px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:4%;z-index:3}
.load-portrait{position:relative;min-width:0;height:100%;max-height:720px;display:flex;align-items:center;justify-content:center}.load-hero{position:relative;max-width:100%;height:96%;max-height:650px;object-fit:contain;filter:drop-shadow(0 12px 20px #0008);animation:hero-float 5s ease-in-out infinite;transform-origin:50% 70%;z-index:2}
.load-copy{width:100%;max-width:440px;position:relative;text-align:center;margin:auto}.load-kicker{font-size:10px;letter-spacing:5px;color:var(--accent);margin:0 0 12px}.load-logo{display:block;width:100%;height:clamp(85px,15vh,155px);object-fit:contain;filter:drop-shadow(0 5px 16px #0008);margin:0 auto 7px}.load-copy h1{font-size:18px;font-weight:500;letter-spacing:8px;margin:7px 0 12px;color:var(--warm)}.load-story{font-size:12px;line-height:1.9;letter-spacing:2px;color:#eee6d0bd;margin:0}.load-rule{display:flex;gap:13px;justify-content:center;align-items:center;margin:22px auto;color:var(--accent)}.load-rule span{width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}.load-rule span:last-child{transform:rotate(180deg)}.load-rule i{font-size:13px;font-style:normal;animation:spark 3s ease-in-out infinite}
.load-feature{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#eee3c4;font-size:12px;letter-spacing:1px;margin-bottom:16px}.load-feature b{font:9px/1.4 system-ui;letter-spacing:2px;color:var(--accent);border:1px solid #fff3;padding:5px 7px}
.load-progress{height:5px;border-radius:5px;background:#ffffff18;overflow:hidden;box-shadow:0 0 0 1px #ffffff12}.load-progress>div{width:7%;height:100%;background:linear-gradient(90deg,var(--glow),#fff2c7);box-shadow:0 0 18px var(--glow);position:relative;transition:width .3s}.load-progress>div:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff,transparent);animation:scan 1.7s linear infinite}.load-progress:not([aria-valuenow])>div{width:28%;animation:indeterminate 2s ease-in-out infinite}
.load-status{display:flex;justify-content:space-between;gap:12px;margin:11px 0 0;font-size:11px;color:#e3dfd0a6;letter-spacing:1px}.load-status b{color:var(--accent);font:12px ui-monospace,monospace;letter-spacing:0}.load-audio{font-size:10px;letter-spacing:1px;color:#e0dcc184;margin:14px 0 0}.load-enter,.load-retry{font:600 14px system-ui;letter-spacing:2px;cursor:pointer;color:#201609;border:1px solid #ffe8b5aa;border-radius:4px;background:linear-gradient(110deg,var(--accent),#fff0bd,var(--accent));box-shadow:0 3px 0 #171008,0 0 28px #deb55b22;min-height:46px;width:100%;margin-top:18px;padding:10px 20px;touch-action:manipulation}.load-enter span{display:inline;margin-left:20px}.load-enter:focus-visible,.load-retry:focus-visible{outline:3px solid white;outline-offset:4px}.load-enter[hidden],.load-retry[hidden]{display:none}.is-ready .load-progress>div{box-shadow:0 0 22px var(--accent)}
.load-footer{position:absolute;bottom:calc(var(--safe-bottom) + 23px);left:5vw;right:5vw;display:flex;justify-content:space-between;gap:15px;font-size:8px;letter-spacing:2px;color:#c8c1b17d}.load-chapter{color:var(--accent);opacity:.7;letter-spacing:3px}
.load-orbit{position:absolute;width:96%;aspect-ratio:1;border:1px solid var(--accent);border-radius:50%;opacity:.35;box-shadow:0 0 28px var(--deep),inset 0 0 20px var(--deep);animation:orbit 22s linear infinite}.orbit-a:before,.orbit-b:before{content:"";position:absolute;width:9px;height:9px;background:var(--accent);border-radius:50%;left:15%;top:13%;box-shadow:0 0 25px 4px var(--glow)}.orbit-b{width:78%;border-style:dashed;opacity:.3;animation-direction:reverse;animation-duration:30s}
.load-rays{position:absolute;width:125%;aspect-ratio:1;background:repeating-conic-gradient(from 10deg,transparent 0 18deg,#66eed808 20deg 25deg,transparent 29deg 42deg);border-radius:50%;animation:orbit 70s linear infinite}.load-disc{position:absolute;bottom:0;width:82%;height:12%;border:1px solid var(--accent);border-radius:50%;box-shadow:0 0 22px var(--glow),inset 0 0 28px var(--glow);opacity:.35;animation:pulse-disc 4s ease-in-out infinite}.load-beam{position:absolute;width:75%;height:100%;background:linear-gradient(0deg,#52ffc244,transparent 80%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);opacity:.5;animation:beam 4s ease-in-out infinite}.load-horizon{position:absolute;width:120%;height:30%;bottom:-5%;background:repeating-linear-gradient(0deg,transparent 0 20px,#7df5eb1c 21px 22px),repeating-linear-gradient(90deg,transparent 0 44px,#7df5eb22 45px 46px);transform:perspective(160px) rotateX(55deg);mask-image:linear-gradient(0deg,transparent,black,transparent)}.load-flare{position:absolute;left:5%;right:5%;top:24%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 20px 1px var(--glow);animation:scan-hero 6s ease-in-out infinite;opacity:.35;z-index:3}
[data-game=cowboy] .load-hero{animation:cowboy-sway 7s ease-in-out infinite}[data-game=cowboy] .load-orbit{border-style:double;border-width:8px;border-color:#a8753744;background:radial-gradient(circle,#ffc56724,transparent 70%);box-shadow:0 0 80px #fc8b3022}[data-game=cowboy] .orbit-b{border:1px dashed #ffc575;animation-duration:65s}[data-game=cowboy] .load-rays{background:repeating-conic-gradient(#ffaa2310 0 2deg,transparent 2deg 15deg)}[data-game=cowboy] .load-beam{clip-path:none;background:linear-gradient(90deg,transparent,#fcad6e22,transparent);transform:rotate(-28deg)}[data-game=cowboy] .load-disc{border:0;box-shadow:none;background:radial-gradient(ellipse,#fba54366,transparent 65%);width:120%;height:26%;filter:blur(10px)}[data-game=cowboy] .load-horizon{background:linear-gradient(0deg,#d1933644,transparent);transform:none;animation:dust 7s ease-in-out infinite}[data-game=cowboy] .load-flare{top:65%;animation-duration:12s}
[data-game=dragon] .load-hero{animation:dragon-rise 6s ease-in-out infinite;filter:drop-shadow(0 0 25px #f2b03820)}[data-game=dragon] .load-orbit{border:2px solid #efd69399;outline:1px solid #f7da6133;outline-offset:12px;box-shadow:0 0 42px #fe9c3333,inset 0 0 45px #ffab1633}[data-game=dragon] .orbit-b{border-style:dashed;outline-offset:-9px}[data-game=dragon] .load-rays{background:repeating-conic-gradient(#fadd7120 0 2deg,transparent 2deg 30deg)}[data-game=dragon] .load-beam{background:radial-gradient(ellipse at bottom,#ffd44555,transparent 65%);clip-path:none}[data-game=dragon] .load-disc{border:0;box-shadow:none;background:radial-gradient(ellipse,#ffe3a144,transparent 65%);height:25%;width:130%;filter:blur(8px)}[data-game=dragon] .load-horizon{background:radial-gradient(ellipse,#ffcf8277,transparent 60%);height:35%;transform:none;animation:dust 8s ease-in-out infinite}[data-game=dragon] .load-flare{animation-duration:8s;background:linear-gradient(90deg,transparent,#ffe9a8,transparent)}
.tk-loading.is-leaving{opacity:0;pointer-events:none}.tk-loading.is-paused *{animation-play-state:paused!important}
@keyframes hero-float{50%{transform:translateY(-15px) rotate(2deg)}}@keyframes cowboy-sway{50%{transform:translateY(-5px) rotate(-1.5deg)}}@keyframes dragon-rise{50%{transform:translate(9px,-13px) rotate(-3deg)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes beam{50%{opacity:.8;transform:scaleX(.85)}}@keyframes pulse-disc{50%{transform:scale(.9);opacity:.55}}@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes scan-hero{50%{transform:translateY(200px);opacity:.1}}@keyframes world-drift{to{transform:scale(1.06) translateX(1%)}}@keyframes spark{50%{opacity:.4;transform:scale(.8)}}@keyframes dust{50%{transform:translateX(25px) scale(1.08);opacity:.45}}@keyframes indeterminate{50%{transform:translateX(255%)}}
@media(max-width:600px) and (orientation:portrait){.load-brand{top:calc(var(--safe-top) + 18px);left:22px;gap:9px}.load-brand>b{width:38px;height:38px;font-size:25px}.load-brand>span{font-size:8px}.load-brand small{font-size:8px}.load-edition{top:calc(var(--safe-top) + 33px);right:22px;font-size:7px;letter-spacing:1px}.load-stage{inset:calc(var(--safe-top) + 72px) 30px calc(var(--safe-bottom) + 44px);grid-template-columns:1fr;grid-template-rows:minmax(100px,1fr) auto;gap:0}.load-portrait{height:100%;width:100%;max-width:330px;margin:auto}.load-hero{height:100%;max-width:95%;max-height:390px}.load-orbit{width:85%;max-height:100%}.load-copy{max-width:340px}.load-kicker{font-size:8px;letter-spacing:3px;margin:10px 0 2px}.load-logo{height:90px;margin-bottom:0}.load-copy h1{font-size:14px;letter-spacing:6px;margin:0 0 5px}.load-story{font-size:10px}.load-rule{margin:12px auto}.load-feature{font-size:10px;margin-bottom:12px}.load-feature b{font-size:8px}.load-status{font-size:10px}.load-enter{margin-top:13px;min-height:44px}.load-audio{font-size:9px;margin-top:10px}.load-footer{bottom:calc(var(--safe-bottom) + 15px);left:22px;right:22px;font-size:6px;letter-spacing:1px}.load-chapter{letter-spacing:1px}.load-disc{bottom:1%}}
@media(orientation:landscape) and (max-height:540px){.load-brand{top:calc(var(--safe-top) + 12px);left:20px}.load-brand>b{width:31px;height:31px;font-size:21px}.load-brand>span{font-size:8px;line-height:1.4}.load-brand small{font-size:7px}.load-edition{top:calc(var(--safe-top) + 22px);right:20px;font-size:7px}.load-stage{inset:calc(var(--safe-top) + 47px) max(8vw,32px) calc(var(--safe-bottom) + 27px);grid-template-columns:1fr 1.1fr;gap:9%}.load-hero{height:100%}.load-logo{height:65px;margin:0}.load-kicker{font-size:7px;margin:0;letter-spacing:3px}.load-copy h1{font-size:13px;letter-spacing:5px;margin:2px 0 3px}.load-story{font-size:9px;line-height:1.4}.load-rule{margin:7px 0}.load-rule i{font-size:10px}.load-feature{font-size:9px;margin-bottom:7px}.load-feature b{font-size:7px;padding:3px 5px}.load-status{font-size:9px;margin-top:6px}.load-enter{min-height:38px;padding:6px 12px;margin-top:9px;font-size:12px}.load-audio{font-size:8px;margin-top:5px}.load-footer{bottom:calc(var(--safe-bottom) + 10px);font-size:6px;letter-spacing:1px}}
@media(orientation:portrait) and (max-height:680px){.load-logo{height:66px}.load-rule{margin:7px 0}.load-story{display:none}.load-portrait{min-height:60px}.load-kicker{margin-top:4px}.load-copy h1{font-size:12px}.load-enter{margin-top:8px}.load-feature{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.tk-loading *{animation:none!important;transition:none!important}.load-particles{display:none}}
/* 明確限制 grid 軌道，避免 Safari 以主角圖片原始高度撐開橫式載入頁。 */
.load-stage{grid-template-rows:minmax(0,1fr)}
.load-portrait{min-height:0;min-width:0}
.load-hero{width:100%;max-height:100%}
@media(max-width:600px) and (orientation:portrait){.load-stage{grid-template-rows:minmax(60px,1fr) auto}}
.tk-loading.has-spine{background:transparent}.has-spine .load-world,.has-spine .load-vignette,.has-spine .load-hero{visibility:hidden}