/* smishcreants.com homepage: Lock Screen Simulator 2003 */
.home-main{max-width:1180px;margin:0 auto;padding:12px 10px 0}
.home-hero{text-align:center;padding:14px 6px 8px}
.home-hero h1{margin:0;font-family:Impact,"Arial Black",var(--font-sys);font-size:clamp(28px,8vw,64px);letter-spacing:1px;line-height:1}
.home-hero h1 .rainbow{background-size:200% 100%;animation:rainbowslide 3s linear infinite;filter:drop-shadow(3px 3px 0 var(--navy)) drop-shadow(0 0 8px rgba(255,0,204,.6))}
@keyframes rainbowslide{to{background-position:200% 0}}
.home-hero .zone{display:block;margin-top:8px;font-size:clamp(16px,4.6vw,26px);color:var(--yel);text-shadow:2px 2px 0 var(--hot)}
.home-hero .tagline{margin:10px auto 0;max-width:620px;color:#ddd;font-size:15px}
.home-hero .tagline b{color:var(--lime)}

.home-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:16px;align-items:start}
@media (min-width:980px){.home-grid{grid-template-columns:280px minmax(360px,1fr) 280px}}
.side{display:grid;gap:16px}
@media (max-width:979px){.side-left{order:2}.phone-col{order:1}.side-right{order:3}}
.side .win-body{font-size:14px;line-height:1.45}
.side .win-body p{margin:0 0 8px}
.side ul{margin:0;padding-left:20px}
.side li{margin-bottom:5px}
.win-title .x{padding:0 6px;line-height:1.1}

/* ---------- the phone ---------- */
.phone-col{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;max-width:100%;overflow-x:clip}
.phone-wrap{position:relative;padding:18px 0 4px}
.phone{
  --lcd:#b6d867; --lcd-dark:#93b54b; --pix:#1c2a0e;
  position:relative;width:min(340px,92vw);
  padding:22px 20px 26px;border-radius:70px 70px 90px 90px/60px 60px 120px 120px;
  background:
    radial-gradient(120% 60% at 30% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 45%),
    linear-gradient(160deg,#6b78ff 0%,#3a2fbf 40%,#22146e 100%);
  box-shadow:inset 0 -10px 20px rgba(0,0,0,.45),inset 0 4px 10px rgba(255,255,255,.4),0 18px 40px rgba(255,0,204,.35),0 0 0 3px #110a3a;
  transform-origin:50% 80%;user-select:none;-webkit-user-select:none;
}
.phone[data-backlight="blue"]{--lcd:#8fd3ff;--lcd-dark:#5fa9d9;--pix:#06223a}
.phone[data-backlight="pink"]{--lcd:#ffb3e6;--lcd-dark:#e07bc0;--pix:#3a0628}
.phone.buzz{animation:buzz .55s linear}
@keyframes buzz{
  0%,100%{transform:translate(0,0) rotate(0)}
  10%{transform:translate(-4px,1px) rotate(-2deg)}20%{transform:translate(4px,-1px) rotate(2deg)}
  30%{transform:translate(-4px,0) rotate(-1.5deg)}40%{transform:translate(4px,1px) rotate(1.5deg)}
  50%{transform:translate(-3px,-1px) rotate(-1deg)}60%{transform:translate(3px,0) rotate(1deg)}
  70%{transform:translate(-2px,1px) rotate(-.5deg)}80%{transform:translate(2px,0) rotate(.5deg)}
}
.buzzlines{position:absolute;inset:0;pointer-events:none;opacity:0}
.phone-wrap.buzzing .buzzlines{animation:buzzlines .55s steps(4) }
@keyframes buzzlines{0%,100%{opacity:0}25%,75%{opacity:1}50%{opacity:.3}}
.buzzlines span{position:absolute;font:bold 22px var(--font-fun);color:var(--yel);text-shadow:2px 2px 0 var(--hot)}
.buzzlines span:nth-child(1){left:-14px;top:30%;transform:rotate(-20deg)}
.buzzlines span:nth-child(2){right:-14px;top:24%;transform:rotate(18deg)}
.buzzlines span:nth-child(3){left:-6px;top:56%;transform:rotate(-8deg)}
.buzzlines span:nth-child(4){right:-6px;top:50%;transform:rotate(10deg)}
.antenna{position:absolute;right:46px;top:-16px;width:18px;height:30px;border-radius:9px 9px 4px 4px;background:linear-gradient(90deg,#2a1d8a,#5a4ff0,#2a1d8a);box-shadow:inset 0 3px 3px rgba(255,255,255,.4)}
.antenna::after{content:"";position:absolute;left:5px;top:6px;width:8px;height:8px;border-radius:50%;background:#f33;box-shadow:0 0 6px #f33}
.phone.buzz .antenna::after,.phone.ringing .antenna::after{animation:ledblink .15s steps(2) infinite}
@keyframes ledblink{50%{background:#ff0;box-shadow:0 0 12px #ff0}}
.earpiece{width:70px;height:8px;margin:0 auto 8px;border-radius:6px;background:repeating-linear-gradient(90deg,#0b0630 0 4px,#30269a 4px 7px);box-shadow:inset 0 2px 2px #000}
.brand{text-align:center;font:italic 900 15px/1 "Arial Black",Impact,var(--font-sys);letter-spacing:3px;color:#e9e6ff;text-shadow:0 1px 0 #000,0 0 6px #a9a0ff;margin-bottom:8px}
.brand small{font-size:9px;letter-spacing:1px;color:var(--yel);font-style:normal}

/* LCD */
.bezel{padding:10px;border-radius:16px 16px 26px 26px;background:linear-gradient(#141018,#2a2533);box-shadow:inset 0 2px 6px #000,0 1px 0 rgba(255,255,255,.35)}
.lcd{
  position:relative;height:300px;overflow:hidden;border-radius:6px;
  background:var(--lcd);color:var(--pix);
  font:bold 13px/1.25 "Courier New",Courier,monospace;
  box-shadow:inset 0 0 18px rgba(0,0,0,.35);
  transition:background .4s;
}
.lcd::after{ /* pixel grid + glare */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
    linear-gradient(130deg,rgba(255,255,255,.28),rgba(255,255,255,0) 35%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);
}
.lcd.off{background:#2b3324}
.lcd.off > *{visibility:hidden}
.lcd-status{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 2px;font-size:11px;border-bottom:2px solid var(--pix)}
.bars{display:inline-flex;align-items:flex-end;gap:1px;height:10px;margin-right:4px;vertical-align:-1px}
.bars i{display:block;width:3px;background:var(--pix)}
.bars i:nth-child(1){height:3px}.bars i:nth-child(2){height:5px}.bars i:nth-child(3){height:7px}.bars i:nth-child(4){height:10px}
.batt{display:inline-block;width:20px;height:9px;border:2px solid var(--pix);position:relative;vertical-align:-1px;padding:1px}
.batt::after{content:"";position:absolute;right:-5px;top:1px;width:2px;height:3px;background:var(--pix)}
.batt b{display:block;height:100%;width:70%;background:var(--pix)}
.lcd-head{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;background:var(--pix);color:var(--lcd);font-size:12px}
.lcd-head.flash{animation:headflash .3s step-end 4}
@keyframes headflash{0%{background:var(--pix);color:var(--lcd)}50%{background:var(--lcd);color:var(--pix)}100%{background:var(--pix);color:var(--lcd)}}
.inbox{list-style:none;margin:0;padding:4px 4px 4px;height:calc(100% - 68px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--pix) transparent}
.inbox::-webkit-scrollbar{width:6px}
.inbox::-webkit-scrollbar-thumb{background:var(--pix)}
.sms{position:relative;padding:5px 6px 6px;margin-bottom:5px;border:2px solid var(--pix);border-radius:2px 10px 10px 10px;background:rgba(255,255,255,.12);cursor:pointer}
.sms.sel{background:var(--pix);color:var(--lcd)}
.sms.sel .sms-link{color:var(--lcd);background:rgba(255,255,255,.12)}
.sms.new{animation:smsin .45s steps(6)}
@keyframes smsin{from{transform:translateX(-110%)}to{transform:none}}
.sms.boom{animation:smsboom .5s steps(5) forwards}
@keyframes smsboom{
  0%{transform:none;filter:none}
  40%{transform:scale(1.08) rotate(-2deg);filter:contrast(3)}
  100%{transform:scale(.2) rotate(25deg);opacity:0}
}
.sms.gone{animation:smsgone .3s steps(3) forwards}
@keyframes smsgone{to{transform:translateX(120%);opacity:0}}
.sms-from{display:flex;justify-content:space-between;gap:6px;font-size:11px;border-bottom:1px dashed currentColor;padding-bottom:2px;margin-bottom:3px}
.sms-from .unread{animation:blink 1s steps(2,start) infinite}
.sms-text{word-wrap:break-word;overflow-wrap:anywhere}
.sms-link{color:var(--pix);text-decoration:underline;text-underline-offset:2px;font-weight:bold;padding:0 1px}
.sms-link:visited{color:inherit}
.empty{padding:30px 10px;text-align:center;font-size:13px}
.empty .big{font-size:30px;display:block;margin-bottom:6px}
.lcd-soft{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:3px 7px;border-top:2px solid var(--pix);background:var(--lcd);font-size:12px;z-index:3}
.lcd-toast{position:absolute;left:8px;right:8px;bottom:28px;z-index:4;padding:6px 8px;background:var(--pix);color:var(--lcd);border:2px solid var(--lcd);outline:2px solid var(--pix);font-size:12px;text-align:center;display:none}
.lcd-toast.show{display:block;animation:toastpop .2s steps(3)}
@keyframes toastpop{from{transform:scale(.6)}}
.lcd-confirm{position:absolute;inset:40px 14px 34px;z-index:4;display:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center;background:var(--lcd);border:3px double var(--pix);padding:10px}
.lcd-confirm.show{display:flex}
.lcd-confirm .ico{font-size:28px}
.lcd-confirm .row{display:flex;gap:8px}
.lcd-confirm button{font:bold 12px "Courier New",monospace;background:var(--pix);color:var(--lcd);border:0;padding:6px 10px;cursor:pointer}

/* boot */
.boot{position:absolute;inset:0;z-index:6;background:var(--lcd);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:10px}
.boot.show{display:flex}
.boot .logo{font:italic 900 26px "Arial Black",Impact,sans-serif;letter-spacing:2px;animation:bootlogo 1s steps(8)}
@keyframes bootlogo{from{letter-spacing:22px;opacity:0}}
.boot .hands{width:150px;height:60px}
.boot .hands .l{animation:handl .5s steps(3) infinite alternate}
.boot .hands .r{animation:handr .5s steps(3) infinite alternate}
@keyframes handl{to{transform:translateX(10px)}}
@keyframes handr{to{transform:translateX(-10px)}}
.boot .prog{width:80%;height:12px;border:2px solid var(--pix);padding:1px}
.boot .prog b{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--pix) 0 6px,transparent 6px 8px);transition:width .25s steps(4)}

/* keypad */
.controls{margin-top:14px;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px;align-items:center}
.key{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  font:bold 16px/1 var(--font-sys);color:#14114a;cursor:pointer;
  border:0;border-radius:40% 40% 46% 46%/50% 50% 60% 60%;
  background:linear-gradient(#ffffff,#cfd3ff 60%,#9aa0e8);
  box-shadow:0 4px 0 #2b2380,0 6px 8px rgba(0,0,0,.45),inset 0 2px 1px #fff;
  padding:8px 4px 7px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:transform .05s,box-shadow .05s;
}
.key small{font-size:9px;letter-spacing:1px;color:#5a54b8;font-weight:bold}
.key:active,.key.pressed{transform:translateY(3px);box-shadow:0 1px 0 #2b2380,0 2px 3px rgba(0,0,0,.4),inset 0 2px 1px #fff}
.key:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.soft{border-radius:12px 30px 12px 30px;font-size:12px;min-height:40px}
.soft.r{border-radius:30px 12px 30px 12px}
.dpad{display:grid;grid-template-columns:1fr 1.2fr 1fr;grid-template-rows:auto auto auto;gap:3px;justify-items:center;align-items:center}
.dpad .key{width:100%;min-height:34px;padding:4px;font-size:13px}
.dpad .up{grid-column:2;grid-row:1;border-radius:50% 50% 20% 20%}
.dpad .ok{grid-column:2;grid-row:2;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#ffe36b 50%,#d9a400);box-shadow:0 4px 0 #8a5d00,0 6px 8px rgba(0,0,0,.45);min-height:40px}
.dpad .down{grid-column:2;grid-row:3;border-radius:20% 20% 50% 50%}
.callrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.call{background:linear-gradient(#9dff8a,#2fcf3a 60%,#178a22);box-shadow:0 4px 0 #0a4d12,0 6px 8px rgba(0,0,0,.45),inset 0 2px 1px #fff;color:#032b08}
.end{background:linear-gradient(#ff9a9a,#ff3030 60%,#a80000);box-shadow:0 4px 0 #5a0000,0 6px 8px rgba(0,0,0,.45),inset 0 2px 1px #fff;color:#3a0000}
.call small{color:#064d10}.end small{color:#5a0000}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 12px;margin-top:14px}
.numpad .key{font-size:19px}
.numpad .k7{background:linear-gradient(#fff3a0,#ffd400 60%,#e09a00);box-shadow:0 4px 0 #7a4b00,0 6px 8px rgba(0,0,0,.45),inset 0 2px 1px #fff}
.mic{width:8px;height:8px;margin:16px auto 0;border-radius:50%;background:#0b0630;box-shadow:inset 0 1px 2px #000,0 1px 0 rgba(255,255,255,.3)}
.dialed{text-align:center;font:bold 11px var(--font-sys);color:#d7d2ff;margin-top:8px;min-height:14px;letter-spacing:3px}

/* big buttons under the phone */
.bigbtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:min(420px,96vw)}
.bigbtn{flex:1 1 170px;font:bold 18px var(--font-sys);padding:14px 10px;cursor:pointer;border:4px outset;min-height:56px}
.bigbtn.sound{background:var(--cyan);border-color:var(--cyan);color:#000}
.bigbtn.sound[aria-pressed="true"]{background:var(--lime);border-color:var(--lime)}
.bigbtn.report{background:var(--hot);border-color:var(--hot);color:#fff;text-shadow:1px 1px 0 #000;animation:reportpulse 1.4s ease-in-out infinite}
@keyframes reportpulse{50%{box-shadow:0 0 18px 4px rgba(255,0,204,.8)}}
.bigbtn:active{border-style:inset}
.bigbtn:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.hint{font-size:14px;color:#ccc;text-align:center;max-width:420px;margin:0}
.hint b{color:var(--yel)}

/* yeet counter */
.yeet-num{font:bold 44px/1 Impact,"Arial Black",sans-serif;text-align:center;color:var(--hot);text-shadow:2px 2px 0 #000;margin:4px 0}
.yeet-num.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.5) rotate(-6deg);color:var(--lime)}}
.yeet-rank{text-align:center;font-weight:bold;color:var(--navy)}
.lcd-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#0a0;margin-right:4px;animation:blink 1s steps(2,start) infinite}

/* dialog */
.modal-bg{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;background:rgba(0,0,128,.35);padding:12px}
.modal-bg.show{display:flex}
.dialog{width:min(380px,96vw);animation:dlgin .25s steps(4)}
@keyframes dlgin{from{transform:scale(.3) rotate(-8deg)}}
.dialog .win-body{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.4}
.dialog .dlg-ico{font-size:42px;line-height:1;animation:boomico .6s steps(3) infinite alternate}
@keyframes boomico{to{transform:scale(1.2) rotate(10deg)}}
.dialog h2{margin:0 0 6px;font:900 20px Impact,"Arial Black",sans-serif;letter-spacing:1px;color:#b00000}
.dialog p{margin:0 0 6px}
.dialog .tip{font-size:12px;background:#ffffe1;border:1px solid #000;padding:5px}
.dialog .btns{display:flex;justify-content:center;gap:8px;padding:0 10px 12px}
.dialog .btn98{min-width:90px;padding:5px 12px;font-size:14px}

/* confetti */
.confetti{position:fixed;top:-20px;z-index:9500;pointer-events:none;width:9px;height:14px;animation:fall var(--t,2s) cubic-bezier(.25,.6,.6,1) forwards}
.confetti.emoji{width:auto;height:auto;font-size:22px;background:none!important}
@keyframes fall{to{transform:translate(var(--dx,0),105vh) rotate(var(--rot,720deg))}}

/* lower page */
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:26px auto 10px;max-width:760px}
.badge88{box-shadow:2px 2px 0 #000}
.b-free{background:linear-gradient(var(--lime),#0a0);color:#000}
.b-7726{background:#000;color:var(--hot);border-color:var(--hot)!important}
.b-7726 b{font-size:15px;color:var(--yel)}
.b-note{background:#fff;color:#000;font-family:"Courier New",monospace!important}
.b-scape{background:linear-gradient(#001a66,#000);color:#fff}
.b-y2k{background:repeating-linear-gradient(45deg,#ff0 0 6px,#000 6px 12px);color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000}
.b-y2k span{background:#000;padding:0 2px}
.b-hamster{background:#f4d8b0;color:#6b3a00}
.b-web{background:var(--hot);color:#fff}
.b-poop{background:#5b3a1a;color:#ffde9e}
.badge88 .big{display:block;font-size:13px;line-height:1.1}

.portals{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px auto;max-width:820px}
.portal{display:block;text-decoration:none;color:#000;border:4px ridge var(--yel);padding:16px;text-align:center;font-family:var(--font-sys);font-weight:bold;transition:transform .15s}
.portal:visited{color:#000}
.portal:hover,.portal:focus-visible{transform:rotate(-2deg) scale(1.04)}
.portal .ico{font-size:46px;display:block;animation:spinny 3s linear infinite}
@keyframes spinny{to{transform:rotateY(360deg)}}
.portal .t{font-size:22px;display:block;margin:6px 0}
.portal.museum{background:linear-gradient(135deg,var(--cyan),#fff,var(--cyan))}
.portal.fan{background:linear-gradient(135deg,var(--hot),#ffc6f2,var(--hot))}
.construction{max-width:820px;margin:16px auto;padding:10px;text-align:center;background:repeating-linear-gradient(45deg,var(--yel) 0 18px,#000 18px 36px);border:2px solid #000}
.construction span{display:inline-block;background:#000;color:var(--yel);font:bold 14px var(--font-sys);padding:6px 10px}
.webring{text-align:center;font-family:var(--font-sys);margin:18px auto;padding:8px;max-width:520px;border:3px double var(--cyan);background:#001}
.webring a{font-weight:bold}
.webring b{color:var(--yel)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .phone.buzz,.sms.new,.sms.boom,.sms.gone,.boot .logo,.boot .hands *,.bigbtn.report,.portal .ico,.home-hero h1 .rainbow,.dialog,.dialog .dlg-ico,
  .lcd-head.flash,.sms-from .unread,.lcd-dot,.antenna::after,.lcd-toast.show,.buzzlines,.yeet-num.bump{animation:none!important}
}