/* Current Astra: calm architectural presentation, responsive controls and visible focus. */
:root { --panel:rgba(24,31,32,.96); --ink:#f5f1e8; --muted:#c4cbc6; --bronze:#c3a77a; --line:rgba(238,230,212,.19); }
.glass { background:rgba(24,31,32,.91);box-shadow:0 8px 30px #10191424;backdrop-filter:none; }
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible { outline:2px solid #f0ce92;outline-offset:4px; }
button:disabled { opacity:.42;cursor:default; }
#brand { top:24px;left:28px;text-shadow:0 1px 5px #0009; }
#brand span { font-size:14px;letter-spacing:.22em; }
#brand small { display:block;font-size:9px;color:#f1ebdf;letter-spacing:.16em;margin-top:7px; }
#telemetry { top:auto;bottom:25px;left:28px;transform:none;border-radius:10px;padding:12px 16px;gap:14px; }
#telemetry div { min-width:0; }
#telemetry div:nth-child(3) { display:none; }
#telemetry small { font-size:8px;color:#aeb9b2;letter-spacing:.14em; }
#telemetry b { font-size:10px; }
#top-tools { top:20px;right:24px;gap:5px; }
.tool { height:42px;border-radius:8px;letter-spacing:.08em; }
.tool[aria-pressed=true] { background:#c3a77a;color:#17201e; }
#route-controls { border-radius:12px;bottom:24px;min-height:58px; }
#guide { width:186px; }
#guide span { color:#bfc9c2;letter-spacing:.16em;font-size:9px; }
#guide b { letter-spacing:.05em; }
#hint { bottom:104px;background:#182221db;font-size:11px;box-shadow:none; }
#lift-action { top:auto;bottom:110px;border-radius:12px;background:#252d28f5;border-color:#c3a77a; }
.overlay { background:#1c2929f7;border:1px solid #b7c6bd40;border-radius:18px;box-shadow:0 24px 100px #0008; }
.overlay h2 { font-size:23px;letter-spacing:-.03em;font-weight:500;margin-bottom:16px; }
.overlay label { color:#d6ddd8;font-size:13px; }
.overlay button,#photo-bar button { background:#b69b70;color:#13211c;border:0; }
.overlay button:hover { background:#d8c099; }
.overlay button.corner-close { background:#334440;color:#eee; }
#map-panel { width:min(520px,calc(100vw - 28px)); }
.dest-list button { background:#30433e;color:#e7eee8;border:1px solid #6e86764a; }
.dest-list button[aria-current=true] { background:#b69b70;color:#14201d; }
#map-pose { display:none; }
#photo-bar { min-width:480px;background:#192725f5; }
#photo-status { max-width:240px;overflow-wrap:anywhere; }
#walk-status { position:fixed;z-index:25;left:50%;bottom:180px;transform:translateX(-50%);padding:12px 18px;border-radius:10px;background:#1e302eef;color:#f4eddc;font-size:12px;text-align:center;max-width:calc(100vw - 32px);pointer-events:none; }
#walk-status:empty { display:none; }
#touch-ui .touch-pad::after { content:attr(data-label);position:absolute;left:0;right:0;bottom:-21px;text-align:center;font:600 9px system-ui;letter-spacing:.16em;color:#fff;text-shadow:0 1px 4px #000; }
@media(max-width:760px) {
 #brand { top:max(17px,env(safe-area-inset-top));left:18px; }
 #brand small { font-size:8px; }
 #top-tools { top:max(70px,calc(env(safe-area-inset-top) + 56px));left:16px;right:16px;max-width:none;justify-content:flex-start;flex-wrap:nowrap;gap:6px; }
 .tool { height:44px;min-width:44px;font-size:9px; }
 #telemetry { left:16px;bottom:187px;top:auto;padding:9px 12px;gap:13px; }
 #telemetry div:first-child { min-width:0; }
 #telemetry b { font-size:9px; }
 #route-controls { bottom:max(18px,env(safe-area-inset-bottom)); }
 #hint { bottom:238px;max-width:calc(100vw - 32px); }
 #lift-action { top:136px;bottom:auto;width:230px; }
 #walk-status { bottom:238px; }
 #photo-bar { min-width:0;width:calc(100vw - 28px);bottom:24px; }
 #info { top:128px;max-height:calc(100dvh - 150px); }
 #touch-ui .touch-pad { bottom:110px; }
}
@media(max-height:500px) and (min-width:600px) {
 #brand { top:12px;left:15px; } #brand small { display:none; }
 #top-tools { top:10px;left:auto;right:12px; }
 #telemetry { bottom:20px;left:12px; }
 #hint { bottom:89px; } #route-controls { bottom:14px; }
 #touch-ui .touch-pad { bottom:105px;width:78px;height:78px; }
 #lift-action { top:70px;bottom:auto; } #info { top:62px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important;transition-duration:0s !important;animation-duration:0s !important; } }
#fade { display:grid; place-items:center; color:#f4efe5; font:600 20px system-ui; letter-spacing:.08em; }

/* Compact floor plan with one destination scroll area. */
#map-canvas{width:100%;height:min(34dvh,300px);object-fit:contain;background:#14201f;}
#map-panel .dest-list{max-height:24dvh;}

#map-levels{display:flex;gap:6px;margin:10px 0;}#map-levels button{flex:1;padding:9px 7px;background:#31483f;color:#f0eee4;border:1px solid #597268;}#map-levels button[aria-pressed="true"]{background:#c4a87b;color:#182620;border-color:#d8bd90;}#map-destinations button[hidden]{display:none;}

/* ---------------------------------------------------------------- phone scheme (Graffico), tower */
/* The stick: 132 px at the physical bottom-left, a 54 px knob, the walk gold above a full throw. */
@media (pointer: coarse), (max-width: 760px) {
  #touch-ui .touch-pad#move-pad { left:24px; bottom:24px; width:132px; height:132px; opacity:.5;
    background:rgba(14,20,24,.26); border-color:rgba(255,255,255,.2); touch-action:none; pointer-events:auto; }
  #touch-ui .touch-pad#move-pad::after { content:none; }
  #touch-ui .touch-pad#move-pad i { width:54px; height:54px; margin:-27px; background:rgba(230,224,213,.72); }
  #touch-ui .touch-pad#move-pad.run i { background:var(--bronze); box-shadow:0 0 16px rgba(184,128,77,.55); }
  #look-pad { display:none !important; }
  /* the route rail clears the stick and the round button */
  #route-controls { bottom:max(14px,env(safe-area-inset-bottom)); left:50%; }
}

/* The round gold tap button: 104 px, bottom-right, the thing’s own Hebrew name under the glyph. */
/* It is a touch control: a desktop pointer never sees it, hidden attribute or not. */
#tapBtn { position:fixed; z-index:13; right:26px; bottom:26px; width:104px; height:104px; border-radius:50%;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer;
  background:rgba(17,24,28,.72); border:2px solid var(--bronze); color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 6px rgba(184,128,77,.12);
  backdrop-filter:blur(13px) saturate(1.2); -webkit-backdrop-filter:blur(13px) saturate(1.2); touch-action:manipulation; }
@media (pointer: coarse), (max-width: 760px) { #tapBtn:not([hidden]) { display:flex; } }
#tapBtn #tapGlyph { font-size:28px; line-height:1; color:var(--bronze); }
#tapBtn #tapLabel { font-size:11px; font-weight:700; letter-spacing:.02em; max-width:88px; text-align:center; }

/* The two cards. The document is already lang="en" and LTR, so dir="ltr" on the two elements is all they need. */
#rotate, #touchCard { position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(9,14,17,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
#rotate:not([hidden]), #touchCard:not([hidden]) { display:flex; }
.pcard { width:min(420px,100%); max-height:100%; overflow:auto; padding:22px 24px 20px; border-radius:16px;
  background:var(--panel); border:1px solid var(--line); box-shadow:0 18px 54px var(--shadow); color:var(--ink); }
#rotate .pcard { text-align:center; }
#rotate .picon { font-size:34px; color:var(--bronze); }
#rotate h2 { margin:12px 0 8px; font-size:20px; letter-spacing:.01em; }
#rotate p { margin:0; font-size:13px; line-height:1.5; color:var(--muted); }
/* the tower’s OWN title line, copied out of #guide-title at runtime - never retyped */
.ptitle { font-size:17px; font-weight:700; letter-spacing:.01em; margin-bottom:9px; }
.ptitle:empty { display:none; }
.peyebrow { display:block; font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.prule { margin:11px 0 13px; border:0; border-top:1px solid var(--line); }
.prow { display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; font-size:13px; line-height:1.45; }
.prow .pdot { flex:0 0 28px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--ink); }
.prow .pdot.gold { color:var(--bronze); border-color:var(--bronze); background:rgba(184,128,77,.14); }
.prow b { font-weight:700; }
.prow span span { color:var(--muted); }
#touchEnter { width:100%; margin-top:6px; padding:13px 16px; border-radius:11px; cursor:pointer; font-size:15px; font-weight:700;
  background:var(--bronze); color:#17242b; border:1px solid var(--bronze); }


/* ---------------------------------------------------------------- the clean handset screen
   On a handset, and ONLY after the visitor has entered, nothing is on screen but the day/evening toggle,
   the stick and the round button - the wordmark and the notice line go with the rest of the chrome.
   the stick and the round button. `body.phone-clean` is set by the Enter button and by nothing else, so a
   desktop pointer never reaches any of this. The tower’s own #guide-overlay is skipped on a handset: its
   title line moves into the controls card instead, copied out of the DOM. */
@media (pointer: coarse) and (max-width: 1100px) {
  #guide-overlay { display:none !important; }
  body.phone-clean #brand,
  body.phone-clean #walk-status,
  body.phone-clean #telemetry,
  body.phone-clean #route-controls,
  body.phone-clean #previous,
  body.phone-clean #guide,
  body.phone-clean #next,
  body.phone-clean #hint,
  body.phone-clean #info-toggle,
  body.phone-clean #benchmark,
  body.phone-clean #map-toggle,
  body.phone-clean #photo-toggle,
  body.phone-clean #settings-toggle,
  body.phone-clean #lift-action { display:none !important; }
  /* the two presets stay together, top-right, 44 px each, well clear of the bottom-right round button */
  body.phone-clean #top-tools { top:max(12px,env(safe-area-inset-top)); right:14px; gap:8px; flex-wrap:nowrap; max-width:none; }
  body.phone-clean #top-tools .tool { min-width:44px; height:44px; padding:0 12px; font-size:11px; }
}

/* A 342 px-tall landscape screen still shows the whole card. */
@media (max-height:400px) {
  .pcard { padding:14px 16px 13px; }
  #rotate .picon { font-size:26px; }
  #rotate h2 { margin:7px 0 5px; font-size:17px; }
  .prow { margin-bottom:8px; font-size:12px; line-height:1.35; }
  .prow .pdot { flex:0 0 24px; width:24px; height:24px; font-size:12px; }
  .prule { margin:8px 0 9px; }
  #touchEnter { padding:10px 14px; font-size:14px; }
  #tapBtn { width:92px; height:92px; right:20px; bottom:20px; }
}