/* The viewport and chrome are shared; each feature keeps its own content.
 * Load after feature CSS, before wardrobe-ui.css. World sizing is intentionally
 * absent: a blocking dialog must not move the camera or rescale the town.
 */
#panel.town-panel {
  --town-panel-gap: max(12px, env(safe-area-inset-top), env(safe-area-inset-bottom));
  --town-panel-available: max(0px, calc(var(--town-height, 100dvh) - var(--town-panel-gap) * 2));
  --town-panel-width: 760px;
  position: fixed;
  inset: calc(var(--town-view-top, 0px) + var(--town-panel-gap)) 0 auto;
  display: none;
  flex-direction: column;
  width: min(var(--town-panel-width), calc(100vw - var(--town-panel-gap) * 2));
  max-width: calc(100vw - var(--town-panel-gap) * 2);
  height: auto;
  max-height: var(--town-panel-available);
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #baa5cf;
  border-radius: 19px;
  color: #564466;
  background: #fffbf7;
  box-shadow: 0 18px 64px #31254250, 0 2px 0 #ffffffbb inset;
  overscroll-behavior: contain;
}
#panel.town-panel[open] { display: flex; }
#panel.town-panel::backdrop { background: #3834498f; backdrop-filter: blur(3px); }
#panel.town-panel--wide { --town-panel-width: 1000px; }
#panel.town-panel--studio { --town-panel-width: 1140px; height: var(--town-panel-available); }
#panel.town-panel--activity { --town-panel-width: 1320px; height: var(--town-panel-available); }
#panel.town-panel > .town-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 54px;
  padding: 4px 9px 4px 17px;
  border-bottom: 1px solid #e2d5e9;
  background: linear-gradient(105deg, #f8effb, #fff7ec);
  z-index: 30;
}
#panel .town-panel-glyph { display: grid; place-items: center; color: #84639e; flex: none; }
#panel h2.town-panel-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.15px;
  color: #5d466f;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel .town-panel-title:focus-visible { outline: 2px solid #9474ad; outline-offset: 4px; border-radius: 3px; }
#panel .town-panel-tools { display: flex; flex: none; align-items: center; gap: 7px; }
#panel .town-panel-tools:empty { display: none; }
#panel.town-panel .close {
  position: static;
  float: none;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid #d3c0dd;
  border-radius: 12px;
  background: #ffffffb8;
  color: #775688;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  z-index: 1;
}
#panel.town-panel .close:hover { background: #f1e3f7; border-color: #ae8cc2; }
#panel.town-panel > #panelContent {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  padding: 22px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #c7afd7 #fffaf6;
  scroll-padding: 15px 0 24px;
  -webkit-overflow-scrolling: touch;
}
#panel.town-panel #panelContent > :first-child { margin-top: 0; }
#panel.town-panel :is(button, input, select, textarea, summary, a[href]) { scroll-margin-block: 14px; }
#panel.town-panel :is(button, a[href], input, select, textarea):focus-visible { outline: 3px solid #936537; outline-offset: 2px; }
#panel.town-panel p { font-size: 13px; line-height: 1.65; color: #75647e; }
#panel.town-panel h2:not(.town-panel-title) { color: #725281; font-size: 26px; }
#panel.town-panel h3 { color: #745783; }
#panel.town-panel .panel-label { color: #886477; font-size: 10px; line-height: 1.5; letter-spacing: 1.3px; }
#panel.town-panel :is(.primary, .choice, .menu-item, .activity-text-button, .field input, .field select, .file-choice) { min-height: 44px; font-size: 13px; }
#panel.town-panel :is(.small-note, .activity-save-note, .wardrobe-save-note) { font-size: 11px !important; color: #7b657f !important; }
#panel.town-panel :is(.journal-tabs, .district-strip, .home-tabs, .fashion-tabs) { scrollbar-width: thin; }
#panel.town-panel :is(.journal-tabs button, .district-chip, .postcard-options button, .leaderboard-filters select) { min-height: 44px; font-size: 12px; }
#panel.town-panel :is(.journal-tabs button, .district-chip)[aria-selected="true"],
#panel.town-panel .district-chip[aria-pressed="true"] { background: #8d6cab; color: #fffdf9; }
#panel.town-panel :is(.journal-paths b, .record-row b, .friend-row b, .setting-row b) { font-size: 13px; color: #765b84; }
#panel.town-panel :is(.journal-paths small, .record-row small, .friend-row small, .setting-row small, .journal-stats span, .collection-piece small, .badge-card span, .badge-card small, .district-places small) { font-size: 11px; color: #7e6a87; }
#panel.town-panel :is(.badge-card b, .collection-piece span, .collection-heading p, .collection-reward, .friend-row .choice) { font-size: 12px !important; }
#panel.town-panel .journal-tabs { margin: 17px 0; gap: 6px; }
#panel.town-panel .friend-row { gap: 10px; }
#panel.town-panel .friend-row > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
#panel.town-panel .friend-row > button { flex: none; }
#panel.town-panel .setting-row { gap: 14px; }
#panel.town-panel .setting-row > span { min-width: 0; }
#panel.town-panel .setting-row > button { flex: none; }
#panel.town-panel :is(.save-buttons, .profile-actions, .party-panel, .leaderboard-filters) { min-width: 0; }
#panel.town-panel .neighbour-stage { height: 235px; margin-bottom: 18px; }
#panel.town-panel .neighbour-stage canvas { height: 235px !important; }
#panel.town-panel .district-places { align-items: stretch; }
#panel.town-panel .district-places .menu-item { min-width: 0; }
#panel.town-panel .district-places .menu-item > span { min-width: 0; }
#panel.town-panel .greeting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#panel.town-panel .greeting-grid .menu-item { margin: 0; min-height: 50px; }
#panel.town-panel :is(.field input, .setting-row input[type="range"], select) { max-width: 100%; }
#panel.town-panel input[type="range"] { min-height: 44px; }

/* A compact drawer leaves the town visible without changing its geometry. It
 * remains a native modal: background inputs are inert, Escape closes normally. */
@media (min-width: 1100px) and (min-height: 600px) {
  #panel.town-panel--side {
    --town-panel-width: 490px;
    left: auto;
    right: max(16px, env(safe-area-inset-right));
    margin: 0;
    height: var(--town-panel-available);
  }
  #panel.town-panel--side::backdrop { background: #4f41614d; backdrop-filter: none; }
  #panel.town-panel--side .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Existing menu cards/results share legible labels and dependable targets. */
#panel.town-panel :is(.activity-card strong, .fashion-theme > b) { font-size: 14px; }
#panel.town-panel :is(.activity-card small, .fashion-theme > small, .activity-facts span, .activity-result-stats span) { font-size: 12px; color: #75617e; }
#panel.town-panel .activity-card em { font-size: 11px; }
#panel.town-panel .activity-card { min-height: 128px; }
#panel.town-panel .activity-menu-grid { margin-top: 18px; }
#panel.town-panel .activity-instructions { font-size: 13px; line-height: 1.65; }
#panel.town-panel .activity-result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#panel.town-panel .activity-result-stats > div { padding: 7px; border: 0; }
#panel.town-panel .activity-result-stats b { font-size: 29px; }
#panel.town-panel .activity-intro-art { height: 120px; }
#panel.town-panel .activity-results > h2 { margin-right: 0; }

/* A round occupies the play surface. Header pause/help and close remain
 * reachable, the stage gets the remaining room, and controls keep their size. */
#panel.town-panel--activity > #panelContent { padding: 12px 18px; display: flex; scrollbar-gutter: auto; }
#panel.town-panel .town-panel-tools :is(.activity-help, .spa-pause) { width: auto; height: 44px; min-width: 44px; min-height: 44px; font-size: 13px; padding: 8px 12px; border-radius: 11px; }
#panel.town-panel .town-panel-tools .activity-help { font-size: 20px; }
#panel.town-panel--activity :is(.arcade-run > .arcade-heading, .spa-run > .spa-heading, .cafe-game > .panel-label, .memory-game > .panel-label, .memory-game > h2, .petal-game > .panel-label, .petal-game > h2) { display: none; }
#panel.town-panel--activity :is(.arcade-run, .spa-run, .cafe-game, .memory-game, .petal-game) { width: 100%; min-width: 0; margin: 0 auto; }
#panel.town-panel--activity .arcade-run {
  display: grid;
  grid-template-rows: auto minmax(145px, 1fr) auto auto auto;
  gap: 9px;
  height: 100%;
  min-height: 365px;
}
#panel.town-panel--activity :is(.arcade-stats, .spa-stats) { margin: 0; min-height: 55px; padding: 7px 0; }
#panel.town-panel--activity :is(.arcade-stats > span, .spa-stats > span) { font-size: 11px; color: #79627f; }
#panel.town-panel--activity :is(.arcade-stats b, .spa-stats b) { font-size: 20px; color: #765486; }
#panel.town-panel--activity :is(.arcade-stage, .spa-stage) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  max-height: none;
  width: 100%;
  min-width: 0;
  aspect-ratio: auto;
  border-width: 2px;
  border-radius: 15px;
  background: #e9e0ed;
  overflow: hidden;
}
#panel.town-panel--activity :is(.arcade-stage, .spa-stage) > canvas { flex: none; max-width: 100%; max-height: 100%; min-height: 0; margin: auto; object-fit: contain; image-rendering: auto; }
#panel.town-panel--activity .arcade-controls { margin: 0; gap: 9px; }
#panel.town-panel--activity .arcade-controls button { min-height: 48px; }
#panel.town-panel--activity .arcade-controls button > span { font-size: 12px; }
#panel.town-panel--activity .arcade-feedback { min-height: 23px; margin: 0 !important; font-size: 12px !important; color: #755a81 !important; }
#panel.town-panel--activity .arcade-footnote { min-height: 36px; font-size: 11px; color: #7d6688; }
#panel.town-panel--activity .arcade-footnote .activity-text-button { min-height: 44px; font-size: 12px; }
#panel.town-panel--activity :is(.arcade-overlay, .spa-overlay) { overflow: auto; padding: 14px; }
#panel.town-panel--activity :is(.arcade-help-overlay, .spa-help) { justify-content: flex-start; }
#panel.town-panel--activity :is(.arcade-help-overlay > p, .spa-help > p) { font-size: 13px !important; line-height: 1.5 !important; color: #765f80 !important; }
#panel.town-panel--activity :is(.arcade-help-overlay > small, .spa-help > small) { font-size: 11px; }
#panel.town-panel--activity :is(.arcade-help-overlay, .spa-help) > .primary { flex: none; min-height: 44px; font-size: 13px !important; }
#panel.town-panel--activity .spa-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr);
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  gap: 10px 17px;
  height: 100%;
  min-height: 415px;
}
#panel.town-panel--activity .spa-stats { grid-column: 1 / -1; grid-row: 1; }
#panel.town-panel--activity .spa-stage { grid-column: 1; grid-row: 2 / 8; }
#panel.town-panel--activity .spa-ticket { grid-column: 2; grid-row: 2; flex-direction: column; align-items: flex-start; margin: 0; min-height: 52px; font-size: 12px; color: #80647b; }
#panel.town-panel--activity .spa-ticket > b { font-size: 12px; max-width: none; }
#panel.town-panel--activity .spa-ticket-steps { flex-wrap: wrap; justify-content: flex-start; }
#panel.town-panel--activity .spa-ticket-steps > span { color: #96758c; }
#panel.town-panel--activity .spa-ticket-steps .current { color: #884267; }
#panel.town-panel--activity .spa-queue { grid-column: 2; grid-row: 3; margin: 0; min-height: 48px; }
#panel.town-panel--activity .spa-queue > button { min-height: 48px; padding: 6px; grid-template-columns: 1fr auto; grid-template-rows: auto 7px; }
#panel.town-panel--activity .spa-queue small { font-size: 11px; grid-column: 2; grid-row: 1; }
#panel.town-panel--activity .spa-guest-name { font-size: 12px; }
#panel.town-panel--activity .spa-guest-request { display: none; }
#panel.town-panel--activity .spa-patience { grid-column: 1 / 3; grid-row: 2; }
#panel.town-panel--activity .spa-no-queue { font-size: 12px; }
#panel.town-panel--activity .spa-station-controls { grid-column: 2; grid-row: 4; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#panel.town-panel--activity .spa-station-controls button { min-height: 48px; font-size: 12px; padding: 7px 5px; gap: 5px; }
#panel.town-panel--activity .spa-action-row { grid-column: 2; grid-row: 5; margin: 0; flex-direction: column; align-items: stretch; }
#panel.town-panel--activity .spa-action-row > .primary { width: 100%; min-height: 48px; font-size: 13px !important; }
#panel.town-panel--activity .spa-touch-meter { min-height: 45px; }
#panel.town-panel--activity .spa-touch-meter > span { font-size: 11px; }
#panel.town-panel--activity .spa-feedback { grid-column: 2; grid-row: 6; min-height: 25px; margin: 0 !important; font-size: 12px !important; color: #805c77 !important; }
#panel.town-panel--activity .spa-footer { grid-column: 2; grid-row: 7; flex-direction: column; align-items: stretch; font-size: 11px; }
#panel.town-panel--activity .spa-footer .activity-text-button { min-height: 44px; font-size: 12px; }

/* These original activities use DOM controls, so keep their layout flexible
 * while their rules, elapsed time, point values and reward receipts stay intact. */
#panel.town-panel--activity .cafe-game { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 15px 24px; max-width: 1100px; min-height: 360px; height: 100%; }
#panel.town-panel--activity .cafe-game > .cafe-score { grid-column: 1 / -1; grid-row: 1; }
#panel.town-panel--activity .cafe-order { grid-column: 1; grid-row: 2; }
#panel.town-panel--activity .cafe-preparation { grid-column: 1; grid-row: 3; align-self: center; }
#panel.town-panel--activity .cafe-feedback { grid-column: 1; grid-row: 4; font-size: 13px; }
#panel.town-panel--activity .cafe-ingredients { grid-column: 2; grid-row: 2 / 4; align-self: center; }
#panel.town-panel--activity .cafe-actions { grid-column: 2; grid-row: 4; margin: 0; }
#panel.town-panel--activity .cafe-exit-note { grid-column: 1 / -1; grid-row: 5; margin: 0; font-size: 11px; color: #7e6584; }
#panel.town-panel--activity .cafe-score { min-height: 48px; margin: 0; font-size: 13px; gap: 10px; }
#panel.town-panel--activity .ingredient { min-height: 52px; font-size: 12px; }
#panel.town-panel--activity .cafe-ingredients legend { font-size: 12px; }
#panel.town-panel--activity #cafeParts { font-size: 13px; }
#panel.town-panel--activity :is(.memory-game, .petal-game) { display: flex; flex-direction: column; height: 100%; min-height: 360px; max-width: 840px; gap: 10px; }
#panel.town-panel--activity :is(.memory-game > *, .petal-game > *) { flex: none; }
#panel.town-panel--activity .memory-pads { flex: 1 1 200px; min-height: 170px; max-height: 600px; margin: 0; }
#panel.town-panel--activity .memory-pad { min-height: 72px; padding: 10px; }
#panel.town-panel--activity .memory-pad > small { font-size: 12px; }
#panel.town-panel--activity :is(.memory-prompt, .memory-progress, .petal-feedback) { margin: 0 !important; font-size: 13px !important; min-height: 22px; }
#panel.town-panel--activity .petal-field { flex: 1 1 250px; min-height: 180px; margin: 0; }
#panel.town-panel--activity :is(.memory-game > small, .petal-game > small, .petal-legend) { font-size: 12px; color: #7d6486; }

/* Feature studios retain a visible preview/action area, with their choices
 * contained inside. On shorter windows outer scrolling is always available. */
#panel.town-panel[data-panel-kind="salon"] > #panelContent { display: flex; overflow: auto; }
#panel.town-panel .salon-panel { width: 100%; height: 100%; min-height: 380px; max-height: none; }
#panel.town-panel .salon-layout { min-height: 140px; height: auto; flex: 1 1 320px; }
#panel.town-panel :is(.salon-tabs button, .salon-footer button, .salon-zoom, .salon-remove-makeup) { min-height: 44px; font-size: 12px; }
#panel.town-panel :is(.salon-hair-card span, .salon-colour small, .salon-mirror strong, .salon-mirror small) { font-size: 11px; color: #806279; }
#panel.town-panel .salon-free { font-size: 11px; }
#panel.town-panel .salon-feedback { font-size: 12px; min-height: 28px; }
#panel.town-panel .salon-footer { gap: 9px; flex-wrap: wrap; }
#panel.town-panel .salon-colours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#panel.town-panel .town-home { min-height: 0; }
#panel.town-panel .home-controls { min-height: 0; max-height: max(180px, calc(var(--town-height, 100dvh) - 235px)); }
#panel.town-panel :is(.home-tabs button, .home-categories button, .home-placement-list button, .home-item-button, .home-secondary, .home-primary, .home-small-actions button) { min-height: 44px; font-size: 12px !important; }
#panel.town-panel :is(.home-shop-card h4, .home-preview-help, .home-hint, .home-field, .home-save-status, .home-preview-caption, .home-sharing small, .home-swatches small, .home-item-badge) { font-size: 11px !important; color: #7f657e !important; }
#panel.town-panel .home-shop-card p { font-size: 11px; }
#panel.town-panel .home-small-actions { flex-wrap: wrap; }
#panel.town-panel .home-panel-heading { padding-right: 0; }
#panel.town-panel .fashion-run { min-height: 0; }
#panel.town-panel .fashion-studio-layout { grid-template-columns: 250px minmax(0, 1fr); }
#panel.town-panel :is(.fashion-tabs button, .fashion-choice) { min-height: 44px; font-size: 12px; }
#panel.town-panel :is(.fashion-checks li, .fashion-choice-group legend, .fashion-owned-note, .fashion-time, .fashion-score-label) { font-size: 11px; }
#panel.town-panel #fashionSubmit { position: sticky; bottom: -22px; z-index: 4; box-shadow: 0 0 0 9px #fffbf7; }
#panel.town-panel #shopBuy { position: sticky; bottom: -22px; z-index: 4; box-shadow: 0 0 0 8px #fffbf7; }

@media (max-width: 760px) {
  #panel.town-panel { --town-panel-gap: max(7px, env(safe-area-inset-top), env(safe-area-inset-bottom)); border-radius: 15px; }
  #panel.town-panel > .town-panel-header { min-height: 50px; padding: 3px 6px 3px 12px; gap: 8px; }
  #panel h2.town-panel-title { font-size: 14px; }
  #panel.town-panel > #panelContent { padding: 16px; }
  #panel.town-panel h2:not(.town-panel-title) { font-size: 23px; }
  #panel.town-panel .panel-label { font-size: 10px; letter-spacing: .9px; }
  #panel.town-panel :is(input:not([type="range"]):not([type="checkbox"]):not([type="file"]), select, textarea) { font-size: 16px; }
  #panel.town-panel .activity-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #panel.town-panel .activity-card { min-height: 150px; padding: 13px 11px; }
  #panel.town-panel .activity-card > span:nth-child(2) { flex-basis: 100%; }
  #panel.town-panel .activity-card small { font-size: 11px; }
  #panel.town-panel .activity-card em { font-size: 11px; }
  #panel.town-panel .journal-stats { gap: 7px; }
  #panel.town-panel .journal-stats > div { padding: 13px 6px; }
  #panel.town-panel .journal-stats span { font-size: 11px; }
  #panel.town-panel .district-places { grid-template-columns: 1fr; }
  #panel.town-panel .home-controls { max-height: none; overflow: visible; }
  #panel.town-panel .home-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel.town-panel .salon-layout { grid-template-columns: minmax(98px, .6fr) minmax(0, 1fr); gap: 12px; }
  #panel.town-panel .salon-hair-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel.town-panel .salon-colours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #panel.town-panel .fashion-studio-layout { grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr); gap: 12px; }
  #panel.town-panel :is(#shopBuy, #fashionSubmit) { bottom: -16px; }
  #panel.town-panel--activity > #panelContent { padding: 9px; }
  #panel.town-panel--activity .arcade-run { gap: 7px; min-height: 350px; }
  #panel.town-panel--activity .arcade-footnote > span { display: none; }
  #panel.town-panel--activity .arcade-footnote { justify-content: center; }
  #panel.town-panel--activity .spa-run { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(160px, 1fr) auto auto auto auto auto; gap: 7px; min-height: 565px; }
  #panel.town-panel--activity .spa-run > :is(.spa-stats, .spa-stage, .spa-ticket, .spa-queue, .spa-station-controls, .spa-action-row, .spa-feedback) { grid-column: 1; grid-row: auto; }
  #panel.town-panel--activity .spa-ticket { flex-direction: row; align-items: center; min-height: 44px; font-size: 11px; }
  #panel.town-panel--activity .spa-ticket > b { font-size: 11px; max-width: 115px; }
  #panel.town-panel--activity .spa-ticket-steps { justify-content: flex-end; gap: 4px; }
  #panel.town-panel--activity .spa-station-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #panel.town-panel--activity .spa-station-controls button { font-size: 11px; min-height: 46px; gap: 4px; }
  #panel.town-panel--activity .spa-action-row { flex-direction: row; align-items: center; gap: 12px; }
  #panel.town-panel--activity .spa-footer { display: none; }
  #panel.town-panel--activity .spa-stats > span { font-size: 10px; }
  #panel.town-panel--activity .spa-stats b { font-size: 18px; }
  #panel.town-panel--activity .cafe-game { display: flex; flex-direction: column; height: auto; gap: 11px; min-height: 0; }
  #panel.town-panel--activity .cafe-game > * { flex: none; }
  #panel.town-panel--activity .cafe-ingredients { align-self: stretch; }
  #panel.town-panel--activity .cafe-preparation { padding: 5px; }
  #panel.town-panel--activity .cafe-order { padding: 12px 14px; }
  #panel.town-panel--activity .cafe-cup { height: 75px; width: 68px; }
  #panel.town-panel--activity .ingredient { min-height: 46px; font-size: 11px; }
  #panel.town-panel--activity .cafe-actions { position: sticky; bottom: -9px; background: #fffbf7; padding: 8px 0; z-index: 2; box-shadow: 0 -3px 14px #70537c12; }
}
@media (max-width: 380px) {
  #panel.town-panel > #panelContent { padding: 13px; }
  #panel.town-panel .town-panel-glyph { display: none; }
  #panel.town-panel .activity-menu-grid { grid-template-columns: 1fr; }
  #panel.town-panel .activity-card { flex-wrap: nowrap; min-height: 110px; }
  #panel.town-panel .activity-card > span:nth-child(2) { flex-basis: auto; }
  #panel.town-panel .greeting-grid { grid-template-columns: 1fr; }
  #panel.town-panel .setting-row { gap: 9px; }
  #panel.town-panel .setting-row input[type="range"] { width: 95px; }
  #panel.town-panel .journal-stats { grid-template-columns: 1fr; }
  #panel.town-panel .journal-stats > div { display: flex; align-items: center; gap: 12px; text-align: left; }
  #panel.town-panel .journal-stats b { min-width: 55px; }
  #panel.town-panel .journal-stats span { margin-top: 0; }
  #panel.town-panel .fashion-studio-layout { grid-template-columns: 105px minmax(0, 1fr); }
  #panel.town-panel--activity > #panelContent { padding: 8px; }
  #panel.town-panel--activity .spa-station-controls button { flex-direction: column; padding: 5px 2px; }
}
@media (max-height: 600px) and (min-width: 761px) {
  #panel.town-panel > #panelContent { padding: 14px 18px; }
  #panel.town-panel .salon-panel { min-height: 300px; }
  #panel.town-panel .salon-heading { display: none; }
  #panel.town-panel .home-preview-help { display: none; }
  #panel.town-panel--activity .spa-run { min-height: 350px; gap: 7px 12px; }
  #panel.town-panel--activity .spa-footer > span { display: none; }
  #panel.town-panel--activity .spa-ticket { min-height: 44px; }
}
@media (max-height: 560px) and (min-width: 600px) {
  #panel.town-panel--activity > #panelContent { padding: 8px; }
  #panel.town-panel--activity .arcade-run { grid-template-columns: minmax(0, 1fr) minmax(170px, .32fr); grid-template-rows: auto minmax(120px, 1fr) auto; gap: 7px 12px; min-height: 245px; }
  #panel.town-panel--activity .arcade-stats { grid-column: 1 / -1; grid-row: 1; min-height: 46px; padding: 4px 0; }
  #panel.town-panel--activity .arcade-stage { grid-column: 1; grid-row: 2 / 4; }
  #panel.town-panel--activity .arcade-controls { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; align-self: center; gap: 6px; }
  #panel.town-panel--activity .arcade-controls button { min-height: 44px; }
  #panel.town-panel--activity .flight-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel.town-panel--activity .arcade-feedback { grid-column: 2; grid-row: 3; font-size: 11px !important; }
  #panel.town-panel--activity .arcade-footnote { display: none; }
  #panel.town-panel--activity :is(.memory-game, .petal-game) { min-height: 250px; gap: 6px; }
  #panel.town-panel--activity .memory-pads { min-height: 115px; gap: 8px; }
  #panel.town-panel--activity .memory-pad { min-height: 53px; padding: 4px; }
  #panel.town-panel--activity .memory-pad > span { font-size: 27px; }
  #panel.town-panel--activity .petal-field { min-height: 120px; }
  #panel.town-panel--activity :is(.memory-game > small, .petal-game > small) { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  #panel.town-panel, #panel.town-panel * { scroll-behavior: auto; }
}