/* TFQ navigation and app geometry, with the original Nysa V4 scenery and glass. */
body.v61-shell {
  --v61-paper: #171820;
  --v61-ink: #f4eddd;
  --v61-gold: #d4b782;
  --v61-teal: #a3d9cc;
  --bg: #11141a !important;
  --surface: #171b24d9 !important;
  --surface-strong: #171b24f5 !important;
  --line: #d4b78255 !important;
  --line-soft: #e7dfca26 !important;
  --text: #f4eddd !important;
  --muted: #c7c4be !important;
  --accent: #d4b782 !important;
  --accent-2: #a3d9cc !important;
  --glass: #161923eb !important;
  --glass-strong: #151821f7 !important;
  color: var(--text) !important;
  color-scheme: dark !important;
  background: #11141a !important;
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  font-family: var(--content-font, system-ui, sans-serif) !important;
}
body.v61-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #0b1018b5, #1014201a 58%, #14101a4d), url(scenes/deepwood.jpg) center 48% / cover;
  pointer-events: none;
}
body.v61-shell[data-v61-scene="create"]::before { background-image: linear-gradient(90deg, #0b1018c9, #14101a55), url(scenes/forge.png); }
body.v61-shell[data-v61-scene="operate"]::before { background-image: linear-gradient(90deg, #0b1018c9, #14101a66), url(scenes/cafe.png); }
.v61-shell * { scrollbar-color: #b6a47a99 #11151b44; scrollbar-width: thin; }
.v61-shell a { color: #b5e6d8; }
.v61-shell :focus-visible { outline-color: #b4eadb !important; }
.v61-shell .app-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 0 var(--v61-dock-height, calc(34px + env(safe-area-inset-bottom, 0px))) !important;
  background: transparent;
}
.v61-header {
  padding: 8px clamp(16px, 2.4vw, 36px);
  min-height: 66px;
  gap: 24px;
  background: linear-gradient(110deg, #171520e8, #261e2de0 58%, #162a2fe0);
  border-color: #d4b78266;
  box-shadow: 0 5px 24px #090c1244;
  backdrop-filter: blur(16px);
}
.v61-brand { min-width: 155px; }
.v61-brand-name { font-size: 36px; letter-spacing: .13em; text-shadow: 0 0 24px #d9c49040; }
.v61-spark { font-size: 22px; }
.v61-brand-caption { font-size: 8px; letter-spacing: .16em; margin-top: 3px; }
.v61-primary { gap: 6px; }
.v61-primary a { border-radius: 6px; font: 12px var(--content-font, system-ui); padding: 10px 16px; }
.v61-primary a[aria-current="page"] { border-color: #c0d6ba88; background: linear-gradient(120deg, #a9dfca26, #d4b78212); box-shadow: inset 0 0 14px #a8e2cd0b; }
.v61-tools { gap: 5px; padding-left: 14px; }
.v61-tools button { border-radius: 5px !important; min-width: 36px; min-height: 36px; font-family: var(--content-font, system-ui); }
.v61-subnav {
  justify-content: flex-start;
  padding: 3px clamp(16px, 2.4vw, 36px);
  min-height: 36px;
  gap: 6px;
  background: #111723b8;
  border-bottom: 1px solid #c9b37a33;
  backdrop-filter: blur(14px);
  scroll-snap-type: x proximity;
}
.v61-subnav a { font: 11px var(--content-font, system-ui); padding: 7px 12px; scroll-snap-align: center; border-radius: 4px 4px 0 0; }
.v61-subnav a[aria-current="page"] { background: #a4d7cc18; border-color: #b8dfca; }
.v61-context { padding: 5px clamp(16px, 2.4vw, 36px); min-height: 29px; background: #10162266; color: #d5d4c9; border-color: #d4b78222; font: 10px var(--content-font, system-ui); }
.v61-context button { color: #b9ddcf !important; font: 10px/1.2 var(--content-font, system-ui) !important; min-height: 20px !important; }
.v61-context kbd { margin-left: 6px; border-color: #c4b58255; }
.v61-context > button { display: inline-flex; align-items: center; }
.v61-context [data-v61-context] { display: inline-flex; align-items: center; }
.v61-context-dot { background: #a4d6b8; box-shadow: 0 0 9px #bce2b388; }
.v61-shell .shell-workspace { display: flex !important; flex-direction: column; height: 100% !important; min-height: 0 !important; overflow: hidden !important; }
.v61-shell .shell-layer-host { flex: 1; height: auto !important; min-height: 0 !important; overflow: hidden !important; }
.v61-shell .app-main {
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  max-width: 1600px !important;
  padding: 16px clamp(16px, 2.4vw, 36px) 18px !important;
  font-size: 13px !important;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
.v61-shell .page-frame { min-height: 100% !important; }
.v61-shell .app-main :is(p,li,dd) { font-size: 13px !important; line-height: 1.48 !important; }
.v61-shell :is(h1,h2,h3,h4) { color: #f2e7ce !important; font-family: var(--display-font, Georgia, serif) !important; }
.v61-shell h1 { font-size: clamp(25px, 2.8vw, 37px) !important; }
.v61-shell h2 { font-size: clamp(21px, 2.2vw, 29px); }
.v61-shell .eyebrow { color: #d7c391 !important; font: 9px var(--content-font, system-ui) !important; letter-spacing: .18em !important; }
.v61-shell :is(.muted,.subtle) { color: #c0c7c7 !important; }
.v61-shell :is(.surface-panel,.state-box,.nysa-compact-card,.shell-card-browser-control-drawer,.manual-panel,.mini-card) {
  background: linear-gradient(135deg, #20242bdc, #101723e0) !important;
  color: #f4eddd !important;
  border: 1px solid #d2bd8855 !important;
  border-radius: 9px !important;
  box-shadow: 0 8px 24px #070c1738, inset 0 1px #f1dfb20d !important;
  backdrop-filter: blur(12px);
}
.v61-shell :is(.surface-panel,.state-box,.nysa-compact-card) { padding: 16px 18px !important; margin-bottom: 12px !important; }
.v61-shell :is(.surface-panel,.state-box) > :first-child { margin-top: 0; }
.v61-shell :is(.surface-panel,.state-box) > :last-child { margin-bottom: 0; }
.v61-shell :is(input,textarea,select) { color: #f4eddd !important; background: #0e1621dc !important; border-color: #d2bd8866 !important; border-radius: 5px !important; }
.v61-shell input::placeholder,.v61-shell textarea::placeholder { color: #aab4bb; }
.v61-shell .app-main :is(button,.button) { background: #25373ce8 !important; color: #f4ead5 !important; border: 1px solid #bacfae66 !important; border-radius: 5px !important; min-height: 36px; padding: 7px 12px; font: 12px var(--content-font, system-ui); }
.v61-shell .app-main :is(button,.button):hover { background: #375055ef !important; border-color: #d7c391 !important; }
.v61-shell .app-main :is(.button--primary,.primary,button[type="submit"]) { background: linear-gradient(125deg, #ceb382, #ac9061) !important; color: #1c2026 !important; border-color: #eddbb0 !important; }
.v61-shell :is(.tag-chip,.nysa-state-pill,.content-tag,.context-chip) { background: #a0d8c61c !important; border-color: #a0d8c64d !important; color: #b9e5d6 !important; font: 10px var(--content-font, system-ui) !important; padding: 3px 7px !important; border-radius: 4px !important; }
.v61-shell :is(.state-box--locked,.state-box--error) { background: #302b2ce3 !important; border-left: 3px solid #d5af82 !important; }
.v61-shell .nysa-compact-hero { color: #f2e7ce !important; border-bottom-color: #d4b78255 !important; }
.v61-shell table { color: #e7e6df !important; background: #141d29e8 !important; }
.v61-shell th { background: #2b333e !important; color: #e6d2a6 !important; }
.v61-shell :is(td,th) { border-color: #c1b99a33 !important; padding: 8px 10px; }
.v61-shell .app-main .contract-list { grid-template-columns: repeat(auto-fit,minmax(110px,1fr)) !important; gap: 9px !important; }
.v61-shell .app-main .contract-list dt { color: #b7c4be !important; }
.v61-shell .app-main .contract-list dd { color: #f0dfb5 !important; font-size: 16px !important; }
.v61-shell .quest-panel-header { padding-bottom: 9px !important; margin-bottom: 10px !important; border-color: #c9b37a44 !important; }
.v61-shell .quest-panel-header h2 { font-size: 25px !important; }
.v61-shell .route-manual-help { position: absolute; top: 2px; right: 0; z-index: 3; background: #111c27b3 !important; color: #e0cea5 !important; border: 1px solid #d4b78255 !important; font: 9px var(--content-font, system-ui); padding: 4px 8px; }
.v61-shell .shell-dom-nav { flex: 0 0 auto; padding: 6px clamp(16px,2.4vw,36px) !important; background: #111723b8 !important; border-bottom-color: #d4b78244 !important; }
.v61-shell .shell-dom-nav > div { justify-content: flex-start; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
.v61-shell .shell-dom-nav button { color: #d0d6ce !important; border: 1px solid #b7c8b52e !important; border-radius: 4px !important; padding: 6px 10px !important; font: 10px var(--content-font, system-ui) !important; flex-shrink: 0; }
.v61-shell .shell-dom-nav button[aria-current] { color: #f8e8bc !important; background: #d7be8722 !important; border-color: #d7be8788 !important; }
/* One compact welcome screen; the House rail scrolls sideways on small displays. */
.character-home:has(.character-home__guest:not([hidden])) { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,.75fr); gap: clamp(24px,5vw,80px); align-items: center; min-height: 100%; padding: 18px 0; }
.v61-shell .character-home__guest { padding: clamp(20px,3vw,46px) !important; min-height: 0 !important; margin: 0 !important; background: linear-gradient(120deg,#101b29cc,#111b2744) !important; border: 1px solid #d4b78266 !important; border-radius: 10px !important; box-shadow: 0 15px 40px #080e1938 !important; }
.v61-shell .character-home__guest::before { display: none; }
.v61-shell .character-home__guest h2 { font-family: var(--display-font, Georgia, serif) !important; color: #fff0ce !important; font-size: clamp(36px,4.2vw,64px) !important; line-height: 1.1 !important; margin: 14px 0 16px !important; text-shadow: 0 3px 25px #050c1aa1; }
.v61-shell .character-home__guest p:not(.eyebrow) { font: 14px/1.6 var(--content-font,system-ui) !important; color: #e2e6df !important; max-width: 42ch; }
.v61-shell .character-home__guest .page-actions { margin: 20px 0; gap: 8px; }
.v61-shell .character-home__guest .page-actions button:first-child { background: linear-gradient(125deg,#ddc18e,#bca06d) !important; color: #19202b !important; border-color: #e8d5ab !important; padding: 9px 19px !important; }
.v61-launchpad { display: grid; gap: 7px; border-top: 1px solid #d4b78244; padding-top: 16px; }
.v61-launchpad a { display: flex; align-items: center; gap: 13px; padding: 9px 11px; border: 1px solid #b7d3c52e; border-radius: 6px; color: #f0e6cd !important; background: #10202e66; text-decoration: none; font: 13px var(--content-font,system-ui); }
.v61-launchpad a:hover { background: #b5d4c41c; border-color: #d7c39199; }
.v61-launchpad a > span:first-child { font: 25px Georgia,serif; width: 28px; text-align: center; color: #d6c18d; }
.v61-launchpad small { display: block; font-size: 10px; color: #b8c8c5; margin-top: 3px; }
.v61-launchpad b { margin-left: auto; color: #a9d8ca; font-weight: normal; }
.v61-realms { padding: 0; min-width: 0; }
.v61-realms > header { text-align: left; margin: 0 0 15px; }
.v61-realms > header h2 { font-size: 28px; margin: 6px 0; }
.v61-house-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.v61-house { padding: 16px 18px; min-height: 0; color: #eee7d9 !important; border: 1px solid #d4b78266; border-radius: 8px; background: linear-gradient(110deg,#2b2133e8,#354747a3); box-shadow: 0 5px 25px #080b1633; backdrop-filter: blur(9px); }
.v61-house--lotus { background: linear-gradient(110deg,#153832e8,#34524bb3); }
.v61-house--nysa { background: linear-gradient(110deg,#302d2be8,#5e513a99); }
.v61-house-mark { float: right; margin: 3px 0 0 12px; font-size: 33px; color: #d4badb; }
.v61-house--lotus .v61-house-mark { color: #a5d0bd; }
.v61-house h3 { font-size: 21px !important; margin: 7px 0; }
.v61-shell .v61-house p { font-size: 11px !important; color: #d2d8d1; margin: 7px 0; }
.v61-house > span:last-child { margin-top: 10px; font: 10px var(--content-font,system-ui); color: #b9dfd0; }
.v61-house:hover { box-shadow: 0 8px 25px #080e1966; border-color: #dbc697; }
/* Drawers remain native to the app and keep their original interaction hooks. */
.v61-directory { background: #151e2bf5; color: #ede7d6; border-color: #d1b78277; border-radius: 10px; padding: 22px; backdrop-filter: blur(18px); }
.v61-directory > header button { color: #e2d3ac; }
.v61-directory h2 { font-size: 26px; }
.v61-directory-search { color: #c9d6cf; }
.v61-directory-list { background: #a1b9ad33; border-color: #a1b9ad33; margin-top: 14px; }
.v61-directory-list a { background: #172635; color: #f0e8d1; padding: 10px 12px; font-family: var(--content-font,system-ui); font-size: 12px; }
.v61-directory-list a:hover { background: #2c444a; }
.v61-directory-list small,.v61-directory footer { color: #b2c4bf; }
.v61-scrim { background: #080e1977; }
.v61-network { background: #111722ed; border-color: #d4b78266; padding-bottom: env(safe-area-inset-bottom,0px); backdrop-filter: blur(16px); }
.v61-network > button { min-height: 33px; gap: 18px; font: 10px var(--content-font,system-ui); letter-spacing: .06em; }
.v61-network > div { padding: 18px; max-height: 45dvh; overflow: auto; border-color: #d4b78255; }
.v61-network a { font-family: var(--content-font,system-ui); }
.v61-shell .shell-media-player { background: #141e2bf5 !important; color: #f4ead5 !important; border-color: #d4b78266 !important; bottom: var(--v61-network-height,calc(34px + env(safe-area-inset-bottom,0px))) !important; }
.v61-shell .shell-modal,.v61-shell .shell-modal-body { color: #f2e8d2 !important; background: #151e2bf7 !important; border-color: #d1b78277 !important; border-radius: 10px !important; }
.v61-shell .shell-modal-header { background: #222836 !important; }
.v61-shell .drawer :is(input,select,textarea) { background: #0f1825 !important; color: #f2e8d2 !important; }
/* Measure the TFQ-style chrome and sound/network dock, rather than V6's old rails. */
.v61-shell .inspector-root {
  --shell-top-height: var(--v61-overlay-top, 130px);
  --shell-bottom-height: var(--v61-dock-height, 34px);
  --inspector-close-height: 44px;
  --inspector-card-top-offset: 8px;
  top: var(--shell-top-height) !important;
  bottom: var(--shell-bottom-height) !important;
  background: transparent !important;
}
.v61-shell .inspector-root > .overlay-scrim {
  background: radial-gradient(ellipse at center, #151d2910, #0d162b55) !important;
  backdrop-filter: blur(3px);
}
.v61-shell .inspector-root .inspector {
  background: transparent !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-bottom: var(--inspector-close-height);
}
.v61-shell .inspector-root .inspector-body { background: transparent !important; }
.v61-shell .inspector-footer {
  height: var(--inspector-close-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  background: linear-gradient(0deg, #131e2bd9, #131e2b00);
}
.v61-shell .inspector-close {
  width: min(420px,100%);
  min-height: 34px;
  height: 34px;
  padding: 7px 16px;
  border: 1px solid #d4b78288;
  border-radius: 6px !important;
  background: #172633dc;
  color: #f3e5c3;
  font: 11px var(--content-font,system-ui);
  letter-spacing: .08em;
}
.v61-shell .inspector-close:hover { background: #344952; }
body.v61-shell .inspector-root .inspector-card-summary > .card-flip-edge--inspector-rail {
  top: calc(var(--shell-top-height) + 8px);
  bottom: calc(var(--shell-bottom-height) + var(--inspector-close-height) + 8px);
}
.v61-swipe-controls { display: flex; gap: 5px; align-items: center; margin-left: auto; white-space: nowrap; }
.v61-swipe-controls button { min-width: 30px; min-height: 24px; border: 1px solid #afc6b544 !important; border-radius: 4px; background: #14233188 !important; padding: 2px 7px !important; }
.v61-swipe-controls button:disabled { opacity: .35; cursor: default; }
.v61-swipe-label { font: 9px var(--content-font,system-ui); color: #bdc9c4; }
.v61-shell .app-main[data-v61-motion="forward"] { animation: v61-forward 180ms ease-out; }
.v61-shell .app-main[data-v61-motion="back"] { animation: v61-back 180ms ease-out; }
@keyframes v61-forward { from { opacity: .65; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes v61-back { from { opacity: .65; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media(max-width:900px) {
  .v61-header { gap: 12px; }
  .v61-primary a { padding: 9px 10px; }
  .character-home:has(.character-home__guest:not([hidden])) { grid-template-columns: minmax(0,1fr) minmax(245px,.8fr); gap: 22px; }
  .v61-shell .character-home__guest { padding: 24px !important; }
  .v61-shell .character-home__guest h2 { font-size: 40px !important; }
}
@media(max-width:720px) {
  .v61-header { padding: 8px 12px 0; gap: 5px 8px; min-height: 0; }
  .v61-brand-name { font-size: 29px; }
  .v61-brand-caption { font-size: 7px; margin-top: 2px; }
  .v61-tools { padding: 0; gap: 4px; }
  .v61-tools button { min-width: 34px; min-height: 34px; padding: 5px; }
  .v61-tools button[data-shell-fullscreen-toggle] { display: none; }
  .v61-primary { margin: 4px -12px 0; padding: 3px 8px; gap: 4px; border-color: #d4b78222; }
  .v61-primary a { padding: 7px 6px; font-size: 11px; min-height: 34px; }
  .v61-primary svg { width: 16px; height: 16px; }
  .v61-subnav { min-height: 35px; padding: 3px 8px; gap: 2px; }
  .v61-subnav a { font-size: 10px; padding: 7px 10px; }
  .v61-context { min-height: 29px; padding: 4px 12px; gap: 6px; }
  .v61-context > div:first-child { gap: 6px; }
  .v61-context > button { display: none; }
  .v61-swipe-label { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
  .v61-shell .app-main { padding: 12px 12px 16px !important; }
  .v61-shell .app-main :is(p,li) { font-size: 12px !important; }
  .v61-shell :is(.surface-panel,.state-box,.nysa-compact-card) { padding: 13px 14px !important; }
  .v61-shell .shell-dom-nav { padding: 5px 10px !important; }
  .character-home:has(.character-home__guest:not([hidden])) { display: block; padding: 8px 0; }
  .v61-shell .character-home__guest { padding: 20px !important; border-radius: 8px !important; }
  .v61-shell .character-home__guest h2 { font-size: clamp(30px,8vw,38px) !important; margin: 9px 0 10px !important; }
  .v61-shell .character-home__guest p:not(.eyebrow) { font-size: 12px !important; line-height: 1.5 !important; }
  .v61-shell .character-home__guest .page-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 13px 0; gap: 6px; }
  .v61-shell .character-home__guest .page-actions > * { min-width: 0; width: 100%; text-align: center; justify-content: center; }
  .v61-shell .character-home__guest .page-actions :is(button,.button) { font-size: 10px; min-height: 36px; padding: 7px 11px !important; }
  .v61-launchpad { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; padding-top: 12px; }
  .v61-launchpad a { display: flex; flex-direction: column; gap: 5px; text-align: center; font-size: 10px; padding: 9px 3px; }
  .v61-launchpad a > span:first-child { font-size: 23px; }
  .v61-launchpad small,.v61-launchpad b { display: none; }
  .v61-realms { margin-top: 17px; }
  .v61-realms > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 9px; }
  .v61-realms > header h2 { font-size: 19px; margin: 0; }
  .v61-realms > header .eyebrow { font-size: 7px !important; margin: 0; }
  .v61-house-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 87%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 3px; overscroll-behavior-x: contain; }
  .v61-house { scroll-snap-align: start; padding: 13px 15px; }
  .v61-house h3 { font-size: 19px !important; margin: 5px 0; }
  .v61-house-mark { font-size: 29px; }
  .v61-shell .v61-house p { font-size: 10px !important; margin: 5px 0; }
  .v61-house > span:last-child { margin-top: 8px; }
  .v61-directory { padding: 16px; }
}
@media(max-height:700px) and (min-width:721px) {
  .character-home:has(.character-home__guest:not([hidden])) { padding: 0; }
  .v61-shell .character-home__guest { padding: 20px 26px !important; }
  .v61-shell .character-home__guest h2 { font-size: 38px !important; margin: 8px 0 !important; }
  .v61-launchpad { grid-template-columns: repeat(3,minmax(0,1fr)); padding-top: 10px; }
  .v61-launchpad small,.v61-launchpad b { display: none; }
  .v61-launchpad a { font-size: 11px; gap: 5px; padding: 8px; }
  .v61-house { padding: 11px 14px; }
}
@media(prefers-reduced-motion:reduce) { .v61-shell .app-main { animation: none !important; scroll-behavior: auto; } }
@media print {
  body.v61-shell { height: auto !important; overflow: visible !important; background: white !important; color: black !important; }
  body.v61-shell::before { display: none; }
  .v61-shell .app-shell,.v61-shell .shell-workspace,.v61-shell .shell-layer-host,.v61-shell .app-main { display: block !important; height: auto !important; overflow: visible !important; }
  .v61-shell [data-dom-pager-hidden="true"] { display: block !important; }
}