/* MapleStory's own UI, over the countdown site's night sky: light grey windows with white title
   bars, the game's orange / green / white buttons, white input boxes like the chat bar, name-tag
   status labels. Colors sampled from native-resolution screenshots of a player shop. The logo follows
   the countdown site's MapleStory Classic sign. Layout never depends on changing text. */
:root {
  --night: #1b4f86;
  --night-2: #123a66;
  --night-3: #0c2a4d;
  --win: #e1dfd5;
  --win-edge: #3c3e36;
  --win-hi: #fbfaf6;
  --win-lo: #bab8ad;
  --panel: #ffffff;
  --panel-edge: #9cb1c7;
  --ink: #111;
  --ink-2: #4b5560;
  --meso-edge: #315573;
  /* Series pair validated on white (CVD dE 26.5, contrast >= 3:1). */
  --sold: #008300;
  --listed: #2a78d6;
  --grid: #e3e7ec;
  --axis: #9aa4ae;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* styled elements (buttons, flex rows) must still hide */
html { background: var(--night-3); }
body {
  margin: 0; color: var(--ink); min-height: 100vh;
  font: 400 14px/1.4 Arial, "Segoe UI", sans-serif;
  background: radial-gradient(120% 80% at 50% -10%, #2b6aa8 0%, var(--night) 35%, var(--night-2) 70%, var(--night-3) 100%) fixed;
}
.num, .price, .mv { font-variant-numeric: tabular-nums; }

/* ---------- the game's buttons ---------- */
.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 14px;
  font: 700 12px/1 Arial, sans-serif; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  color: #fff; text-shadow: 0 0 2px #7a3b00, 0 1px 0 #7a3b00;
  border: 1px solid #2b1a0a; border-radius: 4px;
  background: linear-gradient(#ffc08f 0, #ff9f5c 9%, #d8751c 13%, #e88635 55%, #fd9d59 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 rgba(0, 0, 0, .35);
}
.gbtn:hover { filter: brightness(1.07); }
.gbtn:active { filter: brightness(.95); transform: translateY(1px); }
.gbtn:focus-visible, .tab:focus-visible, .brand:focus-visible { outline: 2px solid #ffe08a; outline-offset: 2px; }
.gbtn.green { text-shadow: 0 0 2px #4a5a00, 0 1px 0 #4a5a00; background: linear-gradient(#ecf59a 0, #d0df43 9%, #97b311 13%, #a5bc22 55%, #cddc40 100%); }
.gbtn.white { color: #ff8a00; text-shadow: none; border-color: #8c8c8c; background: linear-gradient(#fff, #ececec); }
.gbtn.big { height: 34px; padding: 0 18px; font-size: 13px; }
button.link { background: none; border: 0; padding: 0 4px; color: #d6e4ff; font: 700 12px Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
button.link:hover { color: #fff; }

/* ---------- header ---------- */
header {
  display: grid; align-items: center; gap: 12px 20px; padding: 14px 20px 10px;
  grid-template-columns: auto 1fr auto; grid-template-areas: "brand actions account" "status status status";
}
.brand { grid-area: brand; display: flex; align-items: center; gap: 4px; cursor: pointer; border-radius: 12px; }
.logo { display: block; width: 250px; height: auto; overflow: visible; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .35)); transition: transform .2s; }
.brand:hover .logo { transform: scale(1.03) rotate(-1deg); }
.actions { grid-area: actions; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.account { grid-area: account; display: flex; align-items: center; gap: 8px; min-height: 34px; }
.me { display: flex; align-items: center; gap: 8px; }
.me img { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #fff; }
.me img:not([src]) { display: none; }
/* Your character: the in-game name tag, editable. */
.ign { font: 700 12px Arial, sans-serif; color: #fff; background: #1f3652; border: 1px solid #0b1626; border-radius: 4px; padding: 3px 9px; cursor: pointer; }
.ign:hover { background: #2a4a70; }
.ign.unset { color: #ffd76a; border-style: dashed; border-color: #ffd76a; background: rgba(0, 0, 0, .4); }
.ign-input { width: 110px; font: 700 12px Arial, sans-serif; padding: 3px 6px; border: 1px solid #0b1626; border-radius: 4px; }
/* Name tags, like the ones under characters: dark, white text. */
#meName, .chip { font: 700 12px Arial, sans-serif; color: #fff; background: rgba(0, 0, 0, .6); border-radius: 4px; padding: 2px 8px; }
/* The chat bar: one fixed-height line, so changing texts can't push the page around. */
.statusbar {
  grid-area: status; display: flex; align-items: center; gap: 6px; height: 30px; overflow: hidden;
  padding: 0 6px; border-radius: 4px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .15);
}
.chip { flex: none; width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; border: 1px solid rgba(255, 255, 255, .12); }
.chip.on { color: #b6ff8a; }
.chip.dim { color: #c8ced8; }
.dim { color: var(--ink-2); }
.diag { flex: 1; min-width: 0; font: 400 12px Arial, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.diag.warn { color: #ffd27a; }
.toggle { flex: none; display: flex; align-items: center; gap: 5px; font: 700 12px Arial, sans-serif; color: #fff; cursor: pointer; }

/* ---------- layout & windows ---------- */
main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; padding: 12px 20px 24px; align-items: start; }
aside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* A game window: dark hairline frame, light grey body, white title bar. */
.card, .board {
  background: var(--win); border: 1px solid var(--win-edge); border-radius: 6px; min-width: 0;
  box-shadow: inset 0 0 0 1px var(--win-hi), inset 0 0 0 2px var(--win-lo), 0 8px 20px rgba(0, 0, 0, .35);
}
.card > h2 {
  margin: 0; padding: 6px 12px 5px; border-radius: 5px 5px 0 0; border-bottom: 1px solid var(--win-lo);
  font: 700 12px/1.3 Arial, sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #333;
  background: linear-gradient(#ffffff, #e6e6e0);
}
.card > h2 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: #777; }
.card-body { padding: 10px 12px 12px; }
.board { padding: 0 14px 14px; }

/* Window tabs, like the inventory's Equip / Use / Etc. */
.tabs { display: flex; gap: 2px; margin: 0 -14px 12px; padding: 6px 12px 0; border-bottom: 1px solid var(--win-lo); background: linear-gradient(#ffffff, #e6e6e0); border-radius: 5px 5px 0 0; }
.tab {
  flex: none; padding: 4px 18px 3px; border: 1px solid #5b6f8c; border-bottom: 0; border-radius: 5px 5px 0 0; cursor: pointer;
  font: 700 12px Arial, sans-serif; letter-spacing: .4px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 #2c3e57;
  background: linear-gradient(#a9bcd6, #7d97bb);
}
.tab.on { border-color: #8a2a12; text-shadow: 0 1px 0 #7a2410; background: linear-gradient(#ff9a6b, #e2471f); }

h1 { font: 700 22px/1.15 Arial, sans-serif; margin: 0; color: #111; }
h3 { font: 700 12px/1.2 Arial, sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #333; margin: 0; }
.empty { color: #444; padding: 30px 8px; text-align: center; }
.empty.small { padding: 4px 0; text-align: left; }
.empty-leaf { width: 60px; height: 60px;  margin-bottom: 6px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.small { font-size: 12px; }
.hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: #777; }

/* White boxes like the chat input. */
input[type=search], select {
  font: 400 14px Arial, sans-serif; color: #000; background: #fff; height: 30px;
  border: 1px solid #7d8a97; border-radius: 3px; padding: 0 8px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}
input[type=search]:focus, select:focus { outline: none; border-color: #ff9900; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2), 0 0 0 2px rgba(255, 153, 0, .25); }
.search input { width: 100%; margin-bottom: 12px; }

/* ---------- market board ---------- */
.market-tools { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.market-tools { align-items: center; }
.market-tools input { flex: 1; min-width: 180px; }
.market-tools .seg button { height: 30px; }
.more { text-align: center; margin-top: 12px; }
.peek { position: fixed; z-index: 20; width: 320px; pointer-events: none; padding: 10px 12px; }
.sightings-title { margin: 4px 0 8px; }

/* ---------- item ---------- */
.item-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.item-head .chip { width: auto; }
.big-icon { display: grid; place-items: center; width: 56px; height: 56px; background: linear-gradient(#f4f6f8, #e3e8ed); border: 1px solid #b9c3cc; box-shadow: inset 0 0 0 1px #fff; }
.big-icon .icon { width: 40px; height: 40px; }
.stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.stats .chip { width: auto; background: rgba(70, 72, 120, .9); }
/* Price boxes, like the shop's meso counter: white field, dark-blue edge, number on the right. */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.tile { display: grid; gap: 2px; }
.tile .k { font: 700 11px Arial, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: #333; }
.tile .v { display: flex; justify-content: flex-end; align-items: center; height: 36px; padding: 0 10px; background: #fff; border: 1px solid var(--meso-edge); font: 700 22px Arial, sans-serif; color: #111; }
.tile.main .v { background: #fff8dc; border-color: #c27d0e; box-shadow: 0 0 0 1px #ffd27a; }
.tile .n { color: var(--ink-2); font-size: 12px; text-align: right; }
.meso { width: 1em; height: 1em; flex: none; }
.price { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.price .meso { width: 14px; height: 14px; }
.tile .v .price .meso { width: 20px; height: 20px; }
.icon { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; flex: none; display: inline-block; }
table { width: 100%; border-collapse: collapse; }
.nameplate { display: inline-block; padding: 1px 10px; border-radius: 3px; font: 700 13px Arial, sans-serif; color: #fff; background: #1f3652; }
.shop-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; min-height: 26px; }
.skipped { margin-top: 6px; min-height: 1.4em; }

/* ---------- price history ---------- */
.history { margin: 6px 0 14px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 3px; }
.history-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; gap: 2px; }
.seg button {
  padding: 3px 10px; border: 1px solid #5b6f8c; border-radius: 4px; cursor: pointer;
  font: 700 11px Arial, sans-serif; letter-spacing: .3px; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 #2c3e57;
  background: linear-gradient(#a9bcd6, #7d97bb);
}
.seg button.on { border-color: #8a2a12; text-shadow: 0 1px 0 #7a2410; background: linear-gradient(#ff9a6b, #e2471f); }
.trend { margin: 8px 0 4px; font-size: 13px; min-height: 1.5em; }
.trend b { font-size: 15px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: #333; margin: 6px 0; font-weight: 700; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.key.sold { background: var(--sold); }
.key.listed { box-shadow: inset 0 0 0 2px var(--listed); }
.key.line { width: 16px; height: 2px; border-radius: 1px; background: var(--sold); }
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--axis); stroke-width: 1; }
.chart .tick { fill: var(--ink-2); font: 400 11px Arial, sans-serif; }
.chart .median { fill: none; stroke: var(--sold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: #fff; stroke-width: 2; paint-order: stroke; }
.chart .dot.sold { fill: var(--sold); }
.chart .dot.listed { fill: #fff; stroke: var(--listed); stroke-width: 2; }
.chart .hit { fill: transparent; }
.chart-tip { position: absolute; pointer-events: none; padding: 6px 10px; white-space: nowrap; z-index: 3; }

.fanmade { text-align: center; color: rgba(255, 255, 255, .55); font: 400 11px Arial, sans-serif; padding: 0 16px 18px; }
.debug { margin: 0 20px 20px; }
.debug canvas { width: 100%; height: auto; background: #000; }

@media (max-width: 980px) {
  header { grid-template-columns: 1fr; grid-template-areas: "brand" "actions" "account" "status"; }
  main { grid-template-columns: minmax(0, 1fr); padding: 10px 16px 20px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .statusbar .chip { width: 110px; }
}

/* Signed out (or still checking): no prices on the page, only the sign-in window. */
body.locked main, body.locked .actions, body.locked .statusbar, body.locked #debugPane { display: none; }
.gate { display: grid; place-items: center; padding: 60px 20px; }
.gate-win { max-width: 420px; padding: 26px 28px 24px; text-align: center; }
.gate-coin { width: 48px; height: 48px; shape-rendering: crispEdges; }
.gate h2 { margin: 10px 0 6px; font: 800 22px "Baloo 2", Arial, sans-serif; color: #2a2a2a; }
.gate p { margin: 0 0 18px; font: 400 14px/1.45 Arial, sans-serif; color: #444; }
.gate-gsi { display: flex; justify-content: center; min-height: 44px; }

/* ======================================================================
   In-game look for lists: the shop window's rows, the item tooltip.
   Colors sampled from native-resolution screenshots of a player shop.
   ====================================================================== */
.ms-window {
  background: #e1dfd5; border: 2px solid #a9a897; border-radius: 8px; padding: 6px;
  box-shadow: inset 0 0 0 1px #fbfaf6, 0 4px 0 rgba(0, 0, 0, .25);
}
.ms-list { display: grid; gap: 3px; padding: 3px; background: #f5f6f7; border: 1px solid #b9b7aa; border-radius: 4px; }
.ms-list.grid { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.ms-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 3px; min-height: 46px; cursor: pointer;
  font: 400 14px/1.25 Arial, "Segoe UI", sans-serif; color: #000; text-align: left; padding: 0; border: 0; background: none;
}
.ms-icon {
  display: grid; place-items: center; position: relative;
  background: linear-gradient(#f4f6f8, #e3e8ed); border: 1px solid #b9c3cc; box-shadow: inset 0 0 0 1px #fff;
}
.ms-icon .icon { width: 32px; height: 32px; }
.ms-icon .qty { position: absolute; left: 2px; bottom: 0; font: 700 11px Arial, sans-serif; color: #000; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.ms-text {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr 1fr; align-items: center;
  background: #cdd9e3; border-bottom: 1px solid #93a7bd; padding: 0 8px; min-width: 0;
  /* the thin white rule between the name and the price, as in the game */
  background-image: linear-gradient(transparent calc(50% - 1px), #fff calc(50% - 1px), #fff 50%, transparent 50%);
}
/* a third line (equipment stats) under the name and the price */
.ms-text.tall {
  grid-template-rows: 23px 23px auto;
  background-image: linear-gradient(transparent 22px, #fff 22px, #fff 23px, transparent 23px);
}
.ms-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 5px; }
.ms-stat { font: 700 11px Arial, sans-serif; color: #1f3652; background: #eef3f8; border: 1px solid #b2c2d3; border-radius: 3px; padding: 0 5px; }
.ms-stat.slots { color: #6b4a12; background: #fbf1dc; border-color: #d9bd85; }
.ms-row.sold .ms-stat { color: #9aa3ad; background: #f7f9fb; border-color: #d7dee6; }
.ms-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 1px; }
.ms-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.ms-side { justify-self: end; white-space: nowrap; font-size: 12px; color: #33475c; display: flex; align-items: center; gap: 6px; padding-left: 8px; }
.ms-row:hover .ms-text, .ms-row:focus-visible .ms-text { background-color: #dbe6ef; outline: none; }
.ms-row:focus-visible { outline: 2px solid #f4a73a; outline-offset: 1px; }
.ms-row .price { font-family: Arial, sans-serif; font-weight: 700; letter-spacing: 0; }
.ms-row .price .meso { width: 14px; height: 14px; }
/* sold: faded, exactly like a sold slot in a player shop */
.ms-row.sold .ms-text { background-color: #f2f5f8; color: #a9a9a9; }
.ms-row.sold .ms-side { color: #a9a9a9; }
.ms-row.sold .ms-icon .icon { opacity: .45; filter: grayscale(.6); }
.ms-row.pending .ms-text { opacity: .6; }
.ms-tag { font: 700 11px Arial, sans-serif; padding: 0 6px; border-radius: 3px; border: 1px solid; }
.ms-tag.sold { color: #1d6b4c; border-color: #6fb596; background: #e3f3eb; }
.ms-tag.listed { color: #1f4f8a; border-color: #8fb1dc; background: #e6eef9; }
.ms-row.sold .ms-tag.sold { color: #2d7a5a; }
.ms-delta { font: 700 12px Arial, sans-serif; }
.ms-delta.cheap { color: #12804f; }
.ms-delta.pricey { color: #c0392b; }
.ms-plate { display: inline-block; padding: 0 7px; border-radius: 3px; font: 700 12px Arial, sans-serif; color: #fff; background: #1f3652; }
.ms-by { color: #4b5f74; font-size: 12px; }
.ms-row.sold .ms-by { color: #b0b0b0; }
.ms-empty { padding: 14px; text-align: center; color: #555; font: 400 14px Arial, sans-serif; }

/* compare by stats */
.similar-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 8px 10px; background: #fff; border: 1px solid var(--panel-edge); border-radius: 3px; font: 400 13px Arial, sans-serif; }
.sim-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ms-match { font: 700 11px Arial, sans-serif; color: #5b3b8c; }
.ms-row.sold .ms-match { color: #b5a9c9; }
.ms-row[data-key] { cursor: pointer; }

/* contributors */
.lb-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px;
  padding: 5px 8px; background: #cdd9e3; border-bottom: 1px solid #93a7bd; font: 400 13px Arial, sans-serif;
}
.lb-row.you { background: #fff3cf; border-bottom-color: #d9bd85; }
.lb-rank { grid-row: 1 / 3; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 12px Arial, sans-serif; color: #33475c; background: #eef3f8; border: 1px solid #b2c2d3; }
.lb-rank.gold { background: linear-gradient(#ffe680, #f0b429); border-color: #a77a10; color: #4a3200; }
.lb-rank.silver { background: linear-gradient(#f4f6f8, #c3ccd6); border-color: #7d8a97; color: #2b3540; }
.lb-rank.bronze { background: linear-gradient(#f3c9a0, #c98545); border-color: #8a5424; color: #3f2208; }
.lb-who { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-points { font: 700 15px Arial, sans-serif; color: #1f3652; justify-self: end; }
.lb-detail { grid-column: 2 / 4; font-size: 11px; color: #4b5f74; }

/* the item tooltip */
.ms-tooltip {
  background: rgba(70, 72, 120, .94); border: 1px solid #fff; border-radius: 4px; color: #fff;
  font: 400 13px/1.35 Arial, sans-serif; box-shadow: 0 0 0 1px #2c2d55, 0 10px 24px rgba(0, 0, 0, .45);
}
.ms-tooltip h4 { margin: 0 0 6px; font: 700 15px Arial, sans-serif; color: #fff; }
.ms-tooltip h4::before { content: "• "; }
.ms-tooltip td { padding: 2px 4px; border-bottom: 1px solid rgba(255, 255, 255, .15); color: #fff; }
.ms-tooltip .dim { color: #c9cbe8; }
.ms-tooltip .ms-tag.sold { background: rgba(25, 158, 112, .25); color: #b8f5dc; border-color: #4fc89a; }
.ms-tooltip .ms-tag.listed { background: rgba(57, 135, 229, .25); color: #cfe2ff; border-color: #79a9ea; }
.ms-tooltip .price { font-family: Arial, sans-serif; font-weight: 700; letter-spacing: 0; }
.ms-tooltip .peek-foot { margin-top: 8px; font-size: 12px; }