/* Blank Writ (three.js): the page is a 1920x1080 DOM "stage" (scaled to fit, letterboxed) above a full-window WebGL canvas that
   draws the painting behind it and the hand of cards. Everything on the stage is absolutely positioned in design pixels, so a
   screen written in Godot coordinates ports one to one. The stage lets pointer events through except where an element is a
   hit target (.hit), so the canvas below can pick cards. */
:root {
  --ink: #1a1714;
  --paper: #ede3cc;
  --cream: #f2e6bf;
  --gold: #dbb24d;
  --cinnabar: #b82e1f;
  --jade: #4d8c66;
  --muted: #8c8576;
  --font-body: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Noto Serif SC", "Songti SC", "STSong", "STKaiti", "KaiTi", "Microsoft YaHei", serif;
  --font-cjk: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif SC", "Songti SC", "Microsoft YaHei", serif;
  --font-title: "STXingkai", "Xingkai SC", "STKaiti", "KaiTi", "Kaiti SC", "Palatino Linotype", Georgia, cursive;
}
/* Traditional Chinese (the game's default): Traditional-Chinese system fonts first, then the Simplified ones that also hold the characters */
:root:lang(zh-Hant) {
  --font-body: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Noto Serif TC", "Songti TC", "PMingLiU", "MingLiU", "Microsoft JhengHei", "STSong", "SimSun", serif;
  --font-cjk: "DFKai-SB", "BiauKai", "Kaiti TC", "STKaiti", "KaiTi", "Noto Serif TC", "PMingLiU", "Microsoft JhengHei", serif;
  --font-title: "DFKai-SB", "BiauKai", "Kaiti TC", "STKaiti", "KaiTi", "Noto Serif TC", "PMingLiU", "Palatino Linotype", Georgia, cursive;
}
html, body { margin: 0; height: 100%; background: #0c0b0a; overflow: hidden; color: var(--ink); }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#stage { position: fixed; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 0 0; pointer-events: none; overflow: hidden; }
#stage .screen { position: absolute; inset: 0; pointer-events: none; }
#stage .abs { position: absolute; }
#stage .hit { pointer-events: auto; }
#stage .lbl { position: absolute; white-space: pre; pointer-events: none; line-height: 1.18; }
#stage .lbl.wrap { white-space: pre-wrap; overflow-wrap: break-word; }
#stage .lbl.title { font-family: var(--font-title); }
#stage .lbl.outline { text-shadow: -2px -2px 0 #080a0c, 2px -2px 0 #080a0c, -2px 2px 0 #080a0c, 2px 2px 0 #080a0c, 0 3px 6px #000a; }
#stage .panel { position: absolute; box-sizing: border-box; border-style: solid; border-image-slice: 0 fill; pointer-events: none; }
#stage .panel.flat { border: 2px solid var(--gold); border-radius: 8px; background: #1a1614e6; }
#stage .img { position: absolute; pointer-events: none; }
#stage .btn {
  position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center;
  color: #f2e6bf; cursor: pointer; pointer-events: auto; border-style: solid; border-image-slice: 0 fill;
  transition: filter .08s; line-height: 1.1; padding: 0 4px;
}
#stage .btn.flat { border: 2px solid var(--gold); border-radius: 8px; background: #231d19f2; }
#stage .btn:hover { filter: brightness(1.18) saturate(1.05); }
#stage .btn:active { filter: brightness(.75); }
#stage .btn.disabled { filter: brightness(.62) grayscale(.35); cursor: default; }
#stage .btn.disabled:hover { filter: brightness(.62) grayscale(.35); }
#stage .bar { position: absolute; }
#stage .bar .trough, #stage .bar .fill { position: absolute; left: 0; top: 0; height: 100%; }
#stage .bar .fill { overflow: hidden; }
#stage .bar .txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff6dc; text-shadow: 0 1px 2px #000; }
#stage .scroll { position: absolute; overflow-y: auto; overflow-x: hidden; pointer-events: auto; scrollbar-width: thin; scrollbar-color: #8a7a52 transparent; }
#stage input.field { position: absolute; box-sizing: border-box; pointer-events: auto; font-family: var(--font-body); background: #f5ecd6; color: #1a1714;
  border: 2px solid #8a7440; border-radius: 6px; padding: 0 14px; outline: none; user-select: text; -webkit-user-select: text; }
#stage input.field:focus { border-color: var(--gold); box-shadow: 0 0 0 3px #dbb24d55; }
#stage input[type=range] { position: absolute; pointer-events: auto; accent-color: #dbb24d; cursor: pointer; }
#stage .toast { position: absolute; pointer-events: none; }
#stage .tooltip { position: absolute; pointer-events: none; z-index: 60; }
#stage .modal-dim { position: absolute; inset: 0; background: #08080acc; pointer-events: auto; }
#stage .fadeIn { animation: fadeIn .18s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0c0b0a; color: #dbb24d;
  font-family: var(--font-title); z-index: 100; transition: opacity .5s; }
#boot .boot-title { font-size: 64px; letter-spacing: 8px; }
#boot .boot-sub { font-size: 20px; color: #8c8576; margin-top: 14px; font-family: var(--font-body); }
#boot.gone { opacity: 0; pointer-events: none; }
#fade { position: absolute; inset: 0; background: #0d0c0b; pointer-events: none; opacity: 0; z-index: 90; }