@import url('https://fonts.googleapis.com/css2?family=Limelight&family=Poiret+One&family=Shippori+Mincho:wght@500;800&family=Noto+Sans+Ethiopic:wght@300;500&family=Noto+Serif+Ethiopic:wght@500;700&display=swap');
:root{--ink:#e9dfc8;--brass:#c9a35a;--dim:#8d8370;--bg:#050508}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);overflow:hidden;
  font-family:"Poiret One","Noto Sans Ethiopic",sans-serif}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
#cv{filter:brightness(.55) saturate(.6);transition:filter 1.6s ease}
body.started #cv{filter:none}

/* play card: stepped deco frame with a sunburst behind the button */
#go{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;cursor:pointer;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.1),rgba(0,0,0,.75));
  transition:opacity .9s ease}
body.started #go{opacity:0;pointer-events:none}
#go h1{font-family:"Limelight","Noto Sans Ethiopic",serif;font-weight:normal;
  font-size:clamp(34px,7vw,64px);letter-spacing:.18em;color:var(--ink);
  text-shadow:0 0 24px rgba(233,223,200,.25)}
#go .ring{position:relative;width:96px;height:96px;border-radius:50%;
  border:1px solid var(--brass);display:flex;align-items:center;justify-content:center;
  color:var(--brass);font-size:28px;padding-left:6px;
  background:repeating-conic-gradient(from 0deg,rgba(201,163,90,.16) 0 4deg,transparent 4deg 15deg)}
#go .ring::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(201,163,90,.35)}
#go p{letter-spacing:.6em;font-size:12px;color:var(--dim)}

/* bottom plaque */
#plaque{position:fixed;left:18px;bottom:16px;z-index:5;display:flex;align-items:center;gap:12px;
  padding:8px 14px;color:var(--ink);font-size:13px;letter-spacing:.25em;
  background:rgba(5,5,8,.55);backdrop-filter:blur(3px);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),
    calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  border-top:1px solid rgba(201,163,90,.5)}
#plaque a{color:var(--dim);text-decoration:none}
#plaque a:hover,#plaque a.on{color:var(--brass)}
.ibtn{width:30px;height:26px;display:flex;align-items:center;justify-content:center;
  background:none;color:var(--brass);border:1px solid rgba(201,163,90,.4);cursor:pointer}
.ibtn svg{pointer-events:none}
#err{position:fixed;inset:20px;z-index:9;color:#ff8a80;background:#000c;padding:16px;
  font:12px Menlo,monospace;white-space:pre-wrap;overflow:auto}
/* ?still: clean frames for the design boards */
body.still #go,body.still #plaque,body.still #nav,body.still #hint{display:none}