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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0e14;
  font-family: 'Press Start 2P', monospace;
  user-select: none;
}

#game { position: absolute; inset: 0; }
#game canvas { image-rendering: pixelated; }

/* ---------- shared panel look ---------- */
.paneltitle {
  font-size: 9px;
  color: #ffd866;
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.paneltitle .hint { color: #6b7280; font-size: 7px; }
.hidden { display: none !important; }

/* ---------- landing page ---------- */
#landing {
  position: absolute; inset: 0;
  z-index: 50;
  /* dark wash over the pixel-art landscape so the card stays readable */
  background:
    linear-gradient(rgba(10, 14, 22, .55), rgba(10, 14, 22, .72)),
    url('assets/landing-bg.webp') center / cover no-repeat,
    #0b0e14;
  image-rendering: pixelated;
  display: flex; align-items: center; justify-content: center;
}
#landing-card {
  width: 360px;
  background: rgba(10, 14, 22, .92);
  border: 2px solid #2a3140;
  padding: 28px 26px;
  text-align: center;
}
#landing-title {
  font-size: 26px; color: #ffd866;
  text-shadow: 3px 3px 0 #000;
  margin-bottom: 8px;
}
#landing-sub { font-size: 7px; color: #6b7280; margin-bottom: 22px; line-height: 1.8; }
#landing-card input {
  width: 100%;
  background: #11151f;
  border: 2px solid #2a3140;
  color: #e7ecf3;
  font-family: inherit; font-size: 9px;
  padding: 10px;
  margin-bottom: 10px;
  outline: none;
  text-align: center;
}
#landing-card input:focus { border-color: #9adfff; }
.landingbtn {
  width: 100%;
  background: #161b26;
  border: 2px solid #2a3140;
  color: #e7ecf3;
  font-family: inherit; font-size: 9px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  letter-spacing: 1px;
}
.landingbtn:hover { border-color: #ffd866; }
.landingbtn.primary { background: #1c2c1e; border-color: #2f6b3a; color: #9ae6b4; }
.landingbtn.primary:hover { border-color: #51cf66; }
.landingbtn.subtle { font-size: 7px; padding: 8px; opacity: .7; }
.landingbtn:disabled { opacity: .35; cursor: not-allowed; }
.landing-hint { font-size: 6px; color: #6b7280; line-height: 1.9; margin-bottom: 12px; }
.landing-divider { font-size: 7px; color: #4a5560; margin: 6px 0 12px; }
#landing-status { font-size: 7px; color: #9ae6b4; min-height: 14px; line-height: 1.8; }
#landing-status.error { color: #ff8787; }
#landing-x {
  display: inline-block; margin-top: 14px;
  font-size: 8px; color: #9aa3b2; text-decoration: none;
  border: 2px solid #2a3140; padding: 6px 12px;
}
#landing-x:hover { color: #fff; border-color: #ffd866; }
#landing-ca {
  display: block; margin: 14px auto 0; max-width: 100%;
  font: inherit; font-size: 6px; color: #9aa3b2; cursor: pointer;
  background: none; border: 2px solid #2a3140; padding: 6px 10px;
  word-break: break-all; line-height: 1.8;
}
#landing-ca:hover { color: #fff; border-color: #ffd866; }
#landing-ca.copied { color: #9ae6b4; border-color: #51cf66; }

/* ---------- trainer creator ---------- */
#trainer-creator {
  background: #0e1420;
  border: 2px solid #2a3140;
  padding: 12px;
  margin-bottom: 10px;
  text-align: left;
}
#tc-top { display: flex; gap: 12px; align-items: flex-start; }
#trainer-preview {
  image-rendering: pixelated;
  background: #161e2e;
  border: 2px solid #2a3140;
  flex-shrink: 0;
}
#tc-groups { flex: 1; }
.tc-group { margin-bottom: 8px; }
.tc-label { font-size: 6px; color: #9aa3b2; margin-bottom: 4px; letter-spacing: 1px; text-transform: uppercase; }
.tc-row { display: flex; flex-wrap: wrap; gap: 4px; }
.tc-swatch {
  width: 18px; height: 18px;
  border: 2px solid #2a3140;
  cursor: pointer;
  padding: 0;
}
.tc-swatch.selected { border-color: #ffd866; box-shadow: 0 0 5px rgba(255,216,102,.5); }
.tc-pill {
  background: #161b26;
  border: 2px solid #2a3140;
  color: #cdd3de;
  font-family: inherit; font-size: 6px;
  padding: 5px 6px;
  cursor: pointer;
}
.tc-pill.selected { border-color: #ffd866; color: #ffd866; }

/* ---------- inventory ---------- */
#inventory {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 460px; max-width: 92vw;
  max-height: 76vh;
  background: rgba(10, 14, 22, .96);
  border: 2px solid #ffd866;
  padding: 14px;
  z-index: 20;
  display: flex; flex-direction: column;
}
#invbody { overflow-y: auto; }
.invsection {
  font-size: 8px; color: #ffd866;
  margin: 10px 0 6px; letter-spacing: 1px;
}
.invsection:first-child { margin-top: 0; }
.invgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}
.invcell {
  background: #11151f;
  border: 2px solid #1c2230;
  padding: 7px 4px 5px;
  text-align: center;
  position: relative;
}
.invcell.owned { border-color: #2f6b3a; }
.invcell.invempty { opacity: .4; }
.invcell.placeable { cursor: pointer; border-color: #3a4658; }
.invcell.placeable:hover { border-color: #ffd866; background: #1a2030; }
.invplace { font-size: 5px; color: #9ae6b4; margin-top: 2px; line-height: 1.4; }
.invcell.placeable:hover .invplace { color: #ffd866; }
.invicon { width: 26px; height: 26px; image-rendering: pixelated; vertical-align: middle; }
canvas.invicon { width: 26px; height: 26px; }
.invlabel { font-size: 6px; color: #cdd3de; line-height: 1.5; margin-top: 4px; }
.invcount {
  position: absolute; top: 3px; right: 5px;
  font-size: 7px; color: #ffd866;
}
.invcell.owned .invcount { color: #51cf66; }
.invcell.invempty .invcount { color: #4a5560; }

/* ---------- village merchant shop ---------- */
#shop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 360px; max-width: 94vw; max-height: 80vh;
  background: rgba(10, 14, 22, .97); border: 2px solid #e8a23c;
  padding: 14px; z-index: 22; display: flex; flex-direction: column;
}
.shopintro { font-size: 7px; color: #ffd866; line-height: 1.7; margin-bottom: 10px; font-style: italic; }
#shop-list { overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.shopitem {
  width: 100%; text-align: left;
  background: #161b26; border: 2px solid #2a3140;
  color: #e7ecf3; font-family: inherit; padding: 8px; cursor: pointer;
}
.shopitem:hover { border-color: #e8a23c; }
.shopitem .shopget { font-size: 8px; color: #9ae6b4; }
.shopitem .shopcost { font-size: 6px; color: #9aa3b2; margin-top: 3px; }
.shopitem.cant { opacity: .45; cursor: not-allowed; }
.shopitem.cant:hover { border-color: #2a3140; }

/* ---------- achievements ---------- */
#achievements {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 480px; max-width: 94vw; max-height: 80vh;
  background: rgba(10, 14, 22, .97); border: 2px solid #ffd866;
  padding: 14px; z-index: 20; display: flex; flex-direction: column;
}
#ach-summary { font-size: 8px; color: #9ae6b4; line-height: 1.9; margin-bottom: 10px; }
#ach-summary .ach-stats { font-size: 7px; color: #9aa3b2; }
#ach-list { overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.achentry {
  display: flex; gap: 8px; align-items: center;
  background: #11151f; border: 2px solid #1c2230; padding: 7px;
}
.achentry.done { border-color: #2f6b3a; }
.achicon { font-size: 14px; }
.achbody { flex: 1; }
.achtitle { font-size: 8px; color: #e7ecf3; }
.achentry.done .achtitle { color: #ffd866; }
.achdesc { font-size: 6px; color: #9aa3b2; line-height: 1.6; }
.achprog { font-size: 6px; color: #74c0fc; margin-top: 2px; }
.achentry:not(.done) { opacity: .8; }

/* ---------- pokémon team / box ---------- */
#team {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 560px; max-width: 92vw;
  max-height: 80vh;
  background: rgba(10, 14, 22, .96);
  border: 2px solid #74c0fc;
  padding: 14px;
  z-index: 20;
  display: flex; flex-direction: column;
}
#teamcount { color: #9ae6b4; font-size: 8px; }
.teamsub {
  font-size: 7px; color: #74c0fc;
  margin: 10px 0 6px; letter-spacing: 1px;
}
#teamparty {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
#teambox {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.moncard {
  background: #11151f;
  border: 2px solid #1c2230;
  padding: 6px 4px;
  text-align: center;
  position: relative;
}
.moncard img { width: 52px; height: 52px; image-rendering: pixelated; }
.moncard .monname { font-size: 7px; color: #e7ecf3; line-height: 1.5; }
.moncard .monlv { font-size: 6px; color: #9aa3b2; line-height: 1.6; }
.moncard .montrack { height: 4px; background: #0a0e16; border: 1px solid #2a3140; margin: 4px 4px 0; }
.moncard .monfill { height: 100%; background: #51cf66; }
.moncard.fainted .monfill { background: #495057; }
.moncard .monsub { font-size: 5px; color: #6b7280; margin-top: 3px; line-height: 1.4; }
.moncard.team { border-color: #2f5a8a; }
.moncard.clickable { cursor: pointer; }
.moncard.team.clickable:hover { border-color: #ff8787; }
.moncard.team.clickable:hover .monsub { color: #ff8787; }
.moncard.box.clickable:hover { border-color: #74c0fc; }
.moncard.box.clickable:hover .monsub { color: #74c0fc; }
.moncard.boxfull { opacity: .55; cursor: not-allowed; }
.moncard.empty { border-style: dashed; display: flex; align-items: center; justify-content: center; min-height: 78px; }
.moncard .monempty { font-size: 6px; color: #4a5560; }

/* ---------- pokédex ---------- */
#pokedex {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 560px; max-width: 92vw;
  max-height: 76vh;
  background: rgba(10, 14, 22, .96);
  border: 2px solid #d83a3a;
  padding: 14px;
  z-index: 20;
  display: flex; flex-direction: column;
}
#dexcount { color: #9ae6b4; font-size: 8px; }
#dexgrid {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 6px;
}
.dexentry {
  background: #11151f;
  border: 2px solid #1c2230;
  padding: 6px 4px;
  text-align: center;
}
.dexentry img { width: 48px; height: 48px; image-rendering: pixelated; }
.dexentry .dexname { font-size: 6px; color: #e7ecf3; line-height: 1.6; }
.dexentry .dexno { font-size: 6px; color: #4a5560; }
.dexentry.unseen img { visibility: hidden; }
.dexentry.unseen .dexname { color: #3a4350; }
.dexentry.seen img { filter: brightness(0) opacity(.65); }
.dexentry.seen .dexname { color: #6b7280; }
.dexentry.caught { border-color: #2f6b3a; }
.dexentry .dexshiny { color: #ffd866; font-size: 7px; }
.dexentry .dexstatus { font-size: 5px; color: #6b7280; margin-top: 3px; line-height: 1.4; min-height: 7px; }
.dexentry.inteam { border-color: #74c0fc; box-shadow: 0 0 6px rgba(116,192,252,.35); }
.dexentry.inteam .dexstatus { color: #74c0fc; }
.dexentry.dexclick { cursor: pointer; }
.dexentry.dexclick:hover { border-color: #ffd866; }
.dexentry.dexclick:hover .dexstatus { color: #ffd866; }

/* ---------- title ---------- */
#title {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-size: 13px; color: #ffd866;
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
}
#title span { font-size: 8px; color: #9aa3b2; }

/* ---------- stat bars ---------- */
#bars {
  position: absolute; top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.bar { display: flex; align-items: center; gap: 6px; }
.barlabel { font-size: 7px; color: #cdd3de; width: 36px; text-shadow: 1px 1px 0 #000; }
.bartrack {
  width: 150px; height: 12px;
  background: #11151f; border: 2px solid #2a3140;
}
.barfill { height: 100%; transition: width .2s; }
.barfill.hp { background: linear-gradient(#ff6b6b, #c92a2a); }
.barfill.hunger { background: linear-gradient(#ffb347, #e8590c); }

#resources { display: flex; gap: 12px; margin-top: 6px; }
.res { font-size: 10px; color: #e7ecf3; text-shadow: 1px 1px 0 #000; }
.res b { color: #ffd866; }
#tools { font-size: 9px; margin-top: 4px; color: #9ae6b4; text-shadow: 1px 1px 0 #000; }
#power { font-size: 8px; margin-top: 6px; text-shadow: 1px 1px 0 #000; }
#power.on { color: #ffe066; }
#power.off { color: #5a6372; }

/* ---------- boss bar ---------- */
#bossbar {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
  width: 380px; text-align: center; pointer-events: none;
}
#bossname { font-size: 10px; color: #ff8787; text-shadow: 2px 2px 0 #000; margin-bottom: 5px; }
.bosstrack { width: 100%; height: 12px; background: #11151f; border: 2px solid #5c2a2a; }
#bossfill { height: 100%; width: 100%; background: linear-gradient(#ff6b6b, #a01818); transition: width .2s; }

/* ---------- clock ---------- */
#clock {
  position: absolute; top: 12px; right: 12px;
  font-size: 10px; color: #e7ecf3;
  background: rgba(10, 14, 22, .75);
  border: 2px solid #2a3140;
  padding: 8px 10px;
  pointer-events: none;
}

/* ---------- party ---------- */
#party {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 178px;
  max-height: 60vh; overflow-y: auto;
  background: rgba(10, 14, 22, .75);
  border: 2px solid #2a3140;
  padding: 10px;
}
.clickable { cursor: pointer; }
.member.clickable:hover .mname { color: #ffd866; }
.stored {
  font-size: 7px; color: #9aa3b2; padding: 4px 2px;
  border-bottom: 1px solid #1c2230;
}
.stored:hover { color: #ffd866; }
.member { margin-bottom: 8px; }
.member .mname { font-size: 8px; color: #e7ecf3; margin-bottom: 3px; }
.member .mname .lvl { color: #74c0fc; }
.member .mtrack { width: 100%; height: 6px; background: #11151f; border: 1px solid #2a3140; }
.member .mfill { height: 100%; background: #51cf66; }
.member.fainted .mname { color: #6b7280; }
.member.fainted .mfill { background: #495057; }
#storageline { font-size: 7px; color: #6b7280; margin-top: 4px; }

/* ---------- hotbar ---------- */
#hotbar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.slot {
  width: 52px; height: 52px;
  background: rgba(10, 14, 22, .8);
  border: 2px solid #2a3140;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  cursor: pointer;
}
.slot.selected { border-color: #ffd866; box-shadow: 0 0 8px rgba(255, 216, 102, .4); }
.slot .count {
  position: absolute; bottom: 2px; right: 4px;
  font-size: 8px; color: #ffd866; text-shadow: 1px 1px 0 #000;
}
.slot .key {
  position: absolute; top: 2px; left: 4px;
  font-size: 7px; color: #6b7280;
}
.slot.empty { opacity: .45; }

/* ---------- crafting ---------- */
#craft {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 230px;
  background: rgba(10, 14, 22, .92);
  border: 2px solid #2a3140;
  padding: 12px;
}
.recipe {
  width: 100%;
  display: block;
  background: #161b26;
  border: 2px solid #2a3140;
  color: #e7ecf3;
  font-family: inherit; font-size: 8px;
  text-align: left;
  padding: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}
.recipe .cost { display: block; color: #9aa3b2; font-size: 7px; margin-top: 4px; }
.recipe:hover { border-color: #ffd866; }
.recipe.cant { opacity: .4; cursor: not-allowed; }
.recipe.cant:hover { border-color: #2a3140; }
.recipe.owned { opacity: .4; cursor: default; }
.recipe.working { border-color: #51cf66; }
.recipe .bcount { color: #ffd866; float: right; }

/* ---------- build menu / assign panel ---------- */
#buildmenu {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 240px;
  background: rgba(10, 14, 22, .92);
  border: 2px solid #2a3140;
  padding: 12px;
}
#assign {
  position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%);
  width: 280px;
  background: rgba(10, 14, 22, .94);
  border: 2px solid #ffd866;
  padding: 12px;
}
.assigninfo { font-size: 7px; color: #9aa3b2; margin-bottom: 8px; line-height: 1.6; }

/* ---------- help ---------- */
#help {
  position: absolute; bottom: 14px; right: 12px;
  width: 270px;
  background: rgba(10, 14, 22, .9);
  border: 2px solid #2a3140;
  padding: 12px;
  pointer-events: none;
}
#help ul { list-style: none; }
#help li { font-size: 7px; color: #cdd3de; line-height: 2; }
#help b { color: #ffd866; }

/* ---------- quest tracker ---------- */
#quest {
  position: absolute; top: 100px; right: 12px;
  width: 200px;
  background: rgba(10, 14, 22, .8);
  border: 2px solid #2a3140;
  border-left: 3px solid #ffd866;
  padding: 8px 10px;
  pointer-events: none;
}
#quest .qlabel { font-size: 6px; color: #ffd866; letter-spacing: 1px; margin-bottom: 4px; }
#quest .qtitle { font-size: 8px; color: #e7ecf3; line-height: 1.5; }
#quest .qtitle .qprog { color: #9ae6b4; }
#quest .qtrack { height: 5px; background: #11151f; border: 1px solid #2a3140; margin: 5px 0 5px; }
#quest .qfill { height: 100%; background: #ffd866; transition: width .3s; }
#quest .qhint { font-size: 6px; color: #9aa3b2; line-height: 1.7; }

/* ---------- minimap ---------- */
#minimap {
  position: absolute; top: 205px; right: 12px;
  width: 120px; height: 120px;
  border: 2px solid #2a3140;
  background: rgba(10, 14, 22, .6);
  image-rendering: pixelated;
  pointer-events: none;
}

/* ---------- touch controls (mobile) ---------- */
#touch {
  position: absolute; inset: 0;
  z-index: 30;
  pointer-events: none;
}
#touch-stick {
  position: absolute; left: 22px; bottom: 22px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(20, 28, 42, .45);
  border: 2px solid rgba(116, 192, 252, .5);
  pointer-events: auto;
  touch-action: none;
}
#touch-knob {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(116, 192, 252, .55);
  border: 2px solid #9adfff;
}
#touch-buttons {
  position: absolute; right: 18px; bottom: 26px;
  display: flex; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.touchbtn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(20, 28, 42, .55);
  border: 2px solid #2f6b3a;
  color: #9ae6b4;
  font-family: inherit; font-size: 14px;
  pointer-events: auto; touch-action: none;
  display: flex; align-items: center; justify-content: center;
}
.touchbtn.big { width: 84px; height: 84px; border-color: #ffd866; color: #ffd866; font-size: 22px; }
.touchbtn:active { background: rgba(40, 56, 84, .8); }
#touch-menu {
  position: absolute; top: 56px; right: 12px;
  display: flex; flex-wrap: wrap; gap: 6px; width: 96px; justify-content: flex-end;
  pointer-events: none;
}
.touchmini {
  width: 40px; height: 40px;
  background: rgba(20, 28, 42, .6);
  border: 2px solid #2a3140;
  color: #cdd3de;
  font-family: inherit; font-size: 11px;
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
}
.touchmini:active { border-color: #ffd866; }

/* shrink heavy HUD panels on small screens so they don't cover the view */
@media (max-width: 760px) {
  #help { display: none; }
  #minimap { display: none; }            /* corner reused by the touch menu */
  #party { max-height: 34vh; width: 124px; transform: none; top: 76px; }
  #quest { width: 148px; top: 76px; }
  #hotbar { bottom: 96px; }              /* lift above the action buttons */
  #touch-menu { top: 50px; }
  #pokedex, #team, #inventory, #trade, #craft, #buildmenu { max-width: 96vw; max-height: 66vh; }
  #chat { width: 180px; bottom: 180px; }
  #chat #chatlog { max-height: 72px; }
}

/* ---------- trading ---------- */
#traderequest {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 280px; z-index: 60;
  background: rgba(10, 14, 22, .96); border: 2px solid #ffd866;
  padding: 16px; text-align: center;
}
#traderequest-text { font-size: 9px; color: #e7ecf3; line-height: 1.7; margin-bottom: 12px; }
.trbtns { display: flex; gap: 8px; }
.trbtns .landingbtn { margin-bottom: 0; }
#trade {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 560px; max-width: 94vw; max-height: 84vh;
  z-index: 55; overflow-y: auto;
  background: rgba(10, 14, 22, .97); border: 2px solid #74c0fc; padding: 14px;
}
#trade-partner, #trade-partner2 { color: #9adfff; }
#trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trade-side { background: #0e1420; border: 2px solid #2a3140; padding: 8px; }
.trade-head { font-size: 7px; color: #ffd866; margin-bottom: 6px; letter-spacing: 1px; }
.trade-head span { color: #69db7c; }
.trade-sub { font-size: 6px; color: #6b7280; margin: 8px 0 4px; }
.trade-offer { min-height: 60px; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.trade-pick { display: flex; flex-wrap: wrap; gap: 4px; max-height: 180px; overflow-y: auto; }
.troffer, .trpick {
  background: #11151f; border: 2px solid #1c2230; padding: 3px 5px;
  font-size: 6px; color: #cdd3de; display: flex; align-items: center; gap: 3px;
}
.troffer img, .trpick img { width: 22px; height: 22px; image-rendering: pixelated; }
.troffer.item, .trpick.item { color: #ffd866; }
.clickable.trpick:hover, .clickable.troffer:hover { border-color: #ffd866; cursor: pointer; }

/* ---------- network status ---------- */
#netstatus { font-size: 7px; margin-top: 6px; }
#netstatus.on { color: #69db7c; }
#netstatus.off { color: #5a6372; }

/* ---------- chat ---------- */
#chat {
  position: absolute; bottom: 14px; left: 12px;
  width: 280px;
  display: flex; flex-direction: column; gap: 4px;
}
#chatlog {
  max-height: 150px; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(10, 14, 22, .55);
  padding: 6px;
  pointer-events: none;
}
.chatmsg { font-size: 7px; color: #e7ecf3; line-height: 1.9; word-wrap: break-word; }
.chatmsg b { color: #9adfff; }
.chatmsg.sys { color: #ffd866; }
#chatinput {
  background: rgba(10, 14, 22, .85);
  border: 2px solid #2a3140;
  color: #e7ecf3;
  font-family: inherit; font-size: 8px;
  padding: 6px;
  outline: none;
}
#chatinput:focus { border-color: #9adfff; }

/* ---------- pixel icons ---------- */
.ico {
  width: 14px; height: 14px;
  image-rendering: pixelated;
  vertical-align: -2px;
}
.ico.big { width: 26px; height: 26px; }
.ico.recipeicon { width: 16px; height: 16px; margin-right: 2px; }
.zz { color: #6b7280; font-size: 7px; }

/* ---------- ball slot ---------- */
.slot canvas { image-rendering: pixelated; }
.slot .ballname {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  font-size: 6px; color: #9aa3b2; white-space: nowrap;
}
.recipeicon { vertical-align: middle; margin-right: 4px; image-rendering: pixelated; }

/* ---------- toast ---------- */
#toast {
  position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: #fff;
  background: rgba(10, 14, 22, .85);
  border: 2px solid #ffd866;
  padding: 8px 14px;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
  white-space: nowrap;
}
#toast.show { opacity: 1; }