:root {
  --panel: rgba(15, 10, 28, .94);
  --gold: #f8d77b;
  --purple: #ad73ff;
  --text: #fff8e9;
  --muted: #d1c3de;
  --line: rgba(248, 215, 123, .32);
}

.imperium-welcome {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(5, 3, 12, .88);
  backdrop-filter: blur(16px);
}
.imperium-welcome[hidden] { display: none; }
.imperium-welcome-card {
  width: min(1040px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr);
  border: 1px solid rgba(248, 215, 123, .38);
  border-radius: 28px;
  background: #10091b;
  box-shadow: 0 34px 110px rgba(0,0,0,.72);
}
.imperium-welcome-card > img { width: 100%; height: 100%; min-height: 470px; display: block; object-fit: cover; border-radius: 27px 0 0 27px; }
.imperium-welcome-copy { align-self: center; padding: clamp(24px, 5vw, 50px); }
.imperium-welcome-copy > p { margin: 0 0 10px; color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .15em; }
.imperium-welcome-copy h2 { margin: 0 0 16px; color: var(--text); font: 900 clamp(2.1rem, 5vw, 4.4rem)/.92 Georgia, serif; letter-spacing: -.045em; }
.imperium-welcome-copy > span { display: block; color: var(--muted); line-height: 1.6; }
.imperium-welcome-copy ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0; padding: 0; list-style: none; }
.imperium-welcome-copy li { padding: 7px 9px; border: 1px solid rgba(248, 215, 123, .25); border-radius: 999px; color: #f9e6ab; font-size: .72rem; font-weight: 850; }
.imperium-welcome-copy > div { display: grid; gap: 9px; }
.imperium-welcome-copy button, .imperium-welcome-copy a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(248, 215, 123, .42); border-radius: 11px; font-weight: 900; text-decoration: none; }
.imperium-welcome-copy button { color: #1a0d02; background: linear-gradient(180deg, #ffe59a, #cb8b24); }
.imperium-welcome-copy a { color: var(--text); background: rgba(255,255,255,.05); }

#game {
  background:
    radial-gradient(circle at 50% -20%, rgba(134, 74, 216, .22), transparent 42%),
    #080510;
}

#top { top: calc(var(--safe-top) + 50px); }
#leftMenu, #objective, #rightStatus { top: 138px; }

#terrain::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  opacity: .72;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 22% 72%, rgba(255, 216, 122, .12) 0 2%, transparent 2.4%),
    radial-gradient(ellipse at 72% 28%, rgba(150, 224, 147, .16) 0 1.4%, transparent 2%),
    radial-gradient(ellipse at 84% 68%, rgba(122, 186, 255, .13) 0 2%, transparent 2.6%),
    repeating-radial-gradient(ellipse at 50% 48%, transparent 0 74px, rgba(255,255,255,.035) 76px, transparent 80px);
  background-size: 170px 130px, 145px 112px, 210px 160px, 310px 230px;
}

.panel {
  border-color: var(--line);
  background: linear-gradient(165deg, rgba(34, 23, 52, .97), rgba(9, 6, 18, .97));
  box-shadow: 0 14px 38px rgba(0, 0, 0, .48), inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(14px);
}

.brand {
  position: relative;
  overflow: hidden;
}
.brand::after {
  position: absolute;
  inset: auto 10px 5px 66px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--gold), transparent);
}
.brand h1 { font-size: 14px; letter-spacing: .075em; }
.brand small { color: #e0d3ef; font-weight: 850; letter-spacing: .05em; }

.resource { position: relative; padding-left: 12px; }
.resource::before {
  position: absolute;
  inset: 7px auto 7px 3px;
  width: 2px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(var(--gold), var(--purple));
  opacity: .65;
}
.resource label { color: #e4d7ed; font-weight: 750; letter-spacing: .025em; }
.resource strong { color: #fffdf5; font-variant-numeric: tabular-nums; }

.menu-btn,
.bottom-nav button,
.bottom-nav a,
.item button,
.modal-actions button {
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, background .14s ease;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.menu-btn:hover,
.menu-btn.active {
  background: linear-gradient(90deg, rgba(126, 70, 201, .9), rgba(81, 42, 132, .72));
}
.menu-btn:active,
.bottom-nav button:active,
.bottom-nav a:active,
.item button:active { transform: translateY(1px) scale(.98); }
.item button:not(:disabled),
.primary {
  border: 1px solid rgba(255, 239, 177, .55);
  background: linear-gradient(180deg, #ffe49a, #c78922 72%, #8b5811);
  box-shadow: 0 7px 18px rgba(169, 108, 20, .2), inset 0 1px rgba(255,255,255,.55);
}

#invoke {
  position: relative;
  isolation: isolate;
  box-shadow: 0 0 0 7px #211004e8, 0 0 45px rgba(242, 202, 103, .46), inset 0 7px 18px rgba(255,255,255,.5);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#invoke::after {
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 1px dashed rgba(50, 20, 0, .48);
  border-radius: 50%;
  content: "";
  animation: rune-spin 18s linear infinite;
}
@keyframes rune-spin { to { transform: rotate(360deg); } }

.road { height: 7px; border: 1px solid rgba(255,235,184,.18); }
.road[data-road-level="2"] { height: 9px; background: linear-gradient(#bc9564,#755438); }
.road[data-road-level="3"] { height: 11px; background: linear-gradient(#8d817b,#4d4745); box-shadow: inset 0 2px rgba(255,255,255,.25),0 3px 7px #0008; }
.road[data-road-level="4"] { height: 13px; background: linear-gradient(#c8b184,#67573f); box-shadow: inset 0 2px rgba(255,255,255,.32),0 0 12px rgba(248,215,123,.16),0 4px 8px #0008; }

.building.built img { filter: drop-shadow(0 10px 9px #000b) saturate(1.08); }
.building.built:hover img { filter: drop-shadow(0 12px 12px #000d) saturate(1.2); }
.building.built .tag { border-color: rgba(248,215,123,.48); background: rgba(9,6,17,.94); }
.building[data-level="2"] img { filter: drop-shadow(0 10px 10px #000c) saturate(1.15) brightness(1.05); }
.building[data-level="3"] img { filter: drop-shadow(0 0 13px rgba(173,115,255,.32)) drop-shadow(0 11px 10px #000d) saturate(1.25); }
.construction-visual { position:absolute; inset:12px 10px 8px; display:none; align-items:end; justify-content:center; gap:3px; overflow:hidden; border-bottom:4px solid #c89e5d; pointer-events:none; }
.building.building-now .construction-visual { display:flex; }
.construction-visual i { display:block; width:24%; height:30%; border:2px solid #e9c77a; background:rgba(71,45,31,.78); transition:height .3s; }
.building.phase-estrutura .construction-visual i { height:58%; }
.building.phase-construcao .construction-visual i { height:78%; background:rgba(105,73,45,.88); }
.building.phase-acabamentos .construction-visual i { height:94%; background:rgba(133,94,52,.94); }

.npc { filter: drop-shadow(0 3px 3px #000c); }
.npc::after {
  position: absolute;
  inset: auto 6px -4px;
  height: 3px;
  border-radius: 50%;
  content: "";
  background: #0008;
  filter: blur(1px);
}
.npc[data-role="mage"], .npc[data-role="student"] { filter: drop-shadow(0 0 6px rgba(190,115,255,.62)) drop-shadow(0 3px 3px #000b); }
.npc[data-role="guard"], .npc[data-role="king"] { filter: drop-shadow(0 0 5px rgba(248,215,123,.42)) drop-shadow(0 3px 3px #000b); }
.npc .activity { position:absolute; left:50%; bottom:-13px; min-width:max-content; max-width:84px; padding:2px 4px; transform:translateX(-50%); border-radius:5px; color:#fff2d0; background:rgba(8,5,15,.82); font-size:6px; font-weight:850; line-height:1; text-align:center; pointer-events:none; opacity:.82; }
.npc[data-state="trabalha"] svg,.npc[data-state="cultiva"] svg,.npc[data-state="constrói"] svg{animation:npcWork .6s ease-in-out infinite alternate}.npc[data-state="conversa"]{animation:npcTalk 1.6s ease-in-out infinite}.npc.is-resting svg{transform:scaleY(.75);transform-origin:bottom}.npc.builder{filter:drop-shadow(0 0 6px rgba(255,204,91,.7))}.npc[data-cargo]:not([data-cargo=""])::before{position:absolute;right:-8px;top:7px;content:attr(data-cargo);font-size:10px}.animal[data-state="descansa"]{filter:grayscale(.15) brightness(.8);transform-origin:center bottom}.animal[data-state="foge"]{transition-duration:.55s}.cart{display:flex;align-items:center;gap:2px}.cart span{padding:2px 4px;border-radius:5px;color:#fff2d0;background:rgba(8,5,15,.82);font-size:6px;font-weight:850}.cart[data-state="entrega"]{filter:drop-shadow(0 0 8px rgba(248,215,123,.62))}@keyframes npcWork{to{transform:rotate(7deg) translateY(1px)}}@keyframes npcTalk{50%{filter:brightness(1.25)}}
.animal[data-species="horse"] { font-size: 23px; }
.cart { filter: drop-shadow(0 4px 4px #000d) sepia(.14); }
.snowflake{position:absolute;top:-8%;color:#fff;font-size:22px;animation:snowFall 3s linear infinite}@keyframes snowFall{to{transform:translate(8vw,112vh) rotate(180deg)}}
html[data-realm-time="night"] .building.built::after{position:absolute;left:50%;top:54%;width:28px;height:10px;transform:translateX(-50%);content:"";border-radius:50%;background:#ffd46b88;box-shadow:0 0 18px 8px #ffb84b4d;pointer-events:none}

#arcaneStability[data-state="warning"] { color: #ffd56f; }
#arcaneStability[data-state="danger"] { color: #ff7b8f; text-shadow: 0 0 10px rgba(255,79,111,.4); }
.arcane-meter { height: 8px; overflow: hidden; border-radius: 999px; background: #261b31; }
.arcane-meter > i { display: block; height: 100%; background: linear-gradient(90deg,#ff647c,#a66cff,#70d8ff); }
.chronicle-year { color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.save-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.save-actions button { min-height: 44px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: rgba(255,255,255,.075); font-weight: 800; }

@media (max-width: 760px) {
  .imperium-welcome-card { grid-template-columns: 1fr; border-radius: 20px; }
  .imperium-welcome-card > img { height: min(37dvh, 280px); min-height: 210px; border-radius: 19px 19px 0 0; }
  .imperium-welcome-copy { padding: 22px; }
  .imperium-welcome-copy h2 { font-size: clamp(2rem, 10vw, 3.2rem); }
  #bottom { padding-right: var(--nb-game-safe-right); padding-left: var(--nb-game-safe-left); }
  .bottom-nav button, .bottom-nav a { min-width: 46px; min-height: 46px; }
  #drawer { padding-bottom: calc(13px + var(--nb-game-safe-bottom)); }
  .item button { min-width: 62px; }
  #top { top: calc(var(--safe-top) + 44px); }
  .npc .activity { display:none; }
}

#portraitHub { display: none; }
.save-recovery-warning{position:fixed;inset:0;z-index:2147483646;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:32px max(24px,env(safe-area-inset-right)) 32px max(24px,env(safe-area-inset-left));background:#111b2a;color:#fff;overflow:auto;font:1rem/1.6 system-ui,sans-serif;text-align:center}.save-recovery-warning p{max-width:640px}.save-recovery-warning a{display:block;min-height:48px;padding:12px 18px;border:1px solid #e9ce88;border-radius:10px;color:#ffdf98}

@media (orientation: portrait) and (max-width: 760px) {
  #portraitHub {
    position: absolute;
    z-index: 49;
    top: calc(var(--nb-game-safe-top) + 108px);
    left: max(8px, var(--nb-game-safe-left));
    right: max(8px, var(--nb-game-safe-right));
    width: auto;
    max-height: min(38dvh, 330px);
    display: grid;
    gap: 9px;
    padding: 12px;
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 15px;
    touch-action: pan-y;
  }

  #portraitHub > header {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  #portraitHub > header div { min-width: 0; }
  #portraitHub > header small { display: block; color: var(--gold); font-size: .75rem; font-weight: 900; letter-spacing: .04em; }
  #portraitHub > header strong { display: block; margin-top: 2px; color: var(--text); font: 900 1.12rem/1.1 Georgia, serif; }
  #portraitPopulation { flex: 0 1 auto; color: var(--muted); font-size: .875rem; font-weight: 800; }
  #portraitObjective { overflow-wrap: anywhere; color: #f8e7bd; font-size: 1rem; line-height: 1.4; }

  .portrait-inventory {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .portrait-inventory span {
    min-width: 0;
    display: grid;
    gap: 2px;
    place-items: center;
    padding: 5px 2px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.045);
    font-size: .66rem;
  }

  .portrait-inventory b { max-width: 100%; overflow-wrap:anywhere; color: var(--text); font-size: .875rem; }
  #portraitHub nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  #portraitHub nav button { min-width: 0; min-height: 46px; display: grid; place-items: center; gap: 2px; padding: 5px 2px; border: 1px solid rgba(248,215,123,.24); border-radius: 9px; color: var(--text); background: rgba(255,255,255,.055); font-size: .9rem; touch-action: manipulation; }
  #portraitHub nav button span { max-width: 100%; font-size: .875rem; font-weight: 850; }
  .portrait-orientation-note { color: var(--muted); font-size: .75rem; line-height: 1.4; }
  #drawer.show { z-index: 71; }
}

@media (orientation: portrait) and (max-height: 700px) {
  #portraitHub { max-height: 31dvh; }
  .portrait-orientation-note { display: none; }
}

@media (orientation: landscape) and (max-height: 520px) {
  #top { top: calc(var(--nb-game-safe-top) + 42px); }
  #bottom { bottom: var(--nb-game-safe-bottom); }
  #drawer { max-height: calc(100dvh - 82px); bottom: calc(66px + var(--nb-game-safe-bottom)); }
  #invoke { width: 74px; height: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  #invoke::after { animation: none; }
}