:root {
  --ink: #071018;
  --panel: #121c28;
  --panel-2: #182636;
  --line: #2a3f55;
  --fg: #d6e4ee;
  --muted: #7e93a8;
  --gold: #f4c430;
  --gold-dim: #b88912;
  --sea: #3ecf8e;
  --sea-dim: #1f8a5b;
  --cyan: #4fd2e8;
  --coral: #ff6b6b;
  --violet: #9b7dff;
  --font: "Press Start 2P", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
}

body {
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 3px),
    radial-gradient(1200px 600px at 50% -10%, #16324a 0%, var(--ink) 60%);
  color: var(--fg);
  font-family: var(--font);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
  -webkit-user-select: none;
}

button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); border: 2px solid var(--line); }
::-webkit-scrollbar-thumb { background: var(--sea-dim); border: 2px solid var(--sea); }

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: 12px 8px;
}

.wrap {
  width: 100%;
  max-width: 64rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pixel-box {
  background: var(--panel);
  border: 4px solid var(--line);
  box-shadow:
    -4px 0 0 0 #04080c,
    4px 0 0 0 #04080c,
    0 -4px 0 0 #04080c,
    0 4px 0 0 #04080c,
    inset -4px -4px 0 0 #0a121a;
}

.pixel-btn {
  position: relative;
  background: var(--sea-dim);
  border: 3px solid var(--sea);
  color: #f4fff8;
  font-family: var(--font);
  box-shadow: inset -3px -3px 0 0 #146344, inset 3px 3px 0 0 #4ae0a0;
  transition: transform 0.05s, filter 0.1s;
  min-height: 44px;
  padding: 8px 12px;
}

.pixel-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-2px); }
.pixel-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 3px 3px 0 0 #146344, inset -3px -3px 0 0 #4ae0a0;
}
.pixel-btn:disabled {
  background: #2a3340;
  border-color: #3d4a5a;
  color: #7a8794;
  box-shadow: inset -3px -3px 0 0 #1b222c;
  cursor: not-allowed;
  opacity: 0.75;
  filter: none;
  transform: none;
}

.pixel-btn-gold {
  background: #b88912;
  border-color: var(--gold);
  color: #1a1200;
  box-shadow: inset -3px -3px 0 0 #7a5a08, inset 3px 3px 0 0 #ffe06a;
}
.pixel-btn-blue {
  background: #1a5f9a;
  border-color: var(--cyan);
  color: #f2fcff;
  box-shadow: inset -3px -3px 0 0 #0d3d6b, inset 3px 3px 0 0 #7ae4f4;
}
.pixel-btn-red {
  background: #9a2a2a;
  border-color: var(--coral);
  color: #fff6f6;
  box-shadow: inset -3px -3px 0 0 #6a1515, inset 3px 3px 0 0 #ff9a9a;
}

.crt::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgb(0 0 0 / 0.18) 50%);
  background-size: 100% 4px;
  opacity: 0.35;
}

canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  width: 100%;
  height: auto;
  cursor: pointer;
  display: block;
}

.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 32px; height: 32px; }
.title { font-size: 11px; color: var(--gold); }
.tag { margin-top: 6px; font-size: 8px; color: var(--muted); }

.stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 9px; }
.chip { border: 2px solid var(--line); background: var(--ink); padding: 6px 8px; }
.chip .k { font-size: 7px; color: var(--muted); }
.chip .v { margin-top: 4px; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gold { color: var(--gold); }
.sea { color: var(--sea); }
.cyan { color: var(--cyan); }
.violet { color: var(--violet); }
.coral { color: var(--coral); }
.muted { color: var(--muted); }
.fg { color: var(--fg); }

.nav { display: flex; flex-wrap: wrap; gap: 8px; }
.nav .pixel-btn { flex: 1 1 auto; font-size: 9px; }
@media (min-width: 640px) {
  .title { font-size: 14px; }
  .nav .pixel-btn { flex: 0 0 auto; }
}

.hidden { display: none !important; }

.view { display: flex; flex-direction: column; gap: 12px; }
.pad { padding: 8px; }
@media (min-width: 640px) { .pad { padding: 12px; } }

.zone-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  margin-bottom: 8px;
  font-size: 9px;
  color: var(--cyan);
}

.canvas-wrap { position: relative; overflow: hidden; border: 2px solid var(--line); background: var(--ink); }
.hint {
  pointer-events: none;
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: flex;
  justify-content: center;
}
.hint span {
  border: 1px solid var(--gold);
  background: rgb(7 16 24 / 0.85);
  color: var(--gold);
  padding: 8px 12px;
  font-size: 9px;
  text-align: center;
}

.bottom {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .bottom { grid-template-columns: 2fr 1fr; }
}

.log {
  height: 7rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  background: var(--ink);
  padding: 8px;
  font-size: 8px;
  line-height: 1.6;
  color: var(--muted);
}
.log div { border-bottom: 1px solid rgb(42 63 85 / 0.4); padding: 4px 0; }

.travel { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; background: var(--panel-2); padding: 8px; }
.travel select {
  min-height: 44px;
  width: 100%;
  border: 2px solid var(--cyan);
  background: var(--ink);
  color: var(--cyan);
  font-family: var(--font);
  font-size: 9px;
  padding: 8px;
}

.panel { padding: 16px; }
.h2 { font-size: 12px; margin: 0; }
.sub { margin: 8px 0 16px; font-size: 8px; color: var(--muted); }

.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.demand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 2px solid rgb(155 125 255 / 0.5);
  background: var(--ink);
  padding: 8px 12px;
  font-size: 8px;
  margin-bottom: 16px;
}

.grid-3 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--ink);
  padding: 12px;
}
.card-left { display: flex; align-items: center; gap: 12px; }
.card-left img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.name { font-size: 9px; color: var(--fg); }
.meta { margin-top: 4px; font-size: 7px; color: var(--muted); }
.price { font-size: 10px; color: var(--gold); text-align: right; }
.empty { padding: 48px 0; text-align: center; font-size: 9px; color: var(--muted); }

.cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.shop-card { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 12px; background: var(--ink); }
.shop-card.on { border-color: var(--sea); background: rgb(62 207 142 / 0.05); }
.shop-card img { height: 56px; object-fit: contain; image-rendering: pixelated; margin: 0 auto; }
.equipped { border: 1px solid var(--sea); background: rgb(62 207 142 / 0.1); color: var(--sea); text-align: center; padding: 8px; font-size: 8px; }

.pedia-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pedia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 640px) { .pedia-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .pedia-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .pedia-grid { grid-template-columns: repeat(5, 1fr); } }

.pedia-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px; }
.pedia-card.locked { opacity: 0.5; }
.pedia-card img { height: 40px; object-fit: contain; image-rendering: pixelated; margin-bottom: 8px; }
.ph { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); margin-bottom: 8px; }
.rarity { margin-top: 4px; font-size: 7px; }
.r-Common { color: var(--muted); }
.r-Uncommon { color: var(--sea); }
.r-Rare { color: var(--cyan); }
.r-Epic { color: var(--violet); }
.r-Legendary { color: var(--gold); }
.r-Mythic { color: var(--coral); }

.stat-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat-card { border: 2px solid var(--line); background: var(--ink); padding: 12px; }
.stat-card .k { font-size: 8px; color: var(--muted); }
.stat-card .v { margin-top: 8px; font-size: 18px; }
.stat-actions { display: flex; flex-wrap: wrap; gap: 12px; border-top: 2px solid var(--line); padding-top: 16px; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(7 16 24 / 0.8);
  padding: 16px;
}
.modal-box {
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--panel);
  padding: 20px;
  text-align: center;
}
.modal-box h3 { margin: 0; font-size: 12px; color: var(--gold); }
.modal-box p { margin: 0; white-space: pre-line; font-size: 9px; line-height: 1.6; color: var(--muted); }

.auth-link { text-decoration: none; display: inline-flex; align-items: center; font-size: 9px; }
.tiny { font-size: 7px; color: var(--muted); }
.signin { font-size: 8px; }
html[data-standalone] .hosted-only { display: none !important; }
.dl-link { text-decoration: none; display: inline-flex; align-items: center; font-size: 8px; }