@import url('./fur-skin-layout.css?v=20261016-2');
/* The complete composition is contained; the same unedited shared artwork fills
   only exposed viewport edges beneath it. Neither layer intercepts touches. */
html[data-skin="fur"],
html[data-skin="fur"] body,
html[data-skin="fur"] #app {
  background: url('./fur-web-assets/fur-empty-background.jpg') center / cover no-repeat !important;
}
html[data-skin="fur"] body .screen[data-fur-art] {
  --stage-w: min(var(--app-w), calc(var(--app-h) * var(--fur-ratio))) !important;
  --stage-h: min(var(--app-h), calc(var(--app-w) / var(--fur-ratio))) !important;
  --stage-left: calc((var(--app-w) - var(--stage-w)) / 2) !important;
  --stage-top: calc((var(--app-h) - var(--stage-h)) / 2) !important;
  background: var(--fur-bg) center / contain no-repeat !important;
}
html[data-skin="fur"] .screen[data-screen="message"]::before,
html[data-skin="fur"] .screen[data-screen="message"]::after,
html[data-skin="fur"] .confessions-screen::before,
html[data-skin="fur"] .confessions-screen::after {
  background: none !important; pointer-events: none !important;
}
html[data-skin="fur"] .story-viewer {
  background: url('./fur-web-assets/fur-empty-background.jpg') center / cover no-repeat !important;
}
html[data-skin="fur"] .story-viewer-stage {
  background: url('./fur-web-assets/fur-empty-background.jpg') center / contain no-repeat !important;
}
/* Keep the existing Story media frame and navigation; remove its opaque old room. */
/* Existing transparent Story frames remain above the new background. */
html[data-skin="fur"] .isonme-safe-button-artwork { display: none !important; }
html[data-skin="fur"] body .screen.is-active :is(.back-hit,.desire-back,.travel-back-hit,.settings-back-hit) {
  position: absolute !important; left: max(6px, env(safe-area-inset-left)) !important;
  top: max(6px, env(safe-area-inset-top)) !important; width: 52px !important; height: 44px !important;
  right: auto !important; bottom: auto !important; transform: none !important;
  z-index: 2147483601 !important; color: #ffe0a1 !important;
  background: rgba(20,10,0,.85) !important; border: 1px solid #c99851 !important; border-radius: 8px !important;
}
html[data-skin="fur"] :is(.back-hit,.desire-back,.travel-back-hit,.settings-back-hit)::after {
  content: 'BACK'; font: bold 11px sans-serif; color: #ffe0a1;
}
html[data-skin="fur"] body .screen[data-screen="myself"].is-active :is(#storyCameraButton,#myselfAlbumButton) {
  position: absolute !important; top: calc(var(--stage-top) + var(--stage-h) * .95) !important;
  width: calc(var(--stage-w) * .24) !important; height: calc(var(--stage-h) * .045) !important;
  bottom: auto !important; right: auto !important; transform: none !important;
  color: #ffe0a1 !important; background: #241500 !important; border: 1px solid #c99851 !important;
}
html[data-skin="fur"] body .screen[data-screen="myself"].is-active #storyCameraButton { left: calc(var(--stage-left) + var(--stage-w) * .22) !important; }
html[data-skin="fur"] body .screen[data-screen="myself"].is-active #myselfAlbumButton { left: calc(var(--stage-left) + var(--stage-w) * .54) !important; }
html[data-skin="fur"] #storyCameraButton::after { content: 'STORY'; font: bold 10px sans-serif; }
html[data-skin="fur"] #myselfAlbumButton::after { content: 'ALBUM'; font: bold 10px sans-serif; }
html[data-skin="fur"] #storyCameraButton .story-camera-icon { display: none !important; }
html[data-skin="fur"] body #confessionsDashboardButton {
  left: calc((var(--app-w) - min(var(--app-w),var(--app-h) * .5627990431)) / 2 + min(var(--app-w),var(--app-h) * .5627990431) * .265) !important;
  top: calc((var(--app-h) - min(var(--app-h),var(--app-w) * 1.7768331562)) / 2 + min(var(--app-h),var(--app-w) * 1.7768331562) * .9) !important;
  width: calc(min(var(--app-w),var(--app-h) * .5627990431) * .47) !important;
  height: calc(min(var(--app-h),var(--app-w) * 1.7768331562) * .065) !important;
  bottom: auto !important; transform: none !important; background: transparent !important;
}
html[data-skin="fur"] #confessionsDashboardButton img { visibility: hidden !important; }
html[data-skin="fur"] body .screen[data-screen="description"].is-active :is(.profile-settings-button,.profile-save-button) {
  top: calc(var(--stage-top) + var(--stage-h) * .025) !important; height: calc(var(--stage-h) * .04) !important;
  bottom: auto !important; transform: none !important; background: #241500 !important;
}
html[data-skin="fur"] body .screen[data-screen="description"] :is(.profile-select-field,.slot-text) {
  color: #ffe7bd !important; text-shadow: 0 1px 3px #000;
}
html[data-skin="fur"] body .screen[data-screen="club"] .club-thread,
html[data-skin="fur"] .confessions-feed,
html[data-skin="fur"] .conversation-list,
html[data-skin="fur"] .message-thread { background: transparent !important; }
html[data-skin="fur"] body .screen[data-screen="club"] .club-composer {
  background: rgba(15,7,0,.9) !important; border: 1px solid #c99851 !important; border-radius: 8px !important;
}
/* Existing original artwork selectors are very specific; Fur overrides them here. */
html[data-skin="fur"] body .screen[data-screen="myself"].is-active .isonme-safe-button-artwork { display: none !important; }
html[data-skin="fur"] body .screen[data-screen="myself"].is-active > .back-hit::after { display: inline !important; content: 'BACK' !important; }
html[data-skin="fur"] body .screen[data-screen="myself"].is-active #storyCameraButton::after { display: inline !important; content: 'STORY' !important; color:#ffe0a1 !important; font: bold 10px sans-serif !important; }
html[data-skin="fur"] body .screen[data-screen="myself"].is-active #myselfAlbumButton::after { display: inline !important; content: 'ALBUM' !important; color:#ffe0a1 !important; font: bold 10px sans-serif !important; }
/* The existing dual Story surfaces retain media, clips, handlers and controls. */


/* Also usable by the older web Options screen, which has no discovery controls. */
#furSkinButton { position:relative; flex:none; display:inline-block; width:46px; height:26px; min-width:46px; border:1px solid #b18b58; border-radius:16px; background:#3c352b; cursor:pointer; }
#furSkinButton .isonme-switch-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#e9dcc5; pointer-events:none; }
#furSkinButton[aria-checked="true"] { background:#99712d; }
#furSkinButton[aria-checked="true"] .isonme-switch-knob { left:23px; }
.settings-row:has(> #furSkinButton) { display:flex; align-items:center; justify-content:space-between; gap:12px; }
html[data-skin="fur"] body .screen[data-fur-art].is-active :is(.back-hit,.desire-back,.travel-back-hit,.settings-back-hit) {
  left: max(6px, env(safe-area-inset-left)) !important; top: max(6px, env(safe-area-inset-top)) !important;
}
#furSkinButton .isonme-switch-knob { transform:none !important; left:3px !important; }
#furSkinButton[aria-checked="true"] .isonme-switch-knob { left:23px !important; }

/* Lock public-room artwork to the full viewport; only the composer follows IME. */
html[data-skin="fur"] body .screen[data-screen="club"] {
 --app-w: var(--fur-chat-w); --app-h: var(--fur-chat-h);
 width: var(--fur-chat-w) !important; height: var(--fur-chat-h) !important;
}
html[data-skin="fur"] body .screen[data-screen="club"].is-active .club-composer {
 position: absolute !important;
 left: calc(var(--stage-left) + var(--stage-w) * .06) !important;
 top: auto !important; bottom: max(10px, env(safe-area-inset-bottom)) !important;
 width: calc(var(--stage-w) * .88) !important; height: 48px !important;
 grid-template-rows: 48px !important; transform: translateY(calc(-1 * var(--fur-chat-lift, 0px))) !important;
 padding: 0 !important;
}
html[data-skin="fur"] body .screen[data-screen="club"].is-active .club-composer > #clubCameraButton {
 position: relative !important; inset: auto !important; transform: none !important;
}
html[data-skin="fur"] body .screen[data-screen="club"].is-active #clubAdSlot {
 overflow: hidden !important; clip-path: ellipse(50% 50% at 50% 50%) !important;
 -webkit-clip-path: ellipse(50% 50% at 50% 50%) !important;
}
html[data-skin="fur"] body .screen[data-screen="club"] #clubAdSlot .club-system-oval-media {
 inset: 0 !important; width: 100% !important; height: 100% !important;
 object-fit: cover !important; transform: none !important;
 --isonme-oval-x: 0px !important; --isonme-oval-y: 0px !important; --isonme-oval-scale: 1 !important;
}
html[data-skin="fur"] body .screen[data-screen="club"] #clubAdSlot .club-system-oval-media.is-mirrored { transform: scaleX(-1) !important; }

html[data-skin="fur"] body .screen[data-screen="description"].is-active .profile-save-button { left: calc(var(--stage-left) + var(--stage-w) * .29) !important; width: calc(var(--stage-w) * .19) !important; }
html[data-skin="fur"] body .screen[data-screen="description"].is-active .profile-settings-button { left: calc(var(--stage-left) + var(--stage-w) * .52) !important; width: calc(var(--stage-w) * .23) !important; }