/* Основа: reset, типография, сцената и четимостните воали. */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--night)}
body{font-family:var(--font-ui);color:var(--ivory)}

#scene{position:fixed;inset:0;z-index:var(--z-scene)}
#scene canvas{display:block;width:100%;height:100%}

/* воали само колкото за четимост на текста върху сцената */
.scrim-b{position:fixed;left:0;right:0;bottom:0;height:38dvh;pointer-events:none;z-index:var(--z-scrim);
  background:linear-gradient(to top, rgba(16,30,15,.54), rgba(16,30,15,.2) 45%, rgba(16,30,15,0))}
.scrim-t{position:fixed;left:0;right:0;top:0;height:14dvh;pointer-events:none;z-index:var(--z-scrim);
  background:linear-gradient(to bottom, rgba(16,30,15,.3), rgba(16,30,15,0))}

/* завесата: само под стаите с карти (Механата/Лясъра); Програма живее
   направо върху поляната */
.veil{position:fixed;inset:0;z-index:var(--z-veil);pointer-events:none;opacity:0;
  background:linear-gradient(180deg, rgba(4,12,7,.9), rgba(4,12,7,.74) 42%, rgba(4,12,7,.92));
  transition:opacity .45s ease}
body[data-tab="mehanata"] .veil,
body[data-tab="lyasara"] .veil{opacity:1}
/* Механата има собствена непрозрачна стена; завесата не бива да
   затъмнява живата поляна, видима през прозорчето-дупка */
body[data-tab="mehanata"] .veil{background:transparent}

.fail{position:fixed;inset:0;display:none;place-items:center;text-align:center;padding:40px;
  background:linear-gradient(180deg,#9cc3e8,#eaf2cf 55%,#6e9a4d);color:#21381c;font-size:15px}
.no3d .fail{display:grid}