:root {
  --bg: #1a1c2c; --panel: #262b44; --line: #3a4466; --text: #f4f4f4; --dim: #8b9bb4;
  --green: #38b764; --yellow: #ffcd75; --red: #b13e53; --blue: #41a6f6;
  --pix: 'Press Start 2P', monospace; --mono: 'VT323', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 20px; }
h1 { font-family: var(--pix); font-size: 14px; margin: 0; color: var(--yellow); white-space: nowrap; }
h2 { font-family: var(--pix); font-size: 10px; margin: 0 0 10px; color: var(--dim); text-transform: uppercase; }

header { display: flex; gap: 16px; align-items: center; padding: 10px 16px; border-bottom: 4px solid var(--line); flex-wrap: wrap; }
#myStatus { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; flex-wrap: wrap; }
#meName { color: var(--blue); white-space: nowrap; }
#myTask { flex: 1; min-width: 160px; }

input, textarea {
  font: inherit; color: var(--text); background: #11131f; border: 2px solid var(--line);
  padding: 4px 8px; outline: none; width: 100%;
}
input:focus, textarea:focus { border-color: var(--blue); }
textarea { resize: vertical; min-height: 60px; }

.btn {
  font-family: var(--pix); font-size: 9px; color: var(--text); background: var(--line);
  border: 0; padding: 9px 10px; cursor: pointer; box-shadow: 0 4px 0 #11131f; white-space: nowrap;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #11131f; }
.btn.green { background: var(--green); color: #0b2415; }
.btn.red { background: var(--red); }
.btn.ghost { background: transparent; box-shadow: none; color: var(--dim); }

#notices:empty { display: none; }
#notices { padding: 8px 16px; display: grid; gap: 6px; }
.notice { background: #3b2f1a; border: 2px solid var(--yellow); padding: 6px 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.notice span { flex: 1; min-width: 180px; }

main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; padding: 16px; align-items: start; }
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }

#stage { position: relative; border: 4px solid var(--line); background: #000; line-height: 0; }
#office { width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer; }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; line-height: 1; }
.label {
  position: absolute; transform: translate(-50%, -100%); text-align: center; pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: max-content; max-width: 9.8%;
}
.label .bubble {
  background: #f4f4f4; color: #1a1c2c; font-size: 14px; padding: 2px 5px; border: 2px solid #1a1c2c;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.label .bubble:empty { display: none; }
.label .name { font-size: 14px; padding: 0 4px; background: rgba(26, 28, 44, .85); color: #fff; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.label.idle .name { color: var(--yellow); }
.label.sel .name { background: var(--blue); color: #000; }
.label.sel, .label:hover { z-index: 5; max-width: 30%; }
.label.sel .bubble, .label:hover .bubble { -webkit-line-clamp: 6; }

aside { display: grid; gap: 16px; }
.panel { background: var(--panel); border: 4px solid var(--line); padding: 12px; min-width: 0; }
ul { list-style: none; margin: 0; padding: 0; }
#roster li { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; padding: 5px 6px; cursor: pointer; border: 2px solid transparent; }
#roster li:hover { background: #2f3655; }
#roster li.sel { border-color: var(--blue); }
#roster li.off { opacity: .45; }
#roster .task { grid-column: 2 / 4; color: var(--dim); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-family: var(--pix); font-size: 7px; padding: 4px 5px; align-self: center; }
.badge.working { background: var(--green); color: #0b2415; }
.badge.idle { background: var(--yellow); color: #3b2f1a; }
.badge.offline { background: #555; }
.badge.mgr { background: var(--blue); color: #000; margin-left: 4px; }
#log { max-height: 220px; overflow: auto; font-size: 17px; color: var(--dim); }
#log li { padding: 2px 0; overflow-wrap: anywhere; }
#log time { color: var(--line); margin-right: 6px; }

#detail h3 { margin: 0 0 4px; font-family: var(--pix); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
#detail p { margin: 4px 0; overflow-wrap: anywhere; }
#detail .dim { color: var(--dim); }
#detail form { display: grid; gap: 8px; margin-top: 10px; }
#detail .row { display: flex; gap: 8px; flex-wrap: wrap; }
#detail .pending { border-left: 4px solid var(--yellow); padding-left: 8px; margin: 6px 0; display: flex; gap: 8px; align-items: center; }
#detail .pending span { flex: 1; }
.x { background: none; border: 0; color: var(--dim); cursor: pointer; font: inherit; }
.err { color: #ff8fa3; min-height: 1em; margin: 0; }

.overlay { position: fixed; inset: 0; background: rgba(10, 11, 20, .92); display: grid; place-items: center; padding: 16px; z-index: 10; overflow: auto; }
.overlay[hidden] { display: none; }
.dialog { background: var(--panel); border: 4px solid var(--line); padding: 24px; display: grid; gap: 14px; width: min(380px, 100%); }
.dialog.wide { width: min(640px, 100%); }
.dialog label { display: grid; gap: 4px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
small { color: var(--dim); }
a { color: var(--blue); }

/* editor de personagem */
.editor-grid { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: start; }
@media (max-width: 560px) { .editor-grid { grid-template-columns: 1fr; justify-items: center; } }
#preview { width: 160px; height: 160px; image-rendering: pixelated; background: #566178; border: 4px solid var(--line); }
#editorFields { display: grid; gap: 8px; min-width: 0; }
.field { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; }
.field > span { color: var(--dim); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; color: var(--text); background: #11131f; border: 2px solid var(--line); padding: 1px 8px; cursor: pointer; }
.chip.swatch { width: 26px; height: 26px; padding: 0; }
.chip.on { border-color: #fff; outline: 2px solid var(--blue); }

/* quadro de tarefas */
#board { display: grid; gap: 6px; margin-bottom: 10px; }
#board:empty::after { content: 'Nenhuma tarefa no quadro.'; color: var(--dim); }
#board li { background: #fff7d6; color: #3b2f1a; padding: 6px 8px; border-left: 6px solid var(--yellow); display: grid; gap: 4px; overflow-wrap: anywhere; }
#board li.claimed { border-left-color: var(--blue); background: #dcecfb; }
#board li.done { border-left-color: var(--green); background: #d5ecd9; }
#board li.done strong { text-decoration: line-through; opacity: .7; }
#board .result summary { cursor: pointer; font-size: 17px; }
#board .result pre { margin: 4px 0 0; font: inherit; font-size: 17px; white-space: pre-wrap; max-height: 260px; overflow: auto; background: #ffffffaa; padding: 4px 6px; }
#board .meta { font-size: 16px; color: #6b5a3a; text-decoration: none; display: inline-block; }
#board .details { font-size: 17px; white-space: pre-wrap; }
#board .btn { font-size: 8px; padding: 6px 8px; box-shadow: 0 3px 0 #3b2f1a55; }
#board .x { color: #6b5a3a; margin-left: auto; }
#boardForm { display: grid; gap: 8px; }
#boardForm[hidden] { display: none; }

/* painel admin */
.admin { max-width: 1000px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--dim); font-weight: normal; }
th, td { padding: 5px 8px; border-bottom: 2px solid var(--line); vertical-align: middle; }
td.revoked { text-decoration: line-through; color: var(--dim); }
.scroll { overflow-x: auto; }
select { font: inherit; color: var(--text); background: #11131f; border: 2px solid var(--line); padding: 3px 6px; }
.newkey { background: #1b3a2a; border: 2px solid var(--green); padding: 10px; display: grid; gap: 8px; }
.newkey code, .newkey pre { background: #11131f; padding: 6px 8px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; user-select: all; }
.btn.small { font-size: 8px; padding: 6px 8px; }