/* v24 · classroom palette, karaoke readability and playful mini-world controls */
:root{
  --v24-ink:#142d43;
  --v24-soft:#455e70;
  --v24-paper:#fffaf0;
  --v24-focus:#fff4a8;
  --v24-blue:#245d8d;
  --v24-gold:#f2bd56;
}

/* Stable reading surfaces across all six worlds. */
.world-screen .story-chat-panel,
.world-screen .magic-gallery-panel,
.world-screen .director-visual-choices,
.world-screen .music-teacher-panel,
.world-screen .music-choice-panel,
.world-screen .creation-guide,
.world-screen .canvas-shell,
.world-library .works-room,
.world-library .works-card{
  color:var(--v24-ink)!important;
  border-width:2px!important;
  box-shadow:0 20px 50px rgba(2,21,38,.28),inset 0 1px rgba(255,255,255,.86)!important;
}
.world-screen .story-host b,
.world-screen .story-host p,
.world-screen .guide-fanfan b,
.world-screen .guide-fanfan p,
.world-screen .music-host b,
.world-screen .music-host p,
.world-screen .idea-gallery-head b,
.world-screen .idea-gallery-head small,
.world-screen .transcript,
.world-screen .type-box span,
.world-screen .music-progress span,
.world-screen .music-selected-strip b,
.world-screen .music-selected-strip span{
  color:var(--v24-ink)!important;
  text-shadow:none!important;
}
.world-screen input,
.world-screen textarea,
.world-screen select{
  color:#132d42!important;
  background:#fffef9!important;
  border:2px solid #8199ab!important;
  caret-color:#173e61;
}
.world-screen input::placeholder,
.world-screen textarea::placeholder{color:#627587!important;opacity:1}
.world-screen .soft-kicker{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-bottom:4px;
  padding:3px 8px;
  border:1px solid #7f9ca2;
  border-radius:999px;
  color:#25475a!important;
  background:#e9f4ee!important;
  opacity:1!important;
  text-shadow:none!important;
}
.world-screen button:focus-visible,
.music-modal button:focus-visible,
.music-modal input:focus-visible,
.music-modal textarea:focus-visible,
.music-modal select:focus-visible{
  outline:4px solid var(--v24-focus)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 7px rgba(21,70,106,.78)!important;
}

/* Six coordinated palettes: dark spatial shell, warm readable paper, one bright action color. */
.world-imagine{background:linear-gradient(145deg,#061b2d,#0d4155 58%,#167078)!important}
.world-imagine .story-chat-panel{background:linear-gradient(150deg,#fff9eb,#f4e2bd)!important;border-color:#e5bd6e!important}
.world-imagine .magic-gallery-panel{background:linear-gradient(150deg,#f8fffb,#d7eeea)!important;border-color:#65b9b4!important}
.world-imagine .voice-leaf{background:linear-gradient(135deg,#087f82,#255d98)!important;border-color:#a8f3e9!important}

.world-director{background:linear-gradient(145deg,#080d25,#1b2451 55%,#49366b)!important}
.world-director .story-chat-panel{background:linear-gradient(150deg,#fff9ef,#ece2f5)!important;border-color:#a695d1!important;color:#202c47!important}
.world-director .director-visual-choices{background:linear-gradient(150deg,#f7f5ff,#e4e7f5)!important;border-color:#8292c0!important}
.world-director .story-host{background:linear-gradient(135deg,#f5eafa,#fff2cf)!important;border-left-color:#715da8!important}
.world-director .voice-leaf{background:linear-gradient(135deg,#5e4fa2,#2f6594)!important;border-color:#cfc4ff!important}

.world-music{background:linear-gradient(145deg,#061b35,#0a4f66 54%,#503e78)!important}
.world-music .music-teacher-panel{background:linear-gradient(150deg,#f6fffb,#d8eee7)!important;border-color:#58ada8!important}
.world-music .music-choice-panel{background:linear-gradient(150deg,#fffaf0,#e9e2f4)!important;border-color:#9b8ec4!important}
.world-music #musicVoice{
  grid-template-columns:64px minmax(0,1fr)!important;
  background:linear-gradient(135deg,#087d80,#315e9c)!important;
  border-color:#a5eee7!important;
}
.world-music #musicVoice b,
.world-music #musicVoice small{
  min-width:0;
  color:#fff!important;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:normal;
}
.world-music #musicVoice small{opacity:1!important}
.world-music .music-option-card{background:#fffef9!important;border-color:#8298ae!important}
.world-music .music-option-card b,
.world-music .music-option-card p,
.world-music .music-option-card small,
.world-music .music-option-card em{color:#1c3449!important}

.world-mini[data-game="animalFriend"]{background:linear-gradient(145deg,#061f22,#14513c 55%,#4b512c)!important}
.world-mini[data-game="animalFriend"] .canvas-shell{background:linear-gradient(150deg,#dff4d9,#f7e9b9)!important;border-color:#75ac68!important}
.world-mini[data-game="animalFriend"] .creation-guide{background:linear-gradient(150deg,#fffbee,#e2efd7)!important;border-color:#8dac70!important}
.world-mini[data-game="animalFriend"] .voice-leaf{background:linear-gradient(135deg,#287c50,#246b69)!important;border-color:#b7ecb2!important}

.world-mini[data-game="emotionWeather"]{background:linear-gradient(145deg,#071d38,#255c78 54%,#67577e)!important}
.world-mini[data-game="emotionWeather"] .canvas-shell{background:linear-gradient(150deg,#dff5fb,#e8e4f7)!important;border-color:#72b4cf!important}
.world-mini[data-game="emotionWeather"] .creation-guide{background:linear-gradient(150deg,#fffaf1,#f2e1d7)!important;border-color:#d5a477!important}
.world-mini[data-game="emotionWeather"] .voice-leaf{background:linear-gradient(135deg,#237f98,#625aa4)!important;border-color:#b7e8f4!important}

.world-library,.memory-screen{background:linear-gradient(145deg,#0b1b2b,#334354 55%,#66503c)!important}
.world-library .works-room,.world-library .works-card,
.memory-screen .story-tree-dashboard,.memory-screen .story-tree-book-card{
  background:linear-gradient(150deg,#fffaf0,#ead9b8)!important;
  color:#283747!important;
  border-color:#b98d55!important;
}

/* High-contrast actions remain explicit even when disabled. */
.world-screen .type-box button,
.world-screen .music-round-tools button,
.mini-play-card button,
.music-confirm-actions button,
.music-player-buttons button,
.music-player-foot button,
.lyrics-mode{
  color:#1e2a36!important;
  background:linear-gradient(145deg,#ffe38a,#eab94f)!important;
  border:2px solid #9b7128!important;
  text-shadow:none!important;
}
.world-screen button:disabled{
  color:#344a5d!important;
  background:#dce7ec!important;
  border-color:#91a8b6!important;
}
.world-screen button[aria-disabled="true"]{
  color:#344a5d!important;
  background:#dce7ec!important;
  border-color:#91a8b6!important;
  opacity:1!important;
}

/* Full lyrics stay independently scrollable on mouse, touch and keyboard. */
.music-player-card{overflow:hidden!important}
.music-player-card>section{min-width:0;max-height:calc(92vh - 52px);overflow-y:auto!important;padding:4px 10px 14px!important;scrollbar-gutter:stable}
#musicPlayerLyrics,
.music-player:not(.lyrics-only) #musicPlayerLyrics{
  display:block;
  min-height:210px!important;
  max-height:min(42vh,430px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-gutter:stable;
  white-space:pre-wrap;
  opacity:1!important;
  color:#24394b!important;
  background:#fffaf0!important;
  border:2px solid #cfb77f;
  font:800 clamp(15px,1.8vw,19px)/1.9 "Noto Sans SC","Microsoft YaHei",sans-serif!important;
}
#musicPlayerLyrics:focus-visible{outline:4px solid #346e9b!important;outline-offset:2px}
.music-chorus-stage{
  border:2px solid #d09b35!important;
  background:linear-gradient(145deg,#fff7d4,#f5d0a7)!important;
}
.music-chorus-stage small,
.music-chorus-stage p{color:#684719!important}
.music-chorus-stage span{
  min-width:38px!important;
  min-height:48px!important;
  color:#53606a!important;
  background:#fffdf7!important;
  border:2px solid #d3c4a4;
}
.music-chorus-stage span.sung{color:#704b16!important;background:#ffecaa!important}
.music-chorus-stage span.active{
  color:#251a06!important;
  background:linear-gradient(145deg,#fff06d,#ff9d72)!important;
  border-color:#9b5c26!important;
  box-shadow:0 0 0 5px rgba(255,226,91,.42),0 8px 18px rgba(116,63,18,.28)!important;
}
.music-player.lyrics-only .music-chorus-stage:not([hidden]){display:block!important}

/* Playful mini-world controls enrich the existing AI choice flow. */
.mini-adventure-panel{margin:10px 0 8px}
.mini-play-card{
  padding:11px;
  border:2px solid #8ba09a;
  border-radius:18px;
  background:#fffdf6;
  box-shadow:0 8px 20px rgba(27,53,58,.12);
}
.mini-play-card[hidden]{display:none!important}
.mini-play-card header{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:9px}
.mini-play-card header>span{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#e2f2e1;font-size:20px}
.mini-play-card header b,.mini-play-card header small{display:block;color:#203b45!important}
.mini-play-card header b{font-size:14px}
.mini-play-card header small{margin-top:2px;font-size:10px;line-height:1.35}
.mini-play-card header button{min-height:38px!important;padding:5px 9px!important;border-radius:11px!important;font-size:11px}
.mini-play-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.mini-play-row>span{flex:0 0 68px;color:#38505c;font-size:10px;font-weight:1000}
.mini-play-row button{min-height:40px!important;padding:6px 8px!important;border-radius:12px!important;font-size:11px}
.mini-play-row button[aria-pressed="true"]{
  color:#fff!important;
  background:linear-gradient(145deg,#1f7d66,#2b608d)!important;
  border-color:#123f53!important;
  box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(35,106,106,.34)!important;
}
.weather-picks>button{flex:1 1 64px}
.mood-strength{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-top:10px;color:#354e60;font-size:10px;font-weight:900}
.mood-strength input{min-height:30px!important;border:0!important;background:transparent!important}
.mood-strength output{min-width:43px;color:#264d63}
.mini-quest-trail,.mini-forecast-trail{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}
.mini-quest-trail i,.mini-forecast-trail i{
  padding:5px 3px;
  border-radius:9px;
  background:#e5ece9;
  color:#62716e;
  text-align:center;
  font-size:9px;
  font-style:normal;
  font-weight:1000;
}
.mini-quest-trail i.done,.mini-forecast-trail i.done{color:#174a3c;background:#bfe8c5;box-shadow:inset 0 0 0 2px #72b584}
.world-mini[data-game="animalFriend"][data-mini-habitat="海边"] .live-stage{background:radial-gradient(circle at 50% 38%,#eefcda,#7ecbc1 62%,#2b7280)!important}
.world-mini[data-game="animalFriend"][data-mini-habitat="天空"] .live-stage{background:radial-gradient(circle at 50% 38%,#fffbdc,#9bd4ef 62%,#6688bf)!important}
.world-mini[data-game="animalFriend"][data-mini-habitat="森林"] .live-stage{background:radial-gradient(circle at 50% 38%,#f2f8c9,#78b985 62%,#356b4c)!important}
.world-mini[data-game="emotionWeather"][data-mini-weather="暖暖晴天"] .live-stage{filter:saturate(1.08) brightness(1.05)}
.world-mini[data-game="emotionWeather"][data-mini-weather="轻轻小雨"] .live-stage{filter:saturate(.88) brightness(.9)}
.world-mini[data-game="emotionWeather"][data-mini-weather="亮晶彩虹"] .live-stage{filter:saturate(1.18) brightness(1.04)}
.world-mini[data-mini-breathing="true"] .weather-sky-icons{animation:v24-breathe-cloud 3.2s ease-in-out}

@keyframes v24-breathe-cloud{50%{transform:translateX(12px) scale(1.08);opacity:.58}}

@media(min-width:760px){
  #miniGame .imagine-layout{
    grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)!important;
  }
}
@media(max-width:1100px){
  .world-music .music-teacher-panel,.world-music .music-choice-panel{min-height:0!important}
}
@media(max-width:700px){
  .music-player-card>section{max-height:none}
  .mini-play-card header{grid-template-columns:32px minmax(0,1fr)}
  .mini-play-card header button{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .world-mini[data-mini-breathing="true"] .weather-sky-icons{animation:none!important}
  .music-chorus-stage span{transition:none!important;transform:none!important}
}

/* Optional online mode: server-owned sessions, balance and administrator account allocation. */
.online-account-bar{
  position:fixed;
  z-index:2100;
  top:12px;
  right:14px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 9px 7px 13px;
  border:2px solid #9edbd2;
  border-radius:16px;
  color:#fff;
  background:#092b42;
  box-shadow:0 10px 28px rgba(0,0,0,.32);
}
.online-account-bar[hidden]{display:none!important}
.online-account-bar span{min-width:90px}
.online-account-bar b,.online-account-bar small{display:block;color:#fff}
.online-account-bar small{margin-top:2px;font-size:10px}
.online-account-bar button,
.online-login-card button,
.online-admin-panel button{
  min-height:40px;
  padding:7px 11px;
  border:2px solid #8b6728;
  border-radius:12px;
  color:#1b2c3a;
  background:#ffdb75;
  font-weight:900;
}
.online-account-bar button:focus-visible,
.online-login-card button:focus-visible,
.online-login-card input:focus-visible,
.online-admin-panel button:focus-visible,
.online-admin-panel input:focus-visible{outline:4px solid #fff5a8;outline-offset:3px;box-shadow:0 0 0 7px #174e70}
.online-login,.online-admin-panel{
  position:fixed;
  z-index:5000;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
  overflow:auto;
  background:rgba(3,17,31,.88);
  backdrop-filter:blur(12px);
}
.online-login[hidden],.online-admin-panel[hidden]{display:none!important}
.online-login-card,.online-admin-panel>section{
  width:min(480px,100%);
  padding:24px;
  border:3px solid #9edbd2;
  border-radius:26px;
  color:#173348;
  background:#fffaf0;
  box-shadow:0 28px 80px rgba(0,0,0,.5);
}
.online-login-card img{display:block;width:74px;margin:0 auto 8px}
.online-login-card>span{display:block;text-align:center;color:#41677c;font-weight:900}
.online-login-card h2,.online-login-card p{text-align:center}
.online-login-card label,.online-admin-panel label{display:grid;gap:5px;margin-top:12px;color:#27465a;font-size:13px;font-weight:900}
.online-login-card input,.online-admin-panel input{
  min-height:46px;
  padding:9px 11px;
  border:2px solid #7995a5;
  border-radius:12px;
  color:#173348;
  background:#fff;
  font:inherit;
}
.online-login-card>button{width:100%;margin-top:16px}
.online-login-card output,.online-admin-panel output{display:block;min-height:24px;margin-top:10px;color:#8c2e2e;font-weight:900}
.online-admin-panel>section{position:relative;width:min(760px,100%)}
.online-admin-panel .close{position:absolute;top:15px;right:15px}
.online-admin-panel form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}
.online-admin-panel form button{align-self:end}
.online-account-list{display:grid;gap:7px;max-height:32vh;margin-top:12px;overflow:auto}
.online-account-list article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:9px 11px;border:1px solid #9bb0ba;border-radius:12px;background:#edf5f2}
.online-account-list b,.online-account-list small{display:block;color:#1e3d50}
@media(max-width:640px){
  .online-account-bar{top:auto;right:8px;bottom:8px;left:8px}
  .online-admin-panel form{grid-template-columns:1fr}
}