html { background: #222222; color: #E7E2E1; font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; letter-spacing: -0.6; text-shadow: -1px -1px #3D1408, 1px -1px #3D1408, -1px 1px #3D1408, 1px 1px #3D1408; }
body { margin: 0 auto; max-width: 350px; }
a { text-decoration: none; color: #E7E2E1; }
button { border: none; }
input { text-decoration: none; background: none; border: none; color: #E7E2E1; }
header { display: block; height: 47px; background: linear-gradient(to top, #921519, #57342E); padding: 3px 3px 3px 3px; box-shadow: 0 0 5px black; }
footer { display: block; height: 47px; background: linear-gradient(to bottom, #242424, #353535); padding: 3px 3px 3px 3px; border-top: 2px solid #57342E; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-shadow: 0 0 5px black; }
.game { padding: 7px; font-size: 14px; box-shadow: 1px 1px 1px #582E0F inset, -1px -1px 1px #582E0F inset, 0 0 5px black; background: #181818;  }
.field { background: #1F1F1F; margin: 3px; padding: 2px; box-shadow: 0 0 3px black; border: 1px solid #292929; text-align: right; }
.title { display: inline-block; background: #303030; font-size: 16px; padding: 4px 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.block { display: block; border: 1px solid #252525; padding: 5px; font-size: 14px; box-shadow: 2px 2px black, -2px -2px black, -2px 2px black, 2px -2px black, 3px 3px #3D3D3D, -3px -3px #3D3D3D, -3px 3px #3D3D3D, 3px -3px #3D3D3D, 4px 4px black, -4px -4px black, -4px 4px black, 4px -4px black; background: #080807; margin: 0 3px; }
.button { background: url('/img/style/button_left.png') no-repeat 0% 0%, url('/img/style/button_right.png') no-repeat 100% 0%, url('/img/style/button_center.png') repeat-x 0% 0%; height: 28px; padding: 5 10px 0; margin: 4px; display: inline-block; color: #FFF7C5; text-shadow: -1px -1px #3D1408, 1px -1px #3D1408, -1px 1px #3D1408, 1px 1px #3D1408; border-radius: 1px; }
.buttons { display: block; background: url('/img/style/buttons_left.png') no-repeat 0% 0%, url('/img/style/buttons_right.png') no-repeat 100% 0%, url('/img/style/buttons_center.png') repeat-x 0% 0%; padding: 3px 15px 8px 15px; margin: 3px 0px; }
.buttons img { display: inline-block; margin: -6px 0px -10px -10px; }
.no { opacity: .50; }
.notify { text-align: center; margin: 10px; }
.success { color: #b9deb9; }
.error { color: #deb9b9; }
.warning { color: #ded1b9;  }
.header_game { display: block; margin-top: -5px; padding: 5px; text-align: center; border-bottom: 1px solid #444444; background: linear-gradient(to top, #111111 0%, #333333 50%, #111111 100%) }
.header_res { display: inline-block; margin-left: 5px; padding: 1px 5px; width: 40%; transform: skew(-20deg); background: #1E0000; text-align: right; border: 1px solid #5E585D; text-shadow: -1px -1px 0 #3E1C01, 1px -1px 0 #3E1C01, -1px 1px 0 #3E1C01, 1px 1px 0 #3E1C01; font-size: 14px; }
.header_game img { display: inline-block; margin-bottom: -3px; }
.power { display: block; height: 200px; background-size: 100% 100%; border: 1px solid black; box-shadow: 0 0 50px black inset, 0 0 10px black; }
.p_text { display: block; background: #00000090; padding: 5px; border: 1px solid black; }
.profile { display: block; height: 450px; }
.params { display: block; border: 1px solid #412E28; border-radius: 1px; background: #120908; padding: 2px 5px; }
.tpower { font-size:19px; font-weight:bold; position: relative; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; color: black; }
.tpower:after{ content: attr(data-text); display: block; font-family: inherit; font-size: inherit; position: absolute; top:0; left:0; bottom: 0; right:0; background: linear-gradient(to top, darkred, red); -webkit-background-clip: text; color: transparent; text-shadow: none; }
.footer { display: block; padding: 5px; border-top: 1px solid #444444; border-bottom: 1px solid #444444; text-align: center; box-shadow: 0 0 5px #444444; text-shadow: 0 0 5px orange; box-shadow: 0 0 5px black; background: linear-gradient(to left, #33333350, #333333, #33333350) }
.footer img { display: inline-block; margin: -5px 2px; }
.info_bar { display: block; width: 100%; border-bottom: 1px solid #444444; }
.exp_bar { display: block; width: 100%; border: 1px solid #555555; height: 7px; background: black; box-shadow: 0 0 3px gray; border-radius: 5px; }
.exp_progress { display: inline-block; height: 7px; background: linear-gradient(to top, darkorange, yellow); border-radius: 5px; }
.btn_red { display: block; color: #bf0000; border: 3px solid black; border-radius: 5px; background: linear-gradient(to top, #2f0700, #7b1200); margin: 5px 7px; font-size: 20px; box-shadow: 1px 1px 1px #580000, -1px 1px 1px #580000, 1px -1px 1px #580000, -1px -1px 1px #580000; }
.btn_red img { display: inline-block; margin: 2px 1px -17px 5px; padding: 0 0 11 0; }
.btn_gray { display: block; border: 3px solid black; border-radius: 5px; background: linear-gradient(to top, #222222, #444444); margin: 5px 7px; font-size: 20px; box-shadow: 1px 1px 1px #333333, -1px 1px 1px #333333, 1px -1px 1px #333333, -1px -1px 1px #333333; }
.btn_gray img { display: inline-block; margin: 2px 1px -17px 5px; padding: 0 0 11 0; }
.titles { display: inline-block; font-size: 15px; background: url('/img/style/titles.png') center; text-shadow: 0 0 5px red; height: 30px; margin: -7px; line-height: 21px; width: 103.8%; }
.blocks { display: block; border: 3px solid black; margin: 7 0; background: #222222; border-radius: 5px; box-shadow: 1px 1px 1px #333333, -1px 1px 1px #333333, 1px -1px 1px #333333, -1px -1px 1px #333333; }
.battle_enemy { display: block; background: black; padding: 4px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
.battle_enemy .img { display: block; float: right; margin: -21px -4px; border: 2px solid #222222; width: 38px; height: 38px; border-radius: 20px; box-shadow: 0 0 5px #333333; }
.battle_enemy .img img { border-radius: 20px; }
.battle_hero { display: block; background: black; padding: 4px 0 0 45px; margin-bottom: 5px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.battle_hero .img { display: block; float: left; margin: -23px -45px; border: 2px solid #222222; width: 38px; height: 38px; border-radius: 20px; box-shadow: 0 0 5px #333333; }
.battle_hero .img img { border-radius: 20px; }
.astral td { display: inline-block; background: #00000099; border: 1px solid black; border-radius: 3px; box-shadow: 0 0 5px black; margin: 2px; color: #51a9ff; }
table.shop { display: block; margin: 5px; padding: 3px; border: 1px solid black; box-shadow: 1px 1px 0 #74613D, -1px 1px 0 #74613D, 1px -1px 0 #74613D, -1px -1px 0 #74613D, 2px 2px 0 black, -2px 2px 0 black, 2px -2px 0 black, -2px -2px 0 black; background: linear-gradient(to bottom, #1B284100, #1D222D); }

.darkred { color: #bf0000; }
.i { display: inline-block; }

/* --- Location & Mob images (responsive) --- */
.loc-img{
  width: 100%;
  max-width: 350px;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}

.mob-card{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.mob-img img{
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 12px;
  display:block;
}

.mob-img-large{
  width: 100%;
  max-width: 350px;
  max-height: 220px;
  object-fit: cover;
  border-radius: 12px;
  display:block;
  margin: 0 auto;
}

.mob-info{ flex: 1; }
.mob-name{ font-size: 16px; margin-bottom: 2px; }
.mob-stats, .mob-reward{ font-size: 13px; opacity: .95; }
.mob-actions{ margin-top: 6px; }

.badge{
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
}

.btn{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
}