:root {
  color-scheme: light;
  --ink: #253047;
  --muted: #68748b;
  --line: #d8deeb;
  --panel: rgba(255,255,255,.94);
  --accent: #7d4bd1;
  --accent-soft: #eee7fb;
  --rose: #e85587;
  --page-green: #bcdc89;
  --banner-peach: #dd7b7a;
  --banner-ink: #fff;
  --shadow: 0 14px 40px rgba(40,48,75,.12);
  --floating-window-gap: 16px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  background: var(--page-green);
  display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh;
}
button, select, input { font: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible, .import-button:focus-within { outline: 3px solid #d4b7ff; outline-offset: 3px; }
.topbar {
  min-height: 76px; padding: 10px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; color: var(--banner-ink);
  background: var(--banner-peach);
  box-shadow: 0 3px 18px rgba(91,45,48,.24); position: relative; z-index: 4;
}
h1 { font-size: 22px; margin: 0; letter-spacing: .02em; white-space: nowrap; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-copy { min-width: 0; display: flex; align-items: center; gap: 8px; }
#languageSelect { max-width: 106px; padding: 0 6px; font-size: 13px; min-height: 38px; }
.map-search label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.map-search input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; padding: 8px; }
.search-results { max-height: 260px; overflow: auto; overscroll-behavior: contain; padding-top: 6px; }
.search-results button { width: 100%; display: flex; flex-direction: column; gap: 4px; text-align: left; min-height: 48px; border: 0; border-radius: 8px; padding: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.search-results button:hover, .search-results button:focus-visible { background: var(--accent-soft); }
.search-results small, .search-results p { color: var(--muted); font-size: 12px; }
.service-message { display: flex; flex-direction: column; max-height: 55%; overflow: auto; overscroll-behavior: contain; white-space: normal; }
.service-message > * { flex: 0 0 auto; }
.service-message > .announcement-block { flex: 0 1 auto; min-height: 52px; overflow: hidden; }
.service-message p { margin: 4px 0; }
.service-message button { min-height: 44px; padding: 6px 15px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.service-message[data-level="warning"], .service-message[data-level="maintenance"] { background: #fff2d5; }
.service-message[data-level="success"] { background: #e1f5e7; }
.sidebar-toggle { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; background: rgba(255,255,255,.12); color: var(--banner-ink); cursor: pointer; }
.sidebar-toggle:hover { background: rgba(255,255,255,.24); }
.mobile-header-toggle { display: none; }
.mobile-header-expand { display: none; }
/* ANNOUNCEMENT_LAYOUT_START: also shipped on the standalone status page. */
.announcement-block { display: flex; flex-direction: column; min-width: 0; }
.announcement-content { min-height: 0; overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; -webkit-overflow-scrolling: touch; }
.announcement-toggle { display: block; flex: 0 0 auto; align-self: flex-end; margin: 8px 0 0 auto; min-height: 44px; padding: 6px 15px; cursor: pointer; }
.announcement-block p { white-space: pre-wrap; }
/* ANNOUNCEMENT_LAYOUT_END */
.sidebar-toggle { padding: 2px; overflow: hidden; background: #fff; }
.sidebar-toggle:hover { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.45); }
.sidebar-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.topbar p { margin: 3px 0 0; font-size: 13px; opacity: .84; }
.source-controls { display: flex; align-items: end; gap: 10px; min-width: 0; }
.source-controls label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; }
select, .import-button, .friend-form input, .friend-form button {
  min-height: 38px; border: 1px solid rgba(255,255,255,.42); border-radius: 10px;
  background: rgba(255,255,255,.16); color: var(--banner-ink); padding: 0 12px; outline: none;
}
.friend-form { display: grid; grid-template-columns: minmax(110px,160px) auto; grid-template-rows: auto 38px; gap: 4px 6px; min-width: 0; }
.friend-form label { grid-column: 1 / -1; }
.friend-form input { width: 100%; min-width: 0; }
.friend-form button, .import-button { white-space: nowrap; }
.source-controls select { max-width: 180px; }
.friend-form input::placeholder { color: rgba(255,255,255,.65); }
.friend-form button { cursor: pointer; font-weight: 750; background: rgba(255,255,255,.94); color: #67404a; }
.friend-form button:hover { background: white; }
.friend-form button:disabled { opacity: .65; cursor: wait; }
select option { color: var(--ink); background: white; }
.import-button { display: flex !important; align-items: center; cursor: pointer; font-size: 14px !important; }
.import-button:hover, .source-controls select:hover { background: rgba(255,255,255,.25); }
.import-button { position: relative; }
.import-button input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.workspace, .workspace.sidebar-collapsed, .workspace.details-collapsed, .workspace.sidebar-collapsed.details-collapsed { display: grid; grid-template-columns: minmax(0,1fr); min-height: 0; position: relative; }
.sidebar-backdrop { display: none; }
.sidebar, .details { background: var(--panel); overflow: auto; padding: 18px; position: relative; z-index: 2; }
.sidebar { position: absolute; left: max(var(--floating-window-gap), env(safe-area-inset-left)); top: var(--floating-window-gap); bottom: var(--floating-window-gap); width: 256px; grid-column: 1; grid-row: 1; overscroll-behavior: contain; }
.details { position: absolute; grid-column: 1 / -1; grid-row: 1; right: max(var(--floating-window-gap), env(safe-area-inset-right)); top: var(--floating-window-gap); bottom: var(--floating-window-gap); width: min(280px, calc(100% - 2 * var(--floating-window-gap))); padding-bottom: max(18px, var(--details-toolbar-clearance, 18px)); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); z-index: 5; overscroll-behavior: contain; }
.details.has-selection { z-index: 35; }
.details.has-selection { padding-top: 56px; }
.sidebar section + section { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
h2 { font-size: 14px; margin: 0 0 10px; letter-spacing: .04em; }
.map-tabs { display: grid; gap: 6px; }
.map-tab {
  width: 100%; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; text-align: left;
}
.map-tab > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-tab small { color: var(--muted); font-size: 12px; flex-shrink: 0; margin-inline-start: 4px; }
.map-tab:hover { background: #f4f1fb; }
.map-tab.active { background: var(--accent-soft); color: #59339c; font-weight: 750; }
.filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:6px; }
.filter-row { display:flex; align-items:center; gap:9px; min-height:34px; font-size:14px; cursor:pointer; }
.filter-row input { accent-color: var(--accent); width:16px; height:16px; }
.filter-row .count { margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums; }
.filters > .filter-row { display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:2px; min-width:0; }
.filters > .filter-row input { margin:0; }
.filters > .filter-row > span:not(.count) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.filters > .filter-row .count { margin-left:0; font-size:9px; line-height:1; text-align:end; white-space:nowrap; }
.save-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 10px; font-size: 13px; }
.save-card dt { color: var(--muted); }
.save-card dd { margin: 0; overflow-wrap: anywhere; }
.notice { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 20px 0 4px; }
.viewer { min-width: 0; min-height: 0; position: relative; overflow: hidden; background: var(--page-green); cursor: grab; grid-column: 1; grid-row: 1; overscroll-behavior: none; }
.viewer.dragging { cursor: grabbing; }
#mapCanvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.asset-progress { position: absolute; z-index: 1; right: 12px; bottom: 80px; max-width: calc(100% - 24px); margin: 0; padding: 7px 11px; border-radius: 12px; background: rgba(255,255,255,.92); color: var(--muted); font-size: 12px; }
.asset-progress p { margin: 0; }
.asset-progress button { min-height: 44px; margin-top: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); cursor: pointer; }
.toolbar {
  position: absolute; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}
.toolbar button { border: 1px solid rgba(208,215,228,.9); border-radius: 12px; min-width: 44px; height: 44px; padding: 0 12px; background: rgba(255,255,255,.94); color: var(--ink); cursor: pointer; pointer-events: auto; box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.toolbar button:hover { background: var(--accent-soft); color: var(--accent); }
.loading, .empty { position: absolute; inset: 0; display: grid; place-items: center; color: #475334; background: rgba(188,220,137,.78); }
[hidden] { display: none !important; }
.details-placeholder { margin-top: 28vh; text-align: center; color: var(--muted); line-height: 1.55; }
.details-placeholder h2 { color: var(--ink); font-size: 17px; margin-top: 8px; }
.sparkle { font-size: 28px; color: var(--rose); }
.object-preview { min-height: 160px; display: grid; place-items: end center; border-radius: 16px; padding: 12px; background: linear-gradient(#dff1ff, #e9f7e4); overflow: hidden; }
.object-preview img { max-width: 92%; max-height: 190px; object-fit: contain; filter: drop-shadow(0 8px 7px rgba(29,42,66,.22)); }
.kind-pill { display: inline-flex; margin: 16px 0 8px; border-radius: 999px; background: var(--accent-soft); color: #5b369b; padding: 5px 9px; font-size: 12px; font-weight: 750; }
.details h3 { margin: 0; font-size: 20px; }
.details h3.object-name { margin: 18px 0; }
.details h4 { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.shop-production, .residents { margin-top: 20px; }
.shop-production p { line-height: 1.6; font-size: 16px; margin: 0; }
.resident-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 10px; list-style: none; padding: 0; margin: 0; }
.resident-grid li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; text-align: center; overflow-wrap: anywhere; }
.resident-grid img, .portrait-missing { width: 72px; height: 72px; object-fit: contain; }
.portrait-missing { display: grid; place-items: center; color: var(--muted); background: #edf1f8; border-radius: 50%; font-size: 24px; }
.residents hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0 18px; }
.detail-muted { font-size: 13px; color: var(--muted); }
.english { color: var(--muted); margin: 4px 0 16px; font-size: 13px; }
.object-data { margin: 0; display: grid; gap: 12px; }
.object-data div { border-top: 1px solid var(--line); padding-top: 10px; }
.object-data dt { color: var(--muted); font-size: 12px; }
.object-data dd { margin: 3px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%,20px); opacity: 0; pointer-events: none; z-index: 10; background: #263047; color: white; padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.toast { max-width: calc(100% - 24px); line-height: 1.5; }
@media (max-width: 980px) {
  .topbar p { display: none; }
  .source-controls > label:first-of-type { display: none; }
  .details { width: min(270px, calc(100% - 2 * var(--floating-window-gap))); transform: translateX(calc(100% + 2 * var(--floating-window-gap))); transition: transform .2s; }
  .details.has-selection { transform: none; }
}
@media (max-width: 760px) {
  .topbar p { display: none; }
  .topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px 10px; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); }
  .brand { grid-column: 1; grid-row: 1; gap: 9px; }
  h1 { font-size: 18px; }
  .source-controls { display: contents; }
  .friend-form { grid-column: 1 / -1; grid-row: 2; grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: 44px; align-items: center; gap: 8px; }
  .friend-form input, .friend-form button { min-height: 44px; font-size: 16px; }
  .sidebar-toggle { width: 44px; height: 44px; flex-basis: 44px; }
  .map-tab, .filter-row { min-height: 44px; }
  .friend-form label { grid-column: auto; font-size: 12px; }
  .source-controls > .import-button { grid-column: 1 / -1; grid-row: 3; justify-self: end; height: 38px; min-height: 38px; font-size: 12px !important; padding: 0 10px; }
  .workspace, .workspace.sidebar-collapsed, .workspace.details-collapsed, .workspace.sidebar-collapsed.details-collapsed { grid-template-columns: minmax(0,1fr); }
  .sidebar { z-index: 4; width: min(280px, calc(100% - 2 * var(--floating-window-gap))); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; }
  .sidebar-backdrop { display: block; position: absolute; inset: 0; z-index: 3; border: 0; background: rgba(29,36,56,.24); cursor: default; }
  .viewer { grid-column: 1; }
  .details { top: auto; height: 44%; width: calc(100% - 2 * var(--floating-window-gap)); border-radius: 16px; padding-bottom: max(18px, env(safe-area-inset-bottom), var(--details-toolbar-clearance, 18px)); transform: translateY(calc(100% + 2 * var(--floating-window-gap))); }
  .details .object-preview { min-height: 90px; float: left; width: 110px; margin: 0 16px 12px 0; }
  .details .object-preview img { max-height: 100px; }
  .details .object-name { margin-top: 0; padding-right: 12px; }
  .details .residents { clear: both; }
  .resident-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .toolbar { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) and (max-height: 500px) {
  .details { height: 65%; }
}
@media (prefers-reduced-motion: reduce) {
  .details, .toast { transition: none; }
}

#screenshotButton { display: inline-flex; align-items: center; justify-content: center; }
#screenshotButton:disabled { opacity: .45; cursor: progress; }
.screenshot-preview { width: min(90vw, 620px); max-height: 90dvh; padding: 16px; border: 0; border-radius: 18px; background: white; color: var(--ink); }
.screenshot-preview::backdrop { background: rgba(22,30,40,.55); }
.screenshot-preview img { display: block; width: 100%; max-height: 68dvh; object-fit: contain; }
.screenshot-preview p { font-size: 14px; text-align: center; }
.screenshot-preview > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center; }
.screenshot-preview button { padding: 10px 18px; border-radius: 10px; border: 0; cursor: pointer; font: inherit; }
#screenshotSave { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; background: var(--accent); color: white; }
#screenshotSave[hidden] { display: none; }

/* User-approved frosted UI — 2026-09-11.
   Matte frosted surfaces: bounded backdrop blur, translucent tint, no rim. */
:root {
  --control-radius: 7px;
  --glass-radius: 12px;
  --glass-ink: #303030;
  --glass-muted: #484848;
  --glass-surface: rgba(250,252,250,.60);
  --glass-control: rgba(250,252,250,.58);
  --glass-shadow: 0 8px 28px rgba(24,36,47,.13);
  --floating-glass: rgba(255,255,255,.78);
  --floating-glass-highlight: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 65%);
}
.sidebar, .details {
  color: var(--glass-ink);
  background: var(--floating-glass);
  background-image: var(--floating-glass-highlight);
  -webkit-backdrop-filter: blur(18px) saturate(.65);
  backdrop-filter: blur(18px) saturate(.65);
  border: 0;
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  --muted: var(--glass-muted);
  --ink: var(--glass-ink);
}
.sidebar section + section { border-top: 0; margin-top: 22px; padding-top: 0; }
.sidebar .map-list-section { margin-top: 12px; }
.sidebar .display-filters-section { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
.sidebar .display-filters-section + section { margin-top: 10px; }
.sidebar .map-search input { border: 0; background: rgba(255,255,255,.50); color: var(--glass-ink); }
.sidebar .map-tab:hover, .sidebar .search-results button:hover { background: rgba(255,255,255,.45); }
.sidebar .map-tab.active { background: rgba(125,75,209,.13); color: #351749; }
.sidebar .map-tab.active small { color: #351749; }
.sidebar .map-tab[data-map-id="8"]{color:#c74475;font-weight:750}
.sidebar .map-tab[data-map-id="8"].active{background:rgba(221,123,122,.17);color:#b62f68}
.sidebar .map-tab[data-map-id="8"].active small{color:#b62f68}
.site-metadata { display:flex;flex-direction:column;gap:5px;color:var(--glass-muted,var(--muted));font-size:12px;line-height:1.5; }
.sidebar { display:flex;flex-direction:column; }
.sidebar > section,.sidebar-heading { flex-shrink:0; }
.sidebar-metadata { margin-top:auto;padding-top:24px;padding-bottom:58px;flex-shrink:0; }
.site-metadata a { align-self:flex-start;color:inherit;text-decoration:underline;text-underline-offset:3px; }
.site-metadata a:hover { color:var(--glass-ink); }
.credits-active > .topbar,.credits-active > .workspace,.credits-active > .toast { visibility:hidden; }
.credits-page { position:fixed;inset:0;z-index:50;overflow:auto;overscroll-behavior:contain;background:var(--panel);color:var(--glass-ink);padding:clamp(24px,6vw,64px); }
.credits-content { max-width:640px;margin:0 auto; }
.credits-content > a { color:inherit;font-size:14px;text-underline-offset:4px; }
.credits-content h1 { font-size:clamp(26px,4vw,34px);margin:52px 0 14px; }
.credits-content h1:focus { outline:none; }
.credits-intro { color:var(--glass-muted);font-size:15px;line-height:1.8;margin-bottom:42px; }
#acknowledgements article { margin-bottom:32px; }
#acknowledgements section { margin:36px 0; }
#acknowledgements h2 { font-size:18px;margin:0 0 24px;padding-bottom:12px;border-bottom:1px solid var(--line); }
#acknowledgements h3 { font-size:17px;margin:0 0 10px; }
#acknowledgements p { font-size:16px;line-height:1.8;margin:0; }
#acknowledgements .credits-resource-links { display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;font-size:13px; }
.credits-resource-links a { color:inherit;text-underline-offset:3px; }
.credits-content > footer { margin-top:64px; }
.workspace:not(.sidebar-collapsed) .toolbar { z-index: 4; }
.sidebar-backdrop { background: rgba(24,36,47,.06); }
.toolbar button {
  border: 0;
  background: #f4f7f3;
  color: var(--glass-ink);
  border-radius: var(--control-radius);
  box-shadow: 0 5px 20px rgba(24,36,47,.14);
  font-weight: 600;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.toolbar button:hover { background: rgba(250,252,250,.88); color: var(--glass-ink); }
.toolbar button:active { background: #edf0ec; }
.sidebar-toggle, .friend-form button, .friend-form input, select, .import-button,
.map-tab, .search-results button, .map-search input, .details-close,
.service-message button, .asset-progress button, .announcement-toggle,
.screenshot-preview button { border-radius: var(--control-radius); }
.sidebar-toggle { border: 0; }
.sidebar-toggle:hover { box-shadow: 0 3px 12px rgba(24,36,47,.12); }
button:focus-visible, select:focus-visible, input:focus-visible,
.sidebar-toggle:focus-visible, .import-button:focus-within {
  outline: 2px solid #573480;
  outline-offset: 3px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .details {
    background-color: var(--floating-glass);
    -webkit-backdrop-filter: blur(18px) saturate(.65);
    backdrop-filter: blur(18px) saturate(.65);
  }
  .toolbar button {
    background: var(--glass-control);
    -webkit-backdrop-filter: blur(14px) saturate(.80);
    backdrop-filter: blur(14px) saturate(.80);
  }
  .toolbar button:hover { background: rgba(250,252,250,.72); }
  .toolbar button:active { background: rgba(244,247,243,.84); }
}
/* Both windows overlay the full-width map; toggling either cannot resize it. */
@media (min-width: 761px) {
  .sidebar { position: absolute; margin: 0; min-height: 0; width: 256px; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .sidebar { width: 232px; }
  .details { z-index: 5; }
}
@media (max-width: 760px) {
  .sidebar { border: 0; border-radius: var(--glass-radius); bottom: 70px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sidebar, .details, .toolbar button, .toolbar button:hover {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  .sidebar, .details, .toolbar button { background: Canvas; color: CanvasText; border: 1px solid ButtonText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.sidebar-toggle { display: flex; align-items: center; justify-content: center; gap: 5px; width: auto; min-width: 72px; flex-basis: auto; padding: 0 8px; color: #573480; font-size: 12px; font-weight: 700; }
.interaction-help p { font-size: 12px; line-height: 1.8; margin: 0; }
.interaction-help p + p { margin-top: 8px; }
.animation-option { margin-top: 12px; }
.animation-option + .notice { margin-top: 4px; }

@media (max-width: 360px) { .brand { gap: 6px; } .brand-copy { gap: 6px; } }

.scroll-input-label { display: block; font-size: 12px; margin: 8px 0 4px; }
#scrollInput { width: 100%; color: var(--glass-ink); background: rgba(255,255,255,.5); border: 0; margin-bottom: 10px; }

.sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -8px -8px 8px 0; }
.sidebar-heading h2 { margin: 0; }
.sidebar-close, .details-close { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--glass-ink); font-size: 26px; line-height: 1; cursor: pointer; }
.sidebar-close:hover, .details-close:hover { background: rgba(255,255,255,.5); }
.sidebar-close:focus-visible, .details-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.details > .details-close { position: absolute; z-index: 6; top: 8px; right: 8px; }

.composed-preview { position: relative; aspect-ratio: var(--preview-ratio); width: min(100%, calc(190px * var(--preview-ratio))); filter: drop-shadow(0 8px 7px rgba(29,42,66,.22)); }
.composed-preview img, .details .composed-preview img { position: absolute; max-width: none; max-height: none; filter: none; }
@media (max-width: 760px) { .details .composed-preview { width: min(100%, calc(100px * var(--preview-ratio))); } }

/* Shared, compact controls. Only the instructions can be folded. */
.sidebar { padding: 12px; }
.sidebar section + section { margin-top: 8px; padding-top: 0; }
.sidebar h2 { margin-bottom: 4px; }
.sidebar-heading { margin-bottom: 0; }
.sidebar .map-tabs { gap: 2px; }
.sidebar .map-tab { font-size: 14px; line-height: 1.3; min-height: 28px; padding: 4px 8px; }
.sidebar .filter-row { min-height: 28px; line-height: 1.3; }
.sidebar .map-search label { margin-bottom: 4px; }
.sidebar .map-search input { min-height: 36px; padding: 6px 8px; }
.sidebar .animation-option { margin-top: 0; }
.sidebar .animation-option + .notice { margin: 3px 0 0; line-height: 1.4; }
.sidebar .interaction-help { margin-top: 8px; font-size: 13px; }
.controls-help-toggle { width: 100%; display: block; text-align: left; color: inherit; background: transparent; border: 0; cursor: pointer; font: inherit; font-weight: 600; padding: 6px 0; min-height: 32px; }
.interaction-help p { line-height: 1.5; }
.brand-copy { flex-wrap: wrap; }
.public-only { display: none; }
.public-site .public-only { display: inline-block; }
#screenshotSave { padding: 10px 18px; border-radius: 7px; cursor: pointer; text-decoration: none; }
#screenshotSave[aria-disabled="true"] { opacity: .5; cursor: progress; }
#screenshotOpen { color: var(--accent); text-underline-offset: 3px; }
@media (max-width: 760px) {
  .brand { grid-column: 1 / -1; min-width: 0; }
  .brand-copy { gap: 6px 8px; }
  .mobile-header-toggle { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 7px; background: rgba(255,255,255,.16); color: white; font-size: 22px; cursor: pointer; }
  .sidebar { width: min(300px, calc(100% - 2 * var(--floating-window-gap))); }
  .sidebar .filters { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 8px; }
  .sidebar .map-tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 6px; }
  .sidebar .map-tab { min-height: 36px; font-size: 13px; padding: 4px 6px; }
  .sidebar .map-tab small { margin-left: 4px; }
  .sidebar .filter-row { min-height: 36px; font-size: 13px; gap: 5px; }
  .sidebar .filters > .filter-row { gap: 2px; }
  .controls-help-toggle { min-height: 36px; }
  body.mobile-header-collapsed { grid-template-rows: minmax(0,1fr); }
  body.mobile-header-collapsed .topbar { position: absolute; z-index: 6; inset: max(8px,env(safe-area-inset-top)) auto auto max(8px,env(safe-area-inset-left)); min-height: 0; padding: 0; background: transparent; box-shadow: none; pointer-events: none; }
  body.mobile-header-collapsed .topbar .brand-copy,
  body.mobile-header-collapsed .topbar .source-controls,
  body.mobile-header-collapsed .topbar .mobile-header-toggle { display: none; }
  body.mobile-header-collapsed .topbar .brand { display: block; }
  body.mobile-header-collapsed .topbar .sidebar-toggle { display: flex; pointer-events: auto; }
  body.mobile-header-collapsed .sidebar { top: calc(max(8px,env(safe-area-inset-top)) + 54px); }
  body.mobile-header-collapsed .mobile-header-expand { display: inline-flex; align-items: center; min-height: 36px; margin-left: auto; padding: 0 9px; border: 0; border-radius: 7px; background: rgba(125,75,209,.12); color: #351749; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
}

/* Resident categories stay compact until deliberately expanded. */
.residents h4 { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.resident-group { border-top:1px solid var(--line); margin-top:12px; padding-top:6px; }
.resident-group summary { cursor:pointer; padding:8px 0; font-size:13px; font-weight:600; }
.resident-group summary .resident-count { float:right; }
.resident-count { font-variant-numeric:tabular-nums; color:var(--muted); font-weight:400; }
.resident-group[open] summary { margin-bottom:6px; }
.resident-grid { gap:10px 8px; }
.resident-grid img, .portrait-missing { width:48px; height:48px; }
.critter-production { clear:both; }
.shop-production .production-recipe { font-size:15px; font-weight:600; line-height:1.55; padding:10px; background:rgba(146,92,204,.08); border-radius:8px; }
.shop-production .production-cycle { font-size:13px; margin-top:8px; }
.shop-production .feed-heading { margin:18px 0 6px; }
.feed-times { font-size:13px; margin:0; }
.feed-times div { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:6px 0; }
.feed-times dt { overflow-wrap:anywhere; }
.feed-times dd { margin:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.shop-production .production-note { font-size:12px; line-height:1.45; margin-top:10px; }

/* Bonus metadata adds at most two compact rows to decoration details. */
.decor-bonus { margin-top:16px; }
.decor-bonus h4 { font-size:13px; margin:0 0 6px; }
.decor-bonus dl { margin:0; font-size:14px; }
.decor-bonus dl div { display:flex; justify-content:space-between; gap:12px; padding:6px 0; }
.decor-bonus dt { overflow-wrap:anywhere; }
.decor-bonus dd { margin:0; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Match the animation preference to the existing header palette. */
:is(#playAnimations, #includeCharacters, #showFriendChests, #highlightFriendChests) { appearance:none; -webkit-appearance:none; display:inline-grid; place-content:center; flex:none; width:16px; height:16px; border:1px solid #7b7f7c; border-radius:3px; background:#fff; cursor:pointer; }
:is(#playAnimations, #includeCharacters, #showFriendChests, #highlightFriendChests):checked { background:var(--banner-peach); border-color:var(--banner-peach); }
:is(#playAnimations, #includeCharacters, #showFriendChests, #highlightFriendChests)::after { content:""; width:8px; height:4px; border:solid #fff; border-width:0 0 2px 2px; transform:translateY(-1px) rotate(-45deg); opacity:0; }
:is(#playAnimations, #includeCharacters, #showFriendChests, #highlightFriendChests):checked::after { opacity:1; }
:is(#playAnimations, #includeCharacters, #showFriendChests, #highlightFriendChests):disabled { opacity:.5; cursor:default; }
.chest-controls > label { display:flex; align-items:center; gap:5px; cursor:pointer; }
.chest-controls > label + label { margin-left:5px; }
@media (forced-colors:active) { :is(#playAnimations, #includeCharacters, #showFriendChests, #highlightFriendChests) { appearance:auto; -webkit-appearance:auto; } :is(#playAnimations, #includeCharacters, #showFriendChests, #highlightFriendChests)::after { display:none; } }
.map-tab:disabled { color:var(--muted); cursor:default; }

/* User-provided currency artwork; decorative because the unit stays in text. */
.currency-amount { display:inline-block; white-space:nowrap; }
.currency-icon { display:inline-block; margin-right:4px; width:20px; height:20px; background-size:contain; background-position:center; background-repeat:no-repeat; vertical-align:-4px; }
.currency-icon--bits { background-image:url('/assets/currency-coins.5a21de6173f5125a3158d4b7e2263308e5fa2c0d2ea525743903ef3a379cdfc7.png'); }
.currency-icon--gems { background-image:url('/assets/currency-gems.dd6d5493f7841a6b6eed3ba738d17f758628dcf9b12f5f0a70ceb465055188d4.png'); }
.decor-bonus dt .currency-icon { margin-right:5px; }

#fitMap { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; padding: 0; }
.fit-map-icon { flex: none; }

#worldCanvas {position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;}
#mapCanvas {position:relative;}

.studio-pony-description{margin:12px 0 16px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;}

.asset-progress[data-loading="true"] p::before{content:"";display:inline-block;width:9px;height:9px;margin-inline-end:6px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-1px;animation:asset-loading-spin .8s linear infinite;}
@keyframes asset-loading-spin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.asset-progress[data-loading="true"] p::before{animation:none;}}

.save-management-dialog { width:min(420px,calc(100vw - 2 * var(--floating-window-gap))); box-sizing:border-box; padding:18px; border:1px solid rgba(255,255,255,.72); border-radius:18px; background:rgba(247,248,241,.92); color:var(--glass-ink); box-shadow:0 18px 60px rgba(26,37,52,.28); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); }
.save-management-dialog::backdrop { background:rgba(22,30,40,.42); backdrop-filter:blur(2px); }
.save-management-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.save-management-heading h2 { margin:0; font-size:20px; line-height:1.25; }
.save-management-status { min-height:1.4em; margin:10px 0; color:#983d58; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.save-management-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.save-management-actions button { min-height:44px; padding:9px 14px; border:0; border-radius:var(--control-radius); background:var(--accent); color:white; font:inherit; font-weight:700; cursor:pointer; }
.save-management-actions button:disabled { opacity:.48; cursor:default; }
.save-management-actions button:focus-visible { outline:2px solid var(--glass-ink); outline-offset:2px; }
@media(max-width:420px){.save-management-dialog{padding:14px}.save-management-actions{grid-template-columns:1fr}}

/* Local studio tray: category names, independent horizontal virtualized lists. */
.studio-editing #mapCanvas{touch-action:none;cursor:crosshair}.studio-editing[data-studio-tool="select"] #mapCanvas{cursor:default}
.studio-tools.toolbar{top:60px;left:12px;right:auto;bottom:auto;display:flex;flex-direction:column;gap:5px;z-index:5;pointer-events:auto}
.studio-tools button{height:38px;min-width:38px;width:38px;padding:0;font-size:22px}
.toolbar button[aria-pressed="true"]{background:var(--banner-peach,#dd7b7a);color:#fff;border-color:var(--banner-peach,#dd7b7a)}
.studio-hint{position:absolute;top:10px;left:12px;max-width:calc(100% - 24px);font-size:12px;color:#392740;background:#fff0f6eb;border:1px solid #f2b5ce;border-radius:9px;padding:6px 9px;pointer-events:none;z-index:4;line-height:1.4}
.studio-editing .toolbar:not(.studio-tools):not(.studio-drawer):not(.studio-actions):not(.studio-history){z-index:5}
.studio-actions.toolbar{bottom:74px;left:50%;right:auto;transform:translateX(-50%);display:flex;justify-content:center;gap:6px;max-width:calc(100% - 28px);z-index:6;pointer-events:auto}
.studio-actions button{white-space:nowrap;height:37px;font-size:12px;padding:0 10px}.studio-actions label{background:#fff7fb;padding:8px;border-radius:10px;font-size:12px;white-space:nowrap}.studio-actions input{accent-color:#df83aa;vertical-align:middle;margin-right:6px}
.studio-history.toolbar{left:12px;right:auto;top:auto;bottom:70px;display:flex;align-items:center;gap:8px;z-index:5;pointer-events:auto}
.studio-history button{position:relative;border-radius:50%;width:56px;height:56px;min-width:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;line-height:1}
.studio-history-arrow{display:block;width:32px;height:23px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}#studioRedo .studio-history-arrow{transform:scaleX(-1)}
.studio-history button small{position:static;display:block;font-size:9px;font-weight:600;white-space:nowrap;padding:0;color:inherit;line-height:12px;pointer-events:none}.studio-save-status{font-size:10px;background:#fff6fae8;border-radius:5px;padding:4px 6px;white-space:nowrap}
.studio-drawer.toolbar{display:block;top:auto;bottom:auto;left:16px;right:auto;max-width:none;margin:0;overflow:hidden;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;backdrop-filter:none;z-index:8;pointer-events:auto;color:#33283d}
.studio-library-open .studio-actions.toolbar{bottom:282px}
.studio-library-tabs{display:flex;gap:4px;overflow:auto;scrollbar-width:thin;margin-bottom:6px}.studio-library-tabs button{height:32px;min-width:62px;padding:0 10px;font-size:12px;border-radius:7px;box-shadow:none;flex:1;white-space:nowrap}
.studio-library-search{display:flex;gap:6px;align-items:center;margin-bottom:6px}.studio-library-search input,.studio-library-search select{border:1px solid #dbc4d6;border-radius:8px;min-width:0;height:31px;font:inherit;font-size:12px;padding:4px 8px;background:white;color:#38273b}.studio-library-search input{flex:1}.studio-library-search select{max-width:180px}.studio-library-count{font-size:11px;min-width:22px;text-align:center}
.studio-library-list{height:84px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-color:#d986b0 #f4e3ed;scrollbar-width:auto;touch-action:pan-x}.studio-library-strip{height:72px;position:relative}.studio-library-strip>p{font-size:12px;width:300px;margin:12px}
.studio-library-row{position:absolute;top:0;display:flex;align-items:center;gap:5px;width:140px;height:70px!important;padding:5px!important;text-align:left;box-shadow:none!important;border:1px solid #ebd5e1!important;border-radius:8px!important;background:#fff!important;touch-action:none;user-select:none;cursor:grab}
.studio-library-row>span{min-width:0}.studio-library-row strong{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.25;font-weight:600;overflow-wrap:anywhere}.studio-library-row small{display:block;font-size:10px;color:#795169;margin-top:4px;line-height:1.2}.studio-thumb{width:48px;height:48px;object-fit:contain;flex-shrink:0;pointer-events:none}.details>.studio-thumb{width:100%;height:180px}
.studio-dragging-library .studio-drawer{opacity:.72}
.studio-drawer[hidden],.studio-tools[hidden],.studio-actions[hidden],.studio-history[hidden],.studio-hint[hidden]{display:none!important}
@media(max-width:760px){.studio-tools.toolbar{top:70px;left:8px;gap:4px}.studio-tools button{width:36px;min-width:36px;height:36px}.studio-drawer.toolbar{left:8px;right:8px;bottom:58px;padding:7px}.studio-history.toolbar{top:auto;left:8px}.studio-actions.toolbar{bottom:67px;flex-wrap:wrap;width:calc(100% - 20px)}.studio-library-open .studio-actions.toolbar{bottom:276px}.studio-hint{font-size:10px;max-width:calc(100% - 16px);left:8px}.studio-actions button{height:32px;font-size:11px}.toolbar #studioCard{font-size:11px;padding:0 8px}.toolbar #studioEdit{padding:0;min-width:36px}.studio-library-tabs button{min-width:56px;padding:0 8px;height:36px}.studio-library-search select{max-width:133px}}

.studio-main-toolbar.toolbar{justify-content:flex-start;gap:8px}.studio-main-toolbar #studioCard{margin-left:auto}.studio-main-toolbar #screenshotButton{margin-left:0}
.studio-maze-team-tools{display:flex;gap:8px;align-items:center}.studio-maze-team-tools[hidden]{display:none}.studio-maze-team-tools #studioPonySquad{white-space:nowrap}
.studio-main-toolbar.toolbar{flex-wrap:wrap}
.studio-maze-scrollbar[hidden]{display:none}

/* Direct manipulation keeps the map available; the tray only hides its UI. */
.studio-chest-rays{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;contain:strict;z-index:1;overflow:hidden}
.studio-chest-anchor{position:absolute;left:0;top:0;width:1px;height:1px;transform-origin:0 0;isolation:isolate;will-change:transform}
.studio-chest-ray,.studio-chest-body{position:absolute;display:block;max-width:none;pointer-events:none}
.studio-chest-ray{left:0;top:0;z-index:0;opacity:.97;transform-origin:50% 50%;animation:studio-chest-ray-spin 10.134s linear infinite;will-change:transform}
.studio-chest-body{z-index:1}
@keyframes studio-chest-ray-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.studio-chest-ray{animation:none;transform:none}}
/* Map actors stay below floating menus and their backdrop. */
.studio-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.studio-chest-popover{position:absolute;z-index:1;padding:4px;background:rgba(250,252,250,.72);border:1px solid rgba(255,255,255,.78);border-radius:8px;box-shadow:0 5px 18px rgba(24,36,47,.16);-webkit-backdrop-filter:blur(12px) saturate(.8);backdrop-filter:blur(12px) saturate(.8);pointer-events:auto}
.studio-chest-popover button{height:44px;min-width:0;padding:0 12px;color:#1f2a38;background:rgba(255,255,255,.62);border:0;border-radius:6px;box-shadow:none;font:inherit;font-weight:700;cursor:pointer}
.studio-chest-popover button:hover{background:rgba(255,255,255,.9);color:#111820}
.studio-editing[data-studio-tool="edit"] #mapCanvas{cursor:default}
.studio-tools button{width:auto;min-width:44px;height:44px;font-size:21px}
#studioInventory{font-size:12px;padding:0 9px;max-width:100px}
.studio-object-action.toolbar{position:absolute;transform:translateX(-50%);right:auto;bottom:auto;z-index:7;pointer-events:auto}
.studio-object-action button{width:48px;height:48px;padding:3px;border-radius:50%;background:#fff5fbd9;box-shadow:0 3px 12px #46234c40}
.studio-object-action img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.studio-object-action[hidden]{display:none!important}
.studio-selection-label,.studio-current-tool{font-size:12px;line-height:1.3;align-self:center;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px;color:#452a44}
.studio-actions.toolbar{background:#fff5fbe8;padding:6px;border-radius:12px;flex-wrap:wrap;align-items:center}
.studio-actions button{height:40px}
.studio-actions .studio-placement-action-icon{width:40px;min-width:40px;padding:0;display:grid;place-items:center;color:#2f2931}
.studio-placement-action-icon svg{display:block;width:25px;height:25px;fill:none}
.studio-placement-action-icon[aria-pressed="true"]{color:#fff}
#studioDone{font-weight:700;color:#963867}

.studio-save-status{background:none;color:#806176}
@media(max-width:760px){
 .studio-tools.toolbar{top:auto;bottom:64px;left:50%;right:auto;transform:translateX(-50%);flex-direction:row;gap:6px;background:#fff4fae8;border-radius:12px;padding:5px}
 .studio-tools button{width:auto;min-width:44px;height:44px}
 .studio-history.toolbar{left:8px;right:auto;top:auto;gap:5px}
 .studio-history button{width:44px;height:44px;min-width:44px}.studio-history button small{font-size:8px}
 .studio-drawer.toolbar{bottom:auto;max-height:none;overflow:visible}
 .studio-actions.toolbar{bottom:123px;width:auto;max-width:calc(100% - 18px);padding:5px;gap:4px}
 .studio-actions button{height:44px;font-size:12px;padding:0 8px}
 .studio-selection-label,.studio-current-tool{max-width:155px;font-size:11px}
 .studio-hint{max-width:calc(100% - 16px)}
 .studio-object-action button{width:46px;height:46px}
}

/* Original game category art, with visible accessible text on every tab. */
.studio-library-tabs button[role="tab"]{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;min-width:82px;background:#8562b8;color:#fff;border:0}
.studio-category-icon{width:31px;height:31px;object-fit:contain;pointer-events:none;flex-shrink:0}
#studioPlace{font-weight:700;background:#d5f3dd;color:#225b37}#studioCancel{font-weight:700;color:#923f62}
@media(max-width:760px){.studio-library-tabs button[role="tab"]{flex-direction:column;gap:2px;min-width:52px;height:48px;padding:4px;font-size:10px}.studio-category-icon{width:30px;height:30px}}

.studio-history button small{display:flex;gap:2px;align-items:center;justify-content:center}.studio-history kbd{font:inherit;line-height:12px;border:1px solid currentColor;border-bottom-width:2px;border-radius:3px;padding:0 2px;opacity:.88}.studio-history[data-platform="windows"] button{min-width:60px;width:60px}
@media(max-width:760px){.studio-history[data-platform="windows"] button{min-width:48px;width:48px}.studio-history kbd{padding:0 1px;line-height:10px}}

/* The close target stays outside the horizontally scrolling native tabs. */
.studio-library-header{display:flex;gap:6px;align-items:stretch;min-width:0;margin-bottom:6px;position:sticky;top:0;z-index:2;background:transparent}
.studio-library-header .studio-library-tabs{flex:1;min-width:0;margin-bottom:0}
.studio-library-close{flex:0 0 48px;width:48px;min-width:48px;min-height:48px;height:auto!important;padding:0!important;font-size:27px;border-radius:9px;touch-action:manipulation;box-shadow:none!important}
.studio-eraser-icon{stroke:#111;fill:none;width:30px;height:30px;object-fit:contain;pointer-events:none}
.studio-store-inline{display:flex;align-items:center;gap:5px;min-width:72px;min-height:44px}
.studio-store-inline img{width:30px;height:30px;object-fit:contain;pointer-events:none}
.studio-library-row:disabled{opacity:.6;cursor:not-allowed}
.studio-save-status{display:block;max-width:100px;white-space:normal;line-height:1.25;align-self:center}
.studio-save-status[data-save-state="error"],.studio-save-status[data-save-state="load-error"]{color:#a31b46}
#studioRetrySave{font-size:11px;min-width:44px;width:auto;height:36px}
#studioRetrySave[hidden]{display:none!important}
@media(max-width:760px){.studio-save-status{display:block;font-size:9px;max-width:72px}.studio-library-close{min-height:48px}.studio-history.toolbar{max-width:240px;flex-wrap:wrap;justify-content:flex-end}}

/* Independent native inventory cards reveal the map between tabs. */
.toolbar #studioEdit[aria-pressed="true"]{background:var(--banner-peach);color:#fff;box-shadow:none}
.studio-drawer.toolbar{--inventory-surface:#fff8fc;background:transparent}
.studio-library-header{align-items:flex-start}
.studio-library-header .studio-library-tabs{gap:6px;padding:0;isolation:isolate;scrollbar-width:none;background:transparent;border-radius:0}
.studio-library-tabs button[role="tab"]{position:relative;flex-shrink:0;margin-top:5px;height:46px;border-radius:10px 10px 5px 5px;background:linear-gradient(#9a81d6,#8061be);color:white;overflow:visible;box-shadow:none}
.studio-library-tabs button[aria-selected="true"]{z-index:1;margin-top:0;height:51px;border-radius:10px 10px 5px 5px;background:var(--inventory-surface);color:#8562b8;box-shadow:none}



.studio-category-ink{display:none;width:31px;height:31px;flex:none;background:currentColor;mask:var(--category-image) center/contain no-repeat;-webkit-mask:var(--category-image) center/contain no-repeat}
.studio-library-tabs [aria-selected="true"] .studio-category-icon{display:none}
.studio-library-tabs [aria-selected="true"] .studio-category-ink{display:block}
.studio-library-tabs button:focus-visible{outline:2px solid #6d408f;outline-offset:-3px}
.studio-library-close{margin-top:7px}
@media(max-width:760px){.studio-library-tabs button[role="tab"]{height:48px}.studio-library-tabs button[aria-selected="true"]{height:53px}.studio-category-ink{width:30px;height:30px}}

.studio-detail-section{margin-top:13px}.studio-detail-section h4{font-size:15px;margin:0 0 7px;color:#5d4262}.studio-detail-section p{line-height:1.55}
.clearable-cost{display:flex;align-items:center;gap:8px;min-height:38px}.clearable-cost strong{font-size:24px;line-height:1;color:#50335e}.clearable-cost img{width:38px;height:38px;object-fit:contain}.clearable-cost .currency-icon{width:34px;height:34px;margin:0}.clearable-cost small{color:#756676;font-size:12px}
.clearable-health{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0 12px}.clearable-health small{color:#756676;font-size:13px}.clearable-health-segments{display:flex;gap:4px;width:100%;max-width:210px}.clearable-health-segments img{width:0;flex:1 1 0;max-width:34px;height:auto;object-fit:contain}.clearable-health-continuous{position:relative;width:178px;height:28px;transform:skewX(-9deg);border:3px solid #a5b7c6;background:#dce5eb;overflow:hidden;box-sizing:content-box}.clearable-health-continuous img{position:absolute;inset:0;width:178px;height:28px;clip-path:inset(0 calc((1 - var(--health-fill))*100%) 0 0)}.clearable-health-continuous strong{position:absolute;inset:0;display:grid;place-items:center;font-size:19px;color:#164e70;text-shadow:0 0 2px white,1px 1px 0 white,-1px -1px 0 white;transform:skewX(9deg)}
@media(max-width:620px){.clearable-detail{margin-bottom:64px}.clearable-detail h4{clear:both}.clearable-health-continuous{clear:both;max-width:100%}}
.clearable-health-segments{flex-wrap:nowrap;align-items:flex-start}.clearable-health-segments img{aspect-ratio:45/16;min-width:0;align-self:flex-start}
.clearable-health-continuous img{width:100%;height:100%}

/* Read-only maze dialogs reuse the site's coral, white and frosted-glass language. */
.studio-maze-dialog{position:absolute;inset:0;z-index:31;display:grid;place-items:center;padding:24px;background:rgba(28,20,32,.22);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.studio-maze-window{position:relative;width:min(440px,calc(100vw - 48px));max-height:min(720px,calc(100vh - 48px));overflow:auto;padding:22px;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:rgba(255,251,253,.9);box-shadow:0 16px 48px rgba(56,30,57,.24),inset 0 1px rgba(255,255,255,.85);color:#252c3b}
.studio-maze-window header{display:flex;align-items:center;gap:14px;padding-right:48px;margin-bottom:18px}.studio-maze-window header p{margin:0 0 2px;color:#a23b68;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.studio-maze-window h2{margin:0;font-size:27px}.studio-maze-shop-model{width:96px;height:82px;display:grid;place-items:center;flex:0 0 auto}.studio-maze-shop-model img{display:block;max-width:96px;max-height:82px;object-fit:contain}
.studio-maze-pool-window{width:min(500px,calc(100vw - 48px))}.studio-maze-pool-window header>div:last-child{min-width:0;flex:1}
.studio-maze-close{position:absolute;right:14px;top:14px;z-index:2}
.studio-maze-shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:12px 8px;padding:4px 0}.studio-maze-shop-card{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:2px;text-align:center;background:transparent;border:0;cursor:pointer}
.studio-maze-chest-art{width:88px;height:64px;display:grid;place-items:center}.studio-maze-chest-model{max-width:88px;max-height:64px;object-fit:contain}.studio-maze-chest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:12px 8px;max-height:360px;overflow:auto;padding:8px 4px;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#b777aa #f1e4ef}.studio-maze-chest-grid::-webkit-scrollbar{width:9px;height:9px}.studio-maze-chest-grid::-webkit-scrollbar-track{background:#f1e4ef;border-radius:8px}.studio-maze-chest-grid::-webkit-scrollbar-thumb{background:#b777aa;border-radius:8px}.studio-maze-chest-grid article{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}.studio-maze-chest-grid article [data-pony-id]{width:64px;height:64px}.studio-maze-chest-grid article .studio-portrait-crop{width:64px;height:64px}.studio-maze-item-reward{gap:5px;padding:12px 4px}
.studio-maze-chest-title-row{display:flex;align-items:center;flex-wrap:nowrap;gap:10px 12px;white-space:nowrap}.studio-maze-chest-title-row>p{flex:none}.studio-maze-chest-sort{display:flex;align-items:center;gap:6px;color:#6e4e73;font-size:12px;font-weight:700}.studio-maze-chest-sort select{min-height:32px;padding:3px 22px 3px 7px;border:1px solid rgba(110,78,115,.28);border-radius:7px;background:rgba(255,255,255,.8);color:#353142;font:inherit;font-weight:700}
.studio-maze-shop-pony{width:76px;height:76px;overflow:hidden}.studio-maze-shop-pony .studio-portrait-crop{width:76px;height:76px}.studio-maze-shop-card strong{display:grid;place-items:start center;min-height:34px;margin-top:3px;font-size:13px;line-height:1.25;overflow-wrap:anywhere}.studio-maze-price{display:flex;align-items:center;gap:3px;margin-top:5px;color:#6e4e73;font-size:15px;font-weight:800}.studio-maze-price--purchased{filter:grayscale(1);opacity:.48}.studio-maze-currency{width:22px;height:22px;object-fit:contain}.studio-maze-stats{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:5px}.studio-maze-stat{display:flex;align-items:center;gap:1px;color:#353142;font-size:12px;font-variant-numeric:tabular-nums}.studio-maze-stat img{width:20px;height:20px;object-fit:contain}.studio-maze-stat b{font-weight:750}.studio-maze-current{min-height:22px;margin-top:5px;color:#855b78;font-size:10px;font-weight:700;line-height:1.25}.studio-maze-error{display:grid;place-items:center;min-height:120px;margin:0;color:#8a3147;font-size:16px;font-weight:700;text-align:center}.studio-maze-combat-window{width:min(360px,calc(100vw - 32px));text-align:center}.studio-maze-combat-window header{justify-content:center;padding-right:0;margin-bottom:0}.studio-maze-combat-heading p{margin:0}.studio-maze-combat-portrait{width:150px;height:150px;margin:2px auto 10px;display:grid;place-items:center}.studio-maze-combat-portrait .studio-portrait-crop{width:150px;height:150px}.studio-maze-boss-profile{position:relative;padding-top:46px}.studio-maze-boss-profile .studio-maze-combat-portrait,.studio-maze-boss-profile .studio-portrait-crop{width:116px;height:116px}.studio-maze-boss-profile .studio-maze-combat-portrait{margin:0 auto}.studio-maze-boss-name{position:relative;z-index:2;max-width:100%;margin:-7px auto 0!important;font-size:25px!important;font-weight:850;line-height:1.08;overflow-wrap:anywhere;color:var(--ink,#293348);-webkit-text-stroke:3px rgba(255,255,255,.98);paint-order:stroke fill;text-shadow:0 1px 1px rgba(255,255,255,.9)}.studio-maze-combat-window>.studio-maze-requirements{position:relative;z-index:2;gap:28px;margin:12px 0 16px}.studio-maze-combat-window>.studio-maze-requirements .studio-maze-stat{gap:4px;font-size:15px}.studio-maze-combat-window>.studio-maze-requirements .studio-maze-stat img{width:27px;height:27px}.studio-maze-rewards{position:relative;z-index:2;border-top:1px solid rgba(100,70,100,.18);padding-top:14px}.studio-maze-rewards h3{margin:0 0 9px;font-size:20px}.studio-maze-reward{display:inline-flex;align-items:center;gap:6px;margin:4px 9px;color:#4b3854;font-size:15px}.studio-maze-reward img{width:27px;height:27px;object-fit:contain}
@media(max-width:620px){.studio-maze-dialog{padding:12px}.studio-maze-window{width:calc(100vw - 24px);max-height:calc(100vh - 24px);padding:16px}.studio-maze-window header{gap:8px}.studio-maze-window h2{font-size:23px}.studio-maze-shop-model{width:78px}.studio-maze-shop-model img{max-width:78px}.studio-maze-shop-grid{gap:8px 4px}.studio-maze-shop-pony,.studio-maze-shop-pony .studio-portrait-crop{width:64px;height:64px}.studio-maze-shop-card strong{min-height:39px;font-size:12px}.studio-maze-stats{gap:4px}.studio-maze-stat img{width:18px;height:18px}.studio-maze-current{font-size:9px}.studio-maze-pool-window .studio-maze-chest-title-row{white-space:normal;flex-wrap:wrap}}
.studio-maze-requirements{display:flex;justify-content:center;gap:24px;margin:8px 0 14px}
.studio-maze-production{margin:0 0 12px;padding:9px 11px;border-radius:10px;background:rgba(146,92,204,.08);text-align:center}.studio-maze-production h3{margin:0 0 4px;font-size:15px}.studio-maze-production p{display:flex;justify-content:center;align-items:center;gap:5px;margin:0;font-size:14px}.studio-maze-production .studio-maze-currency{width:22px;height:22px}
.studio-maze-party-grid{display:grid;gap:12px;text-align:center}.studio-maze-party-main{display:flex;justify-content:center}.studio-maze-party-assigned{display:flex;justify-content:center;gap:16px;min-height:92px}.studio-maze-party-available{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-columns:74px;gap:10px 12px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 8px;scroll-snap-type:x proximity}.studio-maze-party-grid article{position:relative;min-width:0;scroll-snap-align:start}.studio-maze-party-available{scrollbar-width:thin;scrollbar-color:#b777aa #f1e4ef}.studio-maze-party-available::-webkit-scrollbar{height:9px}.studio-maze-party-available::-webkit-scrollbar-track{background:#f1e4ef;border-radius:8px}.studio-maze-party-available::-webkit-scrollbar-thumb{background:#b777aa;border-radius:8px}.studio-maze-party-face{position:relative;width:100%;display:grid;place-items:center}.studio-maze-party-grid .studio-maze-combat-portrait{width:76px;height:76px;margin:0 auto 3px}.studio-maze-party-main .studio-maze-combat-portrait{width:128px;height:128px}.studio-maze-party-grid .studio-maze-combat-portrait .studio-portrait-crop{width:100%;height:100%;border-radius:50%}.studio-maze-party-badge{position:absolute;right:2px;top:0;width:24px;height:24px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(50,30,50,.25))}.studio-maze-party-grid .studio-maze-requirements{gap:4px;margin:2px 0 0}.studio-maze-party-grid .studio-maze-stat{font-size:11px}.studio-maze-party-grid .studio-maze-stat img{width:17px;height:17px}.studio-maze-party-main .studio-maze-stat{font-size:13px}.studio-maze-party-main .studio-maze-stat img{width:20px;height:20px}
.studio-pony-heading{display:flex;align-items:center;gap:14px;margin-top:18px}.studio-pony-heading .object-name{margin:0;font-size:23px}.studio-pony-portrait{width:96px;height:96px;object-fit:contain;flex:none}
.studio-maze-party-badge{right:0;top:-2px;width:28px;height:28px;filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 1px rgba(50,30,50,.25))}
.studio-home-link{display:block;width:100%;background:none;border:0;border-radius:0;padding:0;cursor:pointer;color:inherit;font:inherit}.studio-home-link--static{cursor:pointer}.studio-home-link>.composed-preview{width:min(100%,calc(120px * var(--preview-ratio)));margin:0 auto}.studio-home-link>span{display:block;margin:4px 0;font-size:12px}.studio-home-link:focus-visible,.studio-resident-card:focus-visible{outline:3px solid #ac6aab;outline-offset:2px}
.studio-resident-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:3px 2px;border:0;border-radius:0;color:inherit;background:none;font:inherit;text-align:center;min-width:0;width:100%;cursor:pointer;overflow-wrap:anywhere;isolation:isolate}.studio-resident-card .studio-pony-portrait{width:56px;height:56px}.studio-resident-card small{font-size:11px;color:#756676}.studio-detail-section>.studio-resident-card{display:inline-flex;width:calc(50% - 8px);margin:4px;font-size:13px;vertical-align:top}.resident-grid>li>.studio-resident-card{height:100%}
.studio-task{padding:7px 0;margin:0;background:none;border:0;border-bottom:1px solid #e6d9e3;border-radius:0}.studio-task h5{font-size:14px;line-height:1.3;margin:0 0 3px}.studio-task p{font-size:12px;margin:3px 0;line-height:1.3}.studio-task-duration{color:#74637e}.studio-task-rewards{display:flex;flex-wrap:wrap;gap:10px}.studio-task-reward{display:inline-flex;align-items:center;gap:4px;font-size:13px}.studio-task .currency-icon{width:21px;height:21px}.studio-task progress{width:100%;height:8px;accent-color:#a874bd}.studio-requirement-icon{width:38px;height:38px;object-fit:contain;float:left;margin:0 9px 5px 0}
.studio-traveler-card{display:flex;align-items:center;gap:11px;margin:0 0 8px;padding:4px 0 10px;border-bottom:1px solid #e6d9e3}.studio-traveler-card>.studio-portrait-crop{width:72px;height:72px}.studio-traveler-name{font-size:17px;line-height:1.2;overflow-wrap:anywhere}
@media(max-width:420px){.studio-traveler-card>.studio-portrait-crop{width:64px;height:64px}}
.studio-status-list>div{display:flex;justify-content:space-between;gap:12px;margin:12px 0}.studio-status-list dd{margin:0;font-variant-numeric:tabular-nums}.studio-region-link,.studio-resident-card .studio-visitor-location{background:#f8e8f2;border:1px solid #e4cadf;border-radius:10px;font:inherit;color:#623666;cursor:pointer}.studio-region-link{display:block;width:100%;padding:12px;margin:8px 0}

.studio-collection-chips{display:flex;flex-wrap:wrap;gap:6px}.studio-collection-chips>button{font:inherit;color:inherit;border:0;cursor:pointer;padding:5px 9px;background:#f4e6f1;border-radius:9px;font-size:12px;overflow-wrap:anywhere}

/* Floating library controls and compact native details. */
.studio-drawer.toolbar{padding:0;resize:none;overflow:visible}
.studio-drawer .studio-library-header{margin-bottom:4px;position:relative;padding-top:10px}
.studio-window-titlebar{position:absolute;left:0;right:0;top:0;height:14px;cursor:grab;touch-action:none;border-radius:8px}.studio-window-titlebar:focus-visible{outline:2px solid #aa759c;outline-offset:-2px}
.studio-window-resize{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;touch-action:none;z-index:4;border-radius:8px}
.studio-window-resize-left{left:-4px}.studio-window-resize-right{right:-4px}
.studio-window-resize:focus-visible{outline:2px solid #aa759c;outline-offset:-3px}
.studio-library-search{margin-bottom:4px}.studio-library-row small{margin-top:2px}.studio-theme-cover{width:58px;height:54px}.studio-library-tabs button[role="tab"]{min-width:70px}
.studio-history button[hidden]{display:none!important}.studio-history.toolbar{top:auto;right:auto;justify-content:flex-start;flex-wrap:nowrap}
.studio-main-toolbar.toolbar{z-index:9!important}.studio-history.toolbar{z-index:9}
.studio-pony-heading{margin-top:4px;gap:10px}.studio-pony-heading .studio-pony-portrait{width:76px;height:76px}.studio-pony-heading .object-name{font-size:21px}
.studio-reward-icon{width:23px;height:23px;object-fit:contain}.studio-task-reward{line-height:25px}.studio-pro-badge{width:auto;height:64px;object-fit:contain}
/* Collection card: balanced portrait grid with a dedicated reward column. */
.studio-collection-popup{position:fixed;z-index:40;width:min(var(--collection-width),calc(100vw - 24px));max-height:calc(100dvh - 24px);display:flex;flex-direction:column;background:#fffafc;color:#3c3443;border:1px solid #e7c9d7;border-radius:18px;box-shadow:0 12px 40px #39213233;font:inherit}
.studio-collection-popup>header{position:relative;display:flex;align-items:center;justify-content:center;min-height:58px;flex:none;background:var(--banner-peach,#d88080);padding:10px 58px;border-radius:17px 17px 0 0}
.studio-collection-popup h3{color:#fff;font-size:20px;font-weight:600;text-align:center;margin:0;line-height:1.35;overflow-wrap:anywhere}.studio-collection-close{position:absolute;right:7px;top:7px;width:44px;height:44px;border:0;border-radius:10px;background:#ffffff30;font:inherit;font-size:26px;cursor:pointer;color:#fff}.studio-collection-close:hover{background:#ffffff50}
.studio-collection-body{overflow-x:hidden;overflow-y:auto;padding:10px 12px 12px;min-height:0}.studio-collection-progress{display:flex;align-items:baseline;gap:7px;font-size:12px;color:#968194;margin:0 0 7px}.studio-collection-progress strong{font-size:13px;color:#735575;font-weight:600;font-variant-numeric:tabular-nums}.studio-collection-progress small{margin-left:auto;font-size:10px}
.studio-collection-content{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:12px;align-items:center}.studio-collection-grid{display:grid;grid-template-columns:repeat(var(--collection-columns),minmax(0,1fr));gap:8px 5px}.studio-collection-member{display:flex;align-items:center;flex-direction:column;gap:5px;border:0;background:none;color:inherit;font:inherit;font-size:12px;line-height:1.35;padding:2px 0;border-radius:10px;cursor:pointer;min-width:0;overflow-wrap:anywhere}
.studio-collection-member:disabled{cursor:default;opacity:1}.studio-collection-member:not(:disabled):hover{background:#f5e7f0}.studio-collection-member:focus-visible,.studio-collection-chips>button:focus-visible{outline:2px solid #9b64a2;outline-offset:2px}.studio-collection-face{position:relative;display:block;width:min(100%,72px);height:72px}.studio-collection-face>.studio-pony-portrait,.studio-collection-face>.studio-thumb{width:100%;height:100%}
.studio-collection-members hr{border:0;border-top:1px solid #dccbd9;margin:12px 0 7px}.studio-collection-group-label{display:block;font-size:10px;color:#9b8798;margin-bottom:7px}
.studio-collection-rewards{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:#f6ecf3;border-radius:13px;padding:10px 8px}.studio-collection-rewards h4{font-size:12px;font-weight:500;color:#8b6c84;margin:0}.studio-collection-reward-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}.studio-reward-or{text-decoration:none;border:0;cursor:help;font-size:12px;color:#9b8292}.studio-collection-reward{display:flex;flex-direction:row;align-items:center;gap:4px;font-size:12px;line-height:1.4}.studio-collection-reward>small{font-size:11px;color:#957b8d}.studio-collection-reward>.studio-pony-portrait,.studio-reward-picture{width:46px;height:46px;object-fit:contain}.studio-collection-reward .currency-icon{width:26px;height:26px}.studio-collection-reward .studio-task-reward{font-size:14px}.studio-collection-alternative{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:3px;color:#957b8d;font-size:10px;line-height:1.4}.studio-collection-alternative .studio-collection-reward{flex-direction:row}.studio-collection-alternative .studio-pony-portrait,.studio-collection-alternative .studio-reward-picture{width:24px;height:24px}
@media(max-width:760px){.studio-library-tabs button[role="tab"]{min-width:52px}.studio-category-icon,.studio-category-ink{width:24px;height:24px}.studio-library-header .studio-library-tabs{padding:5px 4px 0;gap:4px}.studio-drawer.toolbar{left:8px;right:auto;bottom:auto}.studio-collection-body{padding:12px 14px 14px}.studio-collection-popup h3{font-size:18px}.studio-collection-grid{grid-template-columns:repeat(min(var(--collection-columns),3),minmax(0,1fr));gap:9px 5px}.studio-collection-rewards{padding:10px 6px}.studio-collection-reward{flex-direction:row;gap:6px}.studio-collection-reward>.studio-pony-portrait,.studio-reward-picture{width:42px;height:42px}.studio-collection-alternative{flex-direction:row;gap:8px;margin:0;width:100%;justify-content:flex-end}.studio-collection-face{width:66px;height:66px}.studio-home-link>.composed-preview{width:min(100%,calc(95px * var(--preview-ratio)))} }

.studio-collection-reward-line{flex-direction:column;flex-wrap:nowrap;gap:4px}.studio-collection-rewards .studio-pony-portrait,.studio-collection-rewards .studio-reward-picture,.studio-collection-rewards .studio-portrait-crop{width:48px;height:48px}.studio-collection-rewards .studio-task-reward{font-size:12px;gap:3px}.studio-collection-rewards .currency-icon{width:22px;height:22px}

.studio-portrait-crop{position:relative;display:block;overflow:visible;border-radius:50%;background:#fff;flex:none;width:42px;height:42px}.studio-portrait-crop>img.studio-pony-portrait{position:absolute;max-width:none;object-fit:fill}.studio-collection-face>.studio-portrait-crop{width:100%;height:100%}
.details .object-preview,.details .studio-portrait-crop{background:transparent}
.studio-collection-face{height:auto;aspect-ratio:1}
.studio-collection-member{gap:3px}
.studio-collection-member>span:last-child{display:block;width:100%;min-height:1.2em;font-weight:750;line-height:1.2}
.studio-collection-popup .studio-reward-pony-name{font-weight:750;margin:0}
@media(max-width:760px){.studio-collection-face{width:min(100%,66px);height:auto}}
.studio-collection-popup button,.studio-collection-chips>button{-webkit-tap-highlight-color:transparent}

@media(min-width:761px){.studio-history button{height:48px}}

@media(max-width:360px){.studio-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-collection-face{width:min(100%,66px)}}

.studio-status-list .studio-material-row{align-items:center;padding:3px 0;min-height:38px}.studio-material-row dt{display:flex;align-items:center}.studio-material-row img{display:block;width:36px;height:36px;object-fit:contain}.studio-material-row dd{font-variant-numeric:tabular-nums}

.studio-collection-reward.studio-collection-pony-reward{flex-direction:column;gap:3px;max-width:100%}
.studio-reward-pony-link{display:block;flex:none;border:0;padding:0;margin:0;background:none;color:inherit;cursor:pointer}.studio-reward-pony-link:disabled{opacity:1;cursor:default}.studio-reward-pony-link:focus-visible{outline:2px solid #9b64a2;outline-offset:3px;border-radius:4px}
.studio-reward-pony-name{font-size:11px;line-height:1.2;overflow-wrap:anywhere}
.studio-task-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:3px}.studio-task-heading h5{margin:0;min-width:0}.studio-task-heading .studio-task-duration{flex:none;white-space:nowrap;font-size:12px;line-height:1.3}
.resident-grid{row-gap:5px}.resident-grid .studio-resident-card{line-height:1.2}.studio-detail-section>.studio-resident-card{margin:2px 4px}

.studio-resident-card>.studio-portrait-crop{width:48px;height:48px}

.resident-grid{row-gap:2px}.resident-grid li{gap:2px;line-height:1.2}.resident-grid .studio-resident-card{padding:0 2px;gap:1px}.resident-grid .studio-portrait-crop{width:48px;height:48px}.residents h4{margin-bottom:5px}.resident-group{margin-top:7px;padding-top:3px}.resident-group summary{padding:4px 0}.resident-group[open] summary{margin-bottom:2px}

.studio-library-count{background:#ffffffbc;border-radius:6px;padding:3px 5px}.studio-library-close{background:#ffffffba!important;border-radius:10px!important}.studio-drawer .studio-library-search{gap:5px}.studio-drawer.toolbar .studio-library-tabs{background:transparent}

@media(max-height:520px) and (min-width:761px){.studio-hint{display:none!important}.studio-tools.toolbar{top:8px;left:auto;right:12px;bottom:auto;flex-direction:row;align-items:center}.studio-tools button{min-width:44px;height:44px}.studio-tools #studioInventory{width:auto;padding:0 10px}}

.toolbar #studioCard[aria-pressed="true"]{background:var(--banner-peach)}

/* Inventory feedback must remain visible above the collection dialog. */
.toast{z-index:50}

/* Native gamesubhuds buttons carry their own rim, color and shadow. */
.studio-object-action.toolbar{display:block;background:transparent!important;border:0!important;border-radius:0;box-shadow:none!important;backdrop-filter:none!important;padding:0;max-width:calc(100% - 16px)}
.studio-object-action button[data-edit-action]{position:absolute;margin:0;padding:0;border:0;border-radius:50%;background:transparent!important;box-shadow:none!important;min-width:44px;min-height:44px;overflow:visible;transform:none}
.studio-object-action button[data-edit-action] img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.studio-object-action .native-pressed{visibility:hidden}
.studio-object-action button:active:not(:disabled) .native-normal{visibility:hidden}
.studio-object-action button:active:not(:disabled) .native-pressed{visibility:visible}
.studio-object-action button:disabled{opacity:.4;cursor:not-allowed}
.studio-object-action button:focus-visible{outline:3px solid #57318b;outline-offset:3px}
.studio-song-scores .studio-status-list{margin:0}
.studio-song-scores .studio-status-list>div{margin:0;padding:5px 0;gap:8px;line-height:1.3}
.studio-song-scores dt{min-width:0;overflow-wrap:anywhere}
.studio-song-scores dd{white-space:nowrap}
.studio-resident-card .studio-visitor-location{padding:7px 10px;min-height:36px;margin-top:3px;font-size:11px;line-height:1.25;text-decoration:none;box-shadow:none}.studio-resident-card .studio-visitor-location:focus-visible{outline:3px solid #ac6aab;outline-offset:2px}
.studio-maze-chest-grid{grid-template-columns:repeat(var(--maze-pool-columns,2),minmax(0,1fr));overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable}
.studio-maze-pool-window{padding:16px}
.studio-maze-pool-window header{gap:8px;margin-bottom:8px}
.studio-maze-pool-legend{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:5px;font-size:11px;color:#716777}
.studio-maze-pool-legend>span{display:inline-flex;align-items:center;gap:4px}
.studio-maze-shop-window{padding-bottom:16px}.studio-maze-shop-window>header{margin-bottom:8px}.studio-maze-shop-window>.studio-maze-shop-grid{overflow-x:clip}
.studio-maze-pool-face{position:relative;width:64px;height:64px}
/* Permanent game ownership stays top-right; maze inventory text sits
   on the lower portrait rim, away from both the medal and the pony name. */
.studio-maze-shop-face{position:relative;width:76px;height:76px}
.studio-maze-permanent-badge{position:absolute;z-index:3;right:-2px;top:-3px;width:22px;height:26px}
.studio-maze-permanent-badge .studio-maze-currency{display:block;width:100%;height:100%;object-fit:contain}
.studio-maze-inventory-label{position:absolute;z-index:3;left:50%;bottom:-1px;transform:translateX(-50%);padding:2px 5px;border:1px solid rgba(255,255,255,.9);border-radius:6px;background:#725374;color:#fff;width:max-content;max-width:88px;text-align:center;font-size:9px;font-weight:750;line-height:1.2;white-space:normal;box-shadow:0 1px 3px #54415433}
.studio-maze-inventory-label[data-maze-status="not-owned"]{background:#f3e8ee;color:#654b69}
.studio-maze-pool-legend .studio-maze-currency{width:16px;height:19px}
.studio-maze-shop-grid{padding-top:4px}.studio-maze-shop-card{gap:3px}
@media(max-width:620px){.studio-maze-shop-face{width:64px;height:64px}}
.studio-maze-pool-window .studio-maze-chest-grid{gap:10px 8px;padding:6px 2px;align-content:start}
.studio-maze-pool-window .studio-maze-chest-grid article{gap:3px;cursor:pointer}
.studio-maze-pool-window .studio-maze-chest-grid article strong,.studio-maze-shop-card strong{display:block;position:relative;z-index:2;min-height:0;max-height:none;margin:0;max-width:100%;font-size:12px;line-height:15px;font-weight:750;overflow:visible;overflow-wrap:anywhere;color:var(--ink,#293348);-webkit-text-stroke:2px rgba(255,255,255,.96);paint-order:stroke fill;text-shadow:0 0 1px #fff}
.studio-maze-pool-window .studio-maze-requirements,.studio-maze-shop-card .studio-maze-stats{position:relative;z-index:2;display:flex;justify-content:space-between;gap:5px;min-width:72px;margin:3px 0 0;font-size:11px;white-space:nowrap}
.studio-maze-pool-window .studio-maze-stat img{width:18px;height:18px}
.studio-maze-party-available{overflow-x:scroll;overscroll-behavior:contain;touch-action:pan-x;scrollbar-width:none;scrollbar-gutter:auto;user-select:none}
.studio-maze-party-available::-webkit-scrollbar{display:none}
.studio-maze-party-available .studio-maze-combat-portrait{width:56px;height:56px}
.studio-maze-party-assigned .studio-maze-combat-portrait{width:80px;height:80px}
.studio-maze-reward [data-pony-id],.studio-maze-reward .studio-portrait-crop{width:32px;height:32px}
@media(max-width:600px){.studio-maze-chest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.studio-maze-scrollbar{display:block;width:100%;height:10px;min-height:10px;margin:0;border:0;border-radius:8px;appearance:none;background:#f1e4ef;accent-color:#b777aa}
.studio-maze-scrollbar::-webkit-slider-thumb{appearance:none;width:38px;height:8px;border-radius:8px;background:#b777aa}
.studio-maze-scrollbar::-moz-range-thumb{width:38px;height:8px;border:0;border-radius:8px;background:#b777aa}
.studio-maze-scrollbar:disabled{opacity:.6}
.studio-maze-scroll-region{display:grid;grid-template-columns:minmax(0,1fr)10px;gap:6px;max-height:360px}
.studio-maze-scroll-region .studio-maze-chest-grid{scrollbar-width:none;scrollbar-gutter:auto}
.studio-maze-scroll-region .studio-maze-chest-grid::-webkit-scrollbar{display:none}
@media(max-height:500px){.studio-maze-window{max-height:calc(100% - 24px)}.studio-maze-scroll-region,.studio-maze-chest-grid{max-height:max(80px,calc(100dvh - 280px))}}
.studio-maze-scrollbar-vertical{width:10px;height:100%;writing-mode:vertical-lr;direction:ltr;min-height:80px}
.studio-maze-scrollbar-vertical::-webkit-slider-thumb{width:8px;height:38px}
.studio-maze-scrollbar-vertical::-moz-range-thumb{width:8px;height:38px}
.studio-maze-party-window{width:min(520px,calc(100% - 24px));max-height:calc(100% - 24px);padding:12px}
.studio-maze-party-window .studio-maze-party-grid{grid-template-columns:140px minmax(0,1fr);column-gap:18px;row-gap:8px;align-items:center}
.studio-maze-party-window .studio-maze-party-main{grid-column:1;grid-row:1;border-right:1px solid rgba(100,70,100,.18);padding-right:12px}
.studio-maze-party-current{grid-column:2;grid-row:1;align-self:end;display:flex;flex-direction:column;gap:6px;min-width:0}
.studio-maze-party-window .studio-maze-party-assigned{gap:14px;align-items:center;min-width:0}
.studio-maze-party-total{color:#6e4e73;font-size:17px;font-weight:750;line-height:1.15;text-align:center;font-variant-numeric:tabular-nums}
.studio-maze-party-total b{color:#2f3040;font-size:21px;font-weight:900}
.studio-maze-party-window .studio-maze-party-available{grid-column:1/-1;border-top:1px solid rgba(100,70,100,.18);padding-top:14px;grid-auto-columns:74px;column-gap:12px;justify-content:safe center}
.studio-maze-party-balance{display:flex;justify-content:flex-end;align-items:center;gap:5px;padding-right:48px;margin:0 0 8px;font-size:15px;font-variant-numeric:tabular-nums}
.studio-maze-party-balance .studio-maze-currency{width:28px;height:28px}
.studio-maze-party-window .studio-maze-scrollbar{grid-column:1/-1}
.studio-maze-party-window .studio-maze-scrollbar{margin-top:-8px}
@media(max-width:600px){.studio-maze-party-window .studio-maze-party-grid{grid-template-columns:94px minmax(0,1fr);column-gap:12px;row-gap:8px}.studio-maze-party-window .studio-maze-party-main .studio-maze-combat-portrait{width:88px;height:88px}.studio-maze-party-window .studio-maze-party-main{padding-right:6px}.studio-maze-party-window .studio-maze-party-current{gap:5px}.studio-maze-party-window .studio-maze-party-assigned{gap:6px}.studio-maze-party-window .studio-maze-party-assigned .studio-maze-combat-portrait{width:48px;height:48px}.studio-maze-party-window .studio-maze-party-available .studio-maze-combat-portrait{width:40px;height:40px}.studio-maze-party-window .studio-maze-party-available{grid-auto-columns:62px;column-gap:8px}.studio-maze-party-window .studio-maze-party-badge{width:18px;height:18px}.studio-maze-party-window .studio-maze-stat{font-size:10px}.studio-maze-party-window .studio-maze-stat img{width:14px;height:14px}.studio-maze-party-total{font-size:14px}.studio-maze-party-total b{font-size:18px}}

.studio-pony-heading>.studio-portrait-crop{width:96px;height:96px}
.studio-maze-party-window .studio-maze-party-badge{width:22px;height:22px;right:0;top:-2px;filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 1px 1px rgba(50,30,50,.25))}

/* Preserve native hair/horn overflow while aligning equal-sized white rims. */
.studio-maze-pool-face [data-pony-id],.studio-maze-shop-pony{overflow:visible}
.studio-portrait-crop>img.studio-pony-portrait{pointer-events:none}

/* Names sit on top of lower portrait overflow; row clearance protects them
   from the following row without moving the names away from their circle. */
.studio-resident-card .studio-portrait-crop{z-index:1}.resident-grid>li>span:not(.studio-portrait-crop),.studio-resident-name{position:relative;z-index:2;font-weight:750;line-height:1.2;color:var(--ink,#293348);-webkit-text-stroke:2px rgba(255,255,255,.96);paint-order:stroke fill;text-shadow:0 0 1px #fff}
.resident-grid li,.resident-grid .studio-resident-card{gap:0}
.studio-resident-card .studio-resident-name{margin:0}

@media(max-width:360px){.studio-maze-shop-face,.studio-maze-shop-pony,.studio-maze-shop-pony .studio-portrait-crop{width:48px;height:48px}.studio-maze-shop-card .studio-maze-inventory-label{max-width:78px;font-size:8px}.studio-maze-shop-card .studio-maze-permanent-badge{width:18px;height:22px}}
@media(max-width:620px){.studio-maze-shop-window{padding-bottom:12px}}

.studio-maze-stat b.studio-maze-infinity{font-size:1.45em;font-weight:800;line-height:1}

.studio-maze-team-tools button { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0; }
.studio-maze-party-summary { display:grid; grid-template-columns:minmax(0,1fr) auto auto auto auto; align-items:center; gap:8px; margin:0 0 10px; padding-right:48px; }
.studio-maze-party-summary .studio-maze-party-balance { margin:0; padding:0; }
.studio-maze-exploration { text-align:left; min-width:0; display:flex; flex-direction:column; gap:3px; font-size:12px; line-height:1.35; font-variant-numeric:tabular-nums; }
.studio-maze-exploration span { color:var(--muted); }
.studio-maze-exploration b { font-size:13px; }

/* Squad window corner: current maze energy with the native lightning icon, next
   to the squad-editor entry. The pencil reuses the map editor's own glyph,
   flipped for a top-right corner, and carries no plate behind it. */
.studio-maze-energy{display:flex;align-items:center;gap:6px;justify-content:flex-end;font-variant-numeric:tabular-nums}
.studio-maze-energy-value{display:flex;align-items:center;gap:3px;color:#353142;font-size:15px;font-weight:800}
.studio-maze-energy-value img{width:26px;height:26px;object-fit:contain}
.studio-maze-energy-value.is-unknown b{color:#855b78;font-weight:750}
.studio-maze-energy-edit{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:none;box-shadow:none;color:#6e4e73;font-size:18px;line-height:1;cursor:pointer;transform:scaleX(-1)}
.studio-maze-energy-edit:hover{color:#a23b68}
.studio-maze-energy-edit:focus-visible{outline:2px solid var(--banner-peach,#dd7b7a);outline-offset:2px;border-radius:8px}
.studio-maze-energy-edit[aria-pressed="true"]{color:var(--banner-peach,#dd7b7a)}
@media(max-width:600px){
  .studio-maze-party-summary{grid-template-columns:minmax(0,1fr) auto auto auto;gap:6px;padding-right:0}
  .studio-maze-party-summary .studio-maze-exploration{grid-column:1/-1;padding-right:48px}
}

/* Formation editing: every interchangeable helper has a quiet frame. Either
   side can be selected first; the pending card receives the stronger frame. */
.studio-maze-party-grid.is-editing article.is-swappable{cursor:pointer;border-radius:12px;box-shadow:0 0 0 2px rgba(221,123,122,.28)}
.studio-maze-party-grid.is-editing article.is-swappable:hover,
.studio-maze-party-grid.is-editing article.is-swappable:focus-visible{box-shadow:0 0 0 2px rgba(221,123,122,.55)}
.studio-maze-party-grid.is-editing article.is-pending{box-shadow:0 0 0 3px var(--banner-peach,#dd7b7a);border-radius:12px}

/* Speed Run purchase recommendation: an outline plus a very small label, from
   the plan only, and never a filled plate over the product. */
.studio-maze-shop-card.is-recommended{padding-top:21px}
.studio-maze-recommend{position:absolute;z-index:3;inset:0;display:block;padding-top:4px;border-radius:12px;box-shadow:inset 0 0 0 2px var(--banner-peach,#dd7b7a);color:#a23b68;font-size:9px;font-weight:800;letter-spacing:.02em;pointer-events:none}

/* Route briefing: a compact timeline over the map in the same frosted language.
   The panel is anchored between the top and the bottom toolbar instead of using
   viewport units, so a mobile browser bar can never push its content off screen;
   the timeline scrolls inside it with an always-visible scrollbar. */
.studio-briefing{position:absolute;right:16px;top:12px;bottom:68px;z-index:9;display:flex;width:min(360px,calc(100% - 32px));pointer-events:auto}
.studio-briefing-window{display:flex;flex-direction:column;gap:8px;width:100%;max-height:100%;padding:14px 14px 12px;border:1px solid rgba(255,255,255,.72);border-radius:16px;background:rgba(255,251,253,.92);box-shadow:0 12px 36px rgba(56,30,57,.22);color:#252c3b;overflow:hidden}
.studio-briefing-window header{position:relative;flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding-right:34px}
.studio-briefing-window header p{margin:0;color:#a23b68;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.studio-briefing-window h2{margin:0;font-size:24px;font-variant-numeric:tabular-nums}
.studio-briefing-close{position:absolute;right:-4px;top:-4px}
.studio-briefing-recommended{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:10px;background:rgba(221,123,122,.10);color:#855b78}
.studio-briefing-recommended strong{font-size:11px;white-space:nowrap}
.studio-briefing-recommended-faces{display:flex;align-items:center;gap:5px}
.studio-briefing-recommended .studio-briefing-face,.studio-briefing-recommended .studio-portrait-crop{width:30px;height:30px}
.studio-briefing-scroll{flex:1 1 auto;min-height:96px;display:grid;grid-template-columns:minmax(0,1fr) 10px;gap:6px}
.studio-briefing-scroll .studio-maze-scrollbar-vertical{height:100%;min-height:0}
.studio-briefing-timeline{height:100%;min-height:0;margin:0;padding:0 6px 0 0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;list-style:none;scrollbar-width:none;box-shadow:inset 0 7px 6px -7px rgba(56,30,57,.30),inset 0 -7px 6px -7px rgba(56,30,57,.30)}
.studio-briefing-timeline:focus-visible{outline:2px solid var(--banner-peach,#dd7b7a);outline-offset:2px;border-radius:8px}
.studio-briefing-timeline::-webkit-scrollbar{display:none}
.studio-briefing-item{margin:0;padding:0;list-style:none}
.studio-briefing-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;padding:7px 0;border-top:1px solid rgba(100,70,100,.12)}
.studio-briefing-row.has-purchase-swap{grid-template-columns:100px minmax(0,1fr);align-items:center}
.studio-briefing-timeline>.studio-briefing-row:first-child,.studio-briefing-timeline>li:first-child .studio-briefing-row{border-top:0;padding-top:0}
.studio-briefing-target{width:100%;border-right:0;border-bottom:0;border-left:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.studio-briefing-target:hover{background:rgba(221,123,122,.09)}
.studio-briefing-target:focus-visible{outline:2px solid var(--banner-peach,#dd7b7a);outline-offset:-2px;border-radius:8px}
.studio-briefing-icons{display:flex;align-items:center;justify-content:center;gap:2px;padding-top:1px}
.studio-briefing-icons img{width:22px;height:22px;object-fit:contain}
.studio-briefing-face{display:block;width:28px;height:28px}
.studio-briefing-face .studio-portrait-crop{width:28px;height:28px;border-radius:50%}
.studio-briefing-purchase-swap{display:grid;grid-template-columns:48px 18px 32px;align-items:center;width:98px}
.studio-briefing-swap-incoming,.studio-briefing-swap-incoming .studio-portrait-crop{width:48px;height:48px}
.studio-briefing-swap-outgoing,.studio-briefing-swap-outgoing .studio-portrait-crop{width:32px;height:32px;opacity:.82}
.studio-briefing-swap-incoming .studio-portrait-crop,.studio-briefing-swap-outgoing .studio-portrait-crop{border-radius:50%}
.studio-briefing-swap-arrow{position:relative;z-index:2;width:20px;height:28px;transform:translateX(-1px);overflow:visible;color:#a23b68;filter:drop-shadow(0 1px 0 #fff)}
.studio-briefing-swap-arrow path{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.studio-briefing-text{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12.5px;line-height:1.42}
.studio-briefing-time{color:#6e4e73;font-size:10.5px;font-weight:800;letter-spacing:.02em}
.studio-briefing-line{overflow-wrap:anywhere}
.studio-briefing-values{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;color:#855b78;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.studio-briefing-value-group{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.studio-briefing-values img{flex:none;width:15px;height:15px;object-fit:contain}
.studio-briefing-upgrade-arrow{color:#a23b68;font-size:15px;font-weight:800;line-height:1}
.studio-briefing-hero-line{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.studio-briefing-hero-line>.studio-briefing-values{flex-wrap:nowrap}
.studio-briefing-row[data-kind="hero-upgrade"] .studio-briefing-line{font-weight:750}
.studio-briefing-row[data-kind="more"] .studio-briefing-line{color:#855b78}
@media(max-width:760px){.studio-briefing{left:12px;right:12px;top:8px;bottom:64px;width:auto}
 .studio-briefing-window{padding:12px 12px 10px}
 .studio-briefing-window h2{font-size:22px}}
/* The narrow toolbar wraps into two rows, so the panel must stop above it. */
@media(max-width:374px){.studio-briefing{bottom:104px}}
/* Four maze actions plus Card and Camera cannot share one 44px-high row on very
   narrow phones, so the maze group wraps instead of shrinking touch targets. */
@media(max-width:374px){.studio-maze-team-tools{flex-wrap:wrap;width:92px;row-gap:0;column-gap:4px;justify-content:flex-start}}

.studio-collection-hot .studio-collection-content{grid-template-columns:minmax(0,1fr)}
.studio-collection-notice{margin:14px 0 0;color:#777078;font-size:10px;line-height:1.5;text-align:start}

.studio-collection-help{position:absolute;left:7px;top:7px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.studio-collection-help img{width:30px;height:auto;display:block}
.studio-collection-help-popup{position:absolute;z-index:2;top:calc(100% + 4px);left:8px;right:8px;padding:12px;background:#fffafc;color:#68616b;border:1px solid #e7c9d7;border-radius:12px;box-shadow:0 5px 18px #39213233;font-size:12px;line-height:1.5;text-align:start}
.studio-collection-help-popup[hidden]{display:none}

/* Keep collection content within the dialog; long content scrolls vertically. */
.studio-collection-content>*,.studio-collection-reward-line{min-width:0;max-width:100%}
.studio-collection-rewards{overflow-wrap:anywhere}

/* Native portrait files include transparent margins outside the fitted rim. */
.studio-collection-members{overflow-x:clip}

.toolbar button[aria-pressed="true"] .studio-eraser-icon{stroke:#fff;}

.studio-tools button[data-tool="erase"]{display:grid;place-items:center;}
.studio-eraser-icon{display:block;}

/* The native level table is authoritative. Keep the current hero power in the
   former input position as a compact read-only game stat. */
.studio-hero-power-value{display:flex;align-items:center;justify-content:center;min-height:26px;margin-top:3px}
.studio-hero-power-value .studio-maze-stat{gap:4px;font-size:14px}
.studio-hero-power-value .studio-maze-stat img{width:22px;height:22px}
@media(max-width:760px){/* keep the maze buttons on one row with the existing controls */
 .studio-main-toolbar.toolbar{gap:4px}
 .studio-maze-team-tools{gap:4px}}

.service-message{position:absolute;z-index:2;top:12px;left:12px;right:12px;max-width:560px;margin:0 auto;padding:12px;border-radius:10px;background:#eee7fb;line-height:1.6;font-size:14px}.public-site .topbar{min-height:76px}
