:root {
  color: #241b14;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
  background: #11160f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button,
input {
  font: inherit;
}

button {
  min-height: 42px;
  padding: 0 13px;
  border: 3px solid #1b160f;
  border-radius: 0;
  background: #4f8f38;
  box-shadow: inset -4px -4px rgba(0,0,0,.26), inset 3px 3px rgba(255,255,255,.22), 0 3px 0 #1b160f;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

button:disabled {
  background: #8f8b7c;
  cursor: default;
  opacity: 0.7;
}

.app-shell {
  width: min(100vw, 768px);
  min-height: 100svh;
  margin: 0 auto;
  padding: 10px;
  background-color: #5f9f43;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.12) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.12) 1px, transparent 1px),
    linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%);
  background-size: 32px 32px, 32px 32px, 16px 16px;
  image-rendering: pixelated;
}

.app-shell.forest { background-color: #4f9a57; }
.app-shell.desert { background-color: #d5b45d; }
.app-shell.ice { background-color: #9bd2e0; }
.app-shell.fire { background-color: #b85b37; }
.app-shell.sea { background-color: #4a99b7; }
.app-shell.sky { background-color: #8ebde8; }
.app-shell.robot { background-color: #8a948f; }
.app-shell.star { background-color: #535f9d; }
.app-shell.castle { background-color: #5d5168; }

.app-header,
.view-switch,
.player-tabs,
.world-card,
.status-line,
.guild-player header,
.approval-row {
  display: flex;
  align-items: center;
}

.app-header {
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 6px 9px;
  border: 5px solid #1b160f;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0 12px, transparent 12px 24px),
    #8f6b4a;
  box-shadow: 0 4px 0 #1b160f;
  color: #fff8dd;
}

.kicker,
h1,
h2,
h3,
p {
  margin: 0;
}

.kicker {
  font-size: 10px;
  font-weight: 900;
  color: #ffe15a;
}

h1 {
  color: #fff8dd;
  font-size: 22px;
  line-height: 1;
  text-shadow: 2px 2px #1b160f;
}

.view-switch {
  gap: 6px;
}

.view-switch button,
.player-tab {
  min-height: 36px;
  background: #bc9860;
}

.view-switch button.active {
  background: #34522b;
}

.player-tabs {
  gap: 6px;
  margin: 6px 0;
}

.player-tab {
  flex: 1;
  display: grid;
  gap: 1px;
  text-align: left;
  background: #6f6c5c;
}

.player-tab small {
  font-size: 11px;
  opacity: .92;
}

.player-tab.green.active,
.guild-player.green,
.reward-mini.green {
  --player: #2f7d32;
}

.player-tab.blue.active,
.guild-player.blue,
.reward-mini.blue {
  --player: #2f6fbc;
}

.player-tab.active {
  background: var(--player);
}

.world-card {
  position: relative;
  justify-content: space-between;
  gap: 8px;
  min-height: 112px;
  padding: 7px 9px;
  border: 4px solid #1b160f;
  background: linear-gradient(#7fc8ff 0 48%, #6fac45 48% 100%);
  box-shadow: 0 5px 0 #1b160f, inset 0 0 0 4px rgba(255,255,255,.12);
  overflow: hidden;
}

.world-card::before,
.world-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 92px;
  height: 34px;
  background:
    linear-gradient(#6fac45 0 8px, transparent 8px),
    repeating-linear-gradient(90deg, #6d4a28 0 20px, #7e5730 20px 40px);
  border-top: 4px solid #3f2a18;
}

.world-card::before { left: 0; }
.world-card::after { right: 30px; width: 136px; }

.block-avatar,
.world-companions,
.enemy-box,
.world-info {
  position: relative;
  z-index: 1;
}

.block-avatar {
  width: 82px;
  height: 104px;
}

.hero-avatar {
  position: relative;
  filter: drop-shadow(5px 7px 0 rgba(0,0,0,.28));
}

.world-companions {
  align-self: end;
  width: 76px;
  height: 84px;
  margin-left: -18px;
  pointer-events: none;
}

.base-preview {
  position: absolute;
  left: 2px;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 16px);
  grid-auto-rows: 16px;
  gap: 0;
}

.base-block {
  width: 16px;
  height: 16px;
  border: 2px solid #1b160f;
  background: #7a4c28;
  box-shadow: inset -3px -3px rgba(0,0,0,.2);
}

.base-block:nth-child(2n) { background: #6fac45; }
.base-block:nth-child(3n) { background: #caa052; }
.base-block:nth-child(5n) { background: #8b999d; }

.pet-sprite {
  position: absolute;
  right: 2px;
  bottom: 8px;
  width: 26px;
  height: 22px;
  border: 3px solid #1b160f;
  background: #b7c3c6;
  box-shadow: inset -4px -4px rgba(0,0,0,.2), 4px 4px 0 rgba(0,0,0,.18);
}

.pet-sprite::before,
.pet-sprite::after,
.pet-sprite i {
  content: "";
  position: absolute;
  display: block;
}

.pet-sprite::before {
  left: 3px;
  top: -9px;
  width: 7px;
  height: 7px;
  border: 2px solid #1b160f;
  background: inherit;
  box-shadow: 11px 0 0 -1px inherit, 11px 0 0 1px #1b160f;
}

.pet-sprite::after {
  right: -8px;
  top: 8px;
  width: 8px;
  height: 5px;
  border: 2px solid #1b160f;
  background: inherit;
}

.pet-sprite i {
  left: 6px;
  top: 5px;
  width: 4px;
  height: 4px;
  background: #111;
  box-shadow: 10px 0 #111;
}

.pet-sprite.pet-cat { background: #f3c66b; }
.pet-sprite.pet-axolotl { background: #f08fb4; }

.hero-avatar .head,
.hero-avatar .torso,
.hero-avatar .arm,
.hero-avatar .leg,
.hero-avatar .tool,
.hero-avatar .shield,
.hero-avatar .heal-mark {
  position: absolute;
  display: block;
  border: 3px solid #1b160f;
  box-shadow: inset -5px -5px rgba(0,0,0,.18);
}

.hero-avatar .head {
  left: 20px;
  top: 0;
  width: 42px;
  height: 38px;
  background:
    linear-gradient(#3b2618 0 9px, transparent 9px),
    linear-gradient(90deg, #3b2618 0 8px, transparent 8px 34px, #3b2618 34px 42px),
    #d79b66;
  z-index: 3;
}

.hero-avatar.blue .head {
  background:
    linear-gradient(#1f1a16 0 13px, transparent 13px),
    linear-gradient(90deg, #1f1a16 0 10px, transparent 10px 31px, #1f1a16 31px 42px),
    #d79b66;
}

.hero-avatar .head::before,
.hero-avatar .head::after,
.hero-avatar .head i {
  content: "";
  position: absolute;
  display: block;
}

.hero-avatar .head::before {
  left: 10px;
  top: 17px;
  width: 6px;
  height: 6px;
  background: #111;
  box-shadow: 18px 0 #111;
}

.hero-avatar .head::after {
  left: 14px;
  top: 28px;
  width: 14px;
  height: 3px;
  background: #6b2f22;
}

.hero-avatar .head i {
  left: -4px;
  top: 5px;
  width: 12px;
  height: 15px;
  background: #3b2618;
  border-right: 3px solid #1b160f;
}

.hero-avatar .torso {
  left: 18px;
  top: 37px;
  width: 46px;
  height: 38px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22) 0 12px, transparent 12px),
    #27a9a0;
  z-index: 2;
}

.hero-avatar.green .torso {
  background:
    linear-gradient(90deg, rgba(255,255,255,.22) 0 12px, transparent 12px),
    #1e8f6a;
}

.hero-avatar.blue .torso {
  background:
    linear-gradient(90deg, rgba(120,67,38,.3) 0 5px, transparent 5px 18px, rgba(120,67,38,.3) 18px 23px, transparent 23px 35px, rgba(120,67,38,.3) 35px 40px, transparent 40px),
    linear-gradient(#d79b66 0 13px, #c98755 13px 16px, #d79b66 16px 25px, #c98755 25px 28px, #d79b66 28px),
    #d79b66;
  width: 50px;
  left: 16px;
}

.hero-avatar .torso::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #d79b66;
}

.hero-avatar .arm {
  top: 40px;
  width: 16px;
  height: 42px;
  background: #d79b66;
  z-index: 1;
}

.hero-avatar .arm.left {
  left: 3px;
}

.hero-avatar .arm.right {
  right: 2px;
  transform: rotate(-18deg);
  transform-origin: top center;
}

.hero-avatar.blue .arm.right {
  right: -7px;
  width: 22px;
  height: 48px;
  transform: rotate(20deg);
}

.hero-avatar.blue .arm.left {
  left: -7px;
  width: 22px;
  height: 48px;
  transform: rotate(-20deg);
}

.hero-avatar .tool {
  right: -4px;
  top: 22px;
  width: 11px;
  height: 58px;
  background: #7a4c28;
  transform: rotate(-32deg);
  z-index: 4;
}

.hero-avatar.green .tool {
  right: -3px;
  top: 17px;
  width: 13px;
  height: 66px;
  background: linear-gradient(#dfe8ea 0 45px, #7a4c28 45px 66px);
  transform: rotate(27deg);
}

.hero-avatar.blue .tool {
  display: none;
}

.hero-avatar.equipped-attack .tool {
  display: block;
  right: -4px;
  top: 17px;
  width: 13px;
  height: 66px;
  background: linear-gradient(#dfe8ea 0 45px, #7a4c28 45px 66px);
  transform: rotate(27deg);
}

.hero-avatar .tool::before {
  content: "";
  position: absolute;
  left: -11px;
  top: -10px;
  width: 26px;
  height: 16px;
  border: 3px solid #1b160f;
  background: #aab4b2;
  box-shadow: inset -4px -4px rgba(0,0,0,.18);
}

.hero-avatar.green .tool::before {
  left: -10px;
  top: 38px;
  width: 28px;
  height: 8px;
  background: #d6c17e;
}

.hero-avatar.blue .tool::before {
  display: none;
}

.hero-avatar .shield {
  display: none;
}

.hero-avatar.green .shield,
.hero-avatar.equipped-defense .shield {
  display: block;
  left: -3px;
  top: 45px;
  width: 26px;
  height: 34px;
  background:
    linear-gradient(90deg, #2f6fbc 0 50%, #e4473f 50%),
    #2f6fbc;
  z-index: 4;
}

.hero-avatar .heal-mark {
  display: none;
}

.hero-avatar.equipped-heal .heal-mark {
  display: block;
  right: 5px;
  top: 2px;
  width: 18px;
  height: 18px;
  background: #78f06b;
  z-index: 5;
}

.hero-avatar.equipped-heal .heal-mark::before,
.hero-avatar.equipped-heal .heal-mark::after {
  content: "";
  position: absolute;
  background: #fff8dd;
}

.hero-avatar.equipped-heal .heal-mark::before {
  left: 7px;
  top: 3px;
  width: 4px;
  height: 12px;
}

.hero-avatar.equipped-heal .heal-mark::after {
  left: 3px;
  top: 7px;
  width: 12px;
  height: 4px;
}

.hero-avatar.green .shield::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 5px;
  height: 22px;
  background: #ffe15a;
  box-shadow: 0 8px 0 5px rgba(255,225,90,.2);
}

.hero-avatar.blue .torso::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  width: 23px;
  height: 18px;
  background:
    linear-gradient(#7a4326 0 3px, transparent 3px 7px, #7a4326 7px 10px, transparent 10px 14px, #7a4326 14px 17px, transparent 17px),
    linear-gradient(90deg, transparent 0 10px, #7a4326 10px 13px, transparent 13px);
  opacity: .75;
}

.hero-avatar .leg {
  top: 73px;
  width: 22px;
  height: 31px;
  background: #2f5ea8;
}

.hero-avatar.green .leg {
  background: #2f5ea8;
}

.hero-avatar.blue .leg {
  top: 70px;
  height: 34px;
  background:
    linear-gradient(#1f1a16 0 16px, #d79b66 16px),
    #1f1a16;
}

.hero-avatar .leg.left {
  left: 18px;
}

.hero-avatar .leg.right {
  left: 42px;
}

.hero-avatar.skin-steve .head {
  background:
    linear-gradient(#3b2618 0 9px, transparent 9px),
    linear-gradient(90deg, #3b2618 0 8px, transparent 8px 34px, #3b2618 34px 42px),
    #d79b66;
}

.hero-avatar.skin-alex .head {
  background:
    linear-gradient(#d38a35 0 12px, transparent 12px),
    linear-gradient(90deg, #d38a35 0 10px, transparent 10px 32px, #d38a35 32px 42px),
    #e0a06a;
}

.hero-avatar.skin-villager .head {
  background:
    linear-gradient(#5b3924 0 10px, transparent 10px),
    linear-gradient(90deg, transparent 0 16px, #9b6b42 16px 27px, transparent 27px),
    #c58d5e;
}

.hero-avatar.skin-villager .head::after {
  left: 17px;
  top: 23px;
  width: 8px;
  height: 10px;
  background: #7a4326;
}

.hero-avatar.skin-end .head {
  background:
    linear-gradient(90deg, transparent 0 9px, #b96dff 9px 15px, transparent 15px 27px, #b96dff 27px 33px, transparent 33px),
    #1d1b2e;
}

.hero-avatar.skin-end .head::before {
  background: #b96dff;
  box-shadow: 18px 0 #b96dff;
}

.hero-avatar.outfit-adventure .torso {
  background:
    linear-gradient(90deg, rgba(255,255,255,.22) 0 12px, transparent 12px),
    #27a9a0;
}

.hero-avatar.outfit-miner .torso {
  background:
    linear-gradient(#c58d5e 0 8px, transparent 8px),
    linear-gradient(90deg, #7a4c28 0 9px, #2f5ea8 9px 37px, #7a4c28 37px),
    #2f5ea8;
}

.hero-avatar.outfit-armor .torso {
  background:
    linear-gradient(90deg, rgba(255,255,255,.32) 0 12px, transparent 12px),
    repeating-linear-gradient(0deg, #b7c3c6 0 8px, #8b999d 8px 14px);
}

.hero-avatar.outfit-nether .torso {
  background:
    linear-gradient(90deg, rgba(255,92,62,.38) 0 13px, transparent 13px),
    repeating-linear-gradient(0deg, #271822 0 9px, #5b1730 9px 16px);
}

.hero-avatar.outfit-topless .torso {
  background:
    linear-gradient(90deg, rgba(120,67,38,.3) 0 5px, transparent 5px 18px, rgba(120,67,38,.3) 18px 23px, transparent 23px 35px, rgba(120,67,38,.3) 35px 40px, transparent 40px),
    linear-gradient(#d79b66 0 13px, #c98755 13px 16px, #d79b66 16px 25px, #c98755 25px 28px, #d79b66 28px),
    #d79b66;
}

.hero-avatar.outfit-armor .arm,
.hero-avatar.outfit-nether .arm {
  background: #b7c3c6;
}

.hero-avatar.outfit-nether .arm {
  background: #5b1730;
}

.hero-avatar.outfit-topless .arm {
  background: #d79b66;
}

.hero-avatar.outfit-armor .leg {
  background: #8b999d;
}

.hero-avatar.outfit-nether .leg {
  background: #271822;
}

.hero-avatar.build-slim {
  width: 74px;
}

.hero-avatar.build-slim .torso {
  left: 21px;
  width: 38px;
}

.hero-avatar.build-slim .arm {
  width: 13px;
}

.hero-avatar.build-slim .leg {
  width: 18px;
}

.hero-avatar.build-slim .leg.right {
  left: 40px;
}

.hero-avatar.build-power {
  width: 94px;
  transform: scale(1.04);
  transform-origin: bottom center;
}

.hero-avatar.build-power .torso {
  left: 14px;
  width: 54px;
  height: 42px;
}

.hero-avatar.build-power .arm {
  width: 22px;
  height: 48px;
}

.hero-avatar.build-power .arm.left {
  left: -2px;
}

.hero-avatar.build-power .arm.right {
  right: -2px;
}

.hero-avatar.build-power .leg {
  top: 76px;
  width: 25px;
  height: 28px;
}

.hero-avatar.build-power .leg.left {
  left: 14px;
}

.hero-avatar.build-power .leg.right {
  left: 43px;
}

.hero-avatar.build-schwa {
  width: 106px;
  transform: scale(1.08);
  transform-origin: bottom center;
}

.hero-avatar.build-schwa .head {
  left: 31px;
}

.hero-avatar.build-schwa .torso {
  left: 19px;
  top: 36px;
  width: 62px;
  height: 44px;
}

.hero-avatar.build-schwa.outfit-topless .torso::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 34px;
  height: 24px;
  background:
    linear-gradient(#7a4326 0 3px, transparent 3px 8px, #7a4326 8px 11px, transparent 11px 17px, #7a4326 17px 20px, transparent 20px),
    linear-gradient(90deg, transparent 0 15px, #7a4326 15px 18px, transparent 18px);
  opacity: .8;
}

.hero-avatar.build-schwa .arm {
  top: 39px;
  width: 28px;
  height: 52px;
}

.hero-avatar.build-schwa .arm.left {
  left: -8px;
  transform: rotate(-14deg);
}

.hero-avatar.build-schwa .arm.right {
  right: -8px;
  transform: rotate(14deg);
}

.hero-avatar.build-schwa .leg {
  top: 78px;
  width: 27px;
  height: 26px;
}

.hero-avatar.build-schwa .leg.left {
  left: 22px;
}

.hero-avatar.build-schwa .leg.right {
  left: 52px;
}

.hero-avatar.build-schwa .tool {
  right: -9px;
}

.hero-avatar.build-schwa .shield {
  left: -10px;
}

.world-card.green { --player: #2f7d32; }
.world-card.blue { --player: #2f6fbc; }

.world-info {
  flex: 1;
  min-width: 0;
  color: #fff8dd;
  text-shadow: 2px 2px #1b160f;
}

.world-info p {
  color: #ffe15a;
  font-size: 12px;
  font-weight: 900;
}

.world-info h2 {
  margin: 3px 0 6px;
  font-size: 19px;
  line-height: 1.05;
}

.world-info strong {
  display: block;
  font-size: 14px;
}

.player-hp {
  display: grid;
  gap: 3px;
  margin-top: 4px;
}

.player-hp b {
  font-size: 12px;
}

.player-hp div {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  max-width: 170px;
}

.player-hp span {
  height: 10px;
  border: 2px solid #1b160f;
  background: #e4473f;
  box-shadow: inset -2px -2px rgba(0,0,0,.22);
}

.player-hp span.gone {
  background: #6f6c5c;
}

.enemy-box {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 116px;
  padding: 6px;
  background: rgba(27,22,15,.72);
  border: 4px solid #1b160f;
  color: #fff8dd;
  box-shadow: inset -4px -4px rgba(0,0,0,.24);
  background: rgba(255,255,255,.68);
  border: 3px solid #1b160f;
}

.enemy-sprite {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 3px solid #1b160f;
  background: #73bf5a;
  box-shadow: inset -7px -7px rgba(0,0,0,.18);
  image-rendering: pixelated;
}

.enemy-sprite i,
.enemy-sprite::before,
.enemy-sprite::after {
  content: "";
  position: absolute;
  display: block;
}

.enemy-sprite i {
  left: 10px;
  top: 16px;
  width: 8px;
  height: 8px;
  background: #111;
  box-shadow: 28px 0 #111, 14px 18px #24401c;
}

.enemy-sprite::before {
  left: 14px;
  top: -10px;
  width: 12px;
  height: 12px;
  background: inherit;
  border: 3px solid #1b160f;
  box-shadow: 22px 0 0 -1px inherit, 22px 0 0 2px #1b160f;
}

.enemy-sprite::after {
  right: 7px;
  bottom: 7px;
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,.35);
}

.enemy-sprite.meal { background: #caa052; }
.enemy-sprite.dishes { background: #7aa5b8; }
.enemy-sprite.mealDishes { background: #caa052; }
.enemy-sprite.cleanup { background: #8f6b4a; }
.enemy-sprite.schoolPrep { background: #5f9cc9; }
.enemy-sprite.custom { background: #c26d9a; }
.enemy-sprite.bonus { background: #8a5fc2; }

.enemy-box strong {
  font-size: 11px;
}

.enemy-box small {
  max-width: 104px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 900;
}

.effect-attack .enemy-box,
.effect-hit .enemy-box,
.effect-defeat .enemy-box,
.effect-counter .enemy-box,
.effect-counter-defeat .enemy-box {
  animation: enemyDamage .55s steps(2, end) both;
}

.effect-attack .enemy-sprite,
.effect-hit .enemy-sprite,
.effect-defeat .enemy-sprite,
.effect-counter .enemy-sprite,
.effect-counter-defeat .enemy-sprite {
  animation: enemyHit .55s steps(3, end) both;
}

.effect-counter .hero-avatar,
.effect-counter-defeat .hero-avatar,
.effect-counter .player-hp,
.effect-counter-defeat .player-hp {
  animation: playerHit .6s steps(3, end) both;
}

.effect-defeat .enemy-sprite {
  filter: saturate(1.4) contrast(1.2);
}

.effect-attack .enemy-sprite::after,
.effect-hit .enemy-sprite::after,
.effect-defeat .enemy-sprite::after {
  background:
    linear-gradient(45deg, transparent 0 42%, #ff4b2f 42% 50%, transparent 50% 100%),
    linear-gradient(-45deg, transparent 0 44%, #ff4b2f 44% 52%, transparent 52% 100%);
  width: 26px;
  height: 26px;
  right: 10px;
  bottom: 12px;
}

.enemy-box.defeated {
  background: rgba(255,225,90,.78);
}

.enemy-box.defeated .enemy-sprite {
  opacity: .55;
  transform: rotate(8deg);
  filter: grayscale(.3);
}

.enemy-hp {
  display: grid;
  gap: 3px;
  width: 100%;
}

.enemy-hp strong {
  text-align: center;
  font-size: 10px;
}

.enemy-hp div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.enemy-hp span {
  height: 10px;
  border: 2px solid #1b160f;
  background: #e13b2f;
  box-shadow: inset -2px -2px rgba(0,0,0,.22);
}

.enemy-hp span.waiting {
  background: #ffe15a;
  animation: pendingHp .8s steps(2, end) infinite;
}

.enemy-hp span.gone {
  background: #3c3429;
}

.status-line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 6px;
}

.status-line span {
  min-height: 28px;
  padding: 5px 3px;
  border: 3px solid #1b160f;
  background: #2d241b;
  color: #fff8dd;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.skin-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 6px;
}

.skin-bar button {
  min-height: 42px;
  padding: 5px 7px;
  border: 3px solid #1b160f;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12) 0 10px, transparent 10px),
    #6d4a28;
  color: #fff8dd;
  box-shadow: 0 4px 0 #1b160f, inset 0 -4px rgba(0,0,0,.22);
  text-shadow: 1px 1px #1b160f;
}

.skin-bar button span,
.skin-bar button strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skin-bar button span {
  color: #ffe15a;
  font-size: 10px;
  font-weight: 900;
}

.skin-bar button strong {
  font-size: 13px;
  line-height: 1.15;
}

.adventure-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 6px 0;
}

.adventure-panel > div,
.adventure-panel > button {
  min-height: 58px;
  padding: 6px;
  border: 3px solid #1b160f;
  background: #2d241b;
  color: #fff8dd;
  box-shadow: inset 0 -4px rgba(0,0,0,.22);
  overflow: hidden;
  text-align: left;
}

.adventure-panel strong,
.adventure-panel span,
.adventure-panel em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adventure-panel strong {
  color: #ffe15a;
  font-size: 12px;
  line-height: 1.1;
  text-shadow: 1px 1px #1b160f;
}

.adventure-panel span,
.adventure-panel em {
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.mini-base div,
.mini-streak div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 3px;
}

.mini-base div span,
.mini-streak div span {
  height: 10px;
  border: 2px solid #1b160f;
  background: #7a4c28;
  box-shadow: inset -2px -2px rgba(0,0,0,.18);
}

.mini-base div span:nth-child(2n) { background: #6fac45; }
.mini-base div span:nth-child(3n) { background: #caa052; }
.mini-base div span:nth-child(5n) { background: #8b999d; }

.mini-pet {
  position: relative;
  padding-left: 28px !important;
}

.mini-pet::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  width: 16px;
  height: 16px;
  border: 3px solid #1b160f;
  background: #b7c3c6;
  box-shadow: 10px 8px 0 -3px #1b160f;
}

.mini-pet.pet-cat::before { background: #f3c66b; }
.mini-pet.pet-axolotl::before { background: #f08fb4; }

.mini-badges {
  background:
    linear-gradient(135deg, rgba(255,225,90,.2) 0 12px, transparent 12px 24px),
    #4f3c18 !important;
}

.adventure-panel > button.active {
  outline: 4px solid #ffe15a;
  outline-offset: -7px;
}

.fun-detail {
  padding: 8px;
  border: 4px solid #111;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0 12px, transparent 12px 24px),
    #545650;
  color: #fff8dd;
  box-shadow: inset 3px 3px rgba(255,255,255,.16), inset -4px -4px rgba(0,0,0,.32), 0 3px 0 #111;
}

.fun-detail h3 {
  color: #ffe15a;
  font-size: 18px;
  text-shadow: 1px 1px #111;
}

.fun-detail p {
  margin-top: 5px;
  color: #fff8dd;
  font-size: 13px;
  font-weight: 800;
}

.detail-blocks,
.detail-list,
.detail-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.detail-blocks span,
.detail-list span,
.detail-effects span,
.detail-score {
  padding: 5px 7px;
  border: 3px solid #111;
  background: #2d241b;
  color: #fff8dd;
  font-size: 12px;
  font-weight: 900;
}

.detail-list strong {
  width: 100%;
  color: #ffe15a;
  font-size: 12px;
}

.detail-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.detail-badges span {
  min-height: 30px;
  padding: 5px 7px;
  border: 3px solid #111;
  background: #2d241b;
  color: #d8d0b8;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-badges span.earned {
  background: #5b792f;
  color: #fff8dd;
  box-shadow: inset 0 -4px rgba(0,0,0,.2);
}

.craft-hotbar {
  min-height: 30px;
  padding: 0 8px;
  font-size: 12px;
}

.quest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.quest-card {
  min-height: 108px;
  padding: 8px;
  border: 4px solid #1b160f;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0 12px, transparent 12px 24px),
    #caa052;
  box-shadow: 0 4px 0 #1b160f;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: minmax(56px, 1fr) auto;
  gap: 7px;
  align-items: start;
}

.quest-card.pending {
  background: #d6aa48;
  animation: pendingGlow 1.2s ease-in-out infinite alternate;
  outline: 4px solid #ffe15a;
  outline-offset: -8px;
}

.quest-card.cleared {
  background: #6fac45;
}

.quest-icon {
  position: relative;
  width: 42px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 3px solid #1b160f;
  background: #a87945;
  box-shadow: inset -6px -6px rgba(0,0,0,.2);
}

.quest-icon span,
.quest-icon::before,
.quest-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.quest-icon.homework { background: #77512d; }
.quest-icon.homework span {
  left: 9px;
  top: 7px;
  width: 28px;
  height: 30px;
  background: #2f6fbc;
  border: 3px solid #1b160f;
  box-shadow: inset -5px -5px rgba(0,0,0,.2);
}
.quest-icon.homework::before {
  left: 15px;
  top: 13px;
  width: 15px;
  height: 3px;
  background: #fff4b8;
  box-shadow: 0 8px #fff4b8;
}

.quest-icon.meal { background: #d0a04e; }
.quest-icon.meal span {
  left: 10px;
  top: 11px;
  width: 28px;
  height: 20px;
  background: #f0e1a2;
  border: 3px solid #1b160f;
}
.quest-icon.meal::before {
  left: 19px;
  top: 5px;
  width: 9px;
  height: 9px;
  background: #78b34a;
  border: 2px solid #1b160f;
}

.quest-icon.mealDishes { background: #d0a04e; }
.quest-icon.mealDishes span {
  left: 9px;
  top: 9px;
  width: 26px;
  height: 18px;
  background: #f0e1a2;
  border: 3px solid #1b160f;
}
.quest-icon.mealDishes::before {
  left: 18px;
  top: 4px;
  width: 9px;
  height: 9px;
  background: #78b34a;
  border: 2px solid #1b160f;
}
.quest-icon.mealDishes::after {
  right: 5px;
  bottom: 5px;
  width: 19px;
  height: 8px;
  background: #dff3ff;
  border: 3px solid #1b160f;
}

.quest-icon.dishes { background: #9bb5c1; }
.quest-icon.dishes span {
  left: 9px;
  top: 18px;
  width: 30px;
  height: 14px;
  background: #dff3ff;
  border: 3px solid #1b160f;
}
.quest-icon.dishes::before {
  left: 14px;
  top: 9px;
  width: 20px;
  height: 12px;
  background: #ffffff;
  border: 3px solid #1b160f;
}

.quest-icon.cleanup { background: #8f6b4a; }
.quest-icon.cleanup span {
  left: 20px;
  top: 6px;
  width: 9px;
  height: 32px;
  background: #73431f;
  border: 3px solid #1b160f;
  transform: rotate(24deg);
}
.quest-icon.cleanup::before {
  left: 7px;
  bottom: 5px;
  width: 28px;
  height: 12px;
  background: #d9b35f;
  border: 3px solid #1b160f;
}
.quest-icon.cleanup::after {
  right: 5px;
  top: 8px;
  width: 10px;
  height: 10px;
  background: #78b34a;
  border: 2px solid #1b160f;
}

.quest-icon.schoolPrep { background: #5f9cc9; }
.quest-icon.schoolPrep span {
  left: 7px;
  top: 8px;
  width: 18px;
  height: 28px;
  background: #fff4b8;
  border: 3px solid #1b160f;
}
.quest-icon.schoolPrep::before {
  right: 8px;
  top: 6px;
  width: 10px;
  height: 30px;
  background: #7fc8ff;
  border: 3px solid #1b160f;
}
.quest-icon.schoolPrep::after {
  left: 12px;
  top: 15px;
  width: 8px;
  height: 3px;
  background: #1b160f;
  box-shadow: 0 7px #1b160f, 21px -4px #ffffff;
}

.quest-icon.custom { background: #c26d9a; }
.quest-icon.custom span {
  left: 14px;
  top: 8px;
  width: 22px;
  height: 22px;
  background: #ffe15a;
  border: 3px solid #1b160f;
  box-shadow: 0 8px 0 -2px #7fc8ff, inset -4px -4px rgba(0,0,0,.18);
}
.quest-icon.custom::before {
  left: 9px;
  top: 11px;
  width: 8px;
  height: 8px;
  background: #fff8dd;
  border: 2px solid #1b160f;
}
.quest-icon.custom::after {
  right: 7px;
  bottom: 6px;
  width: 10px;
  height: 10px;
  background: #78b34a;
  border: 2px solid #1b160f;
}

.quest-icon.bonus { background: #8a5fc2; }
.quest-icon.bonus span {
  left: 18px;
  top: 7px;
  width: 12px;
  height: 30px;
  background: #73431f;
  border: 3px solid #1b160f;
  transform: rotate(35deg);
}
.quest-icon.bonus::before {
  left: 7px;
  top: 6px;
  width: 16px;
  height: 16px;
  background: #b8bec7;
  border: 3px solid #1b160f;
}
.quest-icon.bonus::after {
  right: 6px;
  bottom: 8px;
  width: 10px;
  height: 10px;
  background: #ffe15a;
  border: 2px solid #1b160f;
}

.quest-card h3 {
  color: #fff8dd;
  text-shadow: 2px 2px #1b160f;
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.quest-card p,
.quest-card small {
  margin-top: 3px;
  color: #2d241b;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.quest-card button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 42px;
  font-size: 16px;
}

.quest-state {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 36px;
  border: 3px solid #1b160f;
  background: #6f6c5c;
  color: #fff8dd;
  font-size: 13px;
}

.fun-page {
  display: grid;
  gap: 8px;
}

.fun-page > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border: 4px solid #111;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0 12px, transparent 12px 24px),
    #373737;
  color: #fff8dd;
  box-shadow: inset 3px 3px rgba(255,255,255,.16), inset -4px -4px rgba(0,0,0,.32), 0 3px 0 #111;
}

.fun-page > header span {
  display: block;
  color: #ffe15a;
  font-size: 12px;
  font-weight: 900;
}

.fun-page > header h2 {
  margin-top: 2px;
  color: #fff8dd;
  font-size: 21px;
  text-shadow: 2px 2px #111;
}

.fun-page > header button {
  min-width: 112px;
}

.fun-hero {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.fun-stat {
  min-height: 58px;
  padding: 6px;
  border: 3px solid #111;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px),
    #4d4f4d;
  color: #fff8dd;
  box-shadow: inset 3px 3px rgba(255,255,255,.16), inset -4px -4px rgba(0,0,0,.32), 0 3px 0 #111;
}

.fun-stat span,
.fun-stat strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fun-stat span {
  color: #ffe15a;
  font-size: 11px;
  font-weight: 900;
}

.fun-stat strong {
  margin-top: 4px;
  font-size: 15px;
  text-shadow: 1px 1px #111;
}

.reward-mini {
  margin-top: 6px;
  padding: 6px;
  border: 4px solid #1b160f;
  background: #8f6b4a;
  box-shadow: 0 4px 0 #1b160f;
  border-left: 12px solid var(--player);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto auto;
  align-items: center;
  gap: 6px;
}

.reset-today {
  min-height: 34px;
  background: #6f6c5c;
  font-size: 12px;
}

.reward-mini div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reward-mini span {
  color: #ffe15a;
  font-size: 10px;
  font-weight: 900;
}

.reward-mini strong {
  overflow: hidden;
  color: #fff8dd;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-belt {
  margin-top: 6px;
  padding: 6px;
  border: 4px solid #1b160f;
  background: #16120e;
  box-shadow: 0 4px 0 #1b160f;
  color: #fff8dd;
}

.inventory-belt header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-weight: 900;
  align-items: center;
}

.inventory-belt header span {
  flex: 1;
  min-width: 0;
  color: #78f06b;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inventory-belt > div {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
}

.item-slot {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  border: 2px solid #1b160f;
  background: #6f6c5c;
  box-shadow: inset -5px -5px rgba(0,0,0,.28);
  overflow: hidden;
  padding: 0;
  color: inherit;
  min-height: 0;
}

.item-slot i,
.item-slot i::before,
.item-slot i::after {
  content: "";
  position: absolute;
  display: block;
}

.item-slot i {
  left: 50%;
  top: 37%;
  width: 13px;
  height: 22px;
  border: 2px solid #1b160f;
  background: #b8bec7;
  transform: translate(-50%, -50%) rotate(28deg);
}

.item-slot.icon-sword i,
.item-slot.icon-trident i {
  background: #dfe8ea;
}

.item-slot.icon-sword.wood i { background: #9b6437; }
.item-slot.icon-sword.gem i { background: #58d6d0; }
.item-slot.icon-sword.badge i { background: #d0a04e; }

.item-slot.icon-pickaxe i {
  width: 10px;
  height: 25px;
  background: #7a4c28;
  transform: translate(-50%, -45%) rotate(36deg);
}

.item-slot.icon-pickaxe i::before {
  left: -14px;
  top: -7px;
  width: 28px;
  height: 9px;
  background: #dfe8ea;
}

.item-slot.icon-trident i::before {
  left: -10px;
  top: -9px;
  width: 26px;
  height: 12px;
  background:
    linear-gradient(90deg, #58d6d0 0 5px, transparent 5px 10px, #58d6d0 10px 15px, transparent 15px 20px, #58d6d0 20px 25px);
}

.item-slot.icon-potion i {
  top: 40%;
  width: 18px;
  height: 22px;
  border-radius: 0 0 8px 8px;
  background: #8a5fc2;
  transform: translate(-50%, -50%) rotate(0);
}

.item-slot.icon-potion i::before {
  left: 4px;
  top: -9px;
  width: 8px;
  height: 8px;
  background: #dfe8ea;
}

.item-slot.icon-apple i {
  top: 41%;
  width: 22px;
  height: 20px;
  background: #e4473f;
  transform: translate(-50%, -50%) rotate(0);
}

.item-slot.icon-apple i::before {
  left: 9px;
  top: -8px;
  width: 5px;
  height: 8px;
  background: #7a4c28;
}

.item-slot.icon-shield i,
.item-slot.icon-totem i,
.item-slot.icon-beacon i,
.item-slot.icon-helmet i,
.item-slot.icon-chestplate i,
.item-slot.icon-leggings i,
.item-slot.icon-item i {
  width: 20px;
  height: 20px;
  background: #ffe15a;
  transform: translate(-50%, -50%) rotate(0);
}

.item-slot.icon-shield i {
  height: 25px;
  background: linear-gradient(90deg, #2f6fbc 0 50%, #e4473f 50%);
}

.item-slot.icon-helmet i {
  height: 17px;
  border-radius: 10px 10px 0 0;
  background: #dfe8ea;
}

.item-slot.icon-chestplate i {
  width: 23px;
  height: 24px;
  background:
    linear-gradient(90deg, transparent 0 5px, #dfe8ea 5px 18px, transparent 18px),
    #7fc8ff;
}

.item-slot.icon-leggings i {
  width: 22px;
  height: 24px;
  background:
    linear-gradient(90deg, #dfe8ea 0 9px, transparent 9px 13px, #dfe8ea 13px 22px);
}

.item-slot.icon-totem i {
  background: #d0a04e;
}

.item-slot.icon-beacon i {
  background:
    linear-gradient(#58d6d0 0 9px, #dfe8ea 9px 20px);
}

.item-slot i::before {
  left: -9px;
  top: -8px;
  width: 20px;
  height: 10px;
  border: 2px solid #1b160f;
  background: inherit;
}

.item-slot.icon-potion i::after {
  left: 4px;
  top: 11px;
  width: 10px;
  height: 4px;
  background: rgba(255,255,255,.45);
}

.item-slot.icon-apple i::after {
  left: 14px;
  top: -7px;
  width: 8px;
  height: 5px;
  background: #78b34a;
}

.item-slot.icon-shield i::before,
.item-slot.icon-helmet i::before,
.item-slot.icon-chestplate i::before,
.item-slot.icon-leggings i::before,
.item-slot.icon-totem i::before,
.item-slot.icon-beacon i::before,
.item-slot.icon-item i::before {
  left: 6px;
  top: 5px;
  width: 7px;
  height: 7px;
  border: 0;
  background: #fff8dd;
}

.item-slot small {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  padding: 1px 2px;
  background: rgba(27,22,15,.76);
  color: #fff8dd;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-slot b {
  position: absolute;
  right: 2px;
  top: 2px;
  min-width: 21px;
  padding: 1px 3px;
  border: 2px solid #1b160f;
  background: #fff8dd;
  color: #1b160f;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.item-slot em {
  position: absolute;
  left: 2px;
  top: 2px;
  padding: 1px 3px;
  border: 2px solid #1b160f;
  background: #ffe15a;
  color: #1b160f;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.item-slot.attack { background: #8f4a36; }
.item-slot.defense { background: #4c77a8; }
.item-slot.heal { background: #4f9f62; }

.item-slot.off {
  filter: grayscale(.85) brightness(.72);
}

.item-slot.off::after {
  content: "OFF";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(27,22,15,.58);
  color: #fff8dd;
  font-size: 13px;
  font-weight: 900;
}

.item-slot.empty {
  background: #4f4a3e;
  opacity: .55;
}

.item-slot.empty i {
  display: none;
}

.item-slot.empty b {
  display: none;
}

.item-slot.rare {
  box-shadow: inset -5px -5px rgba(0,0,0,.28), 0 0 0 3px #ffe15a inset;
}

.item-slot.epic {
  box-shadow: inset -5px -5px rgba(0,0,0,.28), 0 0 0 3px #ff7ee8 inset, 0 0 12px rgba(255,126,232,.7);
}

.item-slot.equipped {
  border-color: #ffe15a;
  animation: equippedPulse 1.1s ease-in-out infinite alternate;
}

.chest-choice {
  margin-top: 6px;
  padding: 6px;
  border: 4px solid #1b160f;
  background: #f0dfb3;
  box-shadow: 0 4px 0 #1b160f;
}

.chest-choice header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  font-weight: 900;
}

.chest-choice header span {
  color: #65431f;
  font-size: 12px;
}

.chest-choice > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.chest-choice button {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 4px;
  background: #8f6b4a;
  text-align: left;
}

.chest-choice button span,
.chest-choice button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chest-choice button span {
  font-size: 11px;
}

.chest-choice button small {
  font-size: 9px;
}

.chest-choice .keep-current {
  background: #6f6c5c;
}

.action-log {
  margin-top: 7px;
  min-height: 32px;
  padding: 6px 10px;
  border: 3px solid #1b160f;
  background: #1f271c;
  color: #fff;
  text-align: center;
  font-weight: 900;
}

.guild-board {
  margin-top: 10px;
}

.guild-board h2 {
  display: inline-block;
  margin: 0 0 9px;
  padding: 8px 10px;
  border: 4px solid #1b160f;
  background: #f0dfb3;
  box-shadow: 0 4px 0 #1b160f;
}

.guild-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.guild-player {
  padding: 10px;
  border: 4px solid #1b160f;
  border-left: 12px solid var(--player);
  background: #f0dfb3;
  box-shadow: 0 4px 0 #1b160f;
}

.parent-settings {
  margin: 8px 0;
  padding: 8px;
  border: 4px solid #1b160f;
  background: #d8c69c;
  box-shadow: 0 4px 0 #1b160f;
}

.parent-settings label,
.custom-quest-setting {
  display: grid;
  gap: 5px;
}

.parent-settings span,
.custom-quest-setting span {
  font-size: 12px;
  font-weight: 900;
}

.parent-settings small {
  color: #fff8dd;
  font-size: 12px;
  font-weight: 900;
}

.parent-settings input,
.custom-quest-setting input {
  min-height: 38px;
  border: 3px solid #1b160f;
  background: #fff8dd;
  padding: 0 8px;
  font-weight: 900;
}

.guild-player header {
  justify-content: space-between;
  gap: 8px;
}

.guild-player input {
  width: 130px;
  min-height: 38px;
  border: 3px solid #1b160f;
  background: #fff8dd;
  padding: 0 8px;
  font-weight: 900;
}

.guild-player header span {
  font-size: 12px;
  font-weight: 900;
}

.guild-summary {
  display: grid;
  gap: 3px;
  margin: 8px 0;
  padding: 7px;
  border: 3px solid #1b160f;
  background: #d8c69c;
}

.custom-quest-setting {
  margin: 8px 0;
}

.guild-summary small {
  font-weight: 800;
}

.approval-list {
  display: grid;
  gap: 6px;
}

.approval-row {
  justify-content: space-between;
  gap: 6px;
  min-height: 48px;
  padding: 5px 0;
  border-top: 3px solid rgba(27,22,15,.22);
}

.approval-row strong {
  flex: 1;
}

.secondary {
  background: #6f6c5c;
}

.danger {
  background: #a64032;
}

.empty {
  padding: 12px 0;
  font-weight: 900;
}

.mini-bag {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.mini-bag span {
  padding: 5px 7px;
  border: 2px solid #1b160f;
  background: #d8c69c;
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 744px) {
  .app-shell {
    padding: 6px;
  }

  .app-header {
    min-height: 42px;
    padding: 5px 7px;
  }

  h1 {
    font-size: 19px;
  }

  .world-card {
    min-height: 118px;
    padding: 7px;
  }

  .world-info h2 {
    font-size: 16px;
  }

  .world-info strong {
    font-size: 14px;
  }

  .quest-card {
    min-height: 98px;
    padding: 7px;
  }

  .quest-card h3 {
    font-size: 16px;
  }

  .quest-card p,
  .quest-card small {
    font-size: 12px;
  }

  .quest-card button {
    min-height: 38px;
  }

  .reward-mini {
    padding: 6px;
    grid-template-columns: 1fr 1fr 1fr auto auto;
  }

  .reward-mini button {
    min-height: 32px;
  }

  .inventory-belt {
    padding: 6px;
  }

  .inventory-belt > div {
    gap: 4px;
  }

  .item-slot small {
    font-size: 7px;
  }
}

.stage-grass { background: linear-gradient(#7fc8ff 0 48%, #78b34a 48% 60%, #8a5a2d 60% 100%); }
.stage-forest { background: linear-gradient(#6da8df 0 36%, #1f5f32 36% 56%, #2f6f38 56% 70%, #5a3b22 70% 100%); }
.stage-desert { background: linear-gradient(#8bc8f0 0 48%, #d5b45d 48% 76%, #c29b4a 76% 100%); }
.stage-ice { background: linear-gradient(#bdefff 0 46%, #dff9ff 46% 64%, #8bb7c8 64% 100%); }
.stage-fire { background: linear-gradient(#5b2c2c 0 38%, #1f1f22 38% 70%, #d94c20 70% 82%, #3a1b18 82% 100%); color: #fff; }
.stage-sea { background: linear-gradient(#66c4dc 0 28%, #2d87ac 28% 72%, #b99d64 72% 100%); }
.stage-sky { background: linear-gradient(#9fd7ff 0 65%, #f4e8a0 65% 78%, #8f7442 78% 100%); }
.stage-robot { background: linear-gradient(#24313c 0 42%, #3c4140 42% 62%, #69736f 62% 100%); color: #fff; }
.stage-star { background: radial-gradient(circle at 20% 25%, #fff 0 2px, transparent 3px), radial-gradient(circle at 78% 18%, #fff 0 2px, transparent 3px), linear-gradient(#343b80 0 68%, #151a3c 68% 100%); color: #fff; }
.stage-castle { background: linear-gradient(#21182b 0 42%, #3a2748 42% 70%, #111 70% 82%, #8f1f24 82% 100%); color: #fff; }

.stage-fire .world-info,
.stage-star .world-info,
.stage-castle .world-info {
  color: #fff;
  text-shadow: 0 2px #000;
}

.pulse-pop {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 3;
  transform: translate(-50%, -50%);
  padding: 10px 16px;
  border: 4px solid #1b160f;
  background: #ffe15a;
  box-shadow: 0 5px 0 #1b160f;
  font-size: 22px;
  font-weight: 900;
  animation: popBurst .75s ease-out both;
  pointer-events: none;
}

.attack-effect {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.attack-trail {
  position: absolute;
  left: 72px;
  top: 56px;
  width: 0;
  height: 12px;
  border: 3px solid #1b160f;
  background: #ffe15a;
  box-shadow: inset -4px -4px rgba(0,0,0,.2), 0 0 0 4px rgba(255,225,90,.35);
  transform-origin: left center;
  animation: attackTrail .48s ease-out both;
}

.attack-trail::before {
  content: "";
  position: absolute;
  right: -12px;
  top: -7px;
  width: 16px;
  height: 20px;
  border: 3px solid #1b160f;
  background: #f2f2df;
  transform: rotate(45deg);
}

.impact-core {
  position: absolute;
  right: 94px;
  top: 46px;
  width: 42px;
  height: 42px;
  border: 4px solid #1b160f;
  background: #ff4b2f;
  box-shadow: 0 0 0 8px rgba(255,225,90,.55), inset -7px -7px rgba(0,0,0,.18);
  opacity: 0;
  animation: impactFlash .62s ease-out both;
}

.attack-effect.defeat .impact-core {
  width: 56px;
  height: 56px;
  right: 88px;
  top: 39px;
}

.attack-effect.counter .attack-trail,
.attack-effect.counter-defeat .attack-trail {
  left: 92px;
  top: 54px;
  background: #8a5fc2;
}

.attack-effect.counter .impact-core,
.attack-effect.counter-defeat .impact-core {
  left: 70px;
  right: auto;
  top: 38px;
  background: #8a5fc2;
  box-shadow: 0 0 0 8px rgba(138,95,194,.42), inset -7px -7px rgba(0,0,0,.18);
}

.attack-effect.counter .damage-blocks span,
.attack-effect.counter-defeat .damage-blocks span {
  left: 86px;
  right: auto;
  background: #8a5fc2;
}

.damage-blocks span {
  position: absolute;
  right: 110px;
  top: 62px;
  width: 12px;
  height: 12px;
  border: 2px solid #1b160f;
  background: #ff4b2f;
  box-shadow: inset -3px -3px rgba(0,0,0,.18);
  transform: translate(0, 0);
  animation: damageFly .78s ease-out both;
  animation-delay: calc(var(--i) * 18ms);
}

.damage-blocks span:nth-child(3n) { background: #ffe15a; }
.damage-blocks span:nth-child(4n) { background: #ffffff; }
.damage-blocks span:nth-child(5n) { background: #7fc8ff; }

.chest-effect,
.level-effect,
.reward-effect {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.chest-body,
.chest-lid {
  position: absolute;
  right: 92px;
  border: 4px solid #1b160f;
  background: #b77222;
  box-shadow: inset -7px -7px rgba(0,0,0,.2), 0 0 0 8px rgba(255,225,90,.35);
}

.chest-body {
  top: 62px;
  width: 62px;
  height: 34px;
  animation: chestBodyPop .8s ease-out both;
}

.chest-lid {
  top: 42px;
  width: 62px;
  height: 26px;
  background: #e0a535;
  transform-origin: left bottom;
  animation: chestLidOpen .8s ease-out both;
}

.level-effect i {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 74px;
  height: 74px;
  border: 5px solid #ffe15a;
  transform: translate(-50%, -50%) scale(.25);
  opacity: 0;
  animation: levelRing .9s ease-out both;
}

.level-effect i:nth-child(2) { animation-delay: .08s; border-color: #ffffff; }
.level-effect i:nth-child(3) { animation-delay: .16s; border-color: #78f06b; }
.level-effect i:nth-child(4) { animation-delay: .24s; border-color: #7fc8ff; }

.reward-effect i {
  position: absolute;
  left: calc(50% + var(--x, 0px));
  top: calc(50% + var(--y, 0px));
  width: 26px;
  height: 26px;
  border: 4px solid #1b160f;
  background: #ffe15a;
  box-shadow: inset -5px -5px rgba(0,0,0,.18), 0 0 0 6px rgba(255,225,90,.35);
  opacity: 0;
  animation: rewardPop .9s ease-out both;
}

.reward-effect i:nth-child(1) { --x: -42px; --y: -10px; }
.reward-effect i:nth-child(2) { --x: 2px; --y: -34px; animation-delay: .08s; background: #78f06b; }
.reward-effect i:nth-child(3) { --x: 42px; --y: -6px; animation-delay: .16s; background: #7fc8ff; }

.reward-effect strong {
  position: absolute;
  left: 50%;
  top: 52%;
  padding: 5px 9px;
  border: 4px solid #1b160f;
  background: #fff8dd;
  color: #1b160f;
  font-size: 20px;
  transform: translate(-50%, -50%);
  animation: rewardText .9s ease-out both;
}

@keyframes popBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(-4deg); }
  25% { opacity: 1; transform: translate(-50%, -70%) scale(1.18) rotate(3deg); }
  100% { opacity: 0; transform: translate(-50%, -118%) scale(.92) rotate(0); }
}

@keyframes pendingGlow {
  from { filter: brightness(1); }
  to { filter: brightness(1.08); }
}

@keyframes equippedPulse {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

@keyframes pendingHp {
  from { filter: brightness(1); }
  to { filter: brightness(1.4); }
}

@keyframes attackTrail {
  0% {
    opacity: 0;
    width: 0;
    transform: translateX(0) skewX(-18deg);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 360px;
    transform: translateX(28px) skewX(-18deg);
  }
}

@keyframes impactFlash {
  0%, 38% {
    opacity: 0;
    transform: scale(.4) rotate(0);
  }
  48% {
    opacity: 1;
    transform: scale(1.18) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform: scale(.7) rotate(18deg);
  }
}

@keyframes enemyHit {
  0%, 35% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(10px);
    background-color: #ff6b52;
  }
  55% {
    transform: translateX(-8px);
  }
  70% {
    transform: translateX(6px);
    filter: brightness(1.7);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes enemyDamage {
  0%, 35% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(8px) rotate(2deg);
  }
  60% {
    transform: translateX(-7px) rotate(-2deg);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes playerHit {
  0%, 30% {
    transform: translateX(0);
    filter: brightness(1);
  }
  42% {
    transform: translateX(-10px);
    filter: brightness(1.75) saturate(1.5);
  }
  55% {
    transform: translateX(8px);
  }
  72% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
    filter: brightness(1);
  }
}

@keyframes damageFly {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(.4);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc((var(--i) - 6) * 16px),
        calc(-70px + (var(--i) % 4) * 24px)
      )
      rotate(calc(var(--i) * 34deg))
      scale(1.1);
  }
}

@keyframes chestLidOpen {
  0% { opacity: 0; transform: rotate(0) translateY(18px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-62deg) translate(-10px, -36px); }
}

@keyframes chestBodyPop {
  0% { opacity: 0; transform: scale(.7); }
  25% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(.9); }
}

@keyframes levelRing {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.25) rotate(0);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.8) rotate(35deg);
  }
}

@keyframes rewardPop {
  0% {
    opacity: 0;
    transform: translate(-50%, 20%) scale(.35);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120%) scale(.85);
  }
}

@keyframes rewardText {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(.55);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -90%) scale(.9);
  }
}

/* Block-craft UI pass: original assets, no official textures. */
.app-shell {
  background-color: #6aa24b;
  background-image:
    linear-gradient(#79b957 0 18px, #5b913d 18px 32px, #795338 32px 64px),
    linear-gradient(90deg, rgba(0,0,0,.18) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.18) 1px, transparent 1px);
  background-size: 64px 64px, 32px 32px, 32px 32px;
}

.app-shell.fire,
.app-shell.castle,
.app-shell.star {
  background-image:
    linear-gradient(#2b2430 0 32px, #513040 32px 64px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
}

.app-header {
  border-color: #111;
  background:
    linear-gradient(90deg, rgba(255,255,255,.1) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(0deg, #6f7170 0 12px, #585b59 12px 24px);
  color: #fff;
}

.kicker {
  color: #f7d85a;
}

.view-switch button,
.player-tab,
.skin-bar button,
.reward-mini,
.inventory-belt,
.adventure-panel > div,
.adventure-panel > button,
.quest-card,
.status-line span {
  border-color: #111;
  box-shadow: inset 3px 3px rgba(255,255,255,.18), inset -4px -4px rgba(0,0,0,.32), 0 3px 0 #111;
}

.world-card {
  min-height: 132px;
  background-image:
    linear-gradient(#7fc8ff 0 48%, #6fac45 48% 60%, #7a4c28 60% 100%),
    linear-gradient(90deg, rgba(0,0,0,.12) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.12) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
}

.quest-card {
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(0deg, #9b6a3e 0 13px, #855832 13px 26px);
}

.quest-card.pending {
  background:
    linear-gradient(90deg, rgba(255,255,255,.12) 0 14px, transparent 14px 28px),
    #c99d36;
}

.quest-card.cleared {
  background:
    linear-gradient(90deg, rgba(255,255,255,.12) 0 14px, transparent 14px 28px),
    #4f8f38;
}

.inventory-belt {
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0 12px, transparent 12px 24px),
    #242424;
}

.item-slot {
  background:
    linear-gradient(135deg, rgba(255,255,255,.18) 0 16px, transparent 16px),
    #555;
}

.skin-bar,
.adventure-panel {
  opacity: .96;
}

.skin-bar button,
.adventure-panel > div,
.adventure-panel > button {
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px),
    #4d4f4d;
}

@media (max-width: 820px) {
  .fun-hero {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .adventure-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .fun-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adventure-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quest-grid,
  .guild-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}