@font-face { font-family: "Friz"; src: url(../assets/ui/frizqt.ttf) format("truetype"); unicode-range: U+0000-00FF; font-display: swap; }
/* 湖畔镇长 —— 魔兽世界风格界面 */
:root {
  --gold: #ffd100;
  --gold2: #f8b700;
  --gold-dark: #7a5a1c;
  --parch: #ead7a6;
  --ink: #3a2006;
  --ink2: #5a3510;
  --ui-font: "Friz", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Heiti SC", "Noto Sans SC", sans-serif;
  --kai-font: "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "AR PL UKai CN", "PingFang SC", serif;
  --title-font: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #050403; color: #fff;
  font-family: var(--ui-font); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation; overscroll-behavior: none;
}
img { -webkit-user-drag: none; }
#root {
  position: fixed; inset: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #1b120a 0%, #050403 70%);
}
#stage {
  position: relative; width: 1280px; height: 640px; transform-origin: center center; flex: none;
  overflow: hidden; background: #0b0806;
}

/* ---------- 通用 WoW 部件 ---------- */
.gold { color: var(--gold); }
.shadow { text-shadow: 1px 1px 0 #000, 0 0 3px #000; }
.frame {
  position: relative; background: rgba(8, 6, 4, 0.92);
  border: 3px solid transparent; border-radius: 6px;
  background-clip: padding-box;
  box-shadow: 0 0 0 1px #000, 0 0 0 3px #6f5321, 0 0 0 4px #d6b565, 0 0 0 5px #2a1c08, 0 10px 30px rgba(0,0,0,.8);
}
.frame::before { /* 内描边 */
  content: ""; position: absolute; inset: 2px; border: 1px solid rgba(255, 215, 120, .18); border-radius: 4px; pointer-events: none;
}
.parchment {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(120,70,20,.25), transparent 55%),
    repeating-linear-gradient(8deg, rgba(120,80,30,.04) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #f1e2b8, #e2c98f 60%, #d7b877);
  color: var(--ink);
  box-shadow: inset 0 0 30px rgba(90, 50, 10, .55), inset 0 0 4px rgba(60,30,0,.6);
  font-family: var(--kai-font);
}
.tooltip {
  background: rgba(6, 8, 22, .95); border: 2px solid #b8b8b8; border-radius: 6px;
  box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.7); padding: 8px 10px; color: #fff; font-size: 14px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 18px; font: bold 16px var(--ui-font); color: var(--gold);
  text-shadow: 1px 1px 0 #000; cursor: pointer; border-radius: 4px;
  background: linear-gradient(180deg, #c3170f 0%, #8e0c06 45%, #5f0703 100%);
  border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,190,120,.45), 0 0 0 1px #c9a24c, 0 0 0 2px #3a2507, 0 2px 4px rgba(0,0,0,.6);
  transition: filter .1s, transform .05s;
}
.btn:active { transform: translateY(1px); filter: brightness(.85); }
.btn.dis, .btn:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
.btn.small { min-height: 30px; padding: 0 10px; font-size: 13px; }
.btn.grey { background: linear-gradient(180deg, #555 0%, #333 50%, #1d1d1d 100%); color: #ddd; }
.xbtn {
  position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; z-index: 5; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #e0392b, #7a0d05 70%); border: 2px solid #d4b15a;
  box-shadow: 0 0 0 2px #000, 0 2px 6px rgba(0,0,0,.8); color: #ffd9a0; font: bold 22px/34px Arial; text-align: center; text-shadow: 0 1px 0 #000;
}
.icon { display: inline-block; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5b4a2e; background-size: cover; vertical-align: middle; flex: none; }
.coin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #f1c232 40%, #9c6d00); box-shadow: 0 0 0 1px #4a3200; }
.bar { position: relative; height: 14px; background: rgba(0,0,0,.75); border: 1px solid #000; border-radius: 2px; overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .3s; }
.bar > span { position: absolute; inset: 0; font-size: 11px; line-height: 13px; text-align: center; color: #fff; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.bar.hp > i { background: linear-gradient(180deg, #4fe34f, #0a9d0a 55%, #067306); }
.bar.mana > i { background: linear-gradient(180deg, #5b8cff, #0b3fd8 55%, #062c9b); }
.bar.red > i { background: linear-gradient(180deg, #ff5a4a, #c00d00 55%, #7d0800); }
.bar.xp > i { background: linear-gradient(180deg, #d77bff, #8a1fd6 55%, #5a0c96); }
.bar.cast > i { background: linear-gradient(180deg, #ffe46a, #e0a800 55%, #9e6f00); }

/* ---------- 地图 ---------- */
#map { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; background: #2a1a0c; }
#map-inner { position: absolute; left: 0; top: 0; width: 1022px; height: 668px; transform-origin: 0 0; }
#map-img { position: absolute; inset: 0; width: 100%; height: 100%; }
#map-night { position: absolute; inset: 0; pointer-events: none; background: #0d1a4a; mix-blend-mode: multiply; opacity: 0; transition: opacity 1.5s; }
#map-clouds { position: absolute; inset: -20%; pointer-events: none; opacity: .22;
  background: radial-gradient(ellipse 18% 10% at 20% 30%, rgba(0,0,0,.6), transparent 70%),
              radial-gradient(ellipse 22% 12% at 70% 60%, rgba(0,0,0,.5), transparent 70%),
              radial-gradient(ellipse 15% 9% at 50% 15%, rgba(0,0,0,.5), transparent 70%);
  animation: clouds 90s linear infinite; }
@keyframes clouds { from { transform: translateX(-8%); } to { transform: translateX(12%); } }
#map-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(0,0,0,.75); }
.layer { position: absolute; inset: 0; }

.place { position: absolute; width: 0; height: 0; }
.place .pm {
  position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background-size: cover; box-shadow: 0 0 0 2px #000, 0 0 0 4px #c9a24c, 0 0 0 5px #000, 0 3px 10px rgba(0,0,0,.8);
}
.place .ring { position: absolute; left: -31px; top: -31px; width: 62px; height: 62px; border-radius: 50%; pointer-events: none;
  -webkit-mask: radial-gradient(circle, transparent 26px, #000 27px); mask: radial-gradient(circle, transparent 26px, #000 27px); }
.place .lbl { position: absolute; top: 30px; left: -70px; width: 140px; text-align: center; font-size: 13px; font-weight: bold; color: var(--gold);
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none; white-space: nowrap; }
.place .lbl b { color: #ff5040; }
.place.hot .pm { animation: hotpulse 1s ease-in-out infinite; }
@keyframes hotpulse { 50% { box-shadow: 0 0 0 2px #000, 0 0 0 4px #ff3b2b, 0 0 0 5px #000, 0 0 24px 6px rgba(255,40,20,.8); } }
.place.locked { opacity: .0; pointer-events: none; }
.place.minor .pm { width: 34px; height: 34px; left: -17px; top: -17px; }
.place.minor .ring { display: none; }
.place.minor .lbl { top: 20px; font-size: 12px; color: #f0e0b0; }

#town { position: absolute; width: 0; height: 0; z-index: 3; }
#town .tm { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%; cursor: pointer;
  background: url(../assets/icons/inv_banner_02.jpg) center/cover;
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #e5c160, 0 0 0 7px #000, 0 0 30px rgba(255,210,90,.55); }
#town .tl { position: absolute; top: 38px; left: -80px; width: 160px; text-align: center; font: bold 17px var(--title-font); color: #fff4c8;
  text-shadow: 0 0 4px #000, 1px 1px 0 #000, -1px -1px 0 #000, 2px 2px 3px #000; pointer-events: none; }
#town .lights { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,190,80,.55), rgba(255,150,40,.15) 45%, transparent 70%); transition: opacity 2s; mix-blend-mode: screen; }
.qmark { position: absolute; left: -12px; top: -82px; font: 900 44px/1 Georgia, serif; color: var(--gold); pointer-events: none;
  text-shadow: 0 0 2px #000, 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 0 12px rgba(255,200,0,.8);
  animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.qmark.q { color: #ffe75c; }

.adv { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 4; will-change: transform; }
.adv .ai { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background-size: cover; cursor: pointer;
  box-shadow: 0 0 0 2px var(--cc, #fff), 0 0 0 3px #000, 0 2px 5px rgba(0,0,0,.8); }
.adv.ghost .ai { filter: grayscale(1) brightness(1.5); opacity: .55; box-shadow: 0 0 0 2px #bfe8ff, 0 0 10px 3px rgba(150,220,255,.8); }
.adv.guard .ai { box-shadow: 0 0 0 2px #4aa3ff, 0 0 0 3px #000, 0 0 8px rgba(80,160,255,.8); }
.adv.work .ai { animation: fight .5s ease-in-out infinite alternate; }
@keyframes fight { from { transform: rotate(-12deg) scale(1); } to { transform: rotate(12deg) scale(1.1); } }
.adv .tag { position: absolute; left: -20px; top: -30px; width: 40px; text-align: center; font: bold 10px var(--ui-font); color: #40ff40; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.adv .bub { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 4px 8px; white-space: nowrap; font-size: 12px;
  background: rgba(0,0,0,.72); border: 1px solid #aaa; border-radius: 8px; color: #fff; pointer-events: none; z-index: 10; }
.adv.hidden { opacity: 0; pointer-events: none; }
.adv.sel .ai { box-shadow: 0 0 0 2px var(--cc, #fff), 0 0 0 4px var(--gold), 0 0 12px var(--gold); }

.raid { position: absolute; width: 0; height: 0; z-index: 5; }
.raid .ri { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; background-size: cover;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #ff2a1a, 0 0 16px 4px rgba(255,30,10,.8); animation: raidpulse .6s ease-in-out infinite alternate; }
@keyframes raidpulse { to { transform: scale(1.12); } }
.raid .rl { position: absolute; left: -40px; top: -40px; width: 80px; text-align: center; color: #ff4030; font: bold 12px var(--ui-font); text-shadow: 1px 1px 0 #000; }

.site { position: absolute; width: 0; height: 0; z-index: 2; }
.site .si { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 4px; background-size: cover; box-shadow: 0 0 0 2px #000, 0 0 0 3px #c9a24c; }
.site .sb { position: absolute; left: -18px; top: 17px; width: 36px; height: 5px; background: #000; border: 1px solid #000; }
.site .sb i { display: block; height: 100%; background: #ffcc00; }
.site.broken .si { filter: grayscale(.8) brightness(.7); }

#boss-dragon { position: absolute; width: 0; height: 0; z-index: 8; display: none; }
#boss-dragon .bd { position: absolute; left: -48px; top: -150px; width: 96px; height: 96px; border-radius: 50%;
  background: url(../assets/icons/achievement_boss_onyxia.jpg) center/cover;
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #ff5a00, 0 0 40px 14px rgba(255,80,0,.8); animation: hover 2s ease-in-out infinite; }
@keyframes hover { 50% { transform: translateY(-10px) scale(1.04); } }

.fx { position: absolute; pointer-events: none; z-index: 9; }
.fct { position: absolute; font: 900 20px Georgia, serif; color: #ffe000; white-space: nowrap; transform: translateX(-50%);
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; animation: fct 1.3s ease-out forwards; }
.fct.crit { font-size: 30px; color: #fff; }
.fct.red { color: #ff4a3a; font-size: 18px; }
@keyframes fct { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -8px) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -52px) scale(1); opacity: 0; } }
.boom { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,200,.95), rgba(255,160,20,.8) 30%, rgba(200,40,0,.5) 55%, transparent 70%);
  animation: boom .9s ease-out forwards; mix-blend-mode: screen; }
.boom.holy { background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,240,150,.7) 35%, rgba(255,210,60,.3) 55%, transparent 70%); }
@keyframes boom { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.skull { position: absolute; width: 36px; height: 36px; margin: -18px; background: url(../assets/icons/inv_misc_bone_humanskull_01.jpg) center/cover; border-radius: 50%;
  box-shadow: 0 0 0 2px #000; animation: skull 1.8s ease-out forwards; }
@keyframes skull { 0% { transform: scale(.3); opacity: 0; } 20% { transform: scale(1.2); opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

#player { position: absolute; left: 10px; top: 8px; width: 300px; height: 96px; cursor: pointer; }
#player .pf-bg { position: absolute; left: 44px; top: 18px; width: 250px; height: 62px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(20,14,8,.9), rgba(0,0,0,.85)); box-shadow: 0 0 0 1px #000, 0 0 0 3px #a8863c, 0 0 0 4px #000; }
#player .pf-por { position: absolute; left: 0; top: 4px; width: 88px; height: 88px; border-radius: 50%;
  background: url(../assets/icons/achievement_character_human_male.jpg) center/118% no-repeat;
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #e0bc5e, 0 0 0 7px #3b2805, 0 4px 12px rgba(0,0,0,.8); }
#player .pf-lvl { position: absolute; left: 62px; top: 66px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(#3b2a10, #120a02);
  box-shadow: 0 0 0 2px #e0bc5e, 0 0 0 3px #000; color: var(--gold); font: bold 14px/30px var(--ui-font); text-align: center; }
#player .pf-name { position: absolute; left: 98px; top: 20px; width: 190px; font: bold 15px var(--ui-font); color: var(--gold); text-shadow: 1px 1px 0 #000; }
#player .bar { position: absolute; left: 98px; width: 190px; height: 16px; }
#player .bar > span { line-height: 15px; font-size: 12px; }
#player .b1 { top: 40px; }
#player .b2 { top: 58px; height: 13px; }
#player .b2 > span { font-size: 11px; line-height: 12px; }

#buffs { position: absolute; left: 316px; top: 12px; display: flex; gap: 6px; }
.buff { position: relative; width: 34px; height: 34px; border-radius: 3px; background-size: cover; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6d2f; cursor: pointer; }
.buff span { position: absolute; left: -6px; right: -6px; bottom: -15px; text-align: center; font-size: 11px; color: var(--gold); text-shadow: 1px 1px 0 #000; }

#chat { position: absolute; left: 8px; bottom: 90px; width: 420px; height: 150px; border-radius: 4px; background: rgba(0,0,0,.42);
  padding: 4px 6px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; transition: height .2s; }
#chat.big { height: 330px; background: rgba(0,0,0,.72); }
#chat .ln { font-size: 13px; line-height: 18px; text-shadow: 1px 1px 0 #000; word-break: break-all; animation: chatin .25s; }
@keyframes chatin { from { opacity: 0; transform: translateY(4px); } }
#chat .ln .n { cursor: pointer; }
#chat-tab { position: absolute; left: 8px; bottom: 241px; padding: 2px 12px; font-size: 12px; color: var(--gold); background: rgba(0,0,0,.55);
  border-radius: 4px 4px 0 0; cursor: pointer; }
#chat.big + #chat-tab { bottom: 421px; }

#bottombar { position: absolute; left: 0; bottom: 0; height: 84px; right: 0;
  background: linear-gradient(180deg, #2b2218 0%, #17110a 40%, #0a0704 100%);
  box-shadow: 0 -1px 0 #000, 0 -3px 0 #6d5424, 0 -4px 0 #000; display: flex; align-items: center; padding: 10px 10px 0; gap: 10px; }
#xpbar { position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 0; border-left: 0; border-right: 0; }
#xpbar > span { font-size: 10px; line-height: 9px; }
.ab { position: relative; width: 60px; height: 60px; border-radius: 4px; background-size: cover; cursor: pointer; flex: none;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #5e4a26, 0 0 0 5px #000, inset 0 0 8px rgba(0,0,0,.6); transition: filter .1s, transform .05s; }
.ab:active { transform: scale(.94); filter: brightness(1.3); }
.ab .hk { position: absolute; right: 3px; top: 1px; font: bold 12px Arial; color: #ddd; text-shadow: 1px 1px 0 #000; }
.ab .nm { position: absolute; left: -6px; right: -6px; bottom: 2px; text-align: center; font: bold 12px var(--ui-font); color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.ab .badge { position: absolute; right: -8px; top: -9px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #c00; color: #fff;
  font: bold 12px/20px var(--ui-font); text-align: center; box-shadow: 0 0 0 2px #000, 0 0 0 3px #e0bc5e; }
.ab .badge.y { background: #b38600; }
.ab.glow { animation: abglow 1s ease-in-out infinite; }
@keyframes abglow { 50% { box-shadow: 0 0 0 2px #000, 0 0 0 4px #ffd100, 0 0 0 5px #000, 0 0 22px 6px rgba(255,210,0,.9); } }
#res { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.rs { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: rgba(0,0,0,.5); border-radius: 4px; box-shadow: 0 0 0 1px #3d301a; min-width: 86px; }
.rs .icon { width: 28px; height: 28px; }
.rs b { font: bold 16px var(--ui-font); color: #fff; text-shadow: 1px 1px 0 #000; }
.rs.flash b { animation: rsflash .6s; }
@keyframes rsflash { 30% { color: var(--gold); transform: scale(1.2); } }
.rs small { display: block; font-size: 10px; color: #b9a67a; margin-top: -2px; }

/* 右侧面板 */
#side { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; background:
  linear-gradient(90deg, rgba(0,0,0,.6), transparent 8px),
  radial-gradient(ellipse at 50% 0%, #2c2114, #120c07 60%);
  box-shadow: -1px 0 0 #000, -3px 0 0 #6d5424, -4px 0 0 #000; padding: 10px 12px 0; display: flex; flex-direction: column; gap: 10px; }
#mm { position: relative; height: 170px; flex: none; }
#mm .zone { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 2px 16px; font: bold 14px var(--ui-font); color: var(--gold);
  background: linear-gradient(180deg, #2b1e0c, #0e0904); border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6d2f; z-index: 2; white-space: nowrap; }
#mm .disk { position: absolute; left: 50%; top: 18px; width: 138px; height: 138px; margin-left: -69px; border-radius: 50%; overflow: hidden;
  background: url(../assets/img/redridge_modern.jpg) no-repeat; background-size: 2044px 1336px; background-position: -454px -467px;
  box-shadow: 0 0 0 3px #000, 0 0 0 7px #b8913e, 0 0 0 8px #000, inset 0 0 20px rgba(0,0,0,.8); }
#mm .disk::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 1px #000; }
#mm .night { position: absolute; inset: 0; background: #0d1a4a; mix-blend-mode: multiply; opacity: 0; transition: opacity 1.5s; }
#mm .sun { position: absolute; left: 50%; top: 87px; width: 0; height: 0; }
#mm .sun i { position: absolute; left: -12px; top: -98px; width: 24px; height: 24px; border-radius: 50%; }
#mm .clock { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); padding: 1px 10px; font: bold 13px var(--ui-font); color: #fff;
  background: #0e0904; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6d2f; white-space: nowrap; z-index: 2; }
#mm .mail { position: absolute; left: 12px; top: 112px; width: 38px; height: 38px; border-radius: 50%; display: none; cursor: pointer;
  background: url(../assets/icons/inv_letter_15.jpg) center/cover; box-shadow: 0 0 0 2px #000, 0 0 0 4px #b8913e; animation: bob 1.4s infinite; z-index: 3; }
#mm .def { position: absolute; right: 8px; top: 116px; width: 34px; height: 34px; border-radius: 50%; background: url(../assets/icons/ability_warrior_defensivestance.jpg) center/cover;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #7a6230; cursor: pointer; }
#mm .def span { position: absolute; left: -10px; right: -10px; top: 33px; text-align: center; font: bold 12px var(--ui-font); color: #9fd0ff; text-shadow: 1px 1px 0 #000; }
#speed { position: absolute; right: 2px; top: 22px; display: flex; flex-direction: column; gap: 5px; }
#speed b { display: block; width: 38px; height: 28px; border-radius: 4px; font: bold 13px/26px var(--ui-font); text-align: center; color: #cbb68a; cursor: pointer;
  background: linear-gradient(180deg, #3a2c19, #1a1209); box-shadow: 0 0 0 1px #000, 0 0 0 2px #5e4a26; }
#speed b.on { color: #000; background: linear-gradient(180deg, #ffe07a, #d6a21a); }
#pausebtn { position: absolute; left: 2px; top: 22px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font: bold 16px/38px Arial; text-align: center; color: #fff;
  background: linear-gradient(180deg, #3a2c19, #1a1209); box-shadow: 0 0 0 1px #000, 0 0 0 2px #5e4a26; }
#pausebtn.on { background: linear-gradient(180deg, #d33, #700); }

.sec-t { font: bold 13px var(--ui-font); color: var(--gold); text-shadow: 1px 1px 0 #000; border-bottom: 1px solid rgba(255,209,0,.25); padding-bottom: 3px; margin-bottom: 5px; display: flex; justify-content: space-between; }
.sec-t small { color: #aaa; font-weight: normal; }
.thr { display: flex; align-items: center; gap: 8px; height: 38px; cursor: pointer; }
.thr .icon { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 2px #000, 0 0 0 3px #8a6d2f; }
.thr .tb { flex: 1; }
.thr .tn { font-size: 12px; color: #fff; text-shadow: 1px 1px 0 #000; display: flex; justify-content: space-between; margin-bottom: 2px; }
.thr .tn em { font-style: normal; font-size: 11px; }
.thr .bar { height: 11px; }
.thr.danger .icon { animation: hotpulse 1s infinite; }
.thr.lock { opacity: .35; }
#tracker { flex: 1; overflow-y: auto; overflow-x: hidden; padding-right: 4px; min-height: 0; padding-bottom: 8px; }
#tracker::-webkit-scrollbar { width: 4px; } #tracker::-webkit-scrollbar-thumb { background: #6d5424; }
.goal { font-size: 13px; line-height: 19px; color: #fff; padding-left: 16px; position: relative; text-shadow: 1px 1px 0 #000; }
.goal::before { content: "•"; position: absolute; left: 4px; color: var(--gold); }
.goal.ok { color: #7c7c7c; }
.goal.ok::before { content: "✓"; color: #40ff40; left: 2px; }
.tq { margin: 6px 0 2px; font-size: 13px; color: var(--gold); cursor: pointer; text-shadow: 1px 1px 0 #000; display: flex; align-items: center; gap: 6px; }
.tq .icon { width: 20px; height: 20px; }
.tq-s { font-size: 12px; color: #d0d0d0; padding-left: 26px; text-shadow: 1px 1px 0 #000; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tq-s .bar { width: 100%; height: 6px; margin-top: 2px; }
.mini-cls { width: 16px; height: 16px; border-radius: 50%; background-size: cover; box-shadow: 0 0 0 1px #000; display: inline-block; }

/* 屏幕文字 */
#warns { position: absolute; left: 0; right: 300px; top: 118px; text-align: center; pointer-events: none; z-index: 30; }
.warn { font: bold 30px var(--ui-font); text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 0 0 10px rgba(0,0,0,.9); animation: warn 4.2s ease-out forwards; margin-bottom: 4px; }
@keyframes warn { 0% { opacity: 0; transform: scale(1.4); } 8% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
#zonetext { position: absolute; left: 0; right: 300px; top: 26%; text-align: center; pointer-events: none; z-index: 31; opacity: 0; }
#zonetext h1 { margin: 0; font: bold 56px var(--title-font); color: var(--gold); letter-spacing: 6px;
  text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 0 0 20px rgba(0,0,0,.9); }
#zonetext h2 { margin: 6px 0 0; font: bold 22px var(--title-font); color: #fff; text-shadow: 2px 2px 0 #000; }
#zonetext.show { animation: zone 5s ease-in-out forwards; }
@keyframes zone { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
#lvlup { position: absolute; left: 0; right: 300px; top: 38%; text-align: center; pointer-events: none; z-index: 29; }
.lv { display: inline-block; padding: 10px 60px; margin: 3px; font: bold 22px var(--ui-font); color: var(--gold);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.75), transparent 72%); text-shadow: 2px 2px 0 #000; animation: warn 3s forwards; }
.lv small { display: block; font-size: 14px; color: #fff; }
#toast { position: absolute; left: 50%; bottom: 110px; transform: translateX(calc(-50% - 150px)); z-index: 40; pointer-events: none; }
.toast { padding: 6px 16px; margin-top: 4px; color: #ff3030; font: bold 17px var(--ui-font); text-shadow: 1px 1px 0 #000, 0 0 6px #000; animation: warn 2.4s forwards; text-align: center; }

#bossframe { position: absolute; left: 50%; top: 12px; transform: translateX(calc(-50% - 150px)); width: 380px; height: 70px; display: none; z-index: 20; }
#bossframe .bp { position: absolute; right: 0; top: 0; width: 68px; height: 68px; border-radius: 50%; background: url(../assets/icons/achievement_boss_onyxia.jpg) center/cover;
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #d0a040, 0 0 0 7px #000, 0 0 20px rgba(255,80,0,.7); }
#bossframe .bn { position: absolute; left: 0; top: 10px; right: 80px; height: 22px; background: linear-gradient(90deg, rgba(140,0,0,.9), rgba(60,0,0,.9)); font: bold 15px/22px var(--ui-font); color: #fff;
  padding-left: 10px; box-shadow: 0 0 0 1px #000, 0 0 0 3px #a8863c; }
#bossframe .bar { position: absolute; left: 0; right: 80px; top: 36px; height: 18px; box-shadow: 0 0 0 2px #a8863c; }

/* ---------- 窗口 ---------- */
#win-layer { position: absolute; inset: 0; z-index: 50; display: none; background: rgba(0,0,0,.45); }
#win-layer.show { display: block; }
.win { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 900px; height: 560px; display: flex; flex-direction: column; animation: winin .18s ease-out; }
@keyframes winin { from { transform: translate(-50%, -47%) scale(.96); opacity: 0; } }
.win-h { position: relative; height: 54px; flex: none; display: flex; align-items: center; padding-left: 86px; }
.win-h .wp { position: absolute; left: -22px; top: -26px; width: 92px; height: 92px; border-radius: 50%; background-size: cover; z-index: 3;
  box-shadow: 0 0 0 3px #000, 0 0 0 7px #d6b565, 0 0 0 8px #000, 0 4px 14px rgba(0,0,0,.9); }
.win-h h3 { margin: 0; font: bold 20px var(--ui-font); color: var(--gold); text-shadow: 1px 1px 0 #000; }
.win-h .tabs { margin-left: 24px; display: flex; gap: 4px; align-self: flex-end; }
.win-h .tab { padding: 6px 16px; font: bold 14px var(--ui-font); color: #c8b48a; cursor: pointer; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #3a2c19, #1a1209); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,220,150,.2); }
.win-h .tab.on { color: var(--gold); background: linear-gradient(180deg, #6a4d1c, #3a2808); }
.win-b { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 0 12px 12px; }
.scroll { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.scroll::-webkit-scrollbar { width: 8px; } .scroll::-webkit-scrollbar-thumb { background: #7a5a1c; border-radius: 4px; } .scroll::-webkit-scrollbar-track { background: rgba(0,0,0,.4); }

/* 任务板 */
.qlist { width: 300px; flex: none; background: rgba(0,0,0,.55); border-radius: 4px; box-shadow: inset 0 0 0 1px #3d301a; padding: 6px; }
.qgrp { font: bold 13px var(--ui-font); color: #c9b27a; margin: 8px 4px 4px; border-bottom: 1px solid #3d301a; padding-bottom: 2px; }
.qi { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 3px; cursor: pointer; font-size: 15px; min-height: 42px; }
.qi .icon { width: 30px; height: 30px; }
.qi:hover { background: rgba(255,255,255,.06); }
.qi.on { background: linear-gradient(90deg, rgba(255,209,0,.25), rgba(255,209,0,.05)); box-shadow: inset 0 0 0 1px rgba(255,209,0,.5); }
.qi.lock { opacity: .45; }
.qi .qt { flex: 1; line-height: 1.2; }
.qi .qt small { display: block; font-size: 11px; color: #9a9a9a; }
.qd { flex: 1; border-radius: 4px; padding: 16px 22px; position: relative; display: flex; flex-direction: column; }
.qd h2 { margin: 0 0 8px; font: bold 24px var(--title-font); color: #2a1100; }
.qd .txt { font-size: 17px; line-height: 1.6; white-space: pre-line; color: var(--ink); }
.qd h4 { margin: 12px 0 4px; font: bold 17px var(--title-font); color: #2a1100; }
.qd .obj { font-size: 16px; color: var(--ink); }
.qd .eff { font-size: 15px; color: #1d5a00; font-family: var(--ui-font); font-weight: bold; }
.opts { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; font-family: var(--ui-font); }
.opt label { display: block; font: bold 13px var(--ui-font); color: var(--ink2); margin-bottom: 4px; }
.seg { display: inline-flex; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px #6b4a1a; }
.seg b { padding: 7px 14px; font: bold 14px var(--ui-font); color: #5a3510; background: rgba(255,255,255,.25); cursor: pointer; border-right: 1px solid rgba(107,74,26,.5); }
.seg b:last-child { border-right: 0; }
.seg b.on { background: linear-gradient(180deg, #8a1c0c, #5a0c04); color: var(--gold); }
.seg b small { display: block; font-size: 11px; font-weight: normal; opacity: .85; }
.chk { display: inline-flex; align-items: center; gap: 6px; font: bold 14px var(--ui-font); color: var(--ink2); cursor: pointer; margin-top: 18px; }
.chk i { width: 22px; height: 22px; border-radius: 3px; background: rgba(0,0,0,.2); box-shadow: inset 0 0 0 2px #6b4a1a; position: relative; }
.chk.on i::after { content: "✓"; position: absolute; left: 3px; top: -4px; font: bold 22px Arial; color: #1d7a00; }
.qfoot { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 10px; font-family: var(--ui-font); }
.qfoot .cost { font: bold 18px var(--ui-font); color: #3a2006; }
.qfoot .why { color: #a00; font-weight: bold; font-size: 14px; }
.lvl-red { color: #ff2020 !important; } .lvl-orange { color: #ff8040 !important; } .lvl-yellow { color: #ffff00 !important; } .lvl-green { color: #40c040 !important; } .lvl-grey { color: #808080 !important; }
.parchment .lvl-yellow { color: #a07800 !important; } .parchment .lvl-green { color: #1d7a00 !important; }

.aq { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; border-radius: 4px; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px #3d301a; }
.aq .icon { width: 44px; height: 44px; }
.aq .m { flex: 1; min-width: 0; }
.aq .m b { font-size: 16px; color: var(--gold); }
.aq .m .st { font-size: 13px; color: #ccc; margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aq .bar { height: 8px; margin-top: 5px; }

/* 名册 */
.roster { flex: 1; background: rgba(0,0,0,.55); border-radius: 4px; box-shadow: inset 0 0 0 1px #3d301a; }
.rr { display: grid; grid-template-columns: 46px 170px 60px 90px 1fr 60px 130px; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14px; min-height: 52px; }
.rr.h { font: bold 12px var(--ui-font); color: var(--gold); min-height: 30px; position: sticky; top: 0; background: #120d07; z-index: 2; }
.rr .icon { width: 38px; height: 38px; border-radius: 50%; }
.rr .nm b { font-size: 15px; }
.rr .nm small { display: block; color: #aaa; font-size: 12px; }
.rr .st { color: #ddd; font-size: 13px; }
.trait { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 12px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }

/* 建设 */
.bgrid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: start; padding: 4px; }
.bc { border-radius: 5px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-height: 212px; }
.bc .bh { display: flex; gap: 10px; align-items: center; }
.bc .bh .icon { width: 48px; height: 48px; }
.bc .bh b { font: bold 18px var(--title-font); color: #2a1100; }
.bc .bh small { display: block; color: var(--ink2); font: bold 13px var(--ui-font); }
.bc .bd { font-size: 15px; color: var(--ink); line-height: 1.4; }
.bc .bn { font-size: 14px; color: #1d5a00; font-family: var(--ui-font); font-weight: bold; }
.bc .bcost { font: bold 14px var(--ui-font); color: #3a2006; display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.bc .bcost span.no { color: #b00; }
.mat { display: inline-flex; align-items: center; gap: 3px; }
.mat .icon { width: 18px; height: 18px; border-radius: 2px; }

/* 书信 */
.mlist { width: 300px; flex: none; background: rgba(0,0,0,.55); border-radius: 4px; box-shadow: inset 0 0 0 1px #3d301a; padding: 6px; }
.mi { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 3px; cursor: pointer; min-height: 52px; }
.mi .icon { width: 36px; height: 36px; }
.mi.on { background: rgba(255,209,0,.2); }
.mi .mt { flex: 1; min-width: 0; font-size: 14px; }
.mi .mt small { display: block; color: #aaa; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi.unread .mt b { color: var(--gold); }
.mi.unread::after { content: "新"; font-size: 11px; background: #c00; color: #fff; border-radius: 3px; padding: 0 4px; }
.letter { flex: 1; border-radius: 4px; padding: 22px 30px; font-size: 18px; line-height: 1.75; white-space: pre-line; position: relative; }
.letter .lh { font: bold 15px var(--ui-font); color: var(--ink2); margin-bottom: 10px; border-bottom: 1px solid rgba(90,53,16,.3); padding-bottom: 6px; }
.tones { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.tone { padding: 10px 14px; border-radius: 4px; background: rgba(255,255,255,.28); box-shadow: inset 0 0 0 1px #8a6a3a; cursor: pointer; font-size: 16px; }
.tone b { font-family: var(--ui-font); color: #7a1000; margin-right: 8px; }
.tone:active { background: rgba(255,255,255,.45); }

/* 对话 / 剧情 */
#dlg-layer { position: absolute; inset: 0; z-index: 60; display: none; background: rgba(0,0,0,.35); }
#dlg-layer.show { display: block; }
.dlg { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: 820px; min-height: 210px; display: flex; gap: 0; animation: dlgin .25s ease-out; }
@keyframes dlgin { from { transform: translate(-50%, 20px); opacity: 0; } }
.dlg .dp { position: absolute; left: -30px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background-size: 118%; background-position: center; z-index: 3;
  box-shadow: 0 0 0 4px #000, 0 0 0 9px #d6b565, 0 0 0 10px #000, 0 6px 20px rgba(0,0,0,.9); }
.dlg .dbody { flex: 1; margin: 12px; margin-left: 12px; padding: 18px 26px 16px 128px; border-radius: 4px; display: flex; flex-direction: column; }
.dlg .dn { font: bold 20px var(--ui-font); color: #7a1000; margin-bottom: 6px; }
.dlg .dt { font-size: 20px; line-height: 1.6; white-space: pre-line; min-height: 96px; color: var(--ink); }
.dlg .dnext { align-self: flex-end; margin-top: 8px; font: bold 14px var(--ui-font); color: var(--ink2); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.dlg .choices { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.choice { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 4px; cursor: pointer; font: bold 16px var(--ui-font); color: #1a3a8a;
  background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(120,80,30,.5); min-height: 44px; }
.choice::before { content: ""; width: 20px; height: 20px; flex: none; background: url(../assets/icons/inv_misc_note_02.jpg) center/cover; border-radius: 3px; }
.choice:active { background: rgba(255,255,255,.4); }
.choice.no { color: #7a7a7a; }

/* 提示框 */
#tip { position: absolute; z-index: 70; max-width: 300px; display: none; }
#tip.show { display: block; }
#tip h5 { margin: 0 0 4px; font-size: 16px; }
#tip p { margin: 3px 0; font-size: 13px; line-height: 1.45; color: #ddd; }
#tip .y { color: var(--gold); } #tip .g { color: #40ff40; } #tip .gr { color: #9d9d9d; }
#tip .btn { margin-top: 8px; }

/* 教程提示 */
#tut { position: absolute; z-index: 45; display: none; pointer-events: none; }
#tut.show { display: block; }
#tut .tt { padding: 10px 14px; max-width: 280px; font-size: 15px; line-height: 1.5; color: #fff; border-radius: 6px; background: rgba(10, 10, 30, .95);
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px #000, 0 0 18px rgba(255,210,0,.5); animation: bob 1.4s infinite; }
#tut .tt b { color: var(--gold); }

/* 标题 & 结局 */
#title { position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  background: #000; }
#title .bg { position: absolute; inset: -5%; background: url(../assets/img/redridge.jpg) center/cover; filter: brightness(.45) saturate(1.2) blur(1px); animation: kenburns 40s ease-in-out infinite alternate; }
#title .bg.art { filter: brightness(.75); }
@keyframes kenburns { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.18) translate(-3%, 2%); } }
#title .fog { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.85) 85%); }
#title .logo { position: relative; text-align: center; margin-top: -40px; }
#title .logo .ep { font: bold 18px var(--title-font); color: #d8c08a; letter-spacing: 12px; text-shadow: 2px 2px 0 #000; }
#title .logo h1 { margin: 6px 0 4px; font: 900 110px/1.05 var(--title-font); letter-spacing: 14px;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd34a 35%, #c47d0a 60%, #ffe27a 75%, #8a4b00 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 2px #000) drop-shadow(3px 4px 0 #2a1400) drop-shadow(0 0 24px rgba(255,160,0,.45)); }
#title .logo .sub { font: bold 22px var(--title-font); color: #f0e0b0; letter-spacing: 6px; text-shadow: 2px 2px 0 #000; }
#title .menu { position: relative; display: flex; flex-direction: column; gap: 14px; margin-top: 44px; align-items: center; }
#title .menu .btn { width: 260px; min-height: 52px; font-size: 20px; }
#title .foot { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(255,255,255,.45); }
#title .tap { position: relative; margin-top: 40px; font: bold 18px var(--ui-font); color: #fff; animation: blink 1.6s infinite; text-shadow: 1px 1px 0 #000; }

#ending { position: absolute; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.75); }
#ending.show { display: flex; animation: fadein 1.2s; }
@keyframes fadein { from { opacity: 0; } }
#ending .card { width: 960px; height: 560px; display: flex; gap: 0; }
#ending .el { flex: 1.2; padding: 30px 36px; border-radius: 4px; margin: 12px 0 12px 12px; overflow-y: auto; }
#ending .el h1 { margin: 0; font: 900 44px var(--title-font); color: #6a0c00; letter-spacing: 6px; }
#ending .el h2 { margin: 4px 0 16px; font: bold 18px var(--ui-font); color: var(--ink2); }
#ending .el p { font-size: 18px; line-height: 1.8; margin: 0 0 12px; }
#ending .er { flex: 1; padding: 26px 26px; display: flex; flex-direction: column; }
#ending .er h3 { margin: 0 0 12px; color: var(--gold); font: bold 20px var(--ui-font); }
#ending .stat { display: flex; justify-content: space-between; font-size: 15px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
#ending .stat b { color: var(--gold); }
#ending .ttl { margin: 14px 0; text-align: center; font: bold 22px var(--title-font); color: #a335ee; text-shadow: 1px 1px 0 #000; }
#ending .er .btn { margin-top: auto; }

#rotate { position: fixed; inset: 0; z-index: 999; background: #0a0705; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 20px; color: var(--gold); font: bold 20px var(--ui-font); text-align: center; padding: 20px; }
#rotate .ph { width: 70px; height: 110px; border: 5px solid var(--gold); border-radius: 12px; animation: rot 2s ease-in-out infinite; }
@keyframes rot { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 900px) { #rotate { display: flex; } }

#loading { position: absolute; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 60px; }
#loading .lb { width: 600px; }
#loading .lt { color: var(--gold); font: bold 16px var(--ui-font); margin-bottom: 8px; text-align: center; }
#loading .bar { height: 22px; box-shadow: 0 0 0 2px #7a5a1c, 0 0 0 3px #000; }
#loading .bar > i { background: linear-gradient(180deg, #ffe46a, #c98a00 55%, #7d5200); }
#loading .bg { position: absolute; inset: 0; background: url(../assets/img/redridge.jpg) center/cover; filter: brightness(.55); }
#loading .tipx { position: relative; color: #ddd; font-size: 15px; margin-top: 14px; text-align: center; max-width: 700px; }
#loading .lb, #loading .lt { position: relative; }

/* ---------- 原版贴图 ---------- */
.parchment { background: url(../assets/ui/parchment.png) center / 100% 100% no-repeat, #e2c98f; }
.btn { background: none; border: 0; border-image: url(../assets/ui/btn.png) 7 fill / 7px stretch; box-shadow: none; border-radius: 0; }
.btn:active { border-image-source: url(../assets/ui/btn_down.png); transform: none; }
.btn.grey { background: none; filter: grayscale(1) brightness(.9); }
#title .menu .btn, #ending .btn { border-image: url(../assets/ui/gbtn.png) 18 fill / 18px stretch; }
#title .bg { background-image: url(../assets/img/title_bg.jpg); background-position: center; filter: brightness(.55) saturate(1.1); }
#loading .bg { background-image: url(../assets/img/loading_hd.jpg); filter: brightness(.7); }
#title .wowlogo { width: 330px; display: block; margin: 0 auto 4px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.9)); }
#title .logo h1 { font-size: 96px; }

#player { width: 309px; height: 123px; left: 6px; top: 4px; }
#player .pf-por { left: 14px; top: 11px; width: 94px; height: 94px; box-shadow: none; background: url(../assets/img/solomon_portrait.png) center 20% / cover; }
#player .pf-frame { position: absolute; inset: 0; background: url(../assets/ui/playerframe.png) 0 0 / 100% 100% no-repeat; pointer-events: none; }
#player .pf-lvl { left: 9px; top: 79px; width: 34px; height: 34px; line-height: 34px; box-shadow: none; background: radial-gradient(#3b2a10, #120a02 70%); border-radius: 50%; }
#player .pf-name { left: 114px; top: 25px; width: 186px; text-align: center; font-size: 15px; }
#player .bar { left: 110px; width: 193px; background: #000; border: 0; }
#player .b1 { top: 55px; height: 14px; }
#player .b2 { top: 73px; height: 13px; }
#buffs { left: 322px; top: 16px; }

#mm .disk { width: 146px; height: 146px; margin-left: -73px; top: 22px; box-shadow: inset 0 0 18px rgba(0,0,0,.8); background-size: 2044px 1336px; background-position: -450px -463px; }
#mm .ring { position: absolute; left: 50%; top: 13px; width: 164px; height: 164px; margin-left: -82px; background: url(../assets/ui/mm_ring2.png) center / 100% 100% no-repeat; pointer-events: none; z-index: 1; }
#mm .sun { top: 95px; }
#mm { height: 188px; }
#mm .clock { bottom: -4px; }