html, body { margin: 0; height: 100%; overflow: hidden; background: #1c1b1a; }
body { font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #f3efe8; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

/* delikatna winieta: CSS, bez kosztu GPU (jak w etapie B) */
#vignette { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(20,14,8,0.28) 100%); }

#loader { position: fixed; inset: 0; display: grid; place-items: center; background: #1c1b1a;
  transition: opacity .6s ease; z-index: 10; }
#loader.done { opacity: 0; pointer-events: none; }
#loader .box { width: min(320px, 80vw); text-align: center; }
#loader .title { font-size: 15px; letter-spacing: .02em; margin-bottom: 14px; opacity: .9; }
#loader .bar-track { height: 4px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
#bar-fill { height: 100%; width: 0; background: #e9c48a; transition: width .15s linear; }
#loader-text { margin-top: 10px; font-variant-numeric: tabular-nums; opacity: .7; font-size: 12px; }

#hint { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: rgba(20,18,16,.62); padding: 8px 14px; border-radius: 18px; font-size: 13px; pointer-events: none;
  transition: opacity 1s ease; white-space: nowrap; }
#hint.fade { opacity: 0; }

#joy { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28); pointer-events: none; z-index: 5; }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgba(255,255,255,.55); }

#debug { position: fixed; left: 8px; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 6;
  background: rgba(0,0,0,.6); color: #9f9; font: 12px/1.35 ui-monospace, Menlo, Consolas, monospace;
  padding: 6px 8px; border-radius: 4px; white-space: pre; pointer-events: none; }

/* nawigacja strony: powrót i zamówienie, nad widokiem 3D */
.bar { position: fixed; left: 0; right: 0; top: 0; z-index: 7; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; pointer-events: none; }
.bar a { pointer-events: auto; text-decoration: none; font-size: 14px; line-height: 1; padding: 11px 14px;
  border-radius: 4px; background: rgba(47,51,56,.72); color: #f5f2ec; }
.bar a:hover, .bar a:focus-visible { background: rgba(47,51,56,.92); outline: 2px solid #c9b38c; outline-offset: 2px; }
.bar a.order { background: #c9b38c; color: #2f3338; font-weight: 600; }
.bar a.order:hover, .bar a.order:focus-visible { background: #d6c4a3; }