:root {
  --bg: #0c1410;
  --panel: #14231b;
  --panel2: #1b3024;
  --edge: #2b4d38;
  --text: #dff2e4;
  --dim: #86a892;
  --accent: #6fe86f;
  --green: #58e07a;
  --gold: #ffd94d;
  --fire: #ff7a1a;
  --pink: #ff6bd6;
  --red: #ff5566;
  --blue: #5db8ff;
  --purple: #c07eff;
  --ember: #ff8a5c;
  --crystal: #7ef0e6;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 11px;
  line-height: 1.6;
  min-height: 100vh;
  image-rendering: pixelated;
}

header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 18px 10px;
  border-bottom: 3px solid var(--edge);
  flex-wrap: wrap;
}
.logo { font-size: 18px; color: var(--accent); text-shadow: 3px 3px 0 #0a3a1a; }
.tagline { color: var(--dim); font-size: 9px; }
.accent { color: var(--accent); }

main {
  display: flex;
  gap: 14px;
  padding: 14px;
  align-items: flex-start;
  max-width: 1500px;
  margin: 0 auto;
}

/* ---------- stage ---------- */
#stage { flex: 1 1 auto; min-width: 0; }

#ticker {
  background: var(--panel);
  border: 3px solid var(--edge);
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 9px;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#stagewrap { position: relative; }

canvas#game {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--edge);
  background: #7ec8e3;
  image-rendering: pixelated;
}

#overlay {
  position: absolute;
  inset: 3px;
  background: rgba(6, 16, 10, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  cursor: pointer;
  text-align: center;
  padding: 10px;
}
#overlay.hidden { display: none; }
.ov-title { font-size: 26px; color: var(--accent); text-shadow: 4px 4px 0 #0a3a1a; }
.ov-sub { color: var(--dim); font-size: 10px; }
.ov-cta { color: var(--gold); font-size: 13px; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

#tierbanner {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--gold);
  min-height: 22px;
  text-shadow: 2px 2px 0 #4a3400;
}
#tierbanner.pop { animation: pop 0.5s steps(4); }
@keyframes pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }

/* ---------- panel ---------- */
#panel {
  flex: 0 0 350px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card {
  background: var(--panel);
  border: 3px solid var(--edge);
  padding: 10px 12px;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  gap: 8px;
}
.row.big .val { font-size: 16px; }
.row.small { font-size: 9px; }
.lbl { color: var(--dim); font-size: 9px; }
.val { text-align: right; }
.green { color: var(--green); }
.gold { color: var(--gold); }
.fire { color: var(--fire); }
.pink { color: var(--pink); }
.val.accent { color: var(--accent); }

.bar {
  height: 12px;
  background: #081209;
  border: 2px solid var(--edge);
  margin: 4px 0 6px;
}
.bar.thin { height: 8px; }
.fill { height: 100%; width: 0%; transition: width 0.25s steps(6); }
.fill.gold  { background: repeating-linear-gradient(90deg, #ffd94d 0 6px, #ffb52e 6px 12px); }
.fill.pink  { background: repeating-linear-gradient(90deg, #ff6bd6 0 6px, #ff9ae4 6px 12px); }

/* ---------- action buttons ---------- */
#actionrow { display: flex; gap: 10px; }
#actionrow button {
  flex: 1 1 50%;
  font-family: inherit;
  font-size: 12px;
  padding: 14px 8px;
  color: #fff;
  cursor: pointer;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}
#breedbtn {
  background: linear-gradient(#5fd05f, #2b9e3f);
  border: 3px solid #0c5227;
  box-shadow: 0 5px 0 #0c5227;
}
#sellbtn {
  background: linear-gradient(#ffd94d, #e0a500);
  border: 3px solid #7a5a00;
  box-shadow: 0 5px 0 #7a5a00;
  color: #3a2a00;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.35);
}
#actionrow button:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,0.5); }
#actionrow button:disabled { filter: grayscale(0.8); cursor: not-allowed; opacity: 0.6; }

.hint { color: var(--dim); font-size: 8px; text-align: center; }
.hint2 { color: var(--dim); font-size: 8px; }

.potnote { color: var(--dim); font-size: 8px; line-height: 1.7; padding-top: 2px; }
.potnote b { color: var(--gold); }

#passbtn.hidden { display: none; }
#passbtn,
#turbobtn {
  width: 100%;
  font-family: inherit;
  font-size: 10px;
  padding: 12px 8px;
  background: linear-gradient(#c07eff, #7a4fd0);
  color: #fff;
  border: 3px solid #3d2470;
  box-shadow: 0 4px 0 #3d2470;
  cursor: pointer;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  margin: 4px 0 6px;
}
#turbobtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #3d2470; }
#turbobtn:disabled { filter: grayscale(0.7); opacity: 0.7; cursor: not-allowed; }

/* ---------- quests ---------- */
.questitem {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel2);
  border: 2px solid var(--edge);
  padding: 7px 8px;
  margin-bottom: 6px;
}
.questitem .icon { font-size: 16px; width: 24px; text-align: center; }
.questitem .info { flex: 1 1 auto; min-width: 0; }
.questitem .name { font-size: 9px; }
.questitem .desc { font-size: 8px; color: var(--dim); }
.questitem button {
  font-family: inherit;
  font-size: 8px;
  padding: 7px 8px;
  background: #7a4fd0;
  color: #fff;
  border: 2px solid #3d2470;
  box-shadow: 0 3px 0 #3d2470;
  cursor: pointer;
  white-space: nowrap;
}
.questitem button:active { transform: translateY(2px); box-shadow: 0 1px 0 #3d2470; }
.questitem button:disabled {
  background: #33473a; border-color: #1e2f25; box-shadow: 0 3px 0 #1e2f25;
  color: #79947f; cursor: not-allowed;
}
#questactive.hidden { display: none; }
#lootline { min-height: 14px; padding-top: 2px; }

/* rarity colors */
.r0 { color: var(--green); }
.r1 { color: var(--blue); }
.r2 { color: var(--purple); }
.r3 { color: var(--ember); }
.r4 { color: var(--gold); }
.r5 { color: var(--crystal); }

/* ---------- gear ---------- */
.equipitem {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel2);
  border: 2px solid var(--edge);
  padding: 6px 8px;
  margin-bottom: 6px;
}
.equipitem .icon { font-size: 15px; width: 22px; text-align: center; }
.equipitem .info { flex: 1 1 auto; min-width: 0; }
.equipitem .name { font-size: 9px; }
.equipitem .desc { font-size: 8px; color: var(--dim); }
.equipitem button {
  font-family: inherit;
  font-size: 8px;
  padding: 6px 8px;
  background: #b8742a;
  color: #fff;
  border: 2px solid #5e3a12;
  box-shadow: 0 3px 0 #5e3a12;
  cursor: pointer;
  white-space: nowrap;
}
.equipitem button:active { transform: translateY(2px); box-shadow: 0 1px 0 #5e3a12; }
.equipitem button:disabled {
  background: #33473a; border-color: #1e2f25; box-shadow: 0 3px 0 #1e2f25;
  color: #79947f; cursor: not-allowed;
}
.equipitem.owned button { background: #6b5300; border-color: #443400; box-shadow: none; color: var(--gold); }

/* ---------- shop ---------- */
#shopcard { padding: 8px; }
.shoptitle { font-size: 10px; padding: 4px 4px 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; flex-wrap: wrap; }

.shopitem {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel2);
  border: 2px solid var(--edge);
  padding: 7px 8px;
  margin-bottom: 6px;
}
.shopitem .icon { font-size: 16px; width: 24px; text-align: center; }
.shopitem .info { flex: 1 1 auto; min-width: 0; }
.shopitem .name { font-size: 9px; color: var(--text); }
.shopitem .name .lvl { color: var(--accent); }
.shopitem .desc { font-size: 8px; color: var(--dim); }
.shopitem button {
  font-family: inherit;
  font-size: 8px;
  padding: 7px 8px;
  background: #1c9f4e;
  color: #fff;
  border: 2px solid #0c5227;
  box-shadow: 0 3px 0 #0c5227;
  cursor: pointer;
  white-space: nowrap;
}
.shopitem button:active { transform: translateY(2px); box-shadow: 0 1px 0 #0c5227; }
.shopitem button:disabled {
  background: #33473a; border-color: #1e2f25; box-shadow: 0 3px 0 #1e2f25;
  color: #79947f; cursor: not-allowed;
}
.shopitem.maxed button { background: #6b5300; border-color: #443400; box-shadow: none; color: var(--gold); }

.howto { font-size: 9px; color: var(--dim); }
.howto summary { cursor: pointer; color: var(--text); }
.howto p { margin: 8px 0; }
.howto b { color: var(--gold); }

#footerrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mini {
  font-family: inherit;
  font-size: 9px;
  padding: 6px 10px;
  background: var(--panel2);
  color: var(--text);
  border: 2px solid var(--edge);
  cursor: pointer;
}
.mini.wallet {
  margin-left: auto;
  background: #b8742a;
  border-color: #5e3a12;
  color: #fff;
}
.mini.danger { color: var(--red); }

@media (max-width: 900px) {
  main { flex-direction: column; align-items: stretch; }
  #stage { width: 100%; }
  #panel { flex: 1 1 auto; width: 100%; }
}