/* The opening uses one JS clock, so camera, particles, and cuts pause together. */
#opening-cinematic{display:none}
html[data-opening-pending] #opening-cinematic{display:block}
html[data-opening-pending] #game-shell{visibility:hidden;pointer-events:none}
html[data-opening-pending] body{overflow:hidden}
.opening-cinematic{position:fixed;inset:0;z-index:10000;isolation:isolate;overflow:hidden;background:#f9f5e7;color:#416d63;font-family:'Noto Serif SC','Songti SC','SimSun',serif;outline:none;touch-action:manipulation;contain:layout paint style;--opening-gold:#b59960;--opening-cream:#fff9e9;--opening-mint:#426f64}
.opening-cinematic *{box-sizing:border-box}
.opening-viewport,.opening-scene{position:absolute;inset:0;overflow:hidden}
.opening-viewport{background:#fcf8ec}
.opening-scene{opacity:0;visibility:hidden;will-change:opacity}
.opening-camera{position:absolute;inset:-3%;width:106%;height:106%;max-width:none;object-fit:cover;will-change:transform}
.opening-eyebrow{display:block;font-family:Georgia,'Times New Roman',serif;font-size:12px;line-height:1.8;letter-spacing:3px;font-weight:400}
.opening-letter-scene{background:radial-gradient(ellipse at 75% 40%,#dcebdcb3,transparent 45%),linear-gradient(112deg,#fff9e9,#edf0dc)}
.opening-map{position:absolute;inset:0;width:100%;height:100%;opacity:.78}
.opening-map-route{stroke-linecap:round}
.opening-letter{position:absolute;left:11%;top:25%;width:52%;z-index:2}
.opening-letter .opening-eyebrow{color:#9e895c;margin-bottom:42px;font-size:12px}
.opening-quote-mark{position:absolute;left:-29px;top:38px;color:#b6a1707a;font:80px Georgia,serif}
.opening-letter p{font-size:clamp(24px,2.7vw,43px);line-height:1.9;letter-spacing:3px;font-weight:400;margin:0;text-shadow:0 1px #fffef3}
.opening-letter-sign{display:flex;align-items:center;gap:30px;font-size:14px;color:#8e9274;letter-spacing:3px;margin-top:32px}
.opening-letter-sign>span{font-size:21px;color:#b19a61}
.opening-mobile-break{display:none}
.opening-compass{position:absolute;width:min(32vw,440px);right:8.5%;top:23%;filter:drop-shadow(0 18px 25px #687d5c1a);will-change:transform;transform-origin:50% 50%}
.opening-compass-art{width:100%;height:auto;display:block}
.opening-compass-needle{transform-origin:200px 200px}
.opening-compass-caption{display:block;font:11px Georgia,serif;text-align:center;letter-spacing:3px;color:#9a936f;margin-top:18px}
.opening-letter-edge{position:absolute;inset:9% 5%;border:1px solid #b6ab7c30;pointer-events:none}
.opening-letter-edge:before,.opening-letter-edge:after{content:'✧';position:absolute;color:#baa17188;background:#f5f2df;font-size:19px;padding:0 10px;left:50%;transform:translateX(-50%);top:-13px}
.opening-letter-edge:after{top:auto;bottom:-13px}
.opening-arrival-wash{position:absolute;inset:0;background:linear-gradient(0deg,#173f4b99,transparent 64%),linear-gradient(90deg,#2d627a1f,transparent 70%)}
.opening-copy{position:absolute;z-index:3}
.opening-copy p{margin:20px 0 0;font-size:clamp(24px,2.8vw,42px);font-weight:400;line-height:1.85;letter-spacing:3px}
.opening-arrival-copy{left:11%;bottom:22%;color:#fff9e9;text-shadow:0 2px 14px #274c47a6}
.opening-arrival-copy .opening-eyebrow{color:#fff3c5;font-size:12px}
.opening-copy-rule{display:block;width:50px;height:1px;background:currentColor;opacity:.65;margin-top:29px}
.opening-location{position:absolute;right:9%;bottom:17%;font-size:13px;letter-spacing:3px;color:#fff9e5;text-shadow:0 1px 9px #244b47;writing-mode:vertical-rl;z-index:2}
.opening-location>i{font-style:normal;margin:16px 0;color:#f8df9c}
.opening-cloud{position:absolute;width:62%;height:27%;background:radial-gradient(ellipse at 25% 64%,#fffbead9,transparent 62%),radial-gradient(ellipse at 66% 68%,#fff8ead9,transparent 56%);filter:blur(14px);pointer-events:none;will-change:transform}
.opening-cloud-a{left:-30%;bottom:-4%;opacity:.8}
.opening-cloud-b{right:-28%;top:-11%;opacity:.8}
.opening-partner-image{filter:saturate(.75) blur(1.4px)}
.opening-partner-wash{position:absolute;inset:0;background:linear-gradient(90deg,#faf4e3ed 4%,#f8f2e1c4 38%,#f6f1dc3d 67%,#f9f4df17),linear-gradient(0deg,#f8f1dc80,transparent 55%)}
.opening-character{position:absolute;height:118dvh;width:51vw;right:3%;bottom:-31dvh;transform-origin:50% 100%;z-index:2;will-change:transform}
.opening-character>img{height:100%;width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 17px #476b5b26)}
.opening-orbit{position:absolute;right:-4%;height:100%;width:85%;z-index:1;transform-origin:70% 50%;will-change:transform}
.opening-partner-copy{left:12%;top:29%;color:#426e64}
.opening-partner-copy .opening-eyebrow{color:#9d895d}
.opening-yuzu-name{display:flex;align-items:baseline;gap:19px;font-size:clamp(41px,4.4vw,68px);letter-spacing:11px;line-height:1.5;margin-top:15px}
.opening-yuzu-name>span{font:13px Georgia,serif;letter-spacing:5px;color:#a18e65}
.opening-partner-copy p{font-size:clamp(25px,2.5vw,36px);margin-top:13px}
.opening-partner-note{position:absolute;right:12%;bottom:14%;z-index:3;font-size:16px;letter-spacing:4px;color:#5b7864;text-shadow:0 1px 4px #fffbd8}
.opening-journey{background:#294d57}
.opening-panels{position:absolute;inset:0;display:flex;gap:3px;overflow:hidden}
.opening-panel{position:relative;flex:1;min-width:0;height:100%;overflow:hidden;will-change:transform}
.opening-panel>img{position:absolute;inset:-5%;width:110%;height:110%;max-width:none;object-fit:cover;will-change:transform}
.opening-panel-0>img{object-position:45% center}
.opening-panel-1>img{object-position:50% center}
.opening-panel-2>img{object-position:50% center}
.opening-panel-3>img{object-position:54% center}
.opening-panel-wash{position:absolute;inset:0;background:linear-gradient(0deg,#183b44c7,transparent 53%,#21464e26)}
.opening-panel-number{position:absolute;top:15%;left:13%;color:#fff6d291;font:italic 17px Georgia,serif;letter-spacing:3px;border-bottom:1px solid #fff6d253;padding-bottom:9px}
.opening-panel-name{position:absolute;bottom:20%;left:13%;right:8%;display:flex;flex-direction:column;gap:13px;color:#fff9dd;text-shadow:0 2px 10px #244137}
.opening-panel-name>small{font:11px Georgia,serif;letter-spacing:2px;color:#e5ddb5;line-height:1.8}
.opening-panel-name>span{font-size:clamp(17px,1.8vw,27px);letter-spacing:4px;white-space:nowrap}
.opening-journey-copy{position:absolute;z-index:3;top:24%;left:0;right:0;text-align:center;color:#fffae9;text-shadow:0 2px 18px #174346,0 0 24px #153c45}
.opening-journey-copy>span{font-size:clamp(25px,3vw,43px);line-height:1.8;letter-spacing:7px}
.opening-journey-copy>p{font-size:clamp(13px,1.4vw,20px);letter-spacing:5px;line-height:1.9;margin:9px 0 0}
.opening-journey-trail{position:absolute;inset:0;width:100%;height:100%;z-index:2;filter:drop-shadow(0 0 6px #fff2b9);opacity:.75}
.opening-journey-trail>path{stroke-dasharray:1;stroke-linecap:round}
.opening-finale-wash{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,#fffbe5f5 4%,#fff9e8dc 30%,#faf6e2b3 58%,#eef3df6e),linear-gradient(0deg,#f4f1dc9c,transparent)}
.opening-cloud-c{left:-18%;bottom:-4%;opacity:.9;height:36%}
.opening-cloud-d{right:-15%;top:-7%;opacity:.85}
.opening-title{position:absolute;left:6%;right:6%;top:22%;text-align:center;z-index:3;transform-origin:center;will-change:transform}
.opening-title>.opening-eyebrow{font-size:12px;color:#83947a;letter-spacing:4px}
.opening-title-star{font-size:27px;color:#bca063;margin:23px 0 -4px;text-shadow:0 0 25px #fef4be}
.opening-title h1{font-family:'Noto Serif SC','Songti SC','SimSun',serif;font-size:clamp(60px,7vw,104px);line-height:1.3;font-weight:500;color:#3e726b;letter-spacing:20px;margin:6px -20px 17px 0;text-shadow:0 2px #fffef6,0 6px 25px #f9ffeb}
.opening-title-sub{display:flex;align-items:center;justify-content:center;gap:22px;font-size:clamp(17px,1.8vw,23px);letter-spacing:10px;color:#927444;margin-right:-10px}
.opening-title-sub>span{height:1px;width:43px;background:#bba776}
.opening-title>p{font-size:14px;letter-spacing:4px;color:#7a8c73;margin:32px 0 0;line-height:1.9}
.opening-title>small{display:block;font:11px Georgia,serif;letter-spacing:3px;color:#8f9f81;margin-top:25px}
.opening-title-orbit{position:absolute;width:min(60vw,700px);aspect-ratio:1;left:50%;top:49%;border:1px solid #bba87538;border-radius:50%;will-change:transform}
.opening-title-orbit>div{position:absolute;inset:13px;border:1px dashed #b5ad775c;border-radius:50%}
.opening-title-orbit>span,.opening-title-orbit>i{position:absolute;left:12%;top:11%;font-size:28px;font-style:normal;color:#c5ab72;text-shadow:0 0 15px #fffee0}
.opening-title-orbit>i{top:auto;left:auto;right:12%;bottom:11%;font-size:22px}
.opening-dust{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.opening-mote{position:absolute;bottom:-8%;display:block;width:var(--mote-size);height:var(--mote-size);border-radius:50%;background:#fff4be;box-shadow:0 0 9px #fff0a8b3;color:#ffefb3;font-size:16px;line-height:6px;font-style:normal;will-change:transform;opacity:0}
.opening-mote:nth-child(4n + 1){background:none;box-shadow:none}
.opening-film-edge{position:absolute;inset:0;z-index:5;background:linear-gradient(0deg,#2b4a3614,transparent 20%,transparent 80%,#fdf8e50d);box-shadow:inset 0 0 90px #224b4a0f;pointer-events:none}
.opening-frame{position:absolute;inset:6.5% 3%;border-top:1px solid #fff9e636;border-bottom:1px solid #fff9e636;z-index:6;pointer-events:none}
.opening-frame-corner{position:absolute;width:23px;height:23px;border-color:#efe9c65c}
.opening-frame-corner-a{top:15px;left:0;border-top:1px solid;border-left:1px solid}
.opening-frame-corner-b{bottom:15px;right:0;border-bottom:1px solid;border-right:1px solid}
.opening-topline,.opening-bottomline{position:absolute;z-index:7;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;font:11px Georgia,'Microsoft YaHei',serif;letter-spacing:3px;color:#627e6f;pointer-events:none;text-shadow:0 1px 5px #fff9d580}
.opening-topline{top:3.7%}
.opening-topline>i{font-style:normal;color:#b69b62;font-size:14px}
.opening-bottomline{bottom:3.7%;font-size:11px;letter-spacing:2px}
.opening-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#f5edd459;z-index:8}
.opening-progress>span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#b59d6b99,#eed69d);box-shadow:0 0 6px #f8e6ad}
.opening-sound{position:absolute;z-index:10;right:5%;top:10%;display:flex;align-items:center;gap:9px;min-height:35px;border:1px solid #c3c7a77a;border-radius:30px;padding:7px 14px;color:#5c7d6a;background:#fffbe6b8;backdrop-filter:blur(10px);font:12px 'Microsoft YaHei',sans-serif;letter-spacing:1px;cursor:pointer;box-shadow:0 2px 12px #455e4910}
.opening-sound>span:first-child{font-size:17px;line-height:1;color:#a58e5c}
.opening-sound:hover{background:#fffcec;box-shadow:0 3px 14px #455e4920}
.opening-sound:focus-visible{outline:2px solid #6b9784;outline-offset:5px}
.opening-sound[aria-pressed=true]{background:#edf5e5d9;border-color:#9eba9d}
.opening-loading{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#71907c;background:radial-gradient(ellipse,#fffbed,#edf2df)}
.opening-loading>span{font-size:32px;color:#bca063}
.opening-loading>p{font-size:14px;line-height:1.9;letter-spacing:3px;margin-top:27px}
.opening-cinematic[data-state=playing] .opening-loading{display:none}
.opening-cinematic[data-state=loading] .opening-sound{opacity:.85}
.opening-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.opening-cinematic[data-shot="1"] .opening-topline,.opening-cinematic[data-shot="1"] .opening-bottomline,.opening-cinematic[data-shot="3"] .opening-topline,.opening-cinematic[data-shot="3"] .opening-bottomline{color:#fff4d4;text-shadow:0 1px 8px #254e48}
@media(max-width:700px){
  .opening-eyebrow{font-size:11px;letter-spacing:2px}
  .opening-letter{left:11%;top:25%;width:82%}
  .opening-letter .opening-eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:32px}
  .opening-letter p{font-size:23px;line-height:1.9;letter-spacing:2px}
  .opening-mobile-break{display:block}
  .opening-quote-mark{left:-16px;top:32px;font-size:57px}
  .opening-letter-sign{margin-top:22px;font-size:12px;letter-spacing:2px;gap:15px}
  .opening-compass{width:48vw;right:6%;top:auto;bottom:12%;opacity:.8}
  .opening-compass-caption{font-size:10px;letter-spacing:1.3px;margin-top:5px}
  .opening-letter-edge{inset:9% 6%}
  .opening-map{opacity:.5}
  .opening-camera{object-position:54% center}
  .opening-arrival-wash{background:linear-gradient(0deg,#214c56b3,transparent 79%)}
  .opening-arrival-copy{left:10%;right:7%;bottom:23%}
  .opening-arrival-copy .opening-eyebrow{font-size:10px;letter-spacing:1.5px}
  .opening-copy p{font-size:23px;line-height:1.9;letter-spacing:1px;margin-top:17px}
  .opening-copy-rule{margin-top:24px;width:38px}
  .opening-location{font-size:11px;letter-spacing:2px;right:7%;bottom:12%;writing-mode:horizontal-tb}
  .opening-location>i{margin:0 12px}
  .opening-partner-wash{z-index:3;background:linear-gradient(0deg,#fbf6e4 0%,#fbf6e4 42%,#fbf6e4f7 46%,#fbf6e400 65%),linear-gradient(90deg,#f6f0df54,#f6f0df08);pointer-events:none}
  .opening-character{height:100dvh;width:110vw;right:-10%;bottom:-5dvh}
  .opening-character>img{object-position:center}
  .opening-partner-copy{left:10%;right:5%;top:auto;bottom:15%;z-index:4}
  .opening-partner-copy>.opening-eyebrow{font-size:10px;letter-spacing:2px}
  .opening-yuzu-name{font-size:40px;gap:15px;letter-spacing:8px;margin-top:9px}
  .opening-yuzu-name>span{font-size:12px;letter-spacing:3px}
  .opening-partner-copy p{font-size:21px;line-height:1.7;margin-top:7px}
  .opening-partner-copy .opening-copy-rule{margin-top:17px}
  .opening-partner-note{right:8%;bottom:10%;font-size:13px;letter-spacing:2px}
  .opening-orbit{width:165%;height:85%;right:-40%;top:-4%}
  .opening-cloud{width:100%;height:26%;filter:blur(12px)}
  .opening-cloud-a{left:-60%;bottom:0}
  .opening-cloud-b{right:-60%;top:-8%}
  .opening-panels{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
  .opening-panel-number{font-size:14px;top:19%;left:12%;letter-spacing:2px}
  .opening-panel-name{left:12%;right:5%;bottom:17%;gap:8px}
  .opening-panel-name>small{font-size:10px;letter-spacing:1px}
  .opening-panel-name>span{font-size:20px;letter-spacing:3px}
  .opening-panel-0 .opening-panel-name,.opening-panel-1 .opening-panel-name{bottom:29%}
  .opening-panel-2 .opening-panel-number,.opening-panel-3 .opening-panel-number{top:14%}
  .opening-panel-2 .opening-panel-name,.opening-panel-3 .opening-panel-name{bottom:24%}
  .opening-journey-copy{top:43%;padding:12px 0;background:linear-gradient(90deg,transparent,#21454fc4 20%,#21454fc4 80%,transparent)}
  .opening-journey-copy>span{font-size:24px;letter-spacing:4px}
  .opening-journey-copy>p{font-size:13px;letter-spacing:2px;margin-top:3px}
  .opening-journey-trail{opacity:.5}
  .opening-title{top:28%;left:5%;right:5%}
  .opening-title>.opening-eyebrow{font-size:10px;letter-spacing:2px}
  .opening-title-star{font-size:24px;margin-top:20px}
  .opening-title h1{font-size:66px;letter-spacing:12px;margin:8px -12px 17px 0}
  .opening-title-sub{font-size:18px;letter-spacing:6px;gap:12px;margin-right:-6px}
  .opening-title-sub>span{width:26px}
  .opening-title>p{font-size:12px;letter-spacing:2px;margin-top:26px}
  .opening-title>small{font-size:10px;letter-spacing:2px;margin-top:21px}
  .opening-title-orbit{width:106vw;top:47%;opacity:.8}
  .opening-finale-wash{background:radial-gradient(ellipse at 50% 45%,#fffbe6f5 8%,#fff9e8e6 35%,#faf6e2b3 69%,#eef3df8f)}
  .opening-cloud-c{left:-55%;bottom:5%;height:34%}
  .opening-cloud-d{right:-45%;top:-5%}
  .opening-topline,.opening-bottomline{left:7%;right:7%;font-size:10px;letter-spacing:1.5px}
  .opening-topline{top:4%}
  .opening-topline>i{font-size:12px}
  .opening-bottomline{bottom:4%;font-size:10px;letter-spacing:1px}
  .opening-bottomline>span:first-child{max-width:70%;line-height:1.8}
  .opening-frame{left:5%;right:5%;inset-block:7.5%}
  .opening-frame-corner{width:15px;height:15px}
  .opening-sound{right:7%;top:10%;min-height:34px;padding:6px 11px;font-size:12px;gap:7px}
  .opening-loading>p{font-size:12px;letter-spacing:2px}
}
@media(max-height:560px) and (min-width:701px){
  .opening-letter{top:24%}.opening-letter .opening-eyebrow{margin-bottom:22px}.opening-letter p{font-size:26px;line-height:1.7}.opening-letter-sign{margin-top:17px}.opening-compass{top:16%;width:29vw;max-width:290px}.opening-compass-caption{font-size:10px;margin-top:7px}.opening-copy p{font-size:26px;line-height:1.6}.opening-partner-copy{top:24%}.opening-yuzu-name{font-size:43px;margin-top:10px}.opening-partner-copy p{font-size:25px}.opening-copy-rule{margin-top:18px}.opening-title{top:18%}.opening-title h1{font-size:70px;margin-bottom:10px}.opening-title-star{font-size:22px;margin-top:13px}.opening-title>p{margin-top:20px;font-size:12px}.opening-title>small{margin-top:14px;font-size:10px}.opening-title-sub{font-size:18px}.opening-panel-name>span{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.opening-mote{box-shadow:none}.opening-journey-trail{filter:none}.opening-camera,.opening-character,.opening-compass,.opening-panel,.opening-title,.opening-orbit,.opening-title-orbit,.opening-cloud,.opening-mote{will-change:auto}}