/* Phone shell — desktop shows framed phone, mobile goes full screen */
*{box-sizing:border-box;margin:0;padding:0}

body{
  background:#070d18;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  overflow:hidden;
  padding:0;
}

.phone{
  width:440px;
  height:calc(100dvh - 20px);
  max-height:900px;
  background:#0d1b2e;
  border-radius:40px;
  border:2px solid #1a2e4a;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  font-family:'Barlow',sans-serif;
  box-shadow:0 24px 80px rgba(0,0,0,0.6);
}

/* Desktop: scale the whole phone up modestly so labels read comfortably.
   Height is divided by the scale factor so the scaled result still fits the viewport (no window scroll). */
@media(min-width:600px){
  .phone{
    height:calc((100dvh - 20px) / 1.15);
    max-height:calc(880px / 1.15);
    transform:scale(1.15);
    transform-origin:center center;
  }
}
@media(min-width:600px) and (min-height:1050px){
  .phone{
    height:calc((100dvh - 20px) / 1.25);
    max-height:calc(900px / 1.25);
    transform:scale(1.25);
  }
}

/* On real mobile: full screen, no frame, respect notch/home-indicator safe areas */
@media(max-width:599px){
  body{padding:0;align-items:stretch}
  .phone{width:100%;height:100dvh;max-height:none;border-radius:0;border:none;box-shadow:none;transform:none}
  .ph-header{padding-top:calc(14px + env(safe-area-inset-top))}
  .bottom-nav{padding-bottom:env(safe-area-inset-bottom)}
}

/* Scrollable content area between header and bottom nav */
.phone-body{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.phone-body::-webkit-scrollbar{display:none}

/* ── Burger drawer ── */
.burger-btn{
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,0.7);
  font-size:22px;line-height:1;
  padding:6px 8px;
  transition:color 0.15s;
  flex-shrink:0;
}
.burger-btn:hover{color:#c9a227}

.drawer-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.6);
  z-index:50;
  opacity:0;pointer-events:none;
  transition:opacity 0.2s;
}
.drawer-overlay.open{opacity:1;pointer-events:all}

.drawer{
  position:absolute;top:0;right:-220px;
  width:200px;height:100%;
  background:#060f1c;
  border-left:1px solid #1a2e4a;
  z-index:51;
  display:flex;flex-direction:column;
  padding:20px 0 16px;
  transition:right 0.22s cubic-bezier(0.4,0,0.2,1);
}
.drawer.open{right:0}

.drawer-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:rgba(255,255,255,0.3);
  padding:0 16px 12px;
  border-bottom:0.5px solid rgba(255,255,255,0.07);
  margin-bottom:8px;
}

.drawer-link{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  color:rgba(255,255,255,0.7);
  text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:0.5px;
  text-transform:uppercase;
  transition:color 0.15s,background 0.15s;
}
.drawer-link:hover,.drawer-link.active{
  color:#c9a227;
  background:rgba(201,162,39,0.07);
}
.drawer-link i{font-size:18px;width:20px;text-align:center}
.drawer-link.active{border-left:2px solid #c9a227;padding-left:14px}

/* ── Page header ── */
.ph-header{
  background:#091522;
  padding:14px 16px 12px;
  border-bottom:1px solid rgba(201,162,39,0.18);
  flex-shrink:0;
}
.ph-header-row{
  display:flex;align-items:center;justify-content:space-between;
}
.ph-titles{flex:1;text-align:center}
.ph-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:24px;color:#c9a227;letter-spacing:3px;line-height:1;
}
.ph-sub{
  font-size:10px;color:rgba(255,255,255,0.35);
  letter-spacing:1.5px;text-transform:uppercase;margin-top:3px;
}

/* ── Bottom nav ── */
.bottom-nav{
  background:#060f1c;
  border-top:1px solid #1a2e4a;
  display:flex;flex-shrink:0;z-index:10;
}
.nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:10px 4px 12px;
  border:none;background:none;cursor:pointer;
  color:rgba(255,255,255,0.3);transition:color 0.15s;
}
.nav-btn.on{color:#c9a227}
.nav-btn i{font-size:23px}
.nav-btn span{
  font-family:'Barlow Condensed',sans-serif;
  font-size:9px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;
}