:root {
  --cream: #f1efe7;
  --paper: rgba(255, 255, 255, .89);
  --ink: #24243e;
  --muted: #7c7d91;
  --sage: #7358a6;
  --sage-dark: #57417f;
  --sage-light: #e3ddf0;
  --mint: #e3f0eb;
  --peach: #ef8962;
  --peach-light: #f9dfd2;
  --lavender-light: #e8e2f4;
  --gold: #f1bb4b;
  --gold-light: #fff0c8;
  --line: rgba(49, 44, 79, .11);
  --shadow: 0 22px 60px rgba(45, 41, 73, .11);
}

body {
  background:
    radial-gradient(circle at 76% 10%, rgba(255, 200, 105, .18), transparent 24%),
    radial-gradient(circle at 26% 82%, rgba(124, 207, 188, .15), transparent 29%),
    #f1efe7;
}

.ambient-one { background: rgba(122, 91, 177, .2); }
.ambient-two { background: rgba(242, 142, 98, .16); }

.sidebar {
  color: #f8f6ff;
  background: #171b35;
  border-right: 0;
}

.brand { color: white; }
.brand strong { font-size: 16px; }
.brand small { color: #8f94b5; }

.brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: visible;
  position: relative;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,236,174,.18), transparent 34%),
    radial-gradient(circle at 50% 56%, rgba(8,10,24,.44), transparent 67%);
  border: 0;
  box-shadow:
    0 15px 28px rgba(5,7,18,.34);
}

.brand-mark img {
  width: 56px;
  height: 56px;
  display: block;
  filter: drop-shadow(0 10px 15px rgba(8,10,24,.42));
  transform: translateY(-2px);
}
.nav-item { color: #a5a9c3; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }

.nav-item.active {
  color: white;
  background: linear-gradient(110deg, #7458a8, #604889);
  box-shadow: 0 10px 25px rgba(6, 7, 21, .24);
}

.nav-item.active .nav-icon {
  background: rgba(255,255,255,.13);
  box-shadow: none;
}

.nav-icon {
  padding: 5px;
  background: rgba(255,255,255,.025);
}

.nav-icon img {
  filter: saturate(.82) brightness(.92);
}

.nav-item.active .nav-icon img {
  filter: saturate(1.08) brightness(1.14) drop-shadow(0 2px 4px rgba(7,8,23,.3));
}

.sidebar-quote {
  color: #e9e8f3;
  background: linear-gradient(145deg, #262b4d, #212542);
  border: 1px solid rgba(255,255,255,.06);
}

.quote-leaf {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #211c39;
  background: #f2bd4d;
  transform: rotate(-6deg);
}

.sidebar-quote small { color: #9296b0; }
.parent-entry { color: #eeeef7; }
.parent-avatar {
  padding: 7px;
  background: linear-gradient(145deg, #343959, #222640);
}
.parent-entry small, .chevron { color: #8186a2; }
.topbar { background: rgba(247,245,239,.48); }

.stars-pill {
  color: #f6da91;
  background: #242946;
  box-shadow: 0 8px 20px rgba(39,39,67,.12);
}

.stars-pill img {
  width: 18px;
  height: 18px;
}

.notification img {
  width: 22px;
  height: 22px;
}

.avatar {
  border-radius: 50% 45% 50% 44%;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.08);
}

.avatar-mila { background: linear-gradient(145deg, #7053a4, #9176bd); }
.avatar-bella { background: linear-gradient(145deg, #ee835f, #f6ad70); }
.welcome-row h1 span { color: #69509c; }

.progress-ring {
  background: conic-gradient(#775da9 var(--progress, 33%), #ddd9e5 0);
}

.card {
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: var(--shadow), inset 0 1px 0 white;
}

.tasks-panel { position: relative; overflow: hidden; }

.tasks-panel::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -65px;
  top: -65px;
  border: 22px solid rgba(114,87,168,.045);
  border-radius: 50%;
  pointer-events: none;
}

.tasks-panel .section-heading,
.tasks-panel #taskList,
.tasks-panel .add-task {
  position: relative;
  z-index: 1;
}

.task-row:not(:last-child)::before {
  background: repeating-linear-gradient(to bottom, #d6cfe6 0 4px, transparent 4px 8px);
}

.task-marker { border: 2px solid #d7d1e3; background: #f7f5f8; }

.task-row.completed .task-marker {
  border-color: #6e55a0;
  background: #6e55a0;
  box-shadow: 0 0 0 4px #ece7f4;
}

.task-card { border-color: rgba(66,57,100,.09); }

.subject-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  filter: drop-shadow(0 6px 9px rgba(28,24,50,.18));
}

.subject-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: none;
  transition: transform .3s ease;
}

.task-card:hover .subject-icon img {
  transform: scale(1.04);
}
.task-points i { color: #f0b943; }
.task-start { color: #624995; background: #eee8f7; }

.primary-button {
  background: linear-gradient(135deg, #7257a8, #574180);
  box-shadow: 0 10px 22px rgba(82,61,128,.24);
}

.primary-button:hover { background: linear-gradient(135deg, #654b9a, #49356f); }

.focus-card {
  color: white;
  background:
    radial-gradient(circle at 50% 42%, rgba(137,105,194,.24), transparent 38%),
    linear-gradient(145deg, #202542, #171b34);
  border-color: rgba(255,255,255,.06);
}

.focus-card .eyebrow { color: #989db9; }
.time-badge { color: #f3dba1; background: rgba(244,190,77,.13); }
.focus-card > p { color: #9fa4bd; }

.focus-card .primary-button {
  background: linear-gradient(110deg, #f2a15e, #ed7c60);
  box-shadow: 0 10px 22px rgba(237,124,96,.22);
}

.monster-stage {
  width: calc(100% + 50px);
  height: 205px;
  margin: 12px -25px 8px;
  overflow: hidden;
}

.monster-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(25,29,55,.08) 45%, #191d37 100%),
    linear-gradient(90deg, #1b203c 0, transparent 18%, transparent 82%, #1b203c 100%);
  pointer-events: none;
}

.companion-focus-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: 50% 50%;
  padding: 5px 18px 0;
  transform: translate(var(--amo-x, 0), var(--amo-y, 0)) scale(.98);
  filter: drop-shadow(0 15px 18px rgba(3,4,18,.42));
  animation: cinematicBreath 6s ease-in-out infinite;
  transition: transform .25s ease-out;
}

@keyframes cinematicBreath {
  50% { transform: translate(var(--amo-x, 0), var(--amo-y, 0)) scale(1.025); }
}

.monster-stage .focus-star {
  z-index: 2;
  text-shadow: 0 0 12px rgba(242,189,77,.8);
}

.monster-stage[role="button"] {
  cursor: pointer;
  outline: none;
}

.monster-stage[role="button"]:focus-visible {
  box-shadow: inset 0 0 0 3px #f2bd4d;
}

.amo-reply {
  position: absolute;
  z-index: 3;
  left: 18px;
  top: 14px;
  max-width: 145px;
  padding: 8px 10px;
  border-radius: 12px 12px 12px 3px;
  color: #292742;
  background: rgba(255,250,236,.94);
  box-shadow: 0 8px 20px rgba(7,8,25,.2);
  font-size: 8px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(6px) scale(.94);
  transition: .25s ease;
}

.monster-stage.responding .amo-reply {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.monster-stage.responding .companion-focus-art {
  animation: amoHappyBounce .65s cubic-bezier(.2,1.5,.4,1);
}

@keyframes amoHappyBounce {
  35% { transform: translate(var(--amo-x, 0), calc(var(--amo-y, 0) - 7px)) scale(1.07) rotate(-1deg); }
  70% { transform: translate(var(--amo-x, 0), var(--amo-y, 0)) scale(1.02) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .companion-focus-art,
  .ring-one,
  .ring-two,
  .study-monster,
  .monster-eye,
  .dorm-eye {
    animation: none !important;
  }
}

.magic-ring {
  position: absolute;
  left: 50%;
  top: 52%;
  border: 1px solid rgba(172,144,222,.23);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(-12deg);
}

.ring-one { width: 176px; height: 85px; animation: orbitMonster 7s linear infinite; }
.ring-two { width: 120px; height: 120px; animation: orbitMonster 9s linear infinite reverse; }

@keyframes orbitMonster {
  to { transform: translate(-50%,-50%) rotate(348deg); }
}

.study-monster {
  position: absolute;
  left: 50%;
  bottom: 27px;
  width: 82px;
  height: 82px;
  transform: translateX(-50%);
  border-radius: 48% 52% 42% 44%;
  background: linear-gradient(145deg, #9a79c4, #7252a4);
  box-shadow: inset 8px 7px 0 rgba(255,255,255,.08), 0 15px 25px rgba(7,8,24,.25);
  animation: monsterFloat 3.4s ease-in-out infinite;
}

@keyframes monsterFloat {
  50% { transform: translateX(-50%) translateY(-5px) rotate(1deg); }
}

.monster-horn {
  position: absolute;
  width: 18px;
  height: 25px;
  top: -13px;
  border-radius: 80% 10%;
  background: #f1b94b;
  z-index: -1;
}

.mh-left { left: 9px; transform: rotate(-30deg); }
.mh-right { right: 9px; transform: scaleX(-1) rotate(-30deg); }

.monster-eye {
  position: absolute;
  width: 16px;
  height: 19px;
  top: 22px;
  border-radius: 50%;
  background: white;
  animation: monsterBlink 4s infinite;
}

.monster-eye::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 9px;
  left: 5px;
  top: 6px;
  border-radius: 50%;
  background: #25243f;
}

.me-left { left: 19px; }
.me-right { right: 19px; }

@keyframes monsterBlink {
  0%, 45%, 50%, 100% { transform: scaleY(1); }
  47% { transform: scaleY(.08); }
}

.monster-mouth {
  position: absolute;
  width: 18px;
  height: 8px;
  left: 32px;
  top: 49px;
  border-bottom: 2px solid #3f2e65;
  border-radius: 50%;
}

.monster-book {
  position: absolute;
  width: 66px;
  height: 31px;
  left: 8px;
  bottom: -15px;
  display: grid;
  place-items: center;
  border-radius: 4px 4px 10px 10px;
  color: #703e45;
  background: #f5aa67;
  border-bottom: 5px solid #da7954;
  font-size: 9px;
  transform: perspective(80px) rotateX(18deg);
}

.monster-book::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(92,48,58,.25);
}

.mini-garden { background: linear-gradient(180deg, #292e50, #414566); }

.cinematic-mini-dorm {
  height: 136px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(8, 10, 24, .05), rgba(8, 10, 24, .32)),
    var(--dorm-background) center 53% / cover no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 -40px 70px rgba(13, 10, 25, .38),
    0 14px 32px rgba(20, 20, 48, .16);
}

.cinematic-mini-dorm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 76% 20%, rgba(255,215,138,.3), transparent 24%),
    radial-gradient(circle at 28% 78%, rgba(126,93,188,.22), transparent 30%),
    linear-gradient(90deg, rgba(7, 9, 21, .1), transparent 35%, rgba(7, 9, 21, .18));
  pointer-events: none;
}

.cinematic-mini-dorm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(circle, rgba(246,202,99,.9) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(179,142,255,.72) 0 1.2px, transparent 1.8px);
  background-position: 18% 28%, 76% 34%;
  background-size: 86px 54px, 112px 72px;
  opacity: .7;
  mix-blend-mode: screen;
  pointer-events: none;
}

.cinematic-mini-dorm .dorm-window,
.cinematic-mini-dorm .dorm-bed,
.cinematic-mini-dorm .mini-monster {
  display: none;
}

.cinematic-mini-dorm .garden-label {
  z-index: 4;
}

.mini-dorm-residents {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.mini-dorm-resident {
  position: absolute;
  bottom: 2px;
  width: 78px;
  height: 104px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 14px rgba(5, 6, 16, .42));
  transform-origin: 50% 100%;
}

.mini-dorm-resident:nth-child(1) {
  right: 24px;
  transform: scale(1.02);
}

.mini-dorm-resident:nth-child(2) {
  right: 82px;
  bottom: -2px;
  transform: scale(.82);
  opacity: .94;
}

.mini-dorm-resident:nth-child(3) {
  right: 138px;
  bottom: -4px;
  transform: scale(.72);
  opacity: .86;
}

.sky-dots {
  background: #f3c45f;
  box-shadow: 40px -5px #9f89ca, 82px 8px #f3c45f, 180px 0 #f3c45f, 221px 16px #9f89ca;
}

.dorm-window {
  position: absolute;
  width: 54px;
  height: 56px;
  right: 24px;
  top: 13px;
  border: 5px solid #151a33;
  border-radius: 25px 25px 5px 5px;
  background: linear-gradient(#675f94, #f1b965);
}

.dorm-window::before,
.dorm-window::after {
  content: "";
  position: absolute;
  background: #151a33;
}

.dorm-window::before { width: 4px; top: 0; bottom: 0; left: 20px; }
.dorm-window::after { height: 4px; left: 0; right: 0; top: 23px; }

.dorm-bed {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 30px;
  bottom: 7px;
  border-radius: 14px 14px 4px 4px;
  background: #ee9d6e;
  box-shadow: inset 0 -7px #cd6e62;
}

.mini-monster {
  position: absolute;
  z-index: 2;
  width: 47px;
  height: 45px;
  bottom: 22px;
  border-radius: 48% 52% 38% 42%;
}

.mini-purple { left: 65px; background: #8c70ba; }
.mini-orange { left: 117px; bottom: 20px; background: #f0a05f; transform: scale(.82); }

.mini-monster::before,
.mini-monster::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 13px;
  top: 14px;
  border-radius: 50%;
  background: white;
}

.mini-monster::before { left: 9px; }
.mini-monster::after { right: 9px; }

.mini-monster i,
.mini-monster b {
  position: absolute;
  width: 8px;
  height: 11px;
  top: -5px;
  border-radius: 6px 2px;
  background: #f4c45f;
}

.mini-monster i { left: 5px; transform: rotate(-25deg); }
.mini-monster b { right: 5px; transform: scaleX(-1) rotate(-25deg); }
.garden-label { color: #eeeefa; background: rgba(21,25,50,.68); }
.screen-icon { color: #674f9c; }

.garden-scene {
  background:
    radial-gradient(circle at 77% 15%, rgba(246,189,77,.95) 0 46px, rgba(246,189,77,.12) 47px 73px, transparent 74px),
    linear-gradient(180deg, #292e54 0%, #46466b 53%, #8173a1 100%);
}

.garden-scene.cinematic-dorm {
  min-height: 570px;
  background:
    linear-gradient(180deg, rgba(9,11,28,.04), rgba(9,11,28,.2)),
    var(--dorm-background) center center / cover no-repeat;
}

.garden-scene.cinematic-dorm.final-composite-mode {
  min-height: 620px;
  background:
    var(--dorm-final-preview, var(--dorm-background)) center center / cover no-repeat;
  box-shadow: 0 26px 80px rgba(19,20,45,.2);
}

.garden-scene.cinematic-dorm.final-3d-sample-mode {
  min-height: 680px;
  background: #101229;
  box-shadow: 0 30px 90px rgba(13,14,38,.28);
}

.garden-scene.cinematic-dorm.first-release-dorm-mode {
  min-height: 650px;
  background:
    radial-gradient(circle at 70% 40%, rgba(239, 193, 113, .12), transparent 30%),
    var(--dorm-background) center center / cover no-repeat;
  box-shadow: 0 28px 86px rgba(19,20,45,.24);
}

.first-release-dorm-mode .dorm-three-stage,
.first-release-dorm-mode .scene-copy,
.first-release-dorm-mode .scene-badge-wall,
.first-release-dorm-mode .scene-layer-label {
  display: none !important;
}

.first-release-dorm-mode .scene-residents {
  display: block !important;
  z-index: 20;
  pointer-events: auto;
}

.first-release-dorm-mode .scene-resident {
  cursor: pointer;
  pointer-events: auto;
  width: calc(16% * var(--dorm-scale, 1));
  height: calc(40% * var(--dorm-scale, 1));
  left: var(--dorm-x, 58%);
  top: var(--dorm-y, 56%);
  right: auto;
  bottom: auto;
  animation: none;
  touch-action: none;
  user-select: none;
  transform: translate(-50%, -50%);
  transition:
    opacity .35s ease,
    left .18s ease,
    top .18s ease,
    width .18s ease,
    height .18s ease,
    transform .25s cubic-bezier(.2,1.2,.3,1);
}

.first-release-dorm-mode .scene-resident::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(3,4,14,.45), transparent 66%);
  filter: blur(4px);
  z-index: -1;
}

.first-release-dorm-mode .scene-resident img {
  filter: drop-shadow(0 24px 20px rgba(4,5,18,.55));
  animation: residentBreatheImage 4.8s ease-in-out infinite;
  transform: scaleX(var(--dorm-flip, 1));
}

.first-release-dorm-mode .scene-resident span {
  display: none;
}

.first-release-dorm-mode .scene-resident.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.first-release-dorm-mode .resident-amo {
  width: calc(21% * var(--dorm-scale, 1));
  height: calc(54% * var(--dorm-scale, 1));
  left: var(--dorm-x, 58%);
  top: var(--dorm-y, 43%);
  right: auto;
  bottom: auto;
  opacity: 1 !important;
  transform: translate(-50%, -50%);
}

.first-release-dorm-mode .resident-amo.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.first-release-dorm-mode .resident-paopao {
  width: calc(17% * var(--dorm-scale, 1));
  height: calc(43% * var(--dorm-scale, 1));
  left: var(--dorm-x, 72%);
  top: var(--dorm-y, 54%);
  right: auto;
  bottom: auto;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.first-release-dorm-mode .resident-paopao.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.first-release-dorm-mode .scene-resident.dragging {
  cursor: grabbing;
  z-index: 12;
  animation: none;
  transition: none;
}

.first-release-dorm-mode .scene-resident.dragging img {
  animation: none;
}

.first-release-dorm-mode .scene-resident.selected-placement {
  outline: none;
}

.first-release-dorm-mode .scene-resident.selected-placement::after {
  background:
    radial-gradient(ellipse, rgba(244,207,120,.4), rgba(111,81,159,.2) 38%, rgba(3,4,14,.42) 64%, transparent 78%);
  filter: blur(6px);
}

.first-release-dorm-mode .scene-resident.interacting {
  animation: none;
}

.first-release-dorm-mode .scene-resident.interacting img {
  animation: dormMonsterGreet .8s cubic-bezier(.2,1.45,.4,1), residentBreatheImage 4.8s ease-in-out infinite .8s;
}

.dorm-placement-tools {
  position: absolute;
  z-index: 24;
  right: 22px;
  bottom: 20px;
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(18, 21, 43, .72);
  border: 1px solid rgba(244, 207, 120, .18);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(5, 6, 18, .28);
}

.dorm-placement-tools button {
  border: 0;
  min-width: 38px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff7df;
  background: rgba(255,255,255,.1);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.dorm-placement-tools button:hover {
  background: rgba(244, 207, 120, .22);
}

@keyframes dormMonsterGreet {
  0% { transform: scaleX(var(--dorm-flip, 1)) translateY(0) scale(1); }
  26% { transform: scaleX(var(--dorm-flip, 1)) translateY(-18px) scale(1.07) rotate(-2deg); }
  52% { transform: scaleX(var(--dorm-flip, 1)) translateY(0) scale(1.02) rotate(1.5deg); }
  76% { transform: scaleX(var(--dorm-flip, 1)) translateY(-8px) scale(1.04) rotate(-1deg); }
  100% { transform: scaleX(var(--dorm-flip, 1)) translateY(0) scale(1); }
}

@keyframes residentBreatheImage {
  50% { transform: scaleX(var(--dorm-flip, 1)) translateY(-3px) scale(1.008); }
}

.final-3d-sample-mode .dorm-three-stage {
  display: block;
}

.final-3d-sample-mode .dorm-controls,
.final-3d-sample-mode .dorm-edit-hint,
.final-3d-sample-mode .scene-copy,
.final-3d-sample-mode .scene-badge-wall,
.final-3d-sample-mode .scene-residents,
.final-3d-sample-mode .scene-layer-label {
  display: none !important;
}

.final-3d-sample-mode::after {
  content: "3D 宿舍最终样板 v1 · 暂不放怪兽";
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 9;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: rgba(255,255,255,.74);
  background: rgba(13,16,36,.58);
  backdrop-filter: blur(10px);
  font-size: 8px;
  letter-spacing: .08em;
}

.final-composite-mode .dorm-three-stage {
  display: none;
}

.final-composite-mode .scene-copy,
.final-composite-mode .scene-residents,
.final-composite-mode .scene-layer-label {
  display: none !important;
}

.dorm-three-stage {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  transition: opacity .55s ease;
}

.dorm-three-stage.ready { opacity: 1; }

.dorm-three-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(circle at 73% 26%, rgba(255, 180, 84, .16), transparent 24%),
    radial-gradient(circle at 24% 34%, rgba(121, 87, 188, .18), transparent 28%),
    linear-gradient(180deg, rgba(6, 8, 23, .06), transparent 34%, rgba(4, 5, 18, .14)),
    radial-gradient(circle at center, transparent 52%, rgba(3, 4, 13, .24) 100%);
}

#dormThreeCanvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.dorm-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  color: #e8e7f2;
  background: rgba(17,20,42,.76);
  font-size: 8px;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
  transition: opacity .25s;
}

.dorm-three-stage.ready .dorm-loading {
  opacity: 0;
  pointer-events: none;
}

.dorm-loading span {
  width: 9px;
  height: 9px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #f2bd4d;
  border-radius: 50%;
  animation: dormLoader .8s linear infinite;
}

@keyframes dormLoader { to { transform: rotate(360deg); } }

.dorm-controls {
  position: absolute;
  z-index: 8;
  top: 15px;
  left: 15px;
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: rgba(17,20,42,.72);
  backdrop-filter: blur(10px);
}

.dorm-controls button {
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  color: #c5c5d7;
  background: transparent;
  font-size: 7px;
  font-weight: 700;
  cursor: pointer;
}

.dorm-controls button:hover,
.dorm-controls button.active {
  color: #fff3cc;
  background: rgba(123,91,177,.56);
}

.dorm-controls span {
  width: 1px;
  margin: 3px 2px;
  background: rgba(255,255,255,.13);
}

.dorm-edit-hint {
  position: absolute;
  z-index: 8;
  left: 15px;
  bottom: 14px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 10px;
  color: #d7d6e4;
  background: rgba(17,20,42,.68);
  font-size: 7px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.dorm-three-stage.editing .dorm-edit-hint { opacity: 1; }

.cinematic-dorm.three-ready .scene-badge-wall,
.cinematic-dorm.three-ready .scene-residents {
  display: none;
}

.cinematic-dorm.final-composite-mode.three-ready .scene-badge-wall,
.cinematic-dorm.final-composite-mode .scene-badge-wall {
  display: grid;
}

.cinematic-dorm .garden-sun,
.cinematic-dorm .cloud,
.cinematic-dorm .garden-ground,
.cinematic-dorm .dorm-monster {
  display: none;
}

.cinematic-dorm .scene-copy {
  left: auto;
  right: 3%;
  top: 4%;
  width: 205px;
  background: rgba(18,22,48,.72);
  box-shadow: 0 18px 45px rgba(5,7,21,.22);
}

.final-composite-mode .scene-copy {
  right: 3.5%;
  top: 5%;
  background: rgba(18, 20, 42, .78);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

.scene-badge-wall {
  position: absolute;
  z-index: 4;
  left: 7.5%;
  top: 22.5%;
  width: 27%;
  height: 28.5%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
  gap: 4% 3%;
  perspective: none;
}

.final-composite-mode .scene-badge-wall {
  z-index: 5;
  left: 6.4%;
  top: 17%;
  width: 47%;
  height: 36%;
  gap: 3% 1%;
  transform: perspective(900px) rotateY(0deg);
}

.final-composite-mode .scene-badge {
  width: 54%;
  opacity: .96;
}

.scene-badge {
  width: 80%;
  aspect-ratio: 1;
  display: block;
  position: relative;
  opacity: 1;
}

.scene-badge.earned {
  animation: badgeShimmer 5s ease-in-out infinite;
}

.wall-badge-stack {
  position: absolute;
  inset: -9%;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 4px 4px rgba(4,5,15,.62));
}

.wall-badge-stack img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wall-badge-emblem {
  transform: scale(.64);
}

.wall-badge-frame {
  z-index: 2;
}

.wall-badge-stack {
  inset: -4%;
}

.wall-badge-stack .wall-badge-emblem {
  transform: scale(.8125);
}

.wall-badge-stack .wall-badge-frame {
  transform: none;
}

@keyframes badgeShimmer {
  50% { filter: brightness(1.08); }
}

.scene-residents {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.final-composite-mode .scene-residents {
  z-index: 6;
  pointer-events: auto;
}

.scene-resident {
  position: absolute;
  bottom: 5%;
  transform-origin: 50% 100%;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,1.4,.4,1);
  animation: residentBreathe 5s ease-in-out infinite;
}

.final-composite-mode .scene-resident {
  cursor: grab;
  pointer-events: auto;
}

.final-composite-mode .scene-resident.dragging {
  cursor: grabbing;
  animation: none;
  z-index: 12;
}

.scene-resident.hidden {
  opacity: 0;
  transform: translateY(45px) scale(.7);
}

.scene-resident img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgba(5,6,17,.42));
}

.scene-resident span {
  display: none;
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 8px;
  color: white;
  background: rgba(20,23,48,.72);
  font-size: 7px;
  opacity: 0;
  transition: opacity .2s;
}

.scene-resident:hover span { opacity: 0; }

.resident-amo {
  width: 28%;
  height: 68%;
  right: 18%;
}

.final-composite-mode .resident-amo {
  width: 20%;
  height: 50%;
  right: 23%;
  bottom: 8%;
}

.resident-paopao {
  width: 18%;
  height: 44%;
  right: 4%;
  animation-delay: -.8s;
}

.final-composite-mode .resident-paopao {
  width: 13%;
  height: 32%;
  right: 7%;
  bottom: 9%;
}

.resident-lulu {
  width: 19%;
  height: 49%;
  right: 45%;
  animation-delay: -1.6s;
}

.final-composite-mode .resident-lulu {
  width: 14%;
  height: 36%;
  right: 51%;
  bottom: 8%;
}

@keyframes residentBreathe {
  50% { transform: translateY(-3px) scale(1.008); }
}

.scene-layer-label {
  position: absolute;
  z-index: 5;
  right: 3%;
  bottom: 3%;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #c9cad9;
  background: rgba(18,22,48,.7);
  backdrop-filter: blur(8px);
  font-size: 8px;
}

.scene-layer-label strong {
  color: #f1c769;
}

.dorm-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr);
  gap: 22px;
  margin-top: 22px;
}

.badge-wall-card,
.production-preview-card,
.companions-card {
  padding: 29px;
}

.badge-wall-card .section-heading p,
.production-preview-card .section-heading p,
.companions-card .section-heading p {
  margin: 5px 0 0;
  color: #8c8d9e;
  font-size: 9px;
}

.production-preview-card {
  grid-column: 1 / -1;
}

.production-preview-hero {
  margin: 18px 0 22px;
  padding: 30px;
}

.production-preview-hero .production-preview-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(190px, .45fr);
}

.production-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(150px, .55fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 20px;
}

.production-preview-grid figure {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(145deg, #191b34, #0f1227);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 34px rgba(9,11,28,.18);
}

.production-preview-grid img {
  width: 100%;
  display: block;
}

.dorm-final-preview img {
  aspect-ratio: 1672 / 941;
  object-fit: cover;
}

.production-preview-hero .dorm-final-preview img {
  min-height: 320px;
}

.amo-production-preview {
  display: grid;
  align-content: end;
}

.amo-production-preview img {
  height: 250px;
  object-fit: contain;
  object-position: 50% 100%;
  padding: 14px 10px 0;
}

.production-preview-grid figcaption {
  padding: 10px 12px 12px;
  color: rgba(255,255,255,.74);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.collection-count,
.room-capacity {
  padding: 8px 11px;
  border-radius: 11px;
  color: #7258a5;
  background: #eee9f6;
  font-size: 9px;
  white-space: nowrap;
}

.collection-count strong,
.room-capacity strong {
  font-size: 14px;
}

.collection-count b {
  font-size: 11px;
}

.badge-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 23px;
  padding: 22px;
  border-radius: 20px;
  background:
    linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,0)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 55px),
    #242844;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 18px 35px rgba(10,12,29,.25);
}

.achievement-badge {
  min-width: 0;
  display: grid;
  grid-template-rows: 96px auto auto auto;
  justify-items: center;
  align-items: start;
  padding: 8px 3px;
  border: 0;
  border-radius: 14px;
  color: #e9e9f4;
  background: transparent;
  cursor: pointer;
  transition: .24s ease;
}

.achievement-badge:hover,
.achievement-badge.selected {
  background: rgba(255,255,255,.07);
  transform: translateY(-3px);
}

.achievement-badge.claimable {
  position: relative;
  background:
    radial-gradient(circle at 50% 16%, rgba(245, 202, 106, .2), transparent 42%),
    rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(241,199,105,.22), 0 10px 22px rgba(8, 7, 18, .18);
}

.achievement-badge.claimable .badge-art-stack {
  animation: badgeClaimReady 1.9s ease-in-out infinite;
  filter: drop-shadow(0 10px 14px rgba(4,5,15,.42)) drop-shadow(0 0 10px rgba(241,199,105,.28));
}

.achievement-badge.displayed {
  box-shadow: inset 0 0 0 1px rgba(241,199,105,.28);
}

.badge-shape {
  width: 96px;
  height: 96px;
  margin: 0 auto 10px;
  position: relative;
  display: grid;
  place-items: center;
  border: 4px solid #696b7c;
  border-radius: 50% 50% 46% 46%;
  color: #a8a9b5;
  background: linear-gradient(145deg, #4f5264, #303345);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), 0 8px 14px rgba(5,7,18,.28);
}

.badge-shape.has-art {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.badge-shape.has-art::before,
.badge-shape.has-art::after {
  display: none;
}

.badge-art-stack {
  position: relative;
  inset: auto;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 8px 10px rgba(4,5,15,.42));
}

.badge-art-stack img {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  object-fit: contain;
}

.badge-art-stack .badge-art-frame {
  width: 100%;
  height: 100%;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.badge-art-stack .badge-art-emblem {
  width: 81.25%;
  height: 81.25%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.badge-shape::before,
.badge-shape::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 16px;
  height: 23px;
  top: -6px;
  border: 3px solid currentColor;
  border-radius: 8px 2px;
  background: inherit;
}

.badge-shape::before { left: 1px; transform: rotate(-30deg); }
.badge-shape::after { right: 1px; transform: scaleX(-1) rotate(-30deg); }

.badge-shape i {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.34);
  border-radius: 50%;
  font-size: 17px;
  font-style: normal;
}

.badge-gold { color: #f5cc6c; border-color: #e9af3e; background: linear-gradient(145deg, #f5cb66, #a96d25); }
.badge-purple { color: #c4a9ef; border-color: #9b78cb; background: linear-gradient(145deg, #9b78cb, #553b80); }
.badge-coral { color: #ffc09f; border-color: #ef8a62; background: linear-gradient(145deg, #ef9a6f, #a94c48); }
.badge-blue { color: #a8d9ed; border-color: #6caac4; background: linear-gradient(145deg, #79b8d0, #365d85); }
.badge-mint { color: #b8e4d5; border-color: #7ebaa5; background: linear-gradient(145deg, #91c8b3, #416f69); }
.badge-amber { color: #ffe09a; border-color: #d69538; background: linear-gradient(145deg, #e9ad4b, #875128); }
.badge-rose { color: #ffd1dd; border-color: #d87893; background: linear-gradient(145deg, #dd89a3, #7c405f); }
.badge-teal { color: #bde8e3; border-color: #62aaa2; background: linear-gradient(145deg, #75bbb3, #315f68); }

.achievement-badge.locked {
  opacity: .48;
  filter: grayscale(.45);
}

.achievement-badge strong,
.achievement-badge small,
.badge-display-state {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-badge strong { font-size: 9px; }
.achievement-badge small { margin-top: 3px; color: #9fa2b8; font-size: 7px; }
.achievement-badge.earned small { color: #e8c56e; }
.achievement-badge.claimable small { color: #ffe29b; }

.badge-display-state {
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.06);
  font-size: 6px;
}

.achievement-badge.displayed .badge-display-state {
  color: #33250d;
  background: #f0c86a;
}

.achievement-badge.claimable .badge-display-state {
  color: #2e220b;
  background: linear-gradient(135deg, #ffe6a2, #e7b646);
  box-shadow: 0 5px 12px rgba(224, 173, 68, .22);
}

.achievement-badge.claim-pop .badge-art-stack {
  animation: badgeClaimPop .62s cubic-bezier(.2, 1.28, .24, 1) both;
}

.badge-claim-burst {
  position: absolute;
  left: 50%;
  top: 50px;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 3;
}

.badge-claim-burst i {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f4c95f;
  box-shadow: 0 0 10px rgba(244,201,95,.62);
  animation: badgeSpark .9s ease-out forwards;
}

.badge-claim-burst i:nth-child(1) { --x: -48px; --y: -42px; }
.badge-claim-burst i:nth-child(2) { --x: 44px; --y: -48px; background: #c8a6ff; }
.badge-claim-burst i:nth-child(3) { --x: -56px; --y: 18px; background: #fff0b6; }
.badge-claim-burst i:nth-child(4) { --x: 54px; --y: 22px; }
.badge-claim-burst i:nth-child(5) { --x: -12px; --y: -62px; width: 6px; height: 6px; background: #fff6d0; }
.badge-claim-burst i:nth-child(6) { --x: 10px; --y: 52px; width: 6px; height: 6px; background: #d6b7ff; }

@keyframes badgeClaimReady {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.035); }
}

@keyframes badgeClaimPop {
  0% { transform: scale(.86) rotate(-3deg); }
  60% { transform: scale(1.12) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes badgeSpark {
  0% { transform: translate(0, 0) scale(.5); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1.1); opacity: 0; }
}

.badge-detail {
  min-height: 59px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  padding: 11px 14px;
  border-radius: 14px;
  background: #f3f0f7;
}

.badge-detail-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #5d458a;
  background: #ded4ef;
}

.badge-detail strong { font-size: 10px; }
.badge-detail p { margin: 3px 0 0; color: #88899a; font-size: 8px; }

.companion-list {
  display: grid;
  gap: 11px;
  margin-top: 23px;
}

.active-companion-panel {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 13px;
  margin-top: 20px;
  padding: 12px;
  border: 1px solid rgba(239,193,93,.28);
  border-radius: 18px;
  color: #ece9f7;
  background:
    radial-gradient(circle at 12% 18%, rgba(155,117,209,.22), transparent 38%),
    linear-gradient(135deg, #252945, #191d37);
  box-shadow: 0 14px 30px rgba(14,16,36,.12);
}

.active-companion-panel > img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 15px;
  background: rgba(255,255,255,.04);
}

.active-companion-panel span,
.active-companion-panel strong,
.active-companion-panel p {
  display: block;
}

.active-companion-panel span {
  color: #e4bd65;
  font-size: 7px;
  letter-spacing: .12em;
}

.active-companion-panel strong {
  margin-top: 4px;
  font-size: 11px;
}

.active-companion-panel p {
  margin: 5px 0 0;
  color: #aeb1c8;
  font-size: 8px;
  line-height: 1.55;
}

.active-companion-panel > b {
  padding: 7px 9px;
  border-radius: 10px;
  color: #f0ce7a;
  background: rgba(240,190,77,.12);
  font-size: 8px;
}

.companion-card {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(62,57,91,.09);
  border-radius: 17px;
  background: rgba(248,247,250,.72);
  transition: .25s ease;
}

.companion-card.resident {
  border-color: rgba(115,88,166,.25);
  background: #f1edf7;
}

.companion-card.selected-companion {
  border-color: rgba(224,173,65,.62);
  box-shadow: 0 0 0 2px rgba(224,173,65,.11);
}

.companion-card.locked { opacity: .72; }

.companion-portrait {
  width: 62px;
  height: 62px;
  overflow: hidden;
  border-radius: 16px;
  background: #252947;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

.companion-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.companion-card[data-companion="amo"] .companion-portrait img { object-position: 50% 34%; }

.companion-info strong,
.companion-info small,
.companion-info span {
  display: block;
}

.companion-info strong { font-size: 11px; }
.companion-info small { margin-top: 2px; color: #765c9f; font-size: 8px; }
.companion-info span { margin-top: 5px; color: #9899a8; font-size: 7px; }
.companion-info em { display: block; margin-top: 4px; color: #9a7840; font-size: 7px; font-style: normal; }

.unlock-progress {
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(83,67,112,.12);
}

.unlock-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7a5bae, #e2ad48);
}

.companion-action {
  padding: 8px 9px;
  border: 0;
  border-radius: 10px;
  color: #634b91;
  background: #e7e0f1;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.companion-upgrade {
  padding: 8px 9px;
  border: 0;
  border-radius: 10px;
  color: #573b7b;
  background: linear-gradient(135deg, #f5df91, #e3b54d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.companion-upgrade:disabled {
  color: #9b8f73;
  background: #eee8dd;
  cursor: default;
}

.companion-actions {
  display: grid;
  gap: 6px;
}

.companion-select {
  padding: 8px 9px;
  border: 1px solid rgba(112,83,163,.22);
  border-radius: 10px;
  color: #5f458f;
  background: white;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.companion-select:disabled {
  color: #b59342;
  border-color: rgba(221,175,69,.28);
  background: #fff8e7;
  cursor: default;
}

.companion-card.resident .companion-action {
  color: #88899a;
  background: white;
}

.starter-modal {
  width: min(920px, 96vw);
  text-align: center;
}

.starter-modal > p {
  margin: -8px auto 20px;
  max-width: 620px;
  color: #7c7d8c;
  font-size: 10px;
  line-height: 1.7;
}

.starter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.starter-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(94,72,132,.14);
  border-radius: 18px;
  color: #292741;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.starter-card:hover {
  transform: translateY(-3px);
  border-color: rgba(126,90,178,.45);
  box-shadow: 0 12px 30px rgba(50,39,78,.12);
}

.starter-card img {
  width: 100%;
  height: 130px;
  display: block;
  object-fit: contain;
  border-radius: 13px;
  background: linear-gradient(145deg, #f5f0ea, #eee9f1);
}

.starter-card span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
}

.starter-card strong { font-size: 11px; }
.starter-card small { color: #765c9f; font-size: 7px; }
.starter-card p { min-height: 30px; margin: 5px 0; color: #8b8c9b; font-size: 7px; line-height: 1.5; }
.starter-card b { color: #b57c24; font-size: 8px; }
.starter-note { display: block; margin-top: 15px; color: #9999a5; font-size: 8px; }

@media (max-width: 720px) {
  .starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .starter-card img { height: 112px; }
}

.mystery-egg {
  display: grid;
  place-items: center;
  color: #f2cb72;
  background:
    radial-gradient(circle at 35% 28%, #b496d1 0 4px, transparent 5px),
    radial-gradient(circle at 68% 61%, #f1b95a 0 5px, transparent 6px),
    linear-gradient(145deg, #554076, #252947);
  font-size: 22px;
  font-weight: 700;
}

.garden-sun { display: none; }
.cloud { background: rgba(190,185,220,.16); }

.scene-copy {
  color: white;
  background: rgba(24,28,53,.54);
  border: 1px solid rgba(255,255,255,.08);
}

.scene-copy span, .scene-copy p { color: #b8b9d0; }
.scene-copy strong { color: #f4c260; }

.garden-ground {
  background: #242944;
  box-shadow: inset 0 35px 60px rgba(141,108,174,.22);
}

.dorm-monster {
  width: 250px;
  height: 275px;
  bottom: 86px;
  border-radius: 48% 52% 41% 44%;
  background: linear-gradient(145deg, #9574bd, #63478f);
  box-shadow: inset 21px 13px 0 rgba(255,255,255,.07), 0 30px 50px rgba(10,11,31,.27);
}

.dorm-horn {
  position: absolute;
  z-index: -1;
  width: 58px;
  height: 75px;
  top: -35px;
  border-radius: 80% 8%;
  background: #efb94f;
}

.dh-left { left: 24px; transform: rotate(-31deg); }
.dh-right { right: 24px; transform: scaleX(-1) rotate(-31deg); }

.dorm-eye {
  position: absolute;
  width: 50px;
  height: 60px;
  top: 75px;
  border-radius: 50%;
  background: white;
  animation: monsterBlink 4.5s infinite;
}

.dorm-eye::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 28px;
  left: 16px;
  top: 20px;
  border-radius: 50%;
  background: #24243e;
}

.de-left { left: 48px; }
.de-right { right: 48px; }

.dorm-mouth {
  position: absolute;
  width: 58px;
  height: 25px;
  left: 96px;
  top: 155px;
  border-bottom: 6px solid #38255b;
  border-radius: 50%;
}

.dorm-mouth::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 10px;
  left: 20px;
  bottom: -11px;
  border-radius: 50%;
  background: #e98383;
}

.dorm-arm {
  position: absolute;
  z-index: -1;
  width: 42px;
  height: 110px;
  top: 137px;
  border-radius: 40px;
  background: #6c4d98;
}

.da-left { left: -27px; transform: rotate(24deg); }
.da-right { right: -27px; transform: rotate(-24deg); }

.dorm-badge {
  position: absolute;
  width: 48px;
  height: 48px;
  left: 101px;
  bottom: 24px;
  display: grid;
  place-items: center;
  border: 5px solid #ffdf89;
  border-radius: 50% 50% 45% 45%;
  color: #563e7b;
  background: #f2bd4d;
  font-weight: 700;
}

.subject-plot { background: rgba(255,255,255,.88); }
.wallet { background: linear-gradient(145deg, #242946, #171b34); }
.wallet-line > span { color: #b7bad1; }
.wallet strong { color: #f4cf78; }
.reward-card.featured { color: white; background: linear-gradient(145deg, #292e50, #36385e); }
.reward-card.featured p { color: #afb1c8; }
.reward-tag { background: #ef8b62; }
.reward-card.featured button { background: linear-gradient(110deg, #f1a15e, #ee7f61); }
.week-score { color: #6b519f; }
.bars .current i { background: #7156a4; }

.focus-modal {
  background:
    radial-gradient(circle at 50% 48%, rgba(125,91,181,.09), transparent 35%),
    #f5f1e9;
}

.timer-progress { stroke: #7358a6; }

.timer-companion {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -18px;
  width: 58px;
  height: 58px;
  padding: 3px;
  object-fit: contain;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 18px;
  background: linear-gradient(145deg, #292e50, #171b34);
  box-shadow: 0 10px 22px rgba(28,23,56,.22);
  transform: translateX(-50%);
}
.celebration {
  background:
    radial-gradient(circle at 50% 42%, rgba(244, 207, 120, .24), transparent 26%),
    rgba(19,22,44,.56);
}
.celebration-card {
  color: white;
  background:
    radial-gradient(circle at 18% 10%, rgba(244,207,120,.18), transparent 34%),
    linear-gradient(145deg, #292e51, #191d38);
  border-color: rgba(244,207,120,.16);
}
.celebration h2 { color: #fff7df; }
.celebration p { color: #c5c5d8; }

.earned-star {
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, #ffe8a1, #d99a31 46%, #5f3919 100%);
  box-shadow:
    0 0 0 10px rgba(242,189,77,.18),
    0 12px 28px rgba(7,8,25,.25);
}

.earned-star::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(244,207,120,.42);
  box-shadow: inset 0 0 20px rgba(255,255,255,.14);
}

.earned-pill {
  background: rgba(255,255,255,.08);
  border-color: rgba(244,207,120,.12);
}
.earned-pill em,
.celebration-note { color: #aeb0c6; }

@media (max-width: 1150px) {
  .dorm-dashboard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .sidebar { box-shadow: 15px 0 45px rgba(16,18,40,.3); }

  .garden-scene.cinematic-dorm {
    min-height: 640px;
    background-position: 40% center;
  }

  .cinematic-dorm .scene-copy {
    top: 18px;
    right: 12px;
    width: 172px;
    padding: 14px;
    transform: none;
  }

  .cinematic-dorm .scene-copy strong {
    font-size: 28px;
  }

  .scene-badge-wall {
    left: 3%;
    top: 23%;
    width: 42%;
    height: 24%;
  }

  .resident-amo {
    width: 37%;
    height: 55%;
    right: 25%;
  }

  .resident-paopao {
    width: 25%;
    height: 33%;
    right: 2%;
  }

  .resident-lulu {
    width: 26%;
    height: 37%;
    right: 60%;
  }
}

@media (max-width: 560px) {
  .monster-stage {
    height: 190px;
  }

  .garden-scene.cinematic-dorm {
    min-height: 580px;
    background-position: 40% center;
  }

  .dorm-controls {
    right: 10px;
    left: 10px;
    overflow-x: auto;
  }

  .dorm-controls button {
    flex: 0 0 auto;
  }

  .cinematic-dorm .plot-music {
    left: 5%;
  }

  .badge-wall-card,
  .production-preview-card,
  .companions-card {
    padding: 22px 15px;
  }

  .production-preview-grid {
    grid-template-columns: 1fr;
  }

  .production-preview-hero {
    padding: 22px 15px;
  }

  .production-preview-hero .dorm-final-preview img {
    min-height: auto;
  }

  .badge-wall {
    grid-template-columns: repeat(2, 1fr);
    padding: 16px 10px;
  }

  .companion-card {
    grid-template-columns: 55px 1fr;
  }

  .companion-portrait {
    width: 55px;
    height: 55px;
  }

  .companion-action {
    width: 100%;
  }

  .companion-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .active-companion-panel {
    grid-template-columns: 58px 1fr;
  }

  .active-companion-panel > img {
    width: 58px;
    height: 58px;
  }

  .active-companion-panel > b {
    grid-column: 1 / -1;
    justify-self: start;
  }
}