:root{
  --ink:        #0C0A07;
  --vellum:     #EAE3D2;
  --brass:      #C6A15B;
  --smoke:      #92897A;
  --board-dark: #2C2721;
  --board-light:#4A4336;
  /* 'NG Farsi' sits after the latin faces: latin glyphs resolve first, so it
     only ever serves Persian script (per-glyph font fallback). */
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', 'NG Farsi', serif;
  --utility: 'IBM Plex Sans', 'Segoe UI', 'NG Farsi', system-ui, sans-serif;
  --pieces: 'NG Chess', 'DejaVu Sans', 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
}

/* Bundled in the .wgt — see tizen/fonts/. Local files only, no network fetch. */
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:400 500;
  font-display:swap; src:url('../fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:300 400;
  font-display:swap; src:url('../fonts/ibm-plex-sans.woff2') format('woff2');
}
@font-face{
  font-family:'NG Chess'; font-style:normal; font-weight:400;
  font-display:block; src:url('../fonts/chess-glyphs.woff2') format('woff2');
}
@font-face{
  font-family:'NG Farsi'; font-style:normal; font-weight:100 900;
  font-display:block; src:url('../fonts/vazirmatn-arabic.woff2') format('woff2');
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  width:100%; height:100%;
  background:var(--ink);
  color:var(--vellum);
  font-family:var(--utility);
  overflow:hidden;
}

.hidden{ display:none; }

body::before{ /* candlelight vignette */
  content:''; position:fixed; top:0; right:0; bottom:0; left:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 90% 75% at 50% 42%, rgba(198,161,91,0.055), transparent 65%),
             radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ---------- gilded frame (signature) ---------- */
#frame{
  position:fixed; top:1.6vmin; right:1.6vmin; bottom:1.6vmin; left:1.6vmin; z-index:5; pointer-events:none;
  border:1px solid rgba(198,161,91,0.42);
}
#frame::after{
  content:''; position:absolute; top:0.55vmin; right:0.55vmin; bottom:0.55vmin; left:0.55vmin;
  border:1px solid rgba(198,161,91,0.14);
}

#clock{
  position:fixed; top:3.2vmin; right:4vmin; z-index:6;
  font-family:var(--utility); font-weight:300;
  font-size:2.2vmin; letter-spacing:0.28em; color:var(--smoke);
}

#progress{
  position:fixed; left:1.6vmin; right:1.6vmin; bottom:1.6vmin; height:2px; z-index:6;
}
#bar{
  height:1px; width:0%; margin-top:1px;
  background:linear-gradient(90deg, rgba(198,161,91,0.15), var(--brass));
}

#hint{
  position:fixed; bottom:4vmin; left:0; right:0; z-index:7;
  text-align:center; font-family:var(--utility); font-weight:300;
  font-size:1.8vmin; letter-spacing:0.18em; color:var(--smoke);
  opacity:0.85; transition:opacity 2s ease;
}
#hint.gone{ opacity:0; }
.key-red{ color:#D6544A; }

#exit-hint{
  position:fixed; bottom:7.2vmin; left:0; right:0; z-index:7;
  text-align:center; font-family:var(--utility); font-weight:400;
  font-size:2vmin; letter-spacing:0.16em; color:var(--brass);
}

#stamp{
  position:fixed; bottom:2.4vmin; left:2.6vmin; z-index:6;
  font-family:var(--utility); font-weight:300;
  font-size:1.4vmin; color:var(--smoke); opacity:0.5;
}

body.hidecursor{ cursor:none; }