/* ===========================================================================
   cuan — iOS device emulator shell
   =========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  color: #1c1a17;
  font-family: 'IBM Plex Mono', monospace;
  background:
    radial-gradient(130% 90% at 50% -10%, #f1ead9 0%, #e7ddcc 42%, #d7ccb6 100%),
    #e6ddcd;
}

::selection { background: #2c4a3b; color: #f4efe6; }

/* ---- stage ---------------------------------------------------------------- */

.stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  padding: 34px 20px 30px;
}

.stage-head { text-align: center; }
.brand { font: 500 30px/1 'Newsreader', serif; letter-spacing: -0.01em; }
.tagline {
  margin: 9px auto 0;
  max-width: 360px;
  font: 500 10px/1.6 'IBM Plex Mono', monospace;
  letter-spacing: 0.16em;
  color: #8a7f6c;
}

/* ---- device sizing / scaling --------------------------------------------- */

.device-scaler {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.device {
  position: relative;
  width: 418px;
  padding: 14px;
  border-radius: 60px;
  transform-origin: top center; /* JS sets transform: scale(n); center keeps it aligned in the scaler */
  background:
    linear-gradient(145deg, #4a453f 0%, #26221e 26%, #2f2a25 52%, #1e1a17 74%, #423c36 100%);
  box-shadow:
    0 2px 3px rgba(255, 255, 255, 0.18) inset,
    0 -2px 4px rgba(0, 0, 0, 0.5) inset,
    0 54px 90px -34px rgba(28, 22, 8, 0.55),
    0 20px 44px -22px rgba(28, 22, 8, 0.42);
}

/* titanium side buttons */
.side-btn {
  position: absolute;
  border-radius: 3px;
  background: linear-gradient(180deg, #423c36, #211d1a);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.side-btn.action  { left: -3px; top: 132px; width: 4px; height: 34px; }
.side-btn.vol-up  { left: -3px; top: 188px; width: 4px; height: 58px; }
.side-btn.vol-down{ left: -3px; top: 258px; width: 4px; height: 58px; }
.side-btn.power   { right: -3px; top: 210px; width: 4px; height: 96px; }

/* ---- screen --------------------------------------------------------------- */

.device-shell { position: relative; }

.screen {
  position: relative;
  width: 390px;
  height: 844px;
  border-radius: 46px;
  overflow: hidden;
  background: #f4efe6;
  box-shadow: 0 0 0 3px #0c0b0a;   /* thin black bezel between glass and titanium */
}

#screen-app { position: absolute; inset: 0; }
#cuan-root  { position: absolute; inset: 0; }

/* faint glass reflection — never intercepts taps */
.screen-gloss {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border-radius: 46px;
  background:
    linear-gradient(133deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(300deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 30%);
}

/* ---- keyboard focus (runtime marks click controls role=button tabindex=0) - */

#screen-app [data-ev-click]:focus { outline: none; }
#screen-app [data-ev-click]:focus-visible {
  outline: 2px solid #2c4a3b;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- app internals (from the imported design's base <style>) -------------- */

#cuan-scroll::-webkit-scrollbar { width: 0; height: 0; }
#cuan-scroll { scrollbar-width: none; }

@keyframes tedblink {
  0%, 80%, 100% { opacity: 0.28; }
  40% { opacity: 1; }
}

/* ---- responsive chrome ---------------------------------------------------- */

@media (max-width: 520px) {
  .stage { gap: 16px; padding: 20px 12px 20px; }
  .brand { font-size: 26px; }
  .tagline { font-size: 9px; letter-spacing: 0.14em; }
}