/* Vazirmatn — the standard Persian UI face, and the closest thing to SF Pro
   for Farsi. Served from our own host: no CDN request, so it works on a
   filtered connection and there is nothing to block. Three weights only. */
@font-face{
  font-family:"Vazirmatn";src:url("assets/vazirmatn-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Vazirmatn";src:url("assets/vazirmatn-medium.woff2") format("woff2");
  font-weight:500 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Vazirmatn";src:url("assets/vazirmatn-bold.woff2") format("woff2");
  font-weight:700 800;font-style:normal;font-display:swap;
}

/* LootBox — recovered device UI.
 *
 * One layout, two contexts: on a phone it fills the screen edge to edge; on a
 * desktop it becomes a device sitting on a dark table.
 */

:root{
  /* iOS dark-mode system palette, so the device reads as a real phone the
     player has picked up rather than as a themed web page. */
  --void:#000;
  --shell:#000;
  --panel:#1c1c1e;          /* systemGray6 */
  --panel-2:#2c2c2e;        /* systemGray5 */
  --line:#38383a;           /* separator */
  --ink:#fff;
  --muted:#98989f;          /* secondaryLabel */
  --dim:#636366;            /* tertiaryLabel */
  --blue:#0a84ff;           /* systemBlue, dark */
  --gold:#c6a15b;
  --gold-soft:#d8c49a;
  --red:#c0554a;
  --green:#5fae7a;
  --radius:10px;
  --font:"Vazirmatn",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  /* Latin numerals stay in the system face: Vazirmatn's digits are lovely in
     body copy but too wide for a status bar and a lock-screen clock. */
  --num:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

/* Belt and braces: if a variable ever goes missing again, the page must still
   come up dark rather than flipping to black-on-white and looking broken. */
html{background:#000;color-scheme:dark}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;          /* no long-press menus on a "phone" */
}

/* A phone has no scrollbars. Chrome/Safari and Firefox each need their own
   incantation, and the container must still scroll — only the bar is gone. */
*::-webkit-scrollbar{width:0;height:0;display:none}
*{scrollbar-width:none;-ms-overflow-style:none}

/* An author rule like `.sheet{display:flex}` beats the browser's own
   `[hidden]{display:none}` — author styles always win over UA styles,
   whatever the specificity. Without this, every screen renders at once and
   the overlay can never be dismissed. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--void);color:var(--ink);font-family:var(--font);
  display:flex;align-items:center;justify-content:center;
  overscroll-behavior:none;overflow:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Chrome and headings are UI, not content — selecting them looks broken. */
.statusbar,.netbar,.appbar,.largetitle,.app-name,.homebar,.keypad,.zoomer{
  user-select:none;-webkit-user-select:none;
}

/* ---------------------------------------------------------------- gate */
.gate{display:flex;align-items:center;justify-content:center;padding:24px;width:100%}
.gate-card{max-width:400px;text-align:center}
.cube{
  width:76px;height:76px;margin:0 auto 26px;
  border:2px solid var(--gold);transform:rotate(45deg);border-radius:6px;
  box-shadow:0 0 60px rgba(198,161,91,.25);
}
.gate h1{font-family:var(--mono);letter-spacing:.42em;font-size:26px;margin:0 0 10px;font-weight:600}
.gate-code{font-family:var(--mono);color:var(--gold);letter-spacing:.24em;font-size:12px;margin:0 0 26px}
.gate-text{color:var(--muted);line-height:2.1;font-size:15px;margin:0 0 30px}
.gate-btn{
  display:inline-block;padding:15px 40px;border-radius:999px;
  background:var(--gold);color:#14110b;text-decoration:none;font-weight:700;font-size:16px;
}
.gate-btn:active{transform:scale(.97)}

/* --------------------------------------------------------------- stage */
.stage{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;height:100%;justify-content:center}
.phone{
  position:relative;width:100%;max-width:420px;height:100%;max-height:900px;
  background:
    radial-gradient(120% 70% at 50% 0%, #12131a 0%, #0a0a0d 46%, #000 100%);
  display:flex;flex-direction:column;overflow:hidden;
}
/* Dynamic Island */
.phone::before{
  content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:112px;height:32px;border-radius:18px;background:#000;z-index:30;pointer-events:none;
}
.stage-hint{display:none}

@media (min-width:820px){
  .phone{
    height:min(880px,92vh);border-radius:54px;
    box-shadow:0 40px 120px rgba(0,0,0,.8),
               0 0 0 12px #1a1a1c, 0 0 0 13px #3a3a3c;
  }
  .stage-hint{display:block;color:var(--dim);font-family:var(--mono);font-size:12px;letter-spacing:.16em;margin:0}
}

/* ----------------------------------------------------------- statusbar */
.statusbar{
  flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 26px;height:54px;font-size:15px;font-weight:600;color:var(--ink);
  margin-top:max(0px,env(safe-area-inset-top));position:relative;z-index:31;
}
.statusbar .sb-time{justify-self:end;order:3}
.statusbar .sb-batt{justify-self:start;order:1}
.statusbar .sb-island{order:2;width:118px;height:1px}
.sb-time{font-variant-numeric:tabular-nums;font-family:var(--num)}
/* Its own strip UNDER the status bar — the island owns the centre. */
.sb-mid{
  position:static;transform:none;font-size:11px;font-weight:500;color:var(--red);
  letter-spacing:.04em;transition:opacity .3s;
}
.netbar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;
  /* The Dynamic Island sits at 11–43px. Anything less than this and the two
     visually collide into one smudge. */
  margin:14px auto 4px;padding:4px 12px;font-size:11px;color:var(--red);
  background:rgba(192,85,74,.14);border-radius:999px;width:max-content;
}
.netbar i{width:5px;height:5px;border-radius:50%;background:var(--red);
  animation:blip 2.4s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.sb-mid.flick{opacity:.25}
.sb-batt{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.sb-batt i{
  width:22px;height:11px;border:1px solid var(--dim);border-radius:3px;position:relative;display:block;
}
.sb-batt i::after{content:"";position:absolute;inset:1.5px;width:var(--fill,15%);background:var(--red);border-radius:1px}

/* -------------------------------------------------------------- screens */
.screen{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}

/* lock */
.lock{align-items:center;justify-content:flex-end;gap:22px;padding:20px 28px 26px}
.lock-top{text-align:center;margin-bottom:auto;margin-top:46px}
.lock-owner{font-size:17px;margin:0 0 8px;color:var(--ink);font-weight:600}
.lock-hint{font-size:14px;color:var(--muted);margin:0}
.dots{display:flex;gap:16px;margin:4px 0}
.dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);transition:.16s}
.dots i.on{background:#fff;border-color:#fff}
.dots.shake{animation:shake .38s}
@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
.lock-err{color:var(--red);font-size:13px;height:18px;margin:0}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:280px}
.keypad{gap:20px 22px;max-width:290px;direction:ltr}  /* digits never flip */
.keypad button{
  font-family:var(--num);aspect-ratio:1;border-radius:50%;border:none;
  background:rgba(255,255,255,.11);backdrop-filter:blur(12px);
  color:#fff;font-size:30px;font-weight:400;cursor:pointer;transition:background .1s;
}
.keypad button:active{background:rgba(255,255,255,.28)}
.keypad button.wide{background:none;font-size:16px;color:#fff}

/* home */
.home{padding:22px 20px 12px;gap:14px}
.dock{
  margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  background:rgba(255,255,255,.10);backdrop-filter:blur(24px) saturate(160%);
  border-radius:28px;padding:12px 10px;
}
.dock .app-name{display:none}
.page-dots{display:flex;gap:6px;justify-content:center;margin:2px 0 6px}
.page-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}
.page-dots i.on{background:#fff}
.home-user{
  margin:0;text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;color:var(--dim);
}
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 8px;margin-top:16px}
.app-btn{
  background:none;border:none;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:9px;padding:0;color:var(--ink);
}
.app-ico{
  width:62px;height:62px;border-radius:22.5%;   /* iOS continuous-corner ratio */
  display:block;position:relative;overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.08);
  transition:transform .16s cubic-bezier(.2,.8,.3,1);
}
.app-ico svg{width:100%;height:100%;display:block}





.app-btn:active .app-ico{transform:scale(.9)}


.app-name{font-size:12px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}

.home-foot{margin:0;text-align:center;font-size:10.5px;color:var(--dim)}

/* app shell */
.appbar{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:4px 10px 10px;
  border-bottom:.5px solid var(--line);background:rgba(20,20,22,.86);
  backdrop-filter:saturate(180%) blur(20px);
}
.appbar h2{font-size:17px;margin:0;font-weight:600;flex:1;text-align:center}
.appbar-spacer{width:64px}
.back{
  display:flex;align-items:center;gap:2px;height:38px;border:none;background:none;
  color:var(--blue);font-size:17px;font-family:inherit;cursor:pointer;padding:0 4px;
}
.back em{font-size:27px;font-style:normal;line-height:1;margin-top:-3px}
.back:active{opacity:.45}
.appbody{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:4px 0 26px}

/* rows */
.list{margin:14px 12px;background:var(--panel);border-radius:12px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:10px 14px;border:none;
  width:100%;background:none;color:inherit;text-align:right;cursor:pointer;font-family:inherit}
.row + .row{box-shadow:0 -.5px 0 var(--line)}
.row:active{background:var(--panel-2)}
.avatar{
  width:42px;height:42px;border-radius:50%;background:#48484a;display:grid;place-items:center;
  color:#fff;font-size:17px;flex:0 0 auto;
}
.row-main{flex:1;min-width:0}
.row-title{font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.row-sub{
  /* MUST be a block: these are <span>s, and overflow/text-overflow are
     ignored on inline elements — which is why long previews ran straight
     under the timestamp instead of truncating. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  font-size:14px;color:var(--muted);margin-top:1px;overflow:hidden;
  line-height:1.45;max-height:2.9em;
}
.row-meta{font-size:13.5px;color:var(--muted);flex:0 0 auto;font-family:var(--num);
  align-self:flex-start;padding-top:2px}
.tag{font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:5px;
  background:rgba(192,85,74,.16);color:var(--red)}

/* messages */
.msgs{padding:16px 14px;display:flex;flex-direction:column;gap:9px}
.bubble{max-width:76%;padding:9px 14px;border-radius:19px;font-size:15px;line-height:1.8;
  position:relative}
.bubble.them{background:#26262a;align-self:flex-start;border-bottom-left-radius:5px}
.bubble.me{background:var(--blue);align-self:flex-end;border-bottom-right-radius:5px}
.bubble time{display:block;font-size:10.5px;color:rgba(255,255,255,.55);margin-top:5px}
.draft-note{margin:0 14px 10px;padding:11px 14px;border:1px dashed var(--line);border-radius:12px;
  color:var(--muted);font-size:12.5px;text-align:center}

/* gallery */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px}
.grid button{border:none;padding:0;background:none;cursor:pointer;position:relative;aspect-ratio:3/4}
.grid img{width:100%;height:100%;object-fit:cover;display:block}
.grid span{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(0,0,0,.8));
  color:#fff;font-family:var(--mono);font-size:10px;padding:14px 6px 5px}

/* map */
.mapwrap{position:relative;margin:12px;border-radius:12px;overflow:hidden;direction:ltr}
.mapwrap img{width:100%;display:block}
.pin{position:absolute;transform:translate(50%,-100%);background:none;border:none;padding:0;cursor:pointer}
.pin b{
  display:grid;place-items:center;width:27px;height:27px;border-radius:50% 50% 50% 2px;
  transform:rotate(45deg);background:#ff453a;color:#fff;
  font-size:11px;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.6);border:1.5px solid #fff;
}
.pin b span{transform:rotate(-45deg)}
.pin.last b{background:#48484a}

.maplist{padding:0 4px 8px}
.map-note{margin:12px 20px 0;color:var(--muted);font-size:13.5px;line-height:1.9}

/* notes */
.note{margin:14px 12px;padding:18px;background:var(--panel);border-radius:12px}
.note h3{margin:0 0 4px;font-size:15px}
.note .hired{margin:0 0 14px;font-size:12.5px;color:#f5c542}
.logrow{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;
  padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
.logrow .t,.logrow .n{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.logrow .n{color:#f5c542}
.logrow .s{font-size:11.5px;color:#5fae7a}
.logrow.open .s{color:var(--red)}
.logrow.open .a{color:var(--dim)}
.note p{margin:0;color:var(--muted);line-height:2.1;font-size:14px;white-space:pre-line}

/* homebar */
.homebar{
  flex:0 0 auto;height:26px;border:none;background:none;cursor:pointer;display:grid;place-items:center;
  padding-bottom:max(6px,env(safe-area-inset-bottom));
}
.homebar::after{content:"";width:136px;height:5px;border-radius:3px;background:rgba(255,255,255,.4)}

/* sheet */
.sheet{
  position:fixed;inset:0;background:rgba(4,4,7,.94);z-index:40;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:22px;
}
.sheet-inner{max-width:520px;width:100%;text-align:center}
.sheet-inner img{max-width:100%;max-height:66vh;border-radius:12px;display:block;margin:0 auto}
.sheet-meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:14px;line-height:2}
.sheet-coord{
  direction:ltr;font-family:var(--mono);font-size:19px;color:#fff;margin-top:10px;
  user-select:all;-webkit-user-select:all;word-break:break-all;
}
.sheet-close{
  padding:14px 38px;border-radius:14px;border:none;background:var(--panel-2);
  color:#fff;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;
}
.copy-btn{
  margin-top:16px;padding:12px 26px;border-radius:14px;border:none;
  background:var(--blue);color:#fff;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
}
.copy-btn.done{background:#30d158}

/* Coordinates, times and codes are Latin runs inside Persian text; without an
   explicit direction the bidi algorithm reorders them and 35.8301, 51.0102
   renders as 51.0102, 35.8301 — a wrong answer the player would copy. */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}


/* ═══════════════════════════════════ motion ═══════════════════════════ */
/* iOS grows an app out of its icon and drops it back in. Reproducing that
   is most of what separates "a phone" from "a stack of web pages". */
.app.opening{animation:appOpen .32s cubic-bezier(.16,.9,.3,1)}
.app.closing{animation:appClose .22s cubic-bezier(.5,0,.85,.4) forwards}
@keyframes appOpen{from{opacity:0;transform:scale(.14)}to{opacity:1;transform:scale(1)}}
@keyframes appClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.16)}}

/* navigation push/pop */
.appbody.push-in{animation:pushIn .28s cubic-bezier(.2,.8,.3,1)}
.appbody.push-out{animation:pushOut .28s cubic-bezier(.2,.8,.3,1)}
@keyframes pushIn{from{opacity:.2;transform:translateX(-22%)}to{opacity:1;transform:none}}
@keyframes pushOut{from{opacity:.2;transform:translateX(22%)}to{opacity:1;transform:none}}

.home:not([hidden]){animation:homeIn .26s ease-out}
@keyframes homeIn{from{opacity:.4;transform:scale(1.06)}to{opacity:1;transform:none}}
/* No `backwards` fill and no stagger delay: if animations are throttled,
   paused or disabled, the icons must still be on screen. An entrance effect
   is a flourish, never the thing that reveals content. */
.app-btn{animation:iconIn .3s cubic-bezier(.2,.9,.3,1)}
@keyframes iconIn{from{opacity:0;transform:translateY(10px) scale(.86)}to{opacity:1;transform:none}}

.bubble{animation:bubbleIn .26s cubic-bezier(.2,.9,.3,1)}
@keyframes bubbleIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════ map ══════════════════════════════ */
.mapwrap{
  position:relative;margin:12px;border-radius:14px;overflow:hidden;direction:ltr;
  height:380px;background:#0f1216;touch-action:none;cursor:grab;
}
.mapwrap:active{cursor:grabbing}
.mapcanvas{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.mapcanvas img.mapbase{
  width:100%;height:100%;display:block;pointer-events:none;user-select:none;
  transition:opacity .25s ease;
}
.mapdetail{
  position:absolute;pointer-events:none;opacity:0;z-index:0;
  transition:opacity .3s ease;
}
/* Smooth interpolation, not optimize-contrast: the latter sharpens map tiles
   into harsh aliased edges the moment they are scaled up at all. */
.mapmid{
  position:absolute;pointer-events:none;opacity:0;z-index:0;
  transition:opacity .3s ease;
}
.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;transition:opacity .3s}
.pin{
  position:absolute;transform:translate(-50%,-100%) scale(var(--inv,1));
  transform-origin:50% 100%;border:none;padding:0;background:none;cursor:pointer;z-index:2;
}
.pin b{
  display:grid;place-items:center;width:26px;height:26px;
  border-radius:50% 50% 50% 2px;transform:rotate(45deg);
  background:#ff453a;color:#fff;font-size:11px;font-weight:700;
  border:1.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.65);
}
.pin b span{transform:rotate(-45deg)}
.pin.last b{background:#5a5a5f}
.pin:active b{filter:brightness(1.2)}
.zoomer{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;
  border-radius:9px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.5);z-index:3}
.zoomer button{
  width:34px;height:34px;border:none;background:rgba(28,28,30,.94);color:#fff;
  font-size:20px;line-height:1;cursor:pointer;
}
.zoomer button+button{border-top:.5px solid #3a3a3c}
.zoomer button:active{background:#3a3a3c}
.sec-head{
  margin:18px 26px 6px;font-size:12.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
}
.avatar.sm{width:30px;height:30px;font-size:13px;background:#ff453a}
.row-where{font-size:12px;color:var(--muted);font-weight:400}
.chev{color:var(--dim);font-size:19px;flex:0 0 auto}

/* ═══════════════════════════ bottom sheet / card ══════════════════════ */
.sheet{opacity:0;transition:opacity .24s ease}
.sheet.in{opacity:1}
.sheet.card-mode{justify-content:flex-end;padding:0;background:rgba(0,0,0,.5)}
.sheet.card-mode .sheet-inner{
  background:#1c1c1e;border-radius:16px 16px 0 0;padding:10px 20px 26px;max-width:430px;
  text-align:right;transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.9,.3,1);
  padding-bottom:max(26px,env(safe-area-inset-bottom));
}
.sheet.card-mode.in .sheet-inner{transform:none}
.sheet.card-mode .sheet-close{display:none}
.card-grab{width:38px;height:5px;border-radius:3px;background:#48484a;margin:0 auto 16px}
.card-kicker{margin:0 0 4px;font-size:12.5px;color:var(--muted)}
.card-title{margin:0 0 16px;font-size:22px;font-weight:700}
.card-rows{border-top:.5px solid var(--line)}
.card-rows div{display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:.5px solid var(--line);font-size:14.5px}
.card-rows span{color:var(--muted)}
.card-rows b{font-family:var(--mono);font-weight:500}
.card-coord{
  margin:16px 0 0;font-family:var(--mono);font-size:17px;color:#fff;text-align:center;
  background:#2c2c2e;border-radius:10px;padding:13px;user-select:all;-webkit-user-select:all;
}
.sheet.card-mode .copy-btn{width:100%;margin-top:12px}


/* ═════════════════════════════ iOS refinements ════════════════════════ */

/* lock screen — clock first, the way iOS does it */
.lock{justify-content:flex-start;padding:8px 28px 24px}
.lock-clock{text-align:center;margin-top:8px}
.lc-date{margin:0;font-size:15px;color:rgba(255,255,255,.82);font-weight:500}
.lc-time{margin:2px 0 0;font-size:76px;font-weight:300;letter-spacing:-2px;line-height:1.04;
  font-variant-numeric:tabular-nums;font-family:var(--num)}
.lock-top{margin:auto 0 6px}
.lock-glyph{
  display:block;width:46px;height:46px;margin:0 auto 12px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);position:relative;font-size:0;
}
.lock-glyph::before{
  content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);
  width:17px;height:13px;border:2.4px solid rgba(255,255,255,.85);
  border-bottom:none;border-radius:9px 9px 0 0;
}
.lock-glyph::after{
  content:"";position:absolute;left:50%;top:20px;transform:translateX(-50%);
  width:23px;height:16px;border-radius:4px;background:rgba(255,255,255,.85);
}
.lock-owner{font-size:16px;margin:0 0 4px;font-weight:500}
.lock-hint{font-size:14px;color:rgba(255,255,255,.62)}
.dots{gap:19px;margin:14px 0 2px}

/* large titles */
.largetitle{
  flex:0 0 auto;margin:0;padding:0 20px 10px;font-size:34px;font-weight:800;
  letter-spacing:-.6px;transition:opacity .18s;
}
.appbar h2{opacity:0;transition:opacity .18s}
.appbar.compact h2{opacity:1}
.appbar.compact{border-bottom-color:var(--line)}
.appbar{border-bottom-color:transparent;transition:border-color .2s}

/* search field */
.searchbar{margin:6px 16px 2px}
.searchbar input{
  width:100%;height:36px;border:none;border-radius:10px;background:#1c1c1e;
  color:#fff;font-family:inherit;font-size:16px;padding:0 34px 0 12px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;background-size:16px;
}
.searchbar input::placeholder{color:#8e8e93}
.searchbar input:focus{outline:none;background-color:#26262a}

/* home wallpaper + dock */
.home{
  background:
    radial-gradient(80% 50% at 30% 12%, rgba(120,90,200,.30), transparent 60%),
    radial-gradient(70% 46% at 78% 34%, rgba(30,120,170,.26), transparent 62%),
    radial-gradient(90% 60% at 50% 96%, rgba(190,120,60,.18), transparent 66%);
}
.lock{
  background:
    radial-gradient(80% 50% at 30% 12%, rgba(120,90,200,.30), transparent 60%),
    radial-gradient(70% 46% at 78% 34%, rgba(30,120,170,.26), transparent 62%);
}
.dock .app-ico{width:56px;height:56px}
.dock .app-btn{gap:0}

/* rows: iOS uses a hairline that starts after the avatar */
.row + .row{box-shadow:none;position:relative}
.row + .row::before{
  content:"";position:absolute;top:0;right:68px;left:0;height:.5px;background:var(--line);
}


/* photo viewer */
.viewer{position:relative}
.viewer img{max-height:62vh;border-radius:14px}
.viewer-nav{display:flex;justify-content:center;gap:18px;margin-top:16px}
.viewer-nav button{
  width:52px;height:52px;border-radius:50%;border:none;background:#2c2c2e;color:#fff;
  font-size:26px;line-height:1;cursor:pointer;
}
.viewer-nav button:disabled{opacity:.25}
.viewer-nav button:active:not(:disabled){background:#3a3a3c}

/* a third control on the zoomer */
.zoomer button:last-child{font-size:15px}


/* the break in the location record */
.gaprow{display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(192,85,74,.07)}
.gapline{flex:0 0 30px;height:0;border-top:2px dashed var(--red);opacity:.75}
.gaptext{flex:1;font-size:13px;color:var(--red)}
.gaptime{font-size:12.5px;color:var(--muted);font-family:var(--num)}


/* the marker the player drops */
.marker{
  position:absolute;transform:translate(-50%,-100%) scale(var(--inv,1));
  transform-origin:50% 100%;pointer-events:none;z-index:4;
}
.marker b{
  display:block;width:22px;height:22px;border-radius:50% 50% 50% 2px;
  transform:rotate(45deg);background:#0a84ff;border:2px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.7);
}
.marker.pop b{animation:markerPop .34s cubic-bezier(.2,.9,.3,1)}
@keyframes markerPop{
  from{transform:rotate(45deg) scale(.2);opacity:0}
  to{transform:rotate(45deg) scale(1);opacity:1}
}
.ghost-btn{
  width:100%;margin-top:10px;padding:12px;border-radius:14px;border:none;
  background:var(--panel-2);color:#fff;font-family:inherit;font-size:15px;cursor:pointer;
}
.ghost-btn:active{background:#3a3a3c}
.logrow.open .a{color:var(--red);font-size:12.5px}