/* Parchisi Copilot — instrumento tático de bolso.
   Identidade: dark profundo + dourado (você) vs vermelho-terra (ele) + verde-ação.
   Display: Chakra Petch (HUD). Corpo: IBM Plex Sans. Mobile-first: o loop dos 15s
   (dado → lance → aplicar) vive inteiro no dock fixo da zona do polegar. */
* { box-sizing: border-box; }
:root {
  --bg: #12141a;
  --bg2: #171a22;
  --card: #1d212b;
  --card2: #252a37;
  --line: #2f3645;
  --txt: #ece9e0;
  --dim: #98a1b3;
  --me: #f0b91d;
  --opp: #d8472b;
  --good: #19c37d;
  --warn: #e5a13c;
  --bad: #e25b4a;
  --disp: "Chakra Petch", "Segoe UI", sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(1100px 500px at 75% -10%, rgba(240,185,29,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(216,71,43,.05), transparent 55%),
    var(--bg);
  color: var(--txt);
  font: 14px/1.45 var(--body);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
/* grão sutil por cima de tudo (atmosfera, sem pesar) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- topo (sticky: o placar é o instrumento central) ---------- */
#topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--me);
  font-size: 15px;
  white-space: nowrap;
}
.brand span { color: var(--dim); font-weight: 500; margin-left: 4px; }
#winbar { flex: 1; display: flex; align-items: center; gap: 10px; max-width: 760px; }
.winlabel { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.winlabel i { font-style: normal; font-size: 11px; color: var(--dim); }
.winlabel b {
  font-family: var(--disp);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.winlabel.me b { color: var(--me); }
.winlabel.opp b { color: var(--opp); }
.bartrack {
  flex: 1;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(90deg, #58241a, #6e2e1e);
  outline: 1px solid var(--line);
}
#winfill {
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, #a8821a, var(--me));
  transition: width .45s ease;
}
#winfill.hot { box-shadow: 0 0 14px 2px rgba(240,185,29,.55); }
#engineinfo { font-size: 11px; color: var(--dim); white-space: nowrap; }

/* ---------- main ---------- */
main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(430px, 1fr) 430px;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}
#boardwrap { position: relative; display: flex; align-items: flex-start; justify-content: center; }
#board {
  width: min(100%, calc(100dvh - 120px));
  aspect-ratio: 1;
  user-select: none;
  touch-action: none;
  border-radius: 10px;
  box-shadow: 0 10px 36px rgba(0,0,0,.5);
}
#board.shake { animation: shake .25s; }
@keyframes shake {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
#board .piece { cursor: grab; }
#board .piece.selected circle:nth-child(2) { stroke: var(--good); stroke-width: .12px; }
#board .pulse { animation: pulse 1.1s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse { 50% { opacity: .25; } }
#banner {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bad);
  color: #fff;
  padding: 5px 14px;
  border-radius: 7px;
  font-size: 13px;
  max-width: 92%;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  z-index: 5;
}

/* ---------- painel ---------- */
#panel { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.sechead {
  font-family: var(--disp);
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--dim);
  margin-bottom: 8px;
  font-weight: 700;
}
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row + .row { margin-top: 8px; }
.row.small { font-size: 12.5px; color: var(--dim); }
.spacer { flex: 1; }
.hint { font-size: 11.5px; }
.dim { color: var(--dim); }
.warn { color: var(--warn); font-weight: 600; }
.note {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(229,161,60,.12);
  border: 1px solid rgba(229,161,60,.4);
  font-size: 13px;
}

button, select, input, summary {
  background: var(--card2);
  color: var(--txt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  cursor: pointer;
}
summary { display: inline-block; border: 0; background: none; padding: 2px 0; }
button:active { transform: translateY(1px); }
button:hover { border-color: var(--dim); }
input[type="number"] { width: 72px; cursor: text; }

/* ---------- dock (dado + melhor lance) ---------- */
#dock {
  background: linear-gradient(180deg, var(--card), var(--bg2));
  border: 1px solid var(--line);
}
#dockmove {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
  padding: 10px 12px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  color: var(--good);
  background: rgba(25,195,125,.10);
  border: 1px solid var(--good);
  border-radius: 9px;
  animation: dockin .25s ease;
}
#dockmove small { display: block; font-family: var(--body); font-weight: 400; font-size: 11px; color: var(--dim); }
#dockmove .pct { float: right; font-size: 18px; }
@keyframes dockin { from { transform: translateY(6px); opacity: 0; } }
.dockrow { display: flex; gap: 6px; align-items: center; }
#dicebtns { display: flex; gap: 6px; flex: 1; }
#dicebtns button {
  flex: 1;
  height: 48px;
  font-family: var(--disp);
  font-size: 21px;
  font-weight: 700;
  border-radius: 10px;
  padding: 0;
}
#dicebtns button.cur { background: var(--good); color: #0c2419; border-color: var(--good); }
#btn-cleardice { height: 48px; width: 44px; font-size: 18px; border-radius: 10px; }
.dockseq { display: flex; align-items: center; gap: 8px; margin-top: 7px; min-height: 22px; font-size: 12px; }
.chips { display: inline-flex; gap: 4px; }
.chips .chip {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 24px;
  text-align: center;
  padding: 1px 6px;
  font-family: var(--disp);
  font-weight: 700;
}
.chips .chip.six { color: var(--warn); border-color: var(--warn); }
.chips .chip.cur { border-color: var(--good); color: var(--good); }

/* ---------- análise ---------- */
#moves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#moves li {
  padding: 9px 11px;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
}
#moves li:hover { border-color: var(--dim); }
#moves li.best { border-color: var(--good); background: rgba(25,195,125,.10); animation: dockin .25s ease; }
#moves li.best .mv { font-family: var(--disp); font-size: 15px; font-weight: 700; color: var(--good); }
#moves li.win { border-color: var(--me); background: rgba(240,185,29,.13); }
#moves .mv { flex: 1; }
#moves .pct { font-family: var(--disp); font-weight: 700; font-variant-numeric: tabular-nums; }
#moves .delta { color: var(--bad); font-size: 12px; min-width: 44px; text-align: right; }
#searchinfo { font-weight: 400; letter-spacing: 0; }
#pvbox { margin-top: 8px; font-size: 13px; }
#pvbox summary { color: var(--dim); }
#pv { margin: 6px 0 0; padding-left: 18px; }
#pv li { margin-bottom: 3px; }

/* ---------- widgets ---------- */
.facegrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 6px; }
.facegrid .face {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 4px;
  text-align: center;
  font-size: 12px;
}
.facegrid .face b { display: block; font-family: var(--disp); font-size: 15px; }
.facegrid .face.good { border-color: var(--good); }
.facegrid .face.bad { border-color: var(--bad); }
#threats.danger { color: var(--bad); font-weight: 700; }
#threats .facelist { font-family: var(--disp); font-size: 22px; font-weight: 700; letter-spacing: 5px; }
.opprow { display: flex; gap: 8px; padding: 3px 0; font-size: 13px; border-bottom: 1px dashed var(--line); }
.opprow:last-child { border-bottom: 0; }
.opprow .d { font-family: var(--disp); font-weight: 700; min-width: 18px; color: var(--opp); }
.opprow .pct { min-width: 52px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

footer {
  padding: 6px 16px calc(6px + env(safe-area-inset-bottom));
  font-size: 12px;
  color: var(--dim);
  background: var(--bg2);
  border-top: 1px solid var(--line);
}
footer b { color: var(--txt); }

/* =================== MOBILE (coluna + dock no polegar) =================== */
@media (max-width: 900px) {
  main {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 8px 8px calc(150px + env(safe-area-inset-bottom)); /* espaço pro dock fixo */
  }
  #topbar { padding: 6px 10px; gap: 10px; }
  .brand { display: none; }            /* o placar É a marca no celular */
  #engineinfo { display: none; }
  .winlabel b { font-size: 22px; }
  #board {
    width: 100%;
    max-width: min(100vw - 16px, 58dvh);
    margin: 0 auto;
  }
  #boardwrap { width: 100%; }

  /* dock fixo na zona do polegar */
  #dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px rgba(0,0,0,.5);
  }
  #dicebtns button { height: 52px; font-size: 23px; }
  #btn-cleardice { height: 52px; }
  footer { display: none; }
}