/* Authored theme: game/ui/theme/mahapach_1977_theme.tres (applied as the code intends;
 * in the Godot build it is cut off by CanvasLayers, see docs/reviews/web_prototype_godot_gaps.md).
 *   default_font_size 14 · Label #1E1C1A · Button #1E1C1A / hover #0038B8 / focus #C88A1E
 *   Panel: bg #F4EFE6, 1px border #1E1C1A, radius 0
 * Web build: hover accent is walnut-umber ink #6B4428 instead of #0038B8 (see --blue below), and
 * css/ornament.css layers the parchment frames and vellum buttons on top of the components.
 * Hard-coded code colours (game/ui/**) are exposed as variables for the components. */
:root {
  --ink: #1E1C1A;
  --paper: #F4EFE6;
  --paper-2: #E8DFD1;
  /* Interactive accent. Was the flag blue #0038B8; on the parchment desk it read as a screen
   * colour, so it is now a walnut-umber ink (iron-gall ink gone brown with age). The variable keeps
   * its old name so every component that refers to it follows along. */
  --blue: #6B4428;
  --accent: #6B4428;
  --accent-deep: #4A2E1A;
  --accent-wash: rgba(107, 68, 40, 0.09);
  --brass: #A97B2C;
  --brass-soft: rgba(201, 157, 84, 0.55);
  --vellum-hi: #FCF8EF;
  --vellum-lo: #EFE5D2;
  --amber: #C88A1E;
  --red: #B8292F;
  --red-seat: #B8292E;
  --green: #3B6B36;
  --muted: #736B61;
  --font-ui: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Open Sans", sans-serif;
  --font-title: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; width: 100%; height: 100%; width: 100dvw; height: 100dvh;
  background: var(--paper-2); overflow: hidden; overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
body { font-family: var(--font-ui); font-size: 14px; color: var(--ink); touch-action: manipulation; }

/* Godot Control primitives ------------------------------------------------ */
.ctl { position: absolute; }
.label { color: var(--ink); font-size: 14px; line-height: 1.25; white-space: pre; }
.label.autowrap { white-space: pre-wrap; word-break: break-word; }
.panel { background: var(--paper); border: 1px solid var(--ink); border-radius: 0; }
.vbox { display: flex; flex-direction: column; gap: 4px; }
.hbox { display: flex; flex-direction: row; gap: 4px; }
.expand-fill { flex: 1 1 0; min-width: 0; }

/* Buttons: a pressed vellum card — paper gradient, inner hairline highlight, a faint
 * ink shadow under the lower edge; lifts on hover, sinks on press. */
button.btn {
  font: inherit; font-size: 14px; color: var(--ink);
  background: linear-gradient(180deg, var(--vellum-hi) 0%, var(--vellum-lo) 100%);
  border: 1px solid rgba(30, 28, 26, 0.72); border-radius: 2px;
  padding: 5px 10px; cursor: pointer; white-space: pre; line-height: 1.3;
  box-shadow: inset 0 1px 0 rgba(255, 253, 247, 0.9), inset 0 -1px 0 rgba(120, 92, 52, 0.12), 0 1px 0 rgba(30, 28, 26, 0.14);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
button.btn:hover:not(:disabled) {
  color: var(--accent-deep); border-color: var(--accent);
  background: linear-gradient(180deg, #FFFCF6 0%, #F4ECDC 100%);
  box-shadow: inset 0 1px 0 rgba(255, 253, 247, 0.95), inset 0 -2px 0 rgba(107, 68, 40, 0.12), 0 2px 5px -2px rgba(60, 40, 20, 0.35);
  transform: translateY(-1px);
}
button.btn:active:not(:disabled) {
  transform: translateY(0);
  background: linear-gradient(180deg, #E6DAC4 0%, #EFE6D4 100%);
  box-shadow: inset 0 2px 3px rgba(60, 40, 20, 0.22);
}
button.btn:focus-visible { outline: 2px solid rgba(200, 138, 30, 0.8); outline-offset: 1px; }
button.btn:disabled {
  color: rgba(30, 28, 26, 0.42); cursor: not-allowed; border-color: rgba(30, 28, 26, 0.28); box-shadow: none;
  background: repeating-linear-gradient(135deg, #EFE8DA 0 5px, #EAE2D1 5px 10px);
}

input[type=range].hslider { accent-color: var(--accent); width: 100%; height: 18px; margin: 4px 0; cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
select.option-button {
  font: inherit; font-size: 14px; color: var(--ink);
  border: 1px solid rgba(30, 28, 26, 0.72); border-radius: 2px; padding: 5px 26px 5px 8px; min-height: 30px; cursor: pointer;
}
/* Selects share the vellum card and get an engraved caret instead of the OS chevron. */
select.option-button, .d-arg-select {
  -webkit-appearance: none; appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0.5 0.5 L5 5 L9.5 0.5' fill='none' stroke='%236B4428' stroke-width='1.4'/></svg>") no-repeat right 9px center,
    linear-gradient(180deg, var(--vellum-hi) 0%, var(--vellum-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 253, 247, 0.9);
}
select.option-button:hover, .d-arg-select:hover { border-color: var(--accent); }
input[type=text], input[type=search] { accent-color: var(--accent); }
input[type=text]:focus, input[type=search]:focus, select:focus { outline: 1px solid var(--accent); outline-offset: 0; }

a.codex-link { color: var(--accent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; cursor: pointer; }
a.codex-link:hover { color: var(--accent-deep); text-decoration-style: solid; }

/* paper_grain.gdshader (grain 0.06 toward ink + vignette 0.86..1.0) -------- */
.paper-grain { background-color: var(--paper-2); position: relative; }
.paper-grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.117  0 0 0 0 0.109  0 0 0 0 0.101  0 0 0 0.06 0'/></filter><rect width='256' height='256' filter='url(%23n)'/></svg>");
}
.paper-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(30, 28, 26, 0.14) 100%);
}

/* crt_scanline.gdshader (density 180, glow #73D973 @ 8%) ------------------- */
.crt-scanline {
  color: color-mix(in srgb, var(--ink) 92%, #73D973);
  background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(30, 28, 26, 0.08) 3px);
}

/* ink_stamp.gdshader: radial reveal of rgba(184,41,47,0.9) ---------------- */
@keyframes ink-stamp-reveal { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
.ink-stamp { color: rgba(184, 41, 47, 0.9); border: 2px solid rgba(184, 41, 47, 0.9); padding: 0 6px;
  display: inline-block; transform: rotate(-4deg); animation: ink-stamp-reveal 0.35s ease-out both; }