#root{position:fixed;inset:0;pointer-events:none}

/*
  Phone size is intentionally capped. The old build scaled a 900px phone again
  from viewport height, which made it nearly full-screen on 1440p/4K displays.
  The shell now stays compact and only the player's small UI-scale setting is
  applied on top.
*/
.phone-wrap{
  position:absolute;
  right:2.1vw;
  bottom:2.2vh;
  height:clamp(600px,62vh,980px);
  aspect-ratio:9/19.5;
  transform:translateY(115%) scale(var(--phone-scale));
  transform-origin:bottom right;
  opacity:0;
  transition:transform var(--slow) cubic-bezier(.2,.75,.2,1),opacity var(--normal) ease;
  pointer-events:auto;
}
.phone-wrap.open{transform:translateY(0) scale(var(--phone-scale));opacity:1}

.phone-frame{
  position:relative;
  width:100%;height:100%;
  padding:5px;
  border-radius:15px;
  background:linear-gradient(90deg,#090b0f,#737982 1.1%,#20242a 2.5%,#111419 96.9%,#666d74 98.4%,#0a0d11);
  box-shadow:0 22px 58px rgba(0,0,0,.48),inset 0 0 0 1px rgba(255,255,255,.17)
}
.phone-frame::before{
  content:"";position:absolute;right:-2px;top:17%;width:3px;height:13%;border-radius:0 2px 2px 0;
  background:#373c43;box-shadow:0 64px 0 #373c43
}
.phone-screen{
  position:relative;width:100%;height:100%;overflow:hidden;border-radius:11px;
  background:#07101d;box-shadow:inset 0 0 0 2px #020406
}
.wallpaper{
  position:absolute;inset:0;background-position:center;background-size:cover;
  transform:scale(1.025);will-change:transform;transition:transform var(--normal) ease
}
.wallpaper::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,6,15,.07),rgba(0,6,15,.18) 46%,rgba(0,3,10,.42));
  pointer-events:none
}
.front-camera{
  position:absolute;top:15px;left:50%;width:11px;height:11px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 55% 45%,#0f3b74 0 12%,#020408 27% 70%,#111 100%);
  box-shadow:0 0 0 2px rgba(0,0,0,.75);z-index:120
}
.statusbar{
  position:absolute;z-index:100;top:0;left:0;right:0;height:41px;padding:11px 18px 0;
  display:flex;justify-content:space-between;align-items:flex-start;
  font-size:11.5px;font-weight:650;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none
}
.status-right{display:flex;gap:6px;align-items:center}
.signal{display:flex;align-items:flex-end;gap:1.8px;height:10px}.signal i{display:block;width:2.2px;background:currentColor;border-radius:2px}.signal i:nth-child(1){height:3px}.signal i:nth-child(2){height:5px}.signal i:nth-child(3){height:7px}.signal i:nth-child(4){height:10px}
.battery{padding:1px 5px;border-radius:5px;background:#f5f5f5;color:#111;font-size:9px;font-weight:800}

.screen-layer{position:absolute;inset:0;padding-top:41px;z-index:10}
.app-screen{
  position:absolute;inset:0;padding-top:41px;
  background:linear-gradient(180deg,rgba(5,12,22,.97),rgba(4,10,18,.995));
  z-index:45;opacity:0;transform:scale(.97);pointer-events:none;
  transition:opacity 170ms ease,transform 210ms cubic-bezier(.2,.7,.2,1)
}
.app-screen.active{opacity:1;transform:scale(1);pointer-events:auto}
.app-header{
  height:48px;padding:0 11px;display:grid;grid-template-columns:38px 1fr 38px;align-items:center;
  border-bottom:1px solid var(--border);background:rgba(5,12,21,.76);backdrop-filter:blur(7px)
}
.app-header h2{margin:0;text-align:center;font-size:13px;font-weight:700}
.icon-btn{border:0;background:transparent;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.07)}.icon-btn svg{width:18px;height:18px}
.app-body{height:calc(100% - 48px);padding:12px;overflow:auto;scrollbar-width:none}.app-body::-webkit-scrollbar{display:none}
.navbar-gesture{position:absolute;z-index:150;bottom:0;left:50%;transform:translateX(-50%);width:92px;height:26px;border-radius:12px;background:transparent;opacity:.95;cursor:pointer}.navbar-gesture::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:3px;border-radius:5px;background:rgba(255,255,255,.78)}

/* Hide home content while the phone is actually locked. Wallpaper stays visible. */
.phone-wrap.is-locked .home-screen{opacity:0;transform:scale(.985);pointer-events:none}

@media (max-height:900px){
  .phone-wrap{right:1.6vw;bottom:1.7vh;height:clamp(540px,72vh,650px)}
}

/* --- CentralRP hardware controls / screen state --- */
.phone-frame::before{display:none}
.phone-screen::after{
  content:"";position:absolute;inset:0;z-index:188;background:#000;
  opacity:var(--screen-dim, .15);pointer-events:none;transition:opacity 120ms ease
}
.hardware-button{
  position:absolute;z-index:210;border:0;padding:0;margin:0;cursor:pointer;
  background:linear-gradient(90deg,#11151a,#596068 45%,#20252b 70%,#0c0f13);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 1px 3px rgba(0,0,0,.65)
}
.hardware-button:active{filter:brightness(1.5)}
.volume-up{left:-3px;top:18%;width:5px;height:8%;border-radius:3px 0 0 3px}
.volume-down{left:-3px;top:27%;width:5px;height:8%;border-radius:3px 0 0 3px}
.power-button{right:-3px;top:24%;width:5px;height:13%;border-radius:0 3px 3px 0}
.hardware-button::after{content:"";position:absolute;inset:-7px -5px;background:transparent}

.screen-off-overlay{
  position:absolute;inset:0;z-index:185;background:#000;opacity:0;pointer-events:none;
  transition:opacity 140ms ease
}
.screen-off-overlay.active{opacity:1;pointer-events:auto}

.volume-hud{position:absolute;z-index:180;left:10px;right:10px;top:48px;opacity:0;transform:translateY(-12px);pointer-events:none;transition:.18s ease}
.volume-hud.active{opacity:1;transform:translateY(0)}
.volume-card{height:36px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(7,15,26,.92);backdrop-filter:blur(8px);display:grid;grid-template-columns:22px 1fr 28px;align-items:center;gap:7px;padding:0 9px;font-size:9px}
.volume-track{height:4px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}.volume-track i{height:100%;display:block;background:var(--cr-blue);border-radius:inherit}
.status-silent{font-size:9px;opacity:.9}

.capture-hidden #phone{visibility:hidden!important}

/* Live scripted camera keeps the hardware shell visible but removes app clutter. */
.phone-wrap.camera-live .wallpaper,
.phone-wrap.camera-live .home-screen,
.phone-wrap.camera-live .app-screen,
.phone-wrap.camera-live .lock-screen,
.phone-wrap.camera-live .statusbar,
.phone-wrap.camera-live .navbar-gesture,
.phone-wrap.camera-live #bannerLayer,
.phone-wrap.camera-live #toastLayer{opacity:0!important;pointer-events:none!important}
.phone-wrap.camera-live .phone-screen{background:transparent!important;box-shadow:inset 0 0 0 2px rgba(2,4,6,.85)}
.phone-wrap.camera-live .phone-screen::after{opacity:0!important}
.phone-wrap.camera-live .quick-shade,
.phone-wrap.camera-live .app-drawer,
.phone-wrap.camera-live .security-modal,
.phone-wrap.camera-live .screen-off-overlay,
.phone-wrap.camera-live .volume-hud,
.phone-wrap.camera-live .edit-toolbar{opacity:0!important;pointer-events:none!important;display:none!important}

.phone-wrap[data-theme="midnight"] .app-screen{background:linear-gradient(180deg,rgba(2,5,9,.985),rgba(0,2,5,.998))}.phone-wrap[data-theme="midnight"] .card,.phone-wrap[data-theme="midnight"] .settings-menu-row{background:rgba(5,8,13,.9)}
.phone-wrap[data-theme="central-blue"] .app-screen{background:linear-gradient(180deg,rgba(7,24,43,.98),rgba(4,13,24,.995))}.phone-wrap[data-theme="central-blue"] .card,.phone-wrap[data-theme="central-blue"] .settings-menu-row{background:rgba(10,31,52,.88)}

/* v1.7.3: only real cellular bars are rendered; no faded placeholders. */
.signal-live-v173{gap:1.8px}
.signal-live-v173 i:nth-child(1){height:3px}
.signal-live-v173 i:nth-child(2){height:5px}
.signal-live-v173 i:nth-child(3){height:7px}
.signal-live-v173 i:nth-child(4){height:10px}
.status-airplane-v173{font-size:10px;line-height:1}
.network-label-v173{font-weight:700}