:root {
  --ink: #14151a;
  --ink-panel: #1c1e26;
  --parchment: #e9e2d0;
  --parchment-dim: #a89f8a;
  --vermillion: #e2572b;
  --vermillion-dim: #7a3320;
  --chakra-blue: #3d7ea6;
  --border: #34363f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(226, 87, 43, 0.06), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(61, 126, 166, 0.06), transparent 45%);
  color: var(--parchment);
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

.screen { display: none; padding: 48px 20px; max-width: 900px; margin: 0 auto; }
.screen.active { display: block; }

.ink-mark {
  font-family: 'Yuji Mai', serif;
  font-size: 88px;
  color: var(--vermillion-dim);
  text-align: center;
  line-height: 1;
  margin-bottom: 4px;
  user-select: none;
}

.title {
  text-align: center;
  font-size: 34px;
  letter-spacing: 6px;
  font-weight: 900;
  margin: 0 0 6px;
}
.title span { color: var(--vermillion); }

.subtitle {
  text-align: center;
  color: var(--parchment-dim);
  margin: 0 auto 32px;
  max-width: 480px;
  font-size: 15px;
}

.card {
  background: var(--ink-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 28px;
  max-width: 420px;
  margin: 0 auto;
}

.tabs { display: flex; gap: 4px; margin-bottom: 20px; }
.tab {
  flex: 1;
  background: none;
  border: 1px solid var(--border);
  color: var(--parchment-dim);
  padding: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 1px;
}
.tab.active { color: var(--vermillion); border-color: var(--vermillion-dim); }

.ttab {
  flex: 1;
  background: none;
  border: 1px solid var(--border);
  color: var(--parchment-dim);
  padding: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 1px;
}
.ttab.active { color: var(--vermillion); border-color: var(--vermillion-dim); }

.tab-panel { display: none; flex-direction: column; gap: 12px; }
.tab-panel.active { display: flex; }

input[type="text"], input[type="password"] {
  background: var(--ink);
  border: 1px solid var(--border);
  color: var(--parchment);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  border-radius: 2px;
}
input:focus { outline: 2px solid var(--vermillion-dim); }

.field-label {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--parchment-dim);
  text-transform: uppercase;
  margin-top: 6px;
}

.btn-primary {
  background: var(--vermillion);
  color: #14151a;
  border: none;
  padding: 13px;
  font-weight: 700;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 2px;
  margin-top: 6px;
}
.btn-primary:hover { background: #f06840; }

.btn-ghost {
  background: none;
  border: 1px solid var(--border);
  color: var(--parchment-dim);
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  border-radius: 2px;
}

.error { color: var(--vermillion); font-size: 13px; min-height: 16px; margin: 0; }

.village-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 4px;
}

.village-card {
  border: 1px solid var(--border);
  padding: 12px;
  cursor: pointer;
  border-radius: 2px;
  text-align: center;
  font-size: 14px;
}
.village-card:hover { border-color: var(--parchment-dim); }
.village-card.selected {
  border-color: var(--vermillion);
  background: rgba(226, 87, 43, 0.1);
  color: var(--vermillion);
}
.village-card .kage-title { display: block; font-size: 11px; color: var(--parchment-dim); margin-top: 2px; }

/* --- Jogo --- */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
}
.ninja-id { display: flex; align-items: center; gap: 16px; }

.rank-medallion {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--vermillion);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Yuji Mai', serif;
  font-size: 22px;
  color: var(--vermillion);
  flex-shrink: 0;
}

#char-name { margin: 0; font-size: 20px; }
#char-meta { margin: 2px 0 0; color: var(--parchment-dim); font-size: 13px; }

.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px 28px;
}
@media (max-width: 760px) { .game-grid { grid-template-columns: 1fr; } }

.panel {
  background: var(--ink-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
}
.panel h3 { margin: 0 0 14px; font-size: 15px; letter-spacing: 1px; }
.panel h3.xp-heading { margin-top: 24px; }
.hint { color: var(--parchment-dim); font-size: 12px; font-weight: 400; }

.stat-row { margin-bottom: 10px; }
.stat-row .stat-label {
  display: flex; justify-content: space-between;
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--parchment-dim); margin-bottom: 4px;
}
.stat-track { height: 8px; background: var(--ink); border-radius: 2px; overflow: hidden; }
.stat-fill { height: 100%; background: linear-gradient(90deg, var(--vermillion-dim), var(--vermillion)); }

.xp-bar-track { height: 10px; background: var(--ink); border-radius: 2px; overflow: hidden; border: 1px solid var(--border); }
.xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--chakra-blue), #6fb8e0); width: 0%; }

.mission-card {
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: 2px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.mission-card.done { opacity: 0.45; }
.mission-info { font-size: 13px; }
.mission-diff {
  display: inline-block;
  font-size: 11px;
  border: 1px solid var(--vermillion-dim);
  color: var(--vermillion);
  padding: 1px 6px;
  border-radius: 2px;
  margin-right: 6px;
}
.mission-xp { color: var(--parchment-dim); font-size: 11px; margin-top: 3px; }
.mission-risk { color: var(--vermillion); }
.btn-do {
  background: none;
  border: 1px solid var(--vermillion);
  color: var(--vermillion);
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  border-radius: 2px;
  white-space: nowrap;
}
.btn-do:hover { background: rgba(226,87,43,0.12); }
.btn-do:disabled { opacity: 0.3; cursor: default; }

#event-toast-container {
  position: fixed;
  bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 340px;
  z-index: 10;
}
.event-toast {
  background: var(--ink-panel);
  border-left: 3px solid var(--vermillion);
  padding: 14px 16px;
  font-size: 13px;
  border-radius: 2px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  animation: slide-in 0.3s ease;
}
@keyframes slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* --- Draft --- */
.draft-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 700px) { .draft-layout { grid-template-columns: 1fr; } }

.draft-npc-card { max-width: none; }
.draft-npc-card h3 { margin: 0 0 4px; font-size: 20px; }
.draft-npc-meta { color: var(--parchment-dim); font-size: 13px; margin-bottom: 16px; }

.draft-stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 8px;
  cursor: pointer;
}
.draft-stat-row:hover:not(.disabled) { border-color: var(--vermillion); }
.draft-stat-row.disabled { opacity: 0.3; cursor: default; }
.draft-stat-row .draft-stat-value { color: var(--vermillion); font-weight: 700; }

.draft-picks-card { max-width: none; }
.draft-picks-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.draft-pick-row { display: flex; justify-content: space-between; color: var(--parchment-dim); }
.draft-pick-row strong { color: var(--parchment); }

/* --- Batalha --- */
.battle-sides {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: 24px 20px;
  max-width: 820px;
  margin: 0 auto;
}
.battle-side { flex: 1; min-width: 0; }
.battle-side-label { text-align: center; color: var(--parchment-dim); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 10px; }
.vs-mark { font-family: 'Yuji Mai', serif; color: var(--vermillion-dim); font-size: 22px; padding-top: 30px; }

.entity-grid { display: flex; flex-direction: column; gap: 10px; }
.entity-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  background: var(--ink-panel);
  transition: border-color 0.15s ease;
}
.entity-card h4 { margin: 0 0 6px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.entity-card.defeated { opacity: 0.35; }
.entity-card.selectable { cursor: pointer; border-color: var(--vermillion-dim); }
.entity-card.selectable:hover { border-color: var(--vermillion); }
.entity-tag { font-size: 10px; color: var(--parchment-dim); font-weight: 400; text-transform: uppercase; }

.hp-track { height: 12px; background: var(--ink); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.hp-fill { height: 100%; background: linear-gradient(90deg, #2f9e44, #69db7c); transition: width 0.3s ease; }
.hp-fill.enemy { background: linear-gradient(90deg, var(--vermillion-dim), var(--vermillion)); }
.hp-fill.ally { background: linear-gradient(90deg, #3d7ea6, #6fb8e0); }
.hp-fill.clone { background: linear-gradient(90deg, #7a5ea6, #b08fe0); }

.battle-log {
  max-width: 700px;
  margin: 0 auto 20px;
  padding: 14px 18px;
  background: var(--ink-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  max-height: 180px;
  overflow-y: auto;
}
.battle-log p { margin: 4px 0; color: var(--parchment-dim); }
.battle-log p.super { color: var(--vermillion); }
.battle-log p.fraco { opacity: 0.6; }

.battle-attacks {
  max-width: 700px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.btn-attack {
  background: var(--ink-panel);
  border: 1px solid var(--border);
  color: var(--parchment);
  padding: 14px;
  cursor: pointer;
  font-family: inherit;
  border-radius: 2px;
  text-align: left;
}
.btn-attack:hover { border-color: var(--vermillion); }
.btn-attack:disabled { opacity: 0.4; cursor: default; }
.btn-attack .attack-power { display: block; font-size: 11px; color: var(--parchment-dim); margin-top: 2px; }

.battle-result {
  max-width: 700px;
  margin: 20px auto 0;
  text-align: center;
  font-family: 'Yuji Mai', serif;
  font-size: 28px;
}
.battle-result.victory { color: #69db7c; }
.battle-result.defeat { color: var(--vermillion); }

/* --- Overlay --- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(10, 10, 14, 0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
}
.overlay .card { max-width: 420px; width: 90%; }
#attack-choice-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* Decisões e aprendizado */
.mission-choice-btn {
  width: 100%;
  text-align: left;
  margin: 8px 0;
}
.btn-secondary {
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.btn-secondary:hover {
  background: rgba(255,255,255,.08);
}
.team-member{border:1px solid var(--border);padding:14px;margin-bottom:12px;border-radius:3px}.team-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.relation-row{display:grid;grid-template-columns:82px 1fr 28px;gap:8px;align-items:center;font-size:11px;margin:6px 0}.relation-track{height:7px;background:var(--ink);border:1px solid var(--border);overflow:hidden;border-radius:2px}.relation-fill{height:100%;background:linear-gradient(90deg,var(--vermillion-dim),var(--vermillion))}.peak-summary{margin-top:20px;padding-top:15px;border-top:1px solid var(--border)}.peak-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}.peak-stats div{display:flex;justify-content:space-between;border:1px solid var(--border);padding:8px}.mission-choice-btn .attack-power{display:block}

/* Mapa da missão de escolta */
.escort-card{max-width:820px;width:100%;}
.escort-map{
  position:relative;margin:22px auto 10px;max-width:780px;overflow:auto;
  border:1px solid var(--border);border-radius:8px;
  background:
    radial-gradient(circle at 18% 0%, rgba(61,126,166,.07), transparent 55%),
    radial-gradient(circle at 84% 100%, rgba(226,87,43,.07), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.1)),
    var(--ink-panel);
  box-shadow:inset 0 0 70px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.25);
}
.escort-map::after{content:"道";position:absolute;right:2px;bottom:-18px;font-family:'Yuji Mai',serif;font-size:130px;line-height:1;color:rgba(255,255,255,.02);pointer-events:none;z-index:0;}
.escort-map-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.path-line{fill:none;stroke:var(--border);stroke-width:2;stroke-dasharray:1 8;stroke-linecap:round;opacity:.6}
.path-line.traveled{stroke:var(--chakra-blue);stroke-dasharray:none;stroke-width:2.5;opacity:.75}
.path-line.reachable{stroke:var(--vermillion);stroke-dasharray:none;stroke-width:3;opacity:1;filter:drop-shadow(0 0 4px rgba(226,87,43,.55))}

.escort-node{
  position:absolute;transform:translate(-50%,-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 28%, #2a2c36, var(--ink) 72%);
  border:2px solid var(--border);color:var(--parchment-dim);
  font-family:'Yuji Mai',serif;font-size:16px;line-height:1;cursor:not-allowed;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.escort-node-icon{pointer-events:none}
.escort-node-label{position:absolute;top:100%;margin-top:6px;font-family:'Zen Kaku Gothic New',sans-serif;font-size:9px;letter-spacing:.4px;white-space:nowrap;color:var(--parchment-dim);opacity:.7;pointer-events:none}
.escort-node.locked{opacity:.32}
.escort-node.visited{border-color:var(--chakra-blue);color:var(--chakra-blue);opacity:.8}
.escort-node.current{border-color:#e8c36a;color:#e8c36a;box-shadow:0 0 0 5px rgba(232,195,106,.15),0 0 18px rgba(232,195,106,.4);opacity:1}
.escort-node.reachable{border-color:var(--vermillion);color:var(--parchment);cursor:pointer;box-shadow:0 0 0 4px rgba(226,87,43,.14);animation:escort-pulse 1.9s ease-in-out infinite}
.escort-node.reachable:hover{transform:translate(-50%,-50%) scale(1.14);box-shadow:0 0 0 7px rgba(226,87,43,.22),0 0 20px rgba(226,87,43,.45)}
.escort-node.reachable .escort-node-label{color:var(--parchment);opacity:.95}
.escort-node.start{
  width:60px;height:60px;font-size:24px;cursor:default;
  border-color:var(--chakra-blue);color:var(--chakra-blue);
  background:radial-gradient(circle at 34% 28%, #223140, var(--ink) 72%);
  box-shadow:0 0 0 6px rgba(61,126,166,.13),0 0 22px rgba(61,126,166,.32);
}
.escort-node.start .escort-node-label{color:var(--chakra-blue);opacity:.9;font-weight:700}
@keyframes escort-pulse{0%,100%{box-shadow:0 0 0 4px rgba(226,87,43,.14),0 0 8px rgba(226,87,43,.22)}50%{box-shadow:0 0 0 8px rgba(226,87,43,.2),0 0 22px rgba(226,87,43,.5)}}
.escort-event{margin-top:14px;border-top:1px solid var(--border);padding-top:14px}
.escort-event h3{margin:0 0 8px}.escort-event p{line-height:1.55}

/* --- Prévia de evento da escolta --- */
.escort-event-modal { width:min(92vw,520px); max-width:520px; text-align:center; }
.escort-event-modal h3 { margin:8px 0 12px; font-size:22px; }
.escort-event-modal .hint { line-height:1.65; margin-bottom:22px; }
.escort-event-kicker { color:var(--vermillion); font-size:11px; font-weight:800; letter-spacing:3px; }
#escort-event-modal-actions { display:flex; justify-content:center; }
#escort-event-modal-actions .btn-primary { min-width:210px; }

.battle-controls{display:grid;grid-template-columns:minmax(0,700px) 260px;gap:16px;max-width:980px;margin:0 auto;align-items:start}
.kekkei-panel{border:1px solid var(--border);padding:12px;background:var(--ink-panel);border-radius:3px}
.kekkei-panel h3{margin-top:0}.kekkei-btn{width:100%;margin:6px 0;text-align:left}
.clan-modal{max-width:620px!important}.clan-ability{border:1px solid var(--border);padding:12px;margin:10px 0}.clan-ability h4{margin:0 0 6px}.clan-req{font-size:12px;color:var(--parchment-dim)}
@media(max-width:800px){.battle-controls{grid-template-columns:1fr}.kekkei-panel{order:-1}}


/* --- v9.1 visual polish: player panel --- */
#panel-stats {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(226,87,43,.08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.08)),
    var(--ink-panel);
  border: 1px solid #454752;
  box-shadow: 0 18px 45px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
}
#panel-stats::before { content:"忍"; position:absolute; right:-14px; top:-30px; font-family:'Yuji Mai',serif; font-size:150px; color:rgba(226,87,43,.045); pointer-events:none; }
#panel-stats > h3 { position:relative; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.07); padding-bottom:10px; margin-bottom:12px; letter-spacing:1px; }
#stats-list { position:relative; display:grid; gap:9px; }
.stat-row { padding:8px 10px 9px; border:1px solid rgba(255,255,255,.055); border-radius:6px; background:rgba(0,0,0,.13); }
.stat-label { font-weight:700; letter-spacing:.3px; }
.stat-track { height:7px; margin-top:7px; border-radius:99px; background:#101116; border:1px solid rgba(255,255,255,.06); overflow:hidden; }
.stat-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--vermillion-dim),var(--vermillion)); box-shadow:0 0 10px rgba(226,87,43,.18); }
#money-label { position:relative; display:inline-block; padding:5px 9px; border:1px solid rgba(226,87,43,.22); border-radius:999px; background:rgba(226,87,43,.055); }

/* Map-event content lives exclusively in the popup. */
#escort-event { display:none !important; }
.escort-event-modal { width:min(94vw,570px); max-width:570px; padding:30px; border:1px solid #4b4d58; box-shadow:0 24px 80px rgba(0,0,0,.55); background:linear-gradient(145deg,#242631,#181a20); }
.escort-event-modal .escort-event-kicker { color:var(--vermillion); font-size:11px; letter-spacing:3px; font-weight:900; }
.escort-event-modal h3 { font-size:24px; line-height:1.2; margin:10px 0 14px; }
.escort-event-modal .hint { color:#c8c0ad; line-height:1.75; font-size:14px; }
#escort-event-modal-actions { display:grid; gap:10px; margin-top:22px; }
#escort-event-modal-actions .btn-primary { margin-top:0; }
#escort-event-modal-actions .mission-choice-btn { width:100%; text-align:left; }
#escort-event-modal-actions .mission-choice-btn .attack-power { color:var(--parchment-dim); margin-top:5px; line-height:1.45; }
.overlay { backdrop-filter: blur(5px); background:rgba(7,8,11,.78); }