/* Priston Idle — tema escuro com os dourados e vermelhos do cliente original. */

:root {
  --bg: #0e0c0a;
  --bg-2: #171310;
  --panel: #1d1813;
  --panel-2: #241d16;
  --line: #3a2e21;
  --line-soft: #2a211a;
  --gold: #d9a441;
  --gold-dim: #8f6c2a;
  --text: #e8dfd0;
  --muted: #9b8d7a;
  --hp: #b3342c;
  --mp: #2f6fb5;
  --xp: #c9a227;
  --ok: #5fa05f;
  --green: #6fd36f;
  --danger: #d35050;
  --radius: 6px;
  --shadow: 0 6px 24px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", Roboto, system-ui, sans-serif;
}

body {
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(217, 164, 65, .10), transparent 60%),
    linear-gradient(180deg, #100d0a, #0a0806);
  background-attachment: fixed;
}

h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 600; letter-spacing: .3px; }
h3 { font-size: 14px; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; }
h4 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 12px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ---------------------------------------------------------- telas */

.screen { display: none; min-height: 100%; }
.screen.active { display: block; }
/* A tela do jogo nao rola: mundo em tela cheia com a HUD por cima. */
#screen-game.active { height: 100%; overflow: hidden; }

/* ---------------------------------------------------------- botões */

.btn {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: var(--cur-default), pointer;
  font: inherit;
  transition: border-color .15s, transform .05s, background .15s;
}
.btn:hover { border-color: var(--gold-dim); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: var(--cur-default), not-allowed; }
.btn.primary {
  border-color: var(--gold-dim);
  background: linear-gradient(180deg, #4a3618, #2c2011);
  color: var(--gold);
  font-weight: 600;
}
.btn.primary:hover { background: linear-gradient(180deg, #5c4320, #362715); }
.btn.small { padding: 4px 10px; font-size: 12px; }
/* Botao de painel aberto. */
.btn.on { border-color: var(--gold-dim); color: var(--gold); background: linear-gradient(180deg, #3b2b14, #241a0f); }
.btn.tiny { padding: 2px 7px; font-size: 11px; }

.tabs, .bag-tabs { display: flex; gap: 4px; }
.tab {
  flex: 1;
  border: 1px solid var(--line-soft);
  border-bottom-color: var(--line);
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
  cursor: var(--cur-default), pointer;
  font: inherit;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tab.active { color: var(--gold); background: var(--panel-2); border-color: var(--line); }

input, select {
  background: #120f0c;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--radius);
  font: inherit;
  width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--gold-dim); }
label { display: block; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
label input { margin-top: 4px; }
.error { color: var(--danger); min-height: 18px; font-size: 13px; margin: 6px 0 0; }

/* ---------------------------------------------------------- login */

#screen-auth { display: none; place-items: center; padding: 24px; }
#screen-auth.active { display: grid; }

.auth-box {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.logo {
  font-size: 34px;
  text-align: center;
  color: var(--gold);
  text-shadow: 0 2px 12px rgba(217, 164, 65, .35);
  margin-bottom: 0;
}
.logo span { color: var(--text); font-weight: 300; }
.tagline { text-align: center; color: var(--muted); margin: 4px 0 20px; font-size: 13px; }
.auth-box .tabs { margin-bottom: 16px; }
.auth-box .btn.primary { width: 100%; margin-top: 4px; }

.ranking-box { margin-top: 22px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.ranking-box ol { margin: 0; padding-left: 20px; font-size: 13px; color: var(--muted); }
.ranking-box li { margin: 2px 0; }
.ranking-box b { color: var(--text); }

/* ---------------------------------------------------------- criação */

#screen-create { display: none; place-items: center; padding: 24px; }
#screen-create.active { display: grid; }
.create-box {
  width: min(820px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px;
  box-shadow: var(--shadow);
}
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.class-card {
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: var(--radius);
  padding: 12px;
  cursor: var(--cur-default), pointer;
  transition: border-color .15s, background .15s;
}
.class-card:hover { border-color: var(--gold-dim); }
.class-card.selected { border-color: var(--gold); background: #2e2313; }
.class-card b { color: var(--gold); display: block; margin-bottom: 4px; }
.class-card small { color: var(--muted); font-size: 11px; display: block; }
.class-card .base { margin-top: 6px; font-size: 11px; color: var(--muted); }
.name-field { max-width: 320px; }
#create-submit { margin-top: 6px; }

/* ---------------------------------------------------------- topo do jogo */

.topbar {
  grid-area: 1 / 1 / 2 / 4;
  margin: 0 -10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px 0;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.identity { display: flex; gap: 10px; align-items: center; }
.portrait {
  width: 42px; height: 42px;
  border-radius: 4px;
  border: 1px solid var(--gold-dim);
  background: #241a10 center/cover no-repeat;
  display: grid; place-items: center;
  color: var(--gold); font-weight: 700;
}
.who b { color: var(--text); }
.lvl { font-size: 12px; color: var(--muted); }
.lvl b { color: var(--gold); }

.bar {
  position: relative;
  height: 16px;
  background: #0b0908;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  overflow: hidden;
}
.bar i { position: absolute; inset: 0 100% 0 0; display: block; transition: right .4s ease; }
.bar.hp i { background: linear-gradient(180deg, #d24a3e, #7d1f18); }
.bar.mp i { background: linear-gradient(180deg, #4b8fd6, #1d4877); }
.bar.xp i { background: linear-gradient(180deg, #e0be4e, #8a6a17); }
.bar span {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 11px; color: #fff;
  text-shadow: 0 1px 2px #000;
}

/* ---------------------------------------------------------- layout */

/* A HUD e uma grade por cima do mundo: as celulas do meio ficam vazias para
   o mouse chegar na cena. So os paineis recebem clique. */
.hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 0 10px 10px;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud > .topbar { pointer-events: none; }
#screen-game.hud-off .hud { display: none; }

.panel, .hud-box {
  background: rgba(18, 14, 10, .84);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  backdrop-filter: blur(3px);
  box-shadow: var(--shadow);
}
.window { max-height: 100%; overflow-y: auto; align-self: start; }
/* Barra de rolagem discreta, no tom da HUD. */
.window, .kill-feed, .modal-box { scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; }
.window::-webkit-scrollbar, .kill-feed::-webkit-scrollbar, .modal-box::-webkit-scrollbar { width: 8px; }
.window::-webkit-scrollbar-thumb, .kill-feed::-webkit-scrollbar-thumb, .modal-box::-webkit-scrollbar-thumb {
  background: #4a3718; border-radius: 4px;
}
.window::-webkit-scrollbar-track, .kill-feed::-webkit-scrollbar-track, .modal-box::-webkit-scrollbar-track { background: transparent; }
/* Personagem e mochila não entram na grade: são janelas no meio da tela
   (ficha.css). Aqui ficam só as janelas de atalho (menu e ranking). */
.window.closed { display: none; }
/* Aberta, a janela fica por cima do resto da HUD (em tela estreita ela sobrepoe). */
.window { z-index: 2; }

/* Com a HUD escondida, fica so o lembrete de como traze-la de volta. */
#screen-game.hud-off .arena::after {
  content: "H mostra a HUD";
  position: absolute; right: 12px; bottom: 10px;
  font-size: 11px; color: var(--muted);
  background: rgba(12, 9, 7, .6); border-radius: 4px; padding: 4px 8px;
  pointer-events: none;
}

/* ---------------------------------------------------------- equipamento */

.equip-grid {
  display: grid;
  /* Os slots nao passam de 80px: em coluna unica a grade de 3 colunas
     esticaria para a largura toda da tela. */
  grid-template-columns: repeat(3, minmax(0, 80px));
  justify-content: start;
  gap: 6px;
  margin-bottom: 14px;
}
.slot {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #100d0a;
  display: grid;
  place-items: center;
  position: relative;
  cursor: var(--cur-default), pointer;
  overflow: hidden;
}
.slot:hover { border-color: var(--gold-dim); }
.slot .tag {
  position: absolute; bottom: 2px; left: 0; right: 0;
  font-size: 9px; text-align: center; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
  pointer-events: none;
}
.slot img { max-width: 78%; max-height: 78%; image-rendering: pixelated; }
.slot.filled { background: #161109; }

.stat-block { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.stat-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.stat-head .points { color: var(--gold); }
.stat-list { display: grid; gap: 5px; }
.stat-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; font-size: 13px; }
.stat-row b { color: var(--text); min-width: 42px; text-align: right; }

.derived {
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  font-size: 12px;
}
.derived div { display: flex; justify-content: space-between; }
.derived span { color: var(--muted); }
.derived b { color: var(--text); }

/* ---------------------------------------------------------- caçada */

.hunt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hunt-head p { margin: 0; font-size: 12px; }

.arena {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #0b0907;
  overflow: hidden;
}
.world-viewport { position: absolute; inset: 0; }
.world-viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* ---------------------------------------------------------- monstro atual */

.fight {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  background: rgba(8, 6, 5, .62);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 10px 12px;
  min-height: 112px;
}
.fight.empty { display: block; color: var(--muted); font-size: 13px; min-height: 0; }

.foe-art {
  height: 96px;
  width: 116px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .8));
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.foe-art.none {
  display: grid; place-items: center;
  border: 1px dashed var(--line);
  border-radius: 5px;
  color: var(--muted); font-size: 11px;
}

.foe-name { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.foe-name .lvl { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 6px; }
.foe-name .boss { color: var(--gold); font-size: 11px; margin-left: 6px; letter-spacing: 1px; }
.foe-meta { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.bar.mob { height: 18px; }
.bar.mob i { background: linear-gradient(180deg, #e0603f, #7a2415); transition: right .5s linear; }
.rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.rate {
  background: rgba(10, 8, 6, .7);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 7px 9px;
}
.rate span { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.rate b { font-size: 16px; color: var(--gold); }

.kill-feed {
  height: 110px;
  overflow-y: auto;
  font-size: 12px;
  display: grid;
  align-content: start;
  gap: 2px;
  background: rgba(8, 6, 5, .55);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 7px 9px;
}
.kill-feed div { color: var(--muted); }
.kill-feed .good { color: var(--green); }
.kill-feed .rare { color: #5aa9ff; }
.kill-feed .epic { color: #c07af5; }
.kill-feed .legend { color: var(--gold); }
.kill-feed .bad { color: var(--danger); }

.session { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.session .rate { background: var(--panel-2); }

.drop-strip { display: flex; flex-wrap: wrap; gap: 5px; min-height: 40px; }
.drop-strip .cell { width: 38px; height: 38px; }

/* ---------------------------------------------------------- itens

   A mochila em si mora em ficha.css (virou janela grande). Aqui ficam só a
   célula de item e as linhas de recurso/loja, que a tira de drops também usa. */

.cell {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: #100d0a;
  display: grid;
  place-items: center;
  cursor: var(--cur-default), pointer;
  overflow: hidden;
}
.cell:hover { border-color: var(--gold-dim); }
.cell img { max-width: 82%; max-height: 82%; image-rendering: pixelated; }
.cell .qty {
  position: absolute; right: 2px; bottom: 1px;
  font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000;
}
.cell.r-bom { border-color: #3f7a3f; }
.cell.r-raro { border-color: #3a6ea8; box-shadow: inset 0 0 8px rgba(90, 169, 255, .22); }
.cell.r-epico { border-color: #7d4bb0; box-shadow: inset 0 0 10px rgba(192, 122, 245, .25); }
.cell.r-lendario { border-color: var(--gold); box-shadow: inset 0 0 12px rgba(255, 176, 46, .3); }

.shop-row, .stack-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--panel-2);
}
.shop-row .cell, .stack-row .cell { width: 40px; aspect-ratio: 1; }
.shop-row b, .stack-row b { font-size: 12px; display: block; }
.shop-row small, .stack-row small { color: var(--muted); font-size: 11px; }

/* Terceira coluna do recurso: quantidade e os botoes de venda na mesma linha,
   que a coluna e estreita e o <b> em bloco empurrava os botoes para baixo. */
.stack-row > div:last-child { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.stack-row > div:last-child b { display: inline; min-width: 26px; text-align: right; }

.bag-foot {
  margin-top: 10px;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
  display: grid;
  gap: 7px;
}
.switch { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; color: var(--text); }
.switch input { width: auto; }
.bag-foot select { font-size: 12px; padding: 5px 8px; }

/* ---------------------------------------------------------- modal */

.modal {
  position: fixed; inset: 0;
  background: rgba(4, 3, 2, .8);
  display: grid; place-items: center;
  padding: 20px;
  z-index: 50;
}
.modal-box {
  width: min(960px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.zone-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel-2);
  cursor: var(--cur-default), pointer;
  transition: border-color .15s, transform .08s;
}
.zone-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.zone-card.current { border-color: var(--gold); }
.zone-card.locked { opacity: .45; cursor: var(--cur-default), not-allowed; }
.zone-card .thumb { height: 84px; background: #0c0a08 center/cover no-repeat; }
.zone-card .body { padding: 8px 10px; }
.zone-card b { display: block; font-size: 13px; }
.zone-card small { color: var(--muted); font-size: 11px; }

/* ---------------------------------------------------------- tooltip e avisos */

.tooltip {
  position: fixed;
  z-index: 80;
  max-width: 280px;
  background: #15110d;
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  box-shadow: var(--shadow);
  pointer-events: none;
}
.tooltip h5 { margin: 0 0 4px; font-size: 13px; }
.tooltip .line { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); }
.tooltip .line b { color: var(--text); }
.tooltip .req { color: var(--danger); margin-top: 5px; }
.tooltip .hint { color: var(--muted); margin-top: 6px; font-style: italic; }

.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 90; }
.toast {
  background: #1b1610;
  border: 1px solid var(--gold-dim);
  border-left-width: 3px;
  border-radius: 5px;
  padding: 9px 14px;
  font-size: 13px;
  box-shadow: var(--shadow);
  animation: slide .25s ease;
}
.toast.bad { border-color: var(--danger); }
@keyframes slide { from { opacity: 0; transform: translateX(16px); } }

/* ---------------------------------------------------------- posições da HUD */

.zone-bar {
  grid-area: 2 / 1 / 3 / 2;
  align-self: start;
  display: grid;
  gap: 8px;
  width: 250px;
  padding: 10px 12px;
}
.zone-bar h3 { margin: 0; }
.zone-bar p { margin: 2px 0 0; font-size: 12px; }
.world-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.world-status {
  font-size: 11px;
  color: #cfc7b0;
  border-top: 1px solid var(--line-soft);
  padding-top: 7px;
}

.hud > .fight {
  grid-area: 2 / 3 / 3 / 4;
  align-self: start;
  width: 310px;
  min-height: 0;
  padding: 10px 12px;
  justify-self: end;
  backdrop-filter: blur(3px);
  box-shadow: var(--shadow);
}
.hud > .fight.empty { justify-self: end; width: auto; }

/* Canto de baixo à esquerda: registro em cima, conversa embaixo. */
.canto-esquerdo {
  grid-area: 4 / 1 / 5 / 2;
  display: grid;
  gap: 8px;
  align-content: end;
  pointer-events: none;
}
.canto-esquerdo > * { pointer-events: auto; }


.log-dock {
  width: 250px;
  display: grid;
  gap: 4px;
  padding: 8px 10px;
}
.log-dock h4 { margin: 4px 0 0; font-size: 10px; }
.drop-strip { min-height: 0; }

/* A barra de baixo mora em dock.css. */
.rate { min-width: 92px; background: rgba(10, 8, 6, .55); }
.hint { font-size: 10px; color: var(--muted); }
kbd {
  font: inherit; font-size: 10px;
  border: 1px solid var(--line); border-radius: 3px;
  padding: 0 3px; margin-left: 3px; color: var(--gold-dim);
}

/* ---------------------------------------------------------- telas estreitas */


@media (max-width: 980px) {
  .topbar { padding:6px 8px 0; gap:6px; }
  .zone-bar, .log-dock { width: 210px; }
}
@media (max-width: 760px) {
  /* Espaço curto: os paineis viram janelas por cima do mundo. */
  .hud { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .zone-bar { grid-area: 2 / 1 / 3 / 2; width: auto; }
  .hud > .fight { grid-area: 3 / 1 / 4 / 2; align-self: start; justify-self: end; width: min(280px, 70vw); }
  .canto-esquerdo { grid-area: 4 / 1 / 5 / 2; }
  .log-dock { width: auto; }
  /* A posição da barra de baixo fica toda em dock.css, que carrega depois. */
}
/* Em celular a barra de baixo e a conversa disputam a altura: o registro de
   abates sai e a conversa encolhe, para nada ficar por cima de nada. */
@media (max-width: 620px) {
  .log-dock { display: none; }
  .chat-dock { padding: 6px 8px; }
}

@media (max-width: 540px) {
  .topbar { position:relative; padding:4px 2px 0; }
}