/* style.css */
html, body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
  height: 100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

#view {
  display: block;
  width: 100vw;
  height: 100vh;
  image-rendering: pixelated;
  cursor: crosshair;
}

/* VHS overlay */
#vhs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 70%, rgba(0,0,0,0.9) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.00) 0px, rgba(0,0,0,0.10) 2px, rgba(0,0,0,0.00) 4px);
  mix-blend-mode: screen;
  filter: contrast(1.05) saturate(1.05);
}

/* Encounter sprite */
#encounter {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(60vmin, 560px);
  height: auto;
  opacity: 0;
  pointer-events: none;
  image-rendering: pixelated;
}

.pauseOverlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.04), transparent 32%),
    radial-gradient(circle at 80% 10%, rgba(120,180,255,0.05), transparent 30%),
    rgba(8,10,14,0.68);
  pointer-events: auto;
  z-index: 10;
}
.pauseCard {
  pointer-events: auto;
  width: min(720px, 92vw);
  max-height: 86vh;
  overflow: auto;
  padding: 16px 18px 14px 18px;
  background: linear-gradient(160deg, #1c1f25 0%, #121419 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow:
    0 14px 40px rgba(0,0,0,0.6),
    inset 1px 1px 0 rgba(255,255,255,0.05),
    inset -1px -1px 0 rgba(0,0,0,0.65);
  color: rgba(230,233,240,0.94);
  backdrop-filter: blur(8px);
}
.pauseTitle {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: 0.4px;
}
.pauseRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.pauseSection {
  background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(0,0,0,0.22));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.05),
    inset -1px -1px 0 rgba(0,0,0,0.55);
}
.pauseLabel {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.pauseValue {
  font-size: 14px;
  margin-bottom: 8px;
}
.pauseSkinGrid .skinChoice {
  background: rgba(255,255,255,0.05);
}
.pauseSkin {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pauseSkin img {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
.pauseInvGrid {
  padding: 8px 0 2px 0;
}
.pauseInvGrid .invSlot {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25));
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.05),
    inset -1px -1px 0 rgba(0,0,0,0.55);
}
.pauseFooter {
  text-align: center;
  opacity: 0.7;
  font-size: 12px;
  margin-top: 4px;
}
.pauseStatus {
  opacity: 0.9;
  margin-bottom: 8px;
  font-size: 13px;
}
.pauseForm {
  display: grid;
  gap: 8px;
  max-width: 340px;
}
.authTabs {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.pauseBtn.small {
  padding: 6px 10px;
  font-size: 12px;
}
.authForms {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.authForm {
  max-width: 240px;
}
.pauseInput {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(0,0,0,0.24));
  color: rgba(240,240,240,0.92);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.05),
    inset -1px -1px 0 rgba(0,0,0,0.55);
}
.pauseAuthActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pauseBtn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.35));
  color: rgba(240,240,240,0.92);
  cursor: pointer;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.07),
    inset -1px -1px 0 rgba(0,0,0,0.5),
    0 4px 10px rgba(0,0,0,0.35);
}
.pauseBtn.primary { background: rgba(120,200,255,0.18); border-color: rgba(120,200,255,0.28); }
.pauseBtn.danger { background: rgba(255,120,120,0.20); border-color: rgba(255,120,120,0.30); }
.pauseSkinGrid {
  margin-top: 6px;
}
.pauseStatus {
  font-weight: 600;
}
@media (max-width: 720px) {
  .pauseRow {
    grid-template-columns: 1fr;
  }
}

#hud {
  position: fixed;
  left: 10px;
  top: 10px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: rgba(220,220,220,0.9);
  font: 12px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre;
  pointer-events: none;
  user-select: none;
}

#adminLog {
  position: fixed;
  right: 10px;
  top: 10px;
  width: min(360px, 42vw);
  max-height: 220px;
  overflow: auto;
  padding: 10px 12px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(120,200,255,0.25);
  border-radius: 12px;
  color: rgba(200,230,255,0.95);
  font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  box-shadow: 0 0 18px rgba(0,0,0,0.45);
  z-index: 22;
}

/* Peek */
#peek {
  position: fixed;
  left: 12px;
  bottom: 12px;
  width: min(360px, 92vw);
  padding: 10px 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  color: rgba(240,240,240,0.92);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.peekTitle { font-weight: 700; margin-bottom: 6px; }
.peekBody { opacity: 0.9; font-size: 13px; line-height: 1.25; }
.peekHint { opacity: 0.65; font-size: 12px; margin-top: 6px; }

/* Corner buttons */
.cornerBtn {
  position: fixed;
  right: 14px;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.55);
  color: rgba(240,240,240,0.92);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(4px);
}
#invBtn { bottom: 14px; }
#accountBtn { bottom: 78px; }
#skinBtn { bottom: 142px; }

.accountDot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: rgba(100,255,160,0.95);
  box-shadow: 0 0 12px rgba(100,255,160,0.6);
}

/* Inventory panel */
#invPanel {
  position: fixed;
  right: 14px;
  bottom: 206px;
  width: min(320px, 92vw);
  background: rgba(0,0,0,0.68);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.invHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.invTitle { font-weight: 700; color: rgba(240,240,240,0.92); }

.invGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 12px;
}
.invSlot {
  height: 52px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.invSlot.filled { background: rgba(255,255,255,0.06); }
.invSlot.dragOver { outline: 2px solid rgba(160,220,255,0.75); outline-offset: 2px; }
.invSlot img { width: 26px; height: 26px; opacity: 0.95; image-rendering: pixelated; }

.invTip {
  position: fixed;
  padding: 6px 8px;
  font-size: 12px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  color: rgba(240,240,240,0.92);
  pointer-events: none;
  z-index: 1000;
}

/* Skin chooser */
#skinPanel {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: min(320px, 92vw);
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  padding: 10px 12px 12px 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
.skinTitle {
  font-weight: 800;
  color: rgba(240,240,240,0.94);
  margin-bottom: 8px;
}
.skinGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
}
.skinChoice {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(230,230,230,0.9);
  border-radius: 12px;
  padding: 8px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.skinChoice:hover { border-color: rgba(160,220,255,0.45); background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.skinChoice.selected { border-color: rgba(140,255,180,0.65); box-shadow: 0 0 0 1px rgba(140,255,180,0.25); }
.skinChoice img { width: 64px; height: 64px; image-rendering: pixelated; }
.skinLabel { font-size: 13px; letter-spacing: .2px; opacity: 0.9; text-transform: uppercase; }
.skinChoice.locked { border-style: dashed; cursor: not-allowed; background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.1); }
.skinChoice.locked:hover { transform: none; border-color: rgba(255,255,255,0.12); background: rgba(0,0,0,0.35); }
.skinChoice.locked img { filter: grayscale(1) brightness(0.05) contrast(1.15); }
.skinLock { font-size: 11px; letter-spacing: .3px; color: rgba(230,230,230,0.75); background: rgba(0,0,0,0.55); padding: 2px 7px; border-radius: 999px; }
.skinHint { font-size: 11px; color: rgba(220,220,220,0.65); text-align: center; line-height: 1.2; }
.skinTooltip { position: fixed; transform: translate(-50%, 0); background: rgba(10,10,10,0.95); color: #f2f2f2; padding: 6px 10px; border-radius: 6px; font-size: 12px; border: 1px solid rgba(255,255,255,0.15); pointer-events: none; white-space: nowrap; z-index: 9999; box-shadow: 0 6px 18px rgba(0,0,0,0.45); opacity: 1; transition: opacity 80ms ease, visibility 80ms ease; }
.skinTooltip.hidden { opacity: 0; visibility: hidden; }
.skinStatus {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(220,220,220,0.88);
  opacity: 0.9;
}
.skinVariantPopover {
  position: absolute;
  z-index: 2000;
  width: 220px;
  background: rgba(0,0,0,0.9);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.6);
  padding: 10px;
}
.skinVariantTitle {
  font-weight: 700;
  color: rgba(240,240,240,0.94);
  text-align: center;
  font-size: 13px;
  margin-bottom: 8px;
}
.skinVariantGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.skinVariantChoice {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(230,230,230,0.9);
  border-radius: 10px;
  padding: 6px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.skinVariantChoice:hover { border-color: rgba(160,220,255,0.45); background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.skinVariantChoice img { width: 56px; height: 56px; image-rendering: pixelated; }
.skinVariantChoice div { font-size: 12px; opacity: 0.9; text-transform: uppercase; letter-spacing: .2px; text-align: center; }

/* Modals */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.card {
  width: min(520px, 92vw);
  max-height: 86vh;
  overflow: auto;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.cardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.cardTitle { font-weight: 800; color: rgba(245,245,245,0.94); }
.cardBody { padding: 12px 12px; color: rgba(235,235,235,0.92); font-size: 14px; line-height: 1.35; }
.cardActions {
  display: flex;
  gap: 10px;
  padding: 12px 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
  justify-content: flex-end;
}

.xBtn {
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: rgba(240,240,240,0.9);
  border-radius: 12px;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.uiBtn {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(240,240,240,0.92);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}
.uiBtn.primary { background: rgba(120,200,255,0.20); border-color: rgba(120,200,255,0.35); }
.uiBtn.danger  { background: rgba(255,120,120,0.18); border-color: rgba(255,120,120,0.35); }

.hidden { display: none !important; }

/* Wiki modal */
.wikiCard {
  width: min(920px, 96vw);
  height: min(86vh, 720px);
  background: rgba(0,0,0,0.80);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wikiHeadLeft { display: flex; flex-direction: column; gap: 4px; }
#wikiFrame {
  border: 0;
  width: 100%;
  flex: 1;
  background: #111;
}

.computerCard {
  width: min(780px, 95vw);
  background: #0b0b0d;
  color: #e5e5e5;
  border: 2px solid #3a3a3a;
  box-shadow: 0 22px 60px rgba(0,0,0,0.65), inset 0 0 0 2px #000;
}
.computerCard .cardHead {
  background: linear-gradient(180deg, #1c1c1c, #060606);
  border-bottom: 2px solid #2c2c2c;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 16px;
  padding-block: 10px;
}
.computerBody {
  display: grid;
  gap: 12px;
  padding: 14px 12px 18px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.4)), #0a0a0a;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 15px;
  line-height: 1.45;
}
.computerBody .pauseInput {
  border-radius: 6px;
  border: 1px solid #2f2f2f;
  background: #0f0f0f;
  font-size: 15px;
  padding: 10px 12px;
}
.computerFilters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.filterLabel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: rgba(220,220,220,0.85);
}
.filterSelect {
  background: #0f0f0f;
  color: #e5e5e5;
  border: 1px solid #2f2f2f;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 14px;
}
.computerStatus { font-size: 13px; opacity: 0.8; }
.computerResults {
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}
.computerRow {
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.35));
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.04), inset -1px -1px 0 rgba(0,0,0,0.45);
}
.computerRow.common { background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(0,0,0,0.25)); border-color: rgba(255,255,255,0.07); }
.computerRow.uncommon { background: linear-gradient(180deg, rgba(0,200,120,0.08), rgba(0,0,0,0.35)); border-color: rgba(0,200,120,0.22); }
.computerRow.rare { background: linear-gradient(180deg, rgba(90,150,255,0.10), rgba(0,0,0,0.35)); border-color: rgba(90,150,255,0.25); }
.computerRow.very_rare { background: linear-gradient(180deg, rgba(255,90,90,0.10), rgba(0,0,0,0.35)); border-color: rgba(255,90,90,0.25); }
.computerRow.legendary { background: linear-gradient(180deg, rgba(255,220,90,0.12), rgba(0,0,0,0.35)); border-color: rgba(255,220,90,0.26); }
.computerRow .title { font-weight: 700; font-size: 16px; letter-spacing: 0.2px; }
.computerRow .meta { font-size: 13px; opacity: 0.9; }
.computerRow .loc { font-size: 13px; opacity: 0.82; }

.link { color: rgba(160,220,255,0.95); text-decoration: none; font-size: 12px; opacity: .9; }
.link:hover { text-decoration: underline; }

/* Auth modal (retro 90s window) */
.authCard {
  width: min(460px, 92vw);
  padding: 0;
  background: #cfd4d8;
  border: 2px solid #0c0c0c;
  box-shadow: 8px 12px 0 #0c0c0c44, 0 0 0 1px #f5f6f7 inset;
  border-radius: 6px;
  color: #0c0c0c;
  font-family: "Segoe UI", Tahoma, sans-serif;
}
.retroBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #0a4ba5, #0d63d6);
  color: #e9f0ff;
  padding: 10px 12px;
  border-bottom: 2px solid #0c0c0c;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 800;
}
.retroTitle { text-shadow: 1px 1px #032b64; font-size: 14px; }
.retroClose {
  width: 26px;
  height: 26px;
  background: #bfc3c7;
  border: 2px solid #0c0c0c;
  border-radius: 3px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 1px 1px 0 #f8fbff inset, -1px -1px 0 #7a7d80 inset;
}
.retroTabs {
  display: flex;
  gap: 8px;
  padding: 10px 10px 0 10px;
  background: #d8dde2;
  border-bottom: 2px solid #0c0c0c;
}
.retroTab {
  flex: 1;
  border: 2px solid #0c0c0c;
  background: #e8ebef;
  color: #0c0c0c;
  border-radius: 4px 4px 0 0;
  padding: 9px 10px;
  cursor: pointer;
  box-shadow: 1px 1px 0 #f8fbff inset, -1px -1px 0 #7a7d80 inset;
  font-weight: 700;
}
.retroTab.active {
  background: #ffffff;
  box-shadow: 0 0 0 1px #f8fbff inset, 0 0 0 2px #0c0c0c;
}
.retroBody {
  padding: 12px;
  background: #e8ebef;
  border-top: 1px solid #9ea2a6;
}
.authRow {
  display: grid;
  gap: 6px;
  padding: 10px 0 0 0;
  color: #0c0c0c;
  font-size: 13px;
}
.retroLabel { font-weight: 700; letter-spacing: .3px; }
.retroInput {
  padding: 9px 10px;
  border: 2px solid #0c0c0c;
  border-radius: 4px;
  background: #ffffff;
  color: #0c0c0c;
  font-family: "Segoe UI", Tahoma, sans-serif;
}
.retroStatus {
  padding: 10px 0 0 0;
  min-height: 18px;
  font-size: 13px;
  color: #12314f;
}
.retroField {
  padding: 9px 10px;
  border: 2px solid #0c0c0c;
  border-radius: 4px;
  background: #ffffff;
}
.authButtons {
  display: flex;
  gap: 10px;
  padding: 14px 0 0 0;
  justify-content: flex-end;
}
.retroBtn {
  border: 2px solid #0c0c0c;
  background: linear-gradient(180deg, #fdfefe, #dfe2e5);
  color: #0c0c0c;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 1px 1px 0 #f8fbff inset, -1px -1px 0 #7a7d80 inset;
}
.retroBtn.primary { background: linear-gradient(180deg, #f7fbff, #dcecff); }
.retroBtn.danger { background: linear-gradient(180deg, #ffecec, #f6c7c7); }