/* Minecraft Colour Codes, VOL.01 theme.
   Palette + chrome come from theme.css; this sheet styles the app.
   Class names are the contract with minecraft-color.js.

   Two halves: the editor UI (dark, site-styled, prefix `cc-`) and the previews,
   which deliberately break the site theme to look like Minecraft's own GUI -
   the widget greys (#c6c6c6 face, #fff top-left bevel, #555 bottom-right), the
   50%-black chat backdrop, the purple-bordered tooltip and so on. */

#mc-color, #mc-color *, #mc-color *::before, #mc-color *::after { box-sizing: border-box; }

#mc-color {
  --card: var(--panel-solid);
  --grass: #6aa84f;
  --grass-2: #7abd6c;
  --warn: #e8b04b;
  --bad: #ff4b4b;
  /* Minecraft's own font if the visitor happens to have it, then the closest
     blocky fallbacks. Line widths are measured in JS from the vanilla glyph
     table, so the limits stay exact whichever of these renders. */
  --cc-font: "Minecraft", "Minecraft Ten", "Monocraft", "Silkscreen", ui-monospace,
             Consolas, "DejaVu Sans Mono", monospace;
  --cc-sh: 2px;
  color: var(--text);
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(10px, 2.2vmin, 22px) 16px 20px;
}

/* ---------- Hero ---------- */
#mc-color .cc-hero { text-align: center; margin-bottom: clamp(14px, 2.8vmin, 24px); }
#mc-color .cc-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 5.4vmin, 2.9rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ededed;
  text-shadow: -0.7px 0 rgba(255, 0, 70, 0.5), 0.7px 0 rgba(0, 235, 220, 0.45);
}
#mc-color .lead-answer {
  color: var(--muted);
  font-size: clamp(0.82rem, 1.6vmin, 0.98rem);
  line-height: 1.55;
  max-width: 680px;
  margin: 0 auto;
}
#mc-color code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 1px 4px;
  color: #d9d9d9;
}

/* ---------- Section headings ---------- */
#mc-color .cc-group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: clamp(20px, 3.4vmin, 30px) 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cfcfcf;
}
#mc-color .cc-group-title span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
}

/* ---------- Editor ---------- */
#mc-color .cc-editor {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
#mc-color .cc-ed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}
#mc-color .cc-ed-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
#mc-color .cc-ed-tools { display: flex; flex-wrap: wrap; gap: 6px; }
#mc-color .cc-mini {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #c8c8c8;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
#mc-color .cc-mini:hover { border-color: var(--grass-2); color: #fff; background: rgba(106, 168, 79, 0.14); }

#mc-color .cc-input {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  background: #0a0a0a;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #ededed;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 11px 12px;
  outline: none;
  transition: border-color 0.15s ease;
}
#mc-color .cc-input:focus { border-color: var(--grass-2); }

#mc-color .cc-ed-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; }
#mc-color .cc-ed-hint kbd {
  font-family: inherit;
  font-size: 10.5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 4px;
  color: #c8c8c8;
}

/* stats strip */
#mc-color .cc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
}
#mc-color .cc-stats b { color: #ededed; font-size: 13px; font-weight: 700; }

/* limit meters */
#mc-color .cc-meter { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
#mc-color .cc-meter-row {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--muted);
}
#mc-color .cc-meter-lb { letter-spacing: 0.04em; }
#mc-color .cc-meter-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
#mc-color .cc-meter-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--grass);
  transition: width 0.18s ease, background 0.18s ease;
}
#mc-color .cc-meter-val { font-variant-numeric: tabular-nums; color: #b9b9b9; }
#mc-color .cc-meter-row.near .cc-meter-bar i { background: var(--warn); }
#mc-color .cc-meter-row.near .cc-meter-val { color: var(--warn); }
#mc-color .cc-meter-row.over .cc-meter-bar i { background: var(--bad); }
#mc-color .cc-meter-row.over .cc-meter-val { color: var(--bad); font-weight: 700; }

/* over-limit warning */
#mc-color .cc-warn {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  animation: cc-pop 0.22s ease;
}
#mc-color .cc-warn[hidden] { display: none; }
#mc-color .cc-warn svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#mc-color .cc-warn p { margin: 0 0 4px; }
#mc-color .cc-warn p:last-child { margin: 0; }
#mc-color .cc-warn.over {
  background: rgba(255, 75, 75, 0.1);
  border: 1px solid rgba(255, 75, 75, 0.4);
  color: #ffc9c9;
}
#mc-color .cc-warn.over svg { stroke: var(--bad); }
#mc-color .cc-warn.over b { color: #ff8080; }
#mc-color .cc-warn.near {
  background: rgba(232, 176, 75, 0.09);
  border: 1px solid rgba(232, 176, 75, 0.35);
  color: #ecd9b0;
}
#mc-color .cc-warn.near svg { stroke: var(--warn); }
@keyframes cc-pop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---------- Palette ---------- */
#mc-color .cc-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}
#mc-color .cc-sw {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sw);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
#mc-color .cc-sw:hover { transform: translateY(-1px); background: #131313; border-color: var(--line-hover); border-left-color: var(--sw); }
#mc-color .cc-sw b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--sw);
  color: #0a0a0a;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
#mc-color .cc-sw[data-code="0"] b,
#mc-color .cc-sw[data-code="1"] b,
#mc-color .cc-sw[data-code="4"] b,
#mc-color .cc-sw[data-code="5"] b,
#mc-color .cc-sw[data-code="8"] b { color: #fff; text-shadow: none; }
#mc-color .cc-sw-nm { font-size: 12.5px; font-weight: 600; color: #ededed; }
#mc-color .cc-sw-hex {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: copy;
}
#mc-color .cc-sw-hex:hover { color: var(--grass-2); }

/* ---------- Formatting buttons ---------- */
#mc-color .cc-formats { display: flex; flex-wrap: wrap; gap: 8px; }
#mc-color .cc-fmt {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  color: #ededed;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
#mc-color .cc-fmt:hover { border-color: var(--grass-2); transform: translateY(-1px); }
#mc-color .cc-fmt b {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--grass-2);
}

/* ---------- Gradient builder ---------- */
#mc-color .cc-grad-bar {
  height: 12px;
  border-radius: 99px;
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
#mc-color .cc-grad-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
#mc-color .cc-grad-stops { display: flex; gap: 8px; }
#mc-color .cc-stop { position: relative; display: block; }
#mc-color .cc-stop input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 42px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
#mc-color .cc-stop input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
#mc-color .cc-stop input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
#mc-color .cc-stop-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #1a1a1a;
  color: #bbb;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
#mc-color .cc-stop-x:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

#mc-color .cc-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
}
#mc-color .cc-check input { accent-color: var(--grass); width: 14px; height: 14px; cursor: pointer; }

#mc-color .cc-apply {
  background: linear-gradient(135deg, var(--grass), #4f8a3d);
  border: 0;
  border-radius: 9px;
  color: #06120a;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 15px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
#mc-color .cc-apply:hover { filter: brightness(1.1); }
#mc-color .cc-grad-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

#mc-color .cc-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
#mc-color .cc-preset {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px 11px 5px 6px;
  color: #cfcfcf;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
#mc-color .cc-preset:hover { border-color: var(--grass-2); color: #fff; }
#mc-color .cc-preset i { width: 26px; height: 14px; border-radius: 99px; }

/* ---------- Two-column workspace ----------
   Stacked by default (editor -> preview -> palette, which is also the DOM
   order). Wide enough, and the preview becomes a sticky right-hand column so
   you never have to scroll away from the text you're editing to see it. */
#mc-color .cc-work { display: block; }
@media (min-width: 1120px) {
  #mc-color .cc-work {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 424px);
    gap: 0 clamp(18px, 2.4vw, 28px);
    align-items: start;
  }
  #mc-color .cc-pane-edit { grid-column: 1; grid-row: 1; min-width: 0; }
  #mc-color .cc-pane-tools { grid-column: 1; grid-row: 2; min-width: 0; }
  #mc-color .cc-pane-view {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
    position: sticky;
    /* clears the fixed "EST. 2016 / SCOTLAND" corner liner note once pinned */
    top: 58px;
    max-height: calc(100vh - 74px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  /* the preview column starts level with the editor */
  #mc-color .cc-pane-view > .cc-group-title:first-of-type { margin-top: 0; }
}

/* ---------- Context switch ---------- */
#mc-color .cc-ctx-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 5px;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 5px;
}
#mc-color .cc-ctx {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
#mc-color .cc-ctx:hover { color: var(--text); }
#mc-color .cc-ctx.on { background: linear-gradient(135deg, var(--grass), #4f8a3d); color: #06120a; }
#mc-color .cc-note {
  margin: 11px 2px 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 78ch;
}

/* ===========================================================
   PREVIEWS
   The Minecraft text primitives, then one mock per context.
   =========================================================== */
#mc-color .cc-views { margin-top: 16px; }
#mc-color .cc-view { animation: cc-pop 0.24s ease; }
#mc-color .cc-view[hidden] { display: none; }
#mc-color .cc-view-cap {
  margin: 10px 2px 0;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 78ch;
}
#mc-color .cc-view-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

/* Rendered Minecraft text: colour + optional drop shadow, per span. */
#mc-color .cc-c { font-family: var(--cc-font); white-space: pre; }
#mc-color .cc-b { font-weight: 700; }
#mc-color .cc-i { font-style: italic; }
#mc-color .cc-u { text-decoration: underline; }
#mc-color .cc-s { text-decoration: line-through; }
#mc-color .cc-u.cc-s { text-decoration: underline line-through; }
#mc-color .cc-views[data-shadow="on"] .cc-c {
  text-shadow: var(--cc-sh) var(--cc-sh) 0 var(--cc-shadow, rgba(0, 0, 0, 0.6));
}
/* lines that the game would cut off */
#mc-color .cc-cut { opacity: 0.32; filter: grayscale(0.5); }

/* Stages */
#mc-color .cc-scene {
  position: relative;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  image-rendering: pixelated;
}
#mc-color .cc-scene img { image-rendering: pixelated; }

/* a slice of world: sky, then a grass floor */
#mc-color .cc-scene-world {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-height: 212px;
  padding: 18px 14px 12px;
  background:
    url("/assets/img/minecraft/textures/block/grass_block_side.png") left bottom / 48px 48px repeat-x,
    linear-gradient(#5f8bd8 0%, #86b0e8 62%, #b9d0ef 100%);
}
#mc-color .cc-scene-world::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background: rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
/* the tiled-dirt menu backdrop the multiplayer screen uses */
#mc-color .cc-scene-dirt {
  padding: 16px 14px 18px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)),
    url("/assets/img/minecraft/textures/block/dirt.png") 0 0 / 42px 42px repeat;
}
/* an inventory screen: the world dimmed right down */
#mc-color .cc-scene-gui {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  padding: 22px 16px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.85)),
    url("/assets/img/minecraft/textures/block/stone.png") 0 0 / 46px 46px repeat;
}

/* ---------- Chat ---------- */
#mc-color .cc-chat { width: min(380px, 100%); font-size: 15px; line-height: 1.4; }
#mc-color .cc-chat-lines { display: flex; flex-direction: column; }
#mc-color .cc-chat-line { background: rgba(0, 0, 0, 0.5); padding: 1px 3px; min-height: 1.4em; }
#mc-color .cc-chat-box {
  display: flex;
  align-items: center;
  margin-top: 5px;
  padding: 3px 4px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  min-height: 1.9em;
}
#mc-color .cc-chat-raw {
  font-family: var(--cc-font);
  color: #fff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-shadow: var(--cc-sh) var(--cc-sh) 0 #3f3f3f;
}
#mc-color .cc-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  background: #fff;
  animation: cc-blink 1s steps(2) infinite;
}
@keyframes cc-blink { 50% { opacity: 0; } }
#mc-color .cc-hotbar { display: flex; justify-content: center; gap: 0; }
#mc-color .cc-hotbar i {
  width: 22px;
  height: 22px;
  background: #8b8b8b;
  box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #ffffff;
}
#mc-color .cc-chat-mini { width: min(300px, 100%); font-size: 14px; }

/* ---------- Server list / MOTD ---------- */
#mc-color .cc-mp-title {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--cc-font);
  font-size: 15px;
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
}
#mc-color .cc-server {
  display: flex;
  gap: 9px;
  max-width: 420px;
  margin: 0 auto 6px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
#mc-color .cc-server-dim { border-color: rgba(255, 255, 255, 0.08); opacity: 0.55; }
#mc-color .cc-srv-icon {
  flex: none;
  width: 40px;
  height: 40px;
  background: #000 url("/assets/img/favicon.png") center / cover no-repeat;
}
#mc-color .cc-srv-icon-blank {
  background:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("/assets/img/minecraft/textures/block/dirt.png") 0 0 / 20px 20px repeat;
}
#mc-color .cc-srv-body { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; }
#mc-color .cc-srv-top { display: flex; align-items: center; gap: 8px; }
#mc-color .cc-srv-name {
  flex: 1;
  min-width: 0;
  font-family: var(--cc-font);
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mc-color .cc-srv-players {
  font-family: var(--cc-font);
  font-size: 13px;
  color: #808080;
  text-shadow: 2px 2px 0 #202020;
}
#mc-color .cc-ping { display: inline-flex; align-items: flex-end; gap: 1px; height: 11px; }
#mc-color .cc-ping i { width: 2px; background: #55ff55; }
#mc-color .cc-ping i:nth-child(1) { height: 3px; }
#mc-color .cc-ping i:nth-child(2) { height: 5px; }
#mc-color .cc-ping i:nth-child(3) { height: 7px; }
#mc-color .cc-ping i:nth-child(4) { height: 9px; }
#mc-color .cc-ping i:nth-child(5) { height: 11px; }
#mc-color .cc-ping-low i { background: #555; }
#mc-color .cc-ping-low i:nth-child(1),
#mc-color .cc-ping-low i:nth-child(2) { background: #ffff55; }
#mc-color .cc-motd { margin-top: 2px; }
#mc-color .cc-motd-line { min-height: 1.45em; }

/* ---------- Sign ---------- */
#mc-color .cc-sign { align-self: center; width: min(320px, 100%); text-align: center; }
#mc-color .cc-sign-face {
  padding: 12px 10px;
  background: url("/assets/img/minecraft/textures/block/oak_planks.png") 0 0 / 64px 64px repeat;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.16), 0 3px 0 rgba(0, 0, 0, 0.25);
  font-size: 17px;
  line-height: 1.35;
}
#mc-color .cc-sign-line { min-height: 1.35em; }
#mc-color .cc-sign-post {
  display: block;
  width: 26px;
  height: 40px;
  margin: 0 auto;
  background: url("/assets/img/minecraft/textures/block/oak_planks.png") 0 0 / 64px 64px repeat;
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.22);
}
/* glow ink sac: bright outline instead of a drop shadow */
#mc-color .cc-sign.glow .cc-c {
  text-shadow:
    0 0 6px currentColor, 0 0 2px currentColor,
    1px 1px 0 rgba(0, 0, 0, 0.9), -1px -1px 0 rgba(0, 0, 0, 0.9),
    1px -1px 0 rgba(0, 0, 0, 0.9), -1px 1px 0 rgba(0, 0, 0, 0.9);
  filter: brightness(1.35);
}

/* ---------- Book ---------- */
#mc-color .cc-book {
  position: relative;
  width: min(300px, 100%);
  padding: 26px 24px 34px;
  background: linear-gradient(#e9dec2, #ddcfab);
  box-shadow: inset 0 0 0 2px #c2b18a, inset 0 0 22px rgba(120, 96, 54, 0.28);
  font-size: 15px;
  line-height: 1.35;
}
#mc-color .cc-book-line { min-height: 1.35em; }
#mc-color .cc-book-count {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-family: var(--cc-font);
  font-size: 11px;
  color: #6b5a3c;
}

/* ---------- Minecraft GUI panel (anvil) ---------- */
#mc-color .cc-gui {
  width: min(330px, 100%);
  padding: 9px 11px 11px;
  background: #c6c6c6;
  box-shadow: inset 3px 3px 0 #ffffff, inset -3px -3px 0 #555555;
  font-family: var(--cc-font);
}
#mc-color .cc-gui-title { margin: 0 0 8px; font-size: 13px; color: #404040; }
#mc-color .cc-name-field {
  display: flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 5px;
  margin-bottom: 12px;
  background: #000;
  box-shadow: 0 0 0 1px #a0a0a0;
  font-size: 15px;
  overflow: hidden;
}
#mc-color .cc-anvil-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
#mc-color .cc-slot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: #8b8b8b;
  box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #ffffff;
}
#mc-color .cc-slot img { width: 30px; height: 30px; }
#mc-color .cc-plus { color: #404040; font-size: 15px; }
#mc-color .cc-arrow {
  width: 26px;
  height: 10px;
  background: #8b8b8b;
  clip-path: polygon(0 30%, 62% 30%, 62% 0, 100% 50%, 62% 100%, 62% 70%, 0 70%);
}
#mc-color .cc-anvil-cost {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: #80ff20;
  text-shadow: 2px 2px 0 #203f08;
}

/* ---------- Item tooltip ---------- */
#mc-color .cc-tooltip {
  position: relative;
  align-self: flex-start;
  max-width: 320px;
  padding: 7px 8px;
  background: rgba(16, 0, 16, 0.94);
  box-shadow: 0 0 0 1px rgba(16, 0, 16, 0.94);
  font-size: 15px;
  line-height: 1.4;
}
#mc-color .cc-tooltip::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid transparent;
  border-image: linear-gradient(180deg, #5000ff, #28007f) 1;
  pointer-events: none;
}
#mc-color .cc-tip-name { min-height: 1.4em; }
#mc-color .cc-tip-lore { margin-top: 2px; }
#mc-color .cc-tip-lore-line { min-height: 1.4em; }
#mc-color .cc-tip-sub {
  font-family: var(--cc-font);
  font-size: 13px;
  color: #555555;
  text-shadow: 2px 2px 0 #151515;
}
#mc-color .cc-tip-float { margin-top: 26px; }

/* an inventory row behind the tooltip */
#mc-color .cc-inv {
  display: grid;
  grid-template-columns: repeat(3, 38px);
  gap: 2px;
  padding: 7px;
  background: #c6c6c6;
  box-shadow: inset 3px 3px 0 #ffffff, inset -3px -3px 0 #555555;
}

/* ---------- Nametag / tab list ---------- */
#mc-color .cc-player { display: flex; flex-direction: column; align-items: center; }
#mc-color .cc-nametag {
  padding: 1px 4px 2px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 15px;
  line-height: 1.4;
  min-height: 1.4em;
  white-space: nowrap;
}
/* Front view of the skin, every piece cropped out of the 64x64 texture.
   Java 1.8+ layout, in texture pixels:
     head front (8,8) 8x8      torso front (20,20) 8x12
     right arm  (44,20) 4x12   left arm    (36,52) 4x12
     right leg  (4,20)  4x12   left leg    (20,52) 4x12
   --s is the on-screen size of one texture pixel; the player is facing us, so
   their right limb sits on our left. */
#mc-color .cc-steve {
  --s: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#mc-color .cc-steve-row { display: flex; }
#mc-color .cc-steve i,
#mc-color .cc-tab-face {
  display: block;
  background-image: url("/assets/img/minecraft/textures/entity/player/wide/steve.png");
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
#mc-color .cc-steve i { background-size: calc(64 * var(--s)) calc(64 * var(--s)); }
#mc-color .cc-head  { width: calc(8 * var(--s)); height: calc(8 * var(--s));  background-position: calc(-8 * var(--s))  calc(-8 * var(--s)); }
#mc-color .cc-torso { width: calc(8 * var(--s)); height: calc(12 * var(--s)); background-position: calc(-20 * var(--s)) calc(-20 * var(--s)); }
#mc-color .cc-arm-r { width: calc(4 * var(--s)); height: calc(12 * var(--s)); background-position: calc(-44 * var(--s)) calc(-20 * var(--s)); }
#mc-color .cc-arm-l { width: calc(4 * var(--s)); height: calc(12 * var(--s)); background-position: calc(-36 * var(--s)) calc(-52 * var(--s)); }
#mc-color .cc-leg-r { width: calc(4 * var(--s)); height: calc(12 * var(--s)); background-position: calc(-4 * var(--s))  calc(-20 * var(--s)); }
#mc-color .cc-leg-l { width: calc(4 * var(--s)); height: calc(12 * var(--s)); background-position: calc(-20 * var(--s)) calc(-52 * var(--s)); }
#mc-color .cc-tab-face { width: 16px; height: 16px; background-size: 128px 128px; background-position: -16px -16px; }

#mc-color .cc-tab {
  align-self: center;
  width: min(300px, 100%);
  padding: 5px;
  background: rgba(0, 0, 0, 0.5);
}
#mc-color .cc-tab-title {
  margin: 0 0 6px;
  text-align: center;
  font-family: var(--cc-font);
  font-size: 14px;
  color: #fff;
  text-shadow: 2px 2px 0 #3f3f3f;
}
#mc-color .cc-tab-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 3px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 2px;
  font-size: 14px;
  line-height: 1.4;
}
#mc-color .cc-tab-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }

/* ---------- Plain ---------- */
#mc-color .cc-plain-wrap {
  padding: clamp(20px, 4vmin, 34px);
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow-x: auto;
}
#mc-color .cc-plain-wrap[data-bd="dark"] { background: #101010; }
#mc-color .cc-plain-wrap[data-bd="light"] { background: #e8edf3; }
#mc-color .cc-plain-wrap[data-bd="grey"] { background: #c6c6c6; }
/* JS sizes this to fit the column; the value here is the pre-script default */
#mc-color .cc-plain { font-size: clamp(18px, 3.4vmin, 28px); line-height: 1.5; }
#mc-color .cc-plain-line { min-height: 1.5em; }
/* only when even the smallest size can't fit the line on one row */
#mc-color .cc-plain.wrapped .cc-c { white-space: pre-wrap; overflow-wrap: anywhere; }
#mc-color .cc-bd-row { display: flex; gap: 6px; }
#mc-color .cc-bd {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #c8c8c8;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 11px;
  cursor: pointer;
}
#mc-color .cc-bd.on { background: linear-gradient(135deg, var(--grass), #4f8a3d); border-color: transparent; color: #06120a; }

/* ---------- Outputs ---------- */
#mc-color .cc-outs { margin-top: 6px; }
#mc-color .cc-out {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
#mc-color .cc-out:first-of-type { border-top: 1px solid var(--line); }
#mc-color .cc-out-lb {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
#mc-color .cc-out code {
  min-width: 0;
  max-height: 5.4em;
  overflow: auto;
  background: #0a0a0a;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.5;
  color: #d9d9d9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#mc-color .cc-out code:empty::before { content: "(empty)"; color: #5a5a5a; }
#mc-color .cc-copy {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #c8c8c8;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
#mc-color .cc-copy:hover { border-color: var(--grass-2); color: #fff; }
#mc-color .cc-copy.ok { border-color: var(--grass); color: var(--grass-2); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  #mc-color .cc-palette { grid-template-columns: repeat(auto-fill, minmax(134px, 1fr)); }
  #mc-color .cc-out { grid-template-columns: 1fr auto; }
  #mc-color .cc-out-lb { grid-column: 1 / -1; }
  #mc-color .cc-scene-gui { gap: 14px; }
}
@media (max-width: 480px) {
  #mc-color { --cc-sh: 1.5px; }
  #mc-color .cc-sw { grid-template-columns: auto 1fr; }
  #mc-color .cc-chat { font-size: 13px; }
  #mc-color .cc-sign-face { font-size: 15px; }
  #mc-color .cc-hotbar i { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #mc-color .cc-view,
  #mc-color .cc-warn { animation: none; }
  #mc-color .cc-caret { animation: none; }
  #mc-color .cc-sw:hover,
  #mc-color .cc-fmt:hover { transform: none; }
}