:root {
  --ink: #04110F;
  --ink-2: #0A1F1B;
  --panel: rgba(8, 28, 24, 0.78);
  --gold: #E2B84A;
  --gold-2: #F6DE9A;
  --cream: #F6EBD2;
  --paper: #F3E6C4;
  --muted: #B7C8B8;
  --ok: #3CB56A;
  --ok-bg: #15351F;
  --line: rgba(226, 184, 74, 0.38);
  --glow: 0 0 0 1px rgba(226,184,74,0.22), 0 10px 28px rgba(0,0,0,0.28);
  --ui: 'Tajawal', 'Noto Naskh Arabic', sans-serif;
  --naskh: 'Noto Naskh Arabic', 'Tajawal', serif;
  --m-top: 220px; --m-right: 70px; --m-bottom: 430px; --m-left: 150px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: var(--cream); font-family: var(--ui); }
body { direction: rtl; text-align: right; }

#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1080px; height: 1920px; margin: -960px 0 0 -540px;
  transform-origin: center center;
  background: var(--ink);
  overflow: hidden;
}

#bg { position: absolute; inset: 0; pointer-events: none; }
#bg .wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 32%, rgba(46, 92, 68, 0.42), transparent 52%),
    linear-gradient(180deg, #071614 0%, #04110F 48%, #020B0A 100%);
}
#bg .mesh {
  position: absolute; inset: 0; opacity: 0.09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><path d='M70 8L86 38H122L94 60L106 96L70 76L34 96L46 60L18 38H54Z' fill='none' stroke='%23E2B84A' stroke-width='1.1'/></svg>");
  background-size: 148px 148px;
}
#bg .vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 48%, transparent 40%, rgba(0,0,0,0.42) 100%);
}
#bg .arch {
  position: absolute; top: 250px; left: 110px; width: 860px; height: 520px;
}

#safe {
  position: absolute;
  top: var(--m-top); right: var(--m-right); bottom: var(--m-bottom); left: var(--m-left);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0;
}
#safe .frame { position: absolute; inset: -8px; pointer-events: none; }
#safe .frame i {
  position: absolute; width: 28px; height: 28px;
  border: 2px solid rgba(226,184,74,0.45);
}
#safe .frame i:nth-child(1) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
#safe .frame i:nth-child(2) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
#safe .frame i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
#safe .frame i:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; }

body[data-quality="low"] #bg .mesh, body[data-quality="minimal"] #bg .mesh { opacity: 0.04; }
body[data-quality="minimal"] #bg .arch, body[data-quality="minimal"] #safe .frame { display: none; }
body[data-quality="low"] #stage, body[data-quality="minimal"] #stage { --glow: none; }

body.obs #corner-btns, body.obs #operator, body.obs #guides { display: none !important; }
body.obs #btn-preview { display: none !important; }
body:not(.demo) #btn-preview { display: none; }