: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: 11px; opacity: .9; }
.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: 15px; 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: 11px; line-height: 13px; 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.res.energy i { background: linear-gradient(#ffd84a, #b88a10); }
.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); }
#t-info { display: flex; justify-content: space-between; gap: 8px; font: 12px system-ui, sans-serif; color: #ffe9a0; margin-top: 2px; white-space: nowrap; }
#t-dir i { display: inline-block; font-style: normal; color: var(--gold); width: 14px; text-align: center; font-size: 13px; }
/* The padding is the touch area (44 px high), the negative margin keeps the frame as it was. */
#t-tot { overflow: hidden; text-overflow: ellipsis; color: #b8a888; padding: 14px 0 14px 8px; margin: -12px 0; min-width: 44px; text-align: right; } #t-tot:empty { display: none; } #t-tot b { color: #f3ead6; } #t-tot b.me { color: #ff6a5a; } #t-tot b.ally { color: #7fbfff; }
.mini { background: #4a3820; border: 1px solid var(--gold2); border-radius: 6px; font-size: 13px; padding: 0 12px; color: #fff; min-width: 44px; min-height: 44px; }
#t-clear { align-self: stretch; margin: -4px -6px -4px 0; border-width: 0 0 0 1px; border-radius: 0 6px 6px 0; background: #6a1a1299; font-size: 15px; padding: 0; }

/* Top right: the quest tracker stands to the left of the minimap, so it never
   runs down into the potion row; toasts come under both. */
#topright { position: absolute; right: calc(8px + var(--sar)); top: calc(6px + var(--sat)); display: grid; grid-template-columns: auto auto; justify-items: end; align-items: start; gap: 4px 6px; pointer-events: none !important; }
#minimap-wrap { position: relative; pointer-events: auto; grid-column: 2; grid-row: 1; }
#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; }
/* As wide as the minimap: a long zone name wraps instead of running off the screen. */
#zonename { position: relative; margin: -9px 0 0; width: 100%; font-size: 11px; line-height: 1.15; background: #1c150d; border: 1px solid var(--edge); border-radius: 8px; padding: 1px 4px; text-align: center; overflow-wrap: anywhere; color: var(--gold); }
#tracker { grid-column: 1; grid-row: 1; font-size: 13px; text-shadow: 0 1px 2px #000, 0 0 3px #000; text-align: right; width: max-content; max-width: 170px; min-height: 44px; max-height: calc(100vh - 200px); overflow: hidden; line-height: 1.2; pointer-events: auto; background: #0005; border-radius: 6px; padding: 2px 6px; }
#tracker:empty { min-height: 0; }
#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: max(24%, calc(92px + var(--sat))); width: max-content; max-width: 90vw; 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: max(17%, calc(72px + var(--sat))); white-space: nowrap; 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 { grid-column: 1 / 3; grid-row: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; pointer-events: none !important; font-size: 12px; max-width: min(340px, 44vw); text-align: right; }
#toasts div { background: #1c150de6; 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; } .r5 { color: #ff9a2e; }

#chatlog { position: absolute; left: calc(8px + var(--sal)); top: 42%; transform: translateY(-50%); width: 34%; max-width: 300px; font-size: 13px; line-height: 1.25; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none !important; font-family: system-ui, sans-serif; }
/* Lines can be tapped to answer (see UI.initChatLog); the box itself lets touches through. */
#chatlog div { transition: opacity 1s; overflow-wrap: anywhere; pointer-events: auto; touch-action: none; width: fit-content; max-width: 100%; } #chatlog .old { opacity: 0; pointer-events: none; }
.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(142px + var(--sab)); transform: translateX(-50%); background: linear-gradient(#6a4f22, #3a2a10); border: 2px solid var(--gold); border-radius: 22px;
  padding: 9px 18px; min-height: 44px; 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; } }

/* Between the joystick and the spells, so eight 44 px buttons fit on a 780 px screen. */
#menu { position: absolute; left: calc(158px + var(--sal)); right: calc(250px + var(--sar)); bottom: calc(12px + var(--sab)); display: flex; justify-content: center; gap: 4px; pointer-events: none !important; }
#menu button { width: 44px; height: 46px; flex: none; border-radius: 8px; border: 2px solid var(--edge); background: linear-gradient(#3a2c1c, #1c150d); font-size: 18px; line-height: 1.1; padding: 2px 0 0; position: relative; pointer-events: auto; }
#menu button span { display: block; font: 11px/1.2 system-ui, sans-serif; letter-spacing: -.3px; color: #e9dcba; white-space: nowrap; }
#menu button.badge::after { content: ""; position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; background: #f33; border-radius: 50%; border: 1px solid #000; }
/* "⋯" and its list of the buttons that do not fit (ui.js fitMenu) */
#menu-morewrap { position: relative; flex: none; pointer-events: none; }
#menu-pop { position: absolute; right: -4px; bottom: calc(100% + 6px); display: flex; flex-direction: column; gap: 3px; padding: 4px; background: #1c150de6; border: 1px solid var(--edge); border-radius: 8px; box-shadow: 0 3px 10px #000; pointer-events: auto; }
#menu-more .ic.more { display: grid; place-items: center; font: bold 22px/1 system-ui, sans-serif; color: #f3e6c4; text-shadow: 0 1px 2px #000; }
#menu-morewrap:has(#menu-pop button.badge) #menu-more::after { content: ""; position: absolute; right: 2px; top: -2px; width: 10px; height: 10px; background: #f33; border-radius: 50%; border: 1px solid #000; }
#menu.compact { gap: 3px; } #menu.compact button { width: 38px; height: 42px; }
#menu.compact button .ic { width: 26px; height: 26px; } #menu.compact button span { font-size: 9.5px; letter-spacing: -.4px; }

#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: 44px; height: 44px; 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; }
/* The same states as a mark in the corner, for those who do not tell the colours apart:
   ↔ too far (top right), ✖ not enough mana, rage or energy (top left). */
.ab.oor::after, .ab.nores::before { position: absolute; top: 0; min-width: 16px; height: 15px; font: bold 12px/15px system-ui, sans-serif; color: #fff; background: #a22; text-shadow: none; pointer-events: none; }
.ab.oor::after { content: "↔"; right: 0; border-radius: 0 0 0 6px; }
.ab.nores::before { content: "✖"; left: 0; border-radius: 0 0 6px 0; background: #234a9a; }
.ab.locked::after, .ab.locked::before { content: none; }
.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; }
#dead-hint { margin: 0; max-width: 80vw; text-align: center; font-size: 14px; text-shadow: 0 1px 3px #000, 0 0 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; min-height: 44px; 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; min-width: 44px; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
#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)); }
/* Touch screens: a panel leaves the left of the screen to the joystick, so the
   character keeps walking with the bag or the quest log open (main.js). */
@media (pointer: coarse) {
  #panel { pointer-events: none; justify-items: end; padding-left: calc(150px + var(--sal)); background: linear-gradient(90deg, #0000 0, #0000 150px, #0007 220px); }
  #panel-box { pointer-events: auto; }
}
#panel.lobby { z-index: 60; } /* the admin panel opened from the character list, above #login */
#panel-box { width: min(720px, 100%); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); min-height: 0; 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; gap: 10px; padding: 0 0 0 14px; border-bottom: 2px solid var(--edge); color: var(--gold); font-size: 17px; letter-spacing: 1px; }
#panel-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
#panel-hint { flex: 1 1 0; min-width: 0; font-size: 13px; letter-spacing: 0; color: #fff; text-align: right; line-height: 1.15; }
/* 44 px to touch; the transparent border keeps the red square at 34 px. */
#panel-close { background: #6a1a12; background-clip: padding-box; border: 5px solid transparent; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--gold2); width: 46px; height: 44px; flex: none; font-size: 15px; padding: 0; }
#panel-body { padding: 10px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; flex: 1 1 auto; -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; min-height: 44px; }
.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; }
/* As many 44 px cells as fit: the whole bag shows without scrolling on a phone. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.bagcols > :first-child { flex: 0 0 300px; } .baglegend { margin: 0 0 6px !important; }
.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.rb5 { border-color: #ff8a1e; box-shadow: 0 0 6px #ff8a1e88; }
.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: 11px; letter-spacing: -.3px; 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; min-height: 44px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 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; min-height: 44px; 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: the field is above the messages, out of reach of the on-screen keyboard. */
#chat-hist { height: calc(100vh - 196px); min-height: 80px; overflow-y: auto; touch-action: pan-y; background: #0005; border-radius: 6px; padding: 6px; font: 13px/1.35 system-ui, sans-serif; margin-top: 8px; user-select: text; -webkit-user-select: text; }
#chat-row { scroll-margin: 60px; } #chat-tabs .dot { color: #ff6a5a; }
/* Map: a square as tall as the panel on the left, the legend on the right. */
#panel[data-p=map] #panel-body { display: flex; gap: 12px; align-items: flex-start; }
#bigmap { --map: min(calc(100vh - 90px), 58vw, 430px); width: var(--map); height: var(--map); flex: none; display: block; border: 2px solid var(--edge); border-radius: 6px; touch-action: none; }
#map-side { flex: 1 1 0; min-width: 0; font-size: 13px; } #map-side p.dim { margin: 6px 0 0; }
#map-legend { list-style: none; margin: 0; padding: 0; line-height: 1.5; } #map-legend span { display: inline-block; min-width: 34px; }
#map-legend i { font-style: normal; display: inline-block; width: 16px; text-align: center; font-size: 14px; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.mapbtns { display: flex; gap: 6px; margin-top: 6px; } .mapbtns .btn { flex: 1; font-size: 16px; padding: 0 6px; }
/* Options */
.orow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #0005; } .orow > :first-child { flex: 1 1 0; min-width: 0; }
.orow small { display: block; color: #b8a888; font-size: 12px; line-height: 1.25; } .orow b { color: var(--gold); } .orow .choices, .orow .obtns { flex: none; display: flex; gap: 6px; }
.orow .choices.sm button { min-width: 70px; }
.ab .kb { position: absolute; left: 50%; top: 3px; transform: translateX(-50%); z-index: 2; padding: 1px 4px; border-radius: 6px; background: #000b; font: bold 10px/1.1 system-ui, sans-serif; color: #fff1c8; white-space: nowrap; pointer-events: none; }
.ab.small .kb { top: 1px; font-size: 9px; padding: 0 3px; }
.ab .kb:empty { display: none; }
#pframe { position: relative; }
/* the key of a frame: a small badge on its top-left corner, clear of the bars and of the effect icons */
#pframe[data-kb]:not([data-kb=""])::after, .pm[data-kb]:not([data-kb=""])::after { content: attr(data-kb); position: absolute; left: -5px; top: -6px; z-index: 3; padding: 1px 3px; border-radius: 5px;
  background: #000c; border: 1px solid #ffffff30; font: bold 9px/1.1 system-ui, sans-serif; color: #fff1c8; pointer-events: none; }
.orow.keyopts { flex-direction: column; align-items: stretch; }
.klist { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.klist li { display: flex; align-items: center; gap: 6px; }
.klist .kn { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; } .klist .kn small { display: block; color: #e0a060; }
.klist .kk { min-width: 110px; } .klist .kx { width: 34px; flex: none; }
.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); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; 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; }
#tip.wide { width: min(560px, 96vw); }
#tip .tipcols { display: flex; flex-wrap: wrap; gap: 10px; }
#tip .tipcol { flex: 1 1 220px; min-width: 0; }
#tip .tipcol.worn { padding-left: 10px; border-left: 1px solid #ffffff22; opacity: .92; }
#tip .tipworn { font: bold 11px system-ui, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: #b8a888; margin-bottom: 2px; }
#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: 16px; justify-content: center; flex-wrap: wrap; } .cbox .btn { min-width: 120px; min-height: 48px; } .cbox p { margin: 0 0 14px; font-size: 15px; line-height: 1.35; }
/* Party invitation: a strip under the target frame, the game goes on behind it. */
#invite { position: absolute; left: 50%; top: calc(70px + var(--sat)); transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 8px; max-width: min(460px, 60vw); background: #120e08f0; border: 2px solid var(--gold); border-radius: 10px; padding: 4px 6px 4px 12px; font-size: 13px; line-height: 1.2; box-shadow: 0 3px 10px #000; }
#invite span { flex: 1 1 auto; min-width: 0; } #invite small { color: #b8a888; white-space: nowrap; } #invite .btn { flex: none; }

/* ---------- 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; }
#get-app { display: inline-block; margin-top: 12px; padding: 13px 16px; max-width: 92vw; border: 1px solid var(--gold); border-radius: 18px; color: var(--gold); background: rgba(0,0,0,.45); font-size: 13px; text-decoration: none; }
#get-app.upd { background: #f8d24a; color: #1c150d; font-weight: bold; animation: updpulse 1.4s ease-in-out infinite; } @keyframes updpulse { 50% { box-shadow: 0 0 14px #f8d24a; } }
#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: #0004; border: 1px solid var(--edge); border-radius: 8px; font-size: 17px; opacity: .85; padding: 0 6px; min-width: 44px; min-height: 44px; flex: none; }
#chars-form { width: min(430px, 92vw); }
#srv-pick { margin: -2px 0 8px; font-size: 13px; color: #c9b98f; }
#srv-pick a { color: var(--gold, #f8d24a); cursor: pointer; text-decoration: underline; }
#hub-login { margin-top: 10px; }
#btn-signout { color: #d9a8ff; text-decoration: underline; display: inline-block; padding: 14px 6px; margin: -10px 0; } #conn { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 12px; color: #8a7a5a; }
#ver { position: absolute; bottom: 6px; right: 10px; font-size: 12px; color: #a89878; }
.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; }
#rotate p.dim { font-size: 13px; opacity: .7; max-width: 300px; margin: 8px auto; }
#rotate .rot-btns { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 18px; }
#rotate .rot-btns .btn { font-size: 15px; min-width: 220px; }
@media (orientation: portrait) and (max-width: 700px) { #rotate { display: grid; } }
html.rot-skip #rotate { display: none !important; }
@media (max-height: 380px) {
  #minimap { width: 86px; height: 86px; } .ab { width: 50px; height: 50px; } .ab.big { width: 60px; height: 60px; } .ab.small { width: 44px; height: 44px; }
  #toasts div:nth-last-child(n+4) { display: none; } /* three toasts at most on a short screen */
}

/* ---------- beginner help ---------- */
/* A strip above the menu, between the joystick and the spells: the target frame,
   the zone banner, toasts and names above heads stay free. The cast bar and the
   interact button move up by its height (--tuto-h, set by tutorial.js). */
#tuto { position: absolute; left: calc(158px + var(--sal)); right: calc(306px + var(--sar)); bottom: calc(64px + var(--sab)); max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: 4px;
  background: #120e08ee; border: 2px solid var(--gold); border-radius: 10px; padding: 3px 0 3px 9px; font-size: 12.5px; line-height: 1.22; box-shadow: 0 0 12px #f8d24a44, 0 3px 8px #000; }
#tuto p { margin: 0; flex: 1 1 auto; min-width: 0; } #tuto-step { font: bold 11px system-ui, sans-serif; color: var(--gold); margin-right: 2px; }
#tuto-dir { color: var(--gold); font-family: system-ui, sans-serif; white-space: nowrap; font-weight: bold; } #tuto-dir i { display: inline-block; font-style: normal; width: 14px; text-align: center; }
#tuto-skip { flex: none; align-self: stretch; background: none; border: none; border-left: 1px solid var(--edge); color: #d9c8a0; font-size: 12px; text-decoration: underline; min-width: 48px; min-height: 44px; padding: 0 4px; }
#hud.tuto-on #castbar { bottom: calc(72px + var(--tuto-h, 50px) + var(--sab)); }
#hud.tuto-on #interact { bottom: max(calc(142px + var(--sab)), calc(96px + var(--tuto-h, 50px) + var(--sab))); }
.hl { animation: hl 0.9s infinite !important; z-index: 3; }
@keyframes hl { 0%, 100% { box-shadow: 0 0 0 2px #f8d24a, 0 0 6px #f8d24a; } 50% { box-shadow: 0 0 0 4px #f8d24a, 0 0 26px 6px #f8d24a; } }
.ab .lk { background: #000b; padding: 0; white-space: nowrap; overflow: hidden; font-size: 11px; line-height: 13px; letter-spacing: -.4px; color: #f3ead6; pointer-events: none; }
.ab.locked .lk { color: #bbb; }
/* transparent map over the game (ui.js setOverlay): touches go through */
#mapov { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(78vh, 62vw); aspect-ratio: 1; z-index: 5; pointer-events: none; }
#mapov canvas { width: 100%; height: 100%; opacity: .62; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 71%); mask-image: radial-gradient(circle, #000 62%, transparent 71%); }
#mapov .mapov-btns { position: absolute; right: 4%; top: 4%; display: flex; gap: 4px; pointer-events: auto; }
#mapov .mapov-btns button { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--edge); background: #1c150dcc; color: #fff; font-size: 18px; line-height: 1; padding: 0; }
.darrow { display: inline-block; width: 1.05em; height: 1.3em; vertical-align: -0.3em; color: var(--gold); filter: drop-shadow(0 1px 1px #000); }
#tracker .qd { color: #ffe9a0; font-family: system-ui, sans-serif; } #tracker .qd .nw { white-space: nowrap; } /* two clean lines in 170 px */ #tracker .qd i { display: inline-block; font-style: normal; color: var(--gold); width: 12px; text-align: center; }
#tip .tipadv { color: var(--gold); margin-top: 6px; font-style: italic; } #tip .amt { color: #fff; font-family: system-ui, sans-serif; margin-top: 4px; }
.spell { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid #0005; } .spell .slot { width: 44px; height: 44px; flex: none; } .spell .tx { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
.spell .adv { color: var(--gold); font-style: italic; } .resinfo { background: #0004; border-radius: 6px; padding: 6px 9px; margin-bottom: 6px; font-size: 13px; line-height: 1.35; }

/* character editor */
#login.editing { gap: 2vw; align-items: stretch; } #login.editing .logo { display: none; }
#preview-box { flex: 1 1 0; min-width: 0; max-width: 420px; display: flex; flex-direction: column; justify-content: center; }
#preview { width: 100%; flex: 1 1 0; min-height: 0; touch-action: none; display: block; }
#login.editing #create-form { width: min(430px, 58vw); max-height: 100%; align-self: center; }
#cr-scroll { overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
#cr-who { display: flex; flex-direction: column; gap: 6px; } #cr-who.hidden { display: none; }
#create-form h4 { margin: 4px 0 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #b8a888; font-weight: normal; }
#create-form .choices { flex-wrap: wrap; } #cr-classes button { flex: 1 1 18%; padding: 5px 1px; font-size: 12px; min-height: 48px; } #cr-races button { flex: 1 1 18%; padding: 5px 1px; font-size: 12px; min-height: 48px; }
#create-form .choices button span { font-size: 19px; line-height: 1.15; } #create-msg:empty { display: none; } #create-form { gap: 6px; padding: 10px 14px; }
.choices.sm button { flex: 1 1 auto; padding: 6px 8px; font-size: 13px; min-height: 44px; min-width: 44px; }
.lrow { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .lrow label { flex: 0 0 76px; font-size: 13px; color: #d9c8a0; } .lrow > :last-child { flex: 1; min-width: 0; }
.lrow input[type=range] { accent-color: var(--gold); height: 44px; margin: 0; }
/* 44 px to touch; the transparent border keeps the colour disc at 34 px. */
.swatches { display: flex; gap: 0; flex-wrap: wrap; } .swatches button { width: 44px; height: 44px; border-radius: 50%; border: 5px solid transparent; background-clip: padding-box !important; box-shadow: inset 0 0 0 2px #0009; padding: 0; } .swatches button.sel { box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 5px #000; }
#cr-tabs { margin: 0; } #cr-tabs.hidden, #cr-title.hidden, #cr-look.hidden { display: none; }
#cr-more { text-align: center; font-size: 12px; color: var(--gold); margin: -4px 0; pointer-events: none; }
@media (orientation: portrait) { #login.editing { flex-direction: column; } #preview-box { max-width: none; flex: 0 0 34vh; } #login.editing #create-form { width: min(430px, 94vw); flex: 1 1 0; min-height: 0; } }

/* ---------- friends, whispers, admin panel, bag comparison (social.js) ---------- */
/* Player target: the buttons hang under the frame, side by side, each 44 px high. */
#t-btns { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; display: flex; justify-content: center; gap: 8px; pointer-events: none; } #t-btns .mini { white-space: nowrap; pointer-events: auto; box-shadow: 0 2px 5px #000; }
#toasts .friend { color: #9ad0ff; border-color: #4a80b8; font-size: 13px; } #toasts .admin { color: #ffb86a; border-color: #b8742a; font-size: 13px; }
.ch-w { color: #e7a0ff; } .ch-w b { color: #f3c8ff; }
.frow { flex-wrap: wrap; padding: 6px 0; } .frow .nm { flex: 1 1 150px; line-height: 1.35; } .frow .nm small { color: #b8a888; } .frow.off .nm { opacity: .65; }
.frow .dot { font-size: 10px; vertical-align: middle; }
#panel-body p.dim { color: #b8a888; font-size: 12px; margin: 6px 0; } #panel-body .cmp { color: #7fe07a; } #panel-body .cmp.neg { color: #ff6a5a; }
.slot.down::before { content: "▼"; position: absolute; left: 2px; top: 0; font-size: 10px; color: #ff6a5a; }
.slot.up::before { font-size: 11px; text-shadow: 0 0 3px #000; }
#tip .verdict { margin-top: 6px; font: bold 13px system-ui, sans-serif; color: #d9c8a0; } #tip .verdict.up { color: #5fe86a; } #tip .verdict.down { color: #ff6a5a; }
.pend { background: #5a140c88; border: 1px solid #ff6a5a; border-radius: 6px; padding: 5px 8px; margin: 6px 0 0; font-size: 12px; color: #ffd0c8; }
.adm-msg { min-height: 18px; color: #7fe07a; font: 13px system-ui, sans-serif; margin-bottom: 4px; } .adm-msg.bad { color: #ff6a5a; }
.adm-p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; width: 100%; text-align: left; background: #0004; border: 1px solid var(--edge); border-radius: 6px; padding: 8px 10px; margin-bottom: 4px; font-size: 13px; min-height: 44px; }
.adm-p.sel { border-color: var(--gold); background: #f8d24a22; } .adm-p small { flex: 1 0 100%; color: #a89878; font: 11px system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; }
#adm-list { max-height: 34vh; overflow-y: auto; touch-action: pan-y; }
.adm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #0005; } .adm-row > label:first-child { flex: 0 0 76px; font-size: 13px; color: #d9c8a0; }
.adm-row input[type=number], .adm-row select { flex: 1 1 90px; min-width: 0; font: 16px system-ui, sans-serif; padding: 7px 8px; border-radius: 6px; border: 2px solid var(--edge); background: #120e08; color: #fff; height: 38px; }
.adm-row .chk { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #d9c8a0; min-height: 36px; } .adm-row .chk input { width: 20px; height: 20px; accent-color: var(--gold); }
/* admin: characters, forge, gifts (admin.js) */
.adm-row input[type=text] { flex: 1 1 140px; min-width: 0; min-height: 38px; height: 38px; padding: 7px 8px; }
.adm-row > label:not(:first-child) { font-size: 12px; color: #d9c8a0; }
.admx-tbl { max-height: 52vh; overflow: auto; touch-action: pan-y; } .admx-tbl > .dim { font-size: 12px; margin-bottom: 4px; }
.admx-tbl table { width: 100%; border-collapse: collapse; font: 13px system-ui, sans-serif; table-layout: fixed; }
.admx-tbl th { position: sticky; top: 0; background: #1d160c; color: #d9c8a0; text-align: left; padding: 8px 4px; cursor: pointer; white-space: nowrap; font-weight: 600; } .admx-tbl th.sel { color: var(--gold); }
.admx-tbl th:nth-child(1) { width: 34%; } .admx-tbl th:nth-child(2) { width: 12%; } .admx-tbl th:nth-child(3) { width: 12%; } .admx-tbl th:nth-child(4) { width: 22%; }
.admx-tbl td { padding: 9px 4px; border-bottom: 1px solid #0006; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admx-tbl tr:not(:first-child) { cursor: pointer; } .admx-tbl tr:not(:first-child):active { background: #f8d24a22; }
.admx-tbl .dot { display: inline-block; width: 12px; color: #7fe07a; font-size: 10px; } .admx-tbl tr.on td:first-child { color: #fff; }
.admx-name { margin: 8px 0 4px; } .admx-name small { font: 12px system-ui, sans-serif; } .admx-name .ok { color: #7fe07a; }
.admx-sec { border: 1px solid var(--edge); border-radius: 6px; margin: 6px 0; background: #0003; } .admx-sec > summary { padding: 10px; min-height: 44px; box-sizing: border-box; cursor: pointer; color: #d9c8a0; font-size: 14px; } .admx-sec > :not(summary) { margin: 0 8px 8px; }
.admx-kv > div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid #0004; font-size: 13px; } .admx-kv span { color: #a89878; } .admx-kv b { text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.admx-eq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .admx-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .admx-slot small { font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
.admx-bag { display: flex; flex-wrap: wrap; gap: 4px; } .admx .slot { position: relative; } .admx .slot .cnt { position: absolute; right: 2px; bottom: 0; font-size: 11px; color: #fff; text-shadow: 0 0 2px #000; }
.admx-li { padding: 5px 0; border-bottom: 1px solid #0004; font-size: 13px; } .admx-txt { font-size: 13px; line-height: 1.5; }
.admx-bar { display: grid; grid-template-columns: 1fr 90px 44px; align-items: center; gap: 6px; font-size: 13px; padding: 3px 0; } .admx-bar i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--gold) var(--p), #0006 var(--p)); } .admx-bar b { text-align: right; font-weight: 500; }
.admx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px 0; }
.admx-stat { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #d9c8a0; } .admx-stat input { font: 16px system-ui, sans-serif; padding: 7px 8px; border-radius: 6px; border: 2px solid var(--edge); background: #120e08; color: #fff; height: 38px; min-width: 0; width: 100%; box-sizing: border-box; }
.admx-fxd { font-size: 12px; padding: 2px 0 4px 82px; } .admx-acts { justify-content: flex-end; } .admx-pick { flex: 1 1 100% !important; }
.admx-trow { flex-wrap: wrap; } .admx-trow .nm { flex: 1 1 100%; }
@media (max-width: 480px) { .admx-fxd { padding-left: 0; } }
@media (max-height: 420px) { #tracker .qo.ok { display: none; } } /* short screen: only what is left to do */
/* admin: quest trees (admin.js) */
.admq-bar { flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .admq-bar input { flex: 1 1 160px; min-width: 0; } .admq-bar select { flex: 1 1 140px; min-width: 0; font: 14px system-ui, sans-serif; padding: 6px; border-radius: 6px; border: 2px solid var(--edge); background: #120e08; color: #fff; }
.admq-chk { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #d9c8a0; }
.admq { font: 13px system-ui, sans-serif; } .admq > .dim { font-size: 12px; margin-bottom: 4px; }
.admq-zone > summary small { margin-left: 6px; }
.admq-tree { list-style: none; margin: 0; padding: 0 0 0 14px; } .admx-sec > .admq-tree { padding-left: 4px; margin: 0 8px 8px; }
.admq-tree .admq-tree { border-left: 1px solid #f8d24a44; margin-left: 10px; padding-left: 10px; }
.admq-tree .admq-tree > li { position: relative; } .admq-tree .admq-tree > li::before { content: ''; position: absolute; left: -10px; top: 15px; width: 8px; border-top: 1px solid #f8d24a44; }
.admq-q { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 5px 4px; min-height: 30px; border-radius: 5px; cursor: pointer; }
.admq-q:active, .admq-q.open { background: #f8d24a18; } .admq-q.hit .nm { color: var(--gold); }
.admq-q .lv { min-width: 22px; text-align: center; font-size: 11px; padding: 1px 3px; border-radius: 4px; background: #0006; color: #d9c8a0; }
.admq-q .nm { color: #f2e6c8; } .admq-q .ob { font-size: 11px; letter-spacing: 1px; }
.admq-q i { font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 8px; background: #ffffff14; color: #c8b890; } .admq-q i.zn { background: #4a7fd033; color: #a8c8f0; }
.admq-q .st { margin-left: auto; font-size: 11px; color: #9fd29a; white-space: nowrap; }
.admq-d { margin: 2px 0 6px 28px; padding: 6px 8px; border-left: 2px solid var(--gold); background: #0003; border-radius: 0 6px 6px 0; } .admq-d code { font-size: 11px; color: #e8c86a; }
.admq-h { margin: 8px 0 2px; color: #d9c8a0; font-weight: 600; }
@media (max-width: 480px) { .admq-d { margin-left: 8px; } }
/* a choice with more than two answers (ui.choose) */
.cbox .cmore { flex-direction: column; align-items: stretch; gap: 8px; } .cbox .cmore .btn { min-height: 44px; }
/* map: find a character, the guide (mapfind.js) */
#map-find h5 { margin: 0 0 4px; } #map-find .fchips { display: flex; flex-wrap: wrap; gap: 4px; } #map-find .fchips .btn { min-height: 34px; padding: 0 8px; } #map-find .fchips small { opacity: .7; margin-left: 2px; }
#map-find .fguide { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; color: #9fe8ff; } #map-find .fguide .btn { margin-left: auto; min-height: 32px; }
#map-find .flist { list-style: none; margin: 6px 0 0; padding: 0; max-height: 34vh; overflow: auto; touch-action: pan-y; }
#map-find .flist li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #0005; } #map-find .flist li > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#map-find .flist small { color: #a89878; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #map-find .flist .btn { min-height: 34px; }
#map-leg { margin-top: 8px; } #map-leg summary { cursor: pointer; color: #d9c8a0; min-height: 30px; line-height: 30px; }
#tracker .qguide { display: flex; align-items: center; justify-content: flex-end; gap: 3px; color: #9fe8ff; font-family: system-ui, sans-serif; white-space: nowrap; } #tracker .qguide[hidden] { display: none; }
#tracker .qguide b { color: #bff0ff; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #tracker .qguide .gx { flex: none; padding: 2px 6px; color: #ffb0a0; font-weight: bold; }

/* the arrow line of a quest: a tap walks there (autonav.js) */
#tracker .qd { cursor: pointer; } #tracker .qd.go { color: #9fe8ff; }
/* quest log: filter by zone */
.qzones { flex-wrap: wrap; margin-bottom: 8px; } .qzones button { flex: 0 1 auto; } .qzones small { opacity: .7; margin-left: 3px; }
/* Métiers tab of the character panel (prof.js) */
.profbox { background: #0004; border-radius: 6px; padding: 6px 9px; margin-bottom: 8px; } .profbox h5 { margin: 2px 0 4px; }
.profbar { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0; } .profbar .pn { width: 104px; flex: none; color: var(--gold); }
.profbar .pb { flex: 1; height: 10px; background: #0008; border: 1px solid var(--edge); border-radius: 5px; overflow: hidden; } .profbar .pb i { display: block; height: 100%; background: linear-gradient(#e8c060, #a8782a); }
.profbar b { width: 56px; text-align: right; flex: none; }
.proftiers { font-size: 12px; margin: 0 0 6px 112px; line-height: 1.4; } .proflegend { font-size: 12px; margin: 4px 0 0; } .profbuf { font-size: 13px; padding: 2px 0; }
.profrec { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #0005; } .profrec .slot { width: 44px; height: 44px; flex: none; position: relative; }
.profrec .tx { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; } .profrec .mats .ok { color: #9fe09a; } .profrec .mats .bad { color: #e08a7a; }
.profrec .acts { display: flex; flex-direction: column; gap: 4px; flex: none; } .profrec.lock { opacity: .6; }
@media (max-width: 520px) { .proftiers { margin-left: 0; } .profbar .pn { width: 90px; } }