/* Corners and rails are sliced from a shared source pixel grid and exported at
   2x resolution. Their transparent padding contains the alignment offsets. */
.raster-frame {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  user-select: none;
}
.raster-frame > span { position: absolute; display: block; pointer-events: none; }
.raster-frame .frame-top, .raster-frame .frame-bottom {
  left: var(--rail-start-x);
  right: var(--rail-start-x);
  height: var(--rail-height);
  background: var(--rail-horizontal) left top / auto 100% repeat-x;
}
.raster-frame .frame-top { top: var(--rail-inset-y); }
.raster-frame .frame-bottom { bottom: var(--rail-inset-y); transform: scaleY(-1); }
.raster-frame .frame-left, .raster-frame .frame-right {
  top: var(--rail-start-y);
  bottom: var(--rail-start-y);
  width: var(--rail-width);
  background: var(--rail-vertical) left top / 100% auto repeat-y;
}
.raster-frame .frame-left { left: var(--rail-inset-x); }
.raster-frame .frame-right { right: var(--rail-inset-x); transform: scaleX(-1); }
.raster-frame :is(.frame-tl, .frame-tr, .frame-bl, .frame-br) {
  width: var(--corner-width);
  height: var(--corner-height);
  background: var(--corner) center / 100% 100% no-repeat;
}
.raster-frame .frame-tl { top: 0; left: 0; }
.raster-frame .frame-tr { top: 0; right: 0; transform: scaleX(-1); }
.raster-frame .frame-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.raster-frame .frame-br { bottom: 0; right: 0; transform: scale(-1); }
.frame-main {
  --corner: url('/assets/frames/main-corner.webp');
  --rail-horizontal: url('/assets/frames/main-horizontal.webp');
  --rail-vertical: url('/assets/frames/main-vertical.webp');
  --corner-width: 24px;
  --corner-height: 24px;
  --rail-height: 24px;
  --rail-width: 24px;
  --rail-inset-x: 0px;
  --rail-inset-y: 0px;
  --rail-start-x: 24px;
  --rail-start-y: 24px;
}
.frame-tree {
  --corner: url('/assets/frames/tree-corner.webp');
  --rail-horizontal: url('/assets/frames/tree-horizontal.webp');
  --rail-vertical: url('/assets/frames/tree-vertical.webp');
  --corner-width: 24px;
  --corner-height: 24px;
  --rail-height: 24px;
  --rail-width: 24px;
  --rail-inset-x: 0px;
  --rail-inset-y: 0px;
  --rail-start-x: 24px;
  --rail-start-y: 24px;
}
.frame-journal {
  --corner: url('/assets/frames/journal-corner.webp');
  --rail-horizontal: url('/assets/frames/journal-horizontal.webp');
  --rail-vertical: url('/assets/frames/journal-vertical.webp');
  --corner-width: 48px;
  --corner-height: 48px;
  --rail-height: 48px;
  --rail-width: 48px;
  --rail-inset-x: 0px;
  --rail-inset-y: 0px;
  --rail-start-x: 48px;
  --rail-start-y: 48px;
}
.frame-journal .frame-accent {
  top: 0;
  left: 50%;
  width: 54px;
  height: 27px;
  transform: translateX(-50%);
  background: url('/assets/frames/journal-accent.webp') center / contain no-repeat;
}

/* A single outer frame encloses both the header and the two inset panels. */
#application {
  position: relative;
  isolation: isolate;
  padding: 14px 10px;
  background: #0d1010;
  box-shadow: 0 8px 28px #0007;
}
.app-nav {
  border: 0;
  border-radius: 0;
  background: #39312b url('/assets/frames/topbar.webp') left center / auto 100% repeat-x;
  /* The PSD uses a group-level black inner shadow, distance 0, size 29px. */
  box-shadow: inset 0 0 21px 3px #000, inset 0 1px 3px #000b;
}
.app-nav > * { position: relative; z-index: 1; }
#quest-prototype {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
#quest-prototype::before, #quest-prototype::after {
  content: none;
}
#quest-prototype .quest-layout { gap: 0; align-items: start; }
#quest-prototype .quest-tree {
  --tree-min-height: 620px;
  height: auto;
  min-height: var(--tree-min-height);
  padding: 15px;
  background: none;
  box-shadow: none;
}
#quest-prototype .quest-tree::before {
  content: '';
  inset: 10px 14px;
  z-index: 0;
  border: 0;
  background: #242729 url('/assets/textures/quest-stone.jpg') left top / 100% auto repeat-y;
  box-shadow: inset 0 0 28px #080c0dd9;
}
#quest-prototype .tree-toolbar {
  top: 10px;
  left: 10px;
  right: 10px;
  height: 48px;
  padding: 6px 8px;
  pointer-events: none;
}
#quest-prototype .tree-toolbar button { pointer-events: auto; }
/* The toolbar floats over the canvas without reserving a full-width strip. */
#quest-prototype .tree-viewport {
  position: relative;
  inset: auto;
  min-height: calc(var(--tree-min-height) - 30px);
  overflow-x: auto;
  overflow-y: hidden;
}
#quest-prototype :is(.tree-surface, .tree-empty) {
  min-height: calc(var(--tree-min-height) - 30px);
}
#quest-prototype .parchment {
  height: auto;
  min-height: 620px;
  border: 0;
  border-image: none;
  background: none;
  box-shadow: none;
}
#quest-prototype .parchment::before {
  content: '';
  inset: 0;
  z-index: 0;
  border: 0;
  background: var(--paper-grain), var(--quest-paper-surface);
  box-shadow: inset 0 0 24px #76401888;
  /* The corner masks follow the actual gold silhouette, including its holes.
     The two central rectangles overlap them by 1px, avoiding antialias seams
     at fractional display scales, and meet beneath the opaque straight rails. */
  mask-image: url('/assets/frames/journal-mask-tl.webp'), url('/assets/frames/journal-mask-tr.webp'), url('/assets/frames/journal-mask-bl.webp'), url('/assets/frames/journal-mask-br.webp'), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-size: 48px 48px, 48px 48px, 48px 48px, 48px 48px, calc(100% - 94px) calc(100% - 16px), calc(100% - 12px) calc(100% - 94px);
  mask-position: top left, top right, bottom left, bottom right, center, center;
  mask-repeat: no-repeat;
}
#quest-prototype .journal-scroll {
  flex: 1 0 auto;
  overflow: visible;
  scrollbar-gutter: auto;
  padding: 36px 26px 18px;
}
#quest-prototype .quest-footer { padding: 12px 26px 22px; background: none; }

@media (max-width: 700px) {
  .app-shell { padding: 10px; }
  #quest-prototype .quest-layout { gap: 8px; }
  #quest-prototype .quest-tree { --tree-min-height: 570px; }
  #quest-prototype .journal-scroll { padding-inline: 24px; }
  #quest-prototype .quest-footer { padding-inline: 24px; }
}
@media (max-width: 480px) {
  .app-nav { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .project-controls .project-picker { max-width: none; }
  .account-controls { grid-column: 1; grid-row: 2; justify-content: space-between; }
  .account-controls .account-name { display: block; order: 0; }
  .app-nav .party { max-width: 100px; }
  .app-nav .project-progress { grid-column: 1; grid-row: 3; }
}