*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0b0b10;font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;color:#fff;overflow:hidden}
body{display:flex;align-items:center;justify-content:center}
#phone{position:relative;width:390px;height:800px;max-height:96vh;border-radius:54px;background:#000;border:10px solid #1c1c22;box-shadow:0 0 0 2px #444,0 30px 80px #000;overflow:hidden}
#notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:110px;height:30px;background:#000;border-radius:20px;z-index:50}
#status{position:absolute;top:0;left:0;right:0;height:50px;padding:14px 28px 0;display:flex;justify-content:space-between;font-size:15px;font-weight:600;z-index:40;pointer-events:none}
#screen{position:absolute;inset:0}
.app{position:absolute;inset:0;display:none;flex-direction:column;padding-top:50px}
.app.open{display:flex}
#home{background:linear-gradient(160deg,#3a1c71,#d76d77 55%,#ffaf7b);display:flex;flex-direction:column;padding:70px 20px 20px}
#grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 8px;text-align:center;font-size:11px}
.icon{cursor:pointer;position:relative}
.icon .sq{width:62px;height:62px;border-radius:15px;margin:0 auto 5px;display:flex;align-items:center;justify-content:center;font-size:32px}
.badge{position:absolute;top:-6px;right:6px;background:#ff3b30;border-radius:11px;min-width:22px;height:22px;font-size:13px;line-height:22px;font-weight:600;padding:0 5px}
.badge:empty{display:none}
#dock{margin-top:auto;background:#fff3;border-radius:28px;padding:14px;display:flex;justify-content:space-around;backdrop-filter:blur(12px)}
#homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:130px;height:5px;border-radius:3px;background:#fff;z-index:60;cursor:pointer}
.bar{padding:8px 16px;font-weight:600;text-align:center;border-bottom:1px solid #333}
#messages,#doom,#safari{background:#111}
#msglist{flex:1;overflow-y:auto;padding:10px}
.msg{background:#2c2c2e;border-radius:18px;padding:10px 14px;margin:8px 40px 0 0;font-size:15px;animation:pop .25s}
.msg b{display:block;font-size:12px;color:#aaa;margin-bottom:2px}
@keyframes pop{from{transform:scale(.6);opacity:0}}
#banner{position:absolute;top:-90px;left:10px;right:10px;background:#2c2c2eee;border-radius:20px;padding:10px 14px;z-index:70;transition:top .3s;font-size:14px;cursor:pointer}
#banner.show{top:46px}
#banner b{display:block;font-size:12px;color:#aaa}
#feed{flex:1;overflow-y:auto;scroll-snap-type:y mandatory}
.post{height:100%;min-height:640px;scroll-snap-align:start;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.post .who{font-weight:700}
.post .txt{font-size:20px;line-height:1.3}
.post .acts{font-size:14px;color:#ddd}
#timer{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:13px;color:#ffd;text-shadow:0 0 6px #000;z-index:30;pointer-events:none}
#urlbar{margin:8px 12px;background:#2c2c2e;border-radius:12px;padding:9px 12px;font-size:14px;color:#ccc;display:flex;gap:8px}
#urlbar input{flex:1;background:none;border:0;color:#fff;font-size:14px;outline:none}
#page{flex:1;overflow-y:auto;padding:16px;background:#fff;color:#111;font-size:15px}
#page h2{margin-top:0}#page a{color:#0a58ca;cursor:pointer;display:block;margin:10px 0}
#lock{position:absolute;inset:0;z-index:80;background:linear-gradient(180deg,#0f2027,#2c5364);display:flex;flex-direction:column;align-items:center;padding-top:110px;cursor:pointer}
#lock .t{font-size:88px;font-weight:300}#lock .s{margin-top:auto;margin-bottom:40px;opacity:.7}
#tools{position:fixed;top:10px;right:10px;display:flex;gap:8px;z-index:200}
#tools button{background:#222;color:#fff;border:1px solid #444;border-radius:10px;padding:8px 12px;cursor:pointer}
.thrown{animation:throw 1.2s forwards}
@keyframes throw{to{transform:translateY(-130vh) rotate(720deg) scale(.2)}}
@media(max-width:480px){#phone{width:100vw;height:100dvh;max-height:none;border:0;border-radius:0}#notch{display:none}#tools{top:auto;bottom:10px}}
.body{flex:1;overflow-y:auto;position:relative}
#overlay{position:absolute;inset:0;z-index:90;display:none;background:#000a;align-items:center;justify-content:center;padding:24px}
#overlay.on{display:flex}
.card{background:#2c2c2e;border-radius:20px;padding:18px;width:100%;text-align:center;position:relative;animation:pop .2s}
.card h3{margin:0 0 8px}.card p{margin:6px 0 14px;font-size:14px;color:#ddd}
.btn{display:block;width:100%;padding:11px;margin-top:8px;border:0;border-radius:12px;background:#0a84ff;color:#fff;font-size:16px;cursor:pointer}
.btn.red{background:#ff3b30}.btn.green{background:#34c759}.btn.gray{background:#48484a}
.ad{background:linear-gradient(135deg,#ff0080,#ff8c00);color:#fff}
.x{position:absolute;top:4px;right:6px;font-size:13px;opacity:.7;cursor:pointer;padding:4px}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}
.dead{position:absolute;inset:0;z-index:99;background:#000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.dead.on{display:flex}
.row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #2a2a2a}
.red{color:#ff453a}.big{font-size:56px;font-weight:200;text-align:center;margin:16px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.th{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:36px;cursor:pointer}
.cam{background:#000;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.cam .face{font-size:140px;animation:wob 2s infinite alternate}
@keyframes wob{to{transform:rotate(12deg) scale(1.1)}}
.shutter{width:72px;height:72px;border-radius:50%;border:5px solid #fff;background:#fff3;margin-top:30px;cursor:pointer}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}.flash.f{animation:fl .3s}
@keyframes fl{from{opacity:1}to{opacity:0}}
.sw{width:46px;height:28px;border-radius:14px;background:#34c759;position:relative;cursor:pointer}.sw.off{background:#555}
.sw::after{content:"";position:absolute;top:2px;left:20px;width:24px;height:24px;border-radius:50%;background:#fff}.sw.off::after{left:2px}
.prog{height:6px;background:#444;border-radius:3px;margin:14px 20px}.prog i{display:block;height:100%;width:0;background:#1db954;border-radius:3px}
.map{height:240px;background:repeating-linear-gradient(45deg,#1d3b2a,#1d3b2a 20px,#234a33 20px,#234a33 40px);position:relative;overflow:hidden}
.map i{position:absolute;font-size:30px;transition:all 1s}
.swipe{position:absolute;left:0;right:0;z-index:61;touch-action:none}#swipeb{bottom:0;height:34px}#swipet{top:0;height:36px;z-index:55}