/* lapdog — v2 game stylesheet.
   Standalone on purpose: the game page doesn't load styles.css, so the font
   face is declared again here (same single 7KB woff2, same latin subset). */
@font-face{
  font-family:'VT323';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../media/font/vt323.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}

:root{
  --void:#0A1128;      /* the room after dark — the night rider re-theme */
  --scan:#FF2222;      /* the scanner red */
  --ink:#10222e;
  --cream:#FFF6D8;
  --yellow:#F5EE7A;
  --px:'VT323','Courier New',monospace;
}

html,body.lapdog{
  width:100%;height:100%;
  overflow:hidden;
  background:var(--void);
  font-family:var(--px);
  color:var(--cream);
  letter-spacing:.06em;
  user-select:none;
  -webkit-user-select:none;
}

#ld-canvas{
  position:fixed;inset:0;
  width:100%;height:100%;
  display:block;
  image-rendering:pixelated;   /* the upscale stays chunky even if the browser blits it */
  cursor:crosshair;
}

#ld-home{
  position:fixed;top:14px;left:50%;z-index:6;
  transform:translateX(-50%);
  color:var(--cream);background:rgba(10,17,40,.76);
  border:1px solid rgba(255,246,216,.52);
  padding:5px 11px 6px;
  font-size:17px;line-height:1;text-decoration:none;
  letter-spacing:.08em;
  text-shadow:1px 1px 0 rgba(4,8,20,.7);
}
#ld-home:hover,#ld-home:focus-visible{
  color:var(--yellow);border-color:var(--yellow);outline:none;
}

#ld-save{
  position:fixed;top:14px;right:18px;z-index:6;
  color:rgba(255,246,216,.78);background:rgba(10,17,40,.66);
  border:1px solid rgba(255,246,216,.28);
  padding:4px 8px 5px;
  font-size:14px;line-height:1;letter-spacing:.06em;
  text-shadow:1px 1px 0 rgba(4,8,20,.7);
  pointer-events:none;
}
#ld-save[data-mode="cloud"]{color:#9ee7b0;border-color:rgba(158,231,176,.5)}
#ld-save[data-mode="saving"]{color:var(--yellow)}

/* ---------- HUD overlay ---------- */
#ld-hud{position:fixed;inset:0;pointer-events:none;z-index:2}

#ld-title{
  position:absolute;top:14px;left:18px;
  font-size:26px;
  color:var(--cream);
  text-shadow:2px 2px 0 rgba(16,34,46,.55),0 0 14px rgba(255,34,34,.55);
}

#ld-hover{
  position:absolute;top:44px;left:18px;
  font-size:20px;
  color:var(--yellow);
  text-shadow:2px 2px 0 rgba(16,34,46,.55);
  min-height:22px;
}

#ld-help{
  position:absolute;bottom:14px;left:18px;
  font-size:17px;
  opacity:.85;
  text-shadow:2px 2px 0 rgba(16,34,46,.45);
}

/* center dot while walking */
#ld-cursor{
  position:absolute;left:50%;top:50%;
  width:6px;height:6px;margin:-3px 0 0 -3px;
  background:var(--cream);
  box-shadow:0 0 0 1px rgba(16,34,46,.6);
  opacity:0;
  transition:opacity .15s;
}
body.ld-locked #ld-cursor{opacity:.9}
body.ld-locked #ld-canvas{cursor:none}

/* ---------- inventory strip (the frames' pedestal bar) ---------- */
#ld-strip{
  position:absolute;left:50%;bottom:22px;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
#ld-icons{
  font-size:15px;
  color:var(--cream);
  background:rgba(16,34,46,.72);
  border:1px solid rgba(255,246,216,.5);
  padding:1px 8px 2px;
  letter-spacing:.18em;
}
#ld-slots{display:flex;gap:8px}
.ld-slot{
  width:52px;height:52px;
  background:rgba(16,34,46,.55);
  border:1px solid rgba(255,246,216,.45);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ld-slot img{
  width:44px;height:44px;
  object-fit:cover;
  image-rendering:pixelated;
}
.ld-slot.ld-pulse{animation:ld-pulse .45s steps(3) 2}
@keyframes ld-pulse{
  0%{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow)}
  100%{border-color:rgba(255,246,216,.45);box-shadow:none}
}

#ld-cartline{
  font-size:16px;
  color:var(--yellow);
  text-shadow:1px 1px 0 rgba(16,34,46,.6);
  min-height:18px;
}

/* ---------- shop sheets ---------- */
#ld-panels{
  position:fixed;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;
  background:rgba(16,34,46,.45);
}
.ld-sheet{
  display:flex;gap:22px;
  background:#f4f2ee;color:#3a3a36;
  border:2px solid #d8d4cc;
  padding:22px;
  max-width:min(92vw,640px);
  max-height:88vh;overflow:auto;
  text-align:left;
}
.ld-sheet-img img{
  width:min(38vw,240px);
  image-rendering:pixelated;
  border:1px solid #d8d4cc;
}
.ld-sheet-body{display:flex;flex-direction:column;gap:10px;min-width:220px}
.ld-sheet-name{font-size:26px}
.ld-sheet-price{font-size:22px;color:#a33}
.ld-sheet-spec{font-size:16px;opacity:.75}
.ld-sheet-sizes{display:flex;gap:8px;flex-wrap:wrap}
.ld-size{
  font:inherit;font-size:18px;
  border:1px solid #3a3a36;background:none;color:#3a3a36;
  padding:4px 12px;cursor:pointer;
}
.ld-size.on{background:#3a3a36;color:#f4f2ee}
.ld-icons-row{font-size:15px;letter-spacing:.18em;opacity:.6}
.ld-btn{
  font:inherit;font-size:20px;letter-spacing:.06em;
  background:#1e4e7c;color:#fff6d8;
  border:0;padding:10px 16px;cursor:pointer;
}
.ld-btn:hover{background:#23b0e8}
.ld-ghost{background:none;color:#3a3a36;border:1px solid #3a3a36}
.ld-ghost:hover{background:#e4e0d6}
.ld-cart{flex-direction:column;min-width:min(88vw,460px)}
.ld-row{display:flex;justify-content:space-between;gap:18px;font-size:18px;padding:4px 0;border-bottom:1px dashed #d8d4cc}
.ld-row.ld-total{font-size:22px;border-bottom:0;margin-top:6px}
.ld-row.ld-dim{opacity:.6;border-bottom:0}
.ld-x{
  font:inherit;border:1px solid #a33;color:#a33;background:none;
  padding:0 7px;margin-left:8px;cursor:pointer;
}

/* the neon moment: DO NOT REFRESH THE PAGE - neon on the night */
.ld-wait{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:#0A1128;
}
.ld-neon{
  font-size:clamp(44px,8vw,84px);
  line-height:1.15;text-align:center;
  text-transform:uppercase;
  color:var(--yellow);
  text-shadow:0 0 8px var(--yellow),0 0 22px var(--yellow),0 0 46px rgba(245,238,122,.7);
  animation:ld-hum 2.2s ease-in-out infinite;
}
.ld-neon span{display:block;font-size:.38em;line-height:1.2}
@keyframes ld-hum{50%{opacity:.82}}

/* teleport flash */
#ld-flash{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background:#dff2ff;opacity:0;
}
#ld-flash.ld-flashing{animation:ld-flash-a .5s steps(4) 1}
@keyframes ld-flash-a{0%{opacity:.9}100%{opacity:0}}

/* damage flash: red closing in from the edges when hp drops */
#ld-hurt{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(255,34,34,0);
  opacity:0;
}
#ld-hurt.ld-hurting{animation:ld-hurt-a .45s steps(3) 1}
@keyframes ld-hurt-a{
  0%{opacity:1;box-shadow:inset 0 0 120px 30px rgba(255,34,34,.75)}
  100%{opacity:0;box-shadow:inset 0 0 40px 8px rgba(255,34,34,0)}
}

/* ---------- enter overlay (unlocked state) ---------- */
#ld-enter{
  position:fixed;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(4,8,20,.55);
  cursor:pointer;
  text-align:center;
}
.ld-enter-word{
  font-size:clamp(44px,9vw,92px);
  color:var(--cream);
  text-shadow:3px 3px 0 rgba(16,34,46,.6),0 0 26px rgba(255,34,34,.5);
}
.ld-enter-hint{
  font-size:22px;
  color:var(--yellow);
  animation:ld-blink 1.4s steps(2) infinite;
}
@keyframes ld-blink{50%{opacity:.25}}
.ld-enter-touch{display:none;font-size:17px;opacity:.85;max-width:32ch}
#ld-retry{
  color:var(--cream);border:1px solid var(--cream);padding:7px 13px;
  font-size:19px;text-decoration:none;background:rgba(10,17,40,.8)
}
#ld-retry:hover,#ld-retry:focus-visible{color:var(--yellow);border-color:var(--yellow);outline:none}
#ld-enter.ld-failed{cursor:default;background:rgba(4,8,20,.9)}
#ld-enter.ld-failed .ld-enter-hint{animation:none}
@media (pointer:coarse){
  .ld-enter-hint{display:none}
  .ld-enter-touch{display:block}
  #ld-home{top:10px;font-size:16px}
  #ld-save{top:43px;right:10px;max-width:46vw;text-align:right}
}

.ld-rehearsal{
  border:1px solid #a33;
  background:#f7e7df;
  color:#7a2929;
  padding:8px 10px;
  font-size:17px;
  line-height:1.25;
}

/* the wardrobe grid in the dressing sheet */
.ld-wardrobe{max-width:420px}
.ld-wear.on{background:#a33;border-color:#a33;color:#f4f2ee}

/* ---------- phoenix city HUD ---------- */
#ld-city{
  position:absolute;top:44px;right:18px;
  display:flex;flex-direction:column;gap:5px;
  width:min(44vw,240px);
  text-align:right;
}
.ld-meter{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.ld-meter span{font-size:14px;opacity:.85;text-shadow:1px 1px 0 rgba(4,8,20,.6)}
.ld-bar{
  width:110px;height:10px;
  background:rgba(4,8,20,.65);
  border:1px solid rgba(255,246,216,.4);
}
.ld-bar i{display:block;height:100%;width:0;background:#7fce8a;transition:width .2s steps(5)}
.ld-adren i{background:var(--yellow)}
.ld-cop i{background:#5b8dd6}
.ld-gang i{background:var(--scan)}
.ld-cash{font-size:16px;color:var(--cream);text-shadow:1px 1px 0 rgba(4,8,20,.6)}
@media (pointer:coarse){#ld-city{top:74px}}

/* the laundering needle */
.ld-needle-bar{
  position:relative;height:34px;margin:8px 0;
  border:2px solid #3a3a36;display:flex;overflow:hidden;
}
.ld-zone-fail{width:40%;background:#d9b3b3}
.ld-zone-std{width:46%;background:#d6d0bd}
.ld-zone-sweet{width:14%;background:#9ccc9c}
#ld-needle{
  position:absolute;top:-2px;bottom:-2px;left:0;
  width:4px;background:#1c2026;
}

/* ---------- phase 3: objective, race, minimap, lock wheel, touch ---------- */
#ld-objective{
  position:absolute;top:70px;left:18px;
  font-size:17px;color:var(--cream);opacity:.9;
  text-shadow:1px 1px 0 rgba(4,8,20,.6);
  max-width:46ch;text-align:left;
}
#ld-race{
  position:absolute;top:92px;left:18px;
  font-size:17px;color:var(--yellow);
  text-shadow:1px 1px 0 rgba(4,8,20,.6);
}
.ld-minimap{
  margin-top:6px;
  border:1px solid rgba(255,246,216,.4);
  image-rendering:pixelated;
  align-self:flex-end;
}
#ld-lockwheel{
  position:absolute;left:calc(50% + 26px);top:calc(50% - 30px);
  display:flex;flex-direction:column;gap:2px;
  font-size:15px;color:var(--cream);
  text-shadow:1px 1px 0 rgba(4,8,20,.7);
}
#ld-lockwheel div{opacity:.55;padding:1px 6px;border-left:2px solid transparent}
#ld-lockwheel div.on{opacity:1;color:var(--scan);border-left-color:var(--scan)}

/* touch: stick left, look right, thumbs bottom-right */
#ld-touch{position:fixed;inset:0;z-index:3;pointer-events:none}
#ld-stick-zone{
  position:absolute;left:0;bottom:0;width:44%;height:55%;
  pointer-events:auto;
}
#ld-stick{
  position:absolute;left:36px;bottom:96px;
  width:52px;height:52px;border-radius:999px;
  border:2px solid rgba(255,246,216,.5);
  background:rgba(16,34,46,.4);
}
#ld-look-zone{
  position:absolute;right:0;bottom:0;width:56%;height:70%;
  pointer-events:auto;
}
#ld-touch-btns{
  position:absolute;right:14px;bottom:110px;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:auto;
}
#ld-touch-btns button{
  font:inherit;font-size:16px;letter-spacing:.06em;
  color:var(--cream);background:rgba(16,34,46,.55);
  border:1px solid rgba(255,246,216,.5);
  padding:12px 16px;border-radius:999px;
}
@media (pointer:fine){ #ld-touch{display:none} }