:root {
  color-scheme: light;
  --bg: #f6efe1;
  --paper: rgba(255, 251, 238, 0.94);
  --paper-solid: #fff8e8;
  --ink: #243044;
  --muted: #5b6675;
  --accent: #2f7d5c;
  --accent-dark: #246146;
  --accent-2: #f0b44d;
  --red: #d85b4a;
  --danger-soft: #ffe3d5;
  --shadow: 0 18px 46px rgba(68, 47, 22, 0.18);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  font-family: "Yu Gothic", "Hiragino Sans", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  background: linear-gradient(160deg, #e9f3e8, #f8efd8 52%, #dbeafb);
  color: var(--ink);
}

#gameCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}

.ui {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
}

.version-badge {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 13;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 251, 238, 0.68);
  border: 1px solid rgba(89, 72, 49, 0.18);
  color: rgba(73, 57, 39, 0.78);
  box-shadow: 0 4px 14px rgba(68, 47, 22, 0.10);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.screen {
  width: min(920px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 3px solid rgba(47, 125, 92, 0.22);
  border-radius: 30px;
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 44px);
  pointer-events: auto;
  backdrop-filter: blur(12px);
  position: relative;
}

.screen::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(120, 91, 50, 0.16);
  border-radius: 22px;
  pointer-events: none;
}

.screen.narrow {
  width: min(720px, 100%);
}

h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: 0.02em;
}

h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 36px);
}

p,
li,
label {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.65;
}

.lead {
  font-size: clamp(21px, 2.2vw, 27px);
  color: var(--muted);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.stamp {
  float: right;
  transform: rotate(8deg);
  border: 3px solid rgba(216, 91, 74, 0.68);
  color: rgba(216, 91, 74, 0.9);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: clamp(18px, 2vw, 24px);
}

.button-row,
.hud-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.start-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}


.name-field {
  display: grid;
  gap: 8px;
  margin: 18px 0 6px;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  border: 2px solid rgba(47, 125, 92, 0.12);
}

.name-field span {
  font-weight: 900;
  color: var(--accent);
  font-size: clamp(18px, 1.8vw, 22px);
}

.name-field input {
  min-height: 58px;
  border: 2px solid rgba(36, 48, 68, 0.16);
  border-radius: 18px;
  background: #fffdf5;
  color: var(--ink);
  font: inherit;
  font-size: clamp(24px, 2.7vw, 32px);
  font-weight: 850;
  padding: 10px 16px;
}

.name-field em {
  color: var(--muted);
  font-style: normal;
  font-size: clamp(15px, 1.5vw, 18px);
}

.status-panel {
  margin-top: 18px;
  padding: 14px;
  border: 2px solid rgba(47, 125, 92, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.46);
}

.status-title {
  margin: 0 0 10px;
  font-weight: 900;
  color: var(--accent-dark);
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.status-card {
  min-height: 92px;
  padding: 12px;
  display: grid;
  gap: 4px;
  text-align: left;
  align-content: center;
  background: linear-gradient(180deg, #fffdf5, #fff6df);
}

.status-card em {
  color: var(--muted);
  font-style: normal;
  font-size: clamp(14px, 1.4vw, 17px);
}

.status-card.selected {
  border-color: rgba(47, 125, 92, 0.64);
  background: linear-gradient(180deg, #f0fff3, #fff7d6);
  box-shadow: 0 0 0 4px rgba(47, 125, 92, 0.13);
}

.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
}

.start-card,
.mode-card {
  min-height: 96px;
  text-align: left;
  border-radius: 24px;
  padding: 20px 24px;
}

.mode-card {
  min-height: 160px;
}

html[data-locale="ja"] body,
html[data-locale="ja"] button,
html[data-locale="ja"] input,
html[data-locale="ja"] select {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
}

html[data-locale="zhHans"] body,
html[data-locale="zhHans"] button,
html[data-locale="zhHans"] input,
html[data-locale="zhHans"] select {
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", "SimHei", system-ui, sans-serif;
}

html[data-locale="zhHant"] body,
html[data-locale="zhHant"] button,
html[data-locale="zhHant"] input,
html[data-locale="zhHant"] select {
  font-family: "Microsoft JhengHei", "Noto Sans CJK TC", "PingFang TC", system-ui, sans-serif;
}

html[data-locale="en"] body,
html[data-locale="en"] button,
html[data-locale="en"] input,
html[data-locale="en"] select {
  font-family: "Atkinson Hyperlegible", "Verdana", "Segoe UI", system-ui, sans-serif;
}

.title-screen {
  text-align: center;
  background: rgba(255, 251, 238, 0.86);
}

.title-character-panel {
  margin: 18px auto 0;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.48);
  border: 2px solid rgba(47, 125, 92, 0.14);
}

.character-title {
  margin: 0 0 10px;
  color: var(--accent-dark);
  font-weight: 900;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.25;
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.character-card {
  min-height: 104px;
  padding: 7px 3px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 253, 245, 0.92), rgba(255, 246, 222, 0.86));
  border: 2px solid rgba(36, 48, 68, 0.12);
  display: grid;
  place-items: center;
  overflow: visible;
}

.character-card.selected {
  border-color: rgba(47, 125, 92, 0.72);
  background: linear-gradient(180deg, #f0fff3, #fff5cd);
  box-shadow: 0 0 0 4px rgba(47, 125, 92, 0.16);
  transform: translateY(-2px);
}

.character-note {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.35;
  color: var(--muted);
  font-weight: 700;
}

.character-svg {
  display: block;
  width: 76px;
  height: 88px;
  max-width: 100%;
  filter: drop-shadow(0 3px 2px rgba(36, 48, 68, 0.16));
}

.character-portrait {
  --body: #2f7d5c;
  --hat: #716a63;
  --hair: #4a3a32;
  --skin: #f0c08d;
  position: relative;
  display: block;
  width: 58px;
  height: 64px;
  margin: 0 auto;
}

.portrait-body {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 5px;
  height: 28px;
  border-radius: 13px 13px 8px 8px;
  background: var(--body);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08);
}

.character-portrait.female .portrait-body {
  left: 13px;
  right: 13px;
  border-radius: 15px 15px 12px 12px;
}

.portrait-head {
  position: absolute;
  left: 17px;
  top: 14px;
  width: 24px;
  height: 25px;
  border-radius: 50%;
  background: var(--skin);
  z-index: 3;
}

.portrait-hair {
  position: absolute;
  left: 15px;
  top: 11px;
  width: 28px;
  height: 15px;
  border-radius: 14px 14px 8px 8px;
  background: var(--hair);
  z-index: 4;
}

.portrait-hair.long,
.portrait-hair.bob {
  top: 10px;
  height: 27px;
  border-radius: 15px 15px 13px 13px;
}

.portrait-bun {
  position: absolute;
  left: 8px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hair);
  z-index: 2;
}

.portrait-hat {
  position: absolute;
  left: 14px;
  top: 5px;
  width: 30px;
  height: 13px;
  border-radius: 16px 16px 6px 6px;
  background: var(--hat);
  z-index: 5;
}

.portrait-eye {
  position: absolute;
  top: 27px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #2c2724;
  z-index: 6;
}

.portrait-eye.left { left: 23px; }
.portrait-eye.right { right: 23px; }

.portrait-glasses {
  position: absolute;
  left: 20px;
  top: 24px;
  width: 18px;
  height: 8px;
  border: 2px solid rgba(70, 61, 52, 0.92);
  border-left-width: 2px;
  border-right-width: 2px;
  border-radius: 5px;
  z-index: 7;
}

.portrait-mustache {
  position: absolute;
  left: 22px;
  top: 33px;
  width: 15px;
  height: 4px;
  border-radius: 999px;
  background: var(--hair);
  z-index: 7;
}

.home-screen {
  background: rgba(255, 251, 238, 0.86);
}

.title-start {
  width: min(430px, 100%);
  min-height: 132px;
  margin-top: 18px;
  border-radius: 30px;
}

.title-start strong {
  display: block;
  font-size: clamp(32px, 4vw, 48px);
}

.start-card strong,
.mode-card strong {
  display: block;
  font-size: clamp(27px, 3vw, 36px);
  line-height: 1.15;
}

.start-card span,
.mode-card em {
  display: block;
  margin-top: 8px;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  opacity: 0.82;
  font-style: normal;
}

.mode-icon {
  display: block;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1;
  margin-bottom: 10px;
}

.tiny-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 19px);
}

.hud-actions {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

.assist-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.assist-actions button {
  min-height: 34px;
  padding: 5px 7px;
  border-radius: 12px;
  font-size: clamp(12px, 1.1vw, 15px);
  background: rgba(255, 248, 232, 0.72);
}

.assist-actions button.selected {
  background: #2f7d5c;
  color: #fffbe8;
  box-shadow: 0 0 0 3px rgba(255, 214, 102, 0.42);
}

button,
.choice {
  min-height: 56px;
  border: 2px solid rgba(36, 48, 68, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf5, #fff3d7);
  color: var(--ink);
  font: inherit;
  font-size: 21px;
  font-weight: 750;
  padding: 14px 20px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(59, 42, 21, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, outline 0.18s ease;
}

button:hover,
button:focus-visible,
.choice:hover {
  outline: 4px solid rgba(47, 125, 92, 0.2);
  transform: translateY(-1px);
}

button.primary {
  background: linear-gradient(180deg, #399268, var(--accent-dark));
  color: white;
  border-color: var(--accent);
}

button.secondary {
  background: #fff4d6;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.question {
  padding: 18px;
  margin: 18px 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(47, 125, 92, 0.1);
}

.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.choice {
  display: flex;
  gap: 10px;
  align-items: center;
}

.choice input {
  width: 24px;
  height: 24px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.thank-card-list {
  display: grid;
  gap: 9px;
  margin: 16px 0;
  text-align: left;
}

.thank-card-list h2 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 30px);
}

.thank-card {
  padding: 10px 12px;
  border: 3px solid rgba(47, 95, 73, 0.24);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 251, 238, 0.92), rgba(255, 243, 166, 0.68));
  box-shadow: 4px 4px 0 rgba(31, 43, 56, 0.08);
}

.thank-card strong {
  display: block;
  color: #2f5f49;
  margin-bottom: 3px;
}

.thank-card p {
  margin: 0;
}

.family-field input {
  font-size: clamp(15px, 1.6vw, 19px);
}

.family-message-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}

.small-inline-btn {
  min-width: 96px;
  border: 0;
  border-radius: 16px;
  padding: 0 16px;
  background: #2f7d5c;
  color: #fffdf5;
  font: inherit;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 900;
  box-shadow: 0 5px 0 rgba(36, 79, 59, 0.25);
}

.small-inline-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(36, 79, 59, 0.25);
}

body.high-contrast #gameCanvas {
  filter: contrast(1.18) saturate(1.08);
}

body.high-contrast .hud-card,
body.high-contrast .comic-bubble,
body.high-contrast .screen {
  background: rgba(255, 255, 236, 0.92);
  border-color: #111827;
}

body.high-contrast button.primary {
  box-shadow: 0 0 0 4px #ffd84d;
}

.card {
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 247, 226, 0.82));
  padding: 18px;
  border: 2px solid rgba(47, 125, 92, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.card strong {
  display: block;
  font-size: 24px;
  margin-bottom: 4px;
}

.hud {
  position: fixed;
  left: 18px;
  right: auto;
  bottom: 18px;
  width: min(390px, calc(100vw - 36px));
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.hud-card {
  width: 100%;
  border-radius: 20px;
  background: rgba(255, 251, 238, 0.84);
  box-shadow: 0 10px 28px rgba(68, 47, 22, 0.16);
  padding: 12px 14px;
  pointer-events: auto;
  border: 2px solid rgba(47, 125, 92, 0.16);
  backdrop-filter: blur(10px);
}

.hud-card h2,
.hud-card p {
  margin: 4px 0;
}

#targetName {
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.12;
}

#targetHint {
  font-size: clamp(14px, 1.2vw, 17px);
  color: var(--muted);
}

#companionLine {
  display: none;
}

#deliverBtn {
  min-height: 64px;
  font-size: clamp(22px, 2.1vw, 28px);
}

#pauseBtn,
#endBtn {
  font-size: clamp(16px, 1.45vw, 19px);
  background: rgba(255, 250, 240, 0.86);
}


.language-panel {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 251, 238, 0.9);
  border: 2px solid rgba(47, 125, 92, 0.18);
  box-shadow: 0 10px 24px rgba(68, 47, 22, 0.16);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.language-panel label {
  font-size: 22px;
  line-height: 1;
}

.language-panel select {
  min-height: 42px;
  max-width: 148px;
  border: 0;
  border-radius: 999px;
  background: #fff8e8;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  padding: 6px 34px 6px 12px;
  cursor: pointer;
  outline: 2px solid transparent;
}

.language-panel select:focus-visible {
  outline-color: rgba(47, 125, 92, 0.42);
}

.audio-toggle {
  min-height: 42px;
  min-width: 42px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  background: #fff8e8;
}

.audio-toggle.off {
  filter: grayscale(1);
  opacity: 0.48;
  text-decoration: line-through;
}

.mini-map-panel {
  position: fixed;
  top: 78px;
  right: 18px;
  z-index: 11;
  width: 216px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 251, 238, 0.82);
  border: 2px solid rgba(47, 125, 92, 0.18);
  box-shadow: 0 10px 24px rgba(68, 47, 22, 0.14);
  backdrop-filter: blur(9px);
  pointer-events: none;
}

.mini-map-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 6px;
}

.mini-map-head strong {
  color: var(--accent-dark);
  font-size: 16px;
  font-weight: 950;
}

.mini-map-head span {
  color: #6c5842;
  font-size: 13px;
  font-weight: 850;
  max-width: 112px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#miniMapCanvas {
  display: block;
  width: 188px;
  height: 142px;
  border-radius: 14px;
  border: 2px solid rgba(89, 72, 49, 0.16);
  background: #f4fae7;
}

.mini-map-hint {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

.hidden {
  display: none !important;
}

.comic-bubble {
  position: fixed;
  top: 82px;
  /* 电脑端右上角有小地图；对白气泡稍微靠左并限制宽度，避免盖住地图。 */
  left: calc((100vw - 260px) / 2);
  transform: translateX(-50%);
  z-index: 8;
  min-width: 220px;
  max-width: min(620px, max(320px, calc(100vw - 560px)));
  padding: 16px 26px;
  border: 5px solid rgba(31, 43, 56, 0.68);
  border-radius: 28px;
  background: rgba(255, 253, 242, 0.68);
  color: #1f2b38;
  font-size: clamp(27px, 3.3vw, 48px);
  font-weight: 1000;
  text-align: center;
  letter-spacing: 0.04em;
  box-shadow: 9px 9px 0 rgba(31, 43, 56, 0.14);
  backdrop-filter: blur(7px);
  pointer-events: none;
  animation: comicPop 0.28s ease-out;
}

.comic-bubble.with-avatar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: min(520px, max(320px, calc(100vw - 560px)));
  padding: 12px 24px 14px 14px;
  text-align: left;
  letter-spacing: 0.01em;
}

.comic-avatar {
  position: relative;
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  border: 4px solid #1f2b38;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff4d4, #f0c08d);
  box-shadow: 4px 5px 0 rgba(31, 43, 56, 0.16);
  overflow: hidden;
}

.comic-avatar::before {
  content: "";
  position: absolute;
  inset: 14px 13px 8px;
  border-radius: 50% 50% 46% 46%;
  background: #f2c7a2;
  z-index: 1;
}

.comic-avatar .avatar-hair {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 9px;
  height: 25px;
  border-radius: 52% 52% 40% 40%;
  background: #5b4436;
  z-index: 2;
}

.comic-avatar .avatar-eye {
  position: absolute;
  top: 39px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1f2b38;
  z-index: 3;
}

.comic-avatar .avatar-eye.left {
  left: 30px;
}

.comic-avatar .avatar-eye.right {
  right: 30px;
}

.comic-avatar .avatar-mouth {
  position: absolute;
  left: 34px;
  top: 52px;
  width: 13px;
  height: 7px;
  border-bottom: 3px solid #a94d4d;
  border-radius: 0 0 12px 12px;
  z-index: 3;
}

.comic-avatar.avatar-suzu {
  background: linear-gradient(145deg, #fff4d4, #f0c08d);
}

.comic-avatar.avatar-suzu .avatar-hair {
  background: #5b4436;
}

.comic-avatar.avatar-haru {
  background: linear-gradient(145deg, #e8f7ff, #f2c7a2);
}

.comic-avatar.avatar-haru .avatar-hair {
  background: #746452;
  border-radius: 45% 45% 55% 55%;
}

.comic-avatar.avatar-ume {
  background: linear-gradient(145deg, #ffe5ee, #f2c7a2);
}

.comic-avatar.avatar-ume .avatar-hair {
  background: #4a3a32;
}

.comic-avatar.avatar-ume::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 15px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #f28aa8;
  box-shadow: -8px 5px 0 #ffd4df;
  z-index: 4;
}

.comic-avatar.avatar-sora {
  background: linear-gradient(145deg, #e8f1ff, #f1c299);
}

.comic-avatar.avatar-sora .avatar-hair {
  background: #2f3f56;
}

.comic-avatar.avatar-sora::after {
  content: "";
  position: absolute;
  left: 19px;
  right: 19px;
  top: 10px;
  height: 10px;
  border-radius: 12px;
  background: #6fa8dc;
  z-index: 5;
}

.comic-avatar.avatar-neighbor {
  background: linear-gradient(145deg, #fff7d7, #d9c09a);
}

.comic-avatar.avatar-neighbor::before {
  background: #f0c08d;
}

.comic-avatar.avatar-neighbor .avatar-hair {
  background: #5b4638;
}

.comic-avatar.neighbor-female {
  background: linear-gradient(145deg, #fff1f6, #e8c0a8);
}

.comic-avatar.neighbor-female .avatar-hair {
  left: 10px;
  right: 10px;
  top: 8px;
  height: 34px;
  border-radius: 48% 48% 58% 58%;
}

.comic-avatar.neighbor-female::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e85f79;
  box-shadow: -7px 4px 0 #ffd4df;
  z-index: 5;
}

.comic-avatar.neighbor-male .avatar-hair {
  height: 22px;
  border-radius: 50% 50% 36% 36%;
}

.comic-avatar.neighbor-male .avatar-eye::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -5px;
  width: 17px;
  height: 9px;
  border: 2px solid rgba(31, 43, 56, 0.55);
  border-radius: 9px;
}

.comic-avatar.neighbor-couple {
  background: linear-gradient(145deg, #fff4dc, #d7e9ff);
}

.comic-avatar.neighbor-couple::before {
  inset: 16px 35px 9px 7px;
}

.comic-avatar.neighbor-couple .avatar-hair:not(.second) {
  left: 7px;
  right: 35px;
  top: 10px;
}

.comic-avatar.neighbor-couple .avatar-eye.left:not(.second) {
  left: 19px;
}

.comic-avatar.neighbor-couple .avatar-eye.right:not(.second) {
  right: 45px;
}

.comic-avatar.neighbor-couple .avatar-mouth:not(.second) {
  left: 22px;
}

.comic-avatar .avatar-face.second {
  position: absolute;
  inset: 14px 7px 8px 35px;
  border-radius: 50% 50% 46% 46%;
  background: #f2c7a2;
  z-index: 1;
}

.comic-avatar .avatar-hair.second {
  left: 35px;
  right: 7px;
  top: 8px;
  height: 30px;
  border-radius: 48% 48% 58% 58%;
  background: #4a3a32;
}

.comic-avatar .avatar-eye.second.left {
  left: 46px;
}

.comic-avatar .avatar-eye.second.right {
  right: 18px;
}

.comic-avatar .avatar-mouth.second {
  left: 50px;
}

.comic-avatar.neighbor-tanaka { background: linear-gradient(145deg, #ffe2c4, #c85f4d); }
.comic-avatar.neighbor-suzuki { background: linear-gradient(145deg, #ffe6ef, #b86695); }
.comic-avatar.neighbor-yamamoto { background: linear-gradient(145deg, #deeeff, #4f91d5); }
.comic-avatar.neighbor-kobayashi { background: linear-gradient(145deg, #ddf4df, #5aaa77); }
.comic-avatar.neighbor-sato { background: linear-gradient(145deg, #fff0c8, #d59a34); }
.comic-avatar.neighbor-mori { background: linear-gradient(145deg, #e9e8ff, #7b87c8); }
.comic-avatar.neighbor-ito { background: linear-gradient(145deg, #e7f4d6, #6fa66a); }
.comic-avatar.neighbor-watanabe { background: linear-gradient(145deg, #ffefd8, #b77a42); }
.comic-avatar.neighbor-nakamura { background: linear-gradient(145deg, #ffe8e5, #da7c86); }
.comic-avatar.neighbor-kato { background: linear-gradient(145deg, #e0f6fb, #5c9ab5); }
.comic-avatar.neighbor-yoshida { background: linear-gradient(145deg, #d8c3a5, #ddcfba); }
.comic-avatar.neighbor-yamada { background: linear-gradient(145deg, #8a6f48, #5c9ab5); }
.comic-avatar.neighbor-sasaki { background: linear-gradient(145deg, #e8dfcf, #ffe8ef); }
.comic-avatar.neighbor-yamaguchi { background: linear-gradient(145deg, #4f5f6f, #7b5a3d); }
.comic-avatar.neighbor-matsumoto { background: linear-gradient(145deg, #f2e5cf, #e9e8ff); }
.comic-avatar.neighbor-inoue { background: linear-gradient(145deg, #b86695, #6f5338); }
.comic-avatar.neighbor-kimura { background: linear-gradient(145deg, #5b4638, #ffe6ef); }
.comic-avatar.neighbor-hayashi { background: linear-gradient(145deg, #ddcfba, #8ecae6); }
.comic-avatar.neighbor-shimizu { background: linear-gradient(145deg, #5c9ab5, #f1eadc); }
.comic-avatar.neighbor-saito { background: linear-gradient(145deg, #ffe8ef, #7a5542); }
.comic-avatar.neighbor-abe { background: linear-gradient(145deg, #7b5a3d, #d7ecc2); }
.comic-avatar.neighbor-hashimoto { background: linear-gradient(145deg, #e9e8ff, #9c7556); }
.comic-avatar.neighbor-ishikawa { background: linear-gradient(145deg, #6f5338, #e8f1ff); }
.comic-avatar.neighbor-maeda { background: linear-gradient(145deg, #ffe6ef, #d59a34); }
.comic-avatar.neighbor-ogawa { background: linear-gradient(145deg, #8ecae6, #f4e4c8); }
.comic-avatar.neighbor-okada { background: linear-gradient(145deg, #f1eadc, #d8c3a5); }
.comic-avatar.neighbor-hasegawa { background: linear-gradient(145deg, #7a5542, #8a6f48); }
.comic-avatar.neighbor-fujita { background: linear-gradient(145deg, #d7ecc2, #e8dfcf); }
.comic-avatar.neighbor-goto { background: linear-gradient(145deg, #9c7556, #4f5f6f); }
.comic-avatar.neighbor-murakami { background: linear-gradient(145deg, #e8f1ff, #f2e5cf); }
.comic-avatar.neighbor-kondo { background: linear-gradient(145deg, #d59a34, #b86695); }
.comic-avatar.neighbor-endo { background: linear-gradient(145deg, #f4e4c8, #5b4638); }


.comic-dialog {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.comic-speaker {
  font-size: clamp(13px, 1.25vw, 17px);
  font-weight: 900;
  color: #6c5842;
  letter-spacing: 0.04em;
}

.comic-text {
  display: block;
  line-height: 1.16;
}

.comic-bubble::after {
  content: "";
  position: absolute;
  left: 96px;
  bottom: -26px;
  width: 34px;
  height: 34px;
  background: inherit;
  border-right: 5px solid rgba(31, 43, 56, 0.68);
  border-bottom: 5px solid rgba(31, 43, 56, 0.68);
  transform: rotate(45deg);
}

.comic-bubble.success {
  background: rgba(255, 243, 166, 0.70);
  color: #c23b22;
}

.comic-bubble.throw {
  background: rgba(232, 251, 255, 0.70);
  color: #1b76a5;
}

.comic-bubble.hint {
  background: rgba(255, 246, 221, 0.70);
  color: #7c4a1d;
}

.comic-bubble.guide {
  top: 74px;
  background: rgba(255, 253, 242, 0.68);
  color: #2f5f49;
  font-size: clamp(23px, 2.4vw, 36px);
  box-shadow: 7px 7px 0 rgba(31, 43, 56, 0.12);
}

.comic-bubble.thought {
  top: 96px;
  background: rgba(255, 250, 240, 0.64);
  color: #5f4a2f;
  border-style: dashed;
  transform: translateX(-50%);
}

.touch-controls {
  position: fixed;
  inset: auto 12px 12px 12px;
  z-index: 10;
  display: none;
  align-items: end;
  justify-content: space-between;
  pointer-events: none;
  touch-action: none;
}

.touch-joystick,
.touch-back,
.touch-forward,
.touch-deliver {
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-shadow: 0 8px 18px rgba(31, 43, 56, 0.18);
}

.touch-joystick {
  width: 168px;
  height: 168px;
  border-radius: 999px;
  position: relative;
  pointer-events: auto;
  background: radial-gradient(circle, rgba(255, 251, 238, 0.78), rgba(255, 251, 238, 0.46));
  border: 3px solid rgba(255, 255, 255, 0.62);
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
}

.touch-joystick-ring {
  width: 132px;
  height: 82px;
  border-radius: 999px;
  border: 3px dashed rgba(47, 125, 92, 0.42);
  background:
    linear-gradient(90deg, transparent 48%, rgba(47, 125, 92, 0.22) 49%, rgba(47, 125, 92, 0.22) 51%, transparent 52%),
    linear-gradient(90deg, rgba(47, 125, 92, 0.12), transparent 22%, transparent 78%, rgba(47, 125, 92, 0.12));
  display: grid;
  place-items: center;
}

.touch-stick {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff7d8, #f0b44d);
  border: 3px solid rgba(86, 55, 26, 0.18);
  box-shadow: inset 0 -6px 12px rgba(86, 55, 26, 0.12), 0 8px 16px rgba(31, 43, 56, 0.22);
  transition: transform 0.06s linear;
}

.touch-joystick.active .touch-stick {
  transition: none;
}

.touch-joystick-label {
  position: absolute;
  bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(36, 48, 68, 0.58);
  pointer-events: none;
}

.touch-action-stack {
  display: grid;
  gap: 10px;
  justify-items: end;
  pointer-events: auto;
}

.touch-drive-row {
  display: grid;
  grid-template-columns: 76px 132px;
  gap: 8px;
  width: 216px;
}

.touch-back,
.touch-forward,
.touch-deliver {
  min-width: 132px;
  min-height: 78px;
  border-radius: 28px;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.48);
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 950;
  pointer-events: auto;
}

.touch-back,
.touch-forward {
  min-width: 0;
  min-height: 96px;
  width: 100%;
  border-radius: 24px;

}

.touch-forward {
  font-size: clamp(22px, 5vw, 30px);
  background: linear-gradient(180deg, #f4bd52, #d77b2f);
}

.touch-back {
  font-size: clamp(15px, 3.6vw, 20px);
  background: linear-gradient(180deg, #8fb3d9, #4f759e);
}

.touch-forward.active,
.touch-back.active {
  transform: translateY(3px) scale(0.98);
  box-shadow: inset 0 8px 18px rgba(94, 46, 18, 0.18), 0 4px 10px rgba(31, 43, 56, 0.16);
}

.touch-deliver {
  min-width: 216px;
  background: linear-gradient(180deg, #399268, var(--accent-dark));
}



@keyframes readyBounce {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 18px rgba(31, 43, 56, 0.18); }
  42% { transform: translateY(-4px) scale(1.045); box-shadow: 0 13px 24px rgba(47, 125, 92, 0.28); }
  68% { transform: translateY(1px) scale(0.992); }
}

@keyframes forwardNudge {
  0%, 100% { transform: translateX(0) scale(1); }
  28% { transform: translateX(3px) scale(1.025); }
  56% { transform: translateX(-2px) scale(1.01); }
}

@keyframes softGlowText {
  0%, 100% { color: var(--muted); }
  50% { color: #2f7d5c; text-shadow: 0 0 10px rgba(244, 189, 82, 0.34); }
}

#deliverBtn.deliver-ready,
.touch-deliver.deliver-ready {
  animation: readyBounce 0.95s ease-in-out infinite;
  outline: 4px solid rgba(255, 238, 126, 0.78);
  outline-offset: 3px;
}

.touch-forward.forward-nudge,
#autoForwardBtn.forward-nudge {
  animation: forwardNudge 1.15s ease-in-out infinite;
  outline: 3px solid rgba(244, 189, 82, 0.54);
  outline-offset: 2px;
}

#targetHint.forward-nudge-text {
  animation: softGlowText 1.4s ease-in-out infinite;
  font-weight: 850;
}

@keyframes comicPop {
  from {
    transform: translateX(-50%) scale(0.86);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

.soft-warning {
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--danger-soft);
  color: #6b3d28;
}

kbd {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #ccd;
  box-shadow: inset 0 -2px 0 #dde;
}

/*
 * The screen controller adds this class after measuring the rendered content.
 * Unlike the phone media query below, this also handles desktop zoom, short
 * windows, DPI scaling and languages whose copy takes more lines.
 */
.screen.auto-compact {
  max-height: calc(100dvh - 16px);
  padding: 12px 10px;
  border-radius: 18px;
  background: rgba(255, 251, 238, 0.64);
  border-color: rgba(47, 125, 92, 0.14);
  box-shadow: 0 10px 28px rgba(68, 47, 22, 0.12);
  backdrop-filter: blur(7px);
}

.screen.auto-compact::before {
  display: none;
}

.auto-compact.title-screen .stamp {
  padding: 4px 7px;
  font-size: 14px;
  border-width: 2px;
  border-radius: 9px;
}

.auto-compact.title-screen .eyebrow {
  margin-bottom: 3px;
  font-size: 15px;
}

.auto-compact.title-screen h1 {
  margin-bottom: 4px;
  font-size: clamp(28px, 8vw, 38px);
}

.auto-compact.title-screen .lead {
  margin: 0;
  font-size: clamp(14px, 3.8vw, 17px);
  line-height: 1.25;
}

.auto-compact .title-character-panel {
  margin-top: 8px;
  padding: 8px;
  border-radius: 16px;
}

.auto-compact .character-title {
  margin-bottom: 6px;
  font-size: 14px;
}

.auto-compact .character-grid {
  gap: 5px;
}

.auto-compact .character-card {
  min-height: 76px;
  padding: 2px 1px;
  border-width: 1px;
  border-radius: 11px;
}

.auto-compact .character-svg {
  width: 58px;
  height: 66px;
}

.auto-compact .character-note {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.2;
}

.auto-compact .title-start {
  min-height: 86px;
  margin-top: 9px;
  border-radius: 20px;
}

.auto-compact.simple-home .stamp,
.auto-compact.simple-home .eyebrow,
.auto-compact.simple-home .tiny-note {
  display: none;
}

.auto-compact.simple-home h1 {
  margin: 0 0 4px;
  font-size: clamp(25px, 7vw, 32px);
  line-height: 1.05;
}

.auto-compact.simple-home .lead {
  margin: 0 0 6px;
  font-size: clamp(13px, 3.5vw, 15px);
  line-height: 1.3;
  max-height: 2.6em;
  overflow: hidden;
}

.auto-compact.simple-home .name-field {
  gap: 4px;
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 15px;
}

.auto-compact.simple-home .name-field span {
  font-size: 14px;
}

.auto-compact.simple-home .name-field input {
  min-height: 40px;
  border-radius: 13px;
  font-size: 18px;
  padding: 6px 10px;
}

.auto-compact.simple-home .name-field em {
  display: none;
}

.auto-compact .family-message-row {
  grid-template-columns: 1fr auto;
  gap: 6px;
}

.auto-compact .small-inline-btn {
  min-width: 72px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 14px;
}

.auto-compact .status-panel {
  margin-top: 6px;
  padding: 8px;
  border-radius: 16px;
}

.auto-compact .status-title {
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.2;
}

.auto-compact .status-grid {
  gap: 6px;
}

.auto-compact .status-card {
  min-height: 50px;
  padding: 6px 4px;
  border-radius: 14px;
  text-align: center;
}

.auto-compact .status-card strong {
  font-size: 14px;
  line-height: 1.15;
}

.auto-compact .status-card em {
  display: none;
}

.auto-compact .mode-grid {
  gap: 8px;
  margin-top: 8px;
}

.auto-compact .mode-card {
  min-height: 74px;
  padding: 8px 6px;
  border-radius: 16px;
  text-align: center;
}

.auto-compact .mode-icon {
  margin-bottom: 3px;
  font-size: 24px;
}

.auto-compact .mode-card strong {
  font-size: clamp(15px, 4.2vw, 18px);
}

.auto-compact .mode-card em {
  margin-top: 3px;
  font-size: clamp(11px, 3.1vw, 13px);
  line-height: 1.2;
}

@media (max-width: 640px) {
  body {
    overflow: hidden;
    touch-action: none;
  }

  #gameCanvas {
    position: fixed;
  }

  .ui {
    padding: 8px;
  }

  .screen {
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
    padding: 12px;
    background: rgba(255, 251, 238, 0.64);
    border-color: rgba(47, 125, 92, 0.14);
    box-shadow: 0 10px 28px rgba(68, 47, 22, 0.12);
    backdrop-filter: blur(7px);
  }

  .screen::before {
    display: none;
  }

  .language-panel {
    top: 8px;
    right: 8px;
    transform: scale(0.94);
    transform-origin: top right;
    background: rgba(255, 251, 238, 0.52);
    border-color: rgba(47, 125, 92, 0.12);
    box-shadow: 0 6px 16px rgba(68, 47, 22, 0.10);
    backdrop-filter: blur(6px);
  }

  .mini-map-panel {
    top: 60px;
    right: 8px;
    width: 132px;
    padding: 6px;
    border-radius: 13px;
    background: rgba(255, 251, 238, 0.48);
    border-width: 1px;
    box-shadow: 0 6px 16px rgba(68, 47, 22, 0.08);
    backdrop-filter: blur(6px);
  }

  .mini-map-head {
    margin-bottom: 3px;
  }

  .mini-map-head strong {
    font-size: 12px;
  }

  .mini-map-head span {
    max-width: 70px;
    font-size: 10px;
  }

  #miniMapCanvas {
    width: 118px;
    height: 89px;
    border-radius: 10px;
    border-width: 1px;
  }

  .mini-map-hint {
    display: none;
  }

  .language-panel select,
  .audio-toggle {
    background: rgba(255, 248, 232, 0.70);
  }

  .hud {
    left: 8px;
    right: auto;
    top: 132px;
    bottom: auto;
    width: min(214px, calc(100vw - 170px));
    max-height: none;
  }

  .hud-card {
    padding: 4px 6px;
    border-radius: 13px;
    background: rgba(255, 251, 238, 0.38);
    border-color: rgba(47, 125, 92, 0.12);
    border-width: 1px;
    box-shadow: 0 5px 13px rgba(68, 47, 22, 0.07);
    backdrop-filter: blur(6px);
  }

  #hudEyebrow {
    display: none;
  }

  #targetName {
    font-size: clamp(13px, 3.35vw, 15px);
    line-height: 1.08;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #targetHint {
    font-size: clamp(13px, 3.4vw, 16px);
  }

  #deliverBtn {
    display: none;
  }

  .hud-actions {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 3px;
  }

  .hud-actions button {
    min-height: 24px;
    padding: 2px 5px;
    border-radius: 9px;
    font-size: 11px;
  }

  .assist-actions {
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    margin-top: 3px;
  }

  .assist-actions button {
    min-height: 22px;
    padding: 2px 4px;
    border-radius: 8px;
    font-size: 10px;
  }

  #deliverBtn {
    display: none;
  }

  #targetHint {
    display: none;
  }

  #companionLine {
    font-size: clamp(15px, 3.8vw, 18px);
    line-height: 1.35;
  }

  .touch-controls:not(.hidden) {
    display: flex;
  }

  .touch-joystick {
    background: radial-gradient(circle, rgba(255, 251, 238, 0.48), rgba(255, 251, 238, 0.20));
    border-color: rgba(255, 255, 255, 0.36);
    box-shadow: 0 8px 18px rgba(31, 43, 56, 0.12);
  }

  .touch-back,
  .touch-forward,
  .touch-deliver {
    opacity: 0.78;
  }

  .comic-bubble,
  .comic-bubble.guide {
    top: 62px;
    left: 50%;
    font-size: clamp(16px, 4.1vw, 21px);
    max-width: calc(100vw - 28px);
    padding: 9px 14px;
    border-width: 4px;
    border-radius: 22px;
    background: rgba(255, 253, 242, 0.58);
    border-color: rgba(31, 43, 56, 0.52);
    box-shadow: 5px 5px 0 rgba(31, 43, 56, 0.12);
    backdrop-filter: blur(6px);
  }

  .comic-bubble.with-avatar {
    gap: 8px;
    min-width: min(300px, calc(100vw - 28px));
    padding: 8px 12px 9px 8px;
  }

  .comic-avatar {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-width: 3px;
  }

  .comic-avatar::before {
    inset: 8px 7px 5px;
  }

  .comic-avatar .avatar-hair {
    left: 7px;
    right: 7px;
    top: 6px;
    height: 15px;
  }

  .comic-avatar .avatar-eye {
    top: 24px;
    width: 5px;
    height: 5px;
  }

  .comic-avatar .avatar-eye.left {
    left: 18px;
  }

  .comic-avatar .avatar-eye.right {
    right: 18px;
  }

  .comic-avatar .avatar-mouth {
    left: 20px;
    top: 32px;
    width: 9px;
    height: 5px;
  }

  .comic-avatar.avatar-ume::after {
    right: 10px;
    top: 10px;
    width: 9px;
    height: 9px;
    box-shadow: -6px 4px 0 #ffd4df;
  }

  .comic-avatar.avatar-sora::after {
    left: 13px;
    right: 13px;
    top: 8px;
    height: 8px;
  }

  .comic-avatar.neighbor-female .avatar-hair {
    left: 6px;
    right: 6px;
    top: 5px;
    height: 21px;
  }

  .comic-avatar.neighbor-female::after {
    right: 9px;
    top: 9px;
    width: 8px;
    height: 8px;
    box-shadow: -5px 3px 0 #ffd4df;
  }

  .comic-avatar.neighbor-couple::before {
    inset: 9px 21px 5px 4px;
  }

  .comic-avatar.neighbor-couple .avatar-hair:not(.second) {
    left: 4px;
    right: 21px;
    top: 6px;
  }

  .comic-avatar.neighbor-couple .avatar-eye.left:not(.second) {
    left: 11px;
  }

  .comic-avatar.neighbor-couple .avatar-eye.right:not(.second) {
    right: 27px;
  }

  .comic-avatar.neighbor-couple .avatar-mouth:not(.second) {
    left: 13px;
  }

  .comic-avatar .avatar-face.second {
    inset: 8px 4px 5px 21px;
  }

  .comic-avatar .avatar-hair.second {
    left: 21px;
    right: 4px;
    top: 5px;
    height: 19px;
  }

  .comic-avatar .avatar-eye.second.left {
    left: 28px;
  }

  .comic-avatar .avatar-eye.second.right {
    right: 11px;
  }

  .comic-avatar .avatar-mouth.second {
    left: 30px;
  }

  .comic-speaker {
    font-size: clamp(11px, 2.9vw, 13px);
  }

  .comic-text {
    line-height: 1.12;
  }

  .comic-bubble::after {
    border-color: rgba(31, 43, 56, 0.52);
    left: 58px;
    bottom: -19px;
    width: 24px;
    height: 24px;
    border-right-width: 4px;
    border-bottom-width: 4px;
  }

  .comic-bubble.success {
    background: rgba(255, 243, 166, 0.60);
  }

  .comic-bubble.throw {
    background: rgba(232, 251, 255, 0.60);
  }

  .comic-bubble.hint {
    background: rgba(255, 246, 221, 0.60);
  }

  .comic-bubble.thought {
    background: rgba(255, 250, 240, 0.56);
  }

  
  .simple-home {
    width: min(100%, 430px);
  }

  .title-screen,
  .home-screen {
    background: rgba(255, 251, 238, 0.64);
  }

  .title-screen {
    width: min(100%, 430px);
    padding: 12px 10px;
  }

  .title-screen .stamp {
    padding: 4px 7px;
    font-size: 14px;
    border-width: 2px;
    border-radius: 9px;
  }

  .title-screen .eyebrow {
    margin-bottom: 3px;
    font-size: 15px;
  }

  .title-screen h1 {
    margin-bottom: 4px;
    font-size: clamp(28px, 8vw, 38px);
  }

  .title-screen .lead {
    margin: 0;
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 1.25;
  }

  .title-character-panel {
    margin-top: 8px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.34);
  }

  .character-title {
    margin-bottom: 6px;
    font-size: 14px;
  }

  .character-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
  }

  .character-card {
    min-height: 76px;
    padding: 2px 1px;
    border-width: 1px;
    border-radius: 11px;
  }

  .character-card.selected {
    box-shadow: 0 0 0 2px rgba(47, 125, 92, 0.17);
    transform: translateY(-1px);
  }

  .character-svg {
    width: 58px;
    height: 66px;
  }

  .character-portrait {
    width: 58px;
    height: 64px;
    transform: none;
  }

  .character-note {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.2;
  }

  .title-start {
    min-height: 86px;
    margin-top: 9px;
    border-radius: 20px;
  }

  .title-start .mode-icon {
    font-size: 22px;
  }

  .title-start strong {
    font-size: clamp(24px, 7vw, 32px);
  }

  .simple-home .stamp,
  .simple-home .eyebrow,
  .simple-home .tiny-note {
    display: none;
  }

  .simple-home h1 {
    margin: 0 0 4px;
    font-size: clamp(25px, 7vw, 32px);
    line-height: 1.05;
  }

  .simple-home .lead {
    margin: 0 0 6px;
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
  }

  .simple-home .name-field {
    gap: 4px;
    margin: 6px 0;
    padding: 8px 10px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.46);
  }

  .simple-home .name-field span {
    font-size: 14px;
  }

  .simple-home .name-field input {
    min-height: 40px;
    border-radius: 13px;
    font-size: 18px;
    padding: 6px 10px;
  }

  .family-message-row {
    grid-template-columns: 1fr auto;
    gap: 6px;
  }

  .small-inline-btn {
    min-width: 72px;
    border-radius: 12px;
    padding: 0 10px;
    font-size: 14px;
  }

  .simple-home .name-field em {
    display: none;
  }

  .status-panel {
    margin-top: 6px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.34);
  }

  .status-title {
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.2;
  }

  .mode-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
  }

  .status-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .status-card {
    min-height: 50px;
    padding: 6px 4px;
    border-radius: 14px;
    text-align: center;
    background: rgba(255, 248, 232, 0.60);
  }

  .status-card strong {
    font-size: 14px;
    line-height: 1.15;
  }

  .status-card em {
    display: none;
  }

  .mode-card {
    min-height: 74px;
    padding: 8px 6px;
    border-radius: 16px;
    text-align: center;
    background: rgba(255, 248, 232, 0.66);
  }

  .mode-icon {
    font-size: 24px;
    margin-bottom: 3px;
  }

  .mode-card strong {
    font-size: clamp(15px, 4.2vw, 18px);
  }

  .mode-card em {
    margin-top: 3px;
    font-size: clamp(11px, 3.1vw, 13px);
    line-height: 1.2;
  }
}