:root {
  --gold: #e8c473; --gold2: #b8893a; --ink: #f3e9d2; --dim: #b9ad94; --panel: rgba(20, 15, 10, 0.74); --line: rgba(232, 196, 115, 0.42);
  --hp: #d8423a; --hp2: #8e1f1a; --xp: #b07cff; --light: #ffd76a; --shadow: #ff6f7d;
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b140d; color: var(--ink); font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }
.k-light { color: var(--light); } .k-shadow { color: var(--shadow); }

/* ---------------------------------------------------------------- loading + title */
#loading { position: fixed; inset: 0; background: radial-gradient(circle at 50% 40%, #3a2a18, #120d08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; z-index: 50; transition: opacity .6s; }
#loading.gone { opacity: 0; pointer-events: none; }
.logo { font-family: Cinzel, Georgia, serif; font-weight: 800; letter-spacing: .08em; margin: 0; font-size: 54px; line-height: 1; text-transform: uppercase;
  background: linear-gradient(180deg, #fff3c4 0%, #e8c473 45%, #a8732a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(232,196,115,.25)); }
.spin { width: 34px; height: 34px; border: 3px solid rgba(232,196,115,.25); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

#title { position: fixed; inset: 0; display: none; align-items: center; justify-content: flex-start; padding: 24px 24px 24px calc(5vw + var(--safe-l)); z-index: 20;
  background: linear-gradient(90deg, rgba(14,10,6,.78) 0%, rgba(14,10,6,.35) 38%, rgba(14,10,6,0) 60%); }
#title.on { display: flex; }
.tpanel { width: 380px; max-width: 100%; max-height: 100%; overflow-y: auto; padding: 4px; }
.tpanel .sub { font-family: Cinzel, serif; color: var(--dim); letter-spacing: .3em; text-transform: uppercase; font-size: 12px; margin: 8px 0 18px 4px; }
.tpanel .sub span { color: var(--gold); opacity: .7; }
.tsec { display: none; } .tsec.on { display: block; animation: fadein .35s; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }
#tLoading p { text-align: center; color: var(--dim); }
.card { display: flex; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.cicon { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle, #4a3824, #1d150d); border: 2px solid var(--gold2); padding: 9px; flex: none; }
.cname { font-family: Cinzel, serif; font-weight: 800; font-size: 22px; }
.cinfo { color: var(--dim); font-size: 13px; }
button.big { display: block; width: 100%; padding: 14px; border-radius: 10px; border: 1px solid #f3d58e; font-family: Cinzel, serif; font-weight: 800; font-size: 17px; letter-spacing: .06em;
  background: linear-gradient(180deg, #e9bf5e, #a8702a); color: #2a1a08; text-shadow: 0 1px 0 rgba(255,240,200,.5); box-shadow: 0 4px 0 #5b3a12, 0 8px 20px rgba(0,0,0,.4); transition: transform .08s, filter .15s; }
button.big:hover { filter: brightness(1.08); } button.big:active { transform: translateY(2px); box-shadow: 0 2px 0 #5b3a12; }
button.big:disabled { filter: grayscale(.6); opacity: .7; }
button.link { background: none; border: 0; color: var(--dim); text-decoration: underline; display: block; margin: 12px auto 0; font-size: 13px; }
.lbl { display: block; font-family: Cinzel, serif; color: var(--gold); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin: 12px 0 6px 2px; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice button { text-align: left; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid rgba(255,255,255,.12); transition: border-color .15s, background .15s; }
.choice button b { display: block; font-family: Cinzel, serif; font-size: 14px; }
.choice button small { color: var(--dim); font-size: 11.5px; }
.choice button.sel { border-color: var(--gold); background: rgba(70,50,22,.82); box-shadow: inset 0 0 0 1px rgba(232,196,115,.35), 0 0 16px rgba(232,196,115,.18); }
.blurb { color: var(--dim); font-style: italic; margin: 8px 2px 0; min-height: 2.6em; font-size: 13px; }
.namerow { display: flex; gap: 8px; }
.namerow input { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.45); color: var(--ink); font: 600 16px Cinzel, serif; outline: none; user-select: text; -webkit-user-select: text; }
.namerow input:focus { border-color: var(--gold); }
.namerow button { width: 48px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 22px; }
.err { color: #ff8a7a; min-height: 1.3em; margin: 8px 2px; font-size: 13px; }
.guest { color: rgba(185,173,148,.7); font-size: 11.5px; margin-top: 18px; text-align: center; }
.acct { color: var(--dim); font-size: 12.5px; margin: -6px 0 12px 4px; min-height: 1.2em; }
.acct b { color: var(--ink); }
#acctAv { width: 22px; height: 22px; border-radius: 6px; vertical-align: middle; margin-right: 6px; }
#gBtn { min-height: 44px; display: flex; justify-content: center; margin: 8px 0; }
button.link.inline { display: inline; margin: 0 0 0 4px; color: var(--gold); font-size: 12.5px; padding: 0; }
#charList { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
#charList .card { margin: 0; cursor: pointer; border-color: rgba(255,255,255,.12); position: relative; }
#charList .card.sel { border-color: var(--gold); background: rgba(70,50,22,.82); box-shadow: 0 0 16px rgba(232,196,115,.18); }
#charList .card .del { position: absolute; right: 8px; top: 6px; background: none; border: 0; color: var(--dim); font-size: 18px; }
.claim { display: none; background: linear-gradient(180deg, rgba(60,90,40,.85), rgba(25,40,18,.85)); border: 1px solid #9fdc7a; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.claim.on { display: block; animation: fadein .35s; }
.claim > b { font-family: Cinzel, serif; color: #d8ffc0; font-size: 15px; }
.claim p { margin: 6px 0 8px; font-size: 12.5px; color: #dfe9d0; }
.claim #claimList { font: 700 14px Cinzel, serif; margin-bottom: 10px; }
button.big.alt { background: linear-gradient(180deg, #8fdc6a, #3f8a2a); border-color: #c8f5a8; box-shadow: 0 4px 0 #1f4a12, 0 8px 20px rgba(0,0,0,.4); color: #10240a; }
.panel.note { width: 340px; max-width: calc(100vw - 24px); }
.panel.note p { font-size: 13.5px; color: var(--ink); margin: 0 0 10px; }

/* ---------------------------------------------------------------- HUD */
#hud { display: none; }
body.playing #hud { display: block; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.plate { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; will-change: transform; display: flex; flex-direction: column; align-items: center; }
.plate .nm { font: 700 13px/1.1 system-ui, sans-serif; color: #f3ead6; text-shadow: 0 1px 2px #000, 0 0 3px #000, 0 0 1px #000; padding: 0 2px; }
.plate.mob .nm { font-size: 12px; }
.plate .nm b { font-weight: 800; margin-right: 3px; }
.plate.player .nm .lv { color: #e9e2d0; font-size: 10px; background: rgba(0,0,0,.45); border-radius: 6px; padding: 0 4px; margin-right: 4px; vertical-align: 1px; }
.plate.self .nm { opacity: .85; }
.plate.elite .nm { color: #ffcf6a; font-size: 13.5px; }
.plate.elite .nm::before { content: "\2726  "; color: #ffb43a; }
.plate .hp { width: 64px; height: 6px; margin-top: 3px; background: rgba(0,0,0,.65); border: 1px solid rgba(0,0,0,.8); border-radius: 3px; overflow: hidden; display: none; }
.plate.showhp .hp { display: block; }
.plate .hp i { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #ff6a5a, #b8281e); transition: width .15s; }
.plate.player .hp i { background: linear-gradient(180deg, #7ee06a, #2f8a2a); }
.plate.dead { opacity: .45 !important; } .plate.dead .nm { color: #9a9a9a !important; }
.plate.evade .nm::after { content: " (evading)"; color: #aaa; font-weight: 400; font-size: 11px; }
.bubble { display: none; max-width: 220px; white-space: normal; background: rgba(250,244,230,.95); color: #2a2016; border-radius: 10px; padding: 5px 9px; font-size: 12.5px; margin-bottom: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.35); position: relative; }
.bubble.on { display: block; animation: pop .2s; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(250,244,230,.95); border-bottom: 0; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.ft { position: absolute; left: 0; top: 0; font: 800 18px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 2px 0 #000, 0 0 4px #000; pointer-events: none; white-space: nowrap; will-change: transform, opacity; }
.ft.dmg { color: #fff3d6; } .ft.crit { font-size: 26px; color: #ffd24a; } .ft.hurt { color: #ff5a4a; } .ft.hurt.crit { color: #ff3020; }
.ft.other { color: #d8d0c0; font-size: 13px; font-weight: 700; opacity: .8; }
.ft.xp { color: #d6a8ff; font-size: 16px; } .ft.gold { color: #ffd76a; font-size: 15px; }

.frame { position: fixed; display: flex; gap: 8px; align-items: center; z-index: 5; pointer-events: none; }
#pframe { left: calc(14px + var(--safe-l)); top: calc(12px + var(--safe-t)); }
.portrait { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4d3a24, #17110a); border: 2px solid var(--gold2); box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 3px 10px rgba(0,0,0,.5); padding: 11px; flex: none; }
.fbody { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 9px 8px; min-width: 210px; box-shadow: 0 3px 12px rgba(0,0,0,.35); }
.frow { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; white-space: nowrap; }
.lvl { min-width: 22px; height: 22px; border-radius: 11px; background: #1a120a; border: 1px solid var(--gold2); color: var(--gold); font: 800 12px/20px Cinzel, serif; text-align: center; padding: 0 4px; }
.fname { font: 800 14px Cinzel, serif; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.ktag { color: var(--dim); font-size: 11px; margin-left: auto; }
.bar { position: relative; height: 16px; border-radius: 8px; background: rgba(0,0,0,.6); border: 1px solid rgba(0,0,0,.7); overflow: hidden; }
.bar i { position: absolute; inset: 0; width: 100%; background: linear-gradient(180deg, #ef5b4c, #a82219); transition: width .18s; }
.bar i.low { animation: pulse 0.8s infinite alternate; }
@keyframes pulse { to { filter: brightness(1.5); } }
.bar span { position: absolute; inset: 0; text-align: center; font: 700 11px/15px system-ui, sans-serif; text-shadow: 0 1px 1px #000; }
#target { left: 50%; top: calc(12px + var(--safe-t)); transform: translateX(-50%); display: none; }
#target.on { display: flex; }
#target .fbody { min-width: 240px; }
#target.elite .fbody { border-color: #ffb43a; box-shadow: 0 0 0 1px rgba(255,180,58,.4), 0 0 16px rgba(255,140,40,.25); }
#hint { position: fixed; left: 50%; top: calc(16px + var(--safe-t)); transform: translateX(-50%); color: rgba(243,233,210,.92); font: 600 12.5px system-ui, sans-serif; letter-spacing: .02em; text-shadow: 0 1px 3px #000; background: rgba(20,15,10,.45); padding: 3px 12px; border-radius: 12px; white-space: nowrap; pointer-events: none; z-index: 4; transition: top .2s; }
#target.on ~ #hint { top: calc(74px + var(--safe-t)); }
#toast { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); font: 700 16px system-ui, sans-serif; color: #fff; text-shadow: 0 2px 4px #000; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 8; white-space: nowrap; }
#toast.on { opacity: 1; } #toast.bad { color: #ff9a8a; } #toast.good { color: #ffe08a; }
#banner { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; z-index: 9; }
#banner div { font: 800 48px Cinzel, serif; background: linear-gradient(180deg, #fff6cc, #e8c473 50%, #b07a2c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #2a1a08) drop-shadow(0 0 6px rgba(0,0,0,.85)); }
#banner small { font: 600 14px Cinzel, serif; color: var(--ink); text-shadow: 0 1px 3px #000, 0 0 8px #000; }
#banner.on { animation: banner 3s ease-out forwards; }
@keyframes banner { 0% { opacity: 0; transform: translateX(-50%) scale(.7); } 10% { opacity: 1; transform: translateX(-50%) scale(1.06); } 18% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 0 0 120px 30px rgba(200,20,10,.55); opacity: 0; }
#vignette.on { animation: vig .5s ease-out; }
@keyframes vig { 0% { opacity: .9; } 100% { opacity: 0; } }

#topright { position: fixed; right: calc(12px + var(--safe-r)); top: calc(12px + var(--safe-t)); display: flex; gap: 10px; align-items: flex-start; z-index: 6; }
#mmwrap { position: relative; }
#minimap { width: 150px; height: 150px; border-radius: 50%; border: 2px solid var(--gold2); box-shadow: 0 0 0 3px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.5); background: #2a3a22; display: block; }
#zoneName { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); font: 700 11px Cinzel, serif; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 1px 9px; white-space: nowrap; }
button.round { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); padding: 10px; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
button.round svg { fill: var(--ink); width: 100%; height: 100%; }
button.round.small { width: 38px; height: 38px; padding: 9px; }

#chat { position: fixed; left: calc(14px + var(--safe-l)); bottom: calc(34px + var(--safe-b)); width: 340px; z-index: 5; transition: opacity .6s; }
#chatLog { max-height: 150px; overflow-y: auto; padding: 6px 8px; font-size: 13px; scrollbar-width: none; mask-image: linear-gradient(180deg, transparent 0, #000 22px); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px); pointer-events: none; }
#chatLog::-webkit-scrollbar { display: none; }
#chatLog .ln { text-shadow: 0 1px 2px #000, 0 0 2px #000; margin: 1px 0; word-wrap: break-word; }
#chatLog .ln.sys { color: #ffe08a; font-style: italic; }
.chatrow input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0,0,0,.5); color: var(--ink); font-size: 14px; outline: none; user-select: text; -webkit-user-select: text; }
#chat.idle #chatLog { opacity: .55; }
#chat.idle .chatrow input { opacity: .55; }
#chatBtn { display: none; }

#actionbar { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 10px; align-items: flex-end; z-index: 5; }
#skills { display: flex; gap: 8px; }
.skill { position: relative; width: 58px; height: 58px; border-radius: 12px; border: 2px solid #6b5230; background: radial-gradient(circle at 50% 35%, #3d2e1d, #140e08); padding: 9px; box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.45); transition: transform .06s, border-color .15s; touch-action: none; }
.skill:active { transform: scale(.94); }
.skill svg { width: 100%; height: 100%; }
.skill kbd { position: absolute; right: 4px; top: 2px; font: 700 11px system-ui; color: var(--ink); text-shadow: 0 1px 2px #000; }
.skill em { position: absolute; right: 4px; bottom: 2px; font: 800 12px system-ui; font-style: normal; text-shadow: 0 1px 2px #000; }
.skill .cd { display: none; position: absolute; inset: 0; border-radius: 10px; background: conic-gradient(rgba(0,0,0,.72) var(--p, 0deg), rgba(0,0,0,0) 0); }
.skill .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 20px system-ui; text-shadow: 0 2px 3px #000; pointer-events: none; }
.skill.basic { border-color: var(--gold2); }
.skill.auto { border-color: #ffd76a; box-shadow: 0 0 0 2px rgba(0,0,0,.5), 0 0 14px rgba(255,200,80,.55); }
.skill.far svg { filter: saturate(.3) brightness(.7) sepia(1) hue-rotate(-40deg); }
.skill.flashready { border-color: #fff4c0; }
.skill.potion.empty svg { filter: grayscale(1) brightness(.6); }
.bagbtn { width: 50px; height: 50px; padding: 7px; }
.bagbtn em { color: var(--gold); }
#lootBtn { position: fixed; left: 50%; bottom: calc(100px + var(--safe-b)); transform: translateX(-50%) scale(.8); display: flex; align-items: center; gap: 6px; padding: 7px 14px 7px 8px; border-radius: 24px; border: 1px solid #f3d58e;
  background: linear-gradient(180deg, rgba(90,62,24,.92), rgba(40,26,10,.92)); font: 800 14px Cinzel, serif; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 6; box-shadow: 0 0 18px rgba(255,210,100,.35); }
#lootBtn svg { width: 30px; height: 30px; }
#lootBtn kbd { font: 700 11px system-ui; opacity: .7; }
#lootBtn.on { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); }
#xpbar { position: fixed; left: 50%; bottom: calc(6px + var(--safe-b)); transform: translateX(-50%); width: min(560px, 70vw); height: 10px; border-radius: 5px; background: rgba(0,0,0,.6); border: 1px solid rgba(0,0,0,.8); overflow: hidden; z-index: 5; }
#xpbar i { position: absolute; inset: 0; width: 0; background: linear-gradient(180deg, #c99bff, #7a3fd0); transition: width .4s; }
#xpbar span { position: absolute; inset: 0; text-align: center; font: 700 9px/9px system-ui; text-shadow: 0 1px 1px #000; opacity: 0; transition: opacity .2s; }
#xpbar:hover span { opacity: 1; }

.panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(22,16,10,.94); border: 1px solid var(--line); border-radius: 14px; padding: 14px; z-index: 12; display: none; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.panel.on { display: block; animation: fadein .2s; }
.phead { display: flex; align-items: center; gap: 10px; font: 800 18px Cinzel, serif; color: var(--gold); margin-bottom: 10px; }
.phead .coins { margin-left: auto; font: 700 14px system-ui; color: #ffd76a; display: flex; align-items: center; gap: 5px; }
.coin { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2a8, #d8a034 60%, #8a5a14); display: inline-block; }
.x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--dim); padding: 0 4px; }
#inv { width: 340px; max-width: calc(100vw - 24px); }
#invGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.slot { aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.4); padding: 6px; position: relative; }
.slot em { position: absolute; right: 3px; bottom: 1px; font: 800 11px system-ui; font-style: normal; text-shadow: 0 1px 2px #000; }
.slot.usable { cursor: pointer; }
#invTip { margin-top: 10px; min-height: 58px; font-size: 12.5px; color: var(--dim); }
#menu { width: 300px; text-align: center; }
#menu button:not(.big) { display: block; width: 100%; margin-top: 8px; padding: 11px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font: 700 14px Cinzel, serif; }
.mstats { color: var(--dim); font-size: 12px; margin: 0 0 10px; }
.keys { color: var(--dim); font-size: 11.5px; margin: 12px 0 0; }
#death { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(40,0,0,.25), rgba(20,0,0,.65)); z-index: 11; pointer-events: none; text-align: center; }
#death.on { display: flex; animation: fadein .6s; }
#death h2 { font: 800 40px Cinzel, serif; color: #e8b0a0; margin: 0 0 8px; text-shadow: 0 3px 0 #000; }
#death p { margin: 4px; color: var(--ink); text-shadow: 0 1px 3px #000; }
#joy, #joyHint { display: none; }

/* ---------------------------------------------------------------- touch layout (phones and tablets) */
body.touch #pframe .portrait { width: 44px; height: 44px; padding: 8px; }
body.touch .fbody { min-width: 0; width: 150px; padding: 5px 8px 6px; }
body.touch #pframe .ktag { display: none; }
body.touch .fname { max-width: 96px; font-size: 13px; }
body.touch .bar { height: 14px; } body.touch .bar span { line-height: 13px; font-size: 10px; }
body.touch #minimap { width: 104px; height: 104px; }
body.touch #target { top: calc(70px + var(--safe-t)); left: calc(10px + var(--safe-l)); transform: none; }
body.touch #target .fbody { min-width: 0; width: 202px; }
body.touch #target .fname { max-width: 110px; }
body.touch #target.on ~ #chat { top: calc(130px + var(--safe-t)); }
body.touch #hint { top: calc(128px + var(--safe-t)); font-size: 11.5px; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
body.touch #target.on ~ #hint { top: calc(128px + var(--safe-t)); opacity: 0; }
body.touch #actionbar { left: auto; right: calc(14px + var(--safe-r)); bottom: calc(22px + var(--safe-b)); transform: none; width: 210px; height: 200px; display: block; pointer-events: none; }
body.touch #skills { display: block; }
body.touch .skill { position: absolute; pointer-events: auto; border-radius: 50%; }
body.touch .skill .cd { border-radius: 50%; }
body.touch .skill kbd { display: none; }
body.touch .skill.basic { right: 0; bottom: 0; width: 84px; height: 84px; padding: 16px; }
body.touch #skills .skill:nth-child(2) { right: 98px; bottom: 2px; width: 62px; height: 62px; padding: 11px; }
body.touch #skills .skill:nth-child(3) { right: 78px; bottom: 76px; width: 62px; height: 62px; padding: 11px; }
body.touch #skills .skill.potion { right: 8px; bottom: 100px; width: 50px; height: 50px; padding: 8px; }
body.touch .bagbtn { position: absolute; right: 142px; bottom: 136px; width: 46px; height: 46px; border-radius: 50%; pointer-events: auto; }
body.touch #lootBtn { left: auto; right: calc(150px + var(--safe-r)); bottom: calc(150px + var(--safe-b)); transform: scale(.8); }
body.touch #lootBtn.on { transform: scale(1); }
body.touch #lootBtn kbd { display: none; }
body.touch #chat { width: min(300px, 50vw); left: calc(10px + var(--safe-l)); bottom: auto; top: calc(152px + var(--safe-t)); }
body.touch #chatLog { max-height: 92px; font-size: 11.5px; }
body.touch #chatLog .ln.sys { font-size: 11px; opacity: .85; }
body.touch #chat .chatrow { display: none; }
body.touch #chat.typing .chatrow { display: block; position: fixed; left: 10px; right: 10px; top: 40%; }
body.touch #chatBtn { display: block; position: fixed; right: calc(12px + var(--safe-r)); top: calc(130px + var(--safe-t)); z-index: 6; }
body.touch #xpbar { width: 50vw; left: calc(10px + var(--safe-l)); transform: none; height: 8px; bottom: calc(6px + var(--safe-b)); }
body.touch #joy { display: block; position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .15s; }
body.touch #joy.on { opacity: 1; }
body.touch #joy::before { content: ""; position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,.16)); border: 2px solid rgba(255,240,200,.35); }
body.touch #knob { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,245,220,.85), rgba(200,170,110,.7)); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
body.touch #joyHint { display: block; position: fixed; left: calc(46px + var(--safe-l)); bottom: calc(60px + var(--safe-b)); width: 110px; height: 110px; border-radius: 50%; border: 2px dashed rgba(255,240,200,.22); pointer-events: none; z-index: 3; }
body.touch #joy.on + #joyHint { display: none; }
body.touch #inv { top: auto; bottom: 12px; transform: translateX(-50%); }

/* landscape phones: everything a bit smaller */
@media (max-height: 500px) {
  .logo { font-size: 40px; }
  #title { padding-top: 12px; padding-bottom: 12px; }
  .tpanel .sub { margin-bottom: 8px; }
  .lbl { margin-top: 7px; }
  .choice button { padding: 7px 10px; }
  .blurb { min-height: 0; margin-top: 4px; }
  .guest { margin-top: 8px; }
  body.touch #minimap { width: 88px; height: 88px; }
  body.touch #target { top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); }
  body.touch #target.on ~ #chat { top: calc(74px + var(--safe-t)); }
  body.touch #hint { top: calc(10px + var(--safe-t)); opacity: 0; }
  body.touch #chat { top: calc(74px + var(--safe-t)); width: 34vw; }
  body.touch #chatLog { max-height: 70px; font-size: 11px; }
  body.touch #chatBtn { top: calc(108px + var(--safe-t)); right: calc(106px + var(--safe-r)); top: calc(12px + var(--safe-t)); }
  body.touch #actionbar { transform: scale(.86); transform-origin: 100% 100%; bottom: calc(10px + var(--safe-b)); }
  body.touch #joyHint { bottom: calc(30px + var(--safe-b)); left: calc(60px + var(--safe-l)); width: 90px; height: 90px; }
  #banner div { font-size: 34px; }
}
/* portrait phones: title panel at the bottom, preview character above */
@media (max-width: 600px) and (orientation: portrait) {
  #title { align-items: flex-end; padding: 16px 16px calc(16px + var(--safe-b)); background: linear-gradient(0deg, rgba(14,10,6,.9) 0%, rgba(14,10,6,.55) 55%, rgba(14,10,6,0) 75%); }
  .tpanel { width: 100%; }
  .logo { font-size: 42px; text-align: center; }
  .tpanel .sub { text-align: center; margin-left: 0; }
  #tCreate .blurb { display: none; }
  #banner div { font-size: 38px; }
  #toast { font-size: 14px; top: 34%; }
}

/* ---------------------------------------------------------------- language, classes, quests, equipment (Phase B) */
.langrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; color: var(--dim); font-size: 12px; }
.langsel { background: rgba(0,0,0,.45); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font: 600 12.5px system-ui, sans-serif; }
#menu .langrow { margin: 8px 0 0; }
.choice.cls4 button { padding: 8px 11px; }
#topright .tbtns { display: flex; flex-direction: column; gap: 8px; }
#target.friendly .bar i { background: linear-gradient(180deg, #7ee06a, #2f8a2a); }
.bar .shield { position: absolute; inset: 0; border: 2px solid #ffe08a; border-radius: 8px; box-shadow: inset 0 0 8px rgba(255,224,138,.7); display: none; z-index: 1; }
.bar .shield.on { display: block; animation: pulse .8s infinite alternate; }
.ft.heal { color: #8dff9a; font-size: 17px; }
/* NPC nameplates: name in gold, <Quests> tag, quest marker above */
.plate.npc .nm { color: #ffe08a; }
.plate .tag { font: 600 10.5px system-ui, sans-serif; color: #e8dcc0; text-shadow: 0 1px 2px #000; }
.plate .qm { font: 900 30px/1 Cinzel, Georgia, serif; color: #ffd23a; text-shadow: 0 2px 0 #4a2a00, 0 0 10px rgba(255,200,40,.8); margin-bottom: 2px; min-height: 0; }
.plate .qm.offer { animation: bob 1s ease-in-out infinite alternate; }
.plate .qm.busy { color: #b8b0a0; text-shadow: 0 2px 0 #222; animation: none; }
.plate .qm.turnin { animation: bob 1s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-5px); } }
/* quest tracker (under the minimap) */
#qtrack { position: fixed; right: calc(14px + var(--safe-r)); top: calc(178px + var(--safe-t)); width: 220px; text-align: right; z-index: 5; display: none; cursor: pointer; padding: 6px 8px; border-radius: 10px; background: rgba(20,15,10,.35); }
#qtrack.on { display: block; }
#qtrack b { display: block; font: 800 13px Cinzel, serif; color: var(--gold); text-shadow: 0 1px 3px #000; }
#qtrack span { display: block; font-size: 12.5px; color: var(--ink); text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#qtrack.ready span { color: #bff5a0; }
/* quest log + NPC dialog */
#qlog, #dlg { width: 380px; max-width: calc(100vw - 24px); max-height: calc(100vh - 40px); overflow-y: auto; }
#qlogBody h3, #dlg h3 { font: 800 16px Cinzel, serif; color: var(--ink); margin: 0 0 6px; }
#qlogBody .obj { color: #bff5a0; font-weight: 700; margin: 0 0 8px; }
#qlogBody .txt, #dlgText { color: var(--ink); font-size: 13.5px; line-height: 1.45; margin: 0 0 10px; }
#qlogBody .rew, #dlgReward { color: var(--dim); font-size: 13px; margin: 0 0 12px; }
.ritem { color: #5fe07a; font-weight: 700; }
#dlgBtns { display: flex; flex-direction: column; gap: 6px; }
#dlgName { color: #ffe08a; }
/* equipment row in the bag */
.equip { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(232,196,115,.2); }
.eqslots { display: flex; gap: 6px; }
.eq { width: 48px; height: 48px; aspect-ratio: auto; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.eq span { font: 600 9.5px system-ui, sans-serif; color: rgba(185,173,148,.7); text-align: center; line-height: 1.1; }
.eq svg { width: 100%; height: 100%; }
.eqstats { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--dim); }
.eqstats b { color: var(--ink); }
.slot.wrong svg { filter: grayscale(.8) brightness(.6); }
#invTip .st { color: #5fe07a; margin-right: 6px; }
#invTip .cls { color: var(--dim); } #invTip .bad { color: #ff8a7a; } #invTip .worn { color: var(--gold); }
#invTip .cmp { margin-top: 4px; } #invTip .cmp .up { color: #5fe07a; } #invTip .cmp .down { color: #ff8a7a; }
.tipbtn { display: block; margin-top: 8px; padding: 7px 14px; border-radius: 8px; border: 1px solid #f3d58e; background: linear-gradient(180deg, #e9bf5e, #a8702a); color: #2a1a08; font: 800 13px Cinzel, serif; }
body.touch #qtrack { top: calc(176px + var(--safe-t)); width: 46vw; padding: 4px 6px; }
body.touch #qtrack b { font-size: 11.5px; } body.touch #qtrack span { font-size: 11px; }
body.touch #hint { display: none; }
body.touch #topright .tbtns .round { width: 38px; height: 38px; padding: 9px; }
body.touch #qlog, body.touch #dlg { top: auto; bottom: 12px; transform: translateX(-50%); max-height: 70vh; }
@media (max-height: 500px) { body.touch #qtrack { top: calc(100px + var(--safe-t)); width: 30vw; } }