/* =========================================================================
   Nações — estilo da interface
   Layouts: celular (padrão), tablet (≥ 768px) e computador (≥ 1100px).
   ========================================================================= */

:root {
  --wood-950: #140e09;
  --wood-900: #1d150e;
  --wood-800: #2b1f15;
  --wood-700: #3d2b1c;
  --wood-600: #5a3f28;
  --wood-500: #7a5636;
  --parch: #f7efdc;
  --parch-2: #ece0c3;
  --parch-3: #e2d2ae;
  --line: #d2bc8f;
  --line-2: #b89c6a;
  --ink: #33241a;
  --ink-2: #6b5641;
  --gold: #c9973a;
  --gold-2: #f0c75e;
  --gold-3: #ffe6ad;
  --green: #4a8a36;
  --green-2: #6aaa4f;
  --red: #b0392d;
  --blue: #2f6db0;
  --yellow: #d39e17;
  --radius: 14px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 6px rgba(60, 40, 20, .12);
  --font-title: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  --nav-h: 64px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(201, 151, 58, .16), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(90, 63, 40, .5), transparent 60%),
    var(--wood-900);
}
button { font: inherit; color: inherit; touch-action: manipulation; }
input, select, textarea { font-family: inherit; }

/* ---------- estrutura ---------- */
#app {
  max-width: 560px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "main" "nav";
  background:
    var(--tex-fundo, none) center top / auto,
    linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 120px),
    var(--parch-2);
  box-shadow: 0 0 60px rgba(0, 0, 0, .6);
  position: relative;
  overflow: hidden;
}
.topbar { grid-area: top; min-width: 0; }
#view { grid-area: main; min-width: 0; }
.tabbar { grid-area: nav; }

/* ---------- topo ---------- */
.topbar {
  position: relative;
  z-index: 5;
  background:
    var(--tex-topo, none) center / cover,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--wood-700), var(--wood-800));
  color: #f6e7c8;
  padding: calc(env(safe-area-inset-top) + 8px) 10px 9px;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 4px;
  background: linear-gradient(90deg, transparent, rgba(240, 199, 94, .55), transparent);
}
.vline { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.vname {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--font-title); font-weight: 700; font-size: 18px; color: var(--gold-3);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52%;
}
.vmeta { flex: 1; font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn {
  flex: none; width: 36px; height: 36px; border-radius: 11px; cursor: pointer; font-size: 17px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  border: 1px solid rgba(240, 199, 94, .35);
}
.icon-btn:hover { border-color: var(--gold-2); }
.test-badge { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--wood-800); background: var(--gold-2); border-radius: 8px; padding: 3px 7px; }
.sync-status { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #8a7a62; }
.sync-status[data-kind="ok"] { background: #6fcf6a; box-shadow: 0 0 6px #6fcf6a; }
.sync-status[data-kind="error"] { background: #f0a23c; }
.sync-status[data-kind="expired"] { background: #e05a4a; }
.raid-alert {
  flex: none; border: 0; cursor: pointer; font-size: 11px; color: #fff; border-radius: 9px; padding: 5px 9px;
  background: linear-gradient(180deg, #c84a3c, #9e2c22); animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(176, 57, 45, .35); } }

/* barra de recursos: só ícone e quantidade (detalhes no balão) */
.resbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.res {
  display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; cursor: pointer;
  height: 36px; padding: 0 6px; border-radius: 12px; color: #fff3d6;
  background: linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .22));
  border: 1px solid rgba(240, 199, 94, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: border-color .15s, transform .1s;
}
.res:hover { border-color: rgba(240, 199, 94, .6); }
.res:active { transform: scale(.97); }
.res .ri { display: grid; place-items: center; flex: none; }
.res .ri .ico { width: 22px; height: 22px; }
.res .val { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res.full .val { color: #ff9b7b; }
.res.full { border-color: rgba(255, 155, 123, .5); }
.ico { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.ico.sm { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.res-over {
  position: fixed; z-index: 70; width: 240px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  background: rgba(29, 21, 14, .97); color: #f6e7c8; border: 1px solid var(--gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s, transform .15s;
}
.res-over.show { opacity: 1; transform: none; }
.res-over b { display: block; color: var(--gold-3); margin-bottom: 2px; }
.res-over .meta { color: #cdb995; }
.good { color: #6fbf5a; font-weight: 700; }
.res-over .good { color: #8fdc76; }
.bad { color: #ff8a73; font-weight: 700; }

/* ---------- conteúdo ---------- */
#view { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 12px 28px; position: relative; }
#view.flush { padding: 0; overflow: hidden; }

/* ---------- menu ---------- */
.tabbar {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--tex-menu, none) center / cover, linear-gradient(180deg, var(--wood-800), var(--wood-900));
  border-top: 3px solid var(--gold);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .3);
  z-index: 5;
}
.tab {
  position: relative; background: none; border: 0; cursor: pointer;
  color: #bba57c; height: var(--nav-h); font-size: 10px; font-weight: 600; letter-spacing: .1px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: color .15s, background .15s;
}
.tab .ti { font-size: 21px; filter: grayscale(.55) brightness(.95); transition: filter .15s, transform .15s; }
.tab:hover { color: #e8d3a4; }
.tab.active { color: var(--gold-3); background: radial-gradient(ellipse at 50% 100%, rgba(240, 199, 94, .22), transparent 70%); }
.tab.active .ti { filter: none; transform: translateY(-1px) scale(1.06); }
.tab.active::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold-2); }
.badge {
  position: absolute; top: 5px; left: calc(50% + 6px);
  background: var(--red); color: #fff; font-size: 10px; font-weight: 800; font-style: normal;
  border-radius: 9px; padding: 1px 5px; min-width: 17px; text-align: center; box-shadow: 0 0 0 2px var(--wood-800);
}

/* ---------- elementos comuns ---------- */
h2.sec {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-title); font-size: 15px; color: var(--wood-600);
  margin: 20px 2px 10px; letter-spacing: .4px;
}
h2.sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
h2.sec.danger { color: var(--red); }
h4 { font-family: var(--font-title); color: var(--wood-600); margin: 16px 0 6px; font-size: 14px; }

.card {
  display: block; width: 100%; text-align: left;
  background: var(--tex-pergaminho, none) center / cover, linear-gradient(180deg, #fbf5e6, var(--parch));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow);
}
.card.flat { box-shadow: none; background: var(--parch); }
.meta { font-size: 12px; color: var(--ink-2); }
.center { text-align: center; }
.mt { margin-top: 12px; }
.grow { flex: 1; min-width: 0; }
.warn { color: var(--red); font-weight: 600; }
.req { font-size: 12px; color: var(--red); font-weight: 600; margin-top: 6px; }
.locked { opacity: .6; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 2px 7px; background: var(--parch-2); border: 1px solid var(--line); color: var(--ink-2); }
.tag.ok { background: #e3f0d8; border-color: #b9d6a2; color: var(--green); }
.warnbox { background: #fbe7d9; border: 1px solid #e8b796; color: #8a3b1c; border-radius: 10px; padding: 9px 11px; font-size: 12px; margin: 8px 0; }
.grid { display: block; }

.btn {
  border: 0; border-radius: 11px; padding: 10px 15px; cursor: pointer; font-weight: 800; white-space: nowrap; letter-spacing: .2px;
  background: linear-gradient(180deg, var(--green-2), var(--green)); color: #fff;
  box-shadow: 0 2px 0 #2c561f, inset 0 1px 0 rgba(255, 255, 255, .25);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  transition: filter .12s, transform .08s;
}
.btn:hover:not(:disabled) { filter: brightness(1.07); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #2c561f; }
.btn:disabled { background: #c3b79f; box-shadow: none; cursor: not-allowed; color: #f4efe4; text-shadow: none; }
.btn.red { background: linear-gradient(180deg, #cc5040, #a3352a); box-shadow: 0 2px 0 #6a2019, inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn.gold { background: linear-gradient(180deg, #e6b552, #c08a26); box-shadow: 0 2px 0 #7d5a14, inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn.ghost { background: linear-gradient(180deg, #fbf5e6, var(--parch-2)); color: var(--ink); box-shadow: 0 2px 0 var(--line); border: 1px solid var(--line); text-shadow: none; }
.btn.red:disabled, .btn.gold:disabled { background: #c3b79f; box-shadow: none; }
.btn.sm { padding: 7px 11px; font-size: 12px; }
.btn.block { display: block; width: 100%; }
.x { flex: none; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--parch-2); cursor: pointer; color: var(--red); font-weight: 700; }
.link { background: none; border: 0; color: var(--blue); cursor: pointer; padding: 4px; font-weight: 600; }
.row-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.row-actions > .btn.grow { flex: 1 1 140px; }

.num {
  width: 86px; padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 16px; text-align: center; background: #fffdf7; color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(60, 40, 20, .08);
}
.num.text { text-align: left; }
.num:focus, .sel:focus, .field input:focus { outline: 2px solid var(--gold); outline-offset: 0; }
textarea.num { width: 100%; text-align: left; min-height: 90px; resize: vertical; font-size: 15px; }
.sel { padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf7; font-size: 15px; color: var(--ink); }
.seg { display: flex; gap: 6px; margin-top: 8px; }
.seg button { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--parch-2); font-weight: 700; cursor: pointer; }
.seg button.on { background: var(--wood-600); color: #fff; border-color: var(--wood-600); }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; margin-top: 10px; }
.trade-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.trade-row > span:first-child { flex: 1; font-weight: 600; font-size: 13px; }

/* barras de progresso e filas */
.bar { height: 8px; background: var(--parch-2); border-radius: 5px; overflow: hidden; margin: 6px 0 4px; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width .5s linear; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.qitem + .qitem { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.qrow { display: flex; align-items: center; gap: 8px; }
.qname { flex: 1; font-weight: 700; min-width: 0; }
.qtime { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--wood-600); }
.bprog { background: var(--parch-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.bprog .bar { background: #fffdf7; }
.cmd.att .bar i { background: linear-gradient(90deg, #c64a3c, #e07a5f); }
.cmd.ret .bar i { background: linear-gradient(90deg, #4e8a3a, #7cb862); }
.cmd.mov .bar i { background: linear-gradient(90deg, var(--blue), #6b9be0); }
.cmd.mer .bar i { background: linear-gradient(90deg, #c08a26, #e8c25e); }
.cmd.raid { border-color: #e2a397; background: linear-gradient(180deg, #fdf1ec, #fbeee9); }
.cmd.raid .bar i { background: linear-gradient(90deg, #7a1f17, #c64a3c); }
.prot { font-size: 13px; background: linear-gradient(180deg, #eef4fa, #e4edf6); border-color: #b8cde2; }

/* custos */
.cost { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 600; }
.cost.big { font-size: 15px; font-weight: 800; }
.cost-item { display: inline-flex; align-items: center; gap: 2px; }
.cost-item.lack { color: var(--red); font-weight: 800; }
.res-inline { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.utotal { margin: 3px 0 0; }

/* edifícios */
.bcard { display: grid; grid-template-columns: 52px 1fr; gap: 12px; }
.bicon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 27px; padding: 0;
  background: radial-gradient(circle at 35% 30%, #fff8e6, var(--parch-2)); border: 1px solid var(--line);
  box-shadow: inset 0 -3px 0 rgba(120, 90, 50, .12);
}
button.bicon { cursor: pointer; }
.bcard.unbuilt .bicon { filter: grayscale(.7); opacity: .75; }
.bhead { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.bname { font-weight: 800; font-size: 15px; }
.lvl { flex: none; font-size: 11px; font-weight: 700; background: linear-gradient(180deg, var(--wood-500), var(--wood-600)); color: #fff; border-radius: 8px; padding: 2px 8px; }
.unbuilt .lvl { background: #a8987c; }
.bdesc { font-size: 12px; color: var(--ink-2); margin: 3px 0 6px; line-height: 1.4; }
.binfo { font-size: 12px; color: var(--green); font-weight: 800; margin-bottom: 6px; }
.bfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }

/* unidades */
.uhead { display: flex; align-items: center; gap: 10px; }
.uicon { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 25px; background: radial-gradient(circle at 35% 30%, #fff8e6, var(--parch-2)); border: 1px solid var(--line); }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 6px 0 8px; }
.stats span { background: var(--parch-2); border-radius: 8px; padding: 4px 2px; text-align: center; font-weight: 800; font-size: 13px; display: flex; flex-direction: column; }
.stats small { font-size: 8.5px; color: var(--ink-2); font-weight: 700; letter-spacing: .2px; }
.rrow { display: flex; gap: 8px; margin-top: 10px; }

/* herói / números em destaque */
.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; padding: 10px; }
.hero-stats > div { text-align: center; background: linear-gradient(180deg, #f3e9d1, var(--parch-2)); border: 1px solid var(--line); border-radius: 11px; padding: 7px 4px; }
.hero-stats b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.hero-stats small { font-size: 11px; color: var(--ink-2); }
.hero-stats.flat { padding: 0; margin: 10px 0; background: none; border: 0; }

/* praça */
.troops { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 10px 6px; }
.troop { display: flex; flex-direction: column; align-items: center; text-align: center; }
.troop .ti { font-size: 24px; }
.troop b { font-size: 15px; font-variant-numeric: tabular-nums; }
.troop small { font-size: 10px; color: var(--ink-2); line-height: 1.1; }

/* relatórios */
.ritem { display: flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; color: inherit; transition: transform .08s; }
.ritem:active { transform: scale(.99); }
.ritem .rtitle { flex: 1; min-width: 0; }
.ritem.unread .rtitle { font-weight: 800; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.dot.blue { background: var(--blue); } .dot.green { background: var(--green); } .dot.yellow { background: var(--yellow); } .dot.red { background: var(--red); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--ink-2); margin: 14px 4px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend .dot { width: 9px; height: 9px; }
.report-banner { margin: 0 -16px 10px; padding: 11px 16px; color: #fff; font-weight: 700; font-family: var(--font-title); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.report-banner.blue { background: linear-gradient(90deg, #2f6db0, #3f85cc); }
.report-banner.green { background: linear-gradient(90deg, #4a8a36, #63a44b); }
.report-banner.yellow { background: linear-gradient(90deg, #c08a12, #dca72b); }
.report-banner.red { background: linear-gradient(90deg, #a3352a, #c64a3c); }
.report-banner.inline { margin: 0 0 8px; border-radius: 10px; }
.utable { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.utable th, .utable td { padding: 5px 3px; text-align: center; border-bottom: 1px solid var(--line); }
.utable td:first-child { text-align: left; color: var(--ink-2); font-size: 12px; }
.utable th { font-size: 18px; }
.utable .loss td { color: var(--red); }

.empty { text-align: center; padding: 44px 20px; }
.empty-icon { font-size: 60px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); }

/* ---------- cena da aldeia ---------- */
.scene-wrap { position: relative; margin: -14px -12px 0; border-bottom: 3px solid var(--gold); background: #7ea552; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.scene { height: min(60vh, 560px); min-height: 300px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.scene-svg { display: block; width: 100%; height: 100%; cursor: grab; }
.scene-svg:active { cursor: grabbing; }
.scene .bld { cursor: pointer; transition: filter .15s; }
.scene .bld:hover { filter: brightness(1.1) drop-shadow(0 0 6px rgba(255, 230, 160, .7)); }
.scene .plot { cursor: pointer; }
.scene .plot-fill { opacity: .6; }
.scene .plot-line { stroke: #fffdf2; stroke-width: 2.4; stroke-dasharray: 9 7; opacity: .95; }
.scene .plot-plus { fill: #4a2e1a; stroke: #e0b25a; stroke-width: 2.2; }
.scene .plot:hover .plot-fill { opacity: .9; }
.scene .lvl-badge { pointer-events: none; }
.scene .lvl-badge text { font: 800 11.5px var(--font); fill: #fff6e0; }
.scene .build-timer { pointer-events: none; }
.scene .build-timer rect { fill: rgba(29, 21, 14, .92); stroke: #d4a23c; stroke-width: 1.5; }
.scene .build-timer text { font: 800 11px var(--font); fill: #fff3d6; }
.scene .build-timer.wait rect { stroke: #a8987c; }
.scene-tools { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.scene-tools .chip { width: 40px; height: 40px; padding: 0; font-size: 18px; font-weight: 700; }
.chip { pointer-events: auto; border: 1px solid rgba(240, 199, 94, .35); cursor: pointer; background: rgba(29, 21, 14, .88); color: #f6e7c8; border-radius: 20px; padding: 7px 12px; font-size: 12px; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.chip:hover { border-color: var(--gold-2); }
.chip.ghost { pointer-events: none; opacity: .9; }

/* ---------- mapa ---------- */
.map-wrap { position: absolute; inset: 0; }
.map-scroll { position: absolute; inset: 0; overflow: auto; background: #4f7d36; cursor: grab; -webkit-overflow-scrolling: touch; }
.map-scroll.dragging { cursor: grabbing; }
.map-world {
  --t: 64px;
  position: relative;
  /* mesma grama da aldeia (#7eae42), com manchas suaves e a grade dos campos bem discreta */
  background-color: #7eae42;
  background-image:
    radial-gradient(ellipse 220px 120px at 20% 30%, rgba(100, 150, 58, .45), transparent 70%),
    radial-gradient(ellipse 260px 140px at 75% 65%, rgba(143, 190, 82, .45), transparent 70%),
    radial-gradient(ellipse 160px 90px at 50% 90%, rgba(100, 150, 58, .35), transparent 70%),
    linear-gradient(rgba(40, 60, 20, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 60, 20, .05) 1px, transparent 1px);
  background-size: 700px 600px, 800px 700px, 540px 460px, var(--t) var(--t), var(--t) var(--t);
}
.map-terrain { position: absolute; left: 0; top: 0; pointer-events: none; }
.decor { position: absolute; width: calc(var(--t) * .78); height: calc(var(--t) * .78); margin: calc(var(--t) * .11); pointer-events: none; overflow: visible; }
.vil {
  position: absolute; width: var(--t); height: var(--t); border: 0; background: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: visible;
}
.vil .vart {
  position: absolute; left: 50%; top: 50%; width: calc(var(--t) * 1.94); height: calc(var(--t) * 1.45); transform: translate(-50%, -60%);
  pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); overflow: visible;
}
.vil .vl {
  position: relative; z-index: 1; margin-bottom: -6px; font-size: 10px; font-weight: 800; color: #fff;
  border-radius: 7px; padding: 1px 6px; background: rgba(40, 25, 12, .82); white-space: nowrap;
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.vil.mine .vl { background: #2f5fb0; }
.vil.mine.current .vl { background: #1f4fa0; box-shadow: 0 0 0 2px var(--gold-2); }
.vil.mine::before, .vil.player::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--t) * 1.4); height: calc(var(--t) * .7);
  transform: translate(-50%, -30%); border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .7);
}
.vil.mine:not(.current)::before { border-color: rgba(240, 199, 94, .7); }
.vil.player::before { border-color: rgba(208, 97, 30, .7); }
.vil.player .vl { background: #b4521c; }
.vil.rel-tribe .vl { background: #3f8f3a; } .vil.rel-ally .vl { background: #1f9bb5; }
.vil.rel-nap .vl { background: #7a4fb0; } .vil.rel-enemy .vl { background: #c0392b; }
.vil.rel-tribe::before { border-color: rgba(63, 143, 58, .8); } .vil.rel-enemy::before { border-color: rgba(192, 57, 43, .8); }
.vil.targeted::after { content: '⚔️'; position: absolute; top: -10px; right: -6px; font-size: 16px; z-index: 2; }
.map-tools { position: absolute; top: 10px; left: 10px; right: 64px; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.map-zoom { position: absolute; right: 10px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.map-zoom .chip { width: 46px; height: 46px; padding: 0; font-size: 22px; font-weight: 700; display: grid; place-items: center; }
.map-legend { font-size: 11px; }
.map-overlay { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.map-overlay .faith { stroke-width: 2; stroke-dasharray: 8 6; }
.map-overlay .faith.foe { fill: rgba(176, 57, 45, .08); stroke: rgba(176, 57, 45, .55); }
.map-overlay .faith.own { fill: rgba(47, 95, 176, .08); stroke: rgba(47, 95, 176, .6); }
.map-overlay .route { stroke-width: 3; stroke-dasharray: 9 7; stroke-linecap: round; animation: march 1s linear infinite; }
.map-overlay .route.att { stroke: #b0392d; } .map-overlay .route.ret { stroke: #3f7d2c; }
.map-overlay .route.mov { stroke: #2f5fb0; } .map-overlay .route.mer { stroke: #b8862a; }
.map-overlay .route.raid { stroke: #4a1410; stroke-width: 3.5; }
@keyframes march { to { stroke-dashoffset: -16; } }
.cmd-marker {
  position: absolute; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none;
  display: grid; place-items: center; font-size: 15px; border-radius: 50%;
  background: #fff8e8; border: 2px solid #b0392d; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: left .5s linear, top .5s linear;
}
.cmd-marker.ret { border-color: #3f7d2c; } .cmd-marker.mov { border-color: #2f5fb0; }
.cmd-marker.mer { border-color: #b8862a; } .cmd-marker.raid { border-color: #4a1410; background: #f3d6d0; }

/* ---------- painel (bottom sheet / gaveta) ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; display: none; }
.sheet.open { display: block; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(10, 6, 3, .5); animation: fade .2s; backdrop-filter: blur(1.5px); }
.sheet-panel {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 560px; max-height: 88dvh; overflow-y: auto;
  background: var(--tex-painel, none) center top / cover, linear-gradient(180deg, #fbf5e6, var(--parch) 120px);
  border-top: 3px solid var(--gold); border-radius: 20px 20px 0 0;
  padding: 6px 16px calc(18px + env(safe-area-inset-bottom));
  animation: up .25s ease-out; box-shadow: 0 -10px 40px rgba(0, 0, 0, .4);
}
.sheet-handle { display: block; width: 44px; height: 5px; border-radius: 3px; border: 0; padding: 0; background: var(--line); margin: 6px auto 12px; cursor: pointer; }
.sheet-title { display: flex; align-items: center; gap: 12px; }
.sheet-title h3 { margin: 0; font-family: var(--font-title); font-size: 18px; }
.sheet-title .big { font-size: 40px; }
@keyframes up { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.arow { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.arow + .arow { border-top: 1px dashed var(--line); }
.aname { flex: 1; font-weight: 600; }

/* ---------- avisos ---------- */
#toasts { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 104px); width: min(92vw, 420px); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast { background: rgba(29, 21, 14, .95); color: #fbecc9; border-left: 4px solid var(--gold); border-radius: 11px; padding: 10px 12px; font-size: 13px; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); animation: drop .25s ease-out; transition: opacity .4s, transform .4s; }
.toast.red { border-left-color: #e0604f; } .toast.green { border-left-color: #7cb862; }
.toast.yellow { border-left-color: var(--yellow); } .toast.blue { border-left-color: #5b9be0; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- painéis especiais ---------- */
.welcome { text-align: center; }
.welcome .big { font-size: 64px; }
.welcome h3 { font-family: var(--font-title); font-size: 22px; margin: 4px 0 8px; }
.welcome ol { text-align: left; padding-left: 22px; line-height: 1.5; }
.welcome li { margin-bottom: 6px; }
.coins .qrow { margin-bottom: 4px; }
.rsrch { padding: 10px; margin-bottom: 6px; }
.items, .medals { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.item, .medal { display: flex; align-items: flex-start; gap: 10px; background: var(--parch); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; }
.item .ii { font-size: 22px; width: 32px; text-align: center; }
.item.missing { opacity: .55; }
.item.eq { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 151, 58, .3); }
.medal .mi { font-size: 26px; width: 36px; text-align: center; filter: grayscale(1); opacity: .45; }
.medal.got .mi { filter: none; opacity: 1; }
.medal.got { border-color: var(--gold); background: #fbf3dc; }
.medal.mp { opacity: .6; }
.medal .bar { margin-top: 4px; }
.pips { display: flex; gap: 3px; }
.pips i { width: 10px; height: 10px; border-radius: 50%; background: var(--parch-2); border: 1px solid var(--line); }
.pips i.on { background: var(--gold); border-color: #a87a20; }
.sim-row { display: grid; grid-template-columns: 1fr 80px 80px; gap: 6px; align-items: center; padding: 3px 0; }
.sim-row small { font-size: 11px; color: var(--ink-2); }
.sim-row.head b { text-align: center; font-size: 12px; }
.sim-row .num { width: 100%; padding: 6px; }
.ranking { padding: 6px 10px; }
.rk { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 13px; }
.rk + .rk { border-top: 1px dashed var(--line); }
.rk.me { color: var(--blue); }

/* tribo */
.tribe-head { display: flex; gap: 12px; align-items: center; }
.tribe-tag { flex: none; min-width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center; padding: 0 6px; background: linear-gradient(180deg, var(--wood-600), var(--wood-800)); color: var(--gold-3); font-family: var(--font-title); font-weight: 700; font-size: 15px; border: 2px solid var(--gold); box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.tribe-head h3 { margin: 0; font-family: var(--font-title); font-size: 18px; }
.announce { background: linear-gradient(180deg, #fff8df, #fff2cc); border: 1px solid #e8cf86; border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-bottom: 10px; white-space: pre-wrap; }
.subtabs { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 12px; padding-bottom: 2px; scrollbar-width: none; }
.subtabs button { flex: none; padding: 8px 13px; border-radius: 20px; border: 1px solid var(--line); background: var(--parch); font-weight: 700; font-size: 13px; cursor: pointer; }
.subtabs button.on { background: var(--wood-600); color: #fff; border-color: var(--wood-600); }
.member { display: flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.member .roles { font-size: 13px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #b8ab92; flex: none; }
.online-dot.on { background: #4caf50; box-shadow: 0 0 5px #4caf50; }
.rel-tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 2px 7px; color: #fff; margin-top: 4px; }
.rel-tribe { background: #3f8f3a; } .rel-ally { background: #1f9bb5; } .rel-nap { background: #7a4fb0; } .rel-enemy { background: #c0392b; }
.forum-thread { display: flex; gap: 10px; align-items: center; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.forum-thread.unread .rtitle { font-weight: 800; }
.post { background: var(--parch); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.post .ph { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.post .pb { font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
.role-check { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }

/* amigos e conversas */
.avatar {
  --h: 30; position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-title); font-weight: 700; font-size: 18px; color: #fff;
  background: linear-gradient(160deg, hsl(var(--h) 45% 48%), hsl(var(--h) 50% 32%));
  border: 2px solid var(--gold); box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}
.avatar .on-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #b8ab92; border: 2px solid var(--parch); }
.avatar .on-dot.on { background: #4caf50; }
.friend, .friend-req { display: flex; align-items: center; gap: 10px; }
.friend-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.chat-btn { position: relative; }
.chat-btn .badge { top: -6px; left: auto; right: -6px; box-shadow: none; }
.profile-head { display: flex; align-items: center; gap: 12px; }
.profile-head .avatar { width: 58px; height: 58px; font-size: 24px; }
.profile-head h3 { margin: 0; font-family: var(--font-title); font-size: 20px; }
.medal-row { display: flex; flex-wrap: wrap; gap: 6px; }
.medal-chip { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 22px; background: #fbf3dc; border: 1px solid var(--gold); }
.medal-chip small { position: absolute; right: -4px; bottom: -4px; background: var(--wood-600); color: #fff; font-size: 9px; font-weight: 800; border-radius: 6px; padding: 0 4px; }
.sheet-panel.chat-mode { height: 86dvh; display: flex; flex-direction: column; overflow: hidden; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.sheet-panel.chat-mode #sheet-content { flex: 1; display: flex; min-height: 0; }
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.chat-log { flex: 1; overflow-y: auto; padding: 12px 2px; display: flex; flex-direction: column; gap: 6px; }
.chat-day { align-self: center; font-size: 11px; color: var(--ink-2); background: var(--parch-2); border-radius: 10px; padding: 2px 10px; margin: 6px 0; }
.bubble { max-width: 80%; align-self: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 8px 12px; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.bubble.mine { align-self: flex-end; background: linear-gradient(180deg, #e7f3db, #d9ecc8); border-color: #b9d6a2; border-radius: 16px 16px 4px 16px; }
.bubble small { display: block; text-align: right; font-size: 10px; color: var(--ink-2); margin-top: 2px; }
.chat-input { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.chat-input .num { flex: 1; width: auto; }

/* ---------- tela de entrada ---------- */
.auth {
  min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; align-items: flex-start;
  background: radial-gradient(ellipse at 50% 0%, rgba(240, 199, 94, .18), transparent 60%), linear-gradient(180deg, #2e2016, #1a120b);
  padding: calc(env(safe-area-inset-top) + 24px) 16px 32px;
}
.auth-box { width: 100%; max-width: 420px; }
.auth-hero { text-align: center; color: #f6e7c8; margin: 8px 0 18px; }
.auth-castle { font-size: 64px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.auth-hero h1 { font-family: var(--font-title); font-size: 38px; margin: 4px 0; color: var(--gold-3); letter-spacing: 1px; }
.auth-hero p { margin: 0; opacity: .75; font-size: 14px; }
.auth-card { background: var(--parch); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 18px; padding: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.auth-tabs { margin: 0 0 14px; }
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.field small { display: block; color: var(--ink-2); font-size: 11px; margin-top: 4px; }
.field input { width: 100%; padding: 12px; font-size: 16px; color: var(--ink); background: #fffdf7; border: 1px solid var(--line); border-radius: 10px; }
.pw { position: relative; }
.pw input { padding-right: 46px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 18px; cursor: pointer; padding: 6px; }
.strength { height: 5px; background: var(--parch-2); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.strength i { display: block; height: 100%; width: 0; transition: width .2s; background: var(--red); }
.strength i[data-level="ok"] { background: var(--yellow); }
.strength i[data-level="strong"] { background: var(--green); }
.auth-error { background: #fbe7d9; border: 1px solid #e8b796; color: #8a3b1c; border-radius: 10px; padding: 9px 11px; font-size: 13px; margin-bottom: 12px; }
.auth-submit { padding: 13px; font-size: 16px; }
.auth-forgot { display: block; margin: 10px auto 0; font-size: 13px; }
.auth-q { font-family: var(--font-title); margin: 0 0 10px; }

/* =========================================================================
   Tablet (≥ 768px): conteúdo mais largo, listas em duas colunas
   ========================================================================= */
@media (min-width: 768px) {
  :root { --nav-h: 70px; }
  body { font-size: 15px; }
  #app { max-width: 1024px; border-left: 1px solid var(--wood-700); border-right: 1px solid var(--wood-700); }
  .topbar { padding: calc(env(safe-area-inset-top) + 10px) 18px 11px; }
  .vname { font-size: 21px; max-width: 40%; }
  .resbar { gap: 10px; max-width: 760px; }
  .res { height: 40px; }
  .res .val { font-size: 15px; }
  #view { padding: 18px 22px 36px; }
  .scene-wrap { margin: -18px -22px 0; }
  .scene { height: min(62vh, 640px); }
  .tab { font-size: 11px; }
  .tab .ti { font-size: 23px; }
  .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; align-items: start; }
  .troops { grid-template-columns: repeat(7, 1fr); }
  .sheet-panel { max-width: 640px; bottom: 50%; transform: translate(-50%, 50%); border-radius: 20px; border: 1px solid var(--line); border-top: 3px solid var(--gold); max-height: 86dvh; animation: pop .2s ease-out; }
  @keyframes pop { from { opacity: 0; transform: translate(-50%, 52%) scale(.97); } to { opacity: 1; transform: translate(-50%, 50%); } }
  #toasts { top: calc(env(safe-area-inset-top) + 112px); }
}

/* =========================================================================
   Computador (≥ 1100px): menu no canto direito, mapa e aldeia grandes,
   painéis abrem como gaveta lateral
   ========================================================================= */
@media (min-width: 1100px) {
  #app {
    max-width: none; border: 0;
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "top top" "main nav";
  }
  .topbar { padding: 12px 26px 12px; display: flex; align-items: center; gap: 24px; }
  .topbar .vline { flex: 1; min-width: 0; }
  .vname { font-size: 23px; max-width: 45%; }
  .resbar { margin-top: 0; width: 640px; flex: none; }
  .tabbar {
    grid-template-columns: 1fr; grid-auto-rows: 84px; align-content: start;
    border-top: 0; border-left: 3px solid var(--gold); padding: 10px 0;
    background: var(--tex-menu, none) center / cover, linear-gradient(90deg, var(--wood-800), var(--wood-900));
    box-shadow: -4px 0 12px rgba(0, 0, 0, .3);
  }
  .tab { height: 84px; font-size: 12px; gap: 5px; }
  .tab .ti { font-size: 27px; }
  .tab.active::before { top: 18%; bottom: 18%; left: 0; right: auto; width: 4px; height: auto; border-radius: 0 3px 3px 0; }
  .badge { top: 12px; left: calc(50% + 10px); }
  #app { --pad: max(28px, calc((100vw - 96px - 1180px) / 2)); }
  #view { padding: 22px var(--pad) 40px; }
  #view.flush { padding: 0; }
  .scene-wrap { margin: -22px calc(-1 * var(--pad)) 0; }
  .scene { height: 70vh; max-height: none; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
  .map-zoom .chip { width: 50px; height: 50px; }
  .sheet-backdrop { background: rgba(10, 6, 3, .35); }
  .sheet-panel {
    left: auto; right: 96px; top: 0; bottom: 0; transform: none; width: 460px; max-width: 460px; max-height: none; height: 100%;
    border-radius: 0; border: 0; border-left: 3px solid var(--gold); animation: slide .22s ease-out;
    padding: 10px 22px 24px;
  }
  .sheet-panel.chat-mode { height: 100%; }
  .sheet-handle { display: none; }
  @keyframes slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  #toasts { top: 86px; left: auto; right: 120px; transform: none; width: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Celular estreito: o armazém sai da barra (a capacidade aparece no balão de cada recurso) */
@media (max-width: 479px) {
  .resbar { grid-template-columns: repeat(3, 1fr) 1.25fr; gap: 5px; }
  #res-cap { display: none; }
  .res { gap: 3px; padding: 0 5px; }
  .res .ri .ico { width: 19px; height: 19px; }
  .res .val { font-size: 13px; }
}

/* ---------- ícones da interface em arquivo (jogo/assets/icones) ---------- */
.gi { width: 1.25em; height: 1.25em; vertical-align: -.25em; object-fit: contain; }
.tab .ti .gi { width: 26px; height: 26px; vertical-align: middle; }
.bicon .gi { width: 34px; height: 34px; }
.uicon .gi { width: 32px; height: 32px; }
.troop .ti .gi, .item .ii .gi, .medal .mi .gi { width: 28px; height: 28px; }
.medal-chip .gi { width: 26px; height: 26px; }
.utable th .gi { width: 22px; height: 22px; }
.icon-btn .gi { width: 20px; height: 20px; vertical-align: middle; }
.cmd-marker .gi { width: 18px; height: 18px; }
.auth-castle .logo { width: 120px; height: 120px; vertical-align: middle; }
@media (min-width: 1100px) { .tab .ti .gi { width: 32px; height: 32px; } }

/* ---------- aba Edifícios (só no computador) ---------- */
.tab.tab-desk { display: none; }
@media (min-width: 1100px) {
  .tab.tab-desk { display: flex; }
  .tabbar { grid-auto-rows: 78px; }
  .tab { height: 78px; }
}
h2.sec.first { margin-top: 4px; }

/* ---------- aldeia ocupando a tela inteira (computador) ---------- */
.scene-wrap.full { margin: 0; height: 100%; border-bottom: 0; box-shadow: none; }
.scene-wrap.full .scene { height: 100%; min-height: 0; }
.scene-stats {
  position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; pointer-events: none;
}
.scene-stats span { background: rgba(29, 21, 14, .85); color: #f6e7c8; border: 1px solid rgba(240, 199, 94, .35); border-radius: 16px; padding: 6px 11px; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.scene-stats b { color: var(--gold-3); font-variant-numeric: tabular-nums; }

/* ---------- barra da fila de obras (computador: ao lado dos recursos; celular: em cima da aldeia) ---------- */
.queue-slot:empty { display: none; }
.queue-bar {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; cursor: pointer; text-align: left;
  height: 40px; padding: 0 10px 0 8px; border-radius: 12px; color: #fff3d6; font: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .38));
  border: 1px solid rgba(240, 199, 94, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.queue-bar:hover { border-color: var(--gold-2); }
.queue-bar.busy { border-color: rgba(122, 214, 92, .55); }
.queue-bar .qb-ico .gi { width: 22px; height: 22px; vertical-align: middle; }
.queue-bar .qb-idle { font-size: 12.5px; color: #cdb995; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-bar .qb-up { flex: none; width: 20px; height: 24px; position: relative; overflow: hidden; }
.queue-bar .qb-up .gi { position: absolute; left: 0; bottom: 0; width: 20px; height: 20px; animation: qb-rise 1.4s ease-in-out infinite; }
@keyframes qb-rise {
  0% { transform: translateY(14px); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(-14px); opacity: 0; }
}
.queue-bar .qb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.queue-bar .qb-line { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; line-height: 1.1; }
.queue-bar .qb-what { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.queue-bar .qb-what b { overflow: hidden; text-overflow: ellipsis; }
.queue-bar .qb-what small { color: #9fe07f; font-weight: 800; }
.queue-bar .qb-what .gi, .queue-bar .qb-what img { width: 17px; height: 17px; flex: none; }
.queue-bar .qb-time { flex: none; font-weight: 800; color: var(--gold-3); font-variant-numeric: tabular-nums; }
.queue-bar .bar { height: 5px; margin: 0; border: 0; background: rgba(255, 255, 255, .16); }
.queue-bar .bar > i, .queue-bar .bar > span, .queue-bar .bar > div { background: linear-gradient(90deg, #4fae2f, #8fe066); }
.queue-bar .qb-more { flex: none; font-style: normal; font-size: 11px; font-weight: 800; color: var(--wood-800); background: var(--gold-2); border-radius: 9px; padding: 2px 6px; }
/* barra das tropas: barra laranja-dourada para diferenciar das obras */
.queue-bar.qb-tropas { border-color: rgba(240, 199, 94, .55); }
.queue-bar.qb-tropas .bar > i { background: linear-gradient(90deg, #c98a1e, #f0c75e); }
.queue-bar .qb-what .uicon, .queue-bar .qb-what .uicon .gi { width: 17px; height: 17px; }
/* celular: no canto de cima da aldeia, onde ficava a dica; obras e tropas uma embaixo da outra */
.scene-queue { position: absolute; left: 10px; top: 10px; width: min(300px, calc(100% - 72px)); display: flex; flex-direction: column; gap: 5px; }
.scene-queue.two .queue-bar { height: 36px; }
.top-queue { display: none; }
@media (max-width: 1099px) { .vmeta { visibility: hidden; } }
@media (min-width: 1100px) {
  .top-queue { display: flex; flex-direction: column; gap: 4px; width: 290px; flex: none; }
  /* obras e tropas juntas: duas barras finas empilhadas na altura do topo */
  .top-queue.two { margin: -6px 0; }
  .top-queue.two { gap: 3px; }
  .top-queue.two .queue-bar { height: 26px; border-radius: 9px; gap: 6px; }
  .top-queue.two .qb-main { gap: 2px; }
  .top-queue.two .qb-line { font-size: 11.5px; }
  .top-queue.two .bar { height: 3px; }
  .top-queue.two .qb-up { width: 16px; height: 20px; }
  .top-queue.two .qb-up .gi { width: 16px; height: 16px; }
  .top-queue.two .qb-what .gi, .top-queue.two .qb-what img { width: 15px; height: 15px; }
  .topbar .resbar { width: 560px; }
}

/* ---------- edifícios por tipo ---------- */
.bgroups {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 14px -12px 2px; padding: 8px 12px;
  position: sticky; top: -14px; z-index: 3;
  background: linear-gradient(var(--parch-2) 75%, transparent);
}
.bgroups::-webkit-scrollbar { display: none; }
.bgroups button {
  flex: none; padding: 7px 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--parch);
  font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; gap: 5px;
}
.bgroups button.on { background: var(--wood-600); color: #fff; border-color: var(--wood-600); }
.bgroups .gi { width: 18px; height: 18px; }
h2.sec.bgroup-title .gi { width: 22px; height: 22px; }
@media (min-width: 768px) { .bgroups { margin: 16px -22px 2px; padding: 8px 22px; top: -18px; } }
@media (min-width: 1100px) { .bgroups { margin: 10px 0 2px; padding: 8px 0; top: -22px; } }

/* ---------- aldeia de onde saem os bandidos ---------- */
.vil.raid-src::after {
  content: '🏴'; position: absolute; top: -12px; right: -8px; font-size: 16px; z-index: 2;
  animation: raidpulse 1.4s ease-in-out infinite;
}
.vil.raid-src .vl { background: #4a1410; }
@keyframes raidpulse { 50% { transform: scale(1.25); } }

/* ---------- modo leve (desempenho) ---------- */
/* Aldeia: imagem com sobra em volta; o arraste só desloca a imagem pronta */
.scene { position: relative; }
.scene-svg.perf { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; will-change: transform; }
.scene-svg.moving { cursor: grabbing; }
.scene-svg.moving [filter] { filter: none; }
/* Mapa: pedaços sem caixa própria (as peças continuam posicionadas no mapa); rotas param enquanto o mapa se move */
.mchunk { display: contents; }
.map-scroll.moving .route { animation-play-state: paused; }

/* ---------- botões com texto longo quebram linha em vez de vazar ---------- */
.row-actions > .btn { white-space: normal; line-height: 1.25; }

/* ---------- aviso de teste (servidor acelerado) ---------- */
.speed-note {
  display: flex; align-items: center; gap: 10px; margin: -2px 0 10px; padding: 9px 10px 9px 12px;
  background: #fbe9e4; border: 1px solid #e3a99c; border-left: 4px solid var(--red); border-radius: 11px;
  font-size: 13px; color: #6b2418; line-height: 1.35;
}
.speed-close {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e3a99c; background: #fff6f3;
  color: var(--red); font: 800 18px/1 var(--font); cursor: pointer;
}
.speed-bang {
  width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--red); color: #fff; font: 900 14px/22px var(--font); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  display: inline-grid; place-items: center;
}
.speed-bang .gi { width: 22px; height: 22px; }
.speed-bang:has(.gi) { background: none; box-shadow: none; }
.speed-wrap:not(.min) .speed-bang, .speed-wrap.min .speed-note { display: none; }
.stage-cell { position: relative; }
.stage-cell .speed-bang { position: absolute; top: -7px; right: -5px; }
/* computador: aviso junto das informações em cima da aldeia */
.scene-stats.speed-wrap { pointer-events: auto; flex-wrap: wrap; align-items: center; max-width: calc(100% - 90px); }
.scene-stats .speed-note { margin: 0; padding: 5px 6px 5px 11px; border-radius: 16px; font-size: 12.5px; max-width: 460px; }
.scene-stats .speed-close { width: 24px; height: 24px; font-size: 16px; }
.scene-stats .speed-bang { width: 30px; height: 30px; font-size: 16px; line-height: 30px; }
.scene-stats .speed-note span { background: none; border: 0; padding: 0; color: inherit; display: inline; border-radius: 0; font-size: inherit; }
.scene-stats .speed-note b { color: var(--red); }
.scene-stats .speed-note { max-width: 560px; }

/* ---------- celular/tablet: aldeia um pouco menor e atalho para a lista de edifícios ---------- */
.scene { height: min(52vh, 520px); min-height: 260px; }
.scene-down {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding: 8px 14px;
}
.scene-down .gi { width: 18px; height: 18px; }
.scene-down span { font-size: 15px; line-height: 1; margin-top: -4px; }
@media (min-width: 768px) { .scene { height: min(56vh, 600px); } }
@media (min-width: 1100px) {
  .scene { height: 70vh; }
}

/* ---------- botão de fechar as janelas (também fecha com Esc) ---------- */
.sheet-close {
  position: sticky; top: 0; float: right; z-index: 3; margin: -2px -4px 0 8px;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--parch);
  font: 700 16px/1 var(--font); color: var(--ink-2); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.sheet-close:hover { color: var(--red); border-color: var(--red); }

/* ---------- "Falta ..." embaixo do custo ---------- */
.lackmsg { font-size: 12px; font-weight: 700; color: var(--red); margin-top: 4px; }

/* ---------- explicação dos números do painel da aldeia ---------- */
.hero-stats [title] { cursor: help; }
.stat-help { margin: -4px 0 10px; font-size: 12.5px; color: var(--ink-2); }
.stat-help summary { cursor: pointer; font-weight: 700; color: var(--wood-600); list-style: none; }
.stat-help summary::-webkit-details-marker { display: none; }
.stat-help[open] summary { margin-bottom: 6px; }
.stat-help div { margin: 3px 0; line-height: 1.4; }

/* ---------- volume dos sons ---------- */
.sound-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.sound-row input { flex: 1; accent-color: var(--wood-600); }

/* ---------- prioridades para novos jogadores ---------- */
.prio-card { border: 2px solid var(--gold-2); background: linear-gradient(180deg, #fff6dd, var(--parch)); margin: 12px 0 4px; }
.prio-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--parch); font: inherit; color: inherit; cursor: pointer;
}
.prio-row:hover { border-color: var(--gold-2); }
.prio-row .gi { width: 30px; height: 30px; }
.prio-row b { display: block; font-size: 14px; }
.prio-row small { display: block; color: var(--ink-2); font-size: 12px; line-height: 1.3; }
.prio-go { font-size: 22px; color: var(--wood-600); }
.bcard.prio { border-color: var(--gold-2); box-shadow: 0 0 0 2px rgba(224, 178, 90, .35); }
.prio-tag { display: inline-block; font-size: 11px; font-weight: 800; color: #8a5a12; background: #fbe7b4; border: 1px solid var(--gold-2); border-radius: 10px; padding: 1px 8px; margin-bottom: 4px; }

/* ---------- vista da aldeia espionada ---------- */
.spy-open { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 10px; }
.spy-open .gi { width: 22px; height: 22px; }
.spy-open.old { filter: grayscale(.6); opacity: .85; }
.spy-view { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #1d150e; animation: spyin .2s ease-out; }
@keyframes spyin { from { opacity: 0; } to { opacity: 1; } }
.spy-top {
  display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 10px) 14px 10px; color: #f6e7c8;
  background: var(--tex-topo, none) center / cover, linear-gradient(180deg, var(--wood-700), var(--wood-800)); border-bottom: 3px solid var(--gold);
}
.spy-top .grow { min-width: 0; }
.spy-top b { display: block; font-family: var(--font-title); font-size: 19px; color: var(--gold-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spy-top b span { font-family: var(--font); font-size: 13px; opacity: .75; }
.spy-top small { display: block; font-size: 12.5px; color: #d9c6a0; }
.spy-top em { font-style: normal; color: #ffb59e; font-weight: 700; }
.spy-top .sheet-close { position: static; float: none; margin: 0; flex: none; }
.spy-eye { font-size: 24px; flex: none; }
.spy-eye .gi { width: 30px; height: 30px; }
.spy-scene { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #7eae42; }
.spy-scene > svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.spy-scene .plot, .spy-scene .build-timer { display: none; }
.spy-tools { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.spy-tools .chip { width: 40px; height: 40px; padding: 0; font-size: 18px; font-weight: 700; }
/* informação velha: a cena fica desbotada e carimbada */
.spy-view.old .spy-scene > svg { filter: grayscale(.9) sepia(.25) brightness(.92); }
.spy-stamp {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); pointer-events: none;
  font: 800 22px/1 var(--font-title); letter-spacing: 1px; text-transform: uppercase; color: #b3261e;
  border: 3px solid #b3261e; border-radius: 10px; padding: 10px 18px; background: rgba(255, 246, 230, .75);
}
.spy-info {
  display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 14px calc(env(safe-area-inset-bottom) + 12px);
  background: linear-gradient(180deg, #f3e9d1, var(--parch-2)); border-top: 3px solid var(--gold); font-size: 13px;
}
.spy-info small { display: block; font-size: 11px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.spy-info .gi { width: 18px; height: 18px; }

/* ---------- base de jogadores (administrador) ---------- */
.pl-card { margin-bottom: 8px; }
.pl-card .qname { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-tag { font-size: 10.5px; font-weight: 800; color: var(--wood-600); background: var(--parch-2); border: 1px solid var(--line); border-radius: 8px; padding: 1px 6px; }
.pl-card a { color: var(--wood-600); }
.pl-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
.pl-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
#pl-sort { max-width: 150px; }

/* ---------- confirmar e-mail / esqueci a senha ---------- */
.auth-step { font-family: var(--font-title); font-size: 19px; margin: 2px 0 6px; color: var(--wood-700); }
.auth-ok { background: #e4f3dc; border: 1px solid #a9d39a; color: #2f5e22; border-radius: 10px; padding: 9px 11px; font-size: 13px; margin-bottom: 12px; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 8px; font-size: 13px; }
.code-input { font-size: 26px !important; letter-spacing: 10px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 800; }
.pl-tag.warn { color: #8a3b1c; background: #fbe7d9; border-color: #e8b796; }

/* ---------- mapa: nome inteiro da aldeia e a pontuação embaixo ---------- */
.vil .vl:has(.vn) {
  display: flex; flex-direction: column; align-items: center; max-width: none; overflow: visible;
  padding: 2px 7px 2px; line-height: 1.15; margin-bottom: -16px;
}
.vil .vl .vn { font-weight: 800; font-size: 10.5px; }
.vil .vl .vp { font-size: 9.5px; font-weight: 700; color: #ffe7a8; opacity: .95; }

/* ---------- velocidades separadas (administrador) ---------- */
.speed-row { margin: 10px 0 14px; }
.speed-row .meta { margin: 1px 0 6px; }
.speed-cur { font-size: 12px; font-weight: 800; color: var(--wood-600); background: var(--parch-2); border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; }
.speed-seg { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (min-width: 520px) { .speed-seg { grid-template-columns: repeat(8, 1fr); } }
.speed-seg button { min-width: 0; padding-left: 0; padding-right: 0; }

/* ---------- anel de progresso no selo de nível do prédio em obra ---------- */
.lvl-badge .lvl-ring-bg { fill: rgba(29, 21, 14, .55); stroke: rgba(255, 255, 255, .25); stroke-width: 3.6; }
.lvl-badge .lvl-ring {
  fill: none; stroke: #6fd04a; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 100;
  filter: drop-shadow(0 0 2px rgba(111, 208, 74, .8)); transition: stroke-dashoffset .9s linear;
}