:root {
  --animal-font:Nunito,"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;
  --animal-primary:#19c8b9;
  --animal-primary-hover:#3dd4c6;
  --animal-primary-active:#11a89b;
  --animal-primary-bg:#e6f9f6;
  --animal-text:#794f27;
  --animal-text-body:#725d42;
  --animal-text-secondary:#9f927d;
  --animal-text-muted:#8a7b66;
  --animal-bg:#f8f8f0;
  --animal-bg-content:#f7f3df;
  --animal-border:#c4b89e;
  --animal-radius-sm:12px;
  --animal-radius:18px;
  --animal-radius-lg:24px;
  --animal-radius-pill:50px;
  --animal-shadow-btn:#bdaea0;
  --animal-focus-yellow:#fc0;
  --animal-success:#6fba2c;
  --animal-warning:#f5c31c;
  --animal-error:#e05a5a;
  --animal-ease:cubic-bezier(.4,0,.2,1);
  --animal-duration:.25s;
  --paper:#fffdf3;
  --cream:#eee7ca;
  --mint-dark:#277c6b;
  --coral:#d57d60;
  --gold:#f4cf74;
  --host-top:0px;
  --host-bottom:0px;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  font-family: var(--animal-font);
  font-weight: 500;
  color: var(--animal-text-body);
  background: var(--animal-bg-content);
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
  background-image: radial-gradient(rgba(200, 207, 182, 0.302) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  border-radius: var(--animal-radius-pill);
  touch-action: manipulation;
}
button:focus {
  outline: 3px solid var(--animal-primary);
  outline-offset: 3px;
}
button:disabled {
  cursor: default;
  opacity: .48;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  color: var(--animal-text);
  font-weight: 800;
}
img {
  max-width: 100%;
  -webkit-user-drag: none;
}
button img {
  pointer-events: none;
}
button:active:not(:disabled) {
  transform: translateY(2px);
}
.shape-defs {
  position: absolute;
}
.icon {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  vertical-align: middle;
}
.btn {
  min-height: 46px;
  padding: 11px 20px;
  background: var(--paper);
  border: 1px solid var(--cream);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--animal-duration) var(--animal-ease), background var(--animal-duration) var(--animal-ease);
}
.btn .icon {
  margin-right: 7px;
}
.btn.primary {
  background: var(--animal-primary);
  color: var(--paper);
  border-color: var(--animal-primary-active);
  box-shadow: 0 4px 0 var(--animal-primary-active), 0 6px 0 var(--animal-shadow-btn);
  margin-bottom: 6px;
}
.btn.primary:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--animal-primary-active), 0 3px 0 var(--animal-shadow-btn);
}
.btn.small {
  min-height: 40px;
  padding: 7px 13px;
  font-size: 12px;
}
.btn.block {
  display: flex;
  width: 100%;
}
.btn.danger {
  color: var(--animal-error);
}
.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--cream);
  flex-shrink: 0;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 800;
  color: var(--mint-dark);
}
.muted {
  color: var(--animal-text-muted);
  font-size: 12px;
}
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 50px;
  background: var(--animal-primary-bg);
  color: var(--mint-dark);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
}
.pill.gold {
  background: #fff0c6;
  color: #976b30;
}
.pill.coral {
  background: #fae6db;
  color: #ac5940;
}
.pill .icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.ribbon {
  position: relative;
  display: inline-block;
  background: var(--mint-dark);
  color: var(--paper);
  padding: 6px 18px;
  font-size: 11px;
  letter-spacing: 1px;
}
.ribbon:before,
.ribbon:after {
  content: "";
  position: absolute;
  bottom: -5px;
  border: 7px solid var(--mint-dark);
  border-bottom-color: transparent;
}
.ribbon:before {
  left: -8px;
}
.ribbon:after {
  right: -8px;
}
.shell {
  max-width: 1180px;
  height: 100vh;
  height: var(--app-height,100vh);
  padding: calc(18px + var(--host-top)) 28px calc(16px + var(--host-bottom));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.brand {
  display: flex;
  align-items: center;
}
.brand-logo {
  width: 42px;
  height: 42px;
  border: 1px solid #b0c6a4;
  border-radius: 15px;
  background: #e5efdb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  transform: rotate(-5deg);
}
.brand-logo .icon {
  width: 30px;
  height: 30px;
}
.brand h1 {
  font-size: 23px;
  letter-spacing: 1px;
  line-height: 1.4;
}
.brand .eyebrow {
  font-size: 8px;
  letter-spacing: 2.2px;
}
.header-tools {
  display: flex;
  align-items: center;
}
.header-tools > * {
  margin-left: 10px;
}
.day-count {
  display: flex;
  align-items: baseline;
  padding: 8px 15px;
  background: var(--paper);
  border-radius: 18px;
}
.day-count strong {
  font-size: 28px;
  margin: 0 6px;
  color: var(--animal-text);
}
.day-count span {
  font-size: 11px;
}
.layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.world {
  width: 52%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-right: 22px;
}
.resourcebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.wallet {
  display: flex;
  align-items: center;
}
.wallet > .icon {
  width: 31px;
  height: 31px;
  margin-right: 9px;
}
.wallet strong {
  font-size: 27px;
  color: var(--animal-text);
  font-weight: 900;
}
.wallet small {
  font-size: 10px;
  margin-left: 5px;
  color: var(--animal-text-muted);
}
.rent-label {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 50px;
  border: 1px dashed #b4c7a0;
  background: #f1f3e0;
  color: var(--mint-dark);
}
.scene {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  min-height: 200px;
  flex: 1;
  background-image: url(./assets/room.webp);
  background-size: cover;
  background-position: center;
  border: 5px solid var(--paper);
}
.scene:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25%;
  background: linear-gradient(transparent, rgba(74, 51, 25, .28));
  pointer-events: none;
}
.hero-actor {
  position: absolute;
  height: 77%;
  width: auto;
  left: 44%;
  bottom: 8%;
  filter: drop-shadow(0 6px 3px rgba(101, 67, 30, 0.149));
  transform-origin: 50% 95%;
  animation: breathe 4s ease-in-out infinite;
  z-index: 2;
}
.room-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 253, 243, 0.9098);
  border-radius: 50px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 800;
  z-index: 3;
}
.room-hotspot {
  position: absolute;
  z-index: 4;
  min-height: 37px;
  padding: 5px 11px;
  font-size: 11px;
  background: rgba(255, 253, 243, 0.9294);
  border: 1px solid #d3c19a;
}
.hot-computer {
  top: 43%;
  left: 4%;
}
.hot-files {
  top: 30%;
  right: 3%;
}
.hot-phone {
  bottom: 12%;
  right: 4%;
}
.room-hotspot .icon {
  width: 17px;
  height: 17px;
  margin-right: 3px;
}
.scene-saying {
  position: absolute;
  z-index: 3;
  bottom: 13px;
  left: 13px;
  max-width: 73%;
  background: rgba(255, 253, 243, 0.9098);
  border-radius: 14px;
  padding: 7px 12px;
  font-size: 11px;
  color: var(--animal-text);
}
.match {
  border-radius: 20px;
  background: #e6edda;
  border: 1px solid #d1dcc2;
  padding: 13px 15px;
  margin-top: 12px;
  flex-shrink: 0;
}
.match-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.match-title {
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--mint-dark);
}
.match-title .icon {
  margin-right: 5px;
}
.match-next {
  font-size: 10px;
  color: var(--mint-dark);
}
.stage-track {
  display: flex;
  align-items: center;
}
.stage-step {
  flex: 1;
  text-align: center;
  color: #a5aa8c;
  font-size: 10px;
  position: relative;
  padding-top: 17px;
}
.stage-step:before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: calc(50% - 4px);
  background: #ccd3bb;
  border: 2px solid #e6edda;
  z-index: 1;
}
.stage-step:after {
  content: "";
  height: 2px;
  position: absolute;
  top: 4px;
  left: -50%;
  right: 50%;
  background: #ccd3bb;
}
.stage-step:first-child:after {
  display: none;
}
.stage-step.reached {
  color: var(--mint-dark);
  font-weight: 800;
}
.stage-step.reached:before {
  background: var(--mint-dark);
}
.stage-step.reached:after {
  background: #78a78c;
}
.newsline {
  font-size: 11px;
  margin-top: 11px;
  line-height: 1.6;
  color: var(--mint-dark);
}
.workbench {
  width: 48%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--cream);
  border-radius: 26px;
  overflow: hidden;
}
.desk-heading {
  padding: 19px 20px 15px;
  border-bottom: 1px dashed #e1d6b8;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
}
.desk-heading h2 {
  font-size: 21px;
  margin-top: 4px;
}
.desk-heading .eyebrow {
  font-size: 9px;
}
.bench-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 10px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.tab-intro {
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 13px;
}
.action-list {
  display: flex;
  flex-direction: column;
}
.action-card {
  padding: 14px 13px;
  border: 1px solid var(--cream);
  border-radius: 18px;
  margin-bottom: 11px;
  background: #fcfaef;
  display: flex;
  align-items: center;
  position: relative;
}
.action-symbol {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: #ecefdc;
  margin-right: 10px;
  flex-shrink: 0;
}
.action-symbol .icon {
  width: 30px;
  height: 30px;
}
.action-info {
  flex: 1;
  min-width: 0;
}
.action-info h3 {
  font-size: 14px;
}
.action-info p {
  font-size: 11px;
  line-height: 1.5;
  color: var(--animal-text-muted);
  margin-top: 4px;
}
.action-info .reward {
  font-size: 11px;
  color: var(--mint-dark);
  font-weight: 800;
}
.action-card > .btn {
  margin-left: 8px;
  flex-shrink: 0;
  min-width: 70px;
}
.action-card.unavailable {
  background: #f3f0e4;
}
.section-label {
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 3px 0 10px;
}
.section-label .muted {
  font-weight: 500;
}
.nav {
  padding: 10px 8px 8px;
  display: flex;
  background: #f3efd9;
  border-top: 1px solid var(--cream);
  flex-shrink: 0;
}
.nav button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 54px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: 800;
  color: var(--animal-text-muted);
}
.nav button .icon {
  width: 24px;
  height: 24px;
  margin-bottom: 3px;
}
.nav button.active {
  background: var(--paper);
  color: var(--mint-dark);
}
.footerline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  margin-top: 10px;
  color: var(--animal-text-muted);
  flex-shrink: 0;
}
.footerline button {
  font-size: 10px;
  text-decoration: underline;
  min-height: 28px;
}
.save-error {
  color: var(--animal-error);
  font-weight: 800;
}
.save-retry {
  font-size: 11px;
  min-height: 32px;
  color: var(--animal-error);
  text-decoration: underline;
}
.progress-card {
  border: 1px solid var(--cream);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
  background: #fbf8e9;
}
.progress-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 8px;
}
.progress-heading strong {
  color: var(--mint-dark);
  font-size: 17px;
}
.progress-track {
  height: 9px;
  background: #e6dfc7;
  border-radius: 12px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--animal-primary);
  border-radius: 12px;
  transition: width .3s var(--animal-ease);
}
.checklist {
  margin: 12px 0 14px;
}
.check-row {
  display: flex;
  align-items: center;
  font-size: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--cream);
}
.check-row .icon {
  width: 19px;
  height: 19px;
  margin-right: 7px;
}
.check-row.ok {
  color: var(--mint-dark);
}
.visa-status {
  background: var(--animal-primary-bg);
  padding: 13px;
  border-radius: 18px;
  text-align: center;
  margin-bottom: 13px;
}
.visa-status h3 {
  font-size: 18px;
  margin-bottom: 5px;
}
.visa-status p {
  font-size: 12px;
  line-height: 1.65;
}
.property-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed var(--cream);
  padding: 3px 0 12px;
  margin-bottom: 13px;
}
.property-summary b {
  font-size: 20px;
  color: var(--mint-dark);
}
.property-summary small {
  font-size: 10px;
  display: block;
  margin-bottom: 3px;
}
.property-card {
  padding: 13px;
  border: 1px solid var(--cream);
  border-radius: 18px;
  margin-bottom: 11px;
  background: #fcfaef;
}
.property-top {
  display: flex;
  align-items: center;
}
.property-thumb {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  margin-right: 10px;
  border-radius: 15px;
  background-image: url(./assets/scenes.webp);
  background-size: 400% 400%;
  background-position: 100% 100%;
  border: 2px solid #e1d2b2;
}
.property-meta {
  flex: 1;
}
.property-meta h3 {
  font-size: 14px;
  margin-bottom: 4px;
}
.property-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 9px;
}
.property-desc {
  font-size: 11px;
  line-height: 1.6;
  color: var(--animal-text-muted);
  margin-top: 7px;
}
.property-price {
  font-size: 17px;
  color: var(--animal-text);
  font-weight: 900;
}
.property-price small {
  display: block;
  font-size: 10px;
  color: var(--mint-dark);
  font-weight: 700;
}
.owned {
  background: #eef2e1;
}
.phone-message {
  padding: 13px;
  border: 1px solid var(--cream);
  border-radius: 18px;
  margin-bottom: 11px;
  background: #fcfaef;
}
.phone-message header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--mint-dark);
  font-weight: 800;
  margin-bottom: 7px;
}
.phone-message h3 {
  font-size: 13px;
  margin-bottom: 6px;
}
.phone-message p {
  font-size: 12px;
  line-height: 1.7;
}
.ledger {
  border-top: 1px dashed var(--cream);
  padding-top: 10px;
  margin-top: 10px;
}
.ledger-item {
  font-size: 11px;
  line-height: 1.7;
  padding: 8px 0;
  border-bottom: 1px solid #eee7d1;
}
.ledger-item small {
  color: var(--animal-text-muted);
}
.subtabs {
  display: flex;
  margin-bottom: 12px;
}
.subtabs button {
  padding: 8px 15px;
  font-size: 12px;
  min-height: 39px;
  margin-right: 6px;
  background: #f1ecd6;
}
.subtabs button.active {
  background: var(--animal-primary-bg);
  color: var(--mint-dark);
  font-weight: 800;
}
.album-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 11px;
}
.album-card {
  padding: 13px 10px;
  border: 1px solid var(--cream);
  border-radius: 18px;
  text-align: left;
  background: #fcfaef;
  min-height: 133px;
}
.album-card .icon {
  width: 27px;
  height: 27px;
  margin-bottom: 7px;
}
.album-card h3 {
  font-size: 13px;
  margin-bottom: 6px;
}
.album-card p {
  font-size: 10px;
  line-height: 1.65;
}
.album-card.locked {
  border-style: dashed;
  background: #f2efdf;
}
.event-record {
  padding: 10px 0;
  font-size: 12px;
  line-height: 1.7;
  border-bottom: 1px dashed var(--cream);
}
.note {
  font-size: 11px;
  line-height: 1.8;
  background: #f3edd7;
  border-radius: 15px;
  padding: 11px;
  margin-top: 12px;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: rgba(69, 53, 33, .56);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(12px + var(--host-top)) 12px calc(12px + var(--host-bottom));
}
.dialog {
  position: relative;
  max-width: 470px;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px 27px;
  color: var(--animal-text-body);
}
.dialog:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  clip-path: url(#paper-blob);
  z-index: -1;
}
.dialog header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
}
.dialog h2 {
  font-size: 21px;
}
.dialog-body {
  overflow-y: auto;
  min-height: 0;
  padding: 3px;
}
.dialog .dialog-actions {
  margin-top: 17px;
  flex-shrink: 0;
}
.dialog p {
  font-size: 12px;
  line-height: 1.85;
}
.dialog .check-row {
  justify-content: space-between;
  min-height: 52px;
}
.toggle {
  min-width: 70px;
  min-height: 38px;
  border: 1px solid var(--cream);
  background: #f2ecd5;
  font-size: 12px;
  font-weight: 800;
}
.toggle.on {
  background: var(--animal-primary-bg);
  color: var(--mint-dark);
}
.comic-dialog {
  width: 100%;
  max-width: 760px;
  height: 100%;
  max-height: 880px;
  border-radius: 24px;
  background: var(--animal-bg-content);
  padding: 13px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.comic-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.comic-heading h2 {
  font-size: 19px;
  margin-top: 3px;
}
.comic-heading .eyebrow {
  font-size: 8px;
}
.comic-tools {
  display: flex;
  align-items: center;
}
.comic-tools button {
  margin-left: 5px;
}
.comic-tools .icon-btn {
  width: 38px;
  height: 38px;
}
.comic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 9px;
  flex: 1;
  min-height: 0;
}
.comic-panel {
  position: relative;
  border: 2px solid #bca989;
  background: var(--paper);
  border-radius: 15px;
  overflow: hidden;
  opacity: .35;
  transform: scale(.98);
  transition: opacity .25s var(--animal-ease), transform .25s var(--animal-ease);
}
.comic-panel.revealed {
  opacity: 1;
  transform: scale(1);
}
.comic-panel .backdrop {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url(./assets/room.webp);
  background-size: cover;
  background-position: center;
  opacity: .72;
  transition: transform .3s var(--animal-ease);
}
.scene-office .backdrop,
.scene-airport .backdrop,
.scene-stadium .backdrop,
.scene-houses .backdrop {
  background-image: url(./assets/scenes.webp);
  background-size: 200% 200%;
}
.scene-office .backdrop {
  background-position: 0 0;
}
.scene-airport .backdrop {
  background-position: 100% 0;
}
.scene-stadium .backdrop {
  background-position: 0 100%;
}
.scene-houses .backdrop {
  background-position: 100% 100%;
}
.panel-number {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--paper);
  width: 21px;
  height: 21px;
  border-radius: 50%;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--animal-text);
  font-weight: 900;
  z-index: 3;
}
.comic-actor {
  position: absolute;
  bottom: 45px;
  height: calc(100% - 50px);
  max-width: 85%;
  object-fit: contain;
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(.92);
  opacity: 0;
  transition: opacity .25s var(--animal-ease), transform .3s var(--animal-ease);
  transform-origin: 50% 90%;
}
.acted .comic-actor {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.comic-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 9px;
  background: rgba(255, 253, 243, 0.949);
  font-size: 12px;
  line-height: 1.65;
  min-height: 43px;
  z-index: 4;
  opacity: 0;
  transition: opacity .25s var(--animal-ease);
  border-top: 1px solid #d8cbb0;
}
.spoken .comic-caption {
  opacity: 1;
}
.comic-panel.unwritten {
  opacity: 1;
  background: #e9e3cd;
  border: 2px dashed #c6b795;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.unwritten-text {
  font-size: 12px;
  line-height: 1.9;
  color: #a39372;
}
.unwritten-text .icon {
  display: block;
  margin: 0 auto 7px;
  width: 29px;
  height: 29px;
}
.comic-choice-area {
  flex-shrink: 0;
  padding-top: 10px;
}
.choice-prompt {
  font-size: 11px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 2px 7px;
}
.choices {
  display: flex;
  flex-direction: column;
}
.choice-button {
  min-height: 51px;
  background: var(--paper);
  border: 1px solid #d6c8a7;
  border-radius: 16px;
  text-align: left;
  padding: 8px 12px;
  margin-bottom: 6px;
  transition: background .2s var(--animal-ease);
  display: flex;
  align-items: center;
}
.choice-button strong {
  font-size: 12px;
  display: block;
  color: var(--animal-text);
}
.choice-button small {
  font-size: 10px;
  line-height: 1.4;
  display: block;
  margin-top: 2px;
  color: var(--animal-text-muted);
}
.choice-button .choice-letter {
  font-weight: 900;
  font-size: 13px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--animal-primary-bg);
  color: var(--mint-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 9px;
  flex-shrink: 0;
}
.choice-button:not(:disabled):hover {
  background: var(--animal-primary-bg);
}
.director-status {
  font-size: 10px;
  color: var(--animal-text-muted);
  text-align: center;
  padding: 4px 0;
  min-height: 22px;
}
.receipt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--paper);
  border: 1px dashed #c4b58d;
  border-radius: 14px;
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.6;
}
.receipt strong {
  color: var(--mint-dark);
}
.comic-panel.punchline .backdrop {
  transform: scale(1.06);
}
.comic-panel.punchline .comic-actor {
  animation: punch .3s var(--animal-ease);
}
.is-paused * {
  animation-play-state: paused !important;
}
.pause-note {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  background: var(--paper);
  border: 2px solid var(--animal-primary);
  border-radius: 22px;
  z-index: 8;
  padding: 15px 23px;
  font-weight: 800;
  display: none;
  pointer-events: none;
}
.is-paused .pause-note {
  display: block;
}
.splash {
  height: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: calc(25px + var(--host-top)) 24px calc(20px + var(--host-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash-card {
  display: flex;
  width: 100%;
  max-height: 100%;
  background: var(--paper);
  border: 7px solid var(--paper);
  border-radius: 34px;
  overflow: hidden;
}
.splash-art {
  width: 55%;
  min-height: 470px;
  background: url(./assets/room.webp) center/cover;
  position: relative;
  overflow: hidden;
}
.splash-art:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(transparent, rgba(99, 69, 40, 0.2588));
}
.splash-art .intro-zuian {
  position: absolute;
  height: 75%;
  left: 18%;
  bottom: 4%;
  z-index: 3;
  filter: drop-shadow(0 5px 3px rgba(114, 93, 66, 0.1255));
}
.splash-art .intro-nine {
  position: absolute;
  height: 47%;
  right: -2%;
  bottom: 13%;
  z-index: 1;
  transform: rotate(5deg);
}
.splash-art .intro-jackey {
  position: absolute;
  height: 44%;
  left: -6%;
  bottom: 15%;
  z-index: 2;
  transform: rotate(-6deg);
}
.splash-paper {
  position: absolute;
  left: 20px;
  top: 22px;
  z-index: 4;
  font-size: 12px;
  padding: 11px 14px;
  border: 1px solid #ceb884;
  border-radius: 15px;
  background: var(--paper);
  transform: rotate(-5deg);
  line-height: 1.6;
}
.splash-copy {
  width: 45%;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.splash-copy h1 {
  font-size: 33px;
  line-height: 1.4;
  margin: 17px 0 10px;
  letter-spacing: 2px;
}
.splash-copy .lead {
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 19px;
}
.splash-copy .btn {
  margin-top: 9px;
}
.splash-copy .footnote {
  font-size: 10px;
  line-height: 1.8;
  margin-top: 17px;
  color: var(--animal-text-muted);
}
.splash-points {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.splash-points span {
  margin: 0 6px 6px 0;
}
.boot {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.boot h1 {
  margin: 10px 0;
}
.ending-shell {
  max-width: 650px;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--paper);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ending-art {
  position: relative;
  min-height: 160px;
  flex: 1;
  overflow: hidden;
  background: #eee2c7;
}
.ending-art .backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(./assets/scenes.webp);
  background-size: 200% 200%;
}
.ending-art.scene-room .backdrop {
  background-image: url(./assets/room.webp);
  background-size: cover;
}
.ending-art img {
  position: absolute;
  height: 86%;
  width: auto;
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 3px rgba(114, 93, 66, 0.1882));
}
.ending-stamp {
  position: absolute;
  left: 17px;
  top: 17px;
  z-index: 3;
  background: var(--paper);
  border-radius: 50px;
  padding: 7px 13px;
  font-size: 11px;
  font-weight: 800;
  color: var(--mint-dark);
}
.ending-copy {
  padding: 20px 25px;
  flex-shrink: 0;
}
.ending-copy h1 {
  font-size: 29px;
  margin: 6px 0;
}
.ending-copy .quote {
  font-size: 15px;
  font-weight: 800;
  color: var(--mint-dark);
  margin: 10px 0;
}
.ending-copy p {
  font-size: 12px;
  line-height: 1.8;
}
.ending-stats {
  display: flex;
  border-top: 1px dashed var(--cream);
  border-bottom: 1px dashed var(--cream);
  margin: 13px 0;
  padding: 10px 0;
}
.ending-stats > div {
  flex: 1;
  font-size: 10px;
  color: var(--animal-text-muted);
}
.ending-stats strong {
  font-size: 17px;
  color: var(--animal-text);
  display: block;
}
.ending-actions {
  display: flex;
}
.ending-actions > .btn {
  flex: 1;
  margin-right: 8px;
}
.ending-actions > .btn:last-child {
  margin-right: 0;
}
.ending-foot {
  font-size: 9px;
  color: var(--animal-text-muted);
  text-align: center;
  margin-top: 9px;
}
.screen-reader {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
#toast {
  position: fixed;
  z-index: 80;
  bottom: 100px;
  left: 50%;
  transform: translate(-50%, 10px);
  max-width: 90%;
  background: var(--mint-dark);
  color: var(--paper);
  border-radius: 18px;
  padding: 11px 19px;
  font-size: 12px;
  line-height: 1.6;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--animal-ease), transform .2s var(--animal-ease);
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.reduced * {
  animation: none !important;
  transition: none !important;
}
.empty {
  padding: 28px 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  color: var(--animal-text-muted);
}
@keyframes breathe {
  0%, 100% {
    transform: rotate(-1deg) translateY(0);
  }
  50% {
    transform: rotate(1deg) translateY(-3px);
  }
}
@keyframes punch {
  0% {
    transform: translateX(-50%) scale(.9);
  }
  65% {
    transform: translateX(-50%) scale(1.07);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}
@media (min-width: 800px) and (min-height: 800px) {
  .shell {
    padding-top: 30px;
    padding-bottom: 25px;
  }
  .scene {
    min-height: 380px;
  }
  .comic-caption {
    font-size: 14px;
    min-height: 55px;
  }
  .comic-actor {
    bottom: 55px;
    height: calc(100% - 63px);
  }
  .comic-heading h2 {
    font-size: 23px;
  }
  .choice-button {
    min-height: 58px;
  }
  .choice-button strong {
    font-size: 14px;
  }
  .choice-button small {
    font-size: 11px;
  }
}
@media (max-width: 799px) {
  .shell {
    max-width: 500px;
    padding: calc(10px + var(--host-top)) 12px calc(0px + var(--host-bottom));
  }
  .header {
    margin-bottom: 8px;
  }
  .brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    margin-right: 7px;
  }
  .brand-logo .icon {
    width: 24px;
    height: 24px;
  }
  .brand h1 {
    font-size: 19px;
    letter-spacing: 0;
  }
  .brand .eyebrow {
    font-size: 7px;
    letter-spacing: 1.1px;
  }
  .day-count {
    padding: 5px 8px;
    border-radius: 13px;
  }
  .day-count strong {
    font-size: 22px;
    margin: 0 3px;
  }
  .day-count span {
    font-size: 10px;
  }
  .header-tools > * {
    margin-left: 6px;
  }
  .header-tools .icon-btn {
    width: 37px;
    height: 37px;
  }
  .layout {
    flex-direction: column;
  }
  .world {
    width: 100%;
    margin: 0;
    flex-shrink: 0;
  }
  .resourcebar {
    margin-bottom: 7px;
  }
  .wallet > .icon {
    width: 25px;
    height: 25px;
    margin-right: 6px;
  }
  .wallet strong {
    font-size: 24px;
  }
  .rent-label {
    font-size: 10px;
    padding: 6px 9px;
  }
  .scene {
    height: 220px;
    min-height: 0;
    flex: none;
    border: 4px solid var(--paper);
    border-radius: 22px;
    background-position: center 48%;
  }
  .hero-actor {
    height: 88%;
    left: 43%;
    bottom: 5%;
  }
  .room-tag {
    top: 8px;
    left: 8px;
    font-size: 10px;
    padding: 5px 9px;
  }
  .scene-saying {
    font-size: 10px;
    bottom: 8px;
    left: 8px;
    padding: 5px 9px;
    max-width: 68%;
  }
  .room-hotspot {
    font-size: 10px;
    min-height: 32px;
    padding: 4px 8px;
  }
  .hot-computer {
    top: 45%;
  }
  .hot-files {
    top: 26%;
  }
  .hot-phone {
    bottom: 17%;
  }
  .match {
    padding: 10px 12px;
    margin-top: 7px;
    border-radius: 17px;
    margin-bottom: 9px;
  }
  .match-heading {
    margin-bottom: 6px;
  }
  .match-title {
    font-size: 11px;
  }
  .match-title .icon {
    width: 18px;
    height: 18px;
  }
  .match-next {
    font-size: 9px;
  }
  .stage-step {
    font-size: 9px;
    padding-top: 13px;
  }
  .newsline {
    font-size: 10px;
    line-height: 1.6;
    margin-top: 7px;
  }
  .workbench {
    width: 100%;
    border-radius: 22px 22px 0 0;
    flex: 1;
  }
  .desk-heading {
    padding: 11px 13px 9px;
  }
  .desk-heading h2 {
    font-size: 17px;
    margin-top: 0;
  }
  .desk-heading .eyebrow {
    display: none;
  }
  .desk-heading .pill {
    font-size: 10px;
    padding: 4px 8px;
  }
  .bench-content {
    padding: 10px 11px 6px;
  }
  .tab-intro {
    font-size: 11px;
    line-height: 1.6;
    margin-bottom: 9px;
  }
  .action-card {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 16px;
  }
  .action-symbol {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    margin-right: 8px;
  }
  .action-symbol .icon {
    width: 25px;
    height: 25px;
  }
  .action-info h3 {
    font-size: 12px;
  }
  .action-info p {
    font-size: 10px;
    margin-top: 3px;
  }
  .action-card > .btn {
    min-height: 39px;
    min-width: 60px;
    padding: 7px 10px;
    font-size: 11px;
  }
  .action-info .reward {
    font-size: 10px;
  }
  .nav {
    padding: 6px 4px 5px;
  }
  .nav button {
    min-height: 47px;
    font-size: 10px;
  }
  .nav button .icon {
    width: 21px;
    height: 21px;
    margin-bottom: 2px;
  }
  .footerline {
    font-size: 9px;
    margin: 2px 3px;
    min-height: 21px;
  }
  .footerline button {
    font-size: 9px;
    min-height: 22px;
  }
  .property-card {
    padding: 10px;
  }
  .comic-dialog {
    padding: 10px;
    border-radius: 20px;
    max-width: 500px;
  }
  .comic-top {
    margin-bottom: 7px;
  }
  .comic-heading h2 {
    font-size: 16px;
  }
  .comic-tools .btn.small {
    font-size: 10px;
    padding: 6px 10px;
    min-height: 35px;
  }
  .comic-tools .icon-btn {
    width: 35px;
    height: 35px;
  }
  .comic-grid {
    grid-gap: 7px;
  }
  .comic-caption {
    font-size: 11px;
    line-height: 1.6;
    padding: 6px 7px;
  }
  .choice-button {
    padding: 7px 9px;
    min-height: 49px;
  }
  .choice-button strong {
    font-size: 11px;
  }
  .choice-button small {
    font-size: 9px;
  }
  .choice-letter {
    margin-right: 7px;
  }
  .comic-choice-area {
    padding-top: 8px;
  }
  .receipt {
    font-size: 10px;
    padding: 7px 10px;
  }
  .splash {
    padding: calc(14px + var(--host-top)) 14px calc(14px + var(--host-bottom));
  }
  .splash-card {
    flex-direction: column;
    max-width: 450px;
    border-radius: 28px;
    border-width: 5px;
  }
  .splash-art {
    width: 100%;
    min-height: 0;
    height: 280px;
    flex-shrink: 0;
  }
  .splash-copy {
    width: 100%;
    padding: 20px 22px;
  }
  .splash-copy h1 {
    font-size: 28px;
    line-height: 1.3;
    margin: 13px 0 8px;
  }
  .splash-copy .lead {
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 10px;
  }
  .splash-copy .footnote {
    font-size: 9px;
    margin-top: 12px;
  }
  .splash-copy .btn {
    min-height: 44px;
    margin-top: 7px;
  }
  .splash-paper {
    font-size: 10px;
    left: 14px;
    top: 15px;
    padding: 8px 10px;
  }
  .ending-copy {
    padding: 16px 19px;
  }
  .ending-copy h1 {
    font-size: 25px;
  }
  .ending-copy .quote {
    font-size: 13px;
  }
  .ending-copy p {
    font-size: 11px;
  }
  .ending-actions > .btn {
    font-size: 12px;
    padding: 9px 12px;
  }
  .ending-stats {
    margin: 10px 0;
    padding: 8px 0;
  }
  .ending-stats strong {
    font-size: 15px;
  }
}
@media (max-height: 740px) and (max-width: 799px) {
  .scene {
    height: 166px;
  }
  .match {
    padding: 7px 10px;
    margin-bottom: 7px;
  }
  .newsline {
    display: none;
  }
  .match-heading {
    margin-bottom: 5px;
  }
  .scene-saying {
    max-width: 60%;
    font-size: 9px;
  }
  .room-tag {
    font-size: 9px;
  }
  .hero-actor {
    height: 90%;
  }
  .header {
    margin-bottom: 5px;
  }
  .resourcebar {
    margin-bottom: 4px;
  }
  .wallet strong {
    font-size: 21px;
  }
  .brand h1 {
    font-size: 17px;
  }
  .splash-art {
    height: 220px;
  }
  .splash-copy {
    padding: 15px 19px;
  }
  .splash-copy h1 {
    font-size: 25px;
  }
  .splash-copy .footnote {
    margin-top: 9px;
  }
  .splash-copy .lead {
    line-height: 1.7;
  }
  .splash-points {
    display: none;
  }
  .ending-copy p {
    line-height: 1.65;
  }
  .ending-copy h1 {
    font-size: 22px;
  }
  .ending-copy .quote {
    margin: 7px 0;
  }
  .ending-art {
    min-height: 130px;
  }
}
@media (max-height: 600px) and (max-width: 799px) {
  .shell {
    padding-top: calc(6px + var(--host-top));
  }
  .scene {
    height: 128px;
  }
  .brand-logo {
    display: none;
  }
  .brand h1 {
    font-size: 16px;
  }
  .header-tools .icon-btn {
    width: 32px;
    height: 32px;
  }
  .day-count strong {
    font-size: 19px;
  }
  .day-count {
    padding: 2px 7px;
  }
  .match {
    padding: 6px 9px;
    margin-top: 5px;
    margin-bottom: 6px;
  }
  .match-heading {
    margin-bottom: 3px;
  }
  .stage-step {
    font-size: 8px;
    padding-top: 12px;
  }
  .match-title {
    font-size: 10px;
  }
  .match-title .icon {
    width: 16px;
    height: 16px;
  }
  .room-tag {
    font-size: 8px;
    padding: 4px 7px;
  }
  .room-hotspot {
    min-height: 28px;
    font-size: 9px;
    padding: 3px 7px;
  }
  .room-hotspot .icon {
    width: 14px;
    height: 14px;
  }
  .scene-saying {
    font-size: 8px;
    padding: 4px 7px;
  }
  .nav button {
    min-height: 42px;
    font-size: 9px;
  }
  .nav button .icon {
    width: 19px;
    height: 19px;
  }
  .desk-heading {
    padding: 9px 11px 7px;
  }
  .desk-heading h2 {
    font-size: 15px;
  }
  .wallet strong {
    font-size: 19px;
  }
  .wallet > .icon {
    width: 22px;
    height: 22px;
  }
  .comic-top {
    margin-bottom: 5px;
  }
  .comic-heading h2 {
    font-size: 14px;
  }
  .comic-heading .eyebrow {
    display: none;
  }
  .comic-tools .btn.small {
    font-size: 9px;
    min-height: 32px;
    padding: 6px 8px;
  }
  .comic-tools .icon-btn {
    height: 32px;
    width: 32px;
  }
  .comic-caption {
    font-size: 10px;
    line-height: 1.45;
    min-height: 36px;
    padding: 5px 6px;
  }
  .comic-actor {
    bottom: 40px;
    height: calc(100% - 43px);
  }
  .choice-button {
    min-height: 43px;
    padding: 5px 8px;
    margin-bottom: 5px;
  }
  .choice-button strong {
    font-size: 10px;
  }
  .choice-button small {
    font-size: 8px;
  }
  .choice-button .choice-letter {
    width: 22px;
    height: 22px;
    font-size: 11px;
    margin-right: 6px;
  }
  .choice-prompt {
    font-size: 10px;
    margin-bottom: 5px;
  }
  .director-status {
    font-size: 9px;
    min-height: 17px;
    padding: 2px;
  }
  .comic-choice-area {
    padding-top: 6px;
  }
  .receipt {
    font-size: 9px;
    padding: 5px 8px;
    margin-bottom: 5px;
  }
  .comic-choice-area .btn {
    min-height: 39px;
    padding: 8px 15px;
    font-size: 12px;
  }
  .splash-art {
    height: 170px;
  }
  .splash-copy {
    padding: 11px 17px;
  }
  .splash-copy h1 {
    font-size: 23px;
    margin: 10px 0 6px;
  }
  .splash-copy .lead {
    font-size: 11px;
    margin-bottom: 6px;
  }
  .splash-copy .footnote {
    font-size: 8px;
    margin-top: 8px;
  }
  .splash-copy .btn {
    min-height: 40px;
    font-size: 12px;
    padding: 8px 12px;
  }
  .ending-copy {
    padding: 12px 16px;
  }
  .ending-copy .eyebrow {
    font-size: 8px;
  }
  .ending-copy h1 {
    font-size: 20px;
  }
  .ending-copy p {
    font-size: 10px;
  }
  .ending-stats {
    margin: 7px 0;
    padding: 6px 0;
  }
  .ending-copy .quote {
    font-size: 12px;
    margin: 6px 0;
  }
  .ending-actions .btn {
    min-height: 40px;
  }
  .ending-foot {
    font-size: 8px;
    margin-top: 6px;
  }
  .dialog {
    padding: 22px;
  }
  .dialog h2 {
    font-size: 18px;
  }
  .dialog p {
    font-size: 11px;
    line-height: 1.7;
  }
  .dialog .dialog-actions {
    margin-top: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
[hidden] {
  display: none !important;
}
.game-shell {
  width: 100%;
  height: 100vh;
  height: var(--app-height,100vh);
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #dac69a;
}
.game-stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(./assets/room.webp) center/cover;
  overflow: hidden;
}
.room-light {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 35%;
  background:
    linear-gradient(
      rgba(251, 248, 227, 0.9098),
      rgba(251, 248, 227, 0.4784),
      transparent);
  pointer-events: none;
}
.game-stage:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: linear-gradient(transparent, rgba(101, 67, 33, 0.349));
  pointer-events: none;
}
.game-header {
  position: relative;
  z-index: 4;
  padding: calc(22px + var(--host-top)) 25px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.game-header .header-tools,
.game-header .brand {
  pointer-events: auto;
}
.game-header .brand {
  background: rgba(255, 253, 243, 0.9098);
  padding: 8px 13px 8px 9px;
  border: 1px solid #e1d3b0;
  border-radius: 23px;
}
.game-header .brand h1 {
  font-size: 21px;
}
.game-header .brand-logo {
  background: #e9efdb;
  margin-right: 8px;
}
.field-resources {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 26px 0;
  pointer-events: none;
}
.field-resources .wallet {
  background: rgba(255, 253, 243, 0.9373);
  border: 1px solid #dfcdab;
  padding: 8px 14px;
  border-radius: 50px;
  pointer-events: auto;
}
.field-resources .wallet strong {
  font-size: 27px;
}
.field-resources .rent-label {
  background: rgba(241, 245, 223, 0.9294);
  border-style: solid;
  font-size: 12px;
  padding: 10px 14px;
  pointer-events: auto;
}
.race-badge {
  position: absolute;
  top: calc(175px + var(--host-top));
  left: 27px;
  z-index: 4;
  border-radius: 20px;
  padding: 11px 14px;
  background: rgba(239, 243, 220, 0.9294);
  border: 1px solid #b2c49c;
  display: flex;
  align-items: center;
  text-align: left;
  color: var(--mint-dark);
  min-height: 65px;
  max-width: 365px;
}
.race-icon {
  margin-right: 10px;
}
.race-icon .icon {
  width: 31px;
  height: 31px;
}
.race-badge strong {
  display: block;
  font-size: 14px;
}
.race-badge small {
  font-size: 11px;
  display: block;
  margin-top: 4px;
}
.race-form {
  font-size: 10px;
  line-height: 1.6;
  border-left: 1px solid #bdcba8;
  margin-left: 20px;
  padding-left: 16px;
  text-align: center;
}
.place-label {
  position: absolute;
  z-index: 2;
  left: 27px;
  bottom: calc(185px + var(--host-bottom));
  font-size: 12px;
  background: rgba(255, 253, 243, 0.8706);
  border: 1px solid #ddc8a3;
  border-radius: 50px;
  padding: 8px 13px;
}
.place-label .icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
.stage-actor {
  position: absolute;
  z-index: 2;
  height: 48%;
  width: auto;
  left: 54%;
  bottom: 17%;
  transform: translateX(-50%);
  filter: drop-shadow(0 9px 4px rgba(101, 67, 33, 0.2078));
  transform-origin: 50% 95%;
  animation: stageBreathe 5s ease-in-out infinite;
}
.game-stage .room-hotspot {
  font-size: 12px;
  min-height: 42px;
  padding: 8px 13px;
  background: rgba(255, 253, 243, 0.9294);
  border: 1px solid #c7af85;
}
.field-computer {
  left: 9%;
  top: 48%;
}
.field-files {
  right: 10%;
  top: 39%;
}
.field-phone {
  right: 12%;
  bottom: 28%;
}
.actor-thought {
  position: absolute;
  z-index: 3;
  left: 54%;
  bottom: calc(65% + 10px);
  transform: translateX(-50%) rotate(-3deg);
  font-size: 12px;
  white-space: nowrap;
  padding: 10px 16px;
  background: var(--paper);
  border-radius: 20px;
  border: 1px solid #d4bd95;
}
.actor-thought:after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 47%;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border-right: 1px solid #d4bd95;
  border-bottom: 1px solid #d4bd95;
  transform: rotate(45deg);
}
.field-dock {
  position: absolute;
  z-index: 12;
  bottom: calc(31px + var(--host-bottom));
  left: 50%;
  width: 480px;
  transform: translateX(-50%);
}
.field-dock .nav {
  border: 1px solid #d4c39c;
  background: rgba(249, 245, 228, 0.9608);
  border-radius: 25px;
  padding: 8px;
  min-height: 75px;
}
.field-dock .nav button {
  font-size: 12px;
  min-height: 56px;
  color: var(--animal-text);
}
.field-dock .nav button.active {
  background: #e1efdd;
  color: var(--mint-dark);
}
.field-dock .nav button .icon {
  width: 28px;
  height: 28px;
}
.journey-note {
  background: rgba(255, 253, 243, 0.949);
  border: 1px solid #d6c49b;
  border-radius: 50px;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  margin: 0 auto 10px;
  min-height: 43px;
  font-size: 12px;
  color: var(--animal-text);
  font-weight: 800;
}
.journey-note .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.journey-note .icon:last-child {
  margin: 0 0 0 11px;
  width: 17px;
  height: 17px;
}
.field-footer {
  position: absolute;
  z-index: 13;
  bottom: calc(4px + var(--host-bottom));
  left: 25px;
  right: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--paper);
  font-size: 10px;
  text-shadow: 0 1px 2px #54331c;
}
.field-footer button {
  font-size: 10px;
  min-height: 25px;
  color: var(--paper);
  text-decoration: underline;
}
.field-footer .save-error {
  color: #fff0a6;
}
.drawer-scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  background: rgba(84, 57, 31, 0.2);
  border-radius: 12px;
}
.scene-drawer {
  position: absolute;
  right: 25px;
  top: calc(160px + var(--host-top));
  bottom: calc(124px + var(--host-bottom));
  left: auto;
  width: 370px;
  z-index: 10;
  background: var(--paper);
  border-radius: 25px;
  border: 2px solid #dfd0aa;
  animation: drawerIn .25s var(--animal-ease);
  min-height: 0;
}
.scene-drawer .desk-heading {
  align-items: center;
  padding: 13px 15px;
}
.scene-drawer .desk-heading h2 {
  font-size: 18px;
}
.scene-drawer .desk-heading .icon-btn {
  height: 35px;
  width: 35px;
}
.scene-drawer .bench-content {
  padding: 13px 14px;
}
.scene-drawer .desk-heading .eyebrow {
  font-size: 8px;
}
.scene-drawer .action-symbol {
  width: 36px;
  height: 36px;
}
.scene-drawer .action-card {
  padding: 11px 10px;
}
.scene-drawer .action-info h3 {
  font-size: 12px;
}
.scene-drawer .action-info p {
  font-size: 10px;
}
.scene-drawer .action-card > .btn {
  min-width: 61px;
  padding: 8px 10px;
  font-size: 11px;
}
.cinema-overlay {
  background: #4c3924;
  padding: calc(12px + var(--host-top)) 12px calc(12px + var(--host-bottom));
}
.cinema-dialog {
  height: 100%;
  width: 100%;
  max-width: 600px;
  max-height: 1080px;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 12px;
  background: var(--animal-bg-content);
  border-radius: 25px;
}
.cinema-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 10px;
}
.cinema-header h2 {
  font-size: 20px;
  margin-top: 4px;
}
.cinema-header .eyebrow {
  font-size: 9px;
  letter-spacing: 1px;
}
.cinema-header .comic-tools .btn {
  font-size: 11px;
  min-height: 37px;
  padding: 7px 12px;
}
.cinema-header .icon-btn {
  height: 37px;
  width: 37px;
}
.cinema-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #d7c5a0;
  border: 2px solid #bda582;
}
.cinema-shot {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity .35s var(--animal-ease);
  overflow: hidden;
  pointer-events: none;
}
.cinema-shot.shot-live {
  opacity: 1;
  z-index: 2;
}
.cinema-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.035);
}
.shot-live.camera-push .cinema-art {
  animation: cinemaPush 3.3s linear both;
}
.shot-live.camera-pull .cinema-art {
  animation: cinemaPull 3.3s linear both;
}
.cinema-vignette {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 43%;
  background: linear-gradient(transparent, rgba(59, 40, 21, .65));
  pointer-events: none;
}
.cinema-caption {
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 20px;
  z-index: 3;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s var(--animal-ease), transform .25s var(--animal-ease);
}
.spoken .cinema-caption {
  opacity: 1;
  transform: translateY(0);
}
.cinema-caption > span {
  display: inline-block;
  background: rgba(234, 240, 219, 0.9373);
  color: var(--mint-dark);
  border-radius: 50px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 8px;
}
.cinema-caption p {
  padding: 13px 15px;
  border: 1px solid #e4d2ad;
  border-radius: 18px;
  background: rgba(255, 253, 243, 0.949);
  font-size: 14px;
  line-height: 1.9;
  color: var(--animal-text);
  font-weight: 700;
}
.cinema-corner {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  letter-spacing: 1px;
  font-size: 9px;
  background: rgba(255, 253, 243, 0.8314);
  border-radius: 50px;
  padding: 5px 9px;
  color: var(--animal-text-muted);
}
.cinema-bottom {
  flex-shrink: 0;
  padding-top: 10px;
}
.shot-progress {
  display: flex;
  align-items: center;
  padding: 0 4px 9px;
}
.shot-progress > span {
  flex: 1;
  margin-right: 8px;
  height: 5px;
  border-radius: 10px;
  background: #d9cfb4;
  position: relative;
}
.shot-progress > span:last-child {
  margin-right: 0;
}
.shot-progress > span.seen {
  background: var(--animal-primary);
}
.shot-progress b {
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  font-size: 0;
}
.cinema-actions {
  display: flex;
  align-items: center;
}
.cinema-actions .btn {
  margin-right: 8px;
  font-size: 12px;
}
.cinema-actions .btn:first-child {
  width: 30%;
  padding: 9px 10px;
}
.cinema-actions .btn:last-child {
  flex: 1;
  margin-right: 0;
}
.cinema-stage.overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 4px;
  background: var(--animal-bg-content);
  padding: 0;
}
.cinema-stage.overview .cinema-shot {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  opacity: 1;
  min-width: 0;
  min-height: 0;
}
.cinema-stage.overview .cinema-art {
  animation: none !important;
  transform: none;
}
.cinema-stage.overview .cinema-caption {
  left: 5px;
  right: 5px;
  bottom: 5px;
  opacity: 1;
  transform: none;
}
.cinema-stage.overview .cinema-caption > span {
  font-size: 8px;
  padding: 3px 6px;
  margin-bottom: 4px;
}
.cinema-stage.overview .cinema-caption p {
  font-size: 10px;
  line-height: 1.6;
  padding: 7px;
  border-radius: 12px;
}
.cinema-stage.overview .cinema-corner {
  display: none;
}
@keyframes stageBreathe {
  0%, 100% {
    transform: translateX(-50%) translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateX(-50%) translateY(-4px) rotate(1deg);
  }
}
@keyframes drawerIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cinemaPush {
  from {
    transform: scale(1.015) translateY(0);
  }
  to {
    transform: scale(1.085) translateY(-1%);
  }
}
@keyframes cinemaPull {
  from {
    transform: scale(1.085) translateY(-1%);
  }
  to {
    transform: scale(1.015) translateY(0);
  }
}
@media (max-width: 799px) {
  .game-header {
    padding: calc(12px + var(--host-top)) 12px 0;
  }
  .game-header .brand {
    border-radius: 18px;
    padding: 7px 9px 7px 7px;
  }
  .game-header .brand h1 {
    font-size: 17px;
  }
  .game-header .brand-logo {
    width: 28px;
    height: 28px;
    margin-right: 5px;
  }
  .game-header .brand-logo .icon {
    width: 22px;
    height: 22px;
  }
  .game-header .brand .eyebrow {
    font-size: 6px;
    letter-spacing: 1.1px;
  }
  .game-header .day-count {
    background: rgba(255, 253, 243, 0.9294);
    padding: 7px 8px;
  }
  .game-header .day-count strong {
    font-size: 23px;
  }
  .game-header .icon-btn {
    width: 38px;
    height: 38px;
    background: rgba(255, 253, 243, 0.9294);
  }
  .game-header .header-tools > * {
    margin-left: 5px;
  }
  .field-resources {
    margin: 9px 15px 0;
  }
  .field-resources .wallet {
    padding: 6px 10px;
  }
  .field-resources .wallet strong {
    font-size: 23px;
  }
  .field-resources .wallet .icon {
    width: 24px;
    height: 24px;
  }
  .field-resources .rent-label {
    font-size: 10px;
    padding: 8px 11px;
  }
  .race-badge {
    top: calc(124px + var(--host-top));
    left: 15px;
    padding: 8px 11px;
    min-height: 56px;
    border-radius: 18px;
    max-width: calc(100% - 30px);
  }
  .race-icon {
    margin-right: 7px;
  }
  .race-icon .icon {
    width: 25px;
    height: 25px;
  }
  .race-badge strong {
    font-size: 12px;
  }
  .race-badge small {
    font-size: 9px;
  }
  .race-form {
    font-size: 9px;
    line-height: 1.6;
    margin-left: 17px;
    padding-left: 12px;
  }
  .stage-actor {
    height: 43%;
    left: 51%;
    bottom: 20%;
  }
  .game-stage .room-hotspot {
    font-size: 11px;
    min-height: 37px;
    padding: 7px 10px;
  }
  .game-stage .room-hotspot .icon {
    width: 19px;
    height: 19px;
  }
  .field-computer {
    top: 41%;
    left: 5%;
  }
  .field-files {
    top: 34%;
    right: 5%;
  }
  .field-phone {
    bottom: 30%;
    right: 4%;
  }
  .place-label {
    left: 14px;
    bottom: calc(147px + var(--host-bottom));
    font-size: 10px;
    padding: 6px 10px;
  }
  .place-label .icon {
    width: 17px;
    height: 17px;
    margin-right: 4px;
  }
  .actor-thought {
    font-size: 11px;
    left: 51%;
    bottom: calc(63% + 8px);
    padding: 8px 12px;
  }
  .field-dock {
    left: 12px;
    right: 12px;
    bottom: calc(27px + var(--host-bottom));
    transform: none;
    width: auto;
  }
  .field-dock .nav {
    padding: 7px 5px;
    border-radius: 22px;
    min-height: 64px;
  }
  .field-dock .nav button {
    font-size: 11px;
    min-height: 48px;
    border-radius: 15px;
  }
  .field-dock .nav button .icon {
    width: 25px;
    height: 25px;
    margin-bottom: 3px;
  }
  .journey-note {
    font-size: 10px;
    min-height: 36px;
    padding: 8px 11px;
    margin-bottom: 8px;
  }
  .journey-note .icon {
    width: 18px;
    height: 18px;
    margin-right: 6px;
  }
  .journey-note .icon:last-child {
    width: 15px;
    height: 15px;
    margin-left: 9px;
  }
  .field-footer {
    left: 13px;
    right: 13px;
    bottom: calc(2px + var(--host-bottom));
    font-size: 8px;
  }
  .field-footer button {
    font-size: 8px;
    min-height: 22px;
  }
  .scene-drawer {
    top: auto;
    bottom: calc(100px + var(--host-bottom));
    height: 58%;
    max-height: 580px;
    left: 12px;
    right: 12px;
    width: auto;
    border-radius: 24px;
  }
  .scene-drawer .desk-heading {
    padding: 12px 13px 10px;
  }
  .scene-drawer .desk-heading h2 {
    font-size: 17px;
  }
  .scene-drawer .bench-content {
    padding: 12px;
  }
  .scene-drawer .desk-heading .eyebrow {
    display: block;
    font-size: 8px;
    line-height: 1.6;
  }
  .scene-drawer .action-info p {
    font-size: 10px;
  }
  .scene-drawer .tab-intro {
    font-size: 11px;
    line-height: 1.8;
  }
  .cinema-dialog {
    max-width: 500px;
    padding: 10px;
    border-radius: 22px;
  }
  .cinema-header {
    margin-bottom: 8px;
  }
  .cinema-header h2 {
    font-size: 16px;
  }
  .cinema-header .eyebrow {
    font-size: 7px;
    letter-spacing: .7px;
  }
  .cinema-header .comic-tools .btn {
    font-size: 9px;
    padding: 6px 9px;
    min-height: 34px;
  }
  .cinema-header .icon-btn {
    width: 34px;
    height: 34px;
  }
  .cinema-caption {
    left: 12px;
    right: 12px;
    bottom: 14px;
  }
  .cinema-caption p {
    font-size: 12px;
    line-height: 1.85;
    padding: 11px 13px;
  }
  .cinema-caption > span {
    font-size: 9px;
    margin-bottom: 6px;
  }
  .cinema-bottom {
    padding-top: 8px;
  }
  .cinema-actions .btn {
    font-size: 11px;
    min-height: 42px;
    padding: 9px 10px;
  }
  .cinema-stage.overview .cinema-caption p {
    font-size: 9px;
    padding: 6px;
  }
}
@media (max-width: 799px) and (max-height: 650px) {
  .game-header {
    padding-top: calc(8px + var(--host-top));
  }
  .game-header .brand {
    padding: 6px 8px;
  }
  .game-header .brand-logo {
    display: none;
  }
  .game-header .brand h1 {
    font-size: 15px;
  }
  .game-header .brand .eyebrow {
    font-size: 6px;
  }
  .game-header .day-count {
    padding: 4px 7px;
  }
  .game-header .day-count strong {
    font-size: 21px;
  }
  .game-header .icon-btn {
    width: 34px;
    height: 34px;
  }
  .field-resources {
    margin-top: 7px;
  }
  .field-resources .wallet {
    padding: 5px 9px;
  }
  .field-resources .wallet strong {
    font-size: 20px;
  }
  .field-resources .wallet .icon {
    width: 21px;
    height: 21px;
  }
  .field-resources .rent-label {
    font-size: 9px;
    padding: 6px 9px;
  }
  .race-badge {
    top: calc(108px + var(--host-top));
    min-height: 48px;
    padding: 6px 9px;
  }
  .race-badge strong {
    font-size: 11px;
  }
  .race-badge small {
    font-size: 8px;
    margin-top: 3px;
  }
  .race-icon .icon {
    width: 22px;
    height: 22px;
  }
  .race-form {
    font-size: 8px;
  }
  .stage-actor {
    height: 40%;
    bottom: 23%;
    left: 51%;
  }
  .actor-thought {
    bottom: calc(63% + 5px);
    font-size: 9px;
    padding: 7px 11px;
  }
  .game-stage .room-hotspot {
    font-size: 9px;
    min-height: 32px;
    padding: 5px 8px;
  }
  .game-stage .room-hotspot .icon {
    width: 16px;
    height: 16px;
  }
  .field-computer {
    top: 42%;
    left: 4%;
  }
  .field-files {
    top: 36%;
    right: 4%;
  }
  .field-phone {
    bottom: 28%;
    right: 4%;
  }
  .place-label {
    bottom: calc(133px + var(--host-bottom));
    font-size: 9px;
    padding: 5px 8px;
  }
  .field-dock {
    bottom: calc(24px + var(--host-bottom));
  }
  .field-dock .nav {
    min-height: 58px;
    padding: 6px 4px;
  }
  .field-dock .nav button {
    font-size: 10px;
    min-height: 44px;
  }
  .field-dock .nav button .icon {
    width: 23px;
    height: 23px;
  }
  .journey-note {
    font-size: 9px;
    min-height: 31px;
    padding: 6px 9px;
    margin-bottom: 6px;
  }
  .scene-drawer {
    bottom: calc(91px + var(--host-bottom));
    height: 61%;
  }
  .scene-drawer .desk-heading {
    padding: 9px 11px;
  }
  .scene-drawer .desk-heading h2 {
    font-size: 15px;
  }
  .scene-drawer .desk-heading .eyebrow {
    font-size: 7px;
  }
  .scene-drawer .desk-heading .icon-btn {
    width: 31px;
    height: 31px;
  }
  .scene-drawer .bench-content {
    padding: 10px;
  }
  .cinema-header h2 {
    font-size: 13px;
    margin-top: 3px;
  }
  .cinema-header .eyebrow {
    font-size: 6px;
    letter-spacing: 0;
  }
  .cinema-header .comic-tools .btn {
    font-size: 8px;
    padding: 5px 7px;
    min-height: 31px;
  }
  .cinema-header .icon-btn {
    width: 30px;
    height: 30px;
  }
  .cinema-caption {
    left: 9px;
    right: 9px;
    bottom: 11px;
  }
  .cinema-caption p {
    font-size: 10px;
    line-height: 1.8;
    padding: 9px 10px;
  }
  .cinema-caption > span {
    font-size: 8px;
    padding: 4px 8px;
  }
  .cinema-corner {
    font-size: 7px;
    top: 8px;
    right: 8px;
    padding: 4px 7px;
  }
  .cinema-actions .btn {
    min-height: 37px;
    font-size: 10px;
    padding: 7px 9px;
  }
  .cinema-bottom .director-status {
    font-size: 8px;
    min-height: 16px;
  }
  .cinema-stage.overview .cinema-caption {
    left: 4px;
    right: 4px;
    bottom: 4px;
  }
  .cinema-stage.overview .cinema-caption p {
    font-size: 7px;
    padding: 4px;
    line-height: 1.55;
  }
  .cinema-stage.overview .cinema-caption > span {
    font-size: 6px;
    margin-bottom: 3px;
    padding: 2px 5px;
  }
}
@media (max-width: 799px) {
  .game-stage {
    background-image: url(./assets/room-portrait.webp);
    background-position: center 60%;
  }
}
.ending-replay {
  display: flex;
  margin: 6px auto 0;
  min-height: 32px !important;
  padding: 4px 10px !important;
  border: 0;
  text-decoration: underline;
  color: var(--mint-dark);
  font-size: 10px !important;
  background: none;
}
.icon-btn {
  min-width: 40px;
  min-height: 40px;
}
.author-gift {
  position: absolute;
  z-index: 4;
  right: 27px;
  top: calc(175px + var(--host-top));
  display: flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid #d8c198;
  padding: 9px 13px;
  border-radius: 50px;
  min-height: 43px;
  font-size: 11px;
  font-weight: 800;
  color: var(--animal-text);
}
.gift-symbol {
  width: 27px;
  height: 27px;
  background: #f8e6c8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 7px;
}
.gift-symbol .icon {
  width: 22px;
  height: 22px;
}
.room-pet {
  position: absolute;
  z-index: 3;
  left: 34%;
  bottom: 18%;
  width: 105px;
  height: 112px;
  border-radius: 18px;
  transform: rotate(-2deg);
  transition: transform .25s var(--animal-ease);
  background: none;
  padding: 0;
}
.room-pet .pet-pose {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  animation: petPose 16s steps(1, end) infinite;
}
.room-pet .pose-1 {
  animation-delay: 4s;
}
.room-pet .pose-2 {
  animation-delay: 8s;
}
.room-pet .pose-3 {
  animation-delay: 12s;
}
.room-pet > span {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  background: rgba(255, 253, 243, 0.9098);
  border: 1px solid #d6c29c;
  border-radius: 50px;
  white-space: nowrap;
  padding: 3px 8px;
  color: var(--animal-text);
  opacity: 0;
  transition: opacity .2s var(--animal-ease);
}
.room-pet:hover > span,
.room-pet:focus > span,
.room-pet.petted > span {
  opacity: 1;
}
.room-pet.petted {
  transform: translateY(-5px) rotate(3deg);
}
.adoption-art {
  height: 180px;
  position: relative;
  margin: 1px auto 7px;
  width: 100%;
  background:
    radial-gradient(
      ellipse at center,
      #f8e9c7 0,
      transparent 68%);
}
.adoption-cat {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.adoption-copy {
  text-align: center;
}
.adoption-copy h3 {
  font-size: 19px;
  margin: 8px 0 5px;
}
.adoption-copy p {
  font-size: 12px;
  line-height: 1.8;
}
.adoption-copy p.muted {
  font-size: 10px;
  line-height: 1.7;
  margin-top: 6px;
}
.pet-dialog .dialog-actions .btn {
  font-size: 12px;
  min-height: 43px;
  margin-bottom: 6px;
}
.pet-dialog .dialog-actions {
  margin-top: 13px;
}
.pet-dialog {
  max-width: 410px;
}
.page-hidden * {
  animation-play-state: paused !important;
}
.reduced .room-pet .pet-pose {
  opacity: 0;
}
.reduced .room-pet .pose-0 {
  opacity: 1;
}
@keyframes petPose {
  0%, 24.99% {
    opacity: 1;
  }
  25%, 100% {
    opacity: 0;
  }
}
@media (max-width: 799px) {
  .author-gift {
    top: calc(190px + var(--host-top));
    right: 15px;
    padding: 6px 10px;
    min-height: 36px;
    font-size: 9px;
  }
  .gift-symbol {
    width: 23px;
    height: 23px;
    margin-right: 5px;
  }
  .gift-symbol .icon {
    width: 19px;
    height: 19px;
  }
  .room-pet {
    width: 84px;
    height: 88px;
    left: 12%;
    bottom: 26%;
  }
  .pet-dialog .adoption-art {
    height: 155px;
  }
  .pet-dialog .adoption-copy p {
    font-size: 11px;
  }
  .pet-dialog .adoption-copy p.muted {
    font-size: 9px;
  }
  .pet-dialog .adoption-copy h3 {
    font-size: 18px;
  }
}
@media (max-width: 799px) and (max-height: 650px) {
  .author-gift {
    top: calc(163px + var(--host-top));
    right: 14px;
    min-height: 32px;
    font-size: 8px;
    padding: 5px 8px;
  }
  .gift-symbol {
    width: 21px;
    height: 21px;
    margin-right: 4px;
  }
  .gift-symbol .icon {
    width: 17px;
    height: 17px;
  }
  .room-pet {
    width: 69px;
    height: 74px;
    left: 9%;
    bottom: 30%;
  }
  .pet-dialog {
    padding: 20px 23px;
  }
  .pet-dialog header {
    margin-bottom: 5px;
  }
  .pet-dialog h2 {
    font-size: 17px;
  }
  .pet-dialog .adoption-art {
    height: 119px;
    margin-bottom: 2px;
  }
  .pet-dialog .adoption-copy h3 {
    font-size: 16px;
    margin: 5px 0 3px;
  }
  .pet-dialog .adoption-copy p {
    font-size: 10px;
    line-height: 1.65;
  }
  .pet-dialog .adoption-copy p.muted {
    font-size: 9px;
    line-height: 1.6;
    margin-top: 4px;
  }
  .pet-dialog .dialog-actions {
    margin-top: 8px;
  }
  .pet-dialog .dialog-actions .btn {
    min-height: 39px;
    font-size: 11px;
    margin-bottom: 4px;
    padding: 8px 12px;
  }
}

/* Toy adds an explicit relation refresh control; keep all three actions visible. */
@media(max-width:799px) and (max-height:560px){
  .pet-dialog .adoption-art{height:92px}
  .pet-dialog{padding-top:18px;padding-bottom:18px}
}

.ending-share{width:100%;margin-top:10px;background:#287e72;color:#fff9e8;border-color:#1c685f;box-shadow:0 4px 0 #185a51;font-size:14px}.ending-share small{display:block;font-size:10px;font-weight:400;margin-top:3px;opacity:.9}.challenge-comparison{display:flex;flex-direction:column;background:#e8eddc;border-radius:14px;padding:10px 13px;margin:9px 0;font-size:10px;line-height:1.7;color:#6a4c2c}.challenge-comparison b{color:#277f73}.toy-share-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(48,38,26,.72);padding:calc(12px + var(--host-top,0px)) 12px calc(12px + var(--host-bottom,0px));box-sizing:border-box}.toy-share-dialog{width:460px;max-width:100%;max-height:100%;display:flex;flex-direction:column;background:#fffaf0;border:3px solid #e4dab7;border-radius:26px;padding:15px;box-shadow:0 15px 60px rgba(32,27,16,.25);color:#6a4c2c;box-sizing:border-box}.toy-share-dialog header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.toy-share-dialog h2{font-size:21px;margin:3px 0 9px}.toy-share-dialog header .icon-btn{width:34px;height:34px;font-size:24px;align-self:flex-start}.toy-share-preview{min-height:0;flex:1;display:flex;justify-content:center;align-items:center;position:relative;margin-top:5px;overflow:auto}.toy-share-preview img{display:block;width:auto;max-width:100%;max-height:min(53vh,520px);height:auto;object-fit:contain;box-shadow:0 3px 12px rgba(80,57,25,.13)}.toy-share-preview img[hidden],.toy-share-preview span[hidden]{display:none}.toy-share-caption{font-size:12px;text-align:center;margin:9px 0;flex-shrink:0;font-weight:700}.toy-share-controls{display:flex;flex-wrap:wrap;justify-content:center;flex-shrink:0;margin:0 -3px}.toy-share-controls>.btn{font-size:11px;min-height:40px;padding:8px 10px;margin:3px;flex:1;white-space:nowrap}.share-link{width:100%;box-sizing:border-box;border:1px solid #ded7bd;background:#f7f2e2;border-radius:8px;padding:7px;margin-top:8px;font-size:10px;color:#6a4c2c;flex-shrink:0}.toy-share-dialog #share-notice{font-size:10px;line-height:1.6;margin:7px 0 0;min-height:16px;flex-shrink:0;text-align:center}.challenge-splash{height:var(--app-height,100vh);box-sizing:border-box;padding:calc(14px + var(--host-top,0px)) 15px calc(14px + var(--host-bottom,0px));display:flex;align-items:center;justify-content:center;background:#ecefdc}.challenge-card{box-sizing:border-box;max-width:430px;width:100%;max-height:100%;background:#fffaf0;border:3px solid #e0dabd;border-radius:30px;text-align:center;padding:24px;color:#6a4c2c;overflow:auto}.challenge-actor{display:block;height:210px;width:100%;object-fit:contain;margin:8px auto}.challenge-card h1{font-size:26px;margin:12px 0;line-height:1.4}.challenge-quote{color:#277f73;font-size:14px;font-weight:700;line-height:1.6;margin:9px 0}.challenge-record{background:#e8eddc;border-radius:14px;padding:10px;display:flex;flex-direction:column;line-height:1.8;font-size:12px}.challenge-description{font-size:12px;line-height:1.8;margin:12px 0}.challenge-card .btn{margin-top:9px;font-size:13px}.challenge-card small{display:block;font-size:9px;line-height:1.7;color:#908368;margin-top:12px}.challenge-confirm .dialog-body p{font-size:12px}.challenge-in-progress{color:#277f73;font-size:11px;text-align:center;margin:5px 0}
@media(max-height:680px){.challenge-card{padding:15px}.challenge-actor{height:115px;margin:3px auto}.challenge-card h1{font-size:21px;margin:7px 0}.challenge-quote{font-size:12px;margin:6px 0}.challenge-description{font-size:11px;margin:7px 0}.challenge-card .btn{min-height:39px;padding:7px 10px;margin-top:6px}.challenge-record{padding:5px}.challenge-card small{margin-top:8px}.toy-share-dialog{padding:12px}.toy-share-dialog h2{font-size:18px}.toy-share-preview img{max-height:45vh}.toy-share-controls>.btn{font-size:10px;min-height:35px;padding:6px}.toy-share-caption{font-size:10px;margin:6px 0}.share-link{padding:5px;margin-top:6px}.toy-share-dialog #share-notice{font-size:9px;margin-top:5px}.ending-share{font-size:12px;min-height:38px;margin-top:6px}}
@media(max-height:510px){.challenge-actor{height:65px}.challenge-card h1{font-size:18px}.challenge-card>.pill{font-size:10px}.challenge-card small{font-size:8px}.challenge-description{font-size:10px;margin:4px 0}.challenge-card{padding:10px}.challenge-quote{font-size:11px}.challenge-card .btn{min-height:34px;font-size:11px}.toy-share-preview img{max-height:39vh}.toy-share-dialog .eyebrow{display:none}.toy-share-dialog h2{margin-bottom:4px}.toy-share-caption{margin:5px 0}}

.series-card{position:relative;margin:12px 0 0;text-align:left;font-family:inherit;color:#79512f}
.series-link{display:flex;align-items:center;min-height:48px;padding:10px 13px;border:1px solid #c9d7bd;border-radius:17px;background:#edf3df;color:#366f60;text-decoration:none;box-shadow:0 2px 0 #cfdbc4}
.series-link:focus{outline:3px solid #efb94e;outline-offset:2px}.series-link:hover{background:#e4eed3}
.series-tag{font-size:9px;white-space:nowrap;padding:4px 7px;border-radius:8px;background:#d4e5c8;margin-right:9px}
.series-copy{flex:1;min-width:0}.series-copy strong{display:block;font-size:12px;line-height:1.5}.series-copy small{display:block;font-size:10px;line-height:1.55;color:#78836b;margin-top:3px}
.series-arrow{font-size:20px;margin-left:10px}.series-thumb{width:48px;height:48px;border-radius:12px;object-fit:cover;margin-right:12px;flex-shrink:0}
.series-status:empty{display:none}.series-status{display:block;margin:7px 4px 0;font-size:10px;line-height:1.5;color:#86613b}
.series-ending{margin-top:16px}.series-ending .series-link{min-height:68px}


.sound-entry{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 14px;border:1px solid #d5d8be;border-radius:24px;background:#f9f6e8;color:#537264;font:700 12px 'Microsoft YaHei',sans-serif;cursor:pointer;vertical-align:middle;margin:8px 0;flex-shrink:0}
.sound-entry svg,.friend-primary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sound-entry svg ellipse{fill:currentColor;stroke:none}
.friend-invite{box-sizing:border-box;text-align:left;margin:14px 0;padding:16px;border:1px solid #cbd8b9;border-radius:22px;background:#eef2de;color:#79512e}.friend-eyebrow{font-size:10px;letter-spacing:1px;color:#267e6c;font-weight:800}.friend-invite h2{font-size:19px;line-height:1.5;margin:5px 0}.friend-invite p{font-size:12px;line-height:1.75;margin:4px 0 12px;color:#7c7257}
.friend-primary{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;min-height:50px;padding:11px 16px;background:#287e70;color:#fff9e8;border:1px solid #236e60;box-shadow:0 4px 0 #195b4f;border-radius:24px;font:800 14px 'Microsoft YaHei',sans-serif;cursor:pointer;text-align:center}.friend-primary:active{transform:translateY(2px);box-shadow:0 2px 0 #195b4f}.friend-primary small{display:block;font-size:10px;line-height:1.6;font-weight:400;opacity:.9;margin-top:2px}.friend-primary:disabled{opacity:.6;cursor:wait}
.sound-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1600;box-sizing:border-box;padding:calc(12px + var(--host-top,0px)) 12px calc(12px + var(--host-bottom,0px));display:flex;align-items:center;justify-content:center;background:rgba(46,39,26,.66)}
.sound-dialog{box-sizing:border-box;width:420px;max-width:100%;max-height:100%;overflow:auto;overscroll-behavior:contain;background:#fffaf0;border:3px solid #dfd5b4;border-radius:27px;padding:19px;color:#79512e;font:14px 'Microsoft YaHei',sans-serif;box-shadow:0 18px 64px #201a1640}.sound-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}.sound-dialog h2{font-size:23px;margin:0;line-height:1.5}.sound-close{min-width:40px;min-height:40px;background:#f4edd9;border:1px solid #dfd5b4;border-radius:50%;font-size:26px;color:#79512e;cursor:pointer}.sound-intro{font-size:13px;line-height:1.8;margin:11px 0;color:#7d7056}.sound-help{font-size:11px;line-height:1.8;color:#908365;margin:10px 0}.sound-setting{border-top:1px dashed #ddd2b0;padding:17px 0 10px}.sound-setting>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px}.sound-setting label{font-weight:800}.sound-setting button{font:700 12px 'Microsoft YaHei',sans-serif;min-height:36px;padding:6px 13px;border-radius:20px;border:1px solid #d7cfb5;color:#8d7b61;background:#f3eedf}.sound-setting button[aria-checked=true]{background:#deebcf;color:#267766;border-color:#bad1b1}.sound-range{display:flex;align-items:center;gap:12px;margin-top:12px}.sound-range input{accent-color:#287e70;width:100%;min-height:32px;min-width:0}.sound-range output{font-size:12px;min-width:36px;text-align:right}.sound-dialog>.sound-entry{width:100%;margin-bottom:0}.sound-dialog :focus-visible,.friend-invite :focus-visible{outline:3px solid #efb94e;outline-offset:3px}
.friend-share-record{display:flex;align-items:center;flex-direction:column;padding:10px;border-radius:17px;background:#eef2de;margin-top:12px}.friend-share-record img{display:block;width:100%;height:150px;object-fit:cover;object-position:center 35%;border-radius:10px}.friend-share-record strong{font-size:20px;margin:10px 0 4px}.friend-share-record span{font-size:11px;color:#708269}.friend-share-actions{display:flex;gap:8px;flex-wrap:wrap}.friend-share-actions>.friend-primary{flex:1;min-width:130px;font-size:12px;min-height:43px}.sound-dialog textarea{box-sizing:border-box;width:100%;height:78px;resize:none;border:1px solid #dcd4b9;background:#f9f5e6;border-radius:11px;margin-top:15px;padding:9px;color:#75674d;font:11px/1.6 'Microsoft YaHei',sans-serif}
@media(max-height:650px){.sound-dialog{padding:13px;border-radius:22px}.sound-dialog h2{font-size:20px}.sound-setting{padding:10px 0 4px}.sound-intro{font-size:12px;margin:7px 0}.sound-help{font-size:10px;margin:6px 0}.friend-share-record img{height:94px}.friend-share-record strong{font-size:17px}.friend-invite{padding:12px;margin:10px 0}.friend-invite h2{font-size:17px}.friend-invite p{font-size:11px;margin-bottom:8px}.friend-primary{min-height:45px;font-size:13px}.sound-dialog textarea{height:66px;margin-top:10px}}
@media(max-width:650px) and (max-height:650px){.splash{height:var(--app-height,100vh);min-height:0;box-sizing:border-box;padding:calc(10px + var(--host-top,0px)) 14px calc(10px + var(--host-bottom,0px))}.splash-card{height:100%;max-height:100%;border-width:4px}.splash-art{height:104px;min-height:0;flex:0 1 104px}.splash-copy{padding:10px 14px;min-height:0;flex:1;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain}.splash-copy h1{font-size:21px;line-height:1.2;margin:7px 0}.splash-copy .lead{font-size:10px;line-height:1.55;margin-bottom:5px}.splash-copy .btn{min-height:36px;margin-top:5px;font-size:11px;padding:7px 10px}.splash-copy>.sound-entry{min-height:32px;padding:5px;margin:6px 0;font-size:11px}.splash-copy>.series-card{margin-top:5px}.splash-copy .series-link{min-height:38px;padding:6px 10px}.splash-copy .series-copy strong{font-size:11px}.splash-copy .series-copy small{font-size:8px}.splash-copy .footnote{font-size:7px;line-height:1.5;margin-top:6px}}