/* Cores do Minecraft: painéis no jeito da interface do jogo (cinza claro com borda chanfrada) sobre terra escura */

.page-cores {
  --ink: #1b1611; --bone: #f2efe8; --verdigris: #55ff55; --verdigris-light: #9dff9d; --brass: #ffaa00;
  --line: #3a3128; --line-soft: #4a3f33; --panel: #c6c6c6; --btn-ink: #1b1611;
  --text-secondary: #d8d2c4; --text-muted: #a89e8c;
  --font-serif: "Pixelify Sans", "Courier New", monospace; --font-mono: "Pixelify Sans", "Courier New", monospace; --font-body: "Rubik", system-ui, sans-serif;
  background:
    linear-gradient(rgba(27,22,17,.86), rgba(27,22,17,.95)),
    repeating-conic-gradient(#5b4330 0 25%, #4e3a2a 0 50%) 0 0 / 32px 32px;
  color: var(--bone); font-family: var(--font-body); min-height: 100vh;
}
body:has(.page-cores) { background: #1b1611; }
.page-cores .nav-link { font: 500 14px var(--font-serif); color: var(--bone); text-decoration: none; }
.page-cores .nav-link:hover { color: var(--verdigris); }

.bancada { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; padding: clamp(28px,6vh,60px) clamp(14px,3vw,28px) 130px; display: grid; gap: 22px; }
.topo { display: grid; gap: 10px; }
.kicker { margin: 0; font: 500 13px var(--font-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--verdigris); }
.topo h1 { margin: 0; font: 700 clamp(36px,6vw,64px)/1 var(--font-serif); color: #fff; text-shadow: 4px 4px 0 #3f3f3f; }
.lede { margin: 0; max-width: 66ch; font-size: 17px; line-height: 1.55; color: var(--text-secondary); }

/* painel no jeito do inventário: claro, borda chanfrada (claro em cima/esquerda, escuro embaixo/direita) */
.gui { background: #c6c6c6; color: #3f3f3f; padding: 14px 16px 16px; border: 3px solid #000;
  box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #555; display: grid; gap: 10px; }
.gui-titulo { margin: 0; font: 500 18px var(--font-serif); color: #3f3f3f; }
.gui-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.gui textarea { width: 100%; box-sizing: border-box; resize: vertical; font: 500 16px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #fff; background: #000;
  border: 2px solid #a0a0a0; box-shadow: inset 2px 2px 0 #373737; padding: 8px 10px; }
.gui textarea:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* paleta de cores e formatos */
.paleta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.paleta button, .modos button, .saidas button { font: 500 13px var(--font-serif); color: #fff; text-shadow: 1px 1px 0 #3f3f3f; background: #8b8b8b; cursor: pointer;
  border: 2px solid #000; box-shadow: inset 2px 2px 0 #c6c6c6, inset -2px -2px 0 #555; padding: 6px 9px; }
.paleta button:hover, .modos button:hover, .saidas button:hover { background: #a3a3d9; }
.paleta .cor { width: 40px; height: 34px; padding: 0; background: var(--c); }
.paleta .cor span { font-size: 11px; color: #fff; text-shadow: 1px 1px 0 #000; }
.fmt--l { font-weight: 700 !important; } .fmt--o { font-style: italic; } .fmt--m { text-decoration: line-through; } .fmt--n { text-decoration: underline; }
.hex { display: inline-flex; align-items: center; gap: 4px; }
.hex input { width: 38px; height: 34px; padding: 0; border: 2px solid #000; background: none; cursor: pointer; }
.modos { display: flex; gap: 4px; }
.modos button[aria-pressed="true"] { background: #5a8f3a; }

/* prévias */
.previa { min-height: 110px; display: grid; place-items: center start; }
.previa, .previa * { font-family: "Pixelify Sans", monospace; }
.chat { width: 100%; box-sizing: border-box; background: rgba(0,0,0,.55); padding: 8px 12px; font-size: 22px; line-height: 1.35; white-space: pre-wrap;
  background-image: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url("/assets/mini/totaladventure/lugares/forjavale.webp"); background-size: cover; background-position: center; }
.motd { width: 100%; box-sizing: border-box; display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: start; padding: 8px; background: rgba(0,0,0,.85); border: 2px solid #808080; font-size: 20px; line-height: 1.25; }
.motd .icone { width: 64px; height: 64px; background: url("/assets/mini/totaladventure/ta-castelo-bigorna.webp") center/cover; image-rendering: pixelated; }
.motd b { display: block; color: #fff; font-weight: 500; margin-bottom: 2px; }
.ping { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.ping i { width: 3px; background: #55ff55; } .ping i:nth-child(1) { height: 4px; } .ping i:nth-child(2) { height: 7px; } .ping i:nth-child(3) { height: 10px; } .ping i:nth-child(4) { height: 13px; } .ping i:nth-child(5) { height: 16px; }
.tooltip { display: inline-block; max-width: 100%; padding: 8px 12px; background: rgba(16,0,16,.94); border: 2px solid #28007f; box-shadow: inset 0 0 0 2px #1a0040, 0 0 0 2px #100010; font-size: 22px; line-height: 1.35; white-space: pre-wrap; }

/* saídas */
.saidas { display: grid; gap: 10px; }
.saidas label { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: end; }
.saidas span { grid-column: 1 / -1; font-size: 14px; color: #3f3f3f; }
.saidas span i { font-style: normal; color: #555; }
.saidas textarea { font-size: 14px; color: #e0e0e0; }
.nota { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); max-width: 80ch; }