/* Owner-supplied morning arena, 2026-10-10. DOM presentation only.
   Palette: deep teal #075e65, gold #ebcb77, cream #fff4d2.
   Original title and two decorative partners stay separate; no gameplay state. */

/* Grounded breathing uses the independent scale property, preserving arrival
   transforms and the measured footpoints. No timer or gameplay state. */
:root { --cm-title-safe-bottom:env(safe-area-inset-bottom,0px); }
/* WebKit may paint the Home indicator inset from the page canvas rather than
   the fixed title child. Keep that canvas on the same owned artwork, not the
   arena theme's pale blue. No padding is added to the viewport or controls. */
html:has(body[data-title-standalone] #cm-title:not([hidden])) {
  min-height:100lvh;
  background:#daeee6 var(--cm-title-backdrop,none) center / cover no-repeat;
}
body[data-title-standalone]:has(#cm-title:not([hidden])) { background:transparent; }
@keyframes cm-title-breathe { 0%,100% { scale:1; } 46% { scale:1.014 .986; } 62% { scale:.996 1.006; } }
:root[data-motion="full"]:not([data-quality="saver"]) #cm-title:not([hidden]) .cm-title__partner[data-title-image-state="ready"] {
  animation:cm-title-breathe 5.6s ease-in-out infinite;
}
#cm-title .cm-title__partner--blaze { transform-origin:60.606% 97.246%; }
#cm-title .cm-title__partner--cloud { transform-origin:41.069% 87.161%; }
:root[data-motion="full"]:not([data-quality="saver"]) #cm-title .cm-title__partner--cloud[data-title-image-state="ready"] { animation-duration:6.7s; animation-delay:-2.3s; }
#cm-title:has(.cm-title__film:not([hidden])) .cm-title__partner { animation-play-state:paused !important; }
#cm-title .cm-title__install { position:absolute; top:max(12px,env(safe-area-inset-top,0px)); right:calc(max(16px,env(safe-area-inset-right,0px)) + 56px); z-index:6; max-width:min(156px,calc(100% - 148px)); height:44px; min-height:44px; padding:6px 8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border:1px solid #075e65; border-radius:12px; background:#fff4d2; color:#12343e; font:inherit; font-size:12px; font-weight:700; }
body[data-landscape-entry] #cm-title .cm-title__install { position:fixed; }
#cm-title[data-motion-paused="true"] :is(.cm-title__partner,.cm-title__light,.cm-title__spark) { animation-play-state:paused !important; }
.cm-install { box-sizing:border-box; width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px); padding:22px; overflow:auto; border:2px solid #075e65; border-radius:18px; background:#f6fbeb; color:#12343e; font-family:system-ui,sans-serif; }
.cm-install::backdrop { background:#071d2bbb; }
.cm-install h2 { font-size:20px; margin:0 0 12px; }
.cm-install p { line-height:1.7; }
.cm-install button { min-height:44px; min-width:80px; padding:8px 16px; border:1px solid #075e65; border-radius:10px; background:#075e65; color:white; font:inherit; }
@media (hover:hover) {
  #cm-title :is(.cm-title__login,.cm-title__actions .cm-button):not(:disabled):hover { translate:0 -2px; }
}
.cm-title { position:fixed; inset:0; top:var(--cm-title-viewport-top,0px); bottom:auto; height:var(--cm-title-viewport-height,100dvh); z-index:var(--z-dialog); display:grid; place-items:center; padding:0; overflow:hidden; background:#12343e; }
.cm-title[hidden] { display:none; }
#cm-title .cm-title__panel {
  --cm-title-height:var(--cm-title-viewport-height,100dvh);
  position:relative; isolation:isolate; width:min(100vw,calc(var(--cm-title-height) * .5625),520px); height:var(--cm-title-height);
  container-type:inline-size;
  padding:0;
  overflow:hidden; text-align:center; color:#12343e;
  background:#daeee6 center / cover no-repeat; /* Original image is owned by titleImageLifecycle. */
}
#cm-title[hidden] .cm-title__panel { background-image:none; }
/* Controls share the portrait bounds, independently of the fixed art canvas. */
#cm-title .cm-title__controls { position:absolute; top:0; left:50%; width:min(100vw,calc(var(--cm-title-viewport-height,100dvh) * .5625),520px); height:100%; transform:translateX(-50%); }
/* Match the 941 × 1672 background cover rectangle. Art anchors are source-image
   coordinates; text, status and safe-area controls cannot move the partners. */
#cm-title .cm-title__art { position:absolute; top:0; left:50%; width:max(100%,calc(var(--cm-title-height) * 941 / 1672)); height:100%; transform:translateX(-50%); pointer-events:none; }
#cm-title .cm-title__panel::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(239,252,255,.08),transparent 52%,rgba(243,246,220,.5)); }
#cm-title .cm-title__light { position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(ellipse at 54% 28%,rgba(255,243,182,.38),transparent 60%); animation:cm-title-light 7s ease-in-out infinite; }
#cm-title .cm-title__settings { top:max(12px,env(safe-area-inset-top)); right:16px; min-width:44px; min-height:44px; width:44px; height:44px; z-index:6; color:#075e65; border:1px solid rgba(255,255,255,.9); background:#fff4d2; box-shadow:0 3px 0 #bbad75,0 5px 12px #12343e25; }
#cm-title .cm-title__logo { z-index:2; position:absolute; top:max(10%,calc(env(safe-area-inset-top,0px) + 52px)); left:8%; width:84%; animation:cm-title-arrive .85s cubic-bezier(.2,.8,.2,1) both; }
#cm-title .cm-title__logo-art { display:none; width:100%; height:auto; image-rendering:auto; filter:drop-shadow(0 6px 0 #184d5940) drop-shadow(0 9px 14px #184d5930); }
:root:lang(zh) #cm-title .cm-title__film .cm-title__logo-art[data-title-locale="zh-Hant"] { display:block; }
#cm-title > .cm-title__panel .cm-title__logo { aspect-ratio:2; }
:root:not(:lang(zh)) #cm-title > .cm-title__panel .cm-title__logo { left:calc(50% - min(42%,42cqw)); width:min(84%,84cqw); }
#cm-title > .cm-title__panel .cm-title__logo-art { display:none; height:100%; object-fit:contain; }
#cm-title > .cm-title__panel .cm-title__logo-art[data-title-image-visible="true"][data-title-image-state="ready"] { display:block; }
#cm-title .cm-title__name { margin:0; color:#ffe895; font-size:clamp(30px,7.5vw,42px); font-weight:900; line-height:1.24; letter-spacing:-.025em; overflow-wrap:anywhere; text-wrap:balance; -webkit-text-stroke:1.5px #154b55; paint-order:stroke fill; text-shadow:0 3px 0 #8f782f,0 5px 0 #154b55,0 8px 12px #12343e44; }
#cm-title .cm-title__name span { color:#c7fff1; -webkit-text-stroke-color:#075e65; text-shadow:0 3px 0 #26938b,0 5px 0 #075e65,0 8px 12px #12343e44; }
:root:lang(zh) #cm-title .cm-title__film .cm-title__name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#cm-title > .cm-title__panel .cm-title__name { position:absolute; top:50%; left:0; width:100%; height:auto; overflow:visible; clip-path:none; white-space:normal; transform:translateY(-50%); }
#cm-title > .cm-title__panel .cm-title__logo:has(.cm-title__logo-art[data-title-image-visible="true"][data-title-image-state="ready"]) .cm-title__name { top:0; width:1px; height:1px; transform:none; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
:root:lang(ja) #cm-title .cm-title__name, :root:lang(th) #cm-title .cm-title__name { font-size:clamp(23px,6vw,30px); line-height:1.5; }
/* Foreign fallback text follows the narrow TITLE panel on short desktops. */
:root:not(:lang(zh)) #cm-title > .cm-title__panel .cm-title__name { font-size:clamp(23px,7.5cqw,42px); }
:root:lang(ja) #cm-title > .cm-title__panel .cm-title__name, :root:lang(th) #cm-title > .cm-title__panel .cm-title__name { font-size:clamp(18px,6cqw,30px); }
#cm-title .cm-title__partners { position:absolute; left:10%; bottom:23%; width:80%; height:25%; pointer-events:none; }
#cm-title .cm-title__partner { position:absolute; bottom:0; width:52%; height:100%; object-fit:contain; object-position:center bottom; image-rendering:auto; filter:drop-shadow(0 8px 5px #24464238); animation:cm-title-partner .7s .3s ease-out both; }
#cm-title .cm-title__partner--blaze { left:0; }
/* Cloud feet end at source y=1104 of 1254; compensate its transparent padding. */
#cm-title .cm-title__partner--cloud { right:0; bottom:-2.5%; width:49%; animation-delay:.5s; }
#cm-title .cm-title__spark { position:absolute; width:12px; height:12px; background:#fff4bb; clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%); animation:cm-title-spark 4.8s ease-in-out infinite; }
#cm-title .cm-title__spark--one { top:16%; left:14%; }
#cm-title .cm-title__spark--two { top:32%; right:5%; width:8px; height:8px; animation-delay:2s; }
#cm-title .cm-title__entry { position:absolute; top:80%; bottom:max(6%,calc(env(safe-area-inset-bottom,0px) + 28px)); left:6%; right:6%; z-index:3; display:grid; grid-template-rows:minmax(0,1fr); place-items:center; padding:0; }
#cm-title .cm-title__login, #cm-title .cm-title__actions .cm-button { position:relative; min-height:52px; width:100%; margin:0; border:2px solid #fff2b4; border-radius:14px; background:linear-gradient(#ffe89b,#eec568); color:#183c42; font-size:calc(17px * var(--text-scale,1)); font-weight:900; line-height:1.25; letter-spacing:.03em; padding:8px 12px; box-shadow:0 4px 0 #876b2c,0 8px 20px #12343e30; text-shadow:0 1px #fff9; transition:transform .15s,box-shadow .15s; }
#cm-title .cm-title__login { width:82%; letter-spacing:.2em; }
#cm-title .cm-title__boot-status { position:absolute; top:58%; left:6%; right:6%; z-index:5; padding:10px 12px; border-radius:10px; background:#f6fbebf5; color:#183c42; pointer-events:auto; text-align:center; font-size:14px; line-height:1.5; }
#cm-title .cm-title__boot-status p { margin:0; }
#cm-title .cm-title__boot-status button { min-height:44px; margin-top:8px; padding:8px 16px; border:1px solid #075e65; border-radius:8px; color:#183c42; background:#fff4d2; font:inherit; }
#cm-title .cm-title__actions { display:flex; flex-direction:column; align-self:end; gap:8px; width:92%; margin:0; }
#cm-title .cm-title__actions .cm-button { min-height:44px; padding:6px 12px; }
#cm-title .cm-title__actions .cm-button:not(.cm-button--primary) { background:#f6fbeb; border-color:#fff; box-shadow:0 4px 0 #6a9890,0 8px 20px #12343e20; }
#cm-title .cm-title__login:active, #cm-title .cm-title__actions .cm-button:active { transform:translateY(2px); box-shadow:0 2px 0 #876b2c; }
#cm-title button:focus-visible { outline:3px solid #075e65; outline-offset:4px; }
#cm-title .cm-title__login:disabled, #cm-title .cm-title__actions button:disabled { opacity:.55; }
#cm-title .cm-title__feedback { position:absolute; inset:0; z-index:3; pointer-events:none; }
#cm-title .cm-title__background-feedback { position:absolute; top:34%; left:5%; right:5%; max-height:20%; overflow:auto; pointer-events:auto; color:#183c42; background:#f6fbebed; border-radius:10px; padding:6px 8px; margin-bottom:4px; font-size:calc(12px * var(--text-scale,1)); font-weight:700; line-height:1.5; }
#cm-title .cm-title__background-feedback p { margin:0; overflow-wrap:anywhere; }
#cm-title #cm-title-background-retry { min-height:44px; min-width:44px; max-width:100%; margin-top:4px; padding:6px 12px; border:1px solid #075e65; border-radius:8px; background:#fff4d2; color:#183c42; font:inherit; cursor:pointer; }
#cm-title .cm-title__note { position:absolute; bottom:max(2%,env(safe-area-inset-bottom,0px)); left:4%; right:4%; z-index:3; margin:0; min-height:20px; color:#183c42; font-size:12px; font-weight:700; line-height:1.5; text-shadow:0 1px 2px #fff; }
.cm-title [hidden], .cm-title__actions[hidden], .cm-title__login[hidden], #cm-opening[hidden] { display:none !important; }
body[data-portrait-frame] #cm-title .cm-title__panel { --cm-title-height:var(--cm-viewport-height); width:390px; }
@keyframes cm-title-arrive { 0% { opacity:0; transform:translateY(12px) scale(.9); } 65% { opacity:1; transform:translateY(0) scale(1.035); } 100% { opacity:1; transform:none; } }
@keyframes cm-title-partner { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes cm-title-light { 50% { opacity:.45; } }
@keyframes cm-title-spark { 0%,100% { opacity:.2; transform:scale(.75); } 50% { opacity:.9; transform:scale(1); } }
:root[data-motion="reduced"] #cm-title *, :root[data-quality="saver"] #cm-title * { animation:none !important; transition:none; }
@media(prefers-reduced-motion:reduce) { :root:not([data-motion]) #cm-title * { animation:none !important; transition:none; } }
@media(max-height:650px) and (orientation:portrait) {
  #cm-title .cm-title__actions { display:grid; grid-template-columns:minmax(0,1fr); }
  #cm-title .cm-title__entry { top:auto; bottom:max(12px,env(safe-area-inset-bottom,0px)); }
  #cm-title .cm-title__note { top:max(31%,calc(env(safe-area-inset-top,0px) + 128px)); bottom:auto; }
  #cm-title .cm-title__background-feedback { top:max(38%,calc(env(safe-area-inset-top,0px) + 172px)); }
  #cm-title .cm-title__actions .cm-button { min-width:0; overflow-wrap:normal; word-break:normal; }
  #cm-title .cm-title__name { font-size:29px; }
  :root:lang(ja) #cm-title .cm-title__name, :root:lang(th) #cm-title .cm-title__name { font-size:23px; }
}

/* Only the visible title escapes the sideways game frame. Game layout and its
   transform resume unchanged when the title is hidden. The art is scaled back
   to the exact R8 frame; the same interactive DOM stays at device CSS size. */
body[data-portrait-frame]:has(#cm-title:not([hidden])) { overflow:visible; }
body[data-portrait-frame] #cm-title {
  inset:auto; left:50%; top:50%; width:100vw; height:100dvh;
  grid-template: minmax(0,1fr) / minmax(0,1fr);
  transform:translate(-50%,-50%) scale(calc(1 / var(--cm-frame-scale)));
}
body[data-portrait-frame] #cm-title .cm-title__panel { transform:scale(var(--cm-frame-scale)); }
body[data-portrait-frame] #cm-title .cm-title__controls { width:100%; }
body[data-portrait-frame] #cm-title .cm-title__settings { right:max(16px,env(safe-area-inset-right,0px)); }
body[data-portrait-frame] #cm-title .cm-title__entry {
  top:auto; bottom:max(12px,env(safe-area-inset-bottom,0px)); left:50%; right:auto;
  width:min(560px,calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 32px));
  transform:translateX(-50%);
}
body[data-portrait-frame] #cm-title .cm-title__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
body[data-portrait-frame] #cm-title .cm-title__actions .cm-button { min-width:0; overflow-wrap:normal; word-break:normal; }
body[data-portrait-frame] #cm-title .cm-title__background-feedback,
body[data-portrait-frame] #cm-title .cm-title__note {
  top:max(68px,calc(env(safe-area-inset-top,0px) + 56px)); bottom:auto;
  width:max(120px,calc((100% - 390px * var(--cm-frame-scale)) / 2 - max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)) - 16px));
  max-height:calc(100% - 180px); overflow:auto;
}
body[data-portrait-frame] #cm-title .cm-title__background-feedback { left:max(16px,env(safe-area-inset-left,0px)); right:auto; }
body[data-portrait-frame] #cm-title .cm-title__note {
  left:auto; right:max(16px,env(safe-area-inset-right,0px)); padding:6px 8px;
  border-radius:10px; background:#f6fbebed; pointer-events:auto;
}
body[data-portrait-frame] #cm-title .cm-title__note:empty { display:none; }

/* ---- Opening: overlay, letters, naming ----------------------------------- */
/* Keyboard height is a vertical budget, never the width of a naming stage.
   The title's 9:16 poster/control bounds otherwise shrink on iPhone focus. */
#cm-title:has(#cm-opening:not([hidden])) > .cm-title__panel { width:100%; }
#cm-title:has(#cm-opening:not([hidden])) > .cm-title__controls {
  top:0; bottom:auto; left:0; width:100%; height:var(--cm-visible-viewport-height,100%); transform:none;
}
#cm-opening {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: var(--sp-5);
  background: rgba(4, 10, 12, 0.92);
  color: var(--c-text-1);
}

/* A short opening host must not strand the next action below its bounds.
   Only the existing card scrolls; envelope/story coordinates stay unchanged. */
.cm-opening__letter,
.cm-opening__name,
.cm-opening__egg-choice {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cm-opening__envelope {
  position: absolute;
  right: 10%;
  bottom: 22%;
  width: 68px;
  height: 50px;
  border: 0;
  border-radius: 6px;
  background:
    linear-gradient(32deg, transparent 48%, rgba(80, 60, 20, 0.45) 49% 51%, transparent 52%),
    linear-gradient(-32deg, transparent 48%, rgba(80, 60, 20, 0.45) 49% 51%, transparent 52%),
    var(--c-paper);
  box-shadow: 0 0 0 2px var(--c-gold), 0 0 16px rgba(244, 183, 64, 0.30);
  cursor: pointer;
}
/* A glow that breathes; the envelope itself stays put so it is easy to hit. */
/* The glow is its own layer and only its opacity moves: no repaint per frame. */
.cm-opening__envelope::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 34px rgba(244, 183, 64, 0.70);
  opacity: 0;
  pointer-events: none;
  animation: cm-envelope 1.8s var(--ease-in-out) infinite;
}
@keyframes cm-envelope { 50% { opacity: 1; } }

/* Letters are paper. */
.cm-opening__letter {
  width: min(100%, 420px);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--r-card);
  background: repeating-linear-gradient(180deg, transparent 0 29px, var(--c-paper-line) 29px 30px) 0 22px / 100% auto no-repeat, var(--c-paper);
  color: var(--c-paper-ink);
  box-shadow: var(--shadow-lift);
  font-size: calc(16px * var(--text-scale));
  line-height: 30px;
  text-align: left;
  animation: cm-rise var(--dur-slow) var(--ease-out);
}
.cm-opening__letter p { margin: 0 0 18px; white-space: pre-line; }
.cm-opening__letter small { display: block; color: var(--c-paper-muted); text-align: right; }

.cm-opening__letter button,
.cm-opening__name button {
  display: block;
  min-width: 120px;
  min-height: var(--control);
  margin: var(--sp-5) auto 0;
  padding: 0 var(--sp-5);
  border: 0;
  border-radius: var(--r-control);
  background: var(--c-accent);
  color: var(--c-text-on-accent);
  font-size: var(--fs-body);
  font-weight: var(--fw-heavy);
}
.cm-opening__letter button { background: var(--c-paper-ink); color: var(--c-paper); }

.cm-opening__name {
  width: min(100%, 380px);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sheet);
  background: var(--c-surface-1);
  box-shadow: var(--shadow-lift);
  animation: cm-pop var(--dur-base) var(--ease-spring);
}
.cm-opening__name h2,
.cm-opening__name > p { margin: 0 0 var(--sp-5); font-size: var(--fs-title-2); line-height: var(--lh-title-2); font-weight: var(--fw-heavy); }
.cm-opening__name label { display: block; margin-bottom: var(--sp-3); color: var(--c-text-2); font-size: var(--fs-body-sm); }
.cm-opening__name input {
  width: 100%;
  max-width: 260px;
  min-height: 56px;
  padding: 8px;
  border: 1px solid var(--c-line-3);
  border-radius: var(--r-control);
  background: var(--c-ground);
  color: var(--c-text-1);
  font-size: calc(24px * var(--text-scale));
  font-weight: var(--fw-heavy);
  letter-spacing: 0.12em;
  text-align: center;
}
.cm-opening__name input:focus { border-color: var(--c-accent); outline: none; box-shadow: 0 0 0 3px var(--c-accent-soft); }
.cm-opening__choices { display: flex; justify-content: center; gap: var(--sp-3); }
.cm-opening__choices button {
  min-width: 112px;
  min-height: var(--control);
  margin: 0;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-control);
  background: var(--c-surface-2);
  color: var(--c-text-1);
  font-weight: var(--fw-heavy);
}
.cm-opening__choices button:first-child { border-color: transparent; background: var(--c-accent); color: var(--c-text-on-accent); }
.cm-opening__egg {
  width: 56px;
  height: 68px;
  margin: var(--sp-5) auto;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(ellipse at 34% 24%, #ffffff, #e4f3f0 45%, #7fa29c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 10px 26px rgba(86, 227, 194, 0.25);
}

/* ---- Opening story: cards over the digital world -------------------------- */
.cm-opening-story {
  position: absolute;
  inset: 0;
  overflow: clip;
  cursor: pointer;
  color: var(--c-text-1);
  background:
    radial-gradient(80% 50% at 50% 28%, rgba(86, 227, 194, 0.18), rgba(86, 227, 194, 0) 70%),
    linear-gradient(rgba(86, 227, 194, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(86, 227, 194, 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, #0a1a1f, #07110f);
}
.cm-opening-story__card {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 50%;
  padding: 4% 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2%;
  will-change: transform;
  pointer-events: none;
}
.cm-opening-story__text {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 3% 5%;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-card);
  background: var(--c-surface-glass);
  -webkit-backdrop-filter: var(--backdrop-glass);
  backdrop-filter: var(--backdrop-glass);
  color: var(--c-text-1);
  font-size: clamp(13px, 2dvh, 17px);
  font-weight: var(--fw-strong);
  line-height: 1.65;
  white-space: pre-line;
}
.cm-opening-story__text::before { content: ""; position: absolute; top: 8px; left: 8px; width: 9px; height: 9px; background: var(--motif-stair) no-repeat; }
.cm-opening-story__picture {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Fit the image itself to its card: an oversized painted frame used to leave
   black bars around contain-fitted artwork. Intrinsic aspect ratios preserve
   the whole illustration; transparent layout space belongs to the story. */
.cm-opening-story__picture img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; image-rendering: auto; border-radius: var(--r-control); box-shadow: 0 0 24px rgba(86,227,194,.1); }
.cm-opening-story__text { flex-shrink: 0; }
/* Three separate frames keep every image visible, including feet and ears. */
.cm-opening-story__card--0 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) minmax(0,1fr); gap: 8px; }
.cm-opening-story__card--0 .cm-opening-story__text { grid-column: 1 / -1; }
.cm-opening-story__arena { width: 100%; height: 100%; }
.cm-opening-story__arena--0 { grid-column: 1; grid-row: 2; }
.cm-opening-story__arena--1 { grid-column: 2; grid-row: 2; }
.cm-opening-story__arena--2 { grid-column: 1 / -1; grid-row: 3; }
.cm-opening-story__card--3 { justify-content: center; }

/* Reduced motion: the player's choice (data-motion on <html>, resolved from
   the setting and, when it is "system", from the OS); the media query only
   covers a page that has no data-motion yet. */
:root[data-motion="reduced"] .cm-opening__envelope::after { animation: none; opacity: 0.6; }
:root[data-motion="reduced"] .cm-opening__letter, :root[data-motion="reduced"] .cm-opening__name { animation-name: cm-fade; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) .cm-opening__envelope::after { animation: none; opacity: 0.6; }
  :root:not([data-motion]) .cm-opening__letter, :root:not([data-motion]) .cm-opening__name { animation-name: cm-fade; }
}

/* Local eight-egg opening. Existing art, native radio keyboard behavior. */
.cm-opening__egg-choice { width:min(100%,380px); max-height:100%; overflow:auto; padding:16px; border:1px solid var(--c-line-2); border-radius:var(--r-sheet); background:var(--c-surface-1); }
.cm-opening__egg-choice h2 { margin:0 0 6px; font-size:20px; line-height:1.3; }
.cm-opening__egg-choice > p { margin:0 0 12px; color:var(--c-text-2); font-size:14px; line-height:1.5; }
.cm-opening__egg-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cm-opening__egg-option { position:relative; min-height:90px; display:grid; grid-template-columns:60px 1fr; align-items:center; gap:6px; padding:8px; border:2px solid var(--c-line-2); border-radius:var(--r-control); color:var(--c-text-2); cursor:pointer; }
.cm-opening__egg-option img { width:60px; height:70px; object-fit:contain; image-rendering:auto; }
.cm-opening__egg-option span { font-size:13px; line-height:1.3; overflow-wrap:anywhere; }
.cm-opening__egg-option input { position:absolute; width:18px; height:18px; top:4px; right:4px; accent-color:var(--c-accent); }
.cm-opening__egg-option:has(input:checked) { border-color:var(--c-gold); color:var(--c-text-1); background:var(--c-surface-3); }
.cm-opening__egg-option:has(input:focus-visible) { outline:3px solid var(--c-accent); outline-offset:2px; }
.cm-opening__egg-actions { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.cm-opening__egg-actions button { min-height:44px; padding:8px 12px; border:1px solid var(--c-line-2); border-radius:var(--r-control); font:inherit; font-weight:var(--fw-heavy); background:var(--c-accent); color:var(--c-text-on-accent); }
.cm-opening__egg-actions .cm-opening__back, .cm-opening__name .cm-opening__back { background:var(--c-surface-2); color:var(--c-text-2); }
.cm-opening__name .cm-opening__back { margin-top:10px; }
@media(max-width:359px) { .cm-opening__egg-choice { padding:10px; } .cm-opening__egg-option { grid-template-columns:48px 1fr; gap:3px; padding:5px; } .cm-opening__egg-option img { width:48px; } }

.cm-opening-story[aria-busy="true"] .cm-opening-story__card { visibility: hidden; }
.cm-opening-story__loading { position: absolute; inset: 45% 16px auto; margin: 0; text-align: center; color: var(--text, #e8f5ef); font-size: 16px; }
.cm-opening-story__loading p { margin:0 0 12px; }
.cm-opening-story__art-status { position:absolute; top:max(12px,env(safe-area-inset-top,0px)); left:16px; right:16px; z-index:2; margin:0; padding:8px 10px; border-radius:8px; background:#10292be8; color:#e8f5ef; text-align:center; font-size:13px; line-height:1.5; }
.cm-opening-story__loading button { min-height:44px; max-width:100%; margin:4px; padding:10px 14px; border:1px solid var(--c-line-2); border-radius:var(--r-control); background:var(--c-surface-2); color:var(--c-text-1); font:inherit; line-height:1.4; }

/* NS33 film shares the TITLE portrait frame and approved DOM brand. */
#cm-title .cm-title__film-watch { position:absolute; top:max(12px,env(safe-area-inset-top)); left:12px; z-index:6; min-height:44px; max-width:65%; padding:8px 12px; border:1px solid #fff4d2; border-radius:10px; background:#12343edb; color:#fff4d2; font-size:13px; }
#cm-title:has(.cm-title__install:not([hidden])) .cm-title__film-watch { left:max(12px,env(safe-area-inset-left,0px)); max-width:calc(100% - max(12px,env(safe-area-inset-left,0px)) - max(16px,env(safe-area-inset-right,0px)) - 224px); height:44px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#cm-title .cm-title__film { position:absolute; inset:0; margin:auto; width:min(100vw,56.25dvh,520px); height:100%; overflow:hidden; background:#12343e; z-index:20; --cm-title-height:100dvh; }
#cm-title .cm-title__film-video { display:block; width:100%; height:100%; object-fit:cover; }
#cm-title .cm-title__film .cm-title__art { width:100%; text-align:center; }
#cm-title .cm-title__film-controls { position:absolute; inset:max(12px,env(safe-area-inset-top)) 12px auto; z-index:4; display:flex; justify-content:space-between; gap:12px; }
#cm-title .cm-title__film-controls button { min-width:44px; min-height:44px; max-width:60%; padding:8px 12px; border:1px solid #fff4d2b3; border-radius:10px; background:#12343edb; color:#fff4d2; font-size:14px; line-height:1.4; }
#cm-title .cm-title__film-status { position:absolute; left:12px; right:12px; bottom:10%; padding:10px; text-align:center; background:#12343edb; color:#fff4d2; }
#cm-title .cm-title__film button:focus-visible { outline:3px solid #ffe895; outline-offset:3px; }
body[data-portrait-frame] #cm-title .cm-title__film { width:390px; --cm-title-height:var(--cm-viewport-height); }

/* Public landscape entry: one full-bleed city scene. Existing transparent
   logo/partners and live controls compose over it; no portrait-poster column. */
body[data-landscape-entry] #cm-title {
  --cm-entry-left: max(24px, env(safe-area-inset-left), 5vw);
  --cm-entry-logo-top: max(64px, 10dvh);
  --cm-entry-logo-width: clamp(260px, 38vw, 480px);
  --cm-entry-action-width: min(32vw, 340px);
  --cm-entry-action-top: calc(var(--cm-entry-logo-top) + var(--cm-entry-logo-width) / 2 + 24px);
  top: var(--cm-visible-viewport-top, 0px); bottom: auto;
  height: var(--cm-title-viewport-height, var(--cm-visible-viewport-height, 100dvh));
  grid-template: none; gap: 0; padding: 0;
}
body[data-landscape-entry] #cm-title > .cm-title__panel {
  --cm-title-height: var(--cm-title-viewport-height, var(--cm-visible-viewport-height, 100dvh));
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-height: none;
  transform: none; background-size: cover; background-position: center 58%;
}
body[data-landscape-entry] #cm-title > .cm-title__panel::before {
  background: linear-gradient(90deg, rgba(244,250,232,.76), rgba(244,250,232,.26) 38%, transparent 64%);
}
body[data-landscape-entry] #cm-title > .cm-title__panel > .cm-title__art {
  inset: 0; width: 100%; height: 100%; transform: none;
}
/* Include the art parent to outrank the existing non-Chinese logo positioning
   without changing image selection, aspect ratio or fallback text. */
body[data-landscape-entry] #cm-title > .cm-title__panel > .cm-title__art > .cm-title__logo {
  top: var(--cm-entry-logo-top); left: var(--cm-entry-left);
  width: var(--cm-entry-logo-width); height: auto; aspect-ratio: 2;
}
/* Match the unchanged 941x1672 arena's cover rectangle and center 58%
   crop. All footpoints/sizes below are measured in that source image, not
   viewport percentages. Far bridge: (450,1024); front deck: (575,1117). */
body[data-landscape-entry] #cm-title > .cm-title__panel .cm-title__partners {
  --cm-ground-scale: max(calc(100cqw / 941), calc(var(--cm-title-height) / 1672));
  --cm-blaze-x: 450; --cm-blaze-y: 1024; --cm-blaze-size: 118;
  --cm-cloud-x: 575; --cm-cloud-y: 1117; --cm-cloud-size: 220;
  left: 50%; right: auto; bottom: auto;
  top: calc((var(--cm-title-height) - var(--cm-ground-scale) * 1672) * .58);
  width: calc(var(--cm-ground-scale) * 941);
  height: calc(var(--cm-ground-scale) * 1672);
  transform: translateX(-50%); isolation: isolate;
}
body[data-landscape-entry] #cm-title > .cm-title__panel .cm-title__partner {
  height: auto; object-fit: contain; object-position: center bottom;
  bottom: auto; right: auto; z-index: 1; filter: none;
  /* Keep the existing arrival timing, but feet must not translate off deck. */
  animation-name: cm-title-grounded-arrive;
}
@keyframes cm-title-grounded-arrive { from { opacity: 0; } to { opacity: 1; } }
/* Position the actual feet, not the transparent image box's lower edge.
   Blaze foot midpoint ~820,1130 in 1353x1162; Cloud ~515,1093 in 1254x1254. */
body[data-landscape-entry] #cm-title > .cm-title__panel .cm-title__partner--blaze {
  width: calc(var(--cm-ground-scale) * var(--cm-blaze-size));
  left: calc(var(--cm-ground-scale) * (var(--cm-blaze-x) - 820 * var(--cm-blaze-size) / 1353));
  top: calc(var(--cm-ground-scale) * (var(--cm-blaze-y) - 1130 * var(--cm-blaze-size) / 1353));
}
body[data-landscape-entry] #cm-title > .cm-title__panel .cm-title__partner--cloud {
  width: calc(var(--cm-ground-scale) * var(--cm-cloud-size));
  left: calc(var(--cm-ground-scale) * (var(--cm-cloud-x) - 515 * var(--cm-cloud-size) / 1254));
  top: calc(var(--cm-ground-scale) * (var(--cm-cloud-y) - 1093 * var(--cm-cloud-size) / 1254));
}
/* Small contact shadows share the same footpoints; no detached body halo.
   The image lifecycle still owns readiness and whether any art is visible. */
body[data-landscape-entry] #cm-title > .cm-title__panel .cm-title__partners::before,
body[data-landscape-entry] #cm-title > .cm-title__panel .cm-title__partners::after {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, #19332a55 0%, #19332a22 45%, transparent 72%);
}
body[data-landscape-entry] #cm-title > .cm-title__panel .cm-title__partners:has(.cm-title__partner--blaze[data-title-image-state="ready"][data-title-image-visible="true"])::before {
  content: ""; left: calc(var(--cm-ground-scale) * var(--cm-blaze-x)); top: calc(var(--cm-ground-scale) * var(--cm-blaze-y));
  width: calc(var(--cm-ground-scale) * var(--cm-blaze-size) * .61); height: calc(var(--cm-ground-scale) * var(--cm-blaze-size) * .075);
}
body[data-landscape-entry] #cm-title > .cm-title__panel .cm-title__partners:has(.cm-title__partner--cloud[data-title-image-state="ready"][data-title-image-visible="true"])::after {
  content: ""; left: calc(var(--cm-ground-scale) * var(--cm-cloud-x)); top: calc(var(--cm-ground-scale) * var(--cm-cloud-y));
  width: calc(var(--cm-ground-scale) * var(--cm-cloud-size) * .32); height: calc(var(--cm-ground-scale) * var(--cm-cloud-size) * .05);
}
/* A shallower cover crop shows less foreground. Move both partners further
   up the SAME bridge and reduce their perspective size, not the background. */
@media (min-aspect-ratio: 5/2) {
  body[data-landscape-entry] #cm-title > .cm-title__panel .cm-title__partners {
    --cm-blaze-x: 450; --cm-blaze-y: 1010; --cm-blaze-size: 95;
    --cm-cloud-x: 540; --cm-cloud-y: 1074; --cm-cloud-size: 170;
  }
}
@media (min-aspect-ratio: 10/3) {
  body[data-landscape-entry] #cm-title > .cm-title__panel .cm-title__partners {
    --cm-blaze-x: 440; --cm-blaze-y: 1008; --cm-blaze-size: 72;
    --cm-cloud-x: 510; --cm-cloud-y: 1045; --cm-cloud-size: 125;
  }
}
@media (min-aspect-ratio: 9/2) {
  body[data-landscape-entry] #cm-title > .cm-title__panel .cm-title__partners {
    --cm-blaze-x: 450; --cm-blaze-y: 1004; --cm-blaze-size: 50;
    --cm-cloud-x: 505; --cm-cloud-y: 1018; --cm-cloud-size: 90;
  }
}
body[data-landscape-entry] #cm-title > .cm-title__controls {
  position: absolute; transform: none;
  top: var(--cm-entry-action-top); bottom: max(16px, env(safe-area-inset-bottom));
  left: calc(var(--cm-entry-left) + (var(--cm-entry-logo-width) - var(--cm-entry-action-width)) / 2);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 10px;
  width: var(--cm-entry-action-width); height: auto; min-height: 0;
  padding: 4px 6px 12px; box-sizing: border-box;
  overflow-y: auto; overscroll-behavior: contain;
}
body[data-landscape-entry] #cm-title .cm-title__entry {
  position: relative; inset: auto; transform: none;
  display: block; width: 100%; min-height: 0;
  flex: 0 0 auto; padding: 0;
}
body[data-landscape-entry] #cm-title .cm-title__actions {
  position: static; display: grid; grid-template-columns: minmax(0, 1fr);
  width: 100%; gap: 10px; align-self: auto;
}
body[data-landscape-entry] #cm-title .cm-title__login { width: 100%; }
body[data-landscape-entry] #cm-title .cm-title__actions .cm-button { white-space: normal; overflow-wrap: anywhere; }
body[data-landscape-entry] #cm-title .cm-title__feedback { position: static; display: contents; }
body[data-landscape-entry] #cm-title :is(.cm-title__boot-status, .cm-title__background-feedback, .cm-title__note) {
  position: relative; inset: auto; width: 100%; margin: 0;
  flex: 0 0 auto; max-height: none; overflow-wrap: anywhere;
  color: #183c42; background: #f6fbebd9; border-radius: 10px; padding: 8px 10px;
  pointer-events: auto;
}
body[data-landscape-entry] #cm-title .cm-title__background-feedback[aria-hidden="true"],
body[data-landscape-entry] #cm-title .cm-title__note:empty { display: none; }
/* The note owns two persistent spans. :empty alone does not match an empty
   message plus a hidden prefetch status, leaving a padded blank landscape row. */
#cm-title #cm-title-note:has(> span):not(:has(> span:not([hidden]):not(:empty))) { display:none; }
/* These utility buttons stay on the viewport, not inside the narrow action
   group. The existing hidden state and keyboard targets remain authoritative. */
body[data-landscape-entry] #cm-title :is(.cm-title__settings, .cm-title__film-watch) {
  position: fixed; top: max(12px, env(safe-area-inset-top));
}
body[data-landscape-entry] #cm-title .cm-title__settings { right: max(16px, env(safe-area-inset-right)); }
body[data-landscape-entry] #cm-title .cm-title__film-watch { left: max(16px, env(safe-area-inset-left)); }
@media (max-height: 480px) {
  body[data-landscape-entry] #cm-title {
    --cm-entry-logo-top: 56px;
    --cm-entry-logo-width: clamp(180px, 34vw, 320px);
    --cm-entry-action-top: calc(var(--cm-entry-logo-top) + var(--cm-entry-logo-width) / 2 + 10px);
  }
  body[data-landscape-entry] #cm-title .cm-title__actions { gap: 8px; }
  body[data-landscape-entry] #cm-title > .cm-title__controls { gap: 8px; padding-top: 2px; }
}
body[data-landscape-entry] #cm-title .cm-title__film {
  width: 100%; height: 100%; --cm-title-height: var(--cm-visible-viewport-height, 100dvh);
}
/* Never crop the portrait film to the landscape viewport. The film's existing
   brand overlay stays in the centered portrait-safe area, controls stay wide. */
body[data-landscape-entry] #cm-title .cm-title__film-video { object-fit: contain; }
body[data-landscape-entry] #cm-title .cm-title__film .cm-title__art {
  width: min(100%, calc(var(--cm-title-height) * 9 / 16));
}
/* Opening remains the same mounted overlay. Keyboard height and top offset
   come from the shared controller; pinch zoom is not cancelled. */
body[data-landscape-entry] #cm-opening {
  position: fixed; top: var(--cm-visible-viewport-top, 0px); bottom: auto;
  height: var(--cm-visible-viewport-height, 100dvh);
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
body[data-landscape-entry] .cm-opening__egg-choice { width: min(100%, 760px); }
body[data-landscape-entry] .cm-opening__egg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-landscape-entry] .cm-opening__egg-actions { flex-direction: row; }
body[data-landscape-entry] .cm-opening__egg-actions button { flex: 1; min-width: 0; }
/* Only the contents of each original half-height timeline card reflow. The
   card positions, transforms, reveal order and frame timings are unchanged. */
body[data-landscape-entry] .cm-opening-story__card {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows: minmax(0, 1fr); align-items: stretch;
  padding: 8px 16px; gap: 12px;
}
body[data-landscape-entry] .cm-opening-story__text {
  min-width: 0; min-height: 0; max-height: 100%; overflow-y: auto;
  padding: 10px 14px; font-size: clamp(13px, 2dvh, 17px);
  pointer-events: auto; overscroll-behavior: contain;
}
body[data-landscape-entry] .cm-opening-story__picture { min-width: 0; min-height: 0; }
body[data-landscape-entry] .cm-opening-story__card--0 {
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
body[data-landscape-entry] .cm-opening-story__card--0 .cm-opening-story__text { grid-column: 1; grid-row: 1; }
body[data-landscape-entry] .cm-opening-story__arena--0 { grid-column: 2; grid-row: 1; }
body[data-landscape-entry] .cm-opening-story__arena--1 { grid-column: 3; grid-row: 1; }
body[data-landscape-entry] .cm-opening-story__arena--2 { grid-column: 4; grid-row: 1; }
body[data-landscape-entry] .cm-opening-story__card--3 { grid-template-columns: minmax(0, 1fr); }