:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: #e8d8ad;
  background:
    radial-gradient(circle at 50% 20%, #352d23 0, #12100d 46%, #050504 100%);
}

button { font: inherit; }
#game-shell {
  width: 1240px;
  height: 680px;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 960px 280px;
  border: 2px solid #79603a;
  box-shadow: 0 0 0 5px #17130e, 0 24px 80px #000;
  background: #080807;
}

#stage-wrap { position: relative; overflow: hidden; box-shadow: inset 0 0 50px #000; }
#game { display: block; width: 960px; height: 640px; background: #182018; image-rendering: pixelated; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2l7 18 3-7 7-3z' fill='%23e8d18d' stroke='%2324190c' stroke-width='1.5'/%3E%3C/svg%3E") 3 2, crosshair; }
#zone-title {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  padding: 6px 24px 8px; text-align: center; pointer-events: none;
  background: linear-gradient(90deg, transparent, #090704d9 18%, #090704d9 82%, transparent);
  text-shadow: 0 2px 2px #000;
}
#zone-title b { display: block; color: #e1bb63; letter-spacing: 8px; font-family: KaiTi, serif; font-size: 21px; }
#zone-title span { color: #ad4e3b; font-size: 11px; letter-spacing: 3px; }
#stage-music-toggle {
  position: absolute; z-index: 10; top: 14px; right: 14px; min-width: 82px; height: 30px;
  color: #e7d2a5; cursor: pointer; border: 1px solid #80643a;
  background: linear-gradient(#2d2418e8, #0d0a07e8);
  box-shadow: 0 2px 10px #000b, inset 0 0 6px #000; font-size: 11px;
}
#stage-music-toggle:hover { color: #ffe18a; border-color: #c29850; }
#stage-music-toggle.muted { color: #968b75; border-color: #4e4538; }
#chat-panel {
  position: absolute; left: 18px; bottom: 112px; width: 390px; padding: 8px 12px;
  color: #d0c3a2; font-size: 12px; line-height: 20px; pointer-events: none;
  border-left: 2px solid #806332; background: linear-gradient(90deg, #060503b8, transparent);
  text-shadow: 1px 1px #000;
}
#chat-panel span { color: #d6a841; }
#combat-dock {
  position: absolute; z-index: 3; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 850px; height: 105px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #332718ed, #0a0806 72%);
  border: 2px ridge #7b6038; border-radius: 48% 48% 0 0 / 22px 22px 0 0;
  box-shadow: 0 -5px 20px #000b, inset 0 2px #b18a4b55;
}
.orb {
  position: relative; width: 72px; height: 72px; flex: 0 0 72px; overflow: hidden;
  border: 6px ridge #80643d; border-radius: 50%; background: #080606;
  box-shadow: 0 0 0 3px #171008, inset 0 0 15px #000;
}
.orb i { position: absolute; inset: auto 0 0; height: 80%; transition: height .2s; }
.life-orb i { background: radial-gradient(circle at 35% 35%, #ff6452, #9f100c 55%, #330403); }
.mana-orb i { background: radial-gradient(circle at 35% 35%, #69a9ff, #124ba8 55%, #03143c); }
.orb b { position: absolute; inset: 26px 0 auto; text-align: center; color: #f3dfbd; font-size: 10px; text-shadow: 1px 2px #000; }
.skill-belt { width: 690px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 7px 9px 4px; }
.skill-belt button {
  width: 54px; height: 43px; position: relative; padding: 1px; color: #c8b891; cursor: pointer;
  border: 2px ridge #6d5738; background: #0a0806; box-shadow: inset 0 0 8px #000;
}
.skill-belt button:hover { border-color: #d0a852; filter: brightness(1.18); }
.skill-belt button.locked, .hotkeys button.locked {
  opacity: .32 !important; filter: grayscale(1); cursor: not-allowed;
  border-color: #3b352c;
}
.skill-belt kbd { position: absolute; top: 2px; left: 3px; z-index: 2; background: #080604d8; }
.skill-belt span { display: block; margin-top: -9px; font-size: 8px; white-space: nowrap; overflow: hidden; }
.skill-icon { display: block; height: 34px; background-image: url("assets/sprites.png"); background-size: 288px 192px; }
.fire-icon { background-position: 0 -178px; }
.lightning-icon { background-position: -64px -178px; }
.heal-icon { background-position: -128px -178px; }
.shield-icon { background-position: -192px -178px; }
.potion-icon { background: radial-gradient(circle, #f16850 0 25%, #801c16 26% 42%, transparent 44%), linear-gradient(135deg, transparent 42%, #d7c09a 43% 56%, transparent 57%); }
.mana-potion-icon { background: radial-gradient(circle, #4d8fee 0 25%, #143984 26% 42%, transparent 44%), linear-gradient(135deg, transparent 42%, #d7c09a 43% 56%, transparent 57%); }
.equip-icon { background: radial-gradient(circle, #ae8b4c 0 22%, #2d281e 24% 42%, transparent 44%); }
.bag-icon { background: linear-gradient(135deg, transparent 18%, #8c642f 19% 78%, transparent 79%); }
#start-screen {
  position: absolute; z-index: 8;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-shadow: 0 3px 3px #000;
  background:
    linear-gradient(#0507059c, #070502e9),
    radial-gradient(circle at 50% 42%, #81502152, transparent 55%);
}
.title-mark {
  font-family: STKaiti, KaiTi, serif;
  font-weight: 900;
  font-size: 58px;
  letter-spacing: 12px;
  color: #f0bd4e;
  -webkit-text-stroke: 2px #482208;
  filter: drop-shadow(0 0 12px #cf731d);
}
.subtitle { margin: 0 0 12px; color: #d8c28f; letter-spacing: 6px; font-size: 13px; }
#start-btn, .window button {
  color: #f3ddb0;
  border: 1px solid #927242;
  background: linear-gradient(#45351f, #1d170f);
  box-shadow: inset 0 0 8px #000;
  cursor: pointer;
}
#start-btn { min-width: 190px; padding: 10px 34px; font-size: 18px; }
#start-screen p { margin: 11px 0 0; color: #a99a79; font-size: 11px; }
#character-create { width: 880px; }
.name-entry {
  width: 330px; height: 36px; margin: 0 auto 9px; display: grid;
  grid-template-columns: 78px 1fr; align-items: center;
  border: 1px solid #6e5631; background: #090704dc;
}
.name-entry span { color: #cbaa68; text-align: center; font-size: 13px; }
.name-entry input, .gm-login input {
  min-width: 0; height: 100%; padding: 0 10px; color: #f4dfb0;
  border: 0; border-left: 1px solid #5b462a; outline: none; background: #120e09;
}
.name-entry input:focus, .gm-login input:focus { box-shadow: inset 0 0 0 1px #c79846; }
.character-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.character-card {
  height: 166px; padding: 4px 4px 7px; overflow: hidden; color: #b7aa8b; cursor: pointer;
  border: 1px solid #665131; background: linear-gradient(#171008e8, #080605ed); box-shadow: inset 0 0 12px #000;
}
.character-card canvas {
  display: block; width: 96px; height: 112px; margin: 0 auto 1px;
  image-rendering: pixelated; filter: drop-shadow(0 5px 5px #000);
}
.character-card b { display: block; color: #d0bd91; font-size: 13px; }
.character-card small { display: block; color: #786f5c; font-size: 9px; }
.character-card:hover { border-color: #9c7841; filter: brightness(1.12); }
.character-card.selected {
  color: #ffdc7a; border-color: #e0ae57;
  background: radial-gradient(circle at 50% 42%, #6b481f, #1a1008 68%);
  box-shadow: inset 0 0 18px #d88f2738, 0 0 10px #bf7d2938;
}
.character-card.selected b { color: #ffe18a; }
.login-actions { margin-top: 11px; display: flex; justify-content: center; align-items: stretch; gap: 12px; }
.gm-login {
  height: 43px; display: grid; grid-template-columns: 60px 112px 122px;
  border: 1px solid #6b4a33; background: #0a0707df;
}
.gm-login input { padding: 0 7px; color: #efc7b6; border-left: 1px solid #4d3227; font-size: 11px; }
.gm-login button {
  color: #ffd3bc; cursor: pointer; border: 0; border-left: 1px solid #744132;
  background: linear-gradient(#56291e, #21100c); font-size: 11px;
}
.gm-login button:hover { filter: brightness(1.2); }

#side-panel {
  padding: 16px;
  overflow-y: auto;
  background:
    linear-gradient(90deg, #0b0907, #2a2115 48%, #0b0907),
    repeating-linear-gradient(0deg, transparent 0 4px, #fff1 5px);
  border-left: 2px ridge #665234;
}
.portrait { display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 10px; }
#portrait {
  width: 106px; height: 124px; border: 2px ridge #8d7043;
  background: #111; image-rendering: pixelated;
}
.portrait-meta { min-width: 0; flex: 1; }
.portrait strong, .portrait span { display: block; margin: 4px 0; }
.portrait strong {
  overflow: hidden; color: #f0c762; font-size: 15px; line-height: 1.35;
  white-space: nowrap; text-overflow: ellipsis;
}
.portrait span { color: #aaa087; font-size: 12px; }
#hero-class { color: #d6b86f; font-weight: bold; }
#portrait-equipment { margin-top: 8px; display: grid; gap: 3px; }
#portrait-equipment small {
  display: block; overflow: hidden; color: #b8a77f; font-size: 10px;
  white-space: nowrap; text-overflow: ellipsis;
}
.bar {
  height: 18px; margin: 7px 0; position: relative; overflow: hidden;
  border: 1px solid #6c5738; background: #090806; box-shadow: inset 0 0 6px #000;
}
.bar i { display: block; height: 100%; transition: width .2s; }
.bar b { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 16px; text-shadow: 1px 1px #000; }
.hp i { background: linear-gradient(90deg, #6c0909, #e03925); }
.mp i { background: linear-gradient(90deg, #092066, #2778db); }
.xp i { background: linear-gradient(90deg, #80610d, #ddbd34); }
.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  margin: 14px 0; padding: 10px; font-size: 13px; color: #c6b893;
  border: 1px solid #55452d; background: #09080688;
}
h3 { margin: 9px 0; color: #caa85f; font-size: 15px; }
.equipment > button, .hotkeys button {
  min-height: 42px; color: #9f9277; border: 1px solid #54452f; background: #0b0907aa; cursor: pointer; font-size: 11px;
}
.equipment > button { width: 100%; }
#class-switch-panel { margin-top: 10px; padding: 7px; border: 1px solid #55452d; background: #080706aa; }
.class-switch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.class-switch-grid button {
  min-height: 30px; color: #a99c81; cursor: pointer;
  border: 1px solid #51432f; background: #0b0907; font-size: 11px;
}
.class-switch-grid button.active {
  color: #ffe18a; border-color: #b28642; background: linear-gradient(#5b421d, #251b0d);
}
#class-switch-panel p { margin: 6px 0 0; color: #827966; font-size: 9px; line-height: 1.4; }
.hotkeys { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 14px; }
.hotkeys button { text-align: left; padding: 7px; }
kbd { color: #f6ce64; border: 1px solid #6e5b39; padding: 1px 4px; }
#assist-panel { margin-top: 10px; padding: 7px; border: 1px solid #55452d; background: #080706aa; }
.assist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.assist-grid button {
  min-height: 29px; color: #9b907a; font-size: 11px; cursor: pointer;
  border: 1px solid #51432f; background: #0b0907;
}
.assist-grid button.active {
  color: #ffe18a; border-color: #b28642;
  background: linear-gradient(#5b421d, #251b0d); box-shadow: inset 0 0 8px #c48b2444;
}
#assist-status { margin: 6px 0 0; color: #8e846f; font-size: 10px; }
#loot-filter { margin-top: 8px; padding-top: 7px; border-top: 1px solid #3d3325; }
#loot-filter b { display: block; margin-bottom: 5px; color: #aa9b7a; font-size: 10px; }
#loot-filter > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
#loot-filter button {
  min-height: 24px; padding: 2px; color: #756d61; font-size: 9px;
  border: 1px solid #40372b; background: #070605; cursor: pointer;
}
#loot-filter button.active { color: #ffe294; border-color: #8d6e38; background: #30210e; }
#quest, #pvp-panel { margin-top: 14px; padding: 8px; border: 1px solid #55452d; background: #080706aa; font-size: 13px; }
#quest p, #pvp-panel p { color: #b6ab91; margin: 6px 0; }
#boss-status { color: #d2a75d !important; font-size: 11px; }
#pvp-status { color: #ce8170 !important; font-size: 11px; }
#pvp-challenge {
  width: 100%; min-height: 30px; color: #ffd1b8; cursor: pointer;
  border: 1px solid #7a3d31; background: linear-gradient(#542419, #21100c);
}

.window {
  position: fixed; z-index: 5; width: 392px; padding: 12px;
  inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  border: 2px ridge #8d7043; background: linear-gradient(#2b2115f5, #0d0b08f8);
  box-shadow: 0 12px 50px #000;
}
.window.hidden { display: none; }
.window header { color: #e1bd68; padding-bottom: 10px; border-bottom: 1px solid #5b472b; font-weight: bold; }
.window header button { float: right; width: 26px; height: 24px; }
#inventory { width: 640px; }
#inventory header span { margin-left: 8px; color: #9f9275; font-size: 11px; }
#bag-grid { display: grid; grid-template-columns: repeat(10, 54px); gap: 7px; margin: 12px 0; min-height: 359px; }
.bag-item {
  position: relative; height: 54px; padding: 2px !important;
  font-size: 25px !important; border: 1px solid #5a4b35 !important; background: #070605 !important;
}
.bag-item.selected { outline: 2px solid #ffe083; transform: translateY(-1px); }
.bag-item[data-quality="fine"] { border-color: #3e8f4c !important; box-shadow: inset 0 0 8px #48c15a33; }
.bag-item[data-quality="rare"] { border-color: #347fc0 !important; box-shadow: inset 0 0 8px #4aa8ff44; }
.bag-item[data-quality="epic"] { border-color: #8f48bd !important; box-shadow: inset 0 0 10px #c477ff55; }
.bag-item[data-quality="legendary"] { border-color: #d57928 !important; box-shadow: inset 0 0 12px #ff9f3555; }
.bag-item small { display: block; font-size: 9px; color: var(--quality-color, #c3b48e); white-space: nowrap; overflow: hidden; }
.bag-item em { position: absolute; right: 3px; bottom: 1px; color: #fff; font-size: 11px; font-style: normal; }
#bag-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#bag-actions button { min-height: 34px; }
#dialog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#dialog-actions button { min-height: 38px; padding: 7px 9px; line-height: 1.35; }
#dialog-actions button:disabled { color: #655f53; border-color: #3c3429; cursor: not-allowed; filter: grayscale(1); }
#dialog-actions button:last-child:nth-child(odd) { grid-column: 1 / -1; }
#equipment-window { width: 430px; }
.paperdoll {
  position: relative; height: 390px; margin-top: 12px;
  border: 1px solid #55452d; background: radial-gradient(ellipse, #392b1d, #0b0907 70%);
}
.paperdoll-figure {
  position: absolute; left: 50%; top: 65px; width: 150px; height: 245px; transform: translateX(-50%);
  image-rendering: pixelated; border: 1px dashed #594b35; border-radius: 50% 50% 25% 25%;
}
.paperdoll button {
  position: absolute; width: 90px; height: 48px; color: #b8a785; border: 1px solid #665236; background: #0a0806;
}
.paperdoll button span { display: block; color: #e4c778; font-size: 10px; }
.paperdoll [data-slot="helmet"] { left: 160px; top: 10px; }
.paperdoll [data-slot="necklace"] { right: 20px; top: 35px; }
.paperdoll [data-slot="weapon"] { left: 20px; top: 110px; }
.paperdoll [data-slot="armor"] { right: 20px; top: 110px; }
.paperdoll [data-slot="bracelet1"] { left: 20px; top: 190px; }
.paperdoll [data-slot="bracelet2"] { right: 20px; top: 190px; }
.paperdoll [data-slot="ring1"] { left: 20px; top: 270px; }
.paperdoll [data-slot="ring2"] { right: 20px; top: 270px; }
.paperdoll [data-slot="charm"] { left: 160px; bottom: 12px; }
#toast {
  pointer-events: none; position: fixed; z-index: 30; left: 50%; top: 24px;
  transform: translateX(-50%); padding: 6px 14px; color: #ffd75c; font-weight: bold;
  border: 1px solid #71552c; border-radius: 3px; background: #090704e8;
  box-shadow: 0 4px 16px #000b; text-shadow: 0 2px 3px #000;
  opacity: 0; transition: opacity .25s;
}
#toast.show { opacity: 1; }
#skill-tooltip, #item-tooltip {
  pointer-events: none; position: fixed; z-index: 20; width: 245px; padding: 10px 12px;
  color: #ddcda5; white-space: pre-line; font-size: 12px; line-height: 1.65;
  border: 1px solid #8a6b39; background: #090704f2; box-shadow: 0 8px 24px #000c;
}
#item-tooltip { width: 270px; z-index: 31; }
#skill-tooltip.hidden, #item-tooltip.hidden { display: none; }

@media (max-width: 1250px), (max-height: 700px) {
  #game-shell { transform: translate(-50%, -50%) scale(.82); }
}