/* Layout: palco isométrico em tela cheia, HUD de recursos em cima, barra de menu embaixo. Look único, pixel art sobre pergaminho escuro. */
:root{
  --bg:#12100c; --panel:#211b13; --panel2:#2e251a; --line:#4a3d2a;
  --ink:#efe4c8; --dim:#a89a7c; --gold:#e0b04a; --ember:#c8583a;
  --good:#8fbf72; --bad:#e07a62; --steel:#6fa4cf; --bar1:#2a2016; --bar2:#1c150e; --well:#150f09; --btn:#3a2c18; --btnw:#3d1c12; --btnwi:#f5c2b2; --btno:#233a1a; --btnoi:#d3efc0; --fab:rgba(33,27,19,.9);
  --display:'Grenze Gotisch',Georgia,serif; --body:'Alegreya Sans',system-ui,sans-serif;
  color-scheme:dark;
}
[data-theme=escuro]{--bg:#0a0a0d;--panel:#15151b;--panel2:#1f1f27;--line:#33333f;--ink:#e9e9f0;--dim:#9797a6;--bar1:#1a1a21;--bar2:#0f0f14;--well:#0a0a0e}
[data-theme=claro]{--bg:#efe6d0;--panel:#f8f1df;--panel2:#eadcbc;--line:#b9a57a;--ink:#2a2014;--dim:#6b5c41;--gold:#a8710f;--ember:#b4472b;--good:#3f7a2c;--bad:#b23c28;--steel:#2f6291;--bar1:#e4d4ae;--bar2:#d2bf8f;--well:#f3ead2;--btn:#f7ebc9;--btnw:#f6d9cf;--btnwi:#7a2a18;--btno:#dcefd0;--btnoi:#2d5a1c;--fab:rgba(244,232,200,.93);color-scheme:light}
[data-theme=claro] .logo{text-shadow:none}
[data-theme=oceano]{--bg:#0a1a2c;--panel:#10283f;--panel2:#173654;--line:#2b5b86;--ink:#e3f1fb;--dim:#8fb0c8;--gold:#f0c65a;--bar1:#143556;--bar2:#0c2440;--well:#081a2e}
input{user-select:text;-webkit-user-select:text}
#kname{max-width:34vw;overflow:hidden;text-overflow:ellipsis}
.tin{font:inherit;font-size:17px;padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:rgba(10,8,14,.75);color:#efe4c8;text-align:center;width:min(300px,86vw)}
.cin{font:inherit;font-size:16px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--well);color:var(--ink);flex:1;min-width:0}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;margin:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
*{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
img.px,canvas{image-rendering:pixelated}
.px{image-rendering:pixelated}
#app{position:fixed;inset:0;display:flex;flex-direction:column}
#hud{padding:calc(6px + env(safe-area-inset-top,0px)) 10px 6px;background:linear-gradient(var(--bar1),var(--bar2));border-bottom:2px solid var(--line);display:flex;flex-direction:column;gap:5px;z-index:5}
.hrow{display:flex;align-items:center;gap:8px;min-width:0}
.logo{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.14em;color:var(--gold);line-height:1;text-shadow:0 2px 0 #000}
.hrow .sp{flex:1}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:13px;white-space:nowrap}
.res{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.r{background:var(--well);border:1px solid var(--line);border-radius:6px;padding:2px 6px;min-width:0;position:relative;overflow:hidden}
.r b{display:block;font-size:15px;font-variant-numeric:tabular-nums;line-height:1.15}
.r span{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.r.full b{color:var(--gold)}
.r i{position:absolute;left:0;bottom:0;height:2px;background:var(--gold);opacity:.7}
#stage{flex:1;position:relative;min-height:0;background:#2a6f9e}
#kc{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
#nav{display:flex;border-top:2px solid var(--line);background:linear-gradient(var(--bar1),var(--bar2));padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
#nav button{flex:1;background:none;border:0;padding:7px 2px 6px;color:var(--ink);font-size:12px;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
#nav button i{font-style:normal;font-size:22px;line-height:1}
#nav button:active{background:rgba(255,255,255,.06)}
#defBtn{position:absolute;left:8px;top:54px;font-size:20px}
#landBtn{position:absolute;left:8px;top:8px;font-size:20px}
#zoom{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:6px}
#zoom button,.fab{width:38px;height:38px;border-radius:8px;border:2px solid var(--line);background:var(--fab);font-size:20px;line-height:1;padding:0}
#pbar{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:10px;z-index:4}
#pinfo{position:absolute;left:0;right:0;top:8px;display:flex;justify-content:center;pointer-events:none}
#pinfo span{background:rgba(33,27,19,.92);border:1px solid var(--line);border-radius:8px;padding:4px 12px;font-size:14px}
h2{font-family:var(--display);font-size:26px;margin:0 0 2px;letter-spacing:.03em;color:var(--gold)}
h3{font-family:var(--display);font-size:18px;margin:14px 0 6px;color:var(--gold)}
.dim{color:var(--dim)} .sm{font-size:14px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:7px;min-width:0}
.list{display:flex;flex-direction:column;gap:9px}
.row{display:flex;gap:10px;align-items:center;min-width:0}
.row>.grow{flex:1;min-width:0}
.ico{flex:none;width:52px;height:52px;display:flex;align-items:flex-end;justify-content:center;background:var(--well);border:1px solid var(--line);border-radius:8px;padding:3px}
.ico img{max-width:100%;max-height:100%}
.big{font-size:26px;width:44px;text-align:center;flex:none}
.btn{background:var(--btn);border:2px solid var(--gold);color:var(--gold);border-radius:8px;padding:7px 13px;font-weight:700}
.btn:hover:not(:disabled){background:var(--gold);color:#1b140a}
.btn:disabled{opacity:.4;cursor:not-allowed;border-color:var(--line);color:var(--dim)}
.btn.war{border-color:var(--ember);color:var(--btnwi);background:var(--btnw)}
.btn.war:hover:not(:disabled){background:var(--ember);color:#fff}
.btn.ok{border-color:var(--good);color:var(--btnoi);background:var(--btno)}
.btn.sm{padding:3px 10px}
.ri{height:1.05em;width:auto;image-rendering:pixelated;vertical-align:-.15em}
.cost{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;font-variant-numeric:tabular-nums}
.cost .no{color:var(--bad)}
.pbar{height:7px;background:var(--well);border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.pbar i{display:block;height:100%;background:var(--good)}
.pill{font-size:12px;border-radius:999px;padding:1px 8px;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.pill.ok{color:var(--good);border-color:var(--good)}
.pill.hot{color:var(--gold);border-color:var(--gold)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:14px}
.tabs button.on{background:var(--gold);color:#1b140a;border-color:var(--gold)}
#sheet{position:fixed;inset:0;z-index:28;background:rgba(6,4,2,.7);display:flex;align-items:flex-end;justify-content:center}
#sheet .in{background:var(--panel);border:2px solid var(--line);border-radius:14px 14px 0 0;width:100%;max-width:600px;max-height:88%;overflow-y:auto;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;user-select:text}
#sheet .x{align-self:flex-end;background:none;border:0;color:var(--dim);font-size:30px;line-height:1;padding:8px 14px;margin:-8px -8px -22px 0;min-width:48px;min-height:44px}
#full{position:fixed;inset:0;z-index:25;background:var(--bg);display:flex;flex-direction:column}
#full .top{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px;border-bottom:2px solid var(--line);background:linear-gradient(var(--bar1),var(--bar2))}
#full .top h2{flex:1;margin:0}
#full .body{flex:1;overflow-y:auto;padding:12px 14px calc(16px + env(safe-area-inset-bottom,0px));max-width:680px;width:100%;margin:0 auto}
.region{border:2px solid var(--line);border-radius:12px;padding:10px;margin-bottom:12px}
.rg-vale{background:linear-gradient(#26381d,#1b2a15)} .rg-mont{background:linear-gradient(#3a3536,#26221f)} .rg-flor{background:linear-gradient(#17211c,#0d130f)} .rg-sel{background:linear-gradient(#2d3a1c,#1a2411)} .rg-drag{background:linear-gradient(#3d1a18,#1f0d0e)}
.rg-h{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.rg-h b{font-family:var(--display);font-size:20px;color:var(--gold)}
.nodes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.node{background:rgba(0,0,0,.35);border:2px solid var(--line);border-radius:10px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
.node .im{height:70px;display:flex;align-items:flex-end}
.node .im img{max-height:70px;max-width:100%}
.node b{font-size:14px;line-height:1.15}
.node.cl{border-color:var(--good)} .node.av{border-color:var(--gold)} .node.lk{opacity:.5}
.node.boss{grid-column:span 2;flex-direction:row;justify-content:center;gap:12px}
#battle{position:fixed;inset:0;z-index:30;background:var(--bg);display:flex;flex-direction:column;padding:0 0 env(safe-area-inset-bottom,0px)}
#battle .top{display:flex;align-items:center;gap:6px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;border-bottom:2px solid var(--line);background:linear-gradient(var(--bar1),var(--bar2));flex-wrap:wrap}
#battle .top .t{font-family:var(--display);font-size:18px;flex:1;min-width:110px;color:var(--gold)}
#bcv{width:100%;max-width:820px;margin:0 auto;display:block;touch-action:none;background:#26301c}
#abil{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;max-width:820px;margin:0 auto;width:100%;justify-content:center}
.ab{position:relative;overflow:hidden;min-width:140px;display:flex;align-items:center;gap:6px;text-align:left}
.ab img{height:30px}
.ab i.cd{position:absolute;left:0;top:0;bottom:0;background:rgba(0,0,0,.65);width:0}
.ab span{position:relative;font-size:14px;line-height:1.1}
#title{position:fixed;inset:0;z-index:40;background:#0c0a12 center 34%/contain no-repeat;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;padding:20px 16px calc(28px + env(safe-area-inset-bottom,0px))}
@media (orientation:landscape){#title{background-size:contain;background-position:center top}}
#title::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(8,6,12,.15) 40%,rgba(8,6,12,.92));pointer-events:none}
#title>*{position:relative}
#title .big2{font-family:var(--display);font-size:20px;color:var(--ink);text-shadow:0 2px 6px #000;text-align:center;max-width:420px}
#title .btn{font-size:22px;padding:10px 46px;font-family:var(--display);letter-spacing:.1em}
#toasts{position:fixed;left:0;right:0;top:calc(96px + env(safe-area-inset-top,0px));z-index:50;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:var(--panel2);border:1px solid var(--gold);color:var(--ink);padding:7px 14px;border-radius:8px;font-size:15px;max-width:92%;animation:tin .25s ease}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}
.goal{margin-top:5px;font-size:13px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.goal.done{border-color:var(--gold);color:var(--gold)}#repN:not(:empty){margin-left:3px;background:var(--gold);color:#1b140a;border-radius:8px;padding:0 5px;font-size:11px}

/* ===== Visual v3: estilo Novo Mundo em versão medieval. HUD flutuante sobre o mapa, botões em degradê, painéis com moldura ===== */
:root{--chip:rgba(28,21,13,.9);--gold2:#a87a22;--shadow:0 5px 16px rgba(0,0,0,.45);--hudh:118px;--navh:64px}
[data-theme=escuro]{--chip:rgba(21,21,27,.92)}
[data-theme=claro]{--chip:rgba(248,241,223,.95);--gold2:#7a520b;--shadow:0 5px 14px rgba(60,40,10,.3)}
[data-theme=oceano]{--chip:rgba(16,40,63,.92)}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#app{display:block}
#stage{position:absolute;inset:0;flex:none}
#hud{position:absolute;top:0;left:0;right:0;z-index:6;padding:calc(6px + env(safe-area-inset-top,0px)) 8px 0;background:none;border:0;gap:6px;pointer-events:none}
#hud>*{pointer-events:none}
#hud .chip,#hud .r,#hud .goal,#hud button{pointer-events:auto}
.hrow{flex-wrap:wrap;gap:6px}
.logo{background:var(--chip);border:1px solid var(--line);border-radius:10px;padding:5px 12px 4px;font-size:19px;box-shadow:var(--shadow)}
.chip{background:var(--chip);border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-size:13px;font-weight:700;box-shadow:var(--shadow);backdrop-filter:blur(3px)}
button.chip:active{transform:translateY(1px)}
.res{gap:6px;max-width:min(760px,100%)}
.r{background:var(--chip);border-radius:10px;padding:4px 8px;box-shadow:var(--shadow);backdrop-filter:blur(3px)}
.goal{align-self:flex-start;max-width:min(560px,100%);margin-top:0;background:var(--chip);border-color:color-mix(in srgb,var(--gold) 60%,var(--line));border-radius:10px;padding:5px 10px;box-shadow:var(--shadow)}
#nav{position:absolute;left:0;right:0;bottom:0;border:0;background:none;justify-content:center;gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));pointer-events:none;z-index:6}
#nav button{flex:1;max-width:130px;pointer-events:auto;background:linear-gradient(var(--panel2),var(--panel));border:1px solid color-mix(in srgb,var(--gold) 55%,var(--line));border-radius:12px;padding:7px 2px 6px;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,225,160,.2),var(--shadow)}
#nav button:active{transform:translateY(1px);background:linear-gradient(var(--panel),var(--panel2))}
#landBtn{top:calc(var(--hudh) + 6px)}#defBtn{top:calc(var(--hudh) + 52px)}#zoom{top:calc(var(--hudh) + 6px)}
#zoom button,.fab{border-radius:10px;border:1px solid color-mix(in srgb,var(--gold) 55%,var(--line));background:var(--chip);box-shadow:var(--shadow)}
#pinfo{top:calc(var(--hudh) + 6px)}#pinfo span{background:var(--chip);border-radius:10px;box-shadow:var(--shadow)}
#pbar{bottom:calc(var(--navh) + 14px)}
#toasts{top:calc(var(--hudh) + 12px + env(safe-area-inset-top,0px))}
.toast{background:var(--chip);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;box-shadow:var(--shadow)}
h2{text-shadow:0 2px 0 rgba(0,0,0,.5)}
h2::after{content:"";display:block;height:2px;margin-top:6px;background:linear-gradient(90deg,var(--gold),transparent)}
#sheet{align-items:center;padding:12px;backdrop-filter:blur(2px);background:rgba(6,4,2,.74)}
#sheet .frame{position:relative;width:100%;max-width:620px;max-height:90%;display:flex;border-radius:16px;background:linear-gradient(var(--panel2),var(--panel));border:2px solid var(--gold2);box-shadow:0 0 0 1px #000,inset 0 0 0 3px var(--panel),inset 0 0 0 4px color-mix(in srgb,var(--gold) 40%,transparent),0 16px 60px rgba(0,0,0,.8)}
#sheet .frame::before{content:"";position:absolute;inset:8px;pointer-events:none;z-index:2;background:
linear-gradient(var(--gold),var(--gold)) 0 0/16px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 0/2px 16px no-repeat,
linear-gradient(var(--gold),var(--gold)) 100% 0/16px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 0/2px 16px no-repeat,
linear-gradient(var(--gold),var(--gold)) 0 100%/16px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 100%/2px 16px no-repeat,
linear-gradient(var(--gold),var(--gold)) 100% 100%/16px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 100%/2px 16px no-repeat}
#sheet .in{flex:1;min-height:0;max-width:none;max-height:none;background:none;border:0;border-radius:16px;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px))}
#sheet .x{color:var(--gold)}
.card{background:linear-gradient(var(--panel2),color-mix(in srgb,var(--panel2) 82%,#000));border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,225,160,.07)}
.ico{border-radius:10px}
.btn{background:linear-gradient(var(--gold),var(--gold2));color:#21160a;border:1px solid color-mix(in srgb,var(--gold) 55%,#fff);border-radius:10px;padding:8px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 0 rgba(0,0,0,.45)}
.btn:hover:not(:disabled){background:linear-gradient(var(--gold),var(--gold2));color:#21160a;filter:brightness(1.12)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.sm{padding:4px 11px}
.btn:disabled{background:var(--panel2);border-color:var(--line);color:var(--dim);box-shadow:none}
.btn.ok{background:linear-gradient(#63a148,#3f6f2c);color:#f1fbe8;border-color:#8fc672}
.btn.ok:hover:not(:disabled){background:linear-gradient(#63a148,#3f6f2c);color:#fff;filter:brightness(1.12)}
.btn.war{background:linear-gradient(#c6563a,#8a2f1c);color:#fff;border-color:#e58a70}
.btn.war:hover:not(:disabled){background:linear-gradient(#c6563a,#8a2f1c);color:#fff;filter:brightness(1.12)}
[data-theme=claro] .btn{color:#fff8e6}
.tabs button{border-radius:8px;padding:5px 12px;font-weight:700}
.pill,.pbar{border-radius:8px}
#full .top,#battle .top{background:linear-gradient(var(--panel2),var(--panel));border-bottom:2px solid var(--gold2);box-shadow:var(--shadow)}
.region{border-radius:14px}.node{border-radius:12px}
.tin{border-radius:12px}
#title .btn{border-radius:14px;box-shadow:0 0 24px rgba(224,176,74,.4),0 3px 0 rgba(0,0,0,.5)}
#cup{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(circle at 50% 40%,rgba(130,90,25,.6),rgba(6,4,2,.92))}
#cup[hidden]{display:none}
.cup-in{position:relative;text-align:center;max-width:420px;width:100%;padding:22px 18px 20px;border-radius:18px;background:linear-gradient(var(--panel2),var(--panel));border:2px solid var(--gold);box-shadow:0 0 44px rgba(224,176,74,.5),0 18px 60px #000;animation:cupin .55s cubic-bezier(.2,1.3,.4,1);overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:8px}
.cup-rays{position:absolute;left:50%;top:38%;width:540px;height:540px;margin:-270px 0 0 -270px;background:repeating-conic-gradient(rgba(224,176,74,.08) 0 10deg,transparent 10deg 20deg);border-radius:50%;animation:spin 20s linear infinite;pointer-events:none}
.cup-in>*{position:relative}
.cup-t{font-family:var(--display);font-size:28px;color:var(--gold);text-shadow:0 2px 0 #000}
#cupC{width:min(280px,70vw);height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.6));animation:float 3s ease-in-out infinite}
.cup-n{font-family:var(--display);font-size:22px}
.cup-d{font-size:14px;color:var(--dim);max-width:320px}
@keyframes cupin{from{opacity:0;transform:scale(.7)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.cup-in,.cup-rays,#cupC{animation:none}}

/* ===== celular: altura real da tela, botoes de construir grandes, link da tela inicial ===== */
#app{height:100vh;height:100dvh}
#pbar{z-index:8}
#pbar .btn{min-height:48px;min-width:112px;font-size:17px;box-shadow:0 2px 10px rgba(0,0,0,.6)}
.lnk{background:none;border:0;color:var(--gold);text-decoration:underline;font-size:16px;padding:8px 12px;text-shadow:0 2px 6px #000}