:root {
  --gold: #f8d24a; --gold2: #b8862a; --ink: #1a140c; --panel: #2a2016; --panel2: #3a2c1c; --edge: #6b5230;
  --parch: #e9dcba; --parch-ink: #2e2212; --hp: #2fb23a; --mana: #2d6fe0; --rage: #c8322a; --xp: #8a3fd0;
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sat: env(safe-area-inset-top, 0px);
  --font: Georgia, "Palatino Linotype", "Book Antiqua", serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0906; color: #f3ead6; font-family: var(--font);
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
.hidden { display: none !important; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#labels, #floaters { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
button { font-family: inherit; color: inherit; }

/* ---------- world labels ---------- */
.lbl { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; will-change: transform;
  font-size: 12px; text-shadow: 0 1px 2px #000, 0 0 3px #000; line-height: 1.15; }
.lbl .nm { font-weight: bold; }
.lbl .ti { font-size: 10px; opacity: .85; }
.lbl .hb { width: 54px; height: 6px; margin: 2px auto 0; background: #000a; border: 1px solid #000; border-radius: 2px; overflow: hidden; }
.lbl .hb i { display: block; height: 100%; background: #d22; }
.lbl.friend .hb i { background: var(--hp); }
.lbl .mk { font-size: 30px; font-weight: bold; color: var(--gold); line-height: 1; text-shadow: 0 0 6px #000, 0 2px 0 #000; }
.lbl .mk.gray { color: #bbb; }
.lbl .fx { font-size: 12px; }
.lbl.hostile .nm { color: #ff5a4a; } .lbl.npc .nm { color: #7fe07a; } .lbl.player .nm { color: #7fbfff; } .lbl.obj .nm { color: #ffe27a; }
.lbl.portal .nm { color: #d9a8ff; font-size: 13px; } .lbl.elite .nm::before { content: "★ "; color: var(--gold); } .lbl.dead { opacity: .45; }
.lbl .say { background: #fff; color: #111; text-shadow: none; padding: 4px 8px; border-radius: 8px; max-width: 240px; white-space: normal; margin-bottom: 3px; font-size: 12px; }
.lbl .say.yell { background: #5a0d0d; color: #ffd9c9; border: 1px solid #f66; }

.ft { position: absolute; font-weight: bold; font-size: 20px; text-shadow: 0 2px 2px #000, 0 0 4px #000; animation: ftup 1.1s ease-out forwards; white-space: nowrap; }
.ft.dmg { color: #fff; } .ft.in { color: #ff4a3a; } .ft.heal { color: #5cff6a; } .ft.crit { font-size: 30px; color: #ffe14a; } .ft.in.crit { color: #ff4a3a; }
.ft.xp { color: #d9a0ff; font-size: 16px; } .ft.misc { color: #ffe9a0; font-size: 15px; }
@keyframes ftup { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -14px) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1); opacity: 0; } }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#frames { position: absolute; left: calc(8px + var(--sal)); top: calc(6px + var(--sat)); pointer-events: none !important; }
#frames > * { pointer-events: auto; }
.uframe { display: flex; align-items: center; gap: 6px; background: linear-gradient(#3a2c1ce6, #1c150de6); border: 2px solid var(--edge); border-radius: 8px; padding: 4px 8px 4px 4px;
  box-shadow: 0 2px 6px #000a, inset 0 0 0 1px #0008; width: 190px; }
.portrait { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--gold2); background: radial-gradient(#5a4630, #1a140c); display: grid; place-items: center; font-size: 24px; flex: none; }
.ubody { flex: 1; min-width: 0; }
.uname { display: flex; justify-content: space-between; font-size: 12px; font-weight: bold; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; gap: 6px; }
.ulvl { color: #fff; font-weight: normal; }
.bar { position: relative; height: 13px; background: #000c; border: 1px solid #000; border-radius: 3px; overflow: hidden; margin-top: 2px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; transition: transform .15s linear; }
.bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 12px; text-shadow: 0 1px 1px #000; font-family: system-ui, sans-serif; }
.bar.hp i { background: linear-gradient(#4fd45a, #1f8a2a); } .bar.res i { background: linear-gradient(#4f8fff, #1d4fb8); } .bar.res.rage i { background: linear-gradient(#ff5a4a, #9a1d15); }
.bar.cast i { background: linear-gradient(#ffd24a, #c98a1a); transition: none; }
.buffs { font-size: 15px; min-height: 0; padding-left: 4px; text-shadow: 0 1px 2px #000; }
#party { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; }
.pm { width: 150px; background: #1c150dd9; border: 1px solid var(--edge); border-radius: 6px; padding: 2px 5px; font-size: 11px; }
.pm.sel { border-color: var(--gold); } .pm.far { opacity: .6; } .pm .bar { height: 9px; } .pm .bar.res { height: 5px; }
.pm b { color: var(--gold); }

#tframe { position: absolute; left: 50%; top: calc(6px + var(--sat)); transform: translateX(-50%); width: 230px; padding: 4px 6px; }
#tframe.hostile .uname span:first-child { color: #ff6a5a; } #tframe.npc .uname span:first-child { color: #7fe07a; } #tframe.player .uname span:first-child { color: #7fbfff; }
#tframe.hostile .bar.hp i { background: linear-gradient(#ff5a4a, #a01d15); }
.mini { background: #4a3820; border: 1px solid var(--gold2); border-radius: 5px; font-size: 12px; padding: 5px 7px; color: #fff; }

#topright { position: absolute; right: calc(8px + var(--sar)); top: calc(6px + var(--sat)); width: 170px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none !important; }
#minimap-wrap { position: relative; pointer-events: auto; }
#minimap { width: 104px; height: 104px; border-radius: 50%; border: 3px solid var(--gold2); box-shadow: 0 2px 8px #000, inset 0 0 8px #000; background: #123; display: block; }
#zonename { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); font-size: 10px; background: #1c150d; border: 1px solid var(--edge); border-radius: 8px; padding: 0 7px; white-space: nowrap; color: var(--gold); }
#tracker { margin-top: 8px; font-size: 11px; text-shadow: 0 1px 2px #000, 0 0 3px #000; text-align: right; max-width: 170px; line-height: 1.25; pointer-events: auto; }
#tracker .qt { color: var(--gold); font-weight: bold; } #tracker .qo { color: #eee; } #tracker .qo.ok { color: #7fe07a; } #tracker .rdy { color: #7fe07a; }

#banner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; pointer-events: none !important; text-shadow: 0 2px 4px #000, 0 0 12px #000; }
#banner .big { font-size: 30px; color: var(--gold); letter-spacing: 2px; animation: fadeio 4s forwards; }
#banner .sub { font-size: 14px; animation: fadeio 4s forwards; }
@keyframes fadeio { 0% { opacity: 0; transform: scale(.9); } 12% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
#warn { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); width: 70%; text-align: center; color: #ff6a4a; font-size: 18px; font-weight: bold; text-shadow: 0 2px 3px #000, 0 0 10px #000; pointer-events: none !important; }
#warn div { animation: fadeio 4s forwards; }
#errors { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); text-align: center; color: #ff5a4a; font-size: 14px; text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none !important; }
#errors div { animation: fadeio 2.2s forwards; }
#toasts { position: absolute; right: calc(190px + var(--sar)); top: calc(58px + var(--sat)); display: flex; flex-direction: column; align-items: flex-end; gap: 3px; pointer-events: none !important; font-size: 12px; }
#toasts div { background: #1c150dcc; border: 1px solid var(--edge); border-radius: 6px; padding: 2px 8px; animation: fadeio 4.5s forwards; text-shadow: 0 1px 1px #000; }
#toasts .quest { color: var(--gold); border-color: var(--gold2); } #toasts .questdone { color: #7fe07a; border-color: #7fe07a; font-size: 14px; }
.r0 { color: #9d9d9d; } .r1 { color: #fff; } .r2 { color: #3fe04a; } .r3 { color: #4a9bff; } .r4 { color: #c66bff; }

#chatlog { position: absolute; left: calc(8px + var(--sal)); top: 42%; transform: translateY(-50%); width: 34%; max-width: 300px; font-size: 11.5px; line-height: 1.25; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none !important; font-family: system-ui, sans-serif; }
#chatlog div { transition: opacity 1s; overflow-wrap: anywhere; } #chatlog .old { opacity: 0; }
.ch-g b { color: #ffc878; } .ch-p { color: #9ad0ff; } .ch-sys { color: #ffe27a; } .ch-yell { color: #ff7a6a; }

#castbar { position: absolute; left: 50%; bottom: calc(96px + var(--sab)); transform: translateX(-50%); width: 200px; height: 16px; }
#castbar span { line-height: 15px; font-size: 11px; }
#interact { position: absolute; left: 50%; bottom: calc(118px + var(--sab)); transform: translateX(-50%); background: linear-gradient(#6a4f22, #3a2a10); border: 2px solid var(--gold); border-radius: 22px;
  padding: 9px 18px; font-size: 15px; color: #fff; box-shadow: 0 0 14px #f8d24a66, 0 3px 6px #000; white-space: nowrap; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 22px #f8d24acc, 0 3px 6px #000; } }

#menu { position: absolute; left: 50%; bottom: calc(14px + var(--sab)); transform: translateX(-50%); display: flex; gap: 6px; }
#menu button { width: 40px; height: 40px; border-radius: 8px; border: 2px solid var(--edge); background: linear-gradient(#3a2c1c, #1c150d); font-size: 19px; padding: 0; position: relative; }
#menu button.badge::after { content: ""; position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; background: #f33; border-radius: 50%; border: 1px solid #000; }

#joy { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 2px solid #fff5; background: radial-gradient(#fff2, #0003); left: calc(34px + var(--sal)); bottom: calc(34px + var(--sab)); pointer-events: none !important; opacity: .55; }
#joy.on { opacity: .9; }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: radial-gradient(#fffc, #cfc09a); box-shadow: 0 2px 6px #000; }

#actions { position: absolute; right: calc(10px + var(--sar)); bottom: calc(16px + var(--sab)); width: 236px; height: 190px; pointer-events: none !important; }
.ab { position: absolute; width: 54px; height: 54px; border-radius: 12px; border: 2px solid var(--gold2); background: radial-gradient(circle at 35% 30%, #5a4630, #1c150d); font-size: 26px; padding: 0; overflow: hidden;
  pointer-events: auto; box-shadow: 0 2px 5px #000; display: grid; place-items: center; }
.ab.big { width: 66px; height: 66px; border-radius: 50%; font-size: 30px; border-color: var(--gold); }
.ab.small { width: 42px; height: 42px; font-size: 19px; border-radius: 50%; }
.ab:active, .ab.press { transform: scale(.92); filter: brightness(1.4); }
.ab.locked { filter: grayscale(1) brightness(.5); } .ab.nores { filter: saturate(.3) brightness(.7); } .ab.oor { border-color: #a22; }
.ab.on { border-color: #ff4a3a; box-shadow: 0 0 12px #ff4a3a; }
.ab .cdm { position: absolute; left: 0; right: 0; bottom: 0; background: #000b; pointer-events: none; }
.ab .cdt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 17px; color: #fff; text-shadow: 0 1px 2px #000; font-family: system-ui, sans-serif; font-weight: bold; pointer-events: none; }
.ab .cnt { position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-family: system-ui, sans-serif; text-shadow: 0 1px 1px #000; }
.ab .lk { position: absolute; left: 0; right: 0; bottom: 1px; font-size: 9px; text-align: center; font-family: system-ui, sans-serif; }

#xpbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(7px + var(--sab)); background: #000c; border-top: 1px solid var(--edge); pointer-events: none !important; }
#xpbar i { position: absolute; left: 0; top: 0; height: 7px; background: linear-gradient(#b86bff, #6a2fb0); }
#xpbar span { display: none; }
#dead { position: absolute; inset: 0; background: #2008; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
#dead h2 { color: #ff5a4a; font-size: 34px; margin: 0; text-shadow: 0 2px 6px #000; }

/* ---------- buttons, panels ---------- */
.btn { background: linear-gradient(#8a2a1a, #5a140c); border: 2px solid var(--gold2); border-radius: 8px; color: #ffe9a8; font-size: 16px; padding: 10px 18px; box-shadow: 0 2px 5px #000; }
.btn.alt { background: linear-gradient(#4a3a26, #2a2016); } .btn:disabled { filter: grayscale(1) brightness(.6); } .btn.sm { font-size: 13px; padding: 6px 12px; }
#panel { position: fixed; inset: 0; background: #0007; display: grid; place-items: center; z-index: 20; padding: 6px calc(6px + var(--sar)) 6px calc(6px + var(--sal)); }
#panel-box { width: min(720px, 100%); max-height: 100%; display: flex; flex-direction: column; background: linear-gradient(#3a2c1c, #1f170e); border: 3px solid var(--edge); border-radius: 12px; box-shadow: 0 6px 30px #000, inset 0 0 0 1px #000; }
#panel-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 14px; border-bottom: 2px solid var(--edge); color: var(--gold); font-size: 17px; letter-spacing: 1px; }
#panel-close { background: #6a1a12; border: 1px solid var(--gold2); border-radius: 6px; width: 34px; height: 30px; font-size: 15px; }
#panel-body { padding: 10px; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; font-size: 14px; min-height: 120px; }
.cols { display: flex; gap: 12px; } .cols > * { flex: 1; min-width: 0; }
.parch { background: linear-gradient(#efe3c2, #dccba0); color: var(--parch-ink); border-radius: 6px; padding: 10px 14px; box-shadow: inset 0 0 20px #8a6a3055; white-space: pre-wrap; line-height: 1.4; }
.parch h4 { margin: 0 0 6px; font-size: 17px; } .parch .obj { font-weight: bold; margin-top: 8px; } .parch .rw { margin-top: 8px; padding-top: 6px; border-top: 1px solid #8a6a3066; }
.qlist button { display: block; width: 100%; text-align: left; background: #0004; border: 1px solid var(--edge); border-radius: 6px; padding: 8px 10px; margin-bottom: 5px; font-size: 14px; }
.qlist button .m { color: var(--gold); font-weight: bold; margin-right: 6px; } .qlist button .m.gray { color: #aaa; } .qlist button.sel { border-color: var(--gold); background: #f8d24a22; }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.slot { aspect-ratio: 1; background: #0006; border: 2px solid #4a3a26; border-radius: 6px; display: grid; place-items: center; font-size: 22px; position: relative; padding: 0; min-width: 0; }
.slot.rb0 { border-color: #6a6a6a; } .slot.rb1 { border-color: #bbb; } .slot.rb2 { border-color: #2fc03a; } .slot.rb3 { border-color: #3a8bef; } .slot.rb4 { border-color: #b65bef; }
.slot.up::before { content: "▲"; position: absolute; left: 2px; top: 0; font-size: 10px; color: #4f4; }
.slot .cnt { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-family: system-ui, sans-serif; text-shadow: 0 1px 1px #000; }
.slot .sl { position: absolute; bottom: 1px; left: 0; right: 0; font-size: 8px; color: #a89878; text-align: center; font-family: system-ui, sans-serif; }
.eq { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.stats { margin-top: 8px; font-size: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-family: system-ui, sans-serif; } .stats b { color: var(--gold); float: right; }
.gold { color: var(--gold); font-family: system-ui, sans-serif; }
.vrow { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #0005; } .vrow .nm { flex: 1; min-width: 0; font-size: 13px; }
h5 { margin: 4px 0 6px; color: var(--gold); font-size: 14px; letter-spacing: 1px; }
.tabs { display: flex; gap: 6px; margin-bottom: 8px; } .tabs button { flex: 1; padding: 7px; background: #0005; border: 1px solid var(--edge); border-radius: 6px; font-size: 14px; } .tabs button.sel { background: #f8d24a22; border-color: var(--gold); color: var(--gold); }
input[type=text], input:not([type]), input[type=password] { font: 16px system-ui, sans-serif; padding: 9px 10px; border-radius: 6px; border: 2px solid var(--edge); background: #120e08; color: #fff; width: 100%; user-select: text; -webkit-user-select: text; }
.row { display: flex; gap: 8px; align-items: center; } .row > input { flex: 1; }
#chat-hist { height: 38vh; overflow-y: auto; touch-action: pan-y; background: #0005; border-radius: 6px; padding: 6px; font: 13px/1.35 system-ui, sans-serif; margin-bottom: 8px; user-select: text; }
#bigmap { width: 100%; max-height: 66vh; aspect-ratio: 1; display: block; margin: 0 auto; border: 2px solid var(--edge); border-radius: 6px; object-fit: contain; }
.help p { margin: 0 0 8px; line-height: 1.4; } .help b { color: var(--gold); }

#tip { position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(300px, 90vw); background: #120e08f5; border: 2px solid var(--edge); border-radius: 8px; padding: 10px 12px; font-size: 13px; box-shadow: 0 6px 24px #000; }
#tip h4 { margin: 0 0 2px; font-size: 16px; } #tip .st { color: #7fe07a; font-family: system-ui, sans-serif; } #tip .dim { color: #b8a888; font-size: 12px; } #tip .bad { color: #ff5a4a; }
#tip .cmp { color: #7fe07a; font-size: 12px; font-family: system-ui, sans-serif; } #tip .cmp.neg { color: #ff6a5a; }
#tip .acts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
#confirm { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: #0006; }
.cbox { background: linear-gradient(#3a2c1c, #1f170e); border: 3px solid var(--edge); border-radius: 12px; padding: 16px 20px; text-align: center; max-width: 86vw; }
.cbox div { display: flex; gap: 10px; justify-content: center; }

/* ---------- login ---------- */
#login { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 5vw; padding: 10px;
  background: radial-gradient(ellipse at 50% 120%, #5a2a10 0%, #1a120a 55%, #070504 100%); overflow-y: auto; touch-action: pan-y; }
.logo { text-align: center; } .logo h1 { font-size: clamp(38px, 9vw, 76px); margin: 0; letter-spacing: 8px; color: var(--gold); text-shadow: 0 3px 0 #6a3a0a, 0 6px 22px #f8a02a88; }
.logo p { margin: 0; color: #c9b48a; letter-spacing: 3px; font-size: 13px; }
.card { background: linear-gradient(#3a2c1cf2, #1f170ef2); border: 3px solid var(--edge); border-radius: 12px; padding: 14px; width: min(340px, 92vw); display: flex; flex-direction: column; gap: 8px; }
.card h3 { margin: 0; color: var(--gold); text-align: center; } .hint { font-size: 12px; color: #b8a888; margin: 0; text-align: center; }
#login-msg, .msg { color: #ff6a5a; margin: 0; font-size: 13px; text-align: center; min-height: 16px; }
#gbtn { display: flex; justify-content: center; min-height: 44px; } #app-login { text-align: center; text-decoration: none; display: block; }
#char-list { display: flex; flex-direction: column; gap: 5px; max-height: 46vh; overflow-y: auto; touch-action: pan-y; }
.crow { display: flex; align-items: center; gap: 8px; background: #0005; border: 2px solid var(--edge); border-radius: 8px; padding: 5px 6px 5px 10px; }
.crow .ci { font-size: 24px; } .crow .cn { flex: 1; min-width: 0; font-size: 13px; color: #d9c8a0; } .crow .cn b { color: var(--gold); font-size: 15px; display: block; }
.crow .del { background: none; border: none; font-size: 16px; opacity: .6; padding: 6px; }
#btn-signout { color: #d9a8ff; text-decoration: underline; } #conn { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 11px; color: #8a7a5a; }
.choices { display: flex; gap: 6px; } .choices button { flex: 1; padding: 8px 2px; background: #0005; border: 2px solid var(--edge); border-radius: 8px; font-size: 13px; } .choices button.sel { border-color: var(--gold); background: #f8d24a22; color: var(--gold); }
.choices button span { display: block; font-size: 24px; } #cr-desc { font-size: 12px; margin: 0; min-height: 44px; color: #d9c8a0; } #create-form .row .btn { flex: 1; font-size: 14px; padding: 9px 6px; }

#rotate { display: none; position: fixed; inset: 0; z-index: 100; background: #0b0906; place-items: center; text-align: center; font-size: 46px; }
#rotate p { font-size: 16px; }
@media (orientation: portrait) and (max-width: 700px) { #rotate { display: grid; } }
@media (max-height: 380px) {
  #minimap { width: 86px; height: 86px; } .ab { width: 50px; height: 50px; } .ab.big { width: 60px; height: 60px; } #menu button { width: 36px; height: 36px; font-size: 17px; }
}