/* Fonte Pixelify Sans (SIL Open Font License 1.1, ver fonts/OFL-PixelifySans.txt), servida junto com o jogo */
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/pixelify-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/pixelify-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/pixelify-sans-latin-700-normal.woff2') format('woff2'); }
:root {
  --wood: #2c1d13;
  --wood-2: #3d2a1b;
  --wood-3: #573c26;
  --edge: #140b06;
  --gold: #f2c14e;
  --gold-dim: #a8803a;
  --text: #f6e8c8;
  --muted: #c2ab83;
}
* { box-sizing: border-box; }
/* a Pixelify Sans junta "fi" num símbolo só, que no jogo parece outra letra: ligaduras desligadas */
html, body, button, select, input { font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b2350; color: var(--text);
  font-family: 'Pixelify Sans', ui-monospace, monospace; font-size: 15px; user-select: none; }
canvas#game { position: fixed; inset: 0; display: block; cursor: crosshair; image-rendering: pixelated; }
canvas#game.grabbing { cursor: grabbing; }
button, select, input { font: inherit; color: inherit; }

.panel {
  position: fixed; background: var(--wood);
  border: 3px solid var(--edge);
  box-shadow: inset 0 0 0 2px var(--gold-dim), inset 0 0 0 4px var(--wood-2), 0 4px 0 rgba(0,0,0,.35);
  padding: 10px 12px; image-rendering: pixelated;
}
.btn {
  background: var(--wood-3); border: 2px solid var(--edge); padding: 5px 10px; cursor: pointer;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.12), inset -2px -2px 0 rgba(0,0,0,.3);
}
.btn:hover { background: #6a4a2e; }
.btn:active { box-shadow: inset -2px -2px 0 rgba(255,255,255,.1), inset 2px 2px 0 rgba(0,0,0,.35); }
.btn.gold { background: #b9852e; color: #2a1606; font-weight: 700; }
.btn.gold:hover { background: var(--gold); }
.btn.small { padding: 2px 8px; font-size: 13px; }
select.btn { padding-right: 6px; }
select option { background: var(--wood); }
.muted { color: var(--muted); font-size: 13px; }
.row { display: flex; align-items: center; gap: 6px; }

#topbar { top: 10px; left: 10px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
#newworld { top: 70px; left: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
#newworld[hidden] { display: none; }
.brand { color: var(--gold); font-weight: 700; font-size: 20px; letter-spacing: 2px; margin-right: 8px;
  text-shadow: 2px 2px 0 var(--edge); display: flex; flex-direction: column; line-height: 1; }
.brand small { color: var(--muted); font-size: 11px; letter-spacing: 0; font-weight: 400; margin-top: 3px; text-shadow: none; }
#newworld label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
#seed { width: 150px; background: #1b110a; border: 2px solid var(--edge); padding: 5px 8px; color: var(--text); }

#info { top: 76px; left: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 210px; max-width: 260px; transition: opacity .15s; }
#info.dim { opacity: 0; pointer-events: none; }
#info b { color: var(--gold); font-size: 17px; }
#info span { color: var(--text); font-size: 13px; }
#info .coord { color: var(--muted); }

#side { top: 10px; right: 10px; width: 244px; display: flex; flex-direction: column; gap: 8px; }
#minimap { width: 220px; border: 2px solid var(--edge); cursor: pointer; image-rendering: auto; display: block; }
#side .row { justify-content: space-between; }
#help { display: none; font-size: 12px; color: var(--muted); }
#help.open { display: block; }
#help p { margin: 4px 0; }
#help b { color: var(--text); }

#bottombar { bottom: 10px; left: 0; right: 0; margin: 0 auto; width: max-content; display: flex; gap: 14px; align-items: flex-end;
  max-width: calc(100vw - 20px); }
#tools { display: flex; gap: 14px; flex-wrap: wrap; }
.group-items { flex-wrap: nowrap; }
.group-title { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.group-items { display: flex; gap: 4px; flex-wrap: wrap; }
.tool { position: relative; width: 42px; height: 42px; padding: 3px; background: var(--wood-3); border: 2px solid var(--edge);
  cursor: pointer; box-shadow: inset 2px 2px 0 rgba(255,255,255,.12), inset -2px -2px 0 rgba(0,0,0,.3); }
.tool canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.tool:hover { background: #6a4a2e; }
.tool.active { background: var(--gold); box-shadow: 0 0 0 2px var(--gold), inset 0 0 0 2px #fff3c4; }
.tool .key { position: absolute; right: 1px; bottom: 0; font-size: 10px; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.tool:hover::after { content: attr(data-label); position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--edge); color: var(--text); padding: 4px 8px; font-size: 13px; pointer-events: none; z-index: 5; }
#tabs { display: flex; flex-direction: column; gap: 4px; align-self: stretch; justify-content: center; }
#tabs button { background: var(--wood-2); border: 2px solid var(--edge); padding: 6px 12px; cursor: pointer; text-align: left; color: var(--muted); }
#tabs button.on { background: var(--gold); color: #2a1606; font-weight: 700; }
.group[hidden] { display: none; }
.brushbox { min-width: 130px; }
#brush-row[hidden] { display: none; }
#info .bars { display: grid; grid-template-columns: 52px 1fr; gap: 3px 8px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--muted); }
#info .bar { height: 7px; background: #1b110a; border: 1px solid var(--edge); }
#info .bar i { display: block; height: 100%; }
#info .close { color: var(--muted); font-size: 11px; margin-top: 4px; }
#info .portrait { float: right; width: 36px; height: 36px; image-rendering: pixelated; margin-left: 8px; background: #1b110a; border: 2px solid var(--edge); }
#info .dead { color: #ff8a6a; }
#tool-name { color: var(--text); margin-bottom: 4px; font-size: 14px; }
#brush { width: 100px; accent-color: var(--gold); }
#brush-val { color: var(--gold); min-width: 18px; }

#banner { top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 18px; }
#banner .when { display: flex; flex-direction: column; line-height: 1.05; }
#banner #year { color: var(--gold); font-size: 28px; letter-spacing: 1px; text-shadow: 2px 2px 0 var(--edge); }
#banner #season { color: var(--text); font-size: 14px; }
#banner .pop { display: flex; flex-direction: column; border-left: 2px solid var(--wood-3); padding-left: 12px; line-height: 1.25; }
#era { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
#pop { color: var(--text); font-size: 13px; }
#clock { display: flex; flex-direction: column; gap: 6px; }
#season-icon canvas { width: 44px; height: 40px; image-rendering: pixelated; display: block; }
#banner { position: fixed; }
.paused-tag { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 6px); background: var(--edge); padding: 2px 10px; color: #ff8a6a; font-size: 13px; display: none; animation: blink 1s steps(2) infinite; }
#banner.paused .paused-tag { display: block; }
@keyframes blink { 50% { opacity: .35; } }
.yearbar { position: relative; height: 8px; background: #1b110a; border: 2px solid var(--edge); }
#yearfill { height: 100%; background: linear-gradient(90deg, #f4a6c8 0 25%, #ffd34e 25% 50%, #e8873a 50% 75%, #cfe8ff 75%);
  background-size: 216px 100%; }
.yearbar i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--edge); }
#speeds { display: flex; gap: 4px; }
#speeds .speed { flex: 1; padding: 3px 0; }
#speeds .speed.on { background: var(--gold); color: #2a1606; font-weight: 700; }

#log { position: fixed; left: 10px; bottom: 150px; width: min(440px, 36vw); display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 3px; pointer-events: none; }
#log[hidden] { display: none; }
#log .entry { display: flex; align-items: center; gap: 6px; max-width: 100%; background: rgba(28, 18, 11, .88); border: 2px solid var(--edge);
  border-left: 3px solid var(--gold-dim); padding: 3px 8px 3px 6px; font-size: 12px; line-height: 1.3; transition: opacity 1.5s; }
/* no máximo duas linhas por aviso; o texto inteiro fica na Crônica */
#log .entry span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#log.collapsed .entry { display: none; }
#log-toggle { pointer-events: auto; font: inherit; font-size: 11px; color: var(--muted, #c4ae88); background: rgba(28, 18, 11, .75);
  border: 1px solid var(--edge); padding: 1px 8px; cursor: pointer; }
#log-toggle:hover { color: var(--gold); }
#log-toggle[hidden] { display: none; }
#log .entry canvas { width: 22px; height: 20px; image-rendering: pixelated; }
#log .entry.old { opacity: 0; }
#log .entry.tribe { border-left-color: var(--gold); }
#log .entry.death { border-left-color: #d24a3a; }

#loading { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(5, 12, 30, .55); }
#loading[hidden] { display: none; }
#loading .panel { position: static; font-size: 20px; color: var(--gold); padding: 18px 26px; }

/* o mundo seguiu sem você */
#away { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(5, 12, 30, .6); padding: 16px; }
#away[hidden] { display: none; }
#away .panel { position: static; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
#away h2 { margin: 0; color: var(--gold); font-size: 22px; }
#away p { margin: 0; line-height: 1.4; }
#away .aw-bar { height: 12px; border: 2px solid var(--edge); background: var(--wood-2); }
#away .aw-bar i { display: block; height: 100%; width: 0; background: var(--gold); }
#away .aw-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; }
#away .aw-stats em { font-style: normal; font-size: 12px; margin-left: 2px; }
#away .aw-stats .up { color: #8fd36a; } #away .aw-stats .down { color: #ff8a6a; }
#away .aw-list { display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow-y: auto; }
#away .aw-list small { color: var(--gold-dim); margin-right: 4px; }


/* reinos */
#realms { top: 330px; right: 10px; width: 300px; max-height: calc(100vh - 460px); min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; z-index: 4; }
#realms[hidden] { display: none; }
#realms .realm { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--wood-2); border: 2px solid var(--edge); padding: 6px 8px; cursor: pointer; }
#realms .realm:hover { background: var(--wood-3); }
#realms .realm div { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--text); min-width: 0; }
#realms .realm b { font-size: 14px; text-shadow: 1px 1px 0 var(--edge); }
#realms p { margin: 4px 0 0; font-size: 12px; }
canvas.arms { width: 33px; height: 39px; image-rendering: pixelated; flex: none; }
.kline { display: flex; gap: 8px; align-items: center; margin-top: 6px; padding-top: 6px; border-top: 2px solid var(--wood-3); }
.kline div { display: flex; flex-direction: column; font-size: 12px; }
.kname { font-size: 14px !important; text-shadow: 1px 1px 0 var(--edge); }
.war { color: #ff8a6a; font-size: 12px; }
.ally { color: #8be38a; font-size: 12px; }
#log .entry.realm { border-left-color: #b88ae8; }
#log .entry.war { border-left-color: #ff5a3a; background: rgba(60, 16, 10, .9); }

.era { color: #7fd8c8; font-size: 12px; }
.techs { color: var(--muted); font-size: 11px; line-height: 1.3; }
#log .entry.tech { border-left-color: #4ad0c0; }

/* crônica */
#chron { top: 76px; left: 10px; width: 340px; max-height: calc(100vh - 220px); overflow-y: auto; display: flex; flex-direction: column; gap: 4px; z-index: 6; }
#chron[hidden] { display: none; }
.ctabs { display: flex; gap: 4px; margin-bottom: 4px; position: sticky; top: -10px; background: var(--wood); padding-top: 2px; }
.ctabs button { flex: 1; background: var(--wood-2); border: 2px solid var(--edge); padding: 4px; cursor: pointer; color: var(--muted); }
.ctabs button.on { background: var(--gold); color: #2a1606; font-weight: 700; }
.cyear { color: var(--gold); font-size: 13px; margin-top: 6px; border-bottom: 2px solid var(--wood-3); }
.centry { display: flex; gap: 6px; font-size: 12px; line-height: 1.3; }
.centry i { font-style: normal; width: 12px; flex: none; color: var(--muted); }
.centry.war i { color: #ff8a6a; } .centry.hero i { color: #ffd34e; } .centry.disaster i { color: #e8a060; }
.centry.tech i { color: #4ad0c0; } .centry.realm i { color: #b88ae8; }
#chron .hcard, #chron .place, #chron .legend { display: flex; flex-direction: column; gap: 1px; text-align: left; background: var(--wood-2); border: 2px solid var(--edge); padding: 6px 8px; font-size: 12px; color: var(--text); }
#chron .hcard, #chron .place { cursor: pointer; }
#chron .hcard:hover, #chron .place:hover { background: var(--wood-3); }
#chron .hcard b { color: #ffd34e; }
body.chron-open #log { left: 362px; }
#chron p { font-size: 12px; margin: 2px 0; }
#log .entry.disaster { border-left-color: #e8a060; }
#log .entry.hero { border-left-color: #ffd34e; }

/* ---------- Parte 9: diálogos, opções, salvamentos, editor, tutorial ---------- */
.dialog { top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 40px);
  overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.dialog[hidden] { display: none; }
.dialog h2 { margin: 0; color: var(--gold); font-size: 20px; letter-spacing: 1px; text-shadow: 2px 2px 0 var(--edge); display: flex; justify-content: space-between; align-items: center; }
.dialog h2 .x { font-size: 14px; }
.opt { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 8px; font-size: 14px; }
.opt > span:first-child { color: var(--muted); }
.opt input[type=range] { accent-color: var(--gold); width: 100%; }
.opt input[type=checkbox] { accent-color: var(--gold); width: 18px; height: 18px; }
.opt input[type=text], .opt input[type=number] { background: #1b110a; border: 2px solid var(--edge); padding: 4px 6px; color: var(--text); width: 100%; }
.opt input[type=color] { width: 44px; height: 28px; border: 2px solid var(--edge); background: #1b110a; padding: 0; }
.dialog .hint { color: var(--muted); font-size: 12px; margin: -4px 0 0; }
.dialog .row.end { justify-content: flex-end; flex-wrap: wrap; }
.slot { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; background: var(--wood-2); border: 2px solid var(--edge); padding: 8px 10px; }
.slot b { color: var(--gold); }
.slot .meta { color: var(--muted); font-size: 12px; grid-column: 1; }
.slot .acts { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 4px; }
.slot.here { border-color: var(--gold-dim); }
.slot b small { color: var(--muted); font-weight: 400; }
.slot.cur .meta { min-width: 0; }
.slot.cur code { display: block; overflow-wrap: anywhere; color: var(--text, #f3e6c8); font-size: 11px; user-select: all; }
#saves h4.sh { margin: 6px 0 0; color: var(--gold); font-size: 14px; }
#saves .hint { margin: 0; }
.etabs { display: flex; gap: 4px; }
.etabs button { flex: 1; background: var(--wood-2); border: 2px solid var(--edge); padding: 5px; cursor: pointer; color: var(--muted); }
.etabs button.on { background: var(--gold); color: #2a1606; font-weight: 700; }
.lands { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.lands label { display: flex; align-items: center; gap: 4px; }
.lands input { accent-color: var(--gold); }
.preview { display: flex; gap: 8px; align-items: center; }
.preview canvas { width: 48px; height: 48px; image-rendering: pixelated; background: #1b110a; border: 2px solid var(--edge); }
.faithdot { display: inline-block; width: 9px; height: 9px; border: 1px solid var(--edge); margin-right: 5px; vertical-align: middle; }
.fcard { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; margin-bottom: 6px; background: var(--wood-2); border: 2px solid var(--edge); border-left-width: 5px; font-size: 13px; }
.fcard b { font-size: 14px; }
.centry.faith i { color: #c08ae8; }
#log .entry.faith { border-left-color: #c08ae8; }

#tutorial { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#tutorial[hidden] { display: none; }
#tutorial .tcard { position: fixed; pointer-events: auto; width: min(380px, calc(100vw - 32px)); }
#tutorial .tcard p { margin: 4px 0 8px; line-height: 1.35; font-size: 14px; }
#tutorial .tcard b.t { color: var(--gold); font-size: 18px; }
#tutorial .steps { color: var(--muted); font-size: 12px; }
#tutorial .ring { position: fixed; border: 3px solid var(--gold); box-shadow: 0 0 0 9999px rgba(5, 10, 25, .45); pointer-events: none; transition: all .25s; }
#tutorial.task .ring { box-shadow: 0 0 0 9999px rgba(5, 10, 25, .12); animation: tutpulse 1.2s ease-in-out infinite; }
@keyframes tutpulse { 50% { border-color: #fff3c0; } }
#tutorial .todo { color: #9be36a; font-size: 13px; margin: 0 0 8px; }
#tutorial .todo.ok { color: var(--gold); font-weight: 700; }
.opt.n { grid-template-columns: 150px 1fr 40px; }
.opt.n > span:last-child { color: var(--gold); text-align: right; }
#side .btn { white-space: nowrap; }
.lands { gap: 2px 10px; }

/* ---------- Estatísticas ---------- */
.dialog.wide { width: min(820px, calc(100vw - 32px)); }
.statcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.statcards div { background: var(--wood-2); border: 2px solid var(--edge); padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.statcards span { color: var(--muted); font-size: 12px; }
.statcards b { color: var(--gold); font-size: 18px; }
.statcards small { color: var(--muted); font-size: 11px; font-weight: 400; }
.chart { position: relative; border: 2px solid var(--edge); }
.chart canvas { display: block; width: 100%; cursor: crosshair; }
.chart .cursor { position: absolute; width: 1px; background: rgba(255,246,220,.6); display: none; pointer-events: none; }
.chart .ctip { position: absolute; background: var(--edge); border: 2px solid var(--gold-dim); padding: 4px 8px; font-size: 12px; display: flex; flex-direction: column; gap: 1px; pointer-events: none; min-width: 140px; }
.chart .ctip[hidden] { display: none; }
.chart .ctip b { color: var(--gold); }
.legend-row { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text); }
.stable { overflow-x: auto; }
.stable table { width: 100%; border-collapse: collapse; font-size: 12px; }
.stable th { color: var(--gold); text-align: left; font-weight: 600; padding: 4px 6px; border-bottom: 2px solid var(--wood-3); white-space: nowrap; }
.stable td { padding: 4px 6px; border-bottom: 1px solid var(--wood-2); vertical-align: top; }
.stable tr:nth-child(even) td { background: rgba(61,42,27,.5); }
.hbars { display: grid; grid-template-columns: 110px 1fr 90px; gap: 5px 10px; align-items: center; font-size: 13px; }
.hbar { height: 12px; background: #1b110a; border: 1px solid var(--edge); }
.hbar i { display: block; height: 100%; }
.hbars small { color: var(--muted); }
#banner { white-space: nowrap; }

/* ---------- Poder dos reinos ---------- */
#power { right: 10px; width: 244px; max-height: calc(100vh - 470px); min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; z-index: 3; padding: 8px 10px; }
#power[hidden] { display: none; }
#power .group-title { margin-bottom: 2px; display: flex; justify-content: space-between; }
.pshare { display: flex; height: 8px; border: 2px solid var(--edge); background: #1b110a; margin-bottom: 2px; }
.pshare i { display: block; height: 100%; }
.prow { display: grid; grid-template-columns: 16px 1fr auto auto; grid-template-rows: auto auto auto; gap: 1px 5px; align-items: center; text-align: left;
  background: var(--wood-2); border: 2px solid var(--edge); padding: 3px 6px; cursor: pointer; font-size: 12px; }
.prow:hover { background: var(--wood-3); }
.prow canvas.arms { grid-row: 1 / span 2; width: 14px; height: 16px; image-rendering: pixelated; }
.prow .pn { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .pwar { color: #ff6a5a; }
.prow .pp { color: var(--gold); font-weight: 700; grid-column: 4; }
.prow .pbar { grid-column: 2 / span 3; height: 5px; background: #1b110a; }
.prow .pbar i { display: block; height: 100%; }
.prow .pinfo { grid-column: 1 / span 4; color: var(--muted); font-size: 11px; }

.prow .pmarch { grid-column: 1 / span 4; color: #ff9a7a; font-size: 11px; }

/* ---------- Assistir, conquistas, poderes sobre reinos, maravilhas ---------- */
#watch-btn.on { background: var(--gold); color: #2a1606; font-weight: 700; }
#watchcap { left: 50%; transform: translateX(-50%); bottom: 150px; padding: 5px 14px; font-size: 14px; color: var(--gold); z-index: 3; pointer-events: none; white-space: nowrap; }
#watchcap[hidden] { display: none; }
#toasts { position: fixed; top: 150px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 40; pointer-events: none; }
.toast { background: var(--wood); border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px var(--gold), 0 4px 0 rgba(0,0,0,.35); padding: 8px 14px; display: flex; gap: 10px; align-items: center;
  animation: toastin .35s steps(4), toastout .6s steps(4) 3.2s forwards; }
.toast i { font-style: normal; font-size: 24px; color: var(--gold); width: 30px; text-align: center; }
.toast b { color: var(--gold); display: block; }
.toast span { color: var(--text); font-size: 13px; }
.toast small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
@keyframes toastin { from { transform: translateY(-20px); opacity: 0; } }
@keyframes toastout { to { transform: translateY(-20px); opacity: 0; } }
.kpow { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 2px; }
.kpow button { background: var(--wood-2); border: 2px solid var(--edge); color: var(--text); font-size: 11px; padding: 2px 5px; cursor: pointer; }
.kpow button:hover { background: var(--wood-3); }
.kpow.pick { align-items: center; }
#info .trait, #info .wonder { color: #e8c88a; font-size: 12px; }
#info .wonder { color: #c8b8ff; }
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.ach { display: flex; gap: 8px; align-items: center; background: var(--wood-2); border: 2px solid var(--edge); padding: 6px 8px; }
.ach i { font-style: normal; font-size: 20px; width: 26px; text-align: center; color: var(--gold); }
.ach b { color: var(--gold); font-size: 13px; display: block; }
.ach span { font-size: 11px; color: var(--muted); }
.ach.locked { opacity: .45; filter: grayscale(1); }

/* ---------- Celular e telas pequenas ---------- */
canvas#game { touch-action: none; }
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#menu-btn, .m-only { display: none; }
body.touch .tool:hover::after { display: none; }
body.compact { --bb: 140px; font-size: 14px; }
body.compact #topbar { top: 6px; left: 6px; right: auto; padding: 4px; gap: 4px; flex-direction: column; align-items: stretch; z-index: 25; }
body.compact #topbar .brand, body.compact #topbar > .btn { display: none; }
body.compact #topbar > #menu-btn { display: block; font-size: 18px; padding: 3px 10px; }
body.compact.menu-open #topbar > .btn { display: block; text-align: left; padding: 8px 12px; }
body.compact #banner { padding: 4px 10px; gap: 8px; max-width: calc(100vw - 64px); white-space: nowrap; overflow: hidden; }
body.compact #banner #year { font-size: 18px; }
body.compact #banner #season { font-size: 11px; }
body.compact #season-icon canvas { width: 24px; height: 22px; }
body.compact #banner .pop { padding-left: 8px; overflow: hidden; }
body.compact #era { font-size: 10px; }
body.compact #pop { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
body.compact #side { top: 58px; right: 6px; width: 190px; padding: 6px; gap: 6px; }
body.compact:not(.side-open) #side > :not(#clock) { display: none !important; }
body.compact #minimap { width: 176px; }
body.compact #speeds .speed { padding: 6px 0; font-size: 13px; }
body.compact #bottombar { left: 0; right: 0; bottom: 0; width: auto; max-width: none; margin: 0; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
body.compact #tabs { flex-direction: row; }
body.compact #tabs button { flex: 1; text-align: center; padding: 7px 4px; }
body.compact #tools { flex-wrap: nowrap; overflow-x: auto; gap: 10px; scrollbar-width: none; padding-bottom: 2px; }
body.compact #tools::-webkit-scrollbar { display: none; }
body.compact .group { flex-shrink: 0; }
body.compact .group-title { font-size: 10px; margin-bottom: 3px; }
body.compact .tool { width: 42px; height: 42px; }
body.compact .brushbox { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.compact .brushbox .group-title { display: none; }
body.compact #tool-name { margin: 0; font-size: 13px; }
body.compact #brush { width: 140px; }
body.compact #log { left: 6px; right: 6px; bottom: calc(var(--bb) + 8px); }
body.compact #log .entry { font-size: 11px; padding: 3px 8px; }
body.compact #log { width: auto; }
body.compact #log .entry:nth-child(n+3) { display: none; }
body.compact #info { left: 6px; right: 6px; top: auto !important; bottom: calc(var(--bb) + 8px); max-width: none; min-width: 0; max-height: 42vh; overflow-y: auto; z-index: 6; }
body.compact #info.dim { display: none; }
body.compact #realms, body.compact #chron { left: 6px; right: 6px; width: auto; top: 58px !important; bottom: calc(var(--bb) + 8px); max-height: none; z-index: 8; }
body.compact.chron-open #log { left: 6px; }
body.compact .dialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); padding: 10px; }
body.compact .opt { grid-template-columns: 118px 1fr; font-size: 13px; }
body.compact .opt.n { grid-template-columns: 118px 1fr 34px; }
body.compact #power { display: none; }
body.compact.power-open #power { display: flex; left: 6px; right: 6px; width: auto; top: 58px !important; max-height: calc(100vh - var(--bb) - 80px); z-index: 7; }
body.compact #newworld { top: 58px !important; left: 6px; right: 6px; z-index: 26; }
body.compact #watchcap { bottom: calc(var(--bb) + 8px); font-size: 12px; max-width: calc(100vw - 20px); overflow: hidden; text-overflow: ellipsis; }
body.compact #toasts { top: 64px; width: calc(100vw - 20px); }
body.compact .statcards { grid-template-columns: repeat(2, 1fr); }
body.compact .hbars { grid-template-columns: 80px 1fr 70px; }
body.compact #help { display: none !important; }
body.touch #info .close { display: none; }

#weather-icon { display: flex; flex-direction: column; align-items: center; gap: 1px; }
#weather-icon canvas { width: 26px; height: 24px; image-rendering: pixelated; display: block; }
#weather-icon small { font-size: 10px; color: #cfe4ff; line-height: 1; }
body.compact #weather-icon { display: none; }

/* ---------- Modo foto ---------- */
body.photo #topbar, body.photo #side, body.photo #bottombar, body.photo #log, body.photo #info, body.photo #power,
body.photo #realms, body.photo #chron, body.photo #banner, body.photo #watchcap, body.photo #toasts, body.photo .dialog { display: none !important; }
#photobar { left: 50%; transform: translateX(-50%); bottom: 16px; display: flex; gap: 12px; align-items: center; z-index: 30; }
#photobar[hidden] { display: none; }
#photobar label { display: flex; align-items: center; gap: 4px; }
#photobar input { accent-color: var(--gold); }

/* ---------- Linha do tempo ---------- */
.tl { display: flex; flex-direction: column; gap: 8px; }
.tlbar { display: flex; align-items: center; gap: 10px; }
.tlbar input[type=range] { flex: 1; accent-color: var(--gold); }
.tlbar b { color: var(--gold); min-width: 80px; text-align: right; font-size: 16px; }
#tl-map { border: 2px solid var(--edge); image-rendering: pixelated; max-width: 100%; }
.tlev { font-size: 12px; color: var(--text); display: flex; flex-direction: column; gap: 2px; min-height: 40px; }

/* ---------- Fé e preces ---------- */
#banner .faith { display: flex; flex-direction: column; border-left: 2px solid var(--wood-3); padding-left: 12px; line-height: 1.2; min-width: 64px; }
#faith-val { color: #e8c8ff; font-size: 20px; text-shadow: 2px 2px 0 var(--edge); }
#faith-rate { color: var(--muted); font-size: 12px; }
#banner .faith.flash #faith-val { color: #ff6a5a; }
#log .entry.faith { border-left-color: #c08ae8; background: rgba(40, 20, 56, .9); }
.tool .cost { position: absolute; left: 1px; bottom: 0; font-size: 10px; line-height: 1; color: #e8c8ff; text-shadow: 1px 1px 0 #140b06, -1px 0 0 #140b06; pointer-events: none; }
.tool.poor { opacity: .45; }
.tool.poor .cost { color: #ff8a7a; }
#prayers { position: fixed; top: 76px; left: 10px; width: 250px; display: flex; flex-direction: column; gap: 6px; z-index: 6; pointer-events: none; }
#prayers .prayer { pointer-events: auto; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 2px 6px; padding: 4px 8px; background: rgba(30, 16, 40, .94);
  border: 2px solid #140b06; box-shadow: inset 0 0 0 2px #6a4a8a; cursor: pointer; font-size: 13px; color: var(--text); }
#prayers .prayer:hover { box-shadow: inset 0 0 0 2px #c08ae8; }
#prayers .prayer canvas { width: 22px; height: 20px; image-rendering: pixelated; align-self: center; }
#prayers .prayer b { color: #e8c8ff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#prayers .prayer .pt { font-size: 12px; color: var(--muted); }
#prayers .prayer .pbar { grid-column: 1 / -1; height: 4px; background: #140b06; }
#prayers .prayer .pbar i { display: block; height: 100%; background: #c08ae8; }
#prayers .prayer.late .pbar i { background: #ff6a5a; }
body.compact #prayers { top: calc(var(--tb, 52px) + 6px); width: min(210px, calc(100vw - 214px)); font-size: 12px; max-height: calc(100vh - var(--tb, 52px) - var(--bb, 140px) - 70px); overflow: hidden; }
/* celular: no máximo duas preces e uma proposta por vez; propostas com texto curto e botões menores */
body.compact #prayers > .prayer:not(.dipc):nth-child(n+3) { display: none; }
body.compact #prayers > .dipc ~ .dipc { display: none; }
body.compact #prayers .dipc .dtx { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.compact #prayers .dipc .dbt button { font-size: 10px; padding: 2px 4px; }
body.compact #prayers .prayer { padding: 3px 6px; }
/* conquistas e avisos: menores e sem tampar o mapa todo */
body.compact .toast { padding: 4px 8px; gap: 6px; border-width: 2px; }
body.compact .toast i { font-size: 16px; width: 20px; }
body.compact .toast b { font-size: 12px; }
body.compact .toast span { font-size: 11px; }
body.compact .toast small { font-size: 9px; }
body.compact #toasts { top: var(--sb, 130px); left: auto; right: 6px; transform: none; width: min(300px, calc(100vw - 230px)); min-width: 160px; }
/* abas: cabem numa linha (ou rolam para o lado) */
body.compact #tabs { overflow-x: auto; scrollbar-width: none; gap: 3px; justify-content: flex-start; }
body.compact #tabs::-webkit-scrollbar { display: none; }
body.compact #tabs button { flex: 1 0 auto; padding: 6px 6px; font-size: 12px; }
/* celular em pé estreito: o painel do ano mostra só o ano e a fé */
@media (max-width: 520px) { body.compact #banner .pop { display: none; } body.compact #faith-rate { display: none; } }
/* celular deitado (pouca altura): barra de baixo compacta, registro à direita, cartões à esquerda */
@media (max-height: 520px) {
  body.compact #bottombar { flex-direction: row; flex-wrap: wrap; gap: 4px 8px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
  body.compact #tabs { flex: 1 1 100%; }
  body.compact #tabs button { padding: 3px 6px; font-size: 11px; }
  body.compact #tools { flex: 1 1 0; min-width: 0; }
  body.compact .tool { width: 34px; height: 34px; }
  body.compact .group-title { display: none; }
  body.compact .brushbox { flex: 0 0 auto; }
  body.compact #tool-name { display: none; }
  body.compact #brush { width: 90px; }
  body.compact #log { left: auto; right: 6px; width: min(46vw, 380px); }
  body.compact #log .entry:nth-child(n+2) { display: none; }
  body.compact #prayers { width: 210px; }
  body.compact #toasts { top: var(--sb, 130px); }
  body.compact #prayers > .prayer:not(.dipc):nth-child(n+2) { display: none; }
  body.compact #prayers .dipc .dtx { -webkit-line-clamp: 1; }
  body.compact #toasts { width: min(260px, 40vw); }
  body.compact #side { top: calc(var(--tb, 52px) + 6px); }
}
.gem { display: inline-block; width: 7px; height: 7px; margin: 0 2px 1px; background: #c08ae8; box-shadow: 0 0 0 1px #140b06; transform: rotate(45deg); vertical-align: middle; }
#faith-val .gem { width: 9px; height: 9px; background: #e8c8ff; }
.tool .cost::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 2px; background: #c08ae8; transform: rotate(45deg); vertical-align: 1px; }
#tool-desc { color: var(--muted); font-size: 12px; max-width: 190px; line-height: 1.2; margin-top: 2px; }
body.compact #tool-desc { display: none; }

/* barra de baixo: abas numa linha em cima, ferramentas embaixo */
body:not(.compact) #bottombar { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 6px; align-items: end; }
body:not(.compact) #tabs { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 4px; }
body:not(.compact) #tabs button { padding: 4px 12px; text-align: center; }
body:not(.compact) #tools { grid-column: 1; }
body:not(.compact) .brushbox { grid-column: 2; }

/* conselho e conspirações */
#info .cline, #realms .cline { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.loy { display: inline-block; width: 40px; height: 5px; background: #140b06; border: 1px solid var(--edge); }
.loy i { display: block; height: 100%; }
#info .plot, #realms .plot { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; color: #ff9a7a; }
.plot button { background: #3a2050; color: #e8c8ff; border: 1px solid #140b06; font: inherit; font-size: 11px; padding: 1px 6px; cursor: pointer; white-space: nowrap; }
.kcourt { display: flex; flex-direction: column; gap: 2px; padding: 2px 8px 4px; }

.vassal { color: #e0a868; }
.empire { color: #ffd34e; }
.pacts { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 8px; }
.pactrow { display: flex; flex-direction: column; padding: 4px 6px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.18); }
.pactrow span:last-child { font-size: 12px; }
.pactrow i { font-style: normal; }
.spec { color: #e8c878; }
#prayers .dipc { background: rgba(40, 28, 12, .95); box-shadow: inset 0 0 0 2px #8a6a30; }
#prayers .dipc:hover { box-shadow: inset 0 0 0 2px #f2c14e; }
#prayers .dipc b { color: #f2c14e; }
#prayers .dipc .dtx { grid-column: 1 / -1; font-size: 12px; line-height: 1.25; color: var(--text); }
#prayers .dipc .dbt { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; }
#prayers .dipc .dbt button { font: inherit; font-size: 11px; padding: 2px 5px; background: #2a1a0c; color: #f2e0b0; border: 1px solid #8a6a30; cursor: pointer; }
#prayers .dipc .dbt button:hover { background: #4a2e14; }
#prayers .dipc .dbt button.poor { opacity: .5; }
#prayers .dipc .dbt .gem { transform: scale(.8); }

.achi { width: 40px; height: 40px; image-rendering: pixelated; flex: 0 0 auto; }
.toast .achi { width: 48px; height: 48px; }
body.compact .toast .achi { width: 32px; height: 32px; }