/* Reusable layout rules. Asset URLs, geometry and colors belong to the game theme. */
.overlay-frame[data-art] {
  position: relative;
  width: min(var(--overlay-width), 96vw, calc(94dvh * var(--overlay-ratio)));
  height: auto;
  aspect-ratio: var(--overlay-ratio);
  max-height: none;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--overlay-ink);
  box-shadow: none;
  overflow: visible;
  text-align: left;
  filter: drop-shadow(0 15px 24px #0008);
}
.overlay-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; clip-path: var(--overlay-clip); }
.overlay-frame[data-art] .overlay-body { position: absolute; inset: var(--overlay-inset); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #99815d66 transparent; padding: 0 8px 4px; }
.overlay-frame[data-art]::backdrop { background: #07101cb3; backdrop-filter: blur(2px); }
.overlay-frame[data-art] .dialog-top { margin-bottom: 8px; min-height: 34px; }
.overlay-frame[data-art] .eyebrow { color: var(--overlay-muted); letter-spacing: 2px; font-size: 10px; }
.overlay-frame[data-tone=metal] .eyebrow { text-shadow: 0 1px 3px #000; }
.overlay-frame[data-art] h2 { color: var(--overlay-ink); font: 30px/1.15 Georgia, serif; margin-bottom: 22px; }
.overlay-frame[data-art] p { color: var(--overlay-ink); font-size: 14px; line-height: 1.6; }
.overlay-frame[data-art] .small-print, .overlay-frame[data-art] .quiet { color: var(--overlay-muted) !important; font-size: 11px !important; }
.overlay-frame[data-art] .icon-button { background: transparent; color: var(--overlay-ink); font-size: 20px; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; opacity: .72; }
.overlay-frame[data-art] .icon-button:hover { opacity: 1; }
.overlay-frame[data-art] .primary-button,
.overlay-frame[data-art] .secondary-button,
.overlay-frame[data-art] .keypad button {
  background: var(--overlay-button-fill) var(--overlay-button) center / 100% 100% no-repeat;
  border: 0;
  color: #271807;
  text-shadow: 0 1px #ffe4a34d;
  font-family: Consolas, 'Courier New', monospace;
  font-weight: bold;
  min-height: 54px;
  padding: 15px 24px;
  box-shadow: none;
  border-radius: 6px;
}
.overlay-frame[data-art] .primary-button, .overlay-frame[data-art] .secondary-button { width: min(100%, 340px); margin: 14px auto; }
.overlay-frame[data-art] .primary-button:hover:not(:disabled),
.overlay-frame[data-art] .secondary-button:hover:not(:disabled),
.overlay-frame[data-art] .keypad button:hover:not(:disabled) { filter: brightness(1.18); }
.overlay-frame[data-art] .text-button { color: var(--overlay-accent); font: 12px/1.5 Consolas, monospace; min-height: 36px; }
.overlay-frame[data-art] .dialog-feedback { color: var(--overlay-accent) !important; border-color: var(--overlay-accent); font-size: 12px; }
.overlay-frame[data-art] label, .overlay-frame[data-art] .field-label { color: var(--overlay-muted); }
.overlay-frame[data-art] select { background: #0b1925; border-color: #937544; color: #e7dcc6; }
.overlay-frame[data-art] .code-display { border: 2px solid #625334; background: #07171d; color: #ecbd69; box-shadow: inset 0 3px 12px #000, 0 1px #f2d99733; border-radius: 8px; letter-spacing: 7px; text-shadow: 0 0 14px #f1c76755; }
.overlay-frame[data-art] .code-display::placeholder { color: #9b8b64; font-size: 16px; }
.overlay-frame[data-art] .calculation-terms { border: 1px solid #80683c; border-radius: 4px; background: #07171e80; }
.overlay-frame[data-art] .calculation-terms dt { color: var(--overlay-muted); }
.overlay-frame[data-art] .calculation-terms dd { color: var(--overlay-accent); }
.overlay-frame[data-art] .calculation-terms dt, .overlay-frame[data-art] .calculation-terms dd { border-color: #91734550; }
.overlay-frame[data-art] .menu-stats { border-color: #9d89514f; }
.overlay-frame[data-art] .menu-stats dt, .overlay-frame[data-art] .toggle-row { color: var(--overlay-muted); }
.overlay-frame[data-art] .menu-stats dd { color: var(--overlay-ink); }
.menu-actions {display:grid;gap:8px;width:min(100%,340px);margin:16px auto 0}
.hint-balance {text-align:center;font-weight:bold}
.hint-levels {display:flex;justify-content:center;gap:10px;margin:12px 0}
.hint-level {width:44px;height:44px;border:1px solid var(--overlay-accent);border-radius:50%;background:transparent;color:var(--overlay-ink);font:20px Georgia,serif}
.hint-level[aria-current] {background:var(--overlay-accent);color:#fff4d9}
.hint-page {margin:18px auto;max-width:620px;text-align:center}
.hint-actions {display:flex;flex-direction:column;align-items:center}
.hint-status {text-align:center}
.overlay-frame[data-layout=hints] .note-text {font-size:18px;line-height:1.6}
@media(max-width:600px),(max-height:540px){.overlay-frame[data-layout=hints] .note-text{font-size:16px;line-height:1.45}.hint-page{margin:12px auto}.hint-levels{margin:8px 0}}
@media(max-height:540px) and (min-width:601px){
 .overlay-frame[data-layout=hints] .overlay-body {inset:16% 14% 8% 16%}
 .overlay-frame[data-layout=hints] #dialog-content {display:grid;grid-template-columns:1.25fr 1fr;gap:8px 24px;align-items:start}
 .overlay-frame[data-layout=hints] .hint-balance {grid-column:2;grid-row:1;margin:0}
 .overlay-frame[data-layout=hints] .hint-levels {grid-column:1;grid-row:1;margin:0}
 .overlay-frame[data-layout=hints] .hint-page {grid-column:1;grid-row:2 / span 3;margin:0}
 .overlay-frame[data-layout=hints] .hint-page .eyebrow {margin-bottom:6px}
 .overlay-frame[data-layout=hints] #dialog-content>.small-print {grid-column:2;grid-row:2;margin:0}
 .overlay-frame[data-layout=hints] .hint-actions {grid-column:2;grid-row:3}
 .overlay-frame[data-layout=hints] .hint-actions .primary-button {margin:0 0 5px;min-height:44px}
 .overlay-frame[data-layout=hints] .hint-status {grid-column:2;margin:0;font-size:12px}
}
.overlay-frame[data-art] .menu-actions .primary-button {width:100%;margin:0}
.overlay-frame[data-art] .requirement-box { border: 1px solid #bb92515c; background: #080e1680; border-radius: 5px; }
.overlay-frame[data-art] .success-banner { background: #07171f88; border: 1px solid #b09b64; color: #ead7a4 !important; }
.overlay-frame[data-art][data-layout=inspection] .item-preview { width: min(250px, 60%); height: 210px; margin: 0 auto 20px; filter: drop-shadow(0 8px 10px #0008); }
.overlay-frame[data-art][data-layout=inspection] .note-text { text-align: center; }

/* Paper is the document, not a miniature image inside a dashboard card. */
.overlay-frame[data-tone=paper] { font-family: Georgia, 'Times New Roman', serif; }
.overlay-frame[data-tone=paper] .eyebrow { color: #6a5a42; letter-spacing: 1.4px; font-family: Consolas, monospace; }
.overlay-frame[data-tone=paper] h2 { font-size: 32px; }
.overlay-frame[data-tone=paper] p { font-size: 16px; }
.overlay-frame[data-tone=paper] select { background: #f5e8c9; color: #3c2c16; border-color: #9b845d; }
.overlay-frame[data-tone=paper] .note-card { background: transparent; border: 0; border-bottom: 1px solid #81664760; padding: 12px 0; }
.overlay-frame[data-tone=paper] .note-card h3 { color: var(--overlay-ink); }
.document-page { color: var(--overlay-ink); }
.document-text { white-space: pre-line; margin: 0 0 16px; }
.document-sequence { list-style: none; display: flex; align-items: start; justify-content: center; gap: clamp(12px, 3vw, 40px); padding: 0; margin: 24px 0 30px; }
.document-mark { position: relative; text-align: center; flex: 1; max-width: 110px; }
.document-mark:not(:last-child)::after { content: '›'; position: absolute; right: -24%; top: 22px; font: 24px Georgia, serif; color: #8b7155; }
.document-symbol { display: grid; place-items: center; margin: 0 auto 10px; width: 64px; height: 64px; border-radius: 50%; color: #222923; background: var(--mark-color); border: 2px solid #816b47; box-shadow: inset 0 0 12px #79592e40; font: 35px/1 Georgia, serif; }
.document-mark-label { font: 12px/1.4 Consolas, monospace; text-transform: uppercase; letter-spacing: 1px; }
.document-facts { display: grid; grid-template-columns: 1fr auto; margin: 20px 0; gap: 0 20px; font: 15px/1.5 Consolas, monospace; }
.document-facts dt,.document-facts dd { margin: 0; padding: 7px 0; border-bottom: 1px solid #927a5740; }
.document-facts dd { font-weight: bold; }
.document-stamp { display: table; margin: 24px auto 0; padding: 8px 13px; border: 2px solid #81583480; color: #735232 !important; font: 11px/1.5 Consolas, monospace !important; letter-spacing: 1.3px; text-transform: uppercase; transform: rotate(-2deg); text-align: center; }
.document-value { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #95774c66; padding-bottom: 10px; }
.document-caption { font: 12px Consolas, monospace; text-transform: uppercase; letter-spacing: 1.5px; }
.document-value strong { font: 52px Georgia, serif; }
.journal-spread { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12%; }
.journal-index { display: flex; flex-direction: column; gap: 6px; }
.journal-entry { background: none; border: 0; border-bottom: 1px solid #9b815959; color: var(--overlay-ink); text-align: left; padding: 10px 2px; font: 15px/1.4 Georgia, serif; }
.journal-entry[aria-current] { font-weight: bold; color: #79421f; }
.journal-entry[aria-current]::before { content: '› '; }
.journal-entry:hover { color: #9b531e; }
.journal-page h3 { font: 21px/1.2 Georgia, serif; margin-bottom: 20px; color: var(--overlay-ink); }
.journal-page .document-text { font-size: 14px; }
.journal-page .document-sequence { gap: 12px; }
.journal-page .document-symbol { width: 42px; height: 42px; font-size: 23px; }
.journal-page .document-mark-label { font-size: 9px; }
.journal-page .document-mark:not(:last-child)::after { top: 9px; right: -18%; }
.journal-page .document-facts { font-size: 12px; }
.overlay-frame[data-layout=book] h2 { max-width: 47%; font-size: 27px; }
.overlay-frame[data-layout=book] .dialog-top { margin-bottom: 3px; }

/* Keypad and calculation remain the standard modules, styled by this host. */
.overlay-frame[data-art][data-layout=keypad] .puzzle-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; align-items: start; }
.overlay-frame[data-art][data-layout=keypad] .puzzle-form > p { grid-column: 1; grid-row: 1; font-size: 13px; margin: 0; }
.overlay-frame[data-art][data-layout=keypad] .puzzle-form > label { grid-column: 1; grid-row: 2; }
.overlay-frame[data-art][data-layout=keypad] .keypad { grid-column: 2; grid-row: 1 / span 3; width: 100%; max-width: none; gap: 4px; margin: 0; }
.overlay-frame[data-art][data-layout=keypad] .keypad button { min-height: 53px; padding: 13px 4px; font-size: 21px; }
.overlay-frame[data-art][data-layout=keypad] .puzzle-form > .primary-button { grid-column: 1; grid-row: 3; margin: 0; }
.overlay-frame[data-art] .color-dials { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 20px 0; }
.dial-holder { display: grid; justify-items: center; gap: 12px; }
.dial-label { font: 11px Consolas, monospace; letter-spacing: 2px; color: var(--overlay-muted); }
.color-dial { display: grid; place-items: center; width: 94px; height: 94px; border-radius: 50%; border: 9px ridge #a68547; background: radial-gradient(circle at 40% 30%, #ffffff55, transparent 55%), var(--dial-color); box-shadow: 0 5px 8px #0009, inset 0 2px 12px #111a; color: #172326; cursor: pointer; }
.color-dial span { font: 36px/1 Georgia, serif; }
.overlay-frame[data-dial-art] .color-dial { background: var(--overlay-dial) center / contain no-repeat; border: 0; box-shadow: none; filter: drop-shadow(0 4px 4px #0008); }
.overlay-frame[data-dial-art] .color-dial span { display: grid; place-items: center; width: 64%; height: 64%; border-radius: 50%; background: radial-gradient(circle at 34% 25%, #ffffff60, transparent 60%), var(--dial-color); box-shadow: inset 0 2px 9px #10101099; }
.color-dial:hover { filter: brightness(1.18); }
.color-dial:active { transform: rotate(12deg); }
.dial-caption { font: 11px Consolas, monospace; color: var(--overlay-ink); }
.dial-form > .small-print { text-align: center; }
.overlay-frame[data-art][data-layout=calculation] .puzzle-form { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px 25px; }
.overlay-frame[data-art][data-layout=calculation] .puzzle-form > p { grid-column: 1 / -1; margin-bottom: 0; }
.overlay-frame[data-art][data-layout=calculation] .calculation-terms { grid-column: 1; grid-row: 2 / span 2; margin: 0; }
.overlay-frame[data-art][data-layout=calculation] .puzzle-form > label { grid-column: 2; grid-row: 2; }
.overlay-frame[data-art][data-layout=calculation] .puzzle-form > .primary-button { grid-column: 2; grid-row: 3; margin: 0; align-self: start; }
.overlay-frame[data-art] .win-seal { border-color: var(--overlay-accent); color: var(--overlay-accent); }
.overlay-frame[data-art] .win-time { color: var(--overlay-accent); }
@media (max-width:600px) {
  .overlay-frame[data-art] .overlay-body { padding: 0 3px 4px; }
  .overlay-frame[data-art] h2,.overlay-frame[data-tone=paper] h2 { font-size: 24px; margin-bottom: 16px; }
  .overlay-frame[data-art] p { font-size: 13px; }
  .overlay-frame[data-art] .eyebrow { font-size: 8px; letter-spacing: .8px; }
  .overlay-frame[data-art] .icon-button { width: 32px; height: 32px; flex: 0 0 32px; }
  .overlay-frame[data-art] .primary-button,.overlay-frame[data-art] .secondary-button { font-size: 11px; padding: 13px 18px; min-height: 50px; }
  .overlay-frame[data-art][data-layout=keypad] .puzzle-form { display: block; }
  .overlay-frame[data-art][data-layout=calculation] .puzzle-form { display: block; }
  .overlay-frame[data-art][data-layout=calculation] .calculation-terms { margin: 16px 0; }
  .overlay-frame[data-art][data-layout=keypad] .puzzle-form > p { margin-bottom: 15px; }
  .overlay-frame[data-art][data-layout=keypad] .keypad { max-width: 260px; margin: 6px auto 12px; }
  .overlay-frame[data-art][data-layout=keypad] .keypad button { min-height: 45px; padding: 9px 3px; }
  .overlay-frame[data-art] .code-display { min-height: 56px; padding: 9px; font-size: 27px; }
  .document-symbol { width: 46px; height: 46px; font-size: 26px; }
  .document-sequence { gap: 10px; margin: 20px 0; }
  .document-mark-label { font-size: 9px; letter-spacing: .4px; }
  .document-mark:not(:last-child)::after { top: 12px; right: -20%; font-size: 19px; }
  .document-stamp { font-size: 9px !important; }
  .document-facts { font-size: 12px; }
  .journal-spread { display: block; }
  .journal-index { margin-bottom: 25px; }
  .journal-entry { font-size: 13px; padding: 8px 0; }
  .overlay-frame[data-layout=book] h2 { max-width: none; }
  .overlay-frame[data-art] .color-dials { gap: 16px; margin: 22px 0; }
  .color-dial { width: 80px; height: 80px; border-width: 7px; }
  .color-dial span { font-size: 29px; }
}

/* Illustrated reference documents share the host frame and page controls. */
.illustrated-book-page { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;min-height:240px; }
.illustrated-book-image { position:relative;height:240px;width:min(100%,240px);justify-self:center;border-radius:8px;overflow:hidden;box-shadow:0 3px 12px #39261033; }
.illustrated-book-image .hud-tool-art { position:absolute;inset:0; }
.illustrated-book-copy h3 { font:28px/1.15 Georgia,serif;margin:0 0 6px; }
.illustrated-book-copy .botanical-name { display:block;font:italic 17px Georgia,serif;margin:0 0 16px; }
.overlay-frame .illustrated-book-copy p { font:17px/1.5 Georgia,serif;margin:0; }
.illustrated-book-nav { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px; }
.illustrated-book-nav button { min-height:44px;padding:8px 14px; }
@media(max-width:600px){
 .illustrated-book-page{grid-template-columns:1fr;gap:12px;min-height:0}
 .illustrated-book-image{height:154px;width:154px;justify-self:center}
 .illustrated-book-copy h3{font-size:23px}.illustrated-book-copy .botanical-name{font-size:15px;margin-bottom:10px}
 .overlay-frame .illustrated-book-copy p{font-size:16px;line-height:1.4}.illustrated-book-nav{margin-top:12px}
 .illustrated-book-nav button{font-size:13px;padding:6px 8px}
}