html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #2a2220; }
body { display: flex; align-items: center; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; overscroll-behavior: none; }
#backdrop { position: fixed; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); filter: blur(28px) saturate(1.1) brightness(.72);
  opacity: 0; transition: opacity .6s; pointer-events: none; }
html.wide #backdrop { opacity: 1; }
#frame { position: relative; flex: none; box-shadow: 0 0 60px rgba(0,0,0,.45); }
#c { display: block; touch-action: none; outline: none; }
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #efe2cc; color: #5a4636; font: italic 18px Georgia, "Times New Roman", serif; transition: opacity .5s; }
#loading.gone { opacity: 0; pointer-events: none; }
.ld-bar { width: 46%; height: 3px; background: rgba(90,70,54,.18); border-radius: 2px; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; background: #e8735a; transition: width .2s; }