/* Tema: mar à noite + pergaminho. Cores como variáveis para trocar fácil. */
:root {
  --sea-0: #0b1626;
  --sea-1: #12233a;
  --sea-2: #1a3150;
  --line: #2b4a70;
  --ink: #e9eef5;
  --muted: #93a6bf;
  --gold: #e8b64c;
  --gold-2: #f5d27e;
  --red: #e0605a;
  --green: #5fc48a;
  --blue: #5aa9e6;
  --paper: #efe1bf;
  --paper-ink: #3b2a17;
  --radius: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--sea-0); }
body {
  background: radial-gradient(ellipse at top, var(--sea-2), var(--sea-0) 70%) fixed;
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.45;
}
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; }
h3 { margin-top: 1.2em; color: var(--gold-2); font-size: 1.05rem; }
p { margin: .3em 0; }
code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.pos { color: var(--green); }
.neg { color: var(--red); }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.25);
}
.brand { color: var(--gold); font-weight: 700; text-decoration: none; font-size: 1.1rem; }
#app { max-width: 1200px; margin: 0 auto; padding: 20px 16px 80px; }

/* ---------- botões ---------- */
.btn {
  background: var(--sea-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 14px; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover:not(:disabled) { border-color: var(--gold); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--gold); color: #2a1d05; border-color: var(--gold); font-weight: 700; }
.btn.primary:hover:not(:disabled) { background: var(--gold-2); }
.btn.ghost { background: transparent; }
.btn.small { padding: 3px 9px; font-size: .85rem; }
.btn.big { padding: 12px 22px; font-size: 1.05rem; }

/* ---------- tela inicial ---------- */
.title-screen { text-align: center; padding-top: 6vh; }
.logo .jolly { font-size: 5rem; color: var(--gold); line-height: 1; }
.logo h1 { font-size: 2.6rem; letter-spacing: .02em; }
.title-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 30px 0; }
.slots { max-width: 640px; margin: 0 auto; text-align: left; }
.slot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: rgba(0,0,0,.2); }

/* ---------- criação ---------- */
.creation-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.stepper { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.stepper li {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 20px;
  cursor: pointer; color: var(--muted); border: 1px solid transparent;
}
.stepper li .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sea-2); font-size: .8rem; }
.stepper li.active { color: var(--ink); border-color: var(--gold); }
.stepper li.active .num { background: var(--gold); color: #2a1d05; }
.stepper li.done .num { background: var(--green); color: #052; }

.creation-body { display: grid; grid-template-columns: 1fr 280px; gap: 18px; align-items: start; }
.panel { background: rgba(10, 22, 40, .7); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.summary { position: sticky; top: 12px; background: var(--paper); color: var(--paper-ink); border-radius: var(--radius); padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.summary h3 { color: var(--paper-ink); margin-top: 0; }
.summary .muted { color: #7a6448; }
.summary .neg { color: #b02a22; }
.summary ul { padding-left: 18px; margin: 4px 0; font-size: .85rem; }
.nav { display: flex; justify-content: space-between; margin-top: 16px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.kv dt { color: var(--muted); font-size: .85rem; }
.summary .kv dt { color: #7a6448; }
.kv dd { margin: 0; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field > span { font-size: .85rem; color: var(--muted); }
input[type=text], input[type=search], input[type=number], select {
  background: var(--sea-0); color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font: inherit; width: 100%;
}
input[type=range] { width: 100%; accent-color: var(--gold); }
.row { display: flex; gap: 8px; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.seg { display: flex; gap: 0; }
.seg-btn { flex: 1; padding: 8px; background: var(--sea-0); color: var(--muted); border: 1px solid var(--line); cursor: pointer; font: inherit; }
.seg-btn:first-child { border-radius: 6px 0 0 6px; }
.seg-btn:last-child { border-radius: 0 6px 6px 0; }
.seg-btn.on { background: var(--gold); color: #2a1d05; border-color: var(--gold); font-weight: 700; }

.callout { border-left: 3px solid var(--gold); background: rgba(232,182,76,.08); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 12px 0; }
.callout.warn { border-color: var(--red); background: rgba(224,96,90,.1); }
.callout.mystery { border-color: #a57be0; background: rgba(165,123,224,.1); }
.advanced { margin-top: 18px; color: var(--muted); }
.advanced summary { cursor: pointer; }

/* ---------- cartões ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cards.compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card {
  text-align: left; background: var(--sea-1); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
}
div.card { cursor: default; }
.card:hover:not(:disabled) { border-color: var(--gold); }
.card.selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; background: #1d3049; }
.card.locked { opacity: .55; cursor: not-allowed; }
.card.mystery { border-style: dashed; color: var(--muted); }
.card.secret { border-color: #a57be0; box-shadow: 0 0 0 1px #a57be0 inset; }
.card.dead { opacity: .65; }
.card p { margin: 0; font-size: .9rem; color: #c7d3e3; }
.card-title { font-weight: 700; display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.card-sub { font-size: .8rem; color: var(--muted); }
.cost { font-size: .8rem; padding: 1px 7px; border-radius: 10px; background: rgba(255,255,255,.08); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--muted); }
.dots { letter-spacing: 1px; color: var(--gold); }
.dots small { color: var(--muted); letter-spacing: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: .72rem; padding: 2px 7px; border-radius: 10px; background: rgba(255,255,255,.07); }
.chip.good { color: var(--green); background: rgba(95,196,138,.12); }
.chip.bad { color: var(--red); background: rgba(224,96,90,.12); }
.chip.style { color: var(--gold); background: rgba(232,182,76,.12); margin-left: 6px; }
.weights { display: grid; gap: 2px; }
.weights .w { display: grid; grid-template-columns: 34px 1fr 34px; gap: 6px; align-items: center; font-size: .75rem; }
.techs { font-size: .78rem; display: flex; flex-wrap: wrap; gap: 4px; }
.tech { background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 6px; }

/* ---------- atributos ---------- */
.points { font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; color: var(--gold); }
.points.zero { color: var(--green); }
.points.neg { color: var(--red); }
.attrs { display: grid; gap: 8px; }
.attr-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 8px 10px; background: var(--sea-1); border-radius: 8px; border: 1px solid var(--line);
}
.attr-row .bar { grid-column: 1 / -1; }
.attr-row.locked { opacity: .7; }
.attr-name small { display: block; color: var(--muted); font-size: .78rem; }
.attr-ctrl { display: flex; align-items: center; gap: 4px; }
.attr-val { min-width: 32px; text-align: center; font-weight: 700; font-size: 1.1rem; }
.attr-bonus { min-width: 30px; font-size: .85rem; text-align: right; }
.attr-total { min-width: 40px; font-weight: 700; color: var(--gold-2); font-size: 1.1rem; text-align: right; }
.grade { font-size: .8rem; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.08); margin-left: 8px; }
.grade-S { color: #ffd76a; background: rgba(255,215,106,.15); }
.grade-A { color: var(--green); }
.grade-B { color: var(--blue); }
.grade-C { color: var(--muted); }
.grade-D { color: var(--red); }

.bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--gold); border-radius: 4px; }
.bar.hp .bar-fill { background: var(--green); }
.bar.joy .bar-fill { background: var(--blue); }
.bar.stress .bar-fill { background: #b07be0; }
.bar.heat .bar-fill { background: var(--red); }
.bar.fame .bar-fill { background: var(--gold); }
.bar.intel .bar-fill { background: var(--blue); }
.bar.gov .bar-fill { background: #a57be0; }

/* ---------- poder ---------- */
.power-mini { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #b49a6e; text-align: center; }
.doriki { font-size: 2rem; font-weight: 800; color: var(--gold); line-height: 1; }
.summary .doriki { color: #8a5a00; }
.doriki small { font-size: .9rem; font-weight: 500; }
.doriki.big { font-size: 3.2rem; }
.tier { font-weight: 600; }
.pending { margin-top: 12px; }
.seed { margin-top: 12px; }
.review .lead { font-size: 1.1rem; }
.attr-mini { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.attr-mini div { background: var(--sea-1); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; text-align: center; min-width: 58px; }
.attr-mini small { display: block; color: var(--muted); font-size: .7rem; }

/* ---------- ficha ---------- */
.sheet-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.sheet-head h1 { font-size: 2rem; }
.head-power { text-align: right; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: -1px; }
.tab { background: transparent; border: 1px solid transparent; border-bottom: none; color: var(--muted); padding: 8px 14px; cursor: pointer; font: inherit; border-radius: 8px 8px 0 0; }
.tab.on { background: rgba(10, 22, 40, .7); border-color: var(--line); color: var(--ink); }
.sheet .panel { border-top-left-radius: 0; }
.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.toggle { color: var(--muted); font-size: .9rem; cursor: pointer; }
.box { background: var(--sea-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.box h3:first-child { margin-top: 0; }
.status-row { display: grid; grid-template-columns: 140px 1fr 36px; gap: 8px; align-items: center; margin: 6px 0; font-size: .9rem; }
.status-row b { text-align: right; }
.money { font-size: 1.4rem; font-weight: 700; color: var(--gold); margin: 10px 0; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li { padding: 4px 0; }
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.skill { display: grid; grid-template-columns: 1fr 90px 30px; gap: 8px; align-items: center; font-size: .9rem; }
.skill b { text-align: right; }
.power-box { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: center; background: var(--sea-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.formula div { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.derived { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.stat { background: var(--sea-1); border: 1px solid var(--line); border-radius: 8px; padding: 8px; text-align: center; }
.stat small { display: block; color: var(--muted); font-size: .75rem; }
.stat b { font-size: 1.3rem; }
.techs-list li { font-size: .82rem; }

/* cartaz de procurado */
.wanted-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.poster {
  background: var(--paper); color: var(--paper-ink); padding: 16px; text-align: center;
  font-family: Georgia, "Times New Roman", serif; box-shadow: 0 8px 24px rgba(0,0,0,.5); transform: rotate(-1.5deg);
  border: 1px solid #c9b48a;
}
.poster.blank { filter: grayscale(.6) opacity(.75); }
.poster-title { font-size: 2.6rem; font-weight: 900; letter-spacing: .08em; }
.poster-photo { height: 150px; background: #d8c69f; border: 3px solid var(--paper-ink); display: grid; place-items: center; font-size: 3rem; margin: 6px 0; }
.poster-doa { font-weight: 700; letter-spacing: .2em; font-size: .85rem; }
.poster-name { font-size: 1.2rem; font-weight: 900; margin-top: 6px; }
.poster-bounty { font-size: 1.5rem; font-weight: 900; margin: 4px 0; }
.poster-marine { font-size: .7rem; letter-spacing: .4em; opacity: .7; }

.log { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.log li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 8px 0 8px 14px; position: relative; }
.log li::before { content: ''; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.log-when { color: var(--muted); font-size: .85rem; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0;
  background: var(--paper); color: var(--paper-ink); padding: 10px 18px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: all .25s; z-index: 10; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .creation-body { grid-template-columns: 1fr; }
  .summary { position: static; order: -1; }
  .power-box, .wanted-wrap { grid-template-columns: 1fr; }
  .poster { max-width: 280px; margin: 0 auto; }
  .stepper .lbl { display: none; }
  .stepper li.active .lbl { display: inline; }
}
@media (max-width: 560px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .attr-row { grid-template-columns: 1fr; }
  .log li { grid-template-columns: 1fr; gap: 2px; }
}

/* ======================= v0.2: combate e vida ======================= */
.bar { position: relative; }
.bar-cap { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--red); }
.bar.stamina .bar-fill { background: #e8c35a; }
.bar.spirit .bar-fill { background: #a57be0; }
.bar.mastery .bar-fill { background: var(--gold); }
.head-health { width: 260px; max-width: 100%; }
.head-health .status-row { grid-template-columns: 60px 1fr 36px; margin: 2px 0; }
.row.wrap { flex-wrap: wrap; }
.tag { font-size: .72rem; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.08); margin-left: 8px; vertical-align: middle; font-weight: 600; }
.tag.gold { background: var(--gold); color: #2a1d05; }
.tag.danger { background: var(--red); color: #fff; margin-left: 0; }
.chip.status { color: #f0b37e; background: rgba(240,179,126,.12); }
.resources { margin-top: 10px; }

.slots-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 8px 0 4px; }
.slot-box { border: 1px dashed var(--line); border-radius: 8px; padding: 8px; min-height: 52px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.slot-box.filled { border-style: solid; border-color: var(--gold); background: rgba(232,182,76,.08); }
.slot-box small { color: var(--muted); font-size: .72rem; }
.style-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; background: rgba(0,0,0,.15); }
.style-block.primary { border-color: var(--gold); }
.style-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
.style-head > div:first-child { flex: 1; }
.style-head h4 { margin: 0 0 2px; }
.tech-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 8px; }
.tech-card .btn { align-self: flex-start; margin-top: 4px; }
.tech-stats { font-size: .75rem; color: var(--gold-2); }
.card.injury { border-color: var(--red); }
.card.injury.permanent { background: #2a1820; }
.glossary { margin-top: 18px; }
.glossary summary { cursor: pointer; color: var(--gold-2); font-weight: 600; }
.status-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 16px; margin-top: 8px; }
.status-item { font-size: .9rem; }
.status-icon { display: inline-block; width: 24px; }

.live-grid { align-items: start; }
.activity-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 12px; }
.activity-cards .card p { font-size: .8rem; }
.callout.report ul li { padding: 2px 0; }
.card.encounter { margin-top: 12px; border-color: var(--gold); }
.card.encounter .read { font-size: .95rem; }

.combat-screen { max-width: 900px; margin: 0 auto; }
.combat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.fighters { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.fighter { background: var(--sea-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.fighter.me { border-color: var(--blue); }
.fighter.foe { border-color: var(--red); }
.fighter-name { font-weight: 700; margin-bottom: 6px; }
.fighter .res { display: grid; grid-template-columns: 62px 1fr 64px; gap: 8px; align-items: center; font-size: .85rem; margin: 4px 0; }
.fighter .res b { text-align: right; }
.fighter .statuses { margin-top: 6px; min-height: 20px; }
.vs { align-self: center; font-weight: 900; color: var(--gold); font-size: 1.3rem; }
.combat-log { background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 12px 0; height: 260px; overflow-y: auto; font-size: .9rem; }
.log-line { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.log-line .rnd { display: inline-block; min-width: 24px; color: var(--muted); font-size: .75rem; }
.log-line.me { color: #bfe0ff; }
.log-line.foe { color: #ffc9c4; }
.log-line.dot { color: #f0b37e; font-size: .85rem; }
.log-line.warn { color: var(--gold); }
.log-line.epic { color: #d9b8ff; font-weight: 700; }
.log-line.end { color: var(--gold-2); font-weight: 700; }
.log-line.intro { color: var(--muted); font-style: italic; }
.controls { background: rgba(10,22,40,.7); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.ctrl-group { margin-bottom: 8px; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.btn.action { flex-direction: column; align-items: flex-start; gap: 0; min-width: 120px; }
.btn.action small { font-size: .7rem; color: var(--muted); }
.btn.action.tech { border-color: rgba(232,182,76,.5); }
.btn.action.haki { border-color: #a57be0; }
.controls.end h3 { margin-top: 0; }
.decision { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.decision.fates label { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.decision.fates label.off { opacity: 0.55; }
.decision.fates label.rob { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line, rgba(127,127,127,.3)); }
.report-list li { padding: 4px 0; }

.death-screen { text-align: center; max-width: 760px; margin: 0 auto; padding-top: 4vh; }
.death-screen .grave { font-size: 4rem; color: var(--muted); }
.death-screen .cause { font-size: 1.15rem; margin: 10px 0 18px; }
.death-screen .log { text-align: left; }

@media (max-width: 700px) {
  .fighters { grid-template-columns: 1fr; }
  .vs { display: none; }
  .slots-row { grid-template-columns: repeat(3, 1fr); }
  .btn.action { min-width: calc(50% - 6px); }
}

/* =====================================================================
   v0.3: barra de status fixa, aba Ilha, mapa, eventos, Akuma no Mi
   ===================================================================== */
.hud-wrap { position: sticky; top: 0; z-index: 20; background: linear-gradient(var(--sea-0), rgba(11,22,38,.96)); padding-top: 8px; margin: -8px -4px 0; padding-left: 4px; padding-right: 4px; }
.hud { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(18,35,58,.95); padding: 8px 12px; margin-bottom: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.hud-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hud-name { font-size: 1.15rem; color: var(--gold-2); }
.hud-power b { font-size: 1.3rem; color: var(--gold); }
.hud-power small { color: var(--muted); }
.hud-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 6px; }
.hud-money { font-weight: 700; color: var(--gold); min-width: 90px; }
.hud-meter { display: grid; grid-template-columns: auto auto 70px 26px; align-items: center; gap: 5px; font-size: .82rem; }
.hud-meter .hud-ico { opacity: .8; }
.hud-meter .hud-lbl { color: var(--muted); }
.hud-meter b { text-align: right; }
.hud-wanted { font-size: .8rem; color: var(--red); }
.hud-alert { font-size: .82rem; color: #2a1d05; background: var(--gold); border-radius: 12px; padding: 1px 10px; cursor: pointer; font-weight: 700; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .65; } }
.hud-sub { justify-content: space-between; border-top: 1px dashed rgba(255,255,255,.08); padding-top: 6px; }
.hud-attrs { display: flex; flex-wrap: wrap; gap: 4px; }
.hud-attr { font-size: .78rem; background: rgba(255,255,255,.05); border-radius: 6px; padding: 1px 6px; }
.hud-attr small { color: var(--muted); margin-right: 3px; font-size: .7rem; }
.hud-styles { display: flex; flex-wrap: wrap; gap: 4px; }
.hud-style { font-size: .76rem; border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; color: var(--muted); }
.hud-style.prim { color: var(--gold-2); border-color: rgba(232,182,76,.5); }
.hud-style.fruit { color: #e58be0; border-color: rgba(229,139,224,.45); }
.hud-style.haki { color: #b9a0ff; border-color: rgba(165,123,224,.5); }
.sheet .tabs { margin-bottom: 0; }

/* evento de vida */
.event-card { border: 2px solid var(--gold); background: rgba(232,182,76,.1); border-radius: var(--radius); padding: 12px 16px; margin: 4px 0 12px; }
.event-title { font-weight: 700; color: var(--gold-2); font-size: 1.05rem; margin-bottom: 4px; }
.event-card .row { margin-top: 10px; }
.row.wrap { flex-wrap: wrap; }
.fruit-held { border-color: #e58be0; background: rgba(229,139,224,.08); }

/* ilha */
.island-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.island-head > div:first-child { flex: 1 1 360px; }
.island-stats { display: grid; grid-template-columns: auto; gap: 2px; min-width: 170px; color: var(--gold-2); }
.place-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.place-btn { display: inline-flex; gap: 6px; align-items: center; background: var(--sea-1); border: 1px solid var(--line); color: var(--ink); border-radius: 18px; padding: 5px 12px; cursor: pointer; font: inherit; }
.place-btn.on { border-color: var(--gold); background: rgba(232,182,76,.15); color: var(--gold-2); }
.place-panel { min-height: 120px; }
.port-grid { align-items: start; }
.sea-map { width: 100%; aspect-ratio: 1 / 1; background: radial-gradient(circle at 40% 40%, #1d3e66, #0d1d33); border: 1px solid var(--line); border-radius: var(--radius); }
.sea-map .dot { cursor: pointer; stroke: #0b1626; stroke-width: .4; }
.sea-map .dot.here { fill: var(--gold); }
.sea-map .dot.route-ok { fill: var(--blue); }
.sea-map .dot.far { fill: #6b7a8f; }
.sea-map .dot.sel { stroke: #fff; stroke-width: .7; }
.sea-map .lbl { font-size: 2.6px; fill: #c9d6e6; cursor: pointer; paint-order: stroke; stroke: #0b1626; stroke-width: .5px; }
.sea-map .lbl.here { fill: var(--gold-2); font-weight: 700; }
.sea-map .lbl.far { fill: #8a97a8; }
.sea-map .route { stroke: rgba(90,169,230,.35); stroke-width: .35; stroke-dasharray: 1 1; }
.sea-map .range { fill: rgba(95,196,138,.06); stroke: rgba(95,196,138,.4); stroke-width: .3; stroke-dasharray: .8 .8; }
.sea-map .map-title { font-size: 3.4px; fill: var(--gold); letter-spacing: .6px; font-weight: 700; }
.sea-map .map-note { font-size: 2.4px; fill: var(--muted); text-anchor: end; }
.dest-list { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow: auto; padding-right: 4px; }
.dest-row { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--sea-1); display: flex; flex-direction: column; gap: 4px; }
.dest-row.on { border-color: var(--gold); }

/* Akuma no Mi */
.fruit-block { border: 1px solid rgba(229,139,224,.45); border-radius: var(--radius); padding: 12px; background: rgba(229,139,224,.05); }
.slot-box.fruit.filled { border-color: #e58be0; }
.tech-card.fruit.selected { border-color: #e58be0; }
.btn.action.fruit { border-color: rgba(229,139,224,.6); }

@media (max-width: 700px) {
  .hud { padding: 6px 8px; }
  .hud-meter { grid-template-columns: auto 50px 22px; }
  .hud-meter .hud-lbl { display: none; }
  .hud-sub { flex-direction: column; align-items: flex-start; }
  .port-grid { grid-template-columns: 1fr; }
}

/* ===================================================== v0.4: relações e tripulação */
.hud-top { align-items: center; }
.hud-right { display: flex; align-items: center; gap: 12px; }
.hud-advance { display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 6px 14px; min-width: 150px; }
.hud-advance span { font-weight: 700; }
.hud-advance small { font-size: .7rem; opacity: .8; font-weight: 400; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-style.crew { color: #ff9b8a; border-color: rgba(224,96,90,.5); }

.live-main, .live-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.live-side > .callout, .live-side > .event-card { margin: 0; }

.social-head p { margin: 4px 0 0; }
.people-grid { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr); }
.people-list { display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow: auto; padding-right: 4px; }
.people-group h4 { margin: 4px 0; color: var(--gold-2); font-size: .9rem; }
.person-row { display: grid; grid-template-columns: 1fr 90px; grid-template-rows: auto auto; gap: 0 8px; width: 100%; text-align: left;
  background: var(--sea-1); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; margin-bottom: 4px; color: var(--ink); cursor: pointer; font: inherit; }
.person-row.on { border-color: var(--gold); background: var(--sea-2); }
.person-row.dead { opacity: .55; }
.person-row .pr-name { font-weight: 600; }
.person-row .pr-rel { grid-column: 1; }
.person-row .pr-aff { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 4px; }
.person-row .pr-aff .bar { flex: 1; }
.person-row .pr-aff small { width: 22px; text-align: right; }
.person-card .card-sub { margin-bottom: 4px; }
.rel-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.recruit-reqs { margin-top: 8px; border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px; }
.recruit-reqs summary { cursor: pointer; font-weight: 600; font-size: .88rem; }
.recruit-reqs li.pos { color: var(--green); }
.recruit-reqs li.neg { color: var(--muted); }
.people-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.linklike { background: none; border: 0; color: var(--gold-2); cursor: pointer; padding: 0; font: inherit; font-weight: 600; }

.crew-head { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; }
.crew-head h2 { margin: 0; }
.crew-head .row { margin-top: 6px; }
.crew-flag { font-size: 3rem; line-height: 1; width: 72px; height: 72px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 12px; background: #0a0f18; }
.role-cards select, .crew-tab select { width: 100%; }
.role-cards .card select { margin: 4px 0; background: var(--sea-0); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; }
.card select { background: var(--sea-0); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: .85rem; }
.chip { display: inline-block; font-size: .78rem; border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; }
.chip.neg { color: var(--red); border-color: rgba(224,96,90,.5); }
.found-crew .input, .found-crew input { width: 100%; max-width: 360px; background: var(--sea-0); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; }
.flag-pick .btn { font-size: 1.1rem; }
.crew-bounty { margin-top: 12px; }

@media (max-width: 700px) {
  .hud-top { align-items: flex-start; }
  /* no celular a barra rola junto e o botão do mês fica fixo embaixo, sempre no mesmo lugar */
  .hud-wrap { position: static; }
  .hud-advance { position: fixed; left: 16px; right: 16px; bottom: 12px; z-index: 40; min-width: 0; box-shadow: 0 6px 20px rgba(0,0,0,.55); }
  .sheet { padding-bottom: 84px; }
  .live-grid { display: flex; flex-direction: column-reverse; }
  .people-grid { grid-template-columns: 1fr; }
  .people-list { max-height: none; }
  .crew-flag { width: 56px; height: 56px; font-size: 2.2rem; }
}

/* ===================================================================== v0.5: pirataria */
/* janelas na página (ui/modal.js) */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(4, 10, 20, .7);
  display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .15s;
}
.modal-backdrop.show { opacity: 1; }
.modal {
  background: var(--sea-1); border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 18px 20px; width: min(440px, 100%); box-shadow: 0 12px 40px rgba(0,0,0,.5);
  transform: translateY(8px); transition: transform .15s;
}
.modal-backdrop.show .modal { transform: none; }
.modal-title { color: var(--gold-2); margin-top: 0; }
.modal .input { width: 100%; margin-top: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.btn.danger:hover:not(:disabled) { filter: brightness(1.1); }
/* v0.11: escolha de evento arriscada (pede confirmação) */
.btn.risky.warn { border-color: rgba(232, 185, 74, .6); }
.btn.risky.danger { background: transparent; color: var(--ink); font-weight: 600; border-color: rgba(220, 80, 70, .7); }
.btn.risky .risk-ico { color: var(--gold-2); }
.btn.risky.danger .risk-ico { color: var(--red); }

/* luta em grupo */
.fighters.group .side { display: flex; flex-direction: column; gap: 8px; }
.fighter.compact { padding: 8px 10px; }
.fighter.compact .res { grid-template-columns: 54px 1fr 58px; margin: 2px 0; }
.fighter.compact .statuses { min-height: 0; margin-top: 4px; }
.fighter.ally { border-color: #3d6f9e; }
.fighter.out { opacity: .45; filter: grayscale(.7); }
.fighter.pickable { cursor: pointer; }
.fighter.pickable:hover { box-shadow: 0 0 0 1px var(--red) inset; }
.fighter.targeted { box-shadow: 0 0 0 2px var(--gold) inset; }
.log-line.ally { color: #a9d3f5; }
.center { text-align: center; }

/* saque no mar (ui/raidPanel.js) */
.raid-card { border-color: var(--gold); }
.raid-card .naval .status-row span:first-child { min-width: 90px; }
.distance { display: flex; align-items: center; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.dist-track { display: inline-flex; gap: 4px; margin-left: 6px; }
.dist-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sea-2); color: var(--muted); font-size: .8rem; }
.dist-dot.on { background: var(--gold); color: #2a1d05; font-weight: 700; }
.naval-log { background: rgba(0,0,0,.2); border-radius: 8px; padding: 6px 10px; margin: 8px 0; font-size: .88rem; max-height: 210px; overflow-y: auto; }
.naval-log .rnd { display: inline-block; min-width: 20px; color: var(--muted); font-size: .75rem; }
.naval-actions { margin-top: 8px; }
.naval-actions .btn small { opacity: .75; }

/* estaleiro */
.pips { display: inline-flex; gap: 3px; }
.pip { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold); }
.pip.on { background: var(--gold); }

/* procurado */
.poster.world { box-shadow: 0 0 0 3px var(--red), 0 8px 30px rgba(0,0,0,.4); }
.reach { display: inline-block; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.reach.regional { background: rgba(90,169,230,.15); color: var(--blue); }
.reach.world { background: rgba(224,96,90,.18); color: var(--red); }
.ladder ol li { padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.ladder li.future { opacity: .5; }
.ladder li.on b { color: var(--gold-2); }
.ranking ol li { display: grid; grid-template-columns: 28px 1fr auto; gap: 6px; align-items: baseline; padding: 3px 0; }
.ranking ol li small { grid-column: 2 / 4; }
.ranking li.me { color: var(--gold-2); font-weight: 700; }
.ranking .rank { color: var(--muted); }
.bribe { margin-top: 12px; }
.hud-wanted.world { color: var(--red); }

/* Valores de berries grandes não quebram linha dentro dos blocos de números */
.crew-bounty .derived { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.crew-bounty .derived .stat b { white-space: nowrap; }

/* =====================================================================
   v0.6: tela de luta compacta (cabe sem rolar), escala de inimigos, diário
   ===================================================================== */
.combat-screen.v6 { max-width: 1100px; }
.combat-screen.v6 .combat-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; margin-bottom: 8px; }
.combat-screen.v6 .target-hint { text-align: center; }
.combat-screen.v6 .fighters.duo { grid-template-columns: 1fr auto 1fr; gap: 10px; }
.combat-screen.v6 .vs { font-size: 1rem; }
.combat-screen.v6 .fighter { padding: 8px 10px; }
.combat-screen.v6 .fighter-name { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 4px; font-size: .92rem; }
.combat-screen.v6 .fighter-name .fn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combat-screen.v6 .statuses { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; min-height: 0; margin: 0; }
.combat-screen.v6 .st { font-size: .8rem; padding: 0 4px; border-radius: 6px; background: rgba(255,255,255,.06); cursor: help; }
.combat-screen.v6 .st.good { box-shadow: inset 0 0 0 1px rgba(95,196,138,.5); }
.combat-screen.v6 .st.bad { box-shadow: inset 0 0 0 1px rgba(224,96,90,.5); }
.hpbar { position: relative; height: 18px; border-radius: 6px; background: rgba(0,0,0,.4); overflow: hidden; }
.hpbar .hp-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3aa86c, var(--green)); transition: width .25s; }
.hpbar.low .hp-fill { background: linear-gradient(90deg, #b8423c, var(--red)); }
.hpbar span { position: relative; display: block; text-align: center; font-size: .75rem; font-weight: 700; line-height: 18px; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.combat-screen.v6 .thin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.combat-screen.v6 .thin-row { display: grid; grid-template-columns: auto 1fr auto; gap: 5px; align-items: center; }
.combat-screen.v6 .thin-row small { font-size: .68rem; color: var(--muted); }
.combat-screen.v6 .thin-row .bar { height: 5px; }
.combat-screen.v6 .fighters.group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.combat-screen.v6 .fighters.group .side { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; align-content: start; }
.combat-screen.v6 .fighter.compact { padding: 6px 8px; }
.combat-screen.v6 .fighter.compact .hpbar { height: 14px; }
.combat-screen.v6 .fighter.compact .hpbar span { line-height: 14px; font-size: .7rem; }
.combat-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.combat-screen.v6 .controls { padding: 10px; max-height: min(430px, calc(100vh - 330px)); min-height: 220px; overflow-y: auto; }
.combat-screen.is-group .controls { max-height: min(400px, calc(100vh - 420px)); }
.combat-screen.v6 .ctrl-group { margin-bottom: 6px; }
.combat-screen.v6 .btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 5px; margin-top: 3px; }
.combat-screen.v6 .btn.action { min-width: 0; padding: 5px 8px; font-size: .85rem; line-height: 1.15; }
.combat-screen.v6 .btn.action small { font-size: .66rem; }
.combat-screen.v6 .combat-log { margin: 0; height: min(430px, calc(100vh - 330px)); min-height: 220px; font-size: .84rem; padding: 6px 10px; }
.combat-screen.is-group .combat-log { height: min(400px, calc(100vh - 420px)); }
.combat-screen.v6 .log-line { padding: 2px 0; opacity: .62; }
.combat-screen.v6 .log-line.recent { opacity: 1; }
.combat-screen.v6 .log-line.recent .rnd { color: var(--gold); }
.combat-screen.v6 .last-round, .combat-screen.v6 .log-toggle { display: none; }
.combat-screen.v6 .controls.end { max-height: none; }

@media (max-width: 700px) {
  .combat-screen.v6 .fighters.duo { grid-template-columns: 1fr 1fr; gap: 6px; }
  .combat-screen.v6 .fighters.duo .vs { display: none; }
  .combat-screen.v6 .fighter-name { font-size: .82rem; }
  .combat-screen.v6 .thin { grid-template-columns: 1fr; gap: 2px; }
  .combat-screen.v6 .fighters.group { grid-template-columns: 1fr 1fr; gap: 6px; }
  .combat-screen.v6 .fighters.group .side { grid-template-columns: 1fr; gap: 4px; }
  .combat-screen.v6 .fighter.compact .thin { display: none; }
  .combat-body { grid-template-columns: 1fr; gap: 6px; }
  .combat-screen.v6 .last-round { display: block; background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 8px; margin-bottom: 6px; font-size: .8rem; }
  .combat-screen.v6 .controls, .combat-screen.is-group .controls { max-height: none; min-height: 0; }
  .combat-screen.v6 .btns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .combat-screen.v6 .btn.action { padding: 4px 5px; font-size: .74rem; }
  .combat-screen.v6 .btn.action small { font-size: .6rem; }
  .combat-screen.v6 .ctrl-group { margin-bottom: 4px; }
  .combat-screen.v6 .ctrl-group > small { font-size: .68rem; }
  .combat-screen.v6 .controls { padding: 6px; }
  .combat-screen.v6 .log-toggle { display: inline-flex; width: 100%; justify-content: center; }
  .combat-screen.v6 .combat-log { display: none; height: 260px; }
  .combat-screen.v6.log-open .combat-log { display: block; margin-top: 6px; }
}

/* encontros escalados */
.enc-tags { margin: 4px 0 6px; }
.chip.gold { background: rgba(232,182,76,.15); color: var(--gold-2); }
.callout.over { border-left-color: var(--red); margin: 8px 0; }
@media (max-width: 700px) { .app-version { display: none; } .brand { white-space: nowrap; } }

/* diário */
.journal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 12px; }
.journal-stats .box { margin: 0; }
.journal-stats .derived { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.journal-stats .stat b { font-size: .98rem; overflow-wrap: anywhere; }
.journal-stats .stat .small { display: block; }
.journal-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.journal-filters .input { flex: 1 1 200px; min-width: 0; }
.chip.filter { cursor: pointer; opacity: .5; background: rgba(255,255,255,.04); color: var(--ink); font: inherit; font-size: .78rem; }
.chip.filter.on { opacity: 1; border-color: var(--gold); background: rgba(232,182,76,.12); }
.journal-year { margin-top: 14px; }
.jy-head { position: sticky; top: 0; background: var(--sea-1); padding: 4px 0; z-index: 1; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.journal .log li { grid-template-columns: 110px 1fr; padding: 6px 0 6px 14px; }
.journal .log li.cat-combat::before { background: var(--red); }
.journal .log li.cat-power::before { background: #a57be0; }
.journal .log li.cat-piracy::before, .journal .log li.cat-travel::before { background: var(--blue); }
.journal .log li.cat-people::before { background: #e58be0; }
.journal .log li.cat-crew::before { background: var(--green); }
.journal .log li.cat-birthday::before { background: var(--muted); }
@media (max-width: 700px) { .journal .log li { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 700px) {
  .combat-screen.v6 .target-hint { display: none; }
  .combat-screen.v6 .combat-head { grid-template-columns: auto 1fr; }
  .combat-screen.v6 .combat-head > span:last-child { text-align: right; }
}

/* =========================================================================
   v0.7: intenções no combate, aparência
   ========================================================================= */
.combat-screen .intent { margin-top: 4px; font-size: 12px; line-height: 1.3; padding: 3px 6px; border-radius: 6px;
  background: rgba(127, 127, 127, 0.12); border-left: 3px solid var(--muted, #888); }
.combat-screen .intent b { font-weight: 600; }
.combat-screen .intent.heavy, .combat-screen .intent.special { border-left-color: var(--danger, #c0392b); }
.combat-screen .intent.combo { border-left-color: #e67e22; }
.combat-screen .intent.guard, .combat-screen .intent.evade { border-left-color: #2980b9; }
.combat-screen .intent.recover, .combat-screen .intent.flee, .combat-screen .intent.buff { border-left-color: #27ae60; }
.combat-screen .intent.exact { box-shadow: inset 0 0 0 1px rgba(155, 89, 182, 0.45); }
.combat-screen .intent .intent-tip { display: block; opacity: 0.8; }
.combat-screen .fighter.compact .intent { font-size: 11px; padding: 2px 5px; }
.btn.action.suggest { box-shadow: 0 0 0 2px #e6b422; }
@media (max-width: 640px) {
  .combat-screen .intent .intent-tip { display: none; }
}

/* =====================================================================
   v0.8: Rumo à Grand Line (menu, mundo vivo, grandes batalhas, mapa)
   ===================================================================== */
.gold { color: var(--gold-2); }
.chip.gold { color: #2a1d05; background: var(--gold); border-color: var(--gold); font-weight: 700; margin-right: 6px; }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: .7rem; font-weight: 700; margin-left: 4px; }

/* ---------- menu principal ---------- */
.title-screen.v08 { padding-top: 0; text-align: left; }
.hero {
  position: relative; overflow: hidden; text-align: center; border: 1px solid var(--line); border-radius: 16px;
  padding: 48px 20px 36px; margin: 8px 0 24px;
  background: radial-gradient(ellipse at 50% 0%, rgba(232,182,76,.18), transparent 60%), linear-gradient(180deg, #13284a 0%, #0c1a2f 70%, #091424 100%);
}
.hero > * { position: relative; z-index: 1; }
.hero .logo .jolly { font-size: 4.4rem; text-shadow: 0 0 30px rgba(232,182,76,.35); }
.hero .logo h1 { font-size: clamp(2rem, 6vw, 3.1rem); margin-bottom: 6px; }
.hero .logo p { max-width: 560px; margin: 10px auto 0; }
.edition { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--gold-2); letter-spacing: .04em; }
.edition .ver { background: var(--gold); color: #2a1d05; border-radius: 10px; padding: 1px 9px; font-size: .8rem; }
.hero .title-actions { margin: 26px 0 0; }
.btn.continue { flex-direction: column; align-items: center; gap: 0; line-height: 1.2; }
.btn.continue small { font-weight: 400; font-size: .75rem; opacity: .85; }
.hero-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 0; pointer-events: none; }
.wave {
  position: absolute; left: -50%; width: 200%; height: 100%; bottom: 0; opacity: .5;
  background: radial-gradient(60px 18px at 30px 0, transparent 98%, rgba(90,169,230,.18) 100%) 0 0 / 60px 100% repeat-x;
  animation: wave 14s linear infinite;
}
.wave.w1 { bottom: -30px; }
.wave.w2 { bottom: -46px; opacity: .35; animation-duration: 20s; animation-direction: reverse; }
.wave.w3 { bottom: -60px; opacity: .25; animation-duration: 28s; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(60px); } }
@media (prefers-reduced-motion: reduce) { .wave { animation: none; } }

.title-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.title-grid .slots { max-width: none; margin: 0; }
.title-grid h3 { margin-top: 0; }
.slot-cards { display: flex; flex-direction: column; gap: 8px; }
.slot-card { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; padding: 10px 12px; background: var(--sea-1); display: flex; flex-direction: column; gap: 4px; }
.slot-card.dead { border-left-color: var(--muted); opacity: .75; }
.slot-card.retired { border-left-color: var(--green); }
.slot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.slot-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.slot-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.slot-foot > span { display: flex; gap: 6px; }
.whatsnew { background: rgba(10,22,40,.7); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.whatsnew li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.whatsnew li p { margin: 2px 0 0; }
.wn-ico { font-size: 1.3rem; line-height: 1.2; }

/* ---------- fim da vida ---------- */
.death-screen.retired .grave { color: var(--green); }
.death-screen .legacy { text-align: left; background: var(--sea-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; margin: 14px 0; }
.death-screen .legacy h3 { margin-top: 4px; }

/* ---------- HUD ---------- */
.hud-region { font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 1px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; background: rgba(90,169,230,.15); color: var(--blue); }
.hud-region.region-paradise { background: rgba(232,182,76,.18); color: var(--gold-2); }
.hud-region.region-new_world { background: rgba(224,96,90,.18); color: var(--red); }
.hud-alert.war { background: var(--red); color: #fff; }
.hud-chaos { font-size: .8rem; border-radius: 10px; padding: 0 8px; border: 1px solid var(--line); }
.chaos-order { color: var(--blue); }
.chaos-calm { color: var(--green); }
.chaos-tense { color: var(--gold-2); }
.chaos-turb { color: #f0965a; }
.chaos-chaos { color: var(--red); }
.hud-chaos.chaos-chaos { border-color: var(--red); }

/* ---------- aba Mundo ---------- */
.world-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 6px; }
.chaos-box { min-width: 220px; max-width: 320px; background: var(--sea-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.chaos-meter { height: 8px; border-radius: 4px; margin: 4px 0; overflow: hidden; background: linear-gradient(90deg, rgba(90,169,230,.25), rgba(95,196,138,.25), rgba(232,182,76,.25), rgba(224,96,90,.3)); }
.chaos-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--green), var(--gold), var(--red)); background-size: 320px 100%; border-right: 2px solid #fff; }
.chaos-name { font-size: .95rem; }

.card.event-world { cursor: default; border-left: 3px solid var(--gold); }
.card.event-world.done { opacity: .7; border-left-color: var(--muted); }
.card.event-world.promised { box-shadow: 0 0 0 1px var(--gold) inset; }
.callout.war-call { border-color: var(--red); background: rgba(224,96,90,.1); }

.card.war-card { cursor: default; border: 2px solid var(--red); background: linear-gradient(180deg, rgba(224,96,90,.10), var(--sea-1) 40%); }
.card.war-card.join { border-color: var(--gold); background: linear-gradient(180deg, rgba(232,182,76,.10), var(--sea-1) 40%); }
.card.war-card.done { border-color: var(--line); }
.role-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.role-btn { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--sea-0); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font: inherit; }
.role-btn small { color: var(--muted); font-size: .8rem; }
.role-btn:hover:not(:disabled) { border-color: var(--gold); }
.role-btn:disabled { opacity: .45; cursor: not-allowed; }
.war-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 4px 0; }
.war-steps li { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); padding: 3px 9px 3px 4px; border-radius: 14px; border: 1px solid var(--line); }
.war-steps .num { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--sea-2); font-size: .72rem; }
.war-steps li.done { color: var(--ink); }
.war-steps li.done .num { background: var(--green); color: #052; }
.war-steps li.on { color: var(--ink); border-color: var(--gold); }
.war-steps li.on .num { background: var(--gold); color: #2a1d05; }
.war-steps li.r-lost .num, .war-steps li.r-failed .num, .war-steps li.r-caught .num, .war-steps li.r-sunk .num, .war-steps li.r-spotted .num, .war-steps li.r-beaten .num { background: var(--red); color: #fff; }
.momentum { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.mom-track { display: inline-flex; gap: 3px; }
.mom-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.08); }
.mom-dot.neg { background: rgba(224,96,90,.18); }
.mom-dot.pos { background: rgba(95,196,138,.18); }
.mom-dot.on { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.mom-dot.on.neg { background: var(--red); box-shadow: 0 0 6px var(--red); }
.mom-dot.on.pos { background: var(--green); box-shadow: 0 0 6px var(--green); }
.war-stage { border-top: 1px dashed var(--line); padding-top: 6px; }
.war-stage h4 { margin: 0 0 2px; color: var(--gold-2); }
.war-stage p { margin: 0; font-size: .92rem; }
.war-card .report p { margin: 3px 0; font-size: .9rem; }
.fleet { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
.fleet-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fleet-vs { align-self: center; font-weight: 800; color: var(--gold); font-size: .8rem; text-align: center; white-space: nowrap; }
.ship-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 2px 8px; align-items: center; font-size: .82rem; background: rgba(0,0,0,.2); border-radius: 6px; padding: 4px 8px; }
.ship-row small { grid-column: 1 / -1; color: var(--muted); font-size: .72rem; }
.ship-row.foe { border-left: 2px solid var(--red); }
.ship-row:not(.foe) { border-left: 2px solid var(--blue); }
.ship-row.sunk { opacity: .45; text-decoration: line-through; }
.ship-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dream-box { border-left: 3px solid var(--gold); }
.dream-box.fulfilled { background: linear-gradient(180deg, rgba(232,182,76,.14), var(--sea-1)); border-color: var(--gold); }
.milestones { list-style: none; padding: 0; margin: 8px 0; }
.milestones li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.milestones li.done { color: var(--green); }
.milestones li.locked { opacity: .55; }
.ms-ico { display: inline-block; width: 22px; text-align: center; }
.promises li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.promise.kept { color: var(--green); }
.promise.broken { color: var(--red); }
.promise.moot { opacity: .6; }
.promise.open { color: var(--gold-2); }

.fig-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card.fig-card { cursor: default; }
.card.fig-card.gone { opacity: .6; }
.card.fig-card.hostile { border-left: 3px solid var(--red); }
.card.fig-card.friendly { border-left: 3px solid var(--green); }
.card.fig-card .bond { color: var(--gold-2); }
.fig-log { max-height: 160px; overflow: auto; border-left: 2px solid var(--line); padding-left: 8px; }
.fig-log li { padding: 2px 0; }

.gen-box { margin-bottom: 10px; }
.gen-box.mine { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.gen-members { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gen-m { font-size: .82rem; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px; padding: 2px 10px; }
.gen-m small { color: var(--muted); }
.gen-m.you { border-color: var(--gold); color: var(--gold-2); }
.gen-m.dead { opacity: .5; text-decoration: line-through; }
.bounty-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.bounty-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: .78rem; border-bottom: 1px solid var(--line); padding: 4px 6px; }
.bounty-table td { padding: 4px 6px; border-bottom: 1px dashed rgba(255,255,255,.06); }
.bounty-table td:last-child { text-align: right; white-space: nowrap; }
.bounty-table tr.near td:nth-child(2) { color: var(--ink); font-weight: 600; }
.bounty-table tr:not(.near) { color: var(--muted); }
.news-year { margin: 14px 0 4px; color: var(--gold-2); font-size: .9rem; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.news-item { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 4px 0; font-size: .9rem; }
.news-when { color: var(--muted); font-size: .78rem; text-transform: uppercase; }
.news-item.imp2 { font-weight: 600; }
.news-item.imp3 { font-weight: 700; color: var(--gold-2); }
.news-item.k-player { color: #bfe0ff; }

/* ---------- ilha e mapa da Grand Line ---------- */
.logpose { color: var(--gold-2); }
.sea-map .log-edge { stroke: rgba(232,182,76,.35); stroke-width: .35; stroke-dasharray: .8 .6; }
.sea-map .log-edge.from-here { stroke: var(--gold); stroke-width: .55; stroke-dasharray: none; }
.sea-map .red-line { stroke: #a8322d; stroke-width: 1.6; opacity: .8; }
.sea-map .map-note.start { text-anchor: start; }
.crossings { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.callout.crossing { margin: 0; }
.callout.crossing.reverse_mountain { border-color: var(--gold); background: rgba(232,182,76,.1); }
.callout.crossing.calm_belt { border-color: var(--blue); background: rgba(90,169,230,.08); }
.card.dream-ship { border-color: var(--gold); background: linear-gradient(180deg, rgba(232,182,76,.12), var(--sea-1)); }

@media (max-width: 760px) {
  .title-grid { grid-template-columns: 1fr; }
  .hero { padding: 32px 14px 28px; }
  .fleet { grid-template-columns: 1fr; }
  .fleet-vs { justify-self: start; }
  .bounty-table th:nth-child(3), .bounty-table td:nth-child(3) { display: none; }
}

/* v0.8.1: leitura de perigo no cartão do inimigo */
.danger-read { margin-top: 3px; font-size: .78rem; color: var(--muted); }
.danger-read.exact { color: #b9a0ff; }
.danger-read.danger { color: var(--red); }
.danger-read.tense { color: var(--gold-2); }

/* v0.8.1: dicas "?" discretas */
.help { position: relative; display: inline-block; vertical-align: middle; margin-left: 4px; }
.help-btn { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 700 .7rem/16px system-ui, sans-serif; padding: 0; cursor: pointer; }
.help-btn:hover, .help.open .help-btn { color: var(--gold-2); border-color: var(--gold); }
.help-pop { display: none; position: absolute; z-index: 40; top: 24px; left: -8px; width: max-content; max-width: min(320px, 80vw); padding: 8px 10px; border-radius: 8px;
  background: #0d1b2e; border: 1px solid var(--gold); color: var(--ink); font-size: .8rem; font-weight: 400; line-height: 1.4; text-align: left; box-shadow: 0 8px 24px rgba(0,0,0,.5); white-space: normal; }
.help.left .help-pop { left: auto; right: -8px; }
.help.open .help-pop { display: block; }
.help-line { display: block; margin: 2px 0; }
.party-line { margin: 0 0 8px; }
.seg.fight-pref { margin: 4px 0; }
.seg.fight-pref .seg-btn { padding: 3px 6px; font-size: .75rem; }
.hint-row { display: flex; justify-content: flex-end; margin: 2px 0; }
h3 .help, h4 .help { margin-left: 6px; }
.activity-cards { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin-bottom: 8px; }
.activity-cards .card { padding: 8px 10px; }
.activity-cards .card-title { font-size: .92rem; }
.activity-desc { color: #c7d3e3; margin: 0 0 8px; padding: 6px 10px; border-left: 2px solid var(--gold); background: rgba(232,182,76,.06); border-radius: 0 6px 6px 0; }
.crew-stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.crew-stats .stat b { white-space: nowrap; font-size: 1.15rem; }
.act-wrap { display: inline-flex; align-items: center; gap: 2px; }

/* ---------------------------------------------------------------- v0.9: caminhos */
.hud-path { font-size: .75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; margin-left: 8px; }
.hud-path.path-marine { color: var(--blue); border-color: rgba(90,169,230,.5); background: rgba(90,169,230,.1); }
.hud-path.path-hunter { color: var(--green); border-color: rgba(95,196,138,.5); background: rgba(95,196,138,.1); }
.hud-path.path-pirate { color: var(--red); border-color: rgba(224,96,90,.5); background: rgba(224,96,90,.1); }

.career-head { border-left: 3px solid var(--line); }
.career-head.path-marine { border-left-color: var(--blue); }
.career-head.path-hunter { border-left-color: var(--green); }
.career-head.path-pirate { border-left-color: var(--red); }
.career-head h3 { display: flex; align-items: center; gap: 6px; }

.path-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.path-card { cursor: default; display: flex; flex-direction: column; gap: 6px; }
.path-card .btn { margin-top: auto; align-self: flex-start; }

.rank-ladder { list-style: none; margin: 0; padding: 0; counter-reset: rk; }
.rank-ladder li { position: relative; padding: 5px 8px 5px 30px; border-left: 2px solid var(--line); margin-left: 8px; color: var(--muted); }
.rank-ladder li::before { counter-increment: rk; content: counter(rk); position: absolute; left: -11px; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--sea-1); border: 1px solid var(--line); font-size: .7rem; display: grid; place-items: center; color: var(--muted); }
.rank-ladder li b { color: var(--ink); font-weight: 600; }
.rank-ladder li.past { opacity: .6; }
.rank-ladder li.past::before { content: '✓'; color: var(--green); border-color: var(--green); }
.rank-ladder li.on { background: rgba(90,169,230,.1); border-left-color: var(--blue); border-radius: 0 6px 6px 0; }
.rank-ladder li.on::before { background: var(--blue); color: #08121f; border-color: var(--blue); }
.rank-ladder li.on b { color: var(--blue); }
.rank-ladder li.locked { opacity: .45; }

.wanted-board { display: flex; flex-direction: column; gap: 6px; }
.poster-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(239,225,191,.04); }
.poster-row.here { border-color: var(--gold); background: rgba(232,182,76,.08); }
.poster-row .btn { justify-self: start; }
@media (max-width: 560px) { .poster-row { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- v0.9: traços ocultos */
.card.secret { border-color: rgba(232,182,76,.55); background: linear-gradient(160deg, rgba(232,182,76,.08), var(--sea-1) 60%); }
.card.secret.bad { border-color: rgba(224,96,90,.55); background: linear-gradient(160deg, rgba(224,96,90,.08), var(--sea-1) 60%); }
.card.secret.mixed { border-color: rgba(90,169,230,.55); background: linear-gradient(160deg, rgba(90,169,230,.08), var(--sea-1) 60%); }
.card.secret .cost { text-transform: capitalize; }
.career-view { display: flex; flex-direction: column; gap: 12px; }
.career-view > .grid2 { margin: 0; }
.career-view .derived { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.career-view .derived .stat b { font-size: 1.05rem; line-height: 1.25; }

/* ---------------------------------------------------------------- v0.9.1: som */
.topbar { position: relative; }
.audio-ctl { position: relative; margin-left: 10px; }
.audio-btn { background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 3px 8px; cursor: pointer; font-size: 1rem; line-height: 1.2; }
.audio-btn:hover { border-color: var(--gold); }
.audio-pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 230px; background: var(--sea-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.audio-ctl.open .audio-pop { display: block; }
.audio-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: var(--gold-2); }
.audio-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; font-size: .88rem; margin: 6px 0; color: var(--muted); }
.audio-row.mute { grid-template-columns: auto 1fr; }
.audio-row input[type=range] { width: 100%; }
.topbar .app-version { margin-left: auto; }

/* =====================================================================
   v0.9.2: celular (320–430 px)
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
@media (max-width: 700px) {
  #app { padding: 10px 8px calc(96px + env(safe-area-inset-bottom)); }
  .topbar { padding: 8px 12px; }
  .panel { padding: 12px 10px; }
  .box { padding: 10px; }
  .panel .panel, .panel .box .box { padding: 8px; }
  /* abas numa faixa só, rolando de lado e presa no topo */
  .sheet .tabs {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 -8px; padding: 4px 8px 0;
  }
  .sheet .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 10px 12px; white-space: nowrap; }
  .sheet .panel { border-top-left-radius: var(--radius); }
  .sheet .hud-wrap { position: sticky; z-index: 25; margin: 0 -8px; padding: 0 8px; background: var(--sea-0); }
  /* botão do mês: maior para o dedo e acima da barra de gestos do iPhone */
  .hud-advance { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); min-height: 52px; justify-content: center; }
  /* bloqueado por evento: sem transparência para não misturar com o texto de baixo */
  .hud-advance:disabled { opacity: 1; background: #4a3c1c; color: #e9d7a8; border-color: #6b5626; }
  .btn { min-height: 40px; }
  .btn.small { min-height: 34px; }
  .status-item { min-width: 0; overflow-wrap: anywhere; }
  .modal-backdrop { padding: 10px; align-items: end; }
  .modal { max-height: calc(100dvh - 20px); overflow-y: auto; padding: 14px; }
  select, input, textarea { font-size: 16px; } /* evita o zoom automático do iOS */
  .people-cards { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  body { font-size: 15px; }
  .hud-attr { font-size: .72rem; }
  .sheet-head h1 { font-size: 1.5rem; }
}

/* v0.9.3: dica (?) posicionada por ui/dom.js placePop, sempre dentro da tela */
.help-pop { position: fixed; overflow-y: auto; z-index: 120; }
/* v0.9.3: notificações que ficam */
.feed { display: flex; flex-direction: column; gap: 8px; }
.feed .callout.report { margin: 0; }
.feed .callout.report.older { opacity: .85; border-left-color: var(--line); }
.feed-old { border: 1px dashed var(--line); border-radius: var(--radius); padding: 6px 10px; }
.feed-old > summary { cursor: pointer; color: var(--muted); font-size: .88rem; }
.feed-item { border-top: 1px solid rgba(255,255,255,.06); padding: 4px 0; }
.feed-item > summary { cursor: pointer; font-size: .88rem; }
.feed-item ul { margin: 4px 0 2px; }
.feed-old .btn { margin-top: 6px; }
/* v0.9.3: números como 201/201 cabem na linha (antes vazavam do quadro no celular) */
.status-row { grid-template-columns: minmax(70px, 140px) minmax(0, 1fr) auto; }
.status-row b { min-width: 36px; white-space: nowrap; }

/* v1.0: ataques a ilhas, feitos de caçador, missões do bando, unidade da Marinha */
.card.muted-card { opacity: .72; }
.hud-style.crew.unit { color: #8ec5ff; border-color: rgba(110,170,240,.5); }
.gate-lock { margin-top: 6px; }
.feat-list .chip { margin-left: 6px; }
.quest-card .card-title { gap: 8px; }

/* v0.11: escolher o tipo de encrenca (aba Viver) */
.trouble-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 10px; }
.trouble-pick > p { grid-column: 1 / -1; margin: 0; }
.trouble-opt { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--ink); cursor: pointer; font: inherit; }
.trouble-opt:hover:not(:disabled) { border-color: var(--gold); background: rgba(232, 182, 76, .08); }
.trouble-opt:disabled { opacity: .45; cursor: default; }
.trouble-opt.neg b { color: var(--red); }
.trouble-opt .t-ico { font-size: 1.25em; line-height: 1.2; }
.trouble-opt .t-txt { display: flex; flex-direction: column; gap: 2px; }
.trouble-opt small { color: var(--muted); font-size: .82em; line-height: 1.3; }

/* v0.11: lojas em lista compacta (aba Ilha → Lojas, mercado negro) */
.shop-tabs { margin-bottom: 10px; max-width: 560px; }
.shop-tabs .seg-btn { white-space: nowrap; padding: 7px 6px; }
.shop-note { margin: 0 0 8px; }
.filter-chips { margin: 0 0 8px; gap: 6px; }
.chip-btn { font: inherit; font-size: .8rem; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.chip-btn.on { background: rgba(232, 182, 76, .15); border-color: var(--gold); color: var(--gold-2); }
.check-line { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; cursor: pointer; }
.shop-group { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 0 4px; }
.shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0 18px; }
.shop-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 2px; border-bottom: 1px solid rgba(43, 74, 112, .55); }
.shop-row.owned { opacity: .6; }
.shop-info { flex: 1; min-width: 0; }
.shop-info summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.shop-info summary::-webkit-details-marker { display: none; }
.shop-info summary b::after { content: ' ▾'; color: var(--muted); font-size: .7em; font-weight: 400; }
.shop-info[open] summary b::after { content: ' ▴'; }
.shop-info p { margin: 4px 0 0; }
.shop-meta { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.shop-meta .chip { font-size: .7rem; margin: 0; }
.shop-row .buy { flex: none; min-width: 92px; font-variant-numeric: tabular-nums; }
.shop-owned { flex: none; color: var(--green); padding-top: 4px; }
@media (max-width: 700px) {
  .shop-list { grid-template-columns: 1fr; }
  .shop-tabs { max-width: none; }
  .shop-tabs .seg-btn { font-size: .82rem; }
  .shop-row .buy { min-width: 84px; }
}

/* v0.11: estaleiro (navios à venda com números comparáveis) */
.ship-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ship-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0 8px; }
.ship-stat { display: flex; flex-direction: column; padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .04); }
.ship-stat small { color: var(--muted); font-size: .68rem; }
.ship-stat b { font-size: .85rem; font-variant-numeric: tabular-nums; }
.ship-stat.up b { color: var(--green); }
.ship-stat.down b { color: var(--red); }
@media (max-width: 700px) { .ship-offers { grid-template-columns: 1fr; } }

/* v0.11: aba Ilha no celular: números em 3 colunas e lugares em grade de ícones (antes: 5 linhas de pílulas) */
@media (max-width: 700px) {
  .island-head { gap: 8px; }
  .island-head > div:first-child { flex-basis: 100%; }
  .island-stats { grid-template-columns: repeat(3, 1fr); gap: 2px 10px; width: 100%; min-width: 0; }
  .place-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .place-btn { flex-direction: column; gap: 1px; border-radius: 10px; padding: 5px 2px; font-size: .72rem; line-height: 1.15; text-align: center; justify-content: flex-start; }
  .place-btn .place-ico { font-size: 1.15rem; }
}

/* v0.11: aba Procurado mais curta (nível atual + próximo; escada inteira e "como funciona" recolhidos) */
.ladder .ladder-now { margin: 4px 0; }
.ladder .ladder-now b { color: var(--gold-2); }
.ladder-all summary, details.how summary { cursor: pointer; color: var(--muted); }
.ladder-all[open] summary { margin-bottom: 4px; }
details.how summary strong { color: var(--ink); }
details.how[open] summary { margin-bottom: 6px; }

/* v0.14: despertar da fruta */
.box.awaken { margin: 8px 0; padding: 10px 12px; border-style: dashed; }
.box.awaken.on { border-style: solid; border-color: var(--gold); }
.box.awaken p { margin: 4px 0 0; }

/* painel do mestre (ui/gm.js) */
.gm-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(4, 10, 20, .6); display: flex; justify-content: flex-end; }
.gm-panel { width: min(560px, 100%); height: 100%; overflow-y: auto; background: var(--sea-1); border-left: 1px solid var(--gold); padding: 12px 14px 40px; box-shadow: -8px 0 30px rgba(0,0,0,.5); }
.gm-head { display: flex; align-items: center; gap: 10px; position: sticky; top: -12px; background: var(--sea-1); padding: 8px 0; z-index: 1; }
.gm-head b { color: var(--gold-2); }
.gm-head .btn { margin-left: auto; }
.gm-group { border: 1px solid var(--line); border-radius: var(--radius); margin: 8px 0; background: rgba(0,0,0,.15); }
.gm-group > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; }
.gm-inner { padding: 4px 12px 12px; display: grid; gap: 6px; }
.gm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gm-lbl { min-width: 110px; font-size: .9rem; color: var(--muted); }
.gm-panel .gm-num { width: 110px; }
.gm-panel .gm-sel { width: auto; }
.gm-sel { max-width: 100%; flex: 1 1 180px; }
.gm-list { display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
.gm-list .gm-row { justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.05); padding: 3px 0; }
.gm-list .gm-row > span { flex: 1 1 200px; }