/* ============================================================
   iPhone 4 + skeuomorfní iOS – tělo telefonu, zámek, plocha
   Displej 320 × 480 bodů jako na originálu.
   ============================================================ */

:root{
  --screen-w: 320px;
  --screen-h: 480px;
  --bezel-side: 26px;
  --bezel-top: 106px;
  --bezel-bottom: 138px;

  --ios-blue: #1063d8;
  --ios-font: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont,
              "Segoe UI", Roboto, Arial, sans-serif;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body{
  margin:0; padding:0; height:100%;
  background:#e9e9ec;
  background-image: radial-gradient(circle at 50% 30%, #fbfbfd 0%, #dedee3 100%);
  font-family: var(--ios-font);
  overflow:hidden; overscroll-behavior:none;
}

.stage{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }

/* ---------- tělo iPhonu 4 ---------- */
.device{
  position:relative;
  width: calc(var(--screen-w) + 2 * var(--bezel-side));
  height: calc(var(--screen-h) + var(--bezel-top) + var(--bezel-bottom));
  transform-origin:center center;
  user-select:none; -webkit-user-select:none;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.35));
}

/* nerezový rámeček po obvodu */
.device__steel{
  position:absolute; inset:0; border-radius:46px; padding:3px;
  background:
    linear-gradient(160deg, #fdfdfd 0%, #9a9aa0 14%, #5e5e66 34%, #cfcfd6 52%,
                    #6c6c74 70%, #a9a9b1 86%, #ededf2 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.7);
}
.device__body{
  position:relative; width:100%; height:100%;
  border-radius:43px; overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% -10%, #23232a 0%, #0c0c10 45%, #060608 100%);
  box-shadow: inset 0 0 0 1px #000, inset 0 2px 6px rgba(255,255,255,.08);
  display:flex; flex-direction:column; align-items:center;
}

.bezel{ position:relative; width:100%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; }
.bezel--top{ height: var(--bezel-top); }
.bezel--bottom{ height: var(--bezel-bottom); }

.front-camera{
  position:absolute; left:50%; top:44px; margin-left:-62px;
  width:9px; height:9px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #3b4a63 0%, #10131a 60%, #05060a 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), inset 0 0 2px #000;
}
.earpiece{
  position:absolute; left:50%; top:45px; margin-left:-31px;
  width:62px; height:7px; border-radius:4px;
  background: linear-gradient(180deg, #17171c 0%, #0a0a0e 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.07);
}

/* ---------- home tlačítko ---------- */
.home-button{
  width:58px; height:58px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid #303036;
  background: radial-gradient(circle at 50% 35%, #2e2e35 0%, #17171c 55%, #101014 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.10), inset 0 -3px 6px rgba(0,0,0,.85),
              0 1px 0 rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  transition: transform .08s ease, filter .08s ease;
}
.home-button span{
  width:17px; height:17px; border-radius:3px;
  border:1.5px solid rgba(214,214,224,.75);
}
.home-button:active{ transform:scale(.96); filter:brightness(.8); }

/* ---------- boční tlačítka ---------- */
.side-button{
  position:absolute; border:0; padding:0; cursor:default;
  background: linear-gradient(90deg, #b9b9c0, #78787f);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.side-button--power{ top:-3px; right:52px; width:46px; height:4px; border-radius:2px 2px 0 0; cursor:pointer; }
.side-button--silent{ top:150px; left:-3px; width:4px; height:22px; border-radius:2px 0 0 2px; }
.side-button--volume-up{ top:196px; left:-3px; width:4px; height:34px; border-radius:2px 0 0 2px; }
.side-button--volume-down{ top:240px; left:-3px; width:4px; height:34px; border-radius:2px 0 0 2px; }
.side-button--power:active{ filter:brightness(.8); }

/* ---------- displej ---------- */
.screen{
  position:relative; flex:0 0 auto;
  width: var(--screen-w); height: var(--screen-h);
  overflow:hidden; background:#000; color:#fff;
  box-shadow: 0 0 0 1px #000, 0 0 14px rgba(0,0,0,.9);
}
.screen__glare{
  position:absolute; inset:0; z-index:200; pointer-events:none;
  background: linear-gradient(203deg,
      rgba(255,255,255,.17) 0%, rgba(255,255,255,.09) 26%,
      rgba(255,255,255,.02) 38%, rgba(255,255,255,0) 52%);
}
.wallpaper, .wallpaper-dim{ position:absolute; inset:0; width:100%; height:100%; }
.wallpaper-dim{ background:rgba(0,0,0,0); transition:background .35s ease; pointer-events:none; }

/* ---------- stavový řádek ---------- */
.statusbar{
  position:absolute; top:0; left:0; right:0; height:20px; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5px; font-size:12px; font-weight:700; color:#fff;
  text-shadow:0 -1px 0 rgba(0,0,0,.55);
  background: linear-gradient(180deg, #4b4b4b 0%, #202020 55%, #000 100%);
}
.statusbar--transparent{ background:transparent; }
.statusbar--dark{
  color:#fff;
  background: linear-gradient(180deg, #4b4b4b 0%, #202020 55%, #000 100%);
}
.statusbar__left, .statusbar__right{ display:flex; align-items:center; gap:4px; }
.statusbar__left{ flex:1; }
.statusbar__right{ flex:1; justify-content:flex-end; }
.statusbar__center{ flex:0 0 auto; font-size:12px; font-weight:700; }
.carrier{ font-size:11px; font-weight:500; }

/* signál – pět stoupajících sloupečků */
.signal{ display:flex; align-items:flex-end; gap:1.5px; height:9px; }
.signal i{ width:3px; background:#fff; border-radius:.5px; display:block; opacity:1; }
.signal i:nth-child(1){ height:3px; } .signal i:nth-child(2){ height:4.5px; }
.signal i:nth-child(3){ height:6px; } .signal i:nth-child(4){ height:7.5px; }
.signal i:nth-child(5){ height:9px; }
.signal i.off{ opacity:.32; }

.wifi{
  width:12px; height:9px; display:block;
  background:
    radial-gradient(circle at 50% 100%, #fff 0 1.6px, transparent 1.9px),
    radial-gradient(circle at 50% 100%, transparent 0 3.2px, #fff 3.4px 4.4px, transparent 4.6px),
    radial-gradient(circle at 50% 100%, transparent 0 6px, #fff 6.2px 7.2px, transparent 7.4px);
}

.battery-pct{ font-size:11px; font-weight:500; }
.battery{
  position:relative; width:23px; height:10px; border-radius:2px;
  border:1px solid rgba(255,255,255,.9); background:rgba(0,0,0,.25);
}
.battery::after{
  content:""; position:absolute; right:-3px; top:2.5px;
  width:2px; height:4px; border-radius:0 1px 1px 0; background:rgba(255,255,255,.9);
}
.battery__fill{
  position:absolute; left:1px; top:1px; bottom:1px; width:19%;
  border-radius:1px; background: linear-gradient(180deg,#fff,#cfcfcf);
}
.statusbar__lock{ display:inline-block; }
.statusbar__lock svg{ width:8px; height:11px; display:block; fill:currentColor; }

/* ---------- obecné view ---------- */
.view{
  position:absolute; inset:0; z-index:10;
  opacity:0; visibility:hidden;
  transition: opacity .22s ease;
}
.view.is-active{ opacity:1; visibility:visible; }

/* ---------- zamykací obrazovka ---------- */
.view--lock{ display:flex; flex-direction:column; justify-content:space-between; touch-action:none; }

.lock__panel{
  margin-top:20px; padding:10px 0 12px; text-align:center;
  background: linear-gradient(180deg, rgba(20,20,24,.62) 0%, rgba(8,8,10,.52) 100%);
  border-bottom:1px solid rgba(0,0,0,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 rgba(255,255,255,.08);
}
.lock__time{
  font-size:62px; line-height:1; font-weight:400; letter-spacing:-1px;
  text-shadow:0 -1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.12);
}
.lock__date{ margin-top:4px; font-size:15px; font-weight:400; text-shadow:0 -1px 2px rgba(0,0,0,.9); }

.lock__slider{ padding:0 12px 16px; }
.lock__track{
  position:relative; height:44px; border-radius:8px; overflow:hidden;
  background: linear-gradient(180deg, rgba(20,20,22,.78) 0%, rgba(50,50,54,.72) 100%);
  border:1px solid rgba(0,0,0,.8);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.14);
  display:flex; align-items:center;
}
.lock__hint{
  position:absolute; left:58px; right:12px; text-align:center;
  font-size:17px; font-weight:500; color:rgba(255,255,255,.45);
  background: linear-gradient(100deg,
      rgba(255,255,255,.35) 35%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.35) 65%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation: shimmer 2.6s linear infinite;
}
@keyframes shimmer{ 0%{ background-position:160% 0; } 100%{ background-position:-160% 0; } }

.lock__knob{
  position:absolute; left:2px; top:2px; width:62px; height:38px; border-radius:6px;
  background: linear-gradient(180deg, #fdfdfd 0%, #d8d8dc 48%, #b9b9bf 52%, #e6e6ea 100%);
  border:1px solid rgba(0,0,0,.45);
  box-shadow: 0 1px 2px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.9);
  display:flex; align-items:center; justify-content:center;
}
.lock__knob::after{
  content:""; width:0; height:0;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
  border-left:10px solid #7b7b85;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.8));
}
.lock__knob.is-dragging{ transition:none; }
.lock__knob.is-returning{ transition: left .25s cubic-bezier(.2,.8,.3,1); }

/* ---------- zadání kódu ---------- */
.view--passcode{
  background: linear-gradient(180deg, #2b2b2f 0%, #111114 100%);
  display:flex; flex-direction:column; align-items:center; padding-top:26px;
}
.passcode__head{ text-align:center; }
.passcode__title{ font-size:15px; font-weight:500; text-shadow:0 -1px 0 rgba(0,0,0,.8); }
.passcode__dots{ margin-top:12px; display:flex; gap:16px; justify-content:center; }
.passcode__dots span{
  width:11px; height:11px; border-radius:50%;
  background: rgba(0,0,0,.45);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.18);
}
.passcode__dots span.filled{ background: linear-gradient(180deg,#fff,#c9c9cf); }
.passcode__dots.shake{ animation: shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{
  10%,90%{ transform:translateX(-7px);} 20%,80%{ transform:translateX(7px);}
  30%,50%,70%{ transform:translateX(-10px);} 40%,60%{ transform:translateX(10px);}
}

.keypad{
  margin-top:18px; display:grid; grid-template-columns:repeat(3, 88px);
  gap:9px 8px; justify-content:center;
}
.key{
  width:88px; height:48px; border-radius:6px; cursor:pointer; padding:0;
  font-family:inherit; color:#fff;
  border:1px solid rgba(0,0,0,.7);
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 48%,
              rgba(255,255,255,.06) 52%, rgba(255,255,255,.16) 100%), #3a3a40;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 1px rgba(0,0,0,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-shadow:0 -1px 0 rgba(0,0,0,.6);
}
.key b{ font-size:24px; font-weight:500; line-height:1; }
.key i{ font-style:normal; font-size:9px; letter-spacing:1.4px; margin-top:1px; font-weight:600; }
.key:active, .key.is-pressed{ background:#6e6e78; }
.key--empty{ border:0; background:none; box-shadow:none; cursor:default; }
.key--text{ font-size:15px; font-weight:500; }

.passcode__foot{
  margin-top:auto; width:100%; padding:0 10px 12px;
  display:flex; justify-content:space-between; align-items:center;
}
.passcode__action{
  background:none; border:0; color:#fff; font-size:14px; font-weight:500;
  font-family:inherit; cursor:pointer; padding:6px 2px;
  text-shadow:0 -1px 0 rgba(0,0,0,.8);
}
.passcode__action:active{ opacity:.5; }

/* ---------- plocha ---------- */
.view--home{ display:flex; flex-direction:column; padding-top:20px; }
.home__pages{ flex:1; display:flex; overflow:hidden; }
.home-page{
  flex:0 0 100%; padding:14px 8px 0;
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:88px;
  align-content:start;
  transition: transform .3s cubic-bezier(.3,.7,.3,1);
}
.home__dots{ height:18px; display:flex; align-items:center; justify-content:center; gap:7px; }
.home__dots i{
  width:6px; height:6px; border-radius:50%; display:block;
  background:rgba(255,255,255,.30); box-shadow:0 1px 0 rgba(0,0,0,.5);
}
.home__dots i.active{ background:#fff; }

.dock{
  height:88px; padding:10px 6px 0;
  display:flex; justify-content:space-around; align-items:flex-start;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 50%,
                    rgba(255,255,255,.06) 51%, rgba(255,255,255,.16) 100%),
    rgba(120,120,130,.45);
  border-top:1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dock .app__label{ display:none; }

/* ---------- ikona aplikace ---------- */
.app{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
}
.app__icon{
  position:relative; width:57px; height:57px; border-radius:11px; overflow:hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .1s ease, opacity .1s ease;
}
.app__icon::after{  /* skleněný lesk přes horní polovinu */
  content:""; position:absolute; left:-10%; right:-10%; top:-58%; height:104%;
  border-radius:50%; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.18) 70%,
              rgba(255,255,255,0) 100%);
}
.app__icon svg{ width:100%; height:100%; display:block; }
.app:active .app__icon{ transform:scale(.93); opacity:.8; }
.app__label{
  font-size:11px; font-weight:500; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- spuštěná aplikace ---------- */
.view--app{ background:#c5ccd3; }
.app-host{ position:absolute; top:20px; left:0; right:0; bottom:0; overflow:hidden; }

/* ---------- chybové hlášení (skeuomorfní alert) ---------- */
.alert-layer{
  position:absolute; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.alert-layer.is-active{ opacity:1; visibility:visible; }
.alert{
  width:270px; border-radius:11px; overflow:hidden; text-align:center; color:#fff;
  background: linear-gradient(180deg, rgba(58,64,74,.97) 0%, rgba(26,30,36,.97) 100%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 12px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
  transform:scale(1.12); opacity:0; transition:transform .2s ease, opacity .2s ease;
}
.alert-layer.is-active .alert{ transform:scale(1); opacity:1; }
.alert__title{ padding:14px 14px 0; font-size:16px; font-weight:700; text-shadow:0 -1px 0 rgba(0,0,0,.8); }
.alert__text{
  padding:4px 14px 14px; font-size:13px; line-height:1.3; white-space:pre-line;
  text-shadow:0 -1px 0 rgba(0,0,0,.8);
}
.alert__btn{
  width:100%; padding:10px 0; font-size:16px; font-weight:600; font-family:inherit;
  color:#fff; cursor:pointer; text-shadow:0 -1px 0 rgba(0,0,0,.7);
  border:0; border-top:1px solid rgba(255,255,255,.3);
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 50%,
              rgba(255,255,255,.02) 51%, rgba(255,255,255,.14) 100%);
}
.alert__btn:active{ background:rgba(255,255,255,.3); }