/* ── YASIN lock screen (uses ../styles.css for tokens, windows, stickers) ── */
.lockscreen {
  position: fixed; inset: 0; z-index: 150; overflow-y: auto; overscroll-behavior: contain;
  background-color: var(--desk);
  background-image:
    radial-gradient(var(--dot) 1px, transparent 1.2px),
    radial-gradient(ellipse 80% 60% at 50% -10%, var(--desk-2), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 115%, var(--desk-deep), transparent 70%);
  background-size: 8px 8px, 100% 100%, 100% 100%;
}
html:not(.locked) .lockscreen { display: none; }
html.locked body { overflow: hidden; }
.lockscreen .stars, .lockscreen .bigword, .lockscreen .crt { position: absolute; }
.lockscreen.opening { animation: lk-open .9s steps(8) forwards; }
@keyframes lk-open { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(50% 0 50% 0); } }
.lk { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 36px 24px 28px; }

.lk-head { text-align: center; margin-bottom: 34px; }
.lk-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font: 12px var(--pixel); text-transform: uppercase;
  background: var(--ink); color: var(--cyan); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--c-pink);
}
.lk-eyebrow i { width: 8px; height: 8px; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; animation: blink 1s steps(2) infinite; }
.lk-title {
  position: relative; margin-top: 16px; font: 400 clamp(64px, 11vw, 150px)/.82 var(--display); color: var(--white);
  text-shadow: 4px 4px 0 var(--c-blue), 8px 8px 0 var(--ink); letter-spacing: .01em;
}
.lk-title em { font-style: normal; color: var(--c-mint); }
.lk-title.glitch { animation: lk-glitch .3s steps(2) 3; }
@keyframes lk-glitch { 33% { transform: translate(-4px, 2px) skewX(-6deg); filter: hue-rotate(90deg); } 66% { transform: translate(4px, -2px) skewX(6deg); } }
.lk-sub { max-width: 46ch; margin: 18px auto 0; font-size: 23px; color: var(--ink); background: rgba(255,255,255,.55); padding: 8px 14px; border: 2px dashed var(--ink); }
[data-theme="midnight"] .lk-sub { color: var(--paper); background: rgba(10,15,61,.6); border-color: var(--cyan); }

.lk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: stretch; }
.lk-win .win-body { display: flex; flex-direction: column; }
.lk-burst { right: -26px; top: -30px; background: var(--c-mint) !important; color: var(--ink) !important; }

/* keypad window */
.lk-top { display: flex; align-items: center; gap: 18px; }
.lk-pfp {
  position: relative; flex: none; width: 92px; aspect-ratio: 1; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--c-pink);
  background: linear-gradient(135deg, var(--c-blue), var(--c-violet)); overflow: hidden;
}
.lk-pfp img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.75); transition: filter .6s; }
.lk-lockicon {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,15,61,.45);
  transition: opacity .5s;
}
.lk-lockicon::before { /* pixel padlock */
  content: ""; width: 4px; height: 4px; color: var(--white);
  box-shadow:
    -8px -20px, -4px -20px, 0 -20px, 4px -20px, -12px -16px, 8px -16px, -12px -12px, 8px -12px, -12px -8px, 8px -8px,
    -16px -4px, -12px -4px, -8px -4px, -4px -4px, 0 -4px, 4px -4px, 8px -4px, 12px -4px,
    -16px 0, -12px 0, -8px 0, -4px 0, 0 0, 4px 0, 8px 0, 12px 0,
    -16px 4px, -12px 4px, -8px 4px, 4px 4px, 8px 4px, 12px 4px,
    -16px 8px, -12px 8px, -8px 8px, 4px 8px, 8px 8px, 12px 8px,
    -16px 12px, -12px 12px, -8px 12px, -4px 12px, 0 12px, 4px 12px, 8px 12px, 12px 12px;
  translate: 2px 4px;
}
.lk-slots { display: flex; gap: 10px; margin-top: 8px; }
.lk-slots .slot {
  position: relative; width: 52px; height: 62px; border: 2px solid var(--ink); background: var(--white);
  box-shadow: inset 3px 3px 0 rgba(10,15,61,.12); display: grid; place-items: center;
  font: 44px/1 var(--display); color: var(--c-blue); transition: transform .12s steps(2), background .15s;
}
.lk-slots .slot.filled { background: var(--c-blue); box-shadow: 3px 3px 0 var(--ink); transform: translateY(-3px); }
.lk-slots .slot.filled::after { content: ""; width: 14px; height: 14px; background: var(--white); box-shadow: 0 0 0 3px var(--c-mint); }
.lk-slots .slot.peek::after { content: attr(data-d); width: auto; height: auto; background: none; box-shadow: none; color: var(--white); font: 44px/1 var(--display); }

.lk-lcd {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 16px; padding: 10px 14px;
  background: var(--ink); color: var(--c-mint); font: 13px var(--pixel); letter-spacing: .06em;
  border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px rgba(109,255,207,.15); text-shadow: 0 0 8px rgba(109,255,207,.6);
}
.lk-led { width: 10px; height: 10px; background: var(--c-mint); box-shadow: 0 0 10px var(--c-mint); }

.lk-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: auto; }
.lk-pad button {
  height: 62px; font: 40px/1 var(--display); color: var(--ink); background: var(--white);
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--k, var(--c-blue)), 4px 4px 0 2px var(--ink);
  transition: transform .06s, box-shadow .06s, background .12s; user-select: none; touch-action: manipulation;
}
.lk-pad button:nth-child(6n+1) { --k: var(--c-pink); } .lk-pad button:nth-child(6n+2) { --k: var(--c-blue); }
.lk-pad button:nth-child(6n+3) { --k: var(--c-orange); } .lk-pad button:nth-child(6n+4) { --k: var(--c-violet); }
.lk-pad button:nth-child(6n+5) { --k: var(--c-teal); } .lk-pad button:nth-child(6n) { --k: var(--c-green); }
.lk-pad button:hover { background: var(--c-mint); }
.lk-pad button:active, .lk-pad button.press { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); background: var(--k, var(--c-blue)); color: var(--white); }
.lk-pad button:focus-visible { outline: 3px solid var(--c-violet); outline-offset: 3px; }
.lk-pad button.fn { font: 13px var(--pixel); background: var(--paper-2); }
.lk-pad.disabled { opacity: .45; pointer-events: none; }

/* note window */
.lk-note h2 { font: 400 clamp(52px, 6.4vw, 80px)/.84 var(--display); margin-top: 8px; color: var(--ink); }
.lk-note h2 em { font-style: normal; color: var(--c-orange); text-shadow: 3px 3px 0 var(--ink); }
.lk-note p { margin-top: 10px; font-size: 22px; max-width: 34ch; }
.lk-note form { display: flex; flex-direction: column; flex: 1; margin-top: 14px; }
.lk-note textarea {
  flex: 1; min-height: 140px; width: 100%; padding: 12px; resize: vertical; font: 23px/1.2 var(--term); color: var(--ink);
  background: var(--white); border: 2px solid var(--ink); box-shadow: inset 3px 3px 0 rgba(10,15,61,.12); outline: none;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(27,60,245,.12) 27px 28px); background-attachment: local;
}
.lk-note textarea:focus { box-shadow: inset 3px 3px 0 rgba(10,15,61,.12), 4px 4px 0 var(--c-orange); }
.lk-note-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.lk-count { margin-right: auto; font: 11px var(--pixel); opacity: .6; }
.lk-note .btn.send { cursor: pointer; font: 13px var(--pixel); padding: 12px 18px; box-shadow: 4px 4px 0 var(--ink); }
.lk-note .btn.send:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.lk-note-status { min-height: 18px; margin-top: 10px !important; font: 11px var(--pixel) !important; text-transform: uppercase; }
.lk-note-status.ok { color: var(--c-teal); } .lk-note-status.err { color: #e0213a; } .lk-note-status.warn { color: var(--c-orange); }
.lk-note.sent { animation: lk-slide .7s steps(6); }
@keyframes lk-slide { 50% { transform: translateY(10px) rotate(-1deg); } }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.lk-foot { display: flex; justify-content: center; gap: 12px; margin-top: 30px; font: 12px var(--pixel); color: var(--ink); opacity: .75; }
[data-theme="midnight"] .lk-foot, [data-theme="bubblegum"] .lk-foot { color: var(--white); }

/* states */
.lockscreen.denied #lk-vault { animation: lk-shake .45s; }
.lockscreen.denied .lk-lcd { color: #ff5b6e; text-shadow: 0 0 8px rgba(255,91,110,.7); }
.lockscreen.denied .lk-led { background: #ff5b6e; box-shadow: 0 0 10px #ff5b6e; }
.lockscreen.denied .lk-slots .slot.filled { background: #e0213a; }
@keyframes lk-shake { 15%, 55% { translate: -10px 0; } 35%, 75% { translate: 10px 0; } }
.lockscreen.granted .lk-pfp img { filter: none; }
.lockscreen.granted .lk-lockicon { opacity: 0; }
.lockscreen.granted .lk-slots .slot.filled { background: var(--c-green); }
.lockscreen.granted .lk-title em { color: var(--c-pink); }
.lk-flash { position: absolute; inset: 0; z-index: 100; pointer-events: none; background: var(--white); opacity: 0; }
.lockscreen.leaving .lk-flash { animation: lk-out .9s steps(6) forwards; }
@keyframes lk-out { 0% { opacity: 0; } 40% { opacity: .9; background: var(--c-mint); } 100% { opacity: 0; background: var(--white); } }
.lockscreen.leaving .lk { animation: lk-zoom .9s steps(6) forwards; }
@keyframes lk-zoom { to { transform: scale(1.25); filter: blur(4px); } }
.lk-conf { position: fixed; z-index: 160; top: -20px; width: 10px; height: 10px; pointer-events: none; animation: lk-fall var(--t, 1.6s) linear forwards; }
@keyframes lk-fall { to { transform: translate(var(--x, 0), 110vh) rotate(720deg); } }

@media (max-width: 820px) {
  .lk-grid { grid-template-columns: 1fr; }
  .lk { padding-top: 26px; }
  .lk-burst { right: -8px; }
}
@media (max-width: 420px) {
  .lk-slots .slot { width: 44px; height: 54px; }
  .lk-pfp { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .lockscreen.denied #lk-vault, .lk-conf, .lockscreen.leaving .lk { animation: none; }
}