/* magnet-lips.com — quest pages (arcade shell) */
:root{
  --love:#2EB84B; --grief:#C0503A; --desk:#B5161B;
  --ink:#0B0B0F; --amber:#FFE600; --dim:#7a7a86;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0; min-height:100vh; background:var(--ink); color:#EDEDF2;
  font-family:"VT323",ui-monospace,"Courier New",monospace; font-size:22px; line-height:1.35;
  padding:env(safe-area-inset-top,0px) 0 calc(28px + env(safe-area-inset-bottom,0px));
  -webkit-text-size-adjust:100%;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}
img{max-width:100%; height:auto}
a{color:#fff}

.cab{max-width:620px; margin:0 auto; padding:26px 18px 50px}
.hud{display:flex; justify-content:space-between; gap:10px; font-family:"Silkscreen",monospace; font-size:10px; color:var(--dim); letter-spacing:.5px}
.hud b{color:var(--love); font-weight:400}
.blink{animation:bl 1.1s steps(2,end) infinite}
@keyframes bl{50%{opacity:0}}

h1{font-family:"Silkscreen",monospace; font-size:clamp(19px,5.2vw,27px); line-height:1.5; margin:26px 0 14px; letter-spacing:.5px}
h2{font-family:"Silkscreen",monospace; font-size:12px; margin:30px 0 10px; color:var(--amber); letter-spacing:.5px}
p{margin:0 0 16px}
.dim{color:var(--dim)}
.amber{color:var(--amber)}

/* CRT screen block */
.crt{
  position:relative; background:#05050A; border:3px solid #23232E; border-radius:16px;
  padding:26px 20px; margin:22px 0; overflow:hidden;
  box-shadow:inset 0 0 60px rgba(46,184,75,.14), 0 10px 0 rgba(0,0,0,.5);
}
.crt::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px)}
.crt .scr{position:relative; z-index:1; text-align:center}
.big{font-family:"Silkscreen",monospace; font-size:clamp(17px,5vw,24px); line-height:1.6; color:var(--love)}

/* countdown */
.cd{display:flex; justify-content:center; gap:8px; list-style:none; margin:18px 0 6px; padding:0}
.cd li{background:#000; border:2px solid #23232E; padding:8px 10px; min-width:62px; text-align:center}
.cd b{display:block; font-size:30px; color:var(--amber); line-height:1}
.cd span{font-family:"Silkscreen",monospace; font-size:8px; color:var(--dim)}

/* buttons */
.btn{
  display:inline-block; padding:14px 18px; text-decoration:none; cursor:pointer;
  font-family:"Silkscreen",monospace; font-size:11px; color:#000; background:#C3C7CB;
  border:2px solid; border-color:#fff #000 #000 #fff;
}
.btn:active{border-color:#000 #fff #fff #000; transform:translate(1px,1px)}
.btn--coin{background:var(--amber)}
.btn--sp{background:#1DB954}
.btn--ghost{background:transparent; color:var(--dim); border:2px dashed #2a2a36}
.row{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 18px}

/* coin slot */
.slot{display:flex; align-items:center; gap:16px; justify-content:center; margin:6px 0 2px}
.coin{width:54px; height:54px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFF1A8,#C9A227);
  border:3px solid #6b5411; display:flex; align-items:center; justify-content:center;
  font-family:"Silkscreen",monospace; font-size:9px; color:#4a3a0b; animation:drop 2.6s ease-in-out infinite}
@keyframes drop{0%,70%{transform:translateY(0)}80%{transform:translateY(10px) rotate(8deg)}100%{transform:translateY(0)}}

/* inputs */
.keypad{display:flex; gap:10px; margin:0 0 14px}
.keypad input{
  flex:1; min-width:0; font-family:"VT323",monospace; font-size:30px; text-align:center; letter-spacing:6px;
  padding:10px; background:#05050A; color:var(--love); border:2px solid #23232E;
}
.note{font-size:18px; color:var(--dim); margin:0 0 8px}
.err{color:var(--grief)}
.ok{color:var(--love)}

/* progress hearts */
.heart{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:14px 0 4px}
.heart i{width:16px; height:16px; background:#1b1b24; border:2px solid #2a2a36; display:block}
.heart i.on{background:var(--grief); border-color:var(--grief)}

footer{max-width:620px; margin:0 auto; padding:0 18px 40px; color:var(--dim); font-size:17px}
footer a{color:var(--dim)}
.back{font-family:"Silkscreen",monospace; font-size:10px; color:var(--dim); text-decoration:none}