* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1014; color: #f4efe6;
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans Arabic", sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#intro, #done { position: fixed; inset: 0; display: grid; place-items: center; z-index: 10;
  background: radial-gradient(120% 90% at 50% 30%, rgba(13,16,20,.35), rgba(13,16,20,.92));
  transition: opacity .6s ease; padding: 24px; }
#intro.gone { opacity: 0; pointer-events: none; }
.intro-inner { max-width: 420px; text-align: center; }
.intro-ar { font-size: 44px; font-weight: 700; color: #e9d3a6; letter-spacing: 1px; line-height: 1.1; }
#intro h1, #done h1 { font-size: 30px; margin: 6px 0 4px; font-weight: 650; letter-spacing: .5px; }
.intro-sub { margin: 0 0 18px; font-size: 13px; color: #b9b2a6; }
.intro-goal { font-size: 15px; margin: 0 0 22px; color: #efe7da; }
#play, #again { font: inherit; font-size: 16px; font-weight: 650; color: #1b1408; background: #e9d3a6;
  border: 0; border-radius: 999px; padding: 14px 34px; cursor: pointer; min-width: 190px; }
#play:disabled { background: #5a5448; color: #cfc6b6; cursor: default; }
#bar { margin: 14px auto 0; width: 190px; height: 3px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
#bar-fill { height: 100%; width: 0; background: #e9d3a6; }
#best { font-size: 13px; color: #b9b2a6; min-height: 1em; margin: 12px 0 0; }
.intro-credits { font-size: 11px; color: #8a8478; margin-top: 26px; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#pill { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center; padding: 7px 14px; border-radius: 999px; font-size: 13px;
  background: rgba(12,14,18,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; }
#pill-count { color: #e9d3a6; font-weight: 650; }
#minimap { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; width: 92px; height: 92px;
  border-radius: 50%; background: rgba(12,14,18,.5); pointer-events: auto; }
#minimap.big { width: min(78vw, 360px); height: min(78vw, 360px); }
.card { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 44px); left: 50%;
  transform: translate(-50%, -16px); opacity: 0; transition: opacity .35s, transform .35s;
  width: min(88vw, 380px); padding: 12px 16px; border-radius: 14px; background: rgba(12,14,18,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card.show { opacity: 1; transform: translate(-50%, 0); }
.card-ar { font-size: 18px; color: #e9d3a6; font-weight: 700; }
.card-title { font-size: 15px; font-weight: 650; margin: 2px 0 4px; }
.card-text { font-size: 13px; color: #d7d0c3; line-height: 1.4; }
#stick { position: absolute; left: 22px; bottom: max(26px, env(safe-area-inset-bottom)); width: 116px; height: 116px;
  border-radius: 50%; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.22); display: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: rgba(255,255,255,.38); }
#run { position: absolute; right: 24px; bottom: max(96px, calc(env(safe-area-inset-bottom) + 70px)); width: 64px; height: 64px;
  border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff;
  font: 650 12px/1 inherit; letter-spacing: 1px; pointer-events: auto; display: none; }
#run.on { background: rgba(233,211,166,.55); color: #1b1408; }
.touch #stick, .touch #run, .touch #jump { display: block; }
#jump { position: absolute; right: 100px; bottom: max(26px, env(safe-area-inset-bottom)); width: 64px; height: 64px;
  border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff;
  font: 650 11px/1 inherit; letter-spacing: 1px; pointer-events: auto; display: none; }
#jump:active { background: rgba(233,211,166,.55); color: #1b1408; }
#pov { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 100px); right: 18px; width: 44px; height: 44px;
  border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); background: rgba(12,14,18,.5); color: #fff;
  font: 650 12px/1 inherit; pointer-events: auto; cursor: pointer; }
.touch #hint { display: none; }
#hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(255,255,255,.7);
  background: rgba(12,14,18,.45); padding: 6px 12px; border-radius: 999px; white-space: nowrap; transition: opacity 1s; }
#done { z-index: 11; }
#done-time { color: #e9d3a6; font-size: 16px; margin: 4px 0 22px; }
[hidden] { display: none !important; }
#intro.gone { display: none; }
@media (max-width: 560px) {
  #pill { left: 12px; transform: none; font-size: 12px; padding: 6px 12px; }
  #minimap { width: 76px; height: 76px; }
  #pov { top: calc(max(10px, env(safe-area-inset-top)) + 84px); right: 26px; }
  .card { top: auto; bottom: calc(max(26px, env(safe-area-inset-bottom)) + 136px); width: calc(100vw - 24px); padding: 9px 12px; }
  .card-ar { font-size: 15px; } .card-title { font-size: 13px; } .card-text { font-size: 12px; line-height: 1.35; }
}
body.record .card { display: none; }

/* phones play in landscape: a turn-sideways screen in portrait once the walk has started */
#rotate { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; align-content: center; gap: 18px;
  background: #0d1014; text-align: center; font-size: 16px; color: #efe7da; }
#rotate p { margin: 0; }
.rot-phone { width: 46px; height: 80px; margin: 0 auto; border: 3px solid #e9d3a6; border-radius: 9px; animation: rot 2.2s ease-in-out infinite; }
@keyframes rot { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) { .touch.playing #rotate { display: grid; } }

/* short landscape screens (phones on their side): small HUD in the corners, clear of the notch */
@media (orientation: landscape) and (max-height: 500px) {
  #pill { top: max(8px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); transform: none; font-size: 12px; padding: 5px 11px; }
  #minimap { top: 8px; right: max(12px, env(safe-area-inset-right)); width: 70px; height: 70px; }
  #minimap.big { width: min(78vh, 300px); height: min(78vh, 300px); }
  #pov { top: 86px; right: calc(max(12px, env(safe-area-inset-right)) + 13px); width: 40px; height: 40px; }
  .card { top: max(8px, env(safe-area-inset-top)); width: min(46vw, 360px); padding: 8px 12px; }
  .card-ar { font-size: 14px; } .card-title { font-size: 13px; } .card-text { font-size: 12px; line-height: 1.3; }
  #stick { left: max(28px, calc(env(safe-area-inset-left) + 12px)); bottom: max(18px, env(safe-area-inset-bottom)); width: 104px; height: 104px; }
  #run { right: max(24px, calc(env(safe-area-inset-right) + 10px)); bottom: 96px; width: 58px; height: 58px; }
  #jump { right: calc(max(24px, calc(env(safe-area-inset-right) + 10px)) + 74px); bottom: max(22px, env(safe-area-inset-bottom)); width: 64px; height: 64px; }
  #intro, #done { padding: 10px; }
  .intro-ar { font-size: 30px; } #intro h1, #done h1 { font-size: 22px; margin: 2px 0; }
  .intro-sub { margin: 0 0 8px; font-size: 12px; } .intro-goal { margin: 0 0 12px; font-size: 13px; }
  #play, #again { padding: 11px 30px; font-size: 15px; } .intro-credits { margin-top: 10px; }
}