/* Title artwork is shared by the web's first loading paint and its separate
   start screen. Environment scenes are reserved for later in-game transitions. */
.opening{color:#203b40;background:#a6d9e6;color-scheme:light}
html[data-lang="en"] .opening{--font-display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;--font-body:"Nunito","Segoe UI",Arial,sans-serif}
.tap,.wipe{position:fixed;inset:0;overflow:hidden}
.tap{z-index:60;cursor:default}
.opening-art{position:absolute;inset:0;display:block;pointer-events:none}
.opening-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none}
.opening-brand{position:absolute;top:max(20px,env(safe-area-inset-top,0px));left:61%;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;width:74%;max-width:1120px;text-align:center;pointer-events:none}
.opening-kicker{margin:0;padding:5px 16px;background:#d9ef65;color:#283e3d;font:900 clamp(11px,1.05vw,15px)/1.35 var(--font-body);letter-spacing:.08em;transform:rotate(-2deg);clip-path:polygon(2% 0,100% 3%,98% 100%,0 94%)}
.opening-title{margin:0;max-width:100%;font:900 clamp(46px,6.7vw,108px)/1.04 var(--font-body);letter-spacing:-.025em;color:#fff8dd;-webkit-text-stroke:4px #203d44;paint-order:stroke fill;text-shadow:0 2px 0 #203d44,0 4px 0 #203d44,0 7px 0 #203d44,1px 9px 0 rgba(29,56,61,.18);text-wrap:balance;transform:rotate(-2deg)}
html[data-lang="en"] .opening-title{font-family:var(--font-display);font-weight:400;font-size:clamp(42px,6.5vw,106px);letter-spacing:.005em;line-height:1.02}
.brand-name,.brand-party{white-space:nowrap}
.opening-actions{position:absolute;left:clamp(24px,5vw,88px);bottom:max(34px,5vh,env(safe-area-inset-bottom,0px));display:grid;justify-items:start;gap:17px;width:min(36%,430px);text-align:left}
.opening-start{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;min-height:58px;max-width:100%;padding:10px 30px;border:3px solid #243c3f;border-radius:12px 15px 11px 16px;background:#d3ef42;color:#20353b;box-shadow:0 5px 0 #243c3f;font:900 clamp(21px,2.2vw,31px)/1.15 var(--font-body);cursor:pointer;transform:rotate(-2deg);transition:transform .12s ease,box-shadow .12s ease;touch-action:manipulation}
html[data-lang="en"] .opening-start{font-family:var(--font-display);font-weight:400}
.opening-start:hover{transform:translateY(-2px) rotate(-2deg)}
.opening-start:active{transform:translateY(4px) rotate(-2deg);box-shadow:0 1px 0 #243c3f}
.opening-start:focus{outline:none}
.opening-start:focus-visible{outline:3px solid #fff8dd;outline-offset:7px}
.opening-play{font:900 16px/1 var(--font-body)}
.opening-sub{margin:0;padding:6px 10px;border-radius:5px;background:rgba(255,249,225,.9);color:#304744;font:800 clamp(11px,1vw,13px)/1.45 var(--font-body);text-wrap:balance}
@media (max-height:520px){
  .opening-brand{top:max(12px,env(safe-area-inset-top,0px));gap:6px}
  .opening-kicker{font-size:11px;padding:3px 12px}
  .opening-title,html[data-lang="en"] .opening-title{font-size:clamp(32px,10.2vh,56px);-webkit-text-stroke:3px #203d44;text-shadow:0 2px 0 #203d44,0 4px 0 #203d44}
  .opening-actions{bottom:max(18px,env(safe-area-inset-bottom,0px));gap:12px;width:38%}
  .opening-start{min-height:46px;padding:7px 23px;font-size:21px;border-width:2px;gap:10px;box-shadow:0 4px 0 #243c3f}
  .opening-play{font-size:12px}
  .opening-sub{font-size:11px;padding:4px 8px}
}
@media (orientation:portrait){
  .opening-brand{left:50%;top:max(36px,7vh,env(safe-area-inset-top,0px));gap:12px;width:92%}
  .opening-title{font-size:clamp(42px,13.2vw,76px);-webkit-text-stroke:3px #203d44;text-shadow:0 3px 0 #203d44,0 6px 0 #203d44}
  html[data-lang="en"] .opening-title{font-size:clamp(42px,13vw,84px);max-width:96%}
  .opening-kicker{font-size:11px;letter-spacing:.03em;padding:5px 12px}
  .opening-actions{left:50%;transform:translateX(-50%);width:calc(100% - 36px);max-width:420px;justify-items:center;text-align:center;bottom:max(30px,5vh,env(safe-area-inset-bottom,0px));gap:17px}
  .opening-start{min-height:58px;padding:11px 27px;font-size:26px}
  .opening-sub{font-size:11px;max-width:320px;padding:6px 10px}
}
/* Tall phones keep all five game actions visible; the scene edges merge into the sky and paving. */
@media (max-aspect-ratio:9/16){
  .opening{background:linear-gradient(#38a3f2 0 40%,#91c3d0 65%,#d2c2a6 84%,#c7b69a 100%)}
  .opening-art{inset:auto 0;top:50%;height:auto;aspect-ratio:941/1672;transform:translateY(-50%);-webkit-mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent)}
}
@media (prefers-reduced-motion:reduce){.opening-start{transition:none}.scene-arrive .opening-art{animation:none}}


/* Scene controls stay separate from the start action. */
.opening-scenes{display:flex;align-items:center;gap:1px;width:max-content;max-width:100%;padding:0 4px;border:1px solid rgba(255,255,255,.8);border-radius:15px;background:rgba(255,250,230,.9);pointer-events:auto;box-shadow:0 2px 0 rgba(34,69,58,.15)}
.opening>.opening-scenes{position:absolute;left:clamp(20px,4vw,70px);top:max(21px,env(safe-area-inset-top,0px))}
.opening-brand>.opening-scenes{justify-self:center;margin-top:3px}
.opening-scenes button{display:grid;place-items:center;box-sizing:border-box;min-width:44px;min-height:44px;border:0;padding:0;background:transparent;color:#345b59;cursor:pointer;touch-action:manipulation}
.opening-scenes button:focus-visible{outline:3px solid #316f7a;outline-offset:-3px;border-radius:11px}
.opening-scene-dot{width:11px;height:11px;box-sizing:border-box;border:2px solid #6b8c7e;border-radius:50%;background:transparent}
.opening-scene-button[aria-pressed=true] .opening-scene-dot{background:#365f62;border-color:#365f62;box-shadow:0 0 0 3px rgba(54,95,98,.14)}
.opening-scenes-pause{font:900 16px var(--font-body)}
.scene-arrive .opening-art{animation:opening-scene-arrive .35s ease-out}
@keyframes opening-scene-arrive{from{opacity:.7}to{opacity:1}}
@media (max-height:520px) and (pointer:fine){.opening-scenes button{min-width:35px;min-height:32px}.opening>.opening-scenes{top:12px}}
@media (prefers-reduced-motion:reduce){.scene-arrive .opening-art{animation:none}}

/* The web entry is a title illustration from its first HTML paint. Its bar
   replaces the start action while code and the first scene are being prepared. */
.loading-screen[data-load-presentation="opening"] .load-scene,
.loading-screen[data-load-presentation="opening"] .load-brand,
.loading-screen[data-load-presentation="opening"] .load-destination,
.loading-screen[data-load-presentation="opening"] .load-note{display:none}
.loading-screen[data-load-presentation="transition"] [data-load-opening],
.loading-screen[data-load-presentation="transition"]>.opening-scenes{display:none}
.loading-screen[data-load-presentation="opening"] .load-panel{left:clamp(24px,5vw,88px);bottom:max(34px,5vh,env(safe-area-inset-bottom,0px));transform:none;width:min(36%,430px);padding:13px 17px 12px;border-radius:10px 13px 9px 14px;background:rgba(255,250,231,.94);box-shadow:0 3px 0 rgba(37,79,76,.22)}
.loading-screen[data-load-presentation="opening"] .load-row{font-size:13px;margin-bottom:8px}
.loading-screen[data-load-presentation="opening"] .load-status{font-size:12px;margin-top:8px}
@media(max-height:520px){.loading-screen[data-load-presentation="opening"] .load-panel{width:38%;bottom:max(18px,env(safe-area-inset-bottom,0px));padding:10px 13px 9px}.loading-screen[data-load-presentation="opening"] .load-row{font-size:11px;margin-bottom:6px}.loading-screen[data-load-presentation="opening"] .load-status{font-size:11px;margin-top:6px}}
@media(orientation:portrait){.loading-screen[data-load-presentation="opening"] .load-panel{left:50%;transform:translateX(-50%);width:calc(100% - 42px);max-width:390px;bottom:max(35px,6vh,env(safe-area-inset-bottom,0px));padding:14px 17px 13px}.loading-screen[data-load-presentation="opening"] .load-row{font-size:13px}.loading-screen[data-load-presentation="opening"] .load-status{font-size:12px}}
@media(max-aspect-ratio:9/16){.loading-screen[data-load-presentation="opening"]{background:linear-gradient(#38a3f2 0 40%,#91c3d0 65%,#d2c2a6 84%,#c7b69a 100%)}}