:root {
  --night: #09162b;
  --paper: #fff4db;
  --yellow: #ffd782;
  --orange: #e38b58;
  --blue: #7bb6d1;
}

html, body, #monogatari, visual-novel, game-screen { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; background: var(--night); color: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
#monogatari { position: relative; isolation: isolate; }
#monogatari > visual-novel { position: absolute; z-index: 0; inset: 0; }

game-screen {
  position: relative;
  display: block;
  background:
    linear-gradient(90deg, rgb(4 10 25 / 28%), transparent 62%),
    url("../assets/illustrations/adopted/world/night-sky-watercolor-v1.png") center / cover no-repeat,
    var(--night);
}

game-screen::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  opacity: .28;
  background-image:
    radial-gradient(circle at 7% 18%, #fff9d7 0 1px, transparent 1.7px),
    radial-gradient(circle at 16% 68%, #fff9d7 0 1.5px, transparent 2px),
    radial-gradient(circle at 31% 23%, #fff9d7 0 1px, transparent 1.8px),
    radial-gradient(circle at 49% 40%, #fff9d7 0 1.2px, transparent 2px),
    radial-gradient(circle at 64% 13%, #fff9d7 0 1px, transparent 1.8px),
    radial-gradient(circle at 81% 38%, #fff9d7 0 1.4px, transparent 2.1px),
    radial-gradient(circle at 91% 16%, #fff9d7 0 1px, transparent 1.9px);
  background-size: 17% 25%, 21% 31%, 24% 20%, 19% 30%, 26% 24%, 23% 28%, 27% 31%;
}

.opening-title {
  position: absolute;
  z-index: 4;
  top: clamp(22px, 5vw, 64px);
  left: clamp(22px, 5vw, 72px);
  margin: 0;
  color: var(--paper);
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif;
  font-size: clamp(1.5rem, 2.7vw, 2.65rem);
  line-height: 1.25;
}

.opening-title small { display: block; margin-top: 8px; color: var(--yellow); font-size: .64em; letter-spacing: .08em; }

.star-map { position: absolute; z-index: 20; inset: 0; pointer-events: none; transition: opacity .7s ease; }
.star-map-hint { position: absolute; top: clamp(150px, 18vw, 224px); left: clamp(22px, 5vw, 72px); margin: 0; color: rgb(255 244 219 / 90%); font-size: clamp(1.05rem, 1.4vw, 1.25rem); letter-spacing: .06em; }

.unopened-star { position: absolute; width: 13px; height: 13px; border: 1px solid rgb(255 237 172 / 60%); border-radius: 50%; background: rgb(255 226 136 / 26%); box-shadow: 0 0 18px rgb(255 219 126 / 42%); animation: star-breathe 4s ease-in-out infinite; }
.unopened-star::after { position: absolute; top: 50%; left: 50%; width: 22px; height: 1px; content: ""; background: rgb(255 239 185 / 40%); transform: translate(-50%, -50%) rotate(45deg); }
.unopened-star--one { top: 18%; left: 46%; }.unopened-star--two { top: 43%; right: 14%; animation-delay: -1.4s; }.unopened-star--three { bottom: 24%; right: 37%; width: 9px; height: 9px; animation-delay: -2.7s; }

.storybook-book { position: absolute; z-index: 18; bottom: -1px; left: 50%; display: block; width: 100vw; height: auto; max-width: none; pointer-events: none; transform: translateX(-50%); filter: drop-shadow(0 -8px 22px rgb(255 204 103 / 10%)); }

.planet-trigger {
  position: absolute;
  z-index: 21;
  top: 25%;
  right: 17%;
  width: clamp(115px, 15vw, 215px);
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0;
  border: 0;
  overflow: visible !important;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  filter: none;
  transform: rotate(-3deg);
  transition: top .9s cubic-bezier(.22, 1, .36, 1), right .9s cubic-bezier(.22, 1, .36, 1), width .9s cubic-bezier(.22, 1, .36, 1), filter .5s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
  animation: planet-float 8s ease-in-out infinite;
}
.planet-trigger:hover { background: transparent; filter: none; }
.planet-trigger:focus-visible { outline: 3px solid var(--yellow); outline-offset: 9px; border-radius: 50%; }
.hundred-cities-planet { display: block; width: 100%; height: auto !important; max-height: none !important; aspect-ratio: auto; filter: drop-shadow(0 0 12px rgb(147 185 218 / 26%)) drop-shadow(0 0 24px rgb(147 185 218 / 18%)); transform-origin: 50% 50%; transition: filter .45s ease; animation: planet-turn 90s linear infinite; }
.planet-trigger:hover .hundred-cities-planet { filter: drop-shadow(0 0 14px rgb(255 224 145 / 58%)) drop-shadow(0 0 30px rgb(255 220 139 / 32%)); }
.planet-trigger__label { position: absolute; right: 8%; bottom: -1.8rem; display: grid; gap: 2px; color: #fff4db; font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif; font-size: clamp(.85rem, 1.1vw, 1.05rem); line-height: 1.1; text-align: center; text-shadow: 0 2px 9px #061127; white-space: nowrap; }
.planet-trigger__label small { color: var(--yellow); font-size: .74em; letter-spacing: .08em; }
.planet-trigger:disabled { cursor: default; }

.companion-party { --dog-size: clamp(94px, 9vw, 154px); position: absolute; z-index: 22; bottom: clamp(106px, 13vw, 220px); left: clamp(24px, 7vw, 156px); display: flex; align-items: flex-end; gap: 0; filter: drop-shadow(0 18px 15px rgb(0 0 0 / 28%)); transition: bottom .75s cubic-bezier(.22, 1, .36, 1), left .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1); }
.child-sprite-wrap { position: relative; width: clamp(230px, 23vw, 390px); animation: child-sway 5.5s ease-in-out infinite; }
.child-sprite-wrap::after { position: absolute; right: 1%; bottom: 13%; width: clamp(22px, 2.7vw, 42px); height: clamp(22px, 2.7vw, 42px); content: ""; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 231 / 92%) 0 16%, rgb(255 218 114 / 64%) 32%, transparent 72%); filter: blur(1px); mix-blend-mode: screen; pointer-events: none; animation: lantern-twinkle 2.4s ease-in-out infinite; }
.child-sprite { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.bichon-sprite { position: relative; z-index: 2; width: var(--dog-size); margin-right: clamp(-32px, -1.8vw, -14px); margin-bottom: clamp(4px, 1.4vw, 22px); animation: dog-bob 2.6s ease-in-out infinite; }
.onboarding-dialog { position: absolute; z-index: 23; bottom: clamp(174px, 22vh, 310px); left: clamp(400px, 34vw, 660px); display: block !important; width: clamp(430px, 35vw, 610px) !important; height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3; box-sizing: border-box; margin: 0 !important; padding: 0 !important; border: 0; appearance: none; overflow: hidden; background: transparent; box-shadow: none; color: #18304d; font: inherit; text-align: left; }
.onboarding-dialog[hidden] { display: none !important; }
.onboarding-dialog__art { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.onboarding-dialog__body { position: absolute; z-index: 1; inset: 20% 14% 19% 18%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.onboarding-dialog__speaker, .onboarding-dialog__copy, .onboarding-dialog__hint { display: block; min-width: 0; }
.onboarding-dialog__speaker { margin: 0 0 7px; color: #a75f35; font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif; font-size: clamp(1.1rem, 1.42vw, 1.34rem); font-weight: 900; }
.onboarding-dialog__copy { width: 100%; overflow: auto; overflow-wrap: anywhere; font-size: clamp(1rem, 1.18vw, 1.16rem); line-height: 1.7; text-wrap: pretty; white-space: pre-line; scrollbar-width: thin; }
.onboarding-dialog__hint { align-self: end; justify-self: end; margin-top: 8px; color: #93663f; font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif; font-size: clamp(.82rem, .95vw, .95rem); font-weight: 800; opacity: 0; transform: translateY(calc(-1 * clamp(30px, 4vw, 50px))); transition: opacity .2s ease; }
.onboarding-dialog.is-continuable { cursor: pointer; }
.onboarding-dialog:not(.is-continuable) { pointer-events: none; }
.onboarding-dialog.is-continuable:hover { box-shadow: 0 20px 58px rgb(0 0 0 / 42%); transform: translateY(-2px); }
.onboarding-dialog.is-continuable .onboarding-dialog__hint { opacity: 1; }
.onboarding-dialog:focus-visible { outline: 3px solid #5b8fc0; outline-offset: 5px; }
.novel-dialog { position: absolute; z-index: 23; bottom: clamp(18px, 3vw, 38px); left: 50%; display: block !important; width: min(1100px, calc(100vw - 96px)) !important; height: clamp(188px, 26vh, 232px) !important; min-height: 0 !important; max-height: 42vh; box-sizing: border-box; margin: 0 !important; padding: 0 !important; border: 2px solid #d6b877; border-radius: 34px 40px 29px 44px / 24px 29px 32px 35px; appearance: none; background: linear-gradient(125deg, rgb(255 250 234 / 98%), rgb(247 234 201 / 97%)); box-shadow: 0 -10px 46px rgb(0 0 0 / 30%), inset 0 0 0 6px rgb(255 255 255 / 25%); color: #18304d; font: inherit; text-align: left; transform: translateX(-50%); }.novel-dialog[hidden] { display: none !important; }.novel-dialog__body { display: grid; width: 100%; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; gap: 5px; padding: clamp(20px, 2vw, 25px) clamp(26px, 4vw, 54px) clamp(15px, 1.8vw, 20px); }.novel-dialog__speaker, .novel-dialog__copy, .novel-dialog__hint { display: block; min-width: 0; }.novel-dialog__speaker { margin: 0; color: #a75f35; font: 900 clamp(1.25rem, 1.7vw, 1.55rem) / 1 "STKaiti", "KaiTi", "Microsoft YaHei", serif; }.novel-dialog__copy { width: min(66ch, 100%); overflow: auto; overflow-wrap: anywhere; font-size: clamp(1rem, 1.3vw, 1.22rem); line-height: 1.72; text-wrap: pretty; white-space: pre-line; scrollbar-width: thin; }.novel-dialog__hint { color: #93663f; font: 800 clamp(.82rem, 1vw, .98rem) / 1 "STKaiti", "KaiTi", "Microsoft YaHei", serif; opacity: 0; transition: opacity .2s ease; }.novel-dialog.is-continuable { cursor: pointer; }.novel-dialog:not(.is-continuable) { pointer-events: none; }.novel-dialog.is-continuable:hover { box-shadow: 0 -10px 52px rgb(0 0 0 / 34%), inset 0 0 0 6px rgb(255 255 255 / 30%); }.novel-dialog.is-continuable .novel-dialog__hint { opacity: 1; }.novel-dialog:focus-visible { outline: 3px solid #5b8fc0; outline-offset: 5px; }
.dialog-mode-switch { position: absolute; z-index: 26; top: clamp(18px, 3vw, 40px); right: clamp(18px, 3vw, 46px); display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid rgb(255 229 166 / 50%); border-radius: 999px; background: rgb(5 20 38 / 48%); box-shadow: 0 8px 24px rgb(0 0 0 / 16%); color: #fff1c8; font: 800 clamp(.86rem, 1vw, 1rem) / 1 "STKaiti", "KaiTi", "Microsoft YaHei", serif; }.dialog-mode-switch__option { margin: 0 !important; padding: .5rem .72rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }.dialog-mode-switch__option:hover, .dialog-mode-switch__option.is-active { border-color: #d9b66a; background: #fff1c9; color: #523d31; }.dialog-mode-switch__option:focus-visible { outline: 3px solid #ffe092; outline-offset: 2px; }
.onboarding-choices { position: absolute; z-index: 24; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: stretch; gap: 13px; width: min(360px, calc(100vw - 40px)); transform: translate(-50%, -50%); }
.onboarding-choices[hidden] { display: none; }
.onboarding-choices__prompt { margin: 0 0 4px; color: #fff4db; font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 900; line-height: 1.65; text-align: center; text-shadow: 0 2px 10px #061127; white-space: pre-line; }
.guide-option { width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: .58rem .85rem !important; border: 1px solid #caa359 !important; border-radius: 999px !important; background: #fff8e7 !important; color: #17314e !important; font: 800 clamp(.88rem, 1vw, 1rem) / 1.25 "STKaiti", "KaiTi", "Microsoft YaHei", serif !important; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.guide-option:hover { background: #ffe9ae !important; box-shadow: 0 5px 14px rgb(143 91 38 / 20%); transform: translateY(-2px); }
.guide-option:focus-visible { outline: 3px solid #5b8fc0; outline-offset: 3px; }
#monogatari.planet-recommended .hundred-cities-planet { filter: drop-shadow(0 0 14px rgb(255 226 151 / 68%)) drop-shadow(0 0 34px rgb(255 218 130 / 35%)); }
#monogatari.planet-approaching .planet-trigger { top: 9%; right: 8%; width: min(34vw, 440px); filter: none; transform: rotate(-3deg); animation: none; }
#monogatari.planet-approaching .hundred-cities-planet { filter: drop-shadow(0 0 16px rgb(255 226 151 / 74%)) drop-shadow(0 0 38px rgb(255 218 130 / 39%)); }
#monogatari.planet-approaching .star-map { opacity: .6; }
#monogatari.planet-zooming .planet-trigger { top: 50%; right: 50%; width: min(100vw, 1280px); filter: none; transform: translate(50%, -50%) rotate(-3deg) scale(1.12); animation: none; transition-duration: .64s, .64s, .64s, .3s, .64s; }
#monogatari.planet-zooming .hundred-cities-planet { filter: drop-shadow(0 0 20px rgb(255 232 175 / 88%)) drop-shadow(0 0 60px rgb(255 224 143 / 48%)); }
#monogatari.planet-zooming .star-map, #monogatari.planet-zooming .companion-party, #monogatari.planet-zooming .storybook-book { opacity: 0; transition: opacity .32s ease; }
#monogatari.journey-open .companion-party { bottom: calc(29% + 12px); left: max(24px, calc((100vw - 1260px) / 2)); transform: scale(1.04); }
#monogatari.journey-open .planet-trigger { top: 2%; right: 2%; width: min(43vw, 590px); filter: none; transform: rotate(-3deg); animation: none; pointer-events: none; }
#monogatari.journey-open .hundred-cities-planet { filter: drop-shadow(0 0 24px rgb(147 185 218 / 22%)); }
#monogatari.journey-open .planet-trigger__label { opacity: 0; transition: opacity .25s ease; }
#monogatari.journey-open .star-map { opacity: .2; }
#monogatari:not(.journey-open) text-box, #monogatari:not(.journey-open) dialog-log, #monogatari:not(.journey-open) quick-menu, #monogatari:not(.journey-open) choice-container { visibility: hidden; opacity: 0; pointer-events: none; }
quick-menu { display: none !important; }
character { display: none !important; }

text-box {
  z-index: 12 !important;
  right: max(24px, calc((100vw - 1100px) / 2));
  bottom: 28px !important;
  left: max(24px, calc((100vw - 1100px) / 2));
  width: auto !important;
  min-height: 160px !important;
  max-height: 29% !important;
  border: 2px solid #d6b877;
  border-radius: 25px 32px 27px 34px;
  background: linear-gradient(125deg, rgb(255 250 234 / 97%), rgb(247 234 201 / 96%)) !important;
  box-shadow: 0 18px 55px rgb(0 0 0 / 38%);
  color: #18304d !important;
}

text-box [data-content=name] { color: #a75f35 !important; font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif; font-weight: 900; }
text-box [data-content=text] { font-size: clamp(1rem, 1.7vw, 1.22rem); line-height: 1.7; }
text-box [data-content=side-image] { display: none !important; }
choice-container { z-index: 15; }
choice-container button { border: 2px solid #d6b877; border-radius: 999px; background: #fff4db; color: #17314e; font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif; font-weight: 800; }

.training-scene { position: absolute; z-index: 30; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at 63% 44%, rgb(103 152 181 / 22%), transparent 33%), linear-gradient(180deg, #0a1930 0%, #102a45 56%, #172534 57%, #0c1622 100%); transition: opacity .36s ease .05s; }
.training-scene::before { position: absolute; inset: 0; content: ""; opacity: .42; background: radial-gradient(circle at 16% 19%, rgb(255 238 170 / 85%) 0 1px, transparent 2px), radial-gradient(circle at 36% 11%, rgb(255 238 170 / 65%) 0 1px, transparent 2px), radial-gradient(circle at 76% 20%, rgb(255 238 170 / 72%) 0 1px, transparent 2px), radial-gradient(circle at 87% 38%, rgb(255 238 170 / 62%) 0 1px, transparent 2px); background-size: 22% 26%, 27% 31%, 29% 25%, 31% 33%; pointer-events: none; }
#monogatari.training-scene-open .training-scene { opacity: 1; pointer-events: auto; }
#monogatari.training-scene-open .star-map, #monogatari.training-scene-open .storybook-book, #monogatari.training-scene-open .planet-trigger, #monogatari.training-scene-open .companion-party, #monogatari.training-scene-open .onboarding-dialog, #monogatari.training-scene-open .novel-dialog, #monogatari.training-scene-open .dialog-mode-switch, #monogatari.training-scene-open .onboarding-choices { opacity: 0; pointer-events: none; }

.training-scene__return { position: absolute; z-index: 4; top: clamp(18px, 3vw, 42px); left: clamp(20px, 4vw, 64px); padding: .55rem .85rem; border: 1px solid rgb(255 232 176 / 65%); border-radius: 999px; background: rgb(7 24 42 / 45%); color: #fff2cd; font: 800 clamp(.82rem, 1vw, .98rem) / 1 "STKaiti", "KaiTi", "Microsoft YaHei", serif; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.training-scene__return:hover { background: rgb(255 231 169 / 18%); transform: translateX(-2px); }
.training-scene__return:focus-visible, .training-hotspot:focus-visible, .training-note__close:focus-visible { outline: 3px solid #ffe092; outline-offset: 3px; }
.training-scene__heading { position: absolute; z-index: 3; top: clamp(22px, 4vw, 58px); left: 50%; width: min(46vw, 610px); color: #fff4da; text-align: center; transform: translateX(-50%); }
.training-scene__heading p { margin: 0 0 7px; color: #ffd987; font: 800 clamp(.8rem, 1.05vw, 1rem) / 1.2 "STKaiti", "KaiTi", "Microsoft YaHei", serif; letter-spacing: .12em; }
.training-scene__heading h2 { margin: 0; font: 900 clamp(1.35rem, 2.8vw, 2.6rem) / 1.2 "STKaiti", "KaiTi", "Microsoft YaHei", serif; text-shadow: 0 4px 18px #061127; }
.training-scene__heading span { display: block; margin-top: 10px; color: rgb(255 243 215 / 72%); font-size: clamp(.72rem, .95vw, .92rem); letter-spacing: .08em; }
.training-scene__constellation { position: absolute; top: 20%; right: 10%; width: 160px; height: 100px; opacity: .5; border-top: 1px dashed rgb(255 229 164 / 50%); transform: rotate(-12deg); }
.training-scene__constellation i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffe8a6; box-shadow: 0 0 10px #ffe8a6; }.training-scene__constellation i:nth-child(1) { top: -3px; left: 0; }.training-scene__constellation i:nth-child(2) { top: 38px; left: 78px; }.training-scene__constellation i:nth-child(3) { top: 76px; right: 0; }

.training-scene__stage { position: absolute; right: max(3vw, calc((100vw - 1380px) / 2)); bottom: 8%; width: min(75vw, 1040px); height: min(68vh, 610px); transform-origin: 70% 100%; animation: scene-arrive .65s cubic-bezier(.2, .9, .2, 1) both; }
.training-scene__stage::before { position: absolute; z-index: 0; right: 8%; bottom: 0; width: 70%; height: 18%; content: ""; border-radius: 50%; background: radial-gradient(ellipse, rgb(255 221 148 / 34%), rgb(255 219 150 / 8%) 44%, transparent 70%); filter: blur(10px); }
.training-scene__window { position: absolute; top: 13%; left: 23%; width: 21%; height: 26%; overflow: hidden; border: 7px solid #d3a863; border-radius: 48% 52% 18% 18% / 15% 15% 13% 13%; background: linear-gradient(150deg, #94c6d6, #f4c887 120%); box-shadow: 0 8px 0 #704c36, 0 0 25px rgb(255 225 154 / 28%); transform: rotate(-2deg); }
.training-scene__window::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent 47%, rgb(97 132 148 / 65%) 48% 53%, transparent 54%), linear-gradient(transparent 48%, rgb(97 132 148 / 65%) 49% 53%, transparent 54%); }
.training-scene__window span { position: absolute; bottom: 0; width: 32%; border-radius: 50% 50% 0 0; background: #2f5d61; }.training-scene__window span:nth-child(1) { left: 2%; height: 34%; }.training-scene__window span:nth-child(2) { left: 28%; height: 51%; }.training-scene__window span:nth-child(3) { right: 0; height: 41%; }
.training-scene__board { position: absolute; z-index: 1; top: 18%; left: 40%; width: clamp(190px, 25vw, 330px); min-height: 36%; box-sizing: border-box; padding: clamp(17px, 2vw, 28px) clamp(18px, 2.4vw, 36px); border: 8px solid #a86d3f; border-radius: 9px 13px 10px 12px; background: linear-gradient(125deg, #1c5d60, #245f61 65%, #16474d); box-shadow: 0 12px 0 #63412f, 0 20px 22px rgb(0 0 0 / 28%); color: #fff4d8; transform: rotate(2.5deg); }
.training-scene__board::after { position: absolute; right: -7%; bottom: -11%; width: 22%; height: 6px; content: ""; border-radius: 99px; background: #efd481; box-shadow: -35px 1px 0 #e98f67, -68px 0 0 #e5eadb; }
.training-scene__board p { margin: 0 0 .8em; font: 900 clamp(.9rem, 1.35vw, 1.24rem) / 1.35 "STKaiti", "KaiTi", "Microsoft YaHei", serif; }.training-scene__board ol { margin: 0; padding-left: 1.3em; font: 700 clamp(.7rem, .95vw, .9rem) / 1.8 "Microsoft YaHei", sans-serif; }.training-scene__board-pin { position: absolute; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: #ffcf64; box-shadow: 0 1px 2px #3d3027; }.training-scene__board-pin--one { left: 13px; }.training-scene__board-pin--two { right: 13px; background: #ef8261; }
.training-scene__desk { position: absolute; z-index: 2; bottom: 3%; left: 20%; width: 64%; height: 22%; border-radius: 7% 8% 14% 12% / 20% 25% 26% 20%; background: linear-gradient(152deg, #d39b64, #a55e3f 68%, #6f3d31); box-shadow: 0 20px 0 #513129, 0 32px 27px rgb(0 0 0 / 35%); transform: perspective(470px) rotateX(57deg) rotateZ(-2deg); }
.training-scene__desk-card { position: absolute; top: 20%; display: grid; width: 22%; aspect-ratio: 1.3; place-items: center; border-radius: 4px; background: #ffe6a5; box-shadow: 3px 5px 4px rgb(66 38 27 / 28%); color: #5c493a; font: 900 clamp(.55rem, .8vw, .76rem) / 1 "STKaiti", "KaiTi", "Microsoft YaHei", serif; }.training-scene__desk-card--one { left: 12%; transform: rotate(-10deg); }.training-scene__desk-card--two { left: 38%; background: #f5b99c; transform: rotate(5deg); }.training-scene__desk-card--three { right: 12%; background: #b6dfd4; transform: rotate(-2deg); }.training-scene__desk-lamp { position: absolute; top: -22%; right: 8%; width: 13%; height: 72%; border: 6px solid #704530; border-bottom: 0; border-radius: 70% 70% 0 0; }.training-scene__desk-lamp::after { position: absolute; right: -20%; bottom: -10%; width: 150%; height: 25%; content: ""; border-radius: 50%; background: #ffe8a4; box-shadow: 0 0 20px rgb(255 225 141 / 80%); }
.adult-sprite { position: absolute; z-index: 3; right: 0; bottom: 2%; display: block; width: min(29vw, 360px); max-height: 79vh; object-fit: contain; filter: drop-shadow(-16px 15px 12px rgb(0 0 0 / 28%)); transform-origin: 60% 100%; animation: adult-arrive .8s .12s cubic-bezier(.2, .9, .2, 1) both; }
.training-hotspot { position: absolute; z-index: 5; display: grid; min-width: 88px; aspect-ratio: 1; place-items: center; padding: .5rem; border: 2px dashed #c28348; border-radius: 50% 47% 52% 46% / 48% 53% 45% 52%; background: #fff1c9; box-shadow: 0 7px 0 #b86e41, 0 12px 20px rgb(0 0 0 / 18%); color: #614230; font: 900 clamp(.7rem, .98vw, .92rem) / 1.25 "STKaiti", "KaiTi", "Microsoft YaHei", serif; cursor: pointer; transition: transform .2s ease, filter .2s ease; }.training-hotspot:hover { filter: brightness(1.08); transform: translateY(-5px) rotate(2deg); }.training-hotspot--problem { top: 8%; left: 7%; transform: rotate(-7deg); }.training-hotspot--method { bottom: 13%; left: 4%; background: #dbefe2; }.training-hotspot--practice { top: 5%; right: 25%; background: #f9d9bd; transform: rotate(6deg); }
.training-scene__dialog { position: absolute; z-index: 6; right: max(3vw, calc((100vw - 1390px) / 2)); bottom: 4%; width: min(36vw, 480px); box-sizing: border-box; padding: clamp(17px, 2vw, 27px) clamp(20px, 2.6vw, 34px); border: 2px solid #d6b877; border-radius: 48% 52% 49% 51% / 45% 48% 52% 55%; background: linear-gradient(125deg, rgb(255 250 234 / 98%), rgb(247 234 201 / 96%)); box-shadow: 0 14px 38px rgb(0 0 0 / 30%); color: #18304d; }.training-scene__dialog::after { position: absolute; right: 19%; bottom: -34px; width: 41px; height: 51px; content: ""; border-right: 2px solid #d6b877; border-bottom: 2px solid #d6b877; border-radius: 0 0 75% 0; background: #f7eac9; transform: skewX(-28deg) rotate(19deg); }.training-scene__dialog span { display: block; margin-bottom: 6px; color: #a75f35; font: 900 clamp(.98rem, 1.2vw, 1.16rem) / 1 "STKaiti", "KaiTi", "Microsoft YaHei", serif; }.training-scene__dialog p { position: relative; z-index: 1; margin: 0; font-size: clamp(.84rem, 1.08vw, 1rem); line-height: 1.7; }
.training-note { position: absolute; z-index: 10; top: 50%; left: 50%; width: min(380px, calc(100vw - 42px)); box-sizing: border-box; padding: 28px 30px 30px; border: 2px solid #c99b5e; border-radius: 12px 15px 13px 16px; background: #fff3d4; box-shadow: 0 22px 65px rgb(0 0 0 / 42%); color: #254057; transform: translate(-50%, -50%) rotate(-1deg); }.training-note::before { position: absolute; top: 9px; right: 18%; left: 18%; height: 9px; content: ""; border-radius: 99px; background: rgb(226 170 95 / 34%); }.training-note__close { position: absolute; top: 10px; right: 12px; display: grid; width: 26px; height: 26px; place-items: center; border: 0; border-radius: 50%; background: #d9855d; color: #fff7dd; font: 900 1.25rem/1 sans-serif; cursor: pointer; }.training-note__eyebrow { margin: 4px 0 7px; color: #b07042; font: 900 .82rem/1 "STKaiti", "KaiTi", "Microsoft YaHei", serif; }.training-note h3 { margin: 0 0 12px; color: #69462f; font: 900 clamp(1.2rem, 2vw, 1.58rem)/1.25 "STKaiti", "KaiTi", "Microsoft YaHei", serif; }.training-note__copy { margin: 0; font-size: .95rem; line-height: 1.8; }

@keyframes scene-arrive { from { opacity: 0; transform: translateY(70px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes adult-arrive { from { opacity: 0; transform: translateX(90px) rotate(2deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }

@keyframes planet-float { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(0deg) translateY(-10px); } }
@keyframes planet-turn { to { transform: rotate(360deg); } }
@keyframes dog-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-11px) rotate(2deg); } }
@keyframes child-sway { 0%, 100% { transform: translateY(0) rotate(-.35deg); } 50% { transform: translateY(-4px) rotate(.45deg); } }
@keyframes lantern-twinkle { 0%, 100% { opacity: .48; transform: scale(.88); } 45% { opacity: .92; transform: scale(1.12); } 64% { opacity: .62; transform: scale(.96); } }
@keyframes star-breathe { 0%, 100% { opacity: .42; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.2); } }

@media (max-width: 700px) {
  .opening-title { max-width: 13ch; }.opening-title small, .star-map-hint, .dialog-mode-switch > span { display: none; }.storybook-book { width: 125vw; }.planet-trigger { top: 17%; right: 10%; width: 35vw; }.unopened-star--one { left: 55%; }.unopened-star--two { right: 7%; }.unopened-star--three { right: 28%; }.companion-party { --dog-size: 23vw; bottom: 13vw; left: 5vw; }.child-sprite-wrap { width: 52vw; }.bichon-sprite { margin-right: -5vw; margin-bottom: 2vw; }.onboarding-dialog { bottom: 52vh; left: 50%; width: min(88vw, 390px) !important; transform: translateX(-50%); }.onboarding-dialog__body { inset: 18% 13% 14% 17%; }.onboarding-dialog__speaker { font-size: 1.02rem; }.onboarding-dialog__copy { font-size: .95rem; line-height: 1.62; }.onboarding-dialog__hint { margin-top: 6px; font-size: .78rem; }.novel-dialog { bottom: 12px; width: calc(100vw - 28px) !important; height: min(220px, 38vh) !important; }.novel-dialog__body { gap: 6px; padding: 21px 22px 18px; }.novel-dialog__speaker { font-size: 1.2rem; }.novel-dialog__copy { font-size: .98rem; line-height: 1.65; }.dialog-mode-switch { top: 14px; right: 10px; gap: 3px; padding: 6px; font-size: .72rem; }.dialog-mode-switch__option { padding: .42rem .5rem; }.onboarding-choices { top: 51%; }.guide-option { flex: 1 1 auto; } #monogatari.planet-approaching .planet-trigger { top: 11%; right: 6%; width: 55vw; } #monogatari.journey-open .companion-party { bottom: calc(29% + 6px); left: 3vw; transform: scale(.92); } #monogatari.journey-open .planet-trigger { top: 5%; right: -16%; width: 78vw; } text-box { right: 14px; bottom: 14px !important; left: 14px; min-height: 194px !important; border-radius: 22px; } text-box [data-content=text] { font-size: 1rem; }
  .training-scene__heading { top: 68px; width: 78vw; }.training-scene__heading h2 { font-size: 1.42rem; }.training-scene__heading span { line-height: 1.5; }.training-scene__constellation { display: none; }.training-scene__stage { right: -18vw; bottom: 19%; width: 112vw; height: 49vh; }.training-scene__window { top: 19%; left: 17%; width: 20%; border-width: 4px; }.training-scene__board { top: 22%; left: 37%; width: 45vw; min-height: 34%; padding: 13px 17px; border-width: 5px; }.training-scene__board ol { font-size: .61rem; }.training-scene__desk { left: 15%; width: 62%; }.adult-sprite { right: 0; width: 44vw; max-height: 54vh; }.training-hotspot { min-width: 67px; font-size: .63rem; }.training-hotspot--problem { top: 7%; left: 0; }.training-hotspot--method { bottom: 11%; left: 0; }.training-hotspot--practice { top: 8%; right: 29%; }.training-scene__dialog { right: 14px; bottom: 18px; width: min(84vw, 390px); padding: 16px 20px; }.training-scene__dialog::after { display: none; }.training-note { padding: 25px 23px 25px; }
}

@media (prefers-reduced-motion: reduce) { .planet-trigger, .hundred-cities-planet, .bichon-sprite, .child-sprite-wrap, .child-sprite-wrap::after, .unopened-star, .guide-option, .training-scene, .training-scene__stage, .adult-sprite { animation: none; transition: none; } }

@media (min-width: 701px) and (max-width: 960px) {
  .onboarding-dialog { bottom: 28vh; left: 39vw; width: min(52vw, 480px) !important; }
}