:root {
  --ink: #243447;
  --muted: #64748b;
  --cream: #fffaf0;
  --paper: #fffdf8;
  --violet: #5c4ca8;
  --violet-dark: #403171;
  --coral: #f47469;
  --gold: #f5b837;
  --mint: #66c29b;
  --sky: #75b9e8;
  --line: rgba(61, 70, 97, 0.16);
  --soft-shadow: 0 15px 35px rgba(70, 70, 115, 0.13);
  --hard-shadow: 0 5px 0 rgba(51, 45, 78, 0.2);
  --radius: 24px;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  color: var(--ink);
  background: #f5f0e7;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #f5f0e7; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(205, 193, 250, 0.58), transparent 28rem),
    radial-gradient(circle at 92% 78%, rgba(165, 228, 205, 0.46), transparent 30rem),
    linear-gradient(135deg, #f9f4e9 0%, #f4f0ff 48%, #eef9f3 100%);
}

button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 32vw;
  aspect-ratio: 1;
  border-radius: 44% 56% 57% 43%;
  filter: blur(1px);
  opacity: 0.45;
  pointer-events: none;
}

.ambient-one { top: -12rem; right: -8rem; background: #e8cff7; transform: rotate(22deg); }
.ambient-two { bottom: -14rem; left: -9rem; background: #c9f0da; transform: rotate(-15deg); }

#app { min-height: 100vh; }

.loading-screen,
.empty-state {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.7rem;
  color: var(--violet-dark);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.loading-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: white;
  background: var(--violet);
  box-shadow: var(--hard-shadow);
  font-size: 2rem;
  animation: bob 1.1s ease-in-out infinite alternate;
}

@keyframes bob { to { transform: translateY(-8px) rotate(5deg); } }
@keyframes pop { 0% { transform: translateY(6px) scale(0.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes flash { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

.screen {
  width: min(1160px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.25rem) 0 2.5rem;
  animation: pop 0.35s ease-out both;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--violet-dark);
  font-family: ui-monospace, "Courier New", monospace;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 1000;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 0.58em;
  background: linear-gradient(145deg, #816fdd, #4c3f9c);
  color: white;
  box-shadow: 0 4px 0 #332967;
  font-size: 0.68em;
  letter-spacing: 0;
}

.eyebrow {
  margin: 0;
  color: var(--violet);
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0.7rem; font-size: clamp(2rem, 5vw, 3.65rem); line-height: 1; letter-spacing: -0.06em; }
h2 { margin-bottom: 0.35rem; font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: -0.045em; }
h3 { margin-bottom: 0.2rem; font-size: 1rem; }
.lead { max-width: 59ch; color: var(--muted); font-size: clamp(1rem, 2vw, 1.12rem); line-height: 1.55; }

.card {
  border: 1px solid rgba(95, 82, 137, 0.15);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.82);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(12px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.4rem, 4vw, 3rem);
}

.topbar-actions { display: flex; align-items: center; gap: 0.55rem; }

.button,
.icon-button,
.action-button,
.pet-choice,
.profile-card {
  border: 0;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

.button:hover,
.icon-button:hover,
.action-button:hover,
.pet-choice:hover,
.profile-card:hover { transform: translateY(-3px); }
.button:active,
.icon-button:active,
.action-button:active,
.pet-choice:active,
.profile-card:active { transform: translateY(1px); }
.button:focus-visible,
.icon-button:focus-visible,
.action-button:focus-visible,
.pet-choice:focus-visible,
input:focus-visible,
select:focus-visible { outline: 3px solid #6e9cff; outline-offset: 3px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  gap: 0.45rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  color: white;
  background: var(--violet);
  box-shadow: 0 4px 0 var(--violet-dark);
  font-weight: 900;
}
.button:hover { filter: brightness(1.08); box-shadow: 0 6px 0 var(--violet-dark); }
.button.secondary { color: var(--violet-dark); background: #ede9fe; box-shadow: 0 4px 0 #c8c1eb; }
.button.ghost { color: var(--violet-dark); background: rgba(255,255,255,0.65); box-shadow: 0 3px 0 rgba(64, 49, 113, 0.13); }
.button.danger { color: white; background: #d75561; box-shadow: 0 4px 0 #9b3544; }
.button.small { min-height: 38px; padding: 0.52rem 0.75rem; font-size: 0.82rem; }
.button[disabled], .action-button[disabled] { cursor: not-allowed; filter: grayscale(0.65); opacity: 0.55; transform: none; }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: 13px;
  color: var(--violet-dark);
  background: rgba(255, 253, 248, 0.82);
  box-shadow: 0 3px 0 rgba(64, 49, 113, 0.14);
  font-size: 1.2rem;
}

/* Profile picker */
.welcome-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(310px, 0.95fr);
  align-items: center;
  gap: clamp(1.25rem, 4vw, 4rem);
  min-height: calc(100vh - 11rem);
}

.welcome-art {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  padding: clamp(1rem, 4vw, 2.2rem);
}
.welcome-art::before,
.welcome-art::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  pointer-events: none;
}
.welcome-art::before { width: 290px; height: 290px; right: -60px; bottom: -75px; background: #e4ddff; }
.welcome-art::after { width: 180px; height: 180px; left: -60px; top: -70px; background: #d3f4e4; }

.mini-sticker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.5rem 0.72rem;
  border-radius: 10px;
  color: #764a07;
  background: #fff0b7;
  box-shadow: 0 3px 0 #e7c965;
  font-size: 0.77rem;
  font-weight: 900;
}

.showcase-pets {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(0.1rem, 2vw, 0.9rem);
  height: 245px;
}
.showcase-pet { width: min(32%, 150px); aspect-ratio: 1; image-rendering: pixelated; }
.showcase-pet:nth-child(1) { transform: rotate(-5deg) translateY(13px); }
.showcase-pet:nth-child(2) { transform: translateY(-16px); }
.showcase-pet:nth-child(3) { transform: rotate(5deg) translateY(14px); }

.profiles-panel { padding: clamp(1.15rem, 3vw, 1.8rem); }
.profiles-heading { display: flex; align-items: end; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }
.profiles-heading p { margin-bottom: 0.2rem; color: var(--muted); font-size: 0.92rem; }
.profile-list { display: grid; gap: 0.7rem; margin-bottom: 1rem; }
.profile-card {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: var(--ink);
  text-align: left;
  background: rgba(255,255,255,0.72);
}
.profile-card:hover { border-color: rgba(92, 76, 168, 0.42); background: #fff; box-shadow: 0 7px 18px rgba(61, 56, 111, 0.12); }
.profile-thumb { width: 55px; height: 55px; border-radius: 14px; background: #f5f1ff; image-rendering: pixelated; }
.profile-name { display: block; overflow: hidden; margin-bottom: 0.18rem; font-size: 1rem; font-weight: 1000; text-overflow: ellipsis; white-space: nowrap; }
.profile-meta { color: var(--muted); font-size: 0.78rem; }
.profile-arrow { color: var(--violet); font-size: 1.2rem; }
.new-profile { width: 100%; }
.empty-profiles { padding: 1.2rem 0.4rem 1.45rem; color: var(--muted); text-align: center; }
.empty-profiles span { display: block; margin-bottom: 0.5rem; font-size: 1.9rem; }

/* Dashboard */
.game-screen { padding-bottom: 1.25rem; }
.game-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.75rem;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.header-avatar { width: 57px; height: 57px; flex: 0 0 57px; border-radius: 18px; background: #efeafe; image-rendering: pixelated; }
.identity-copy { min-width: 0; }
.identity-copy strong { display: block; overflow: hidden; font-size: clamp(1rem, 2.6vw, 1.23rem); text-overflow: ellipsis; white-space: nowrap; }
.identity-copy span { color: var(--muted); font-size: 0.82rem; }
.header-actions { display: flex; align-items: center; gap: 0.45rem; }

.progress-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgba(92, 76, 168, 0.14);
  border-radius: 16px;
  background: rgba(255,255,255,0.63);
  color: var(--muted);
  font-size: 0.82rem;
}
.progress-strip strong { color: var(--violet-dark); }
.life-icon { width: 28px; height: 28px; flex: 0 0 28px; image-rendering: pixelated; }
.stage-track { display: flex; flex: 1; min-width: 70px; gap: 3px; }
.stage-dot { width: 100%; height: 7px; border-radius: 99px; background: #e6e4ec; }
.stage-dot.past { background: #c6bdf3; }
.stage-dot.active { background: var(--violet); box-shadow: 0 0 0 3px rgba(92, 76, 168, 0.14); }
.life-meta { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: end; gap: 0.25rem 0.65rem; color: var(--muted); font-size: 0.72rem; font-weight: 800; }
.life-meta span:last-child { color: var(--violet-dark); }

.game-layout { display: grid; grid-template-columns: minmax(240px, 0.78fr) minmax(320px, 1.22fr) minmax(210px, 0.68fr); gap: 1rem; align-items: stretch; }
.needs-card, .pet-card, .moment-card, .actions-card { min-width: 0; }
.needs-card { padding: 1rem; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-bottom: 0.85rem; }
.card-title h2 { margin: 0; font-size: 1.05rem; }
.card-title span { color: var(--muted); font-size: 0.74rem; }

.need-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.need {
  position: relative;
  overflow: hidden;
  min-height: 75px;
  padding: 0.58rem;
  border: 1px solid rgba(70, 65, 99, 0.1);
  border-radius: 15px;
  background: rgba(255,255,255,0.75);
}
.need-head { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; margin-bottom: 0.38rem; }
.need-label { display: flex; align-items: center; min-width: 0; gap: 0.32rem; }
.need-icon { width: 22px; height: 22px; flex: 0 0 22px; image-rendering: pixelated; }
.need-name { color: var(--muted); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.025em; text-transform: uppercase; }
.need-value { color: var(--ink); font-family: ui-monospace, monospace; font-size: 0.75rem; font-weight: 900; }
.meter { height: 8px; overflow: hidden; border-radius: 99px; background: #eae7ed; }
.meter > i { display: block; width: var(--meter); height: 100%; border-radius: inherit; background: var(--meter-color, var(--mint)); transition: width 0.45s ease; }
.need.is-low { border-color: rgba(229, 94, 95, 0.32); background: #fff7f4; }
.need.is-low .need-value { color: #cc4c50; }

.pet-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 430px;
  overflow: hidden;
  padding: 1rem;
  background:
    radial-gradient(circle at 49% 44%, rgba(255,255,255,0.95) 0 22%, transparent 50%),
    radial-gradient(circle at 50% 100%, #dbcfff 0, #f1ecff 42%, #fdf9f0 78%);
}
.pet-card::before,
.pet-card::after { position: absolute; content: "✦"; color: #ffca4c; font-size: 1.65rem; animation: twinkle 2.1s ease-in-out infinite alternate; }
.pet-card::before { top: 16%; left: 18%; }
.pet-card::after { right: 16%; bottom: 23%; color: #8cd3fb; animation-delay: -1s; }
@keyframes twinkle { to { transform: scale(1.35) rotate(18deg); opacity: 0.55; } }

.mood-pill {
  position: absolute;
  z-index: 2;
  top: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 2rem);
  padding: 0.44rem 0.75rem;
  border: 1px solid rgba(63, 51, 108, 0.13);
  border-radius: 99px;
  color: var(--violet-dark);
  background: rgba(255,255,255,0.84);
  box-shadow: 0 3px 10px rgba(76, 63, 130, 0.1);
  font-size: 0.77rem;
  font-weight: 900;
  white-space: nowrap;
}
.hero-sprite { position: relative; z-index: 1; width: min(100%, 290px); aspect-ratio: 1; image-rendering: pixelated; }
.pet-copy { position: absolute; z-index: 2; right: 1rem; bottom: 0.85rem; left: 1rem; text-align: center; }
.pet-copy strong { display: block; margin-bottom: 0.15rem; color: var(--violet-dark); font-size: 1.05rem; }
.pet-copy span { color: #665c79; font-size: 0.79rem; }

.moment-card { padding: 1rem; }
.mood-summary { display: grid; gap: 0.65rem; }
.happiness-panel { display: grid; justify-items: center; gap: 0.36rem; min-width: 132px; padding: 0.68rem; border-radius: 16px; color: #7b5710; background: linear-gradient(145deg, #fff8d8, #fff0ba); }
.happiness-meter-head { display: flex; align-items: center; justify-content: space-between; width: 100%; color: #876615; font-size: 0.72rem; font-weight: 900; }
.happiness-meter { width: 100%; height: 11px; overflow: hidden; border-radius: 99px; background: rgba(158, 112, 12, 0.16); }
.happiness-meter i { display: block; width: var(--meter); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f0a93b, #f7cf4c); box-shadow: inset 0 1px rgba(255,255,255,0.6); transition: width 0.45s ease; }
.happiness-face { font-size: clamp(3rem, 6vw, 4.8rem); line-height: 0.95; filter: drop-shadow(0 3px 0 rgba(139, 101, 21, 0.12)); }
.happiness-label { color: #876615; font-size: 0.68rem; font-weight: 900; text-align: center; }
.tip { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.42; }
.timeline { display: grid; gap: 0.56rem; margin-top: 1.1rem; }
.timeline-item { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 0.55rem; color: var(--muted); font-size: 0.76rem; line-height: 1.35; }
.timeline-item i { width: 8px; height: 8px; margin-top: 0.23rem; border-radius: 50%; background: var(--violet); }
.timeline-item strong { display: block; color: var(--ink); font-size: 0.78rem; }

.actions-card { margin-top: 1rem; padding: 0.85rem; }
.action-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6rem; }
.action-button {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 113px;
  overflow: hidden;
  padding: 0.52rem 0.25rem 0.5rem;
  border: 1px solid rgba(59, 55, 92, 0.12);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(255,255,255,0.81);
  box-shadow: 0 3px 0 rgba(68, 60, 100, 0.12);
}
.action-button:hover { box-shadow: 0 6px 0 rgba(68, 60, 100, 0.14); }
.action-button:active { box-shadow: 0 1px 0 rgba(68, 60, 100, 0.14); }
.action-button::after { position: absolute; inset: auto 0 0; height: 4px; content: ""; background: var(--action-color, var(--violet)); }
.action-icon { width: 64px; height: 64px; image-rendering: pixelated; }
.action-name { margin-top: -0.08rem; font-size: 0.76rem; font-weight: 1000; }
.action-hint { margin-top: 0.05rem; color: var(--muted); font-size: 0.63rem; }

/* Onboarding and modal UI */
.modal-layer {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 1rem;
  background: rgba(34, 36, 57, 0.38);
  backdrop-filter: blur(7px);
  animation: pop 0.2s ease-out;
}
.modal {
  width: min(700px, 100%);
  max-height: min(850px, calc(100vh - 2rem));
  overflow: auto;
  padding: clamp(1rem, 4vw, 2rem);
  border: 1px solid rgba(255,255,255,0.74);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: 0 24px 80px rgba(24, 28, 60, 0.32);
}
.modal.wide { width: min(940px, 100%); }
.modal-top { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.modal-top h2 { margin-bottom: 0.25rem; }
.modal-top p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.close-modal { flex: 0 0 auto; }

.step-dots { display: flex; gap: 0.35rem; margin-bottom: 1.5rem; }
.step-dots i { width: 42px; height: 7px; border-radius: 99px; background: #ddd7ed; }
.step-dots i.active { background: var(--violet); }
.form-label { display: block; margin-bottom: 0.4rem; color: var(--violet-dark); font-size: 0.82rem; font-weight: 900; }
.text-input, .select-input, .range-input {
  width: 100%;
  border: 1.5px solid #d9d4e4;
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
}
.text-input { min-height: 55px; padding: 0.8rem 0.95rem; font-size: 1.08rem; font-weight: 700; }
.select-input { min-height: 44px; padding: 0.55rem 0.7rem; }
.form-help { margin: 0.45rem 0 1rem; color: var(--muted); font-size: 0.78rem; }
.form-footer { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.2rem; }

.pet-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.pet-choice {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  min-height: 205px;
  overflow: hidden;
  padding: 0.7rem;
  border: 2px solid transparent;
  border-radius: 20px;
  color: var(--ink);
  background: #f7f4ff;
}
.pet-choice:hover, .pet-choice.selected { border-color: var(--violet); background: #f0ebff; box-shadow: 0 6px 0 rgba(92, 76, 168, 0.17); }
.pet-choice canvas { width: 100%; max-width: 125px; aspect-ratio: 1; image-rendering: pixelated; }
.pet-choice strong { font-size: 1.02rem; }
.pet-choice span { color: var(--muted); font-size: 0.73rem; }
.pet-choice.selected::after { position: absolute; top: 0.45rem; right: 0.5rem; content: "✓"; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: white; background: var(--violet); font-weight: 1000; }

/* Admin */
.admin-tabs { display: flex; gap: 0.45rem; overflow-x: auto; margin: 0 -0.1rem 1rem; padding: 0.1rem; }
.admin-tab { flex: 0 0 auto; min-height: 36px; padding: 0.45rem 0.75rem; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 0.78rem; font-weight: 900; cursor: pointer; }
.admin-tab.active { color: var(--violet-dark); background: #eee9ff; }
.admin-panel { display: grid; gap: 0.75rem; }
.admin-section { padding: 1rem; border: 1px solid var(--line); border-radius: 17px; background: #fffdf9; }
.admin-section h3 { margin-bottom: 0.2rem; }
.admin-section > p { margin-bottom: 0.8rem; color: var(--muted); font-size: 0.82rem; }
.control-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 0.65fr); align-items: center; gap: 0.8rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(80, 73, 101, 0.09); }
.control-row:last-child { border-bottom: 0; }
.control-row label { font-size: 0.84rem; font-weight: 900; }
.control-row small { display: block; margin-top: 0.14rem; color: var(--muted); font-size: 0.72rem; font-weight: 500; }
.admin-profile-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(80, 73, 101, 0.09); }
.admin-profile-row:last-child { border-bottom: 0; }
.tiny-avatar { width: 40px; height: 40px; border-radius: 11px; background: #f3efff; }
.admin-profile-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 0.3rem; }
.activity-list { display: grid; max-height: 280px; overflow: auto; gap: 0.55rem; }
.activity-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0.65rem; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(80, 73, 101, 0.09); color: var(--muted); font-size: 0.78rem; }
.activity-row time { color: var(--violet-dark); font-family: ui-monospace, monospace; font-size: 0.71rem; font-weight: 800; }
.activity-row strong { color: var(--ink); }

.toast {
  position: fixed;
  z-index: 20;
  right: 1rem;
  bottom: 1rem;
  max-width: min(360px, calc(100% - 2rem));
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 15px;
  color: white;
  background: #36324f;
  box-shadow: 0 12px 35px rgba(32, 29, 54, 0.32);
  font-size: 0.84rem;
  font-weight: 800;
  animation: pop 0.22s ease-out;
}
.toast.success { background: #276e5c; }
.toast.warning { background: #9e4d36; }

.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.noscript { padding: 1rem; color: white; background: #403171; text-align: center; }

@media (max-width: 970px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) minmax(290px, 1.1fr); }
  .moment-card { grid-column: 1 / -1; }
  .mood-summary { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
  .action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .screen { width: min(100% - 1rem, 1160px); padding-top: 0.8rem; }
  .welcome-grid { grid-template-columns: 1fr; min-height: 0; }
  .welcome-art { min-height: 315px; }
  .topbar { margin-bottom: 1rem; }
  .game-header { grid-template-columns: minmax(0, 1fr) auto; }
  .progress-strip { gap: 0.45rem 0.55rem; padding: 0.65rem; }
  .life-path-label { display: none; }
  .life-icon { width: 24px; height: 24px; flex-basis: 24px; }
  .stage-track { order: 4; flex-basis: calc(100% - 30px); margin-left: 30px; }
  .life-meta { width: 100%; justify-content: space-between; margin-left: 30px; }
  .game-layout { grid-template-columns: 1fr; }
  .needs-card { order: 2; }
  .pet-card { order: 1; min-height: 350px; }
  .moment-card { order: 3; }
  .mood-summary { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
  .action-button { min-height: 103px; }
  .action-button:last-child { grid-column: 2; }
  .need-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .need { min-height: 67px; padding: 0.45rem; }
  .need-icon { width: 18px; height: 18px; flex-basis: 18px; }
  .need-name { font-size: 0.59rem; }
  .need-value { font-size: 0.69rem; }
  .pet-choice-grid { gap: 0.45rem; }
  .pet-choice { min-height: 162px; padding: 0.4rem; border-radius: 15px; }
  .pet-choice span { display: none; }
  .pet-choice strong { font-size: 0.9rem; }
}

@media (max-width: 430px) {
  .topbar-actions .ghost { display: none; }
  .header-avatar { width: 49px; height: 49px; flex-basis: 49px; }
  .header-actions .button { display: none; }
  .need-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-card { min-height: 330px; }
  .hero-sprite { width: 250px; }
  .action-icon { width: 57px; height: 57px; }
  .action-name { font-size: 0.7rem; }
  .action-hint { display: none; }
  .control-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .admin-profile-row { grid-template-columns: 36px minmax(0, 1fr); }
  .admin-profile-actions { grid-column: 1 / -1; justify-content: start; }
}