:root {
  color-scheme: dark;
  --glass: rgba(28, 32, 30, 0.84);
  --ink: #f4f1ea;
  --muted: #c3b7aa;
  --line: rgba(244, 241, 234, 0.18);
  --green: #8fbf9a;
  --on-green: #132018;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  --sans: "PingFang TC", "PingFang SC", "Hiragino Sans CNS", "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: #101311; color: var(--ink); font-family: var(--sans); font-size: 13px; line-height: 1.35;
}
body { position: fixed; inset: 0; }
p, h1, h2, h3, ul { margin: 0; }
button, input { font: inherit; }
button {
  cursor: pointer; color: var(--ink); background: transparent; border: 1px solid var(--line);
  border-radius: 12px; min-width: 44px; min-height: 44px; padding: 0 10px;
}
#stage { position: fixed; inset: 0; overflow: hidden; background: #101311; }
#unity-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
[hidden] { display: none !important; }
.hud { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
body.loading .hud, body[data-started="false"] .hud { visibility: hidden; }
body.photo .hud, body.photo .hud * { opacity: 0; pointer-events: none !important; }
.topbar, .day-clock, .top-actions, .icon-button, .care-dock, .camera-toggle, .drawer, .cycle-card, .toast, .overlay, .start-card, #start-overlay, #loading-overlay, #failure-overlay { pointer-events: auto; }
.care-dock, .drawer, .cycle-card, .start-card, .toast, .voice-bubble, .icon-button, .camera-toggle, .day-clock {
  background: var(--glass); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.topbar { position: absolute; top: 0; left: 12px; right: 12px; height: 44px; max-height: 44px; display: flex; align-items: center; gap: 8px; }
.brand { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.day-clock { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 999px; box-shadow: none; color: var(--muted); font-size: 12px; }
#clock-value { color: var(--ink); font-variant-numeric: tabular-nums; }
.top-actions { display: flex; gap: 6px; margin-left: auto; }
.icon-button, .camera-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; }
.care-dock {
  position: absolute; right: 24px; bottom: 24px; z-index: 5; display: flex; flex-direction: column; gap: 4px;
  width: 288px; max-width: 290px; max-height: min(264px, calc(100dvh - 140px)); padding: 8px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.care-dock > * { flex-shrink: 0; }

.resident-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-height: 18px;
  font-size: 13px;
  font-weight: 600;
}
.resident-heading strong { flex-shrink: 0; }
.resident-heading #resident-activity { text-align: right; line-height: 1.4; }

.resident-heading span,
.resident-heading small,
.resident-heading em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.care-need {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}

.care-need > * {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.care-actions {
  display: flex;
  gap: 6px;
  height: 44px;
}

.feed-button,
[data-action="feed"] {
  flex: 1.35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: var(--green);
  color: var(--on-green);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.secondary-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  overflow: hidden;
  background: transparent;
  font-size: 12px;
  white-space: nowrap;
}

kbd {
  font-family: inherit;
  font-size: 11px;
  line-height: 1.2;
  padding: 0 3px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.feed-button kbd,
[data-action="feed"] kbd {
  border-color: rgba(19, 32, 24, 0.35);
}

.feed-button .cost,
[data-action="feed"] .cost {
  font-size: 11px;
  font-weight: 600;
}

.movement-hint {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  max-width: 240px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
}

.camera-toggle {
  position: absolute;
  left: 16px;
  bottom: 42px;
  z-index: 4;
}

.hint-reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 1px rgba(16, 19, 17, 0.65);
  pointer-events: none;
}

.voice-bubble {
  position: absolute;
  left: 50%;
  bottom: 186px;
  z-index: 4;
  width: min(360px, calc(100% - 32px));
  max-width: 360px;
  max-height: 76px;
  padding: 8px 12px;
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
}

.voice-name {
  display: block;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
}

.voice-text {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
}

.toast {
  position: absolute;
  top: 56px;
  left: 50%;
  z-index: 6;
  width: max-content;
  max-width: min(420px, calc(100% - 32px));
  padding: 8px 12px;
  transform: translateX(-50%);
  font-size: 13px;
  text-align: center;
}

.drawer {
  position: absolute;
  top: 80px;
  bottom: 92px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  width: 310px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  overflow-x: hidden;
  overflow-y: auto;
}

#map-drawer {
  left: 12px;
}

#journal-drawer,
#settings-drawer {
  right: 12px;
  padding-bottom: 88px;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.drawer-header button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
}

.resident-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.resident-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  text-align: left;
}

.resident-trait,
.resident-distance {
  color: var(--muted);
  font-size: 12px;
}

#map-drawer svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.map-site {
  fill: rgba(244, 241, 234, 0.22);
  stroke: rgba(244, 241, 234, 0.55);
  stroke-width: 1.25;
}

.map-site.found,
#map-drawer .found {
  fill: rgba(143, 191, 154, 0.42);
  stroke: var(--green);
  color: var(--green);
}

#map-player {
  fill: var(--green);
  color: var(--green);
  stroke: none;
}

.journal-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.journal-stats > * {
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
}

.journal-stats strong,
.journal-stats b {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  font-size: 13px;
}

.setting-row button {
  min-height: 44px;
}

.setting-row input[type="range"] {
  flex: 1;
  min-width: 88px;
  min-height: 44px;
  accent-color: var(--green);
}

.cycle-card {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6px;
  row-gap: 6px;
  width: min(330px, calc(100% - 48px));
  max-width: 330px;
  max-height: 148px;
  padding: 10px;
  overflow: hidden;
  transform: translateX(-50%);
}

.cycle-card > :not(.button) {
  grid-column: 1 / -1;
}

.cycle-card h1,
.cycle-card h2,
.cycle-card h3 {
  font-size: 14px;
  font-weight: 600;
}

.cycle-copy {
  max-height: 2.7em;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
}

.cycle-card div {
  display: flex;
  gap: 6px;
}

.button,
.cycle-card .button {
  flex: 1;
  min-width: 44px;
  min-height: 44px;
}

.overlay,
#start-overlay,
#loading-overlay,
#failure-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(8, 10, 9, 0.72);
}

.overlay.open {
  background: rgba(8, 10, 9, 0.72);
}

.start-card {
  width: min(400px, calc(100vw - 32px));
  max-width: 400px;
  padding: 18px 16px;
}

#loading-overlay .start-card,
#failure-overlay .start-card {
  width: min(320px, calc(100vw - 32px));
  text-align: center;
}

.start-card h1,
.start-card h2 {
  margin-bottom: 6px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.start-card p,
.intro-tips {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
}

.intro-tips {
  padding: 0;
  list-style: none;
}

.intro-tips li + li {
  margin-top: 4px;
}

.start-button,
#start-overlay .start-button,
#failure-overlay .start-card button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--green);
  color: var(--on-green);
  font-weight: 600;
}

#loading-overlay progress,
#loading-overlay .progress,
#loading-overlay .loader {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(244, 241, 234, 0.14);
  appearance: none;
}

#loading-overlay progress::-webkit-progress-bar {
  background: rgba(244, 241, 234, 0.14);
}

#loading-overlay progress::-webkit-progress-value,
#loading-overlay progress::-moz-progress-bar,
#loading-overlay .progress > *,
#loading-overlay .loader > * {
  display: block;
  height: 100%;
  background: var(--green);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
.resident-row:focus-visible {
  outline: 2px solid #d7f0e0;
  outline-offset: 2px;
}

.icon-button,
.camera-toggle,
.feed-button,
.secondary-action,
.button,
.start-button,
.resident-row,
.drawer-header button {
  transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

@media (hover: hover) {
  .icon-button:hover,
  .camera-toggle:hover,
  .secondary-action:hover,
  .button:hover,
  .resident-row:hover,
  .drawer-header button:hover {
    background: rgba(244, 241, 234, 0.08);
  }

  .feed-button:hover,
  .start-button:hover,
  [data-action="feed"]:hover {
    background: #9dccaa;
  }
}

@media (max-width: 1000px) and (min-width: 601px) {
  .cycle-card {
    left: 16px;
    width: min(330px, calc(100vw - 336px));
    transform: none;
  }
  .hud:has(.care-dock:not([hidden])) .voice-bubble {
    left: 16px;
    bottom: 104px;
    width: min(360px, calc(100vw - 344px));
    max-height: 140px;
    transform: none;
  }
  .hud:has(.cycle-card:not([hidden])) .voice-bubble { visibility: hidden; }
}

@media (max-width: 600px) {
  .care-dock {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
  }

  .movement-hint {
    left: 12px;
    bottom: 168px;
    max-width: calc(100vw - 24px);
  }

  .camera-toggle {
    left: 12px;
    bottom: 196px;
  }

  .voice-bubble {
    bottom: 252px;
    width: min(360px, calc(100vw - 24px));
  }

  .cycle-card {
    right: 12px;
    bottom: 168px;
    left: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
    transform: none;
  }

  .hud:has(.cycle-card:not([hidden])) .movement-hint {
    bottom: 330px;
  }

  .hud:has(.cycle-card:not([hidden])) .camera-toggle {
    bottom: 356px;
  }

  .hud:has(.cycle-card:not([hidden])) .voice-bubble {
    bottom: 412px;
  }

  .drawer,
  #map-drawer,
  #journal-drawer,
  #settings-drawer {
    top: 60px;
    right: 12px;
    bottom: auto;
    left: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
    max-height: 56vh;
    padding-bottom: 12px;
  }

  .drawer-header button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .brand {
    font-size: 13px;
  }
}

@media (max-height: 700px) and (min-width: 601px) {
  .care-dock {
    max-height: min(264px, calc(100dvh - 140px));
  }

  .drawer {
    top: 64px;
    bottom: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
/* Parent integration: compact secondary information and drawer focus. */
.topbar{top:12px}.brand{text-shadow:0 1px 8px #000}.day-clock{gap:5px;white-space:nowrap}
.icon-button{font-size:18px}.resident-trait{display:block;margin-top:3px;font-size:11px}
.resident-distance{white-space:nowrap}.drawer-header h2{font-size:15px}
.drawer-note{font-size:12px;color:var(--muted);line-height:1.6;margin:8px 0 12px}
.journal-stats{margin-bottom:12px}.drawer details{margin-top:16px;font-size:12px}.drawer summary{cursor:pointer;min-height:32px}.drawer details button{margin:4px 3px 4px 0}
button:disabled{opacity:.42;cursor:default}.feed-button:disabled:hover{background:var(--green)}
.guide-chip{position:absolute;left:12px;top:68px;display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 10px;background:rgba(28,32,30,.76);border-radius:10px;pointer-events:auto;font-size:12px;box-shadow:none}
#guide-arrow{display:inline-block;font-size:20px;color:var(--green)}.guide-chip small{color:var(--muted)}
.intro-eyebrow{display:block;color:var(--green);font-size:12px;margin-bottom:8px}
.cycle-card{width:300px;grid-template-columns:1fr;max-height:152px}.cycle-card>.button{grid-column:1/-1}
body.menu-open .care-dock,body.menu-open .cycle-card,body.menu-open .guide-chip,body.menu-open .voice-bubble{visibility:hidden}
.toast.error{border-color:#dca696}body.paused .day-clock:after{content:'暫停';color:var(--green)}
#garden-map{background:rgba(10,18,15,.28);border-radius:10px;margin-bottom:12px}
#map-destinations{display:grid;grid-template-columns:1fr 1fr;gap:6px}#map-destinations .resident-row{font-size:12px}
#journal-drawer,#settings-drawer{padding-bottom:16px}
@media(max-width:600px){.topbar{top:8px;gap:5px}.brand{max-width:98px}.day-clock{font-size:10px;padding:0 6px;gap:3px}.top-actions{gap:4px}.icon-button{width:44px;min-width:44px}.guide-chip{top:62px}.voice-bubble{bottom:155px}.camera-toggle{bottom:168px}.movement-hint{bottom:140px;font-size:10px}.cycle-card{bottom:12px}.hud:has(.cycle-card:not([hidden])) .voice-bubble{bottom:286px}.hud:has(.cycle-card:not([hidden])) .care-dock{bottom:172px}.hud:has(.cycle-card:not([hidden])) .camera-toggle{bottom:316px}.hud:has(.cycle-card:not([hidden])) .movement-hint{bottom:296px}}
/* Neighbour moments stay small until the visitor asks to read them. */
.incident-nearby{position:absolute;right:24px;bottom:144px;width:288px;display:flex;align-items:center;gap:10px;padding:10px 12px;text-align:left;background:#26372eef;border:1px solid #94bba278;pointer-events:auto;box-shadow:var(--shadow)}
.incident-nearby>span:nth-child(2){flex:1}.incident-nearby strong{display:block;font-size:12px}.incident-nearby small{display:block;margin-top:3px;color:#c5d8c9;font-size:10px}.incident-nearby kbd{font-size:14px;padding:4px 6px;color:#d7edc9}
.incident-dialog{position:absolute;z-index:12;right:24px;bottom:24px;width:360px;max-width:calc(100vw - 24px);max-height:calc(100vh - 100px);overflow:auto;overscroll-behavior:contain;padding:16px;background:rgba(25,34,29,.96);border:1px solid #abc4ac66;border-radius:18px;box-shadow:0 15px 60px #0007;pointer-events:auto}
.incident-dialog .drawer-header{margin-bottom:8px}.incident-eyebrow{font-size:11px;color:#aac5ab;letter-spacing:.1em}.incident-dialog h2{font-size:20px;font-weight:550;line-height:1.4;margin:0 0 10px}.incident-dialog>p{line-height:1.75;color:#e0e4dc;font-size:13px}
.incident-conversation{margin:14px 0;display:grid;gap:8px}.incident-conversation p{padding:8px 10px;border-left:2px solid #6c9278;background:#d2e2d207;border-radius:0 8px 8px 0}.incident-conversation strong{display:block;color:#b2cbb2;font-size:10px;margin-bottom:4px}.incident-conversation span{font-size:12px;line-height:1.6}
#incident-options{display:grid;gap:8px}.incident-choice{padding:10px 12px;min-height:58px;text-align:left;background:#d2e2d207}.incident-choice strong{display:block;font-size:13px;font-weight:500}.incident-choice span{display:block;font-size:11px;color:#bdc7b8;margin-top:4px}.incident-choice:not(:disabled):hover{background:#9fc8a822;border-color:#accaae}
.incident-pause-note{display:block;text-align:center;color:#a9b5a8;font-size:10px;margin-top:12px}.incident-done{width:100%;background:var(--green);color:var(--on-green);border:0;margin-top:12px;font-weight:600}#incident-receipt{color:#b4d5af;font-size:12px;padding:8px;border:1px dashed #93b49755;border-radius:8px}
body.incident-open .care-dock,body.incident-open .voice-bubble,body.incident-open .guide-chip,body.incident-open .cycle-card,body.incident-open .camera-toggle,body.incident-open .movement-hint,body.incident-open .top-actions{visibility:hidden}
body.menu-open .incident-nearby,body.menu-open .toast,body.incident-open .toast{visibility:hidden}
#incident-ledger{border-top:1px solid var(--line);padding-top:12px}#incident-ledger>summary{display:flex;align-items:center;justify-content:space-between;font-size:13px;list-style:none}#incident-ledger>summary:before{content:'＋';margin-right:8px;color:var(--green)}#incident-ledger[open]>summary:before{content:'－'}#incident-tally{margin-left:auto;color:var(--green)}
#incident-list{display:grid;gap:6px}.incident-journal-row{min-height:52px;text-align:left;padding:9px 10px}.incident-journal-row strong{display:block;font-weight:500;font-size:12px}.incident-journal-row span{display:block;color:var(--muted);font-size:10px;margin-top:3px}#incident-ledger h3{font-size:12px;font-weight:500;margin:17px 0 8px;color:#c0d2b8}#incident-bonds,#incident-history{font-size:11px;line-height:1.7;color:#c3cbbf}#incident-bonds p{margin:6px 0}#incident-history details{margin:5px 0;border-bottom:1px solid #ffffff0b}#incident-history details p{padding-bottom:10px}#incident-report{font-size:10px;color:var(--muted)}.cycle-card{max-height:180px}
@media(max-width:600px){.incident-nearby{left:12px;right:12px;bottom:132px;width:auto}.incident-dialog{left:12px;right:12px;bottom:12px;width:auto;max-height:calc(100dvh - 78px);padding:14px}.hud:has(.incident-nearby:not([hidden])) .voice-bubble{bottom:258px}.hud:has(.incident-nearby:not([hidden])) .movement-hint{visibility:hidden}.hud:has(.incident-nearby:not([hidden])) .camera-toggle{bottom:205px}.hud:has(.cycle-card:not([hidden])) .incident-nearby{bottom:300px}.hud:has(.cycle-card:not([hidden])) .voice-bubble{bottom:365px}.cycle-card{max-height:185px}}

@media(max-width:600px){.hud:has(.cycle-card:not([hidden])):has(.incident-nearby:not([hidden])) .camera-toggle{bottom:374px}.hud:has(.cycle-card:not([hidden])):has(.incident-nearby:not([hidden])) .voice-bubble{bottom:425px}}

.hud:has(.toast:not([hidden])) .guide-chip{visibility:hidden}

/* The saved visit is visible at the entrance, with quiet status in settings. */
.save-panel{margin:18px 0;padding:14px 0;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;display:grid;gap:10px;font-size:13px}.save-panel small{color:#b1b8ad;font-size:11px}.save-actions{display:flex;gap:8px}.save-actions button{flex:1;padding:10px 8px}.save-error{color:#edbc97!important}.save-summary{font-size:13px!important;line-height:1.6;color:#c4ccbd!important;margin:18px 0 12px!important}.new-visit-entry{margin-top:16px;font-size:12px}.new-visit-entry summary{cursor:pointer;color:#b3beb0}.new-visit-entry p{font-size:12px!important}.new-visit-entry button{padding:10px 14px}.start-card{max-height:calc(100dvh - 36px);overflow:auto}.start-button:disabled{opacity:.5;cursor:default}

/* Settings expose the return-to-garden controls before optional preferences. */
.drawer > *{flex-shrink:0}

/* Stack transient speech above the measured care card on narrow viewports. */
.hud:has(.care-dock:not([hidden])) .incident-nearby {
  bottom: calc(var(--care-height, 200px) + 36px);
}
@media (max-width: 600px) {
  .care-dock { bottom: max(12px, env(safe-area-inset-bottom)); }
  .hud:has(.care-dock:not([hidden])) .movement-hint { visibility: hidden; }
  .hud:has(.care-dock:not([hidden])) .camera-toggle {
    top: 112px; bottom: auto;
  }
  .hud:has(.care-dock:not([hidden])) .voice-bubble {
    bottom: calc(var(--care-height, 220px) + 24px + env(safe-area-inset-bottom));
  }
  .hud:has(.care-dock:not([hidden])) .incident-nearby {
    bottom: calc(var(--care-height, 220px) + 24px + env(safe-area-inset-bottom));
  }
  .hud:has(.care-dock:not([hidden])):has(.incident-nearby:not([hidden])) .voice-bubble {
    visibility: hidden;
  }
  .hud:has(.cycle-card:not([hidden])) .voice-bubble { visibility: hidden; }
}
#settings-drawer > .save-panel{margin:4px 0 12px;padding:10px 0}

/* M38: portable garden controls remain inside the existing entrance/settings. */
.transfer-entry{margin-top:16px;border-top:1px solid #ffffff24;padding-top:14px;text-align:left;font-size:13px}
.transfer-entry summary{cursor:pointer;color:#d8e3cd;padding:8px 0;min-height:44px;display:list-item}
.transfer-entry p,.transfer-settings small{font-size:12px!important;line-height:1.6;color:#bfcbb8}
.transfer-actions,.transfer-settings{display:flex;gap:8px;flex-wrap:wrap}
.transfer-settings{margin-bottom:16px}.transfer-settings small{flex-basis:100%}
.transfer-actions>button,.file-pick,.transfer-settings>button{flex:1;min-height:44px;padding:10px 12px;font:inherit;border:1px solid #ffffff30;background:#ffffff0b;color:inherit;border-radius:8px;text-align:center;cursor:pointer}
.file-pick{display:flex;align-items:center;justify-content:center;position:relative}.file-pick input{position:absolute;width:1px;height:1px;opacity:0;inset:0}
.file-pick:focus-within{outline:2px solid #a4d8b0;outline-offset:2px}
#import-preview{border-left:2px solid #a4d8b0;padding-left:12px;margin-top:12px}#import-confirm{background:#a4d8b0;color:#17241a}#transfer-status:empty{display:none}

.touch-controls{position:fixed;z-index:12;left:max(16px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));display:grid;justify-items:center;gap:8px;pointer-events:auto;user-select:none;-webkit-user-select:none}
.touch-controls[hidden]{display:none!important}#touch-stick{width:116px;height:116px;padding:0;border:1px solid #d4e3cf70;border-radius:50%;background:#13221882;position:relative;touch-action:none;overflow:hidden;box-shadow:0 4px 22px #0003}
#touch-knob{position:absolute;width:44px;height:44px;left:35px;top:35px;border:1px solid #e2f4db9c;border-radius:50%;background:#aac5a580;pointer-events:none}.stick-label{position:absolute;bottom:8px;left:0;right:0;font-size:10px;color:#e2ead9;pointer-events:none}#touch-stick.active .stick-label{opacity:0}
#touch-run{min-width:64px;min-height:44px;border:1px solid #ffffff40;border-radius:8px;background:#19291de0;color:#e0e8d8;font:inherit;font-size:12px}#touch-run[aria-pressed=true]{background:#a4d8b0;color:#152417}
.touch-player .camera-toggle{top:106px;bottom:auto;left:16px}.touch-player .movement-hint{display:none}
@media(max-width:600px){
 .touch-player .care-dock{left:auto;right:max(10px,env(safe-area-inset-right));width:calc(100vw - 156px);max-width:300px;bottom:max(18px,env(safe-area-inset-bottom));padding:10px}
 .touch-player .care-dock .care-actions{gap:5px}.touch-player .care-dock button{font-size:12px;min-height:48px;padding:8px 4px}.touch-player .care-dock kbd{display:none}
 .touch-player .care-need{font-size:10px;gap:4px;flex-wrap:wrap}.touch-player #feed-cost{display:none}.touch-player .resident-heading{font-size:12px}.touch-player #resident-activity{font-size:10px}
 .touch-player .voice-bubble{bottom:calc(var(--care-height,180px) + 34px)!important}
}

/* Keep tablet speech clear of both thumbs, including when the care dock is hidden. */
body.touch-player .hud .voice-bubble{bottom:calc(max(var(--care-height,200px),186px) + 30px + env(safe-area-inset-bottom))!important}