:root {
  --bg: #151912;
  --surface: #22221b;
  --surface-2: #2b2a22;
  --line: rgba(232,216,173,.24);
  --text: #fbf1d8;
  --muted: #c5b996;
  --violet: #6f58c9;
  --teal: #2f7564;
  --gold: #d6a94e;
  --danger: #b94c58;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  isolation: isolate;
  background:
    var(--ambience, linear-gradient(180deg, #1b2117 0%, #10120f 100%));
  background-size: auto;
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0 56%, rgba(0,0,0,.26) 56% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 72px);
}
body::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: 34vh;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, rgba(9,11,8,.76)),
    repeating-linear-gradient(135deg, rgba(255,238,178,.08) 0 6px, transparent 6px 28px);
}
body[data-screen="world"] { --ambience: linear-gradient(180deg, #233f2b 0%, #183320 43%, #101611 100%), repeating-linear-gradient(135deg, rgba(244,220,128,.1) 0 2px, transparent 2px 38px); }
body[data-screen="story"] { --ambience: linear-gradient(180deg, #5a4931 0%, #263b35 48%, #121510 100%), repeating-linear-gradient(90deg, rgba(255,226,140,.12) 0 3px, transparent 3px 54px); }
body[data-screen="battle"] { --ambience: linear-gradient(180deg, #26394b 0%, #3f4430 43%, #15170f 100%), repeating-linear-gradient(145deg, rgba(255,220,120,.12) 0 2px, transparent 2px 46px); }
body[data-screen="gacha"] { --ambience: linear-gradient(180deg, #2f2754 0%, #163a48 45%, #10120f 100%), repeating-linear-gradient(90deg, rgba(255,245,170,.11) 0 1px, transparent 1px 44px); }
body[data-screen="collection"] { --ambience: linear-gradient(180deg, #2f463c 0%, #283329 50%, #10120f 100%), repeating-linear-gradient(0deg, rgba(216,169,79,.1) 0 2px, transparent 2px 64px); }
body[data-screen="team"] { --ambience: linear-gradient(180deg, #274352 0%, #273a2e 48%, #10120f 100%), repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 50px); }
body[data-screen="upgrade"] { --ambience: linear-gradient(180deg, #57312d 0%, #33291f 48%, #10120f 100%), repeating-linear-gradient(90deg, rgba(255,146,80,.12) 0 3px, transparent 3px 52px); }
body[data-screen="inventory"] { --ambience: linear-gradient(180deg, #36395b 0%, #273239 46%, #10120f 100%), repeating-linear-gradient(90deg, rgba(180,210,255,.1) 0 2px, transparent 2px 58px); }
body[data-screen="shop"] { --ambience: linear-gradient(180deg, #4e3f24 0%, #30432e 47%, #10120f 100%), repeating-linear-gradient(135deg, rgba(255,230,160,.14) 0 3px, transparent 3px 44px); }
body[data-screen="daily"] { --ambience: linear-gradient(180deg, #4f6540 0%, #2d483a 50%, #10120f 100%), repeating-linear-gradient(90deg, rgba(255,248,190,.11) 0 2px, transparent 2px 48px); }
body[data-screen="modes"] { --ambience: linear-gradient(180deg, #233b55 0%, #2e2f4f 48%, #10120f 100%), repeating-linear-gradient(0deg, rgba(170,210,255,.1) 0 2px, transparent 2px 60px); }
body[data-screen="guild"] { --ambience: linear-gradient(180deg, #403a5a 0%, #274238 47%, #10120f 100%), repeating-linear-gradient(90deg, rgba(216,169,79,.13) 0 2px, transparent 2px 56px); }
body[data-screen="profile"] { --ambience: linear-gradient(180deg, #273550 0%, #243d3f 45%, #10120f 100%), repeating-linear-gradient(135deg, rgba(205,230,255,.1) 0 2px, transparent 2px 46px); }
button, input, select { font: inherit; }
button {
  min-height: 40px;
  cursor: pointer;
  border: 1px solid rgba(255,237,181,.18);
  border-radius: 4px;
  padding: 10px 13px;
  font-weight: 800;
  color: white;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.22);
}
button:disabled { cursor: not-allowed; opacity: .45; }
input, select {
  width: 100%;
  background: #171911;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px;
}
h1, h2, h3, h4, p { overflow-wrap: anywhere; }
.primary { background: linear-gradient(180deg, #7d67d8, #5643a8); }
.secondary { background: linear-gradient(180deg, #385146, #283830); }
.danger { background: var(--danger); }
.hidden { display: none !important; }
.panel {
  min-width: 0;
  background: linear-gradient(180deg, rgba(42,42,33,.98), rgba(27,28,22,.98));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 12px 0 rgba(0,0,0,.16), 0 20px 38px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,238,178,.06);
}

.auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card { width: 420px; }
.auth-card input { display: block; margin: 9px 0; }

header {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  padding: 15px 32px;
  background: rgba(22,25,17,.94);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(4px);
}
header h1 { margin: 0; font-size: 25px; letter-spacing: 0; }
header small, small, .small, .meta { color: var(--muted); }
#resources { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#resources span {
  background: #2b2a22;
  border: 1px solid rgba(216,169,79,.22);
  padding: 7px 9px;
  border-radius: 4px;
  font-size: 12px;
}

nav {
  display: flex;
  gap: 7px;
  padding: 10px 32px;
  overflow: auto;
  background: #171a12;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tab { white-space: nowrap; background: transparent; color: #bfc3b6; border: 1px solid transparent; }
.tab.active { background: rgba(126,58,42,.58); color: #fff3c7; border-color: rgba(255,213,116,.42); }

main { width: min(1640px, 100%); margin: 18px auto 55px; padding: 0 18px; }
.screen { display: none; }
.screen.active { display: block; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.center { justify-content: center; }
.head, .hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.world-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); gap: 14px; align-items: start; }
.battle-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 14px; align-items: start; }
.world-stage { padding: 12px; }
.world-stage, .world-sidebar { min-width: 0; }
.world-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 4px 10px;
}
.world-topbar h2 { margin: 2px 0 4px; font-size: 22px; }
.world-topbar p { margin: 0; color: var(--muted); max-width: 760px; }
#world-compass {
  flex: 0 1 260px;
  text-align: right;
  color: #f6d889;
  font-size: 12px;
  line-height: 1.35;
}
#world {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  background: #1b2d16;
  image-rendering: pixelated;
  border: 4px solid #3b332c;
  border-radius: 0;
  box-shadow: 0 0 0 2px #9d8e74, 0 14px 0 rgba(0,0,0,.22);
}
.battle-stage {
  display: block;
  width: 100%;
  height: auto;
  max-height: 310px;
  aspect-ratio: 92 / 27;
  margin-bottom: 12px;
  image-rendering: pixelated;
  border: 4px solid #3b332c;
  border-radius: 0;
  background: #26394b;
  box-shadow: 0 0 0 2px #9d8e74, 0 12px 0 rgba(0,0,0,.2);
}
.world-actionbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.world-sidebar { display: grid; gap: 14px; }
#nearby h3, .companion-panel h3 { margin: 4px 0 6px; }
#world-log, #battle-log {
  max-height: 250px;
  overflow: auto;
  font-size: 12px;
  color: #dedbcf;
}
#world-log div, #battle-log div {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mmo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mmo-head h3 { margin: 4px 0 10px; }
.threat {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
}
.threat.easy { background: rgba(82,206,123,.16); color: #a9e9b8; }
.threat.ok { background: rgba(216,169,79,.18); color: #f0d58b; }
.threat.warn, .threat.danger { background: rgba(201,86,98,.18); color: #ffadb6; }
#world-minimap {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid #3b332c;
  border-radius: 0;
  image-rendering: pixelated;
  background: #0e100e;
}
.mmo-online {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px;
  background: rgba(126,58,42,.22);
  border: 1px solid rgba(255,213,116,.25);
  border-radius: 4px;
}
.mmo-online b { color: #ffe08d; }
.mmo-online span { color: var(--muted); font-size: 12px; }
.mmo-objective {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 4px;
  background: rgba(126,58,42,.16);
  border: 1px solid rgba(255,213,116,.2);
}
.mmo-objective b { font-size: 14px; line-height: 1.25; }
.mmo-objective span { color: var(--muted); font-size: 12px; }
.mmo-economy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.mmo-economy span, .mmo-team span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.mmo-economy b, .mmo-team b { font-size: 13px; }
.mmo-team {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.companion-head {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.companion-head canvas {
  width: 112px;
  height: 86px;
  image-rendering: pixelated;
  background: linear-gradient(180deg, rgba(216,169,79,.16), rgba(45,115,112,.1));
  border: 1px solid var(--line);
  border-radius: 8px;
}
.companion-panel select { margin: 12px 0; }
.care-grid { display: grid; gap: 8px; }
.care-meter {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  min-height: 26px;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #111410;
  border: 1px solid rgba(255,255,255,.08);
  padding: 5px 8px;
}
.care-meter span, .care-meter b { position: relative; z-index: 2; font-size: 12px; }
.care-meter i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: linear-gradient(90deg, rgba(45,115,112,.72), rgba(216,169,79,.62));
  border-radius: inherit;
}
.pet-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.pet-actions .primary { grid-column: 1 / -1; }

.card-grid, .pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pet {
  background: rgba(17,20,16,.74);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 11px;
}
.pet.locked { opacity: .48; filter: grayscale(.75); }
.pet canvas { width: 100%; height: 104px; image-rendering: pixelated; }
.pet h4 { margin: 6px 0; }
.pet-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pet-facts, .fighter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0;
}
.pet-facts span, .fighter-tags span {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  color: #e7ddc2;
  font-size: 11px;
  font-weight: 700;
}
.meta, .small { font-size: 12px; }
.chip {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.fire { background: rgba(239,107,115,.2); color: #ff9aa0; }
.water { background: rgba(62,160,255,.2); color: #a6d5ff; }
.nature { background: rgba(76,200,125,.2); color: #a6e4bb; }
.light { background: rgba(255,210,93,.2); color: #ffe69c; }
.dark { background: rgba(180,116,255,.2); color: #dcbaff; }
.rarity-common { color: #d1d8e8; }
.rarity-rare { color: #70b6ff; }
.rarity-epic { color: #c994ff; }
.rarity-legendary { color: #ffd66d; }

.team-slots, .fighters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.team-slot, .fighter {
  background: rgba(17,20,16,.74);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.fighter canvas, .team-slot canvas { width: 100%; height: 95px; image-rendering: pixelated; }
.fighter.active { outline: 2px solid #ffda7b; }
.fighter.dead { opacity: .4; filter: grayscale(1); }
.bar {
  height: 7px;
  background: rgba(255,255,255,.13);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 5px;
}
.bar i { display: block; height: 100%; }
.hp { background: #52ce7b; }
.en { background: var(--violet); }
#turn {
  padding: 12px;
  text-align: center;
  background: rgba(122,103,255,.18);
  border-radius: 8px;
  margin: 12px 0;
}
#actions { display: grid; gap: 6px; }
.action { text-align: left; background: #2d3d38; }
.action small { display: block; color: #d1d0c6; }
.menu-tip {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  width: min(360px, calc(100vw - 36px));
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,237,181,.24);
  background: linear-gradient(180deg, rgba(44,42,31,.96), rgba(25,27,20,.98));
  box-shadow: 0 18px 36px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,238,178,.08);
  transform: translateY(18px);
  opacity: 0;
  transition: .22s ease;
}
.menu-tip.visible { transform: translateY(0); opacity: 1; }
.menu-tip b { display: block; margin: 4px 0; color: #fff3c7; }
.menu-tip p { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.menu-tip button { width: 100%; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quest {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  margin: 7px 0;
}
.modal {
  position: fixed;
  inset: 0;
  background: rgba(5,8,10,.82);
  display: grid;
  place-items: center;
  padding: 15px;
  z-index: 100;
}
.modal-card {
  width: min(720px, 95vw);
  max-height: 90vh;
  overflow: auto;
  background: #1d211d;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
}
#toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 130;
  max-width: 480px;
  background: #26302a;
  border: 1px solid rgba(255,255,255,.15);
  padding: 12px 14px;
  border-radius: 8px;
  transform: translateY(140%);
  transition: .25s;
}
#toast.show { transform: translateY(0); }
.orb {
  position: fixed;
  z-index: 90;
  border-radius: 50%;
  pointer-events: none;
  transition: transform .35s;
}
.damage {
  position: fixed;
  z-index: 95;
  pointer-events: none;
  font-weight: 900;
  font-size: 22px;
  animation: up .8s forwards;
}
@keyframes up { to { transform: translateY(-65px); opacity: 0; } }

@media (max-width: 1180px) {
  header, nav { padding-left: 18px; padding-right: 18px; }
  .world-layout, .battle-layout { grid-template-columns: 1fr; }
  .world-sidebar { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 760px) {
  main { padding: 0 10px; margin-top: 12px; }
  header { align-items: flex-start; flex-direction: column; }
  #resources { justify-content: flex-start; }
  .head, .hero, .world-topbar { align-items: stretch; flex-direction: column; }
  #world-compass { text-align: left; flex-basis: auto; }
  .world-actionbar { grid-template-columns: 1fr; }
  .fighters, .team-slots { gap: 7px; }
  .fighter, .team-slot { padding: 7px; }
  .fighter canvas, .team-slot canvas { height: 76px; }
  .fighter-tags { display: none; }
  .grid2 { grid-template-columns: 1fr; }
}