/* ─────────────────────────────────────────────
   Android device mockup
   device: 412 x 915 screen in a 3px rail + 9px bezel (Pixel proportions)
   screen: everything inside .ui — swap that for a takeover
   ───────────────────────────────────────────── */

:root{
  --screen-w:412px;
  --screen-h:915px;
  --fit:1;                        /* set by app.js to fit the window */
  --ui:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  display:grid;place-items:center;
  overflow:hidden;
  background:
    radial-gradient(70% 55% at 50% -10%, #2b2e36, transparent 70%),
    linear-gradient(180deg, #17181c, #0a0a0c);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
}

.sprite{display:none}
/* fixed to the viewport: an auto-height stage would size to the device's unscaled box */
.stage{position:fixed;inset:0;display:grid;place-items:center}
/* fitbox carries the SCALED size; scale() alone leaves a 436x939 box that grid start-aligns */
.fitbox{position:relative}

/* ── device ──────────────────────────────────────────────── */

.phone{
  position:absolute;top:0;left:0;
  width:calc(var(--screen-w) + 24px);
  height:calc(var(--screen-h) + 24px);
  padding:3px;                    /* the polished rail */
  border-radius:55px;
  transform:scale(var(--fit));transform-origin:0 0;
  background:linear-gradient(145deg,#6b7280 0%,#2b2f36 22%,#15171b 50%,#2e333b 74%,#767e8c 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 50px 90px -28px rgba(0,0,0,.9),
    0 12px 30px rgba(0,0,0,.55);
}

.phone__body{
  height:100%;
  padding:9px;                    /* black bezel */
  border-radius:52px;
  background:#08090c;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}

/* side keys sit proud of the right rail */
.key{
  position:absolute;right:-2.5px;
  width:3.5px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#5a6069,#2a2e34 40%,#1b1e23);
  box-shadow:0 1px 2px rgba(0,0,0,.6);
}
.key--power{top:196px;height:74px}
.key--volume{top:296px;height:118px}

.screen{
  position:relative;
  height:100%;
  border-radius:43px;
  overflow:hidden;
  background:#05070b;
  color:#fff;
}

.wall{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 16% 4%, rgba(126,102,255,.55), transparent 58%),
    radial-gradient(95% 70% at 92% 20%, rgba(0,176,214,.38), transparent 60%),
    radial-gradient(120% 75% at 72% 104%, rgba(255,132,70,.34), transparent 58%),
    linear-gradient(168deg,#1d1b40 0%,#241a35 44%,#0f1220 100%);
}
.wall::after{                     /* corner falloff, keeps labels legible */
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 50% 45%, transparent 55%, rgba(0,0,0,.45));
}

.punch{
  position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;z-index:6;
  background:radial-gradient(circle at 34% 28%,#24324e 0%,#0a0f18 55%,#04060a 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 0 7px rgba(0,0,0,.85);
}

.glass{                           /* faint sheen across the cover glass */
  position:absolute;inset:0;z-index:7;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(116deg,rgba(255,255,255,.10) 0 16%,rgba(255,255,255,0) 40%);
  mix-blend-mode:screen;opacity:.55;
}

.ui{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column}

/* ── status bar ──────────────────────────────────────────── */

.statusbar{
  flex:0 0 auto;height:32px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  font-size:13px;font-weight:500;letter-spacing:.2px;
}
.statusbar__left,.statusbar__right{display:flex;align-items:center;gap:6px}
.statusbar__time{font-size:13.5px;font-weight:700;margin-right:2px}
.statusbar__pct{font-size:12px;font-weight:500;margin-left:2px}
.sbi{width:14px;height:14px;fill:none}
.sbi--sm{width:12.5px;height:12.5px;opacity:.95}
.sbi--batt{width:17px;height:15px}

/* ── home screen ─────────────────────────────────────────── */

.home{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}

.widget{padding:22px 24px 26px;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.widget__time{font-size:58px;font-weight:300;line-height:1;letter-spacing:-1.5px}
.widget__meta{
  display:flex;align-items:center;gap:6px;
  margin-top:9px;font-size:14px;font-weight:500;color:rgba(255,255,255,.92);
}
.widget__sep{opacity:.6}
.widget__wx{width:17px;height:17px;color:#ffd17a}

.grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  row-gap:22px;padding:0 12px;
}

.app{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0;border:0;background:none;color:inherit;font:inherit;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.app:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:14px}
.app:active .app__ic{transform:scale(.92)}

.app__ic{
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(155deg,var(--c1),var(--c2));
  color:#fff;
  transition:transform .12s ease;
  box-shadow:0 2px 7px rgba(0,0,0,.38),0 0 0 .5px rgba(255,255,255,.14) inset;
}
.app__ic svg{width:31px;height:31px}
.app__ic--light{background:linear-gradient(155deg,#fff,#e8ecf2);color:var(--glyph,#232a34)}

.app__label{
  max-width:78px;
  font-size:11.5px;font-weight:500;letter-spacing:.1px;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.65);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* calendar icon carries the live date instead of a glyph */
.cal{position:relative;overflow:hidden}
.cal__bar{position:absolute;top:0;left:0;right:0;height:13px;background:#2f7cf6}
.cal__day{font-size:21px;font-weight:500;color:#1f2733;transform:translateY(5px)}

/* ── bottom furniture ────────────────────────────────────── */

.bottom{margin-top:auto;padding-bottom:6px}

.dots{display:flex;justify-content:center;gap:6px;margin-bottom:16px}
.dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.38)}
.dots .is-on{background:#fff}

.hotseat{
  display:grid;grid-template-columns:repeat(5,1fr);justify-items:center;
  padding:0 12px;margin-bottom:16px;
}
.app--bare{gap:0}

.searchbar{
  display:flex;align-items:center;gap:12px;
  height:48px;margin:0 16px;padding:0 16px;
  border-radius:24px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 0 0 .5px rgba(255,255,255,.18) inset,0 2px 10px rgba(0,0,0,.2);
}
.searchbar__ic{width:19px;height:19px;color:rgba(255,255,255,.9);flex:0 0 auto}
.searchbar__hint{flex:1;font-size:14px;color:rgba(255,255,255,.72)}

/* ── gesture nav ─────────────────────────────────────────── */

.navbar{flex:0 0 auto;height:28px;display:grid;place-items:center}
.navbar__pill{width:112px;height:4px;border-radius:2px;background:rgba(255,255,255,.9)}

@media (prefers-reduced-motion:reduce){
  .app__ic{transition:none}
}