/* =========================================================
   phone.css — the hardware, the screen chrome, lock + home
   The phone is authored at 375x812 inside the rig.
   ========================================================= */

.phone{
  position:absolute;
  left:192px; top:400px;
  width:375px; height:812px;
  border-radius:58px;
  padding:11px;
  z-index:1;          /* always above the props on the counter */
  background:
    linear-gradient(150deg,#6d6d72 0%,#2b2b30 16%,#17171a 32%,#1d1d21 52%,#3a3a40 70%,#0f0f12 86%,#4a4a50 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.16) inset,
    0 -2px 0 rgba(0,0,0,.5) inset,
    0 40px 70px -20px rgba(0,0,0,.65),
    0 8px 24px rgba(0,0,0,.4);
}
.side-btn{position:absolute; background:linear-gradient(180deg,#5a5a60,#232327); border-radius:2px}
.side-btn::before{content:""; position:absolute; inset:-6px -12px}   /* fatter hit area */
.side-btn.silent{left:-3px; top:150px; width:4px; height:30px}
.side-btn.vol-up{left:-3px; top:206px; width:4px; height:58px}
.side-btn.vol-dn{left:-3px; top:278px; width:4px; height:58px}
.side-btn.power{right:-3px; top:230px; width:4px; height:94px}

/* ---------- screen ---------- */
.screen{
  position:relative;
  width:100%; height:100%;
  border-radius:47px;
  overflow:hidden;
  background:var(--bg);
  isolation:isolate;

  --bg:#08080a;
  --bg2:#131317;
  --card:#1a1a1f;
  --card2:#232329;
  --line:rgba(255,255,255,.10);
  --tx:#f6f3ef;
  --tx2:#9c948b;
  --acc:#e3b489;
  --acc2:#c08e5c;
  --grn:#3ddc84;
  --red:#ff5d5d;
  color:var(--tx);
  font-size:15px;
}
.screen.light{
  --bg:#f1eee8;
  --bg2:#ffffff;
  --card:#ffffff;
  --card2:#f6f3ed;
  --line:rgba(0,0,0,.10);
  --tx:#15130f;
  --tx2:#7b736a;
  --acc:#a9702f;
  --acc2:#8a5a24;
}
.screen ::-webkit-scrollbar{display:none}
.screen *{scrollbar-width:none}

/* the fone is black glass. the dog you see on it is a reflection,
   not a wallpaper — that lives in .screen-glare, over everything.
   the screen is always 353x790 design px, so the optional photo
   wallpapers can be pinned in px; both crops are framed to keep the
   banner's title text out of shot. */
.wallpaper{
  position:absolute; inset:0; z-index:0;
  background:#000;
  background-repeat:no-repeat;
  transition:opacity .3s ease;
}
.screen[data-wall="dog"] .wallpaper{
  background-image:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.12) 38%,rgba(0,0,0,.72)),url("../Banner.jpg");
  background-size:cover, 2889px auto;      /* widest face crop that clears the title */
  background-position:center, -1318px -171px;
}
.screen[data-wall="banner"] .wallpaper{    /* close on the cigarette and the fone */
  background-image:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.2) 40%,rgba(0,0,0,.75)),url("../Banner.jpg");
  background-size:cover, 3748px auto;
  background-position:center, -1585px -459px;
}
.screen[data-wall="tan"] .wallpaper{
  background-image:radial-gradient(110% 70% at 50% 8%,#e3b489,#7b573a 55%,#241a12 100%);
}
.screen.in-app .wallpaper{opacity:0}

/* ---------- status bar + island ---------- */
.statusbar{
  position:absolute; z-index:55; top:0; left:0; right:0; height:54px;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px 0;
  font-size:15px; font-weight:650; letter-spacing:.01em;
  color:var(--tx);
  pointer-events:none;
}
.screen.on-wall .statusbar{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35)}
.sb-right{display:flex; align-items:center; gap:6px}
.sb-ico{height:12px; width:auto; fill:currentColor}
.sb-batt{height:12px}

.island{
  position:absolute; z-index:56; top:12px; left:50%; transform:translateX(-50%);
  width:112px; height:34px; border-radius:20px;
  background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.05);
}
.island::after{
  content:""; position:absolute; right:11px; top:11px;
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #26323f 0%, #0a0d12 62%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}

/* ---------- screen glare + home bar ---------- */
/* the dog, reflected in the glass — laid over everything on the screen.
   screen-blend means it only ever adds light, so it ghosts over black
   and politely disappears on bright app backgrounds, like real glass. */
.screen-glare{
  position:absolute; inset:0; z-index:57; pointer-events:none;
  background-image:url("../reflection.jpg");
  background-size:cover;
  background-position:center 42%;
  opacity:var(--reflect, .34);
  mix-blend-mode:screen;
  transition:opacity .3s ease;
}
.screen-glare::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(114deg, rgba(255,255,255,.07) 0 13%, transparent 25% 73%, rgba(255,255,255,.04) 87% 100%),
    radial-gradient(120% 55% at 50% 0%, rgba(255,255,255,.06), transparent 60%);
}
.screen.no-reflect .screen-glare{background-image:none; opacity:1; mix-blend-mode:normal}
.home-bar{
  position:absolute; z-index:58; left:0; right:0; bottom:0; height:26px;
  display:grid; place-items:center;
  padding:0;
}
.home-bar i{
  display:block; width:138px; height:5px; border-radius:3px;
  background:var(--tx); opacity:.85;
  transition:transform .2s ease, opacity .2s;
}
.screen.on-wall .home-bar i{background:#fff}
.home-bar:active i{transform:scaleX(.9)}
.screen.locked .home-bar i{opacity:.6}

/* ---------- views ---------- */
.view{
  position:absolute; inset:0; z-index:10;
  display:none; flex-direction:column;
}
.view.is-active{display:flex}

/* ---------- lock screen ---------- */
.lock{
  padding:56px 24px 30px;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
  transition:transform .45s cubic-bezier(.5,0,.2,1), opacity .35s;
}
.lock.lifting{transform:translateY(-102%); opacity:0}
.lock-top{text-align:center; padding-top:14px}
.lock-ico{width:22px; height:22px; fill:#fff; opacity:.85}
.lock-clock{
  font-size:78px; line-height:1; font-weight:560; letter-spacing:-.035em;
  margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.lock-date{font-size:16px; font-weight:600; opacity:.92; margin-top:6px; letter-spacing:.01em}

.lock-notes{
  flex:1; display:flex; flex-direction:column; gap:9px;
  justify-content:flex-end; padding-bottom:16px;
  overflow:hidden;
}
.notif{
  display:flex; gap:11px; align-items:flex-start; text-align:left;
  padding:12px 14px; border-radius:20px; width:100%;
  background:rgba(30,26,22,.42);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(18px) saturate(1.2);
  animation:notifIn .5s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay:calc(var(--d,0) * 90ms + 250ms);
}
@keyframes notifIn{from{opacity:0; transform:translateY(16px) scale(.96)}}
.notif .ni{width:34px; height:34px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center}
.notif .ni svg{width:20px; height:20px}
.notif .nt{flex:1; min-width:0}
.notif b{display:block; font-size:13px; font-weight:700; letter-spacing:.02em}
.notif span{display:block; font-size:13px; opacity:.9; line-height:1.35; margin-top:1px}
.notif em{font-style:normal; font-size:11px; opacity:.6; float:right; margin-left:8px}
.lock-bottom{text-align:center; padding-bottom:16px}
.lock-hint{font-size:13px; opacity:.72; letter-spacing:.04em; animation:hintPulse 2.4s ease-in-out infinite}

/* ---------- home screen ---------- */
.home{padding:64px 20px 0; z-index:11}
.home-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px 10px; align-content:start;
}
.app{display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; width:100%}
.app-ico{
  width:62px; height:62px; border-radius:16px;
  display:grid; place-items:center;
  color:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s cubic-bezier(.3,1.4,.5,1);
  position:relative;
}
.app-ico::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 55%);
}
.app-ico svg{width:36px; height:36px; position:relative; z-index:1}
.app:active .app-ico{transform:scale(.9)}
.app-lbl{
  font-size:11.5px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.65);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  letter-spacing:.01em;
}
.app-badge{
  position:absolute; top:-4px; right:-4px; z-index:2;
  min-width:20px; height:20px; padding:0 5px; border-radius:10px;
  background:#ff3b30; color:#fff; font-size:12px; font-weight:700;
  display:grid; place-items:center; box-shadow:0 0 0 2px rgba(0,0,0,.15);
}
.app{position:relative}

/* home screen widget */
.widget{
  grid-column:1 / -1;
  display:block;
  padding:14px 15px 12px; margin-bottom:4px;
  border-radius:24px; text-align:left; color:#fff;
  background:rgba(26,22,18,.44);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.widget .w-top{display:flex; align-items:center; gap:13px}
.widget .w-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  margin-top:13px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.12);
}
.widget .w-stats i{display:block; font-style:normal; text-align:center}
.widget .w-stats b{
  display:block; font-size:14px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.widget .w-stats b.up{color:#4ade80}
.widget .w-stats b.down{color:#ff7b7b}
.widget .w-stats span{
  display:block; font-size:9.5px; margin-top:2px; opacity:.6;
  letter-spacing:.1em; text-transform:uppercase;
}
.widget img{width:52px; height:52px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(227,180,137,.7)}
.widget .wt{flex:1; min-width:0}
.widget .wt b{display:block; font-size:17px; letter-spacing:-.01em}
.widget .wt em{
  display:block; font-style:normal; font-size:12px; margin-top:2px; opacity:.72;
  font-family:ui-monospace,Menlo,monospace;
}
.widget .wc{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 11px; border-radius:14px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.1);
}
.widget .wc svg{width:16px; height:16px}
.widget .wc i{font-style:normal; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.8}
.widget:active{transform:scale(.985)}

.page-dots{display:flex; gap:7px; justify-content:center; margin-top:auto; padding-bottom:14px}
.page-dots i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35)}
.page-dots i.on{background:#fff}

.dock{
  margin:0 -6px 30px; padding:12px 10px;
  border-radius:32px;
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,.12);
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.dock .app-lbl{display:none}

/* ---------- app container ---------- */
.app-host{position:absolute; inset:0; z-index:30; pointer-events:none}
.app-view{
  position:absolute; inset:0;
  background:var(--bg);
  display:flex; flex-direction:column;
  pointer-events:auto;
  transform-origin:50% 50%;
  transition:transform .34s cubic-bezier(.18,.86,.24,1), opacity .26s ease;
}
.app-view.closed{transform:scale(.34); opacity:0; pointer-events:none}

.app-head{
  position:relative; z-index:5;
  padding:58px 18px 10px;
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,var(--bg2) 60%,transparent);
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.app-head h1{margin:0; font-size:19px; font-weight:700; letter-spacing:-.01em; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.app-head .back{display:flex; align-items:center; gap:2px; color:var(--acc); font-size:15px; margin-left:-6px}
.app-head .back svg{width:20px; height:20px; fill:currentColor}
.app-head .act{color:var(--acc); font-size:14px; font-weight:600}
.app-body{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding-bottom:34px;
  -webkit-overflow-scrolling:touch;
}
.app-view.edge .app-head{display:none}
.app-view.edge .app-body{padding-bottom:0}