/* magnet-lips.com — first-screen variants (V1–V5) */

.tag{font-family:"Silkscreen",monospace; font-size:10px; color:var(--dim); letter-spacing:.5px; text-align:center; margin:0 0 6px}
.mid{text-align:center}
.lede{font-size:23px; margin:0 0 20px}

/* V1 — attract mode */
.game{position:relative; background:#05050A; border:3px solid #23232E; border-radius:16px; overflow:hidden; margin:18px 0 10px}
.game canvas{display:block; width:100%; height:auto; touch-action:none}
.game .over{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; background:rgba(5,5,10,.86); text-align:center; padding:20px}
.game .over[hidden]{display:none}
.score{font-family:"Silkscreen",monospace; font-size:11px; color:var(--dim); display:flex; justify-content:space-between; margin:0 0 10px}
.score b{color:var(--love); font-weight:400}
.coords{font-family:"VT323",monospace; font-size:34px; color:var(--amber); letter-spacing:3px; text-align:center; margin:6px 0}
.coords s{text-decoration:none; background:#2a2a36; color:transparent; border-radius:2px}

/* V2 — high scores */
.board{width:100%; border-collapse:collapse; margin:12px 0 6px; font-size:20px}
.board th{font-family:"Silkscreen",monospace; font-size:9px; color:var(--dim); text-align:left; padding:0 0 10px; font-weight:400}
.board td{padding:9px 0; border-bottom:1px solid #1b1b24; color:#9b9baa}
.board tr.you td{color:var(--love); border-color:#24402b}
.board td:last-child{text-align:right}
.sig{display:flex; gap:10px; margin:14px 0 10px}
.sig input{flex:1; min-width:0; font-family:"Silkscreen",monospace; font-size:18px; text-align:center; letter-spacing:10px;
  text-transform:uppercase; padding:12px; background:#05050A; color:var(--love); border:2px solid #23232E}

/* V3 — the magnet */
.claw{position:relative; background:#05050A; border:3px solid #23232E; border-radius:14px; height:360px; overflow:hidden; margin:16px 0 10px}
.claw .rail{position:absolute; top:14px; left:14px; right:14px; height:4px; background:#2a2a36}
.claw .cable{position:absolute; top:18px; width:3px; background:#2a2a36}
.claw .mag{position:absolute; width:62px; height:40px; margin-left:-31px; cursor:grab}
.claw .prize{position:absolute; width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF1A8,#C9A227); border:2px solid #6b5411}
.claw .prize.env{width:74px; height:48px; border-radius:3px; background:#E8DCC0; border:2px solid #8a7b58;
  display:flex; align-items:center; justify-content:center; font-family:"Silkscreen",monospace; font-size:9px; color:#8a1b12}
.claw .prize.env{position:absolute; padding-right:20px}
.claw .prize.env::after{content:""; position:absolute; right:7px; top:50%; margin-top:-7px; width:14px; height:14px; border-radius:50%; background:var(--grief)}
.claw .floor{position:absolute; left:0; right:0; bottom:0; height:52px; background:#0b0b12; border-top:2px solid #1b1b24}

/* V4 — collector card */
.card{background:#12121a; border:2px solid #2a2a36; padding:16px; margin:14px 0}
.card__h{display:flex; justify-content:space-between; font-family:"Silkscreen",monospace; font-size:10px; color:var(--dim); margin:0 0 12px}
.card__art{position:relative; aspect-ratio:1; background:#05050A; overflow:hidden; border:2px solid #1b1b24}
.card__art img{width:100%; height:100%; object-fit:cover; filter:blur(22px) saturate(.6); transform:scale(1.1)}
.card__art span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Silkscreen",monospace; font-size:40px; color:rgba(255,255,255,.5)}
.card dl{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:14px 0 0; font-size:19px}
.card dt{font-family:"Silkscreen",monospace; font-size:9px; color:var(--dim); align-self:center}
.card dd{margin:0; color:#d6d6e0}
.slots{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:12px 0 8px}
.slots i{aspect-ratio:1; background:#12121a; border:2px solid #23232E; display:flex; align-items:center;
  justify-content:center; font-family:"Silkscreen",monospace; font-size:11px; color:#2f2f3c}
.slots i:first-child{border-color:var(--grief); color:var(--grief)}

/* V5 — the whisper */
.hold{display:block; width:190px; height:190px; margin:26px auto 10px; border-radius:50%; cursor:pointer;
  background:#12121a; border:3px solid #2a2a36; position:relative; touch-action:none}
.hold.on{border-color:var(--grief); box-shadow:0 0 0 14px rgba(192,80,58,.12), 0 0 0 30px rgba(192,80,58,.06)}
.hold .lips{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.wave{display:flex; align-items:center; justify-content:center; gap:4px; height:70px; margin:6px 0 2px}
.wave i{width:6px; height:8px; background:#2a2a36; display:block}
.wave.on i{background:var(--grief)}
.tx{background:#0e0e15; border-left:3px solid #2a2a36; padding:12px 14px; margin:14px 0 8px}
.tx .blur{display:inline-block; height:15px; background:#23232E; border-radius:2px; vertical-align:middle; margin:0 3px}