.wtp-opening { --opening-gold:#e5c17b; position:fixed; inset:0; box-sizing:border-box; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden; color:#f6e9c9; background:transparent; font-family:Georgia,'Times New Roman',serif; }
.wtp-opening::backdrop { background:transparent; }
.wtp-opening canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.wtp-opening .opening-heading { position:absolute; top:5%; left:0; width:100%; text-align:center; pointer-events:none; }
.wtp-opening .opening-kicker { margin:0 0 12px; font:10px/1.4 system-ui,sans-serif; letter-spacing:.32em; color:#c5b994; }
.wtp-opening h1 { margin:0; font-size:clamp(25px,4.2vw,56px); font-weight:400; line-height:1.05; letter-spacing:.08em; color:#f6e2b3; text-shadow:0 3px 20px #000; }
.wtp-opening h1 em { font-size:.55em; font-weight:400; letter-spacing:0; }
.wtp-opening .opening-rule { display:block; margin:14px auto 0; color:#d9b76f; font-size:14px; }
.wtp-opening .opening-rule::before,.wtp-opening .opening-rule::after { content:''; display:inline-block; vertical-align:middle; width:70px; height:1px; margin:0 15px; background:linear-gradient(90deg,transparent,#a58a50); }
.wtp-opening .opening-rule::after { transform:rotate(180deg); }
.wtp-opening .opening-story { position:absolute; bottom:25px; left:4%; width:65%; text-align:left; pointer-events:none; }
.wtp-opening .opening-chapter { display:none; }
.wtp-opening h2 { font-size:clamp(18px,1.8vw,24px); line-height:1.25; font-weight:400; margin:0 0 9px; color:#fff0cb; }
.wtp-opening .opening-description { font:12px/1.5 system-ui,sans-serif; color:#c3c0af; margin:0; max-width:470px; }
.wtp-opening .opening-controls { position:absolute; bottom:max(22px,env(safe-area-inset-bottom)); right:max(28px,env(safe-area-inset-right)); display:flex; gap:10px; }
.wtp-opening .opening-controls button { cursor:pointer; border:1px solid #d7b86d66; border-radius:4px; background:#0b1a1be8; color:#eee0bf; font:12px/1 system-ui,sans-serif; padding:13px 17px; min-height:44px; min-width:70px; box-shadow:0 3px 16px #0003; }
.wtp-opening .opening-controls button:hover { border-color:#e5c17b; background:#233435; }
.wtp-opening .opening-controls button:focus-visible { outline:3px solid #fff0be; outline-offset:4px; }
.wtp-opening .opening-controls [data-skip] { border-color:#d7b86d; }
.wtp-opening .opening-controls [hidden] { display:none; }
.wtp-opening .opening-track { position:absolute; bottom:0; left:0; width:100%; height:2px; background:#bfa15a21; }
.wtp-opening .opening-track i { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,#6f603e,#f6d89a); }
@media(max-width:639px) { .wtp-opening .opening-heading { top:7%; } .wtp-opening .opening-story { bottom:95px; left:6%; width:88%; text-align:center; } .wtp-opening .opening-description { font-size:10px; max-width:300px; margin:auto; } .wtp-opening .opening-controls { right:18px; bottom:max(22px,env(safe-area-inset-bottom)); } .wtp-opening .opening-kicker { letter-spacing:.2em; font-size:8px; } }
@media(max-height:560px) and (min-width:640px) { .wtp-opening .opening-heading { top:3%; } .wtp-opening .opening-kicker,.wtp-opening .opening-rule,.wtp-opening .opening-description { display:none; } .wtp-opening h1 { font-size:28px; } .wtp-opening .opening-story { bottom:15px; } .wtp-opening h2 { font-size:18px; margin:0; } .wtp-opening .opening-controls { bottom:12px; right:12px; } }
@media(max-width:639px) and (max-height:740px) { .wtp-opening .opening-story { bottom:83px; } .wtp-opening .opening-story h2 { font-size:16px; margin:0; } .wtp-opening .opening-description { display:none; } .wtp-opening .opening-heading { top:5%; } }