/* Valdris UI skin: bevelled gold-and-dark frames, drawn icons, parchment.
   Loaded after style.css and only overrides it; the layout rules stay there.
   Everything is drawn with gradients and two small inline SVG frames (9-slice
   border-image), so nothing is downloaded and nothing needs a filter. */
:root {
  /* Ornate frame, 10 px slices: dark line, gold bevel, dark line, corner brackets with a stud. */
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0b0'/%3E%3Cstop offset='.5' stop-color='%23c9962c'/%3E%3Cstop offset='1' stop-color='%235a3a0c'/%3E%3C/linearGradient%3E%3Cg id='c'%3E%3Cpath d='M.8 10 V4 Q.8 .8 4 .8 H10 L7.4 4.2 H5.6 Q4.2 4.2 4.2 5.6 V7.4Z' fill='%23e8b93e' stroke='%232a1a06' stroke-width='.8'/%3E%3Ccircle cx='4.7' cy='4.7' r='1.7' fill='%23fff6c8' stroke='%235a3a0c' stroke-width='.6'/%3E%3C/g%3E%3C/defs%3E%3Crect x='.5' y='.5' width='31' height='31' rx='4' fill='none' stroke='%23070503'/%3E%3Crect x='2' y='2' width='28' height='28' rx='3' fill='none' stroke='url(%23g)' stroke-width='2'/%3E%3Crect x='3.5' y='3.5' width='25' height='25' rx='2' fill='none' stroke='%23000' stroke-opacity='.85'/%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='translate(32 0) scale(-1 1)'/%3E%3Cuse href='%23c' transform='translate(0 32) scale(1 -1)'/%3E%3Cuse href='%23c' transform='translate(32 32) scale(-1 -1)'/%3E%3C/svg%3E");
  /* Plain bevel, 4 px slices: buttons, tabs, small plates. */
  --bevel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0b0'/%3E%3Cstop offset='.5' stop-color='%23c9962c'/%3E%3Cstop offset='1' stop-color='%235a3a0c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='.5' y='.5' width='15' height='15' rx='3' fill='none' stroke='%23070503'/%3E%3Crect x='1.75' y='1.75' width='12.5' height='12.5' rx='2.2' fill='none' stroke='url(%23g)' stroke-width='1.5'/%3E%3Crect x='3' y='3' width='10' height='10' rx='1.5' fill='none' stroke='%23000' stroke-opacity='.6'/%3E%3C/svg%3E");
  /* The same bevel in dull bronze, for what is not selected. */
  --bevel-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a88a58'/%3E%3Cstop offset='.5' stop-color='%236b5230'/%3E%3Cstop offset='1' stop-color='%232e2212'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='.5' y='.5' width='15' height='15' rx='3' fill='none' stroke='%23070503'/%3E%3Crect x='1.75' y='1.75' width='12.5' height='12.5' rx='2.2' fill='none' stroke='url(%23g)' stroke-width='1.5'/%3E%3Crect x='3' y='3' width='10' height='10' rx='1.5' fill='none' stroke='%23000' stroke-opacity='.6'/%3E%3C/svg%3E");
  --wood: linear-gradient(#3b2c1b, #241a10 60%, #1a120a);
  --ui-gloss: linear-gradient(#ffffff3d, #ffffff00 46%, #00000038);
}

/* ---------- icons ---------- */
.ic { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.ic.inl { width: 1.4em; height: 1.4em; display: inline-block; vertical-align: -0.32em; margin: 0 .12em; }
.ic.coin { width: .95em; height: .95em; vertical-align: -0.1em; margin: 0 .22em 0 .1em; }
.gold .ic.coin:not(:first-child) { margin-left: .4em; }
.fxi { position: relative; display: inline-block; width: 18px; height: 18px; margin-right: 2px; vertical-align: top; font-size: 14px; line-height: 18px; text-align: center; }
.fxi b { position: absolute; right: -2px; bottom: -3px; font: bold 10px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.buffs { font-size: 0; padding: 2px 0 0 4px; min-height: 0; } .lbl .fx { font-size: 0; margin-top: 1px; } .lbl .fx .fxi { width: 15px; height: 15px; }
.lbl .mk { font-size: 0; height: 30px; } .lbl .mk .ic { width: 30px; height: 30px; margin: 0 auto; } .lbl.obj .mk { height: 18px; } .lbl.obj .mk .ic { width: 18px; height: 18px; }
/* Far characters keep their quest mark and lose their name (see main.js). */
.lbl.far .nm, .lbl.far .ti { display: none; } .lbl.npc .nm { font-size: 11.5px; } .lbl.npc .ti { font-size: 10px; opacity: .8; }

/* ---------- frames ---------- */
.uframe { background: linear-gradient(#3a2c1cf0, #1a130bf0); border: 10px solid transparent; border-image: var(--frame) 10 / 10px stretch; border-radius: 7px; padding: 0 2px 0 0; margin: 0; box-shadow: 0 2px 5px #0009; gap: 5px; width: 190px; position: relative; }
#pframe { margin: 0; }
.portrait { width: 46px; height: 46px; margin: -5px 0 -5px -5px; border: 2px solid #d9a93a; border-color: #ffe9a0 #b8862a #6a4a12 #e2b84a; background: radial-gradient(circle at 50% 35%, #7a6648, #2a1e12 75%); box-shadow: 0 0 0 1.5px #0b0704, inset 0 0 0 1px #000a, inset 0 -8px 10px #0007; overflow: hidden; font-size: 0; position: relative; }
.portrait img { width: 100%; height: 100%; display: block; object-fit: cover; }
.portrait img.sil { width: 112%; height: 112%; margin: -6%; }
#tframe.hostile .portrait { background: radial-gradient(circle at 50% 35%, #8a4a3a, #2a100c 75%); } #tframe.player .portrait { background: radial-gradient(circle at 50% 35%, #4a6a8a, #101a2a 75%); }
#tframe.elite .portrait, #tframe.boss .portrait { border-color: #fff6c8 #ffd24a #b8862a #ffe27a; box-shadow: 0 0 0 1.5px #0b0704, 0 0 0 3.5px #c9962c, 0 0 0 4.5px #0b0704, inset 0 -8px 10px #0007; }
/* Level: a round badge on the rim of the portrait. */
.uname .ulvl { position: absolute; left: 22px; bottom: -8px; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 10px; background: radial-gradient(circle at 40% 30%, #4a3a26, #120c06); border: 1.5px solid #d9a93a; box-shadow: 0 0 0 1px #000; font: bold 11px/17px system-ui, sans-serif; color: #ffe9a8; text-align: center; }
.uname .ulvl:empty { display: none; }
.uname { font-size: 12.5px; text-shadow: 0 1px 1px #000; line-height: 1.2; } .uname span:first-child { overflow: hidden; text-overflow: ellipsis; }
.bar { height: 14px; background: #0c0805; border: 1px solid #000; border-radius: 2px; box-shadow: 0 0 0 1px #6b523088; margin-top: 3px; }
.bar::after { content: ""; position: absolute; inset: 0; background: var(--ui-gloss); pointer-events: none; }
.bar span { z-index: 1; font-weight: 600; font-size: 10.5px; line-height: 12px; text-shadow: 0 1px 1px #000, 0 0 2px #000; }
.bar.hp i { background: linear-gradient(#3fd04a, #1c8a26); } .bar.res i { background: linear-gradient(#4a90ff, #1b4cc0); } .bar.res.rage i { background: linear-gradient(#f0483a, #a01a12); } .bar.res.energy i { background: linear-gradient(#ffe04a, #c09a10); }
.bar.res.energy span { color: #fff; }
.bar.cast i { background: linear-gradient(#ffe27a, #d99a1a); box-shadow: 2px 0 6px #fff8; }
.pm { width: 150px; min-height: 44px; background: linear-gradient(#2e2216e6, #1a130be6); border: 4px solid transparent; border-image: var(--bevel-dim) 4 / 4px stretch; border-radius: 4px; padding: 1px 4px 2px; }
.pm.sel { border-image-source: var(--bevel); } .pm .bar { margin-top: 2px; } .pm b { color: inherit; } .pm .ic.inl { width: 1.25em; height: 1.25em; }

/* Target frame: next to the player frame, so the top centre of the picture stays free. */
#tframe { left: calc(206px + var(--sal)); transform: none; width: 214px; padding: 0 0 0 0; }
#tframe .ubody { padding-right: 2px; } #t-info { font-size: 11.5px; margin-top: 1px; }
#t-clear { min-width: 30px; width: 30px; margin: -6px -6px -6px 2px; border: none; border-left: 1px solid #000; border-radius: 0 3px 3px 0; background: linear-gradient(#7a2218, #45100a); box-shadow: inset 1px 0 0 #ffb09044; color: #ffd9c9; min-width: 34px; }
.mini { background: linear-gradient(#5a4326, #33240f); border: 4px solid transparent; border-image: var(--bevel) 4 / 4px stretch; border-radius: 4px; padding: 0 9px; color: #ffe9a8; text-shadow: 0 1px 1px #000; }
#t-clear.mini { border: none; border-left: 1px solid #000; border-image: none; padding: 0; }
#t-rez { background: linear-gradient(#3a7a34, #1c4a1a) !important; }
#invite { top: calc(58px + var(--sat)); max-height: 52px; background: linear-gradient(#2e2216f5, #17100af5); border: 4px solid transparent; border-image: var(--bevel) 4 / 4px stretch; border-radius: 5px; max-width: min(430px, 54vw); }

/* ---------- minimap ---------- */
#minimap-wrap { padding: 4px 4px 0; }
#minimap { border: none; box-shadow: none; background: #1c2a1c; }
/* Gold ring with a bevel and four studs, over the canvas. */
#minimap-wrap::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle closest-side, transparent calc(100% - 9px), #0b0704 calc(100% - 8.5px), #6a4a12 calc(100% - 7px), #f6d870 calc(100% - 5px), #c9962c calc(100% - 3px), #5a3a0c calc(100% - 1.5px), #0b0704 calc(100% - 1px), transparent 100%);
  box-shadow: inset 0 0 0 9px transparent, inset 0 0 14px 9px #0009; }
/* North mark. */
#minimap-wrap::after { content: "N"; position: absolute; left: 50%; top: -3px; width: 17px; height: 17px; margin-left: -8.5px; border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 40% 30%, #8a2a1a, #45100a); border: 1.5px solid #f0c85a; box-shadow: 0 0 0 1px #0b0704; font: bold 10px/14px Georgia, serif; color: #ffe9a8; text-align: center; }
#zonename { z-index: 3; margin: -8px 0 0; background: linear-gradient(#3a2c1c, #1a120a); border: 4px solid transparent; border-image: var(--bevel) 4 / 4px stretch; border-radius: 4px; padding: 0 3px 1px; color: #ffe27a; text-shadow: 0 1px 1px #000; letter-spacing: .3px; }
#tracker { background: linear-gradient(90deg, #0000, #0000006b 30%); border-radius: 4px; padding: 3px 7px; } #tracker:empty { padding: 0; }
#toasts div { background: linear-gradient(#2e2216ee, #17100aee); border: 1px solid #000; box-shadow: inset 0 0 0 1px #6b5230; border-radius: 4px; padding: 3px 9px; }
#toasts .quest { box-shadow: inset 0 0 0 1px var(--gold2); } #toasts .questdone { box-shadow: inset 0 0 0 1px #7fe07a; } #toasts .friend { box-shadow: inset 0 0 0 1px #4a80b8; } #toasts .admin { box-shadow: inset 0 0 0 1px #b8742a; }
#toasts div:nth-last-child(n+5) { display: none; } /* four at most: a fifth would reach the buttons */

/* ---------- action buttons, menu, joystick ---------- */
/* Round icons on two arcs around the attack button (positions set by UI.layoutActions). */
#actions { width: 250px; height: 200px; }
.ab { border: none; background: none; border-radius: 50%; box-shadow: 0 2px 4px #000a; font-size: 22px; transition: opacity .25s; }
.ab.big { border-radius: 50%; border: none; } .ab.small { border-radius: 50%; }
.ab .ic { position: absolute; inset: 0; }
.ab:active, .ab.press { transform: scale(.92); filter: brightness(1.35); }
.ab.locked { filter: grayscale(1) brightness(.55); opacity: .55; } .ab.nores { filter: saturate(.25) brightness(.72); }
.ab.oor { box-shadow: 0 0 0 2px #c22a22, 0 2px 4px #000a; }
.ab.oor::after, .ab.nores::before { top: 2px; min-width: 15px; height: 14px; font: bold 11px/14px system-ui, sans-serif; z-index: 2; }
.ab.oor::after { right: auto; left: 50%; border-radius: 0 7px 7px 0; } .ab.nores::before { left: auto; right: 50%; border-radius: 7px 0 0 7px; }
.ab.on { box-shadow: 0 0 0 2px #ff5a3a, 0 0 12px 2px #ff4a3a; }
.ab .cdm { background: #000000b8; z-index: 1; } .ab .cdt { z-index: 2; } .ab .cnt { z-index: 2; right: 50%; transform: translateX(50%); bottom: 2px; font-weight: bold; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 1px #000; }
.ab .lk { z-index: 2; bottom: 2px; left: 4px; right: 4px; border-radius: 0 0 20px 20px; font-size: 9.5px; line-height: 12px; letter-spacing: -.3px; background: #000000a8; }
/* Out of combat the controls step back; a touch or a fight brings them forward. */
#hud:not(.combat) .ab:not(.locked):not(.hl) { opacity: .8; } #hud:not(.combat) .ab.small { opacity: .7; }
#menu { left: calc(136px + var(--sal)); right: calc(258px + var(--sar)); gap: 3px; bottom: calc(10px + var(--sab)); }
#menu button { width: 44px; height: 46px; border: none; background: none; padding: 0; opacity: .8; transition: opacity .2s; }
#menu button:active, #menu button.badge, #menu button.hl { opacity: 1; }
#menu button .ic { width: 32px; height: 32px; margin: 0 auto; }
#menu button span { font: 600 10.5px/1.25 system-ui, sans-serif; color: #f3e6c4; text-shadow: 0 1px 2px #000, 0 0 3px #000, 0 0 3px #000; letter-spacing: -.2px; }
#menu button.badge::after { right: 2px; top: -2px; width: 11px; height: 11px; background: radial-gradient(circle at 35% 30%, #ff8a7a, #d81a12); border: 1px solid #000; box-shadow: 0 0 5px #ff4a3a; }
#joy { width: 104px; height: 104px; left: calc(28px + var(--sal)); bottom: calc(30px + var(--sab)); border: 2px solid #f8e6b05c; background: radial-gradient(#fff1, #0002 70%); opacity: .3; transition: opacity .35s; }
#joy.on { opacity: .9; width: 120px; height: 120px; border-color: #f8d24acc; transition: none; }
#joy.hl { opacity: .9; }
#joy-knob { width: 46px; height: 46px; margin: -23px; background: radial-gradient(circle at 40% 32%, #fff6d8, #c9a85a 70%, #8a6a2a); border: 1px solid #3a2408; box-shadow: 0 2px 5px #000a; }
#joy.on #joy-knob { width: 52px; height: 52px; margin: -26px; }

/* Interact prompt: left of the centre and low, clear of the hero, at most two lines. */
#interact { left: calc(140px + var(--sal)); transform: none; bottom: calc(64px + var(--sab)); max-width: min(250px, 31vw); white-space: normal; text-align: left; overflow: hidden; display: flex; align-items: center; gap: 4px;
  background: linear-gradient(#6a4f22f2, #33240ff2); border: 4px solid transparent; border-image: var(--bevel) 4 / 4px stretch; border-radius: 5px; padding: 3px 10px 3px 5px; min-height: 44px; font-size: 14px; line-height: 1.15; color: #fff3cf; text-shadow: 0 1px 1px #000;
  box-shadow: 0 0 10px #f8d24a66, 0 2px 5px #000; }
#interact .ic.inl { width: 28px; height: 28px; flex: none; margin: 0; } #interact span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes pulse { 50% { box-shadow: 0 0 16px #f8d24acc, 0 2px 5px #000; } }
#castbar { bottom: calc(64px + var(--sab)); width: 190px; height: 16px; border: 1px solid #000; box-shadow: 0 0 0 1px #c9962c, 0 0 0 2px #000, 0 2px 6px #000a; border-radius: 3px; }
#castbar span { line-height: 14px; }
#tuto { left: calc(136px + var(--sal)); right: calc(262px + var(--sar)); bottom: calc(60px + var(--sab)); background: linear-gradient(#2a1f12f2, #150e07f2); border: 4px solid transparent; border-image: var(--bevel) 4 / 4px stretch; border-radius: 5px; padding: 1px 0 1px 6px; box-shadow: 0 0 10px #f8d24a44, 0 3px 6px #000; }
#hud.tuto-on #castbar { bottom: calc(68px + var(--tuto-h, 50px) + var(--sab)); }
#hud.tuto-on #interact { bottom: calc(64px + var(--tuto-h, 50px) + var(--sab)); left: calc(8px + var(--sal)); }

#xpbar { height: calc(8px + var(--sab)); background: #0c0805; border-top: 1px solid #c9962c; box-shadow: 0 -1px 0 #000; }
#xpbar i { height: 7px; top: 1px; background: linear-gradient(#c88aff, #7a34c8); box-shadow: 2px 0 5px #e0b0ff; }
#xpbar::after { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 7px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #000a calc(10% - 1px) 10%), linear-gradient(#fff3, #fff0 50%, #0004); }

/* ---------- buttons ---------- */
.btn { background: linear-gradient(#a23220, #6c180e 55%, #4c0f08); border: 4px solid transparent; border-image: var(--bevel) 4 / 4px stretch; border-radius: 5px; color: #ffe9a8; text-shadow: 0 1px 1px #000; padding: 6px 16px; box-shadow: 0 2px 4px #000a; letter-spacing: .3px; }
.btn.alt { background: linear-gradient(#54422a, #33261a 55%, #241a10); border-image-source: var(--bevel-dim); color: #f0e0b8; }
.btn.sm { padding: 3px 9px; } .btn:active { transform: translateY(1px); filter: brightness(.82); box-shadow: 0 0 2px #000; }
.btn:disabled { filter: grayscale(.9) brightness(.62); opacity: .8; } .btn .ic.inl { width: 1.3em; height: 1.3em; }
.cbox .btn { padding: 8px 16px; }

/* ---------- panels ---------- */
#panel { background: radial-gradient(ellipse at center, #0006, #000a); }
#panel-box { background: linear-gradient(#35281a, #1e160d 40%, #1a120a); border: 10px solid transparent; border-image: var(--frame) 10 / 10px stretch; border-radius: 8px; box-shadow: 0 6px 22px #000; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); }
#panel-head { margin: -5px -5px 0; padding: 0 0 0 12px; background: linear-gradient(#4a3620, #2a1e11); border-bottom: 1px solid #000; box-shadow: 0 1px 0 #c9962c88, inset 0 1px 0 #ffe9a022; font-size: 16.5px; text-shadow: 0 1px 1px #000; border-radius: 3px 3px 0 0; }
#panel-title { color: #ffd96a; letter-spacing: 1.2px; }
#panel-close { background: linear-gradient(#a23220, #5a120a); background-clip: padding-box; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #e0ae3a; border-radius: 10px; color: #ffe9a8; font-size: 14px; }
#panel-body { padding: 8px 6px 4px; }
h5 { color: #ffd96a; text-shadow: 0 1px 1px #000; border-bottom: 1px solid #6b523066; padding-bottom: 3px; }
.tabs { gap: 4px; border-bottom: 2px solid #6b5230; margin-bottom: 8px; padding: 0 2px; }
.tabs button { background: linear-gradient(#32261a, #1e160e); border: 1px solid #000; border-bottom: none; box-shadow: inset 0 0 0 1px #6b5230; border-radius: 6px 6px 0 0; color: #c9b48a; margin-top: 4px; min-height: 40px; padding: 6px; }
.tabs button.sel { margin-top: 0; min-height: 44px; background: linear-gradient(#6a4f22, #3a2a12); box-shadow: inset 0 0 0 1px #e0ae3a, inset 0 2px 0 1px #ffe9a044; border-color: #000; color: #ffe27a; text-shadow: 0 1px 1px #000; }
#cr-tabs { border-bottom: 2px solid #6b5230; }
.choices button { background: linear-gradient(#32261a, #1e160e); border: 4px solid transparent; border-image: var(--bevel-dim) 4 / 4px stretch; border-radius: 5px; color: #d9c8a0; padding: 4px 2px; }
.choices button.sel { border-image-source: var(--bevel); background: linear-gradient(#6a4f22, #3a2a12); color: #ffe27a; }
.choices button span { font-size: 0; display: block; } .choices button span .ic { width: 34px; height: 34px; margin: 0 auto 2px; }
.choices.sm button { padding: 2px 6px; }
.orow .choices, .orow .obtns { flex-wrap: wrap; justify-content: flex-end; max-width: 62%; } .orow .choices.sm button { min-width: 62px; }
.qlist button { background: linear-gradient(#2a1f14, #1c140c); border: 1px solid #000; box-shadow: inset 0 0 0 1px #6b5230; border-radius: 4px; display: flex; align-items: center; gap: 4px; }
.qlist button.sel { background: linear-gradient(#5a4320, #33240f); box-shadow: inset 0 0 0 1px #e0ae3a; }
.qlist button .m { flex: none; width: 20px; height: 22px; margin-right: 2px; text-align: center; } .qlist button .m .ic { width: 20px; height: 22px; }
.qlist button small { margin-left: auto; padding-left: 4px; white-space: nowrap; }
/* Parchment: warm paper with stains and a burnt edge. */
.parch { background: radial-gradient(ellipse at 18% 12%, #fff5d455, transparent 45%), radial-gradient(ellipse at 85% 80%, #b98f4a44, transparent 50%), radial-gradient(ellipse at 70% 15%, #c9a05a26, transparent 35%), linear-gradient(#efe1bb, #dcc898);
  border: 1px solid #5a4220; border-radius: 3px; box-shadow: inset 0 0 0 1px #fff3d088, inset 0 0 22px #8a5e2466, 0 1px 3px #000a; padding: 10px 14px; }
.parch h4 { font-size: 17px; color: #4a1a0a; border-bottom: 1px solid #8a6a3077; padding-bottom: 4px; letter-spacing: .3px; }
.parch .obj { color: #4a1a0a; } .parch .ic.inl:not(.coin) { width: 1.6em; height: 1.6em; }
/* Slots: a recessed socket when empty; the item icon brings its own border. */
.slot { background: linear-gradient(#0b0705, #1c140c); border: 1px solid #000; box-shadow: inset 0 0 0 1px #4a3a26, inset 0 3px 6px #000c; border-radius: 6px; overflow: hidden; }
.slot.has { border: none; box-shadow: none; background: none; border-radius: 7px; }
.slot.rb5 { box-shadow: 0 0 6px #ff8a1e88; } .slot.dim .ic { filter: grayscale(1) brightness(.6); }
.slot.up::before, .slot.down::before { z-index: 1; left: 3px; top: 2px; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px #000; font-size: 12px; }
.slot .cnt { z-index: 1; right: 4px; bottom: 3px; font-weight: bold; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 1px #000; }
.slot .sl { font-size: 10px; bottom: 3px; color: #8a7a5a; }
/* wear of the gear (server/wear.go) */
.slot .wearb { position: absolute; left: 4px; right: 4px; bottom: 2px; height: 3px; z-index: 1; background: #000a; border-radius: 2px; overflow: hidden; }
.slot .wearb i { display: block; height: 100%; background: #e0b040; }
.slot.broken > svg, .slot.broken > img, .slot.broken > .ic { filter: grayscale(1) brightness(.6); }
.slot.broken { box-shadow: inset 0 0 0 2px #d83a2a, inset 0 3px 6px #000c; }
.slot.broken::after { content: "✖"; position: absolute; right: 3px; top: 1px; z-index: 1; color: #ff5a4a; font: bold 12px/1 system-ui, sans-serif; text-shadow: 0 0 2px #000; }
.repairrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; padding: 6px 8px; border-radius: 6px; background: #3a1a0c88; box-shadow: inset 0 0 0 1px #c9962c55; }
.vrow { border-bottom: 1px solid #000; box-shadow: 0 1px 0 #6b523044; padding: 5px 0; } .vrow .slot { width: 44px; height: 44px; flex: none; }
.stats { background: #0004; border-radius: 4px; padding: 5px 8px; box-shadow: inset 0 0 0 1px #6b523066; }
.resinfo { box-shadow: inset 0 0 0 1px #6b523066; }
input[type=text], input:not([type]), input[type=password], .adm-row input[type=number], .adm-row select { border: 1px solid #000; box-shadow: inset 0 0 0 1px #6b5230, inset 0 2px 5px #000; background: #100b06; border-radius: 4px; }
input:focus { outline: none; box-shadow: inset 0 0 0 1px #e0ae3a, inset 0 2px 5px #000; }
#chat-hist { background: #0d0906; box-shadow: inset 0 0 0 1px #6b5230, inset 0 2px 6px #000; border-radius: 4px; }
#bigmap { border: 1px solid #000; box-shadow: 0 0 0 2px #8a6a30, 0 0 0 3px #000, 0 2px 8px #000; border-radius: 2px; margin: 3px; --map: min(calc(100vh - 100px), 56vw, 430px); }
.mapbtns .btn { padding: 0 4px; } #map-legend { line-height: 1.45; }
.adm-p { background: linear-gradient(#2a1f14, #1c140c); border: 1px solid #000; box-shadow: inset 0 0 0 1px #6b5230; border-radius: 4px; } .adm-p.sel { box-shadow: inset 0 0 0 1px #e0ae3a; background: linear-gradient(#5a4320, #33240f); }
.adm-row input[type=number], .adm-row select { height: 44px; } .adm-row .chk { min-height: 44px; padding: 0 4px; } .adm-row .chk input { width: 26px; height: 26px; }

/* ---------- tooltips, dialogs ---------- */
#tip { background: linear-gradient(#1c140cfa, #0d0906fa); border: 10px solid transparent; border-image: var(--frame) 10 / 10px stretch; border-radius: 7px; padding: 2px 4px; box-shadow: 0 6px 20px #000; }
#tip h4, .tiph { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15.5px; line-height: 1.15; text-shadow: 0 1px 1px #000; }
#tip h4 .ic, .tiph .ic { width: 40px; height: 40px; flex: none; }
#tip .acts { margin-top: 8px; padding-top: 6px; border-top: 1px solid #6b523088; }
.cbox { background: linear-gradient(#35281a, #1a120a); border: 10px solid transparent; border-image: var(--frame) 10 / 10px stretch; border-radius: 8px; padding: 8px 12px; box-shadow: 0 6px 22px #000; }
.cbox p { text-shadow: 0 1px 1px #000; }
#gdlg h4 { display: flex; align-items: center; justify-content: center; gap: 6px; } #gdlg h4 .ic.inl { width: 30px; height: 30px; }
#gdlg .modes { display: flex; gap: 6px; } #gdlg .modes button { background: linear-gradient(#32261a, #1e160e); border: 4px solid transparent; border-image: var(--bevel-dim) 4 / 4px stretch; border-radius: 5px; }
#gdlg .modes button.sel { border-image-source: var(--bevel); background: linear-gradient(#6a4f22, #3a2a12); }
#dead { background: radial-gradient(ellipse at center, #3a0a0a66, #1a0000cc); } #dead h2 { font-size: 36px; letter-spacing: 3px; color: #ff6a55; text-shadow: 0 2px 0 #3a0806, 0 0 18px #ff2a1a88; }
#banner .big { letter-spacing: 3px; color: #ffe27a; text-shadow: 0 2px 0 #5a3a0a, 0 3px 6px #000, 0 0 14px #000; } #banner .sub .ic.inl { width: 1.7em; height: 1.7em; }
#warn .ic.inl, #errors .ic.inl { width: 1.3em; height: 1.3em; }

/* ---------- login and characters ---------- */
#login { background: radial-gradient(ellipse at 50% 115%, #7a3a12 0%, #2a180c 42%, #0b0705 78%), #0b0705; }
#login::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 118%, #ffb05a0d 0deg 4deg, transparent 4deg 11deg), radial-gradient(ellipse at 50% 50%, transparent 55%, #000c); }
#login > .logo, #login > .card, #login > #preview-box { position: relative; }
.logo { padding-left: 12px; flex: 0 1 auto; min-width: 0; }
#chars-form { width: min(480px, 94vw); }
.logo .crest { width: clamp(54px, 13vh, 96px); height: clamp(54px, 13vh, 96px); margin: 0 auto -4px; display: block; }
.logo h1 { font-size: clamp(34px, 6.4vw, 76px); letter-spacing: 6px; margin-right: -6px; background: linear-gradient(#fff6c8 10%, #f8d24a 45%, #b8742a 80%, #7a4510); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 0 #3a1f06) drop-shadow(0 4px 10px #f8a02a55); }
.logo p { position: relative; display: inline-block; margin-top: 4px; padding: 5px 22px 0; color: #d9c49a; border-top: 1px solid #c9962c; }
.logo p::before, .logo p::after { content: ""; position: absolute; top: -4px; width: 7px; height: 7px; background: #f0c85a; transform: rotate(45deg); box-shadow: 0 0 0 1px #3a2408; } .logo p::before { left: -3px; } .logo p::after { right: -3px; }
.card { background: linear-gradient(#35281af5, #1a120af5); border: 10px solid transparent; border-image: var(--frame) 10 / 10px stretch; border-radius: 8px; padding: 6px 8px; box-shadow: 0 6px 22px #000c; }
.card h3 { color: #ffd96a; letter-spacing: 1.2px; text-shadow: 0 1px 1px #000; padding-bottom: 5px; border-bottom: 1px solid #6b5230; box-shadow: 0 1px 0 #000; font-size: 18px; }
#btn-signout, #btn-signout:visited { color: #e8c878; }
.crow { background: linear-gradient(#2e2216, #1a130b); border: 4px solid transparent; border-image: var(--bevel-dim) 4 / 4px stretch; border-radius: 5px; padding: 3px 4px 3px 6px; gap: 7px; }
.crow .cp { position: relative; flex: none; width: 50px; height: 50px; }
.crow .cp .portrait { width: 50px; height: 50px; margin: 0; }
.crow .cp > .ic { position: absolute; right: -5px; bottom: -4px; width: 24px; height: 24px; }
.crow .cn b { font-size: 16px; text-shadow: 0 1px 1px #000; } .crow .cn { line-height: 1.25; }
.crow .del { background: linear-gradient(#32261a, #1e160e); border: 1px solid #000; box-shadow: inset 0 0 0 1px #6b5230; border-radius: 5px; padding: 6px; opacity: 1; } .crow .del .ic { width: 26px; height: 26px; margin: 0 auto; }
#create-form h4 { color: #d9c49a; } #cr-desc { background: #0004; border-radius: 4px; padding: 5px 8px; box-shadow: inset 0 0 0 1px #6b523066; }
#cr-classes button, #cr-races button { min-height: 62px; }
#preview-box { background: radial-gradient(ellipse at 50% 62%, #6a4a2255, transparent 62%); }
#get-app { border: 4px solid transparent; border-image: var(--bevel) 4 / 4px stretch; border-radius: 5px; background: #0008; padding: 9px 14px; }
#rotate .ic { width: 72px; height: 72px; margin: 0 auto; }

/* ---------- short screens (phones in landscape) ---------- */
@media (max-height: 420px) {
  .uframe { width: 168px; } #tframe { left: calc(180px + var(--sal)); width: 196px; }
  .portrait { width: 42px; height: 42px; } .bar { height: 13px; } .bar span { line-height: 11px; }
  .ab { width: 50px; height: 50px; } .ab.big { width: 60px; height: 60px; } .ab.small { width: 44px; height: 44px; }
  .card h3 { font-size: 16px; padding-bottom: 3px; } .card { gap: 6px; }
  #cr-classes button, #cr-races button { min-height: 56px; } .choices button span .ic { width: 28px; height: 28px; }
}
@media (max-height: 380px) {
  #minimap { width: 82px; height: 82px; }
  #toasts div:nth-last-child(n+4) { display: none; }
  #panel-head { font-size: 15.5px; }
}
@media (min-height: 421px) { #tframe { width: 226px; } }

/* ---- class mechanics (classhud.js): counter under the player frame, glowing and queued buttons, group synergies */
#classpips { height: 15px; margin: 1px 0 0 46px; font-size: 0; white-space: nowrap; }
#classpips:empty { display: none; }
.pips { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 5px; border-radius: 8px; background: #000000a0; box-shadow: 0 1px 2px #000a; }
.pips em { font: bold 9.5px/12px system-ui, sans-serif; font-style: normal; color: #d8c9a8; letter-spacing: -.2px; margin-right: 2px; }
.pips i { width: 10px; height: 10px; border-radius: 50%; background: #3a3128; box-shadow: inset 0 0 0 1.5px #000a; transition: background .12s, box-shadow .12s; }
.pips i.on { background: var(--pip, #ffd24a); box-shadow: inset 0 0 0 1.5px #0006, 0 0 6px var(--pip, #ffd24a); }
.pips.k-combo { --pip: #ff5a4a; } .pips.k-charges { --pip: #ffe27a; } .pips.k-shards { --pip: #b07aff; } .pips.k-braises { --pip: #ff8a2a; } .pips.k-focus { --pip: #9fe07a; }
.pips.full { box-shadow: 0 0 0 1.5px var(--pip, #ffd24a), 0 0 8px var(--pip, #ffd24a); }
.pips .val { font: bold 11px/12px system-ui, sans-serif; color: #f3c9a0; } .pips .val.hot { color: #ff6a3a; text-shadow: 0 0 6px #ff4a2a; }
.pips i.moon { --pip: #b8a8ff; } .pips i.leaf { --pip: #8fe06a; border-radius: 2px 50% 2px 50%; }
#classpips.flash .pips, #classpips.flash { animation: pipflash .5s; }
@keyframes pipflash { 0% { filter: brightness(2.4); } 100% { filter: none; } }
.syn { font-size: 0; padding: 1px 0 0 4px; white-space: nowrap; } .syn:empty { display: none; }
.synchip { display: inline-flex; align-items: center; height: 16px; margin: 0 3px 1px 0; padding-right: 5px; border-radius: 8px; background: #000000a0; vertical-align: top; }
.synchip .ic { width: 16px; height: 16px; margin-right: 3px; } .synchip b { font: 600 9.5px/16px system-ui, sans-serif; color: #f3ead6; max-width: 62px; overflow: hidden; text-overflow: ellipsis; }
#t-syn .synchip { box-shadow: inset 0 0 0 1px #6ad06a88; }
.ab.lit:not(.locked) { box-shadow: 0 0 0 2px #ffe27a, 0 0 14px 4px #ffb020; animation: ablit .9s ease-in-out infinite; opacity: 1 !important; }
.ab.lit:not(.locked) .cdm { opacity: .35; }
@keyframes ablit { 0%, 100% { box-shadow: 0 0 0 2px #ffe27a, 0 0 8px 2px #ffb020; filter: brightness(1.05); } 50% { box-shadow: 0 0 0 3px #fff3b0, 0 0 18px 6px #ffc040; filter: brightness(1.3); } }
.ab.queued:not(.locked) { box-shadow: 0 0 0 3px #7fd8ff, 0 0 10px 2px #5fc4ff; transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .ab.lit:not(.locked) { animation: none; } }

/* ---- discoveries, journal, mounts (discover.js, journal.js) ---- */
.lbl.rare .nm { color: #8fd8ff; } .lbl.rare .nm::before { content: "✦ "; color: #c8f0ff; }
.lbl.player .ti { color: #ffe9a8; font-style: italic; }
#toasts .rare { color: #a8e0ff; box-shadow: inset 0 0 0 1px #5aa8d8; font-size: 13px; } #toasts .explore { color: #c8e8a8; } #toasts .achiev { color: #ffe27a; box-shadow: inset 0 0 0 1px #e0ae3a; font-size: 14px; }
#toasts .sick { color: #d8b0b0; } #toasts .cosmetic, #toasts .buy { color: #ffd0f0; box-shadow: inset 0 0 0 1px #b86aa0; }
#mountbtn { position: absolute; left: calc(10px + var(--sal)); bottom: calc(150px + var(--sab)); width: 50px; height: 50px; border-radius: 50%; padding: 0; background: radial-gradient(circle at 40% 32%, #6a4f22, #2a1c0c); border: 1px solid #000; box-shadow: inset 0 0 0 1px #c9962c, 0 2px 6px #000a; color: #f3e6c4; }
#mountbtn i { display: block; font-style: normal; font-size: 22px; line-height: 26px; } #mountbtn span { display: block; font: 600 8.5px/1 system-ui, sans-serif; letter-spacing: -.2px; text-shadow: 0 1px 2px #000; }
#mountbtn.on { box-shadow: inset 0 0 0 2px #ffe27a, 0 0 10px #ffb020; }
#mountbtn { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
#mountbtn.multi::after { content: "⋯"; position: absolute; right: -3px; top: -4px; width: 16px; height: 16px; border-radius: 50%; background: #2a1c0c; border: 1px solid #c9962c; font: bold 11px/14px system-ui, sans-serif; text-align: center; color: #ffe27a; }
#stele { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; background: #0008; padding: 8px; }
#stele.hidden { display: none; }
.stelebox { width: min(520px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.stelebox .parch { overflow-y: auto; font-size: 15px; line-height: 1.5; padding: 12px 18px; border-radius: 4px 4px 40% 40% / 4px 4px 14px 14px; box-shadow: 0 6px 22px #000, inset 0 0 26px #8a6a3066; }
.stelebox .parch h4 { text-align: center; font-size: 19px; letter-spacing: .5px; } .stelebox .parch p { margin: 6px 0 0; white-space: normal; } .stelebox .rw { font-size: 12px; text-align: center; opacity: .85; }
.jtabs button { font-size: 13px; padding: 6px 2px; }
.jcat { margin: 12px 0 4px; color: #ffe27a; border-bottom: 1px solid #6b5230; padding-bottom: 2px; }
.jtitles { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 4px 0 2px; font-size: 13px; } .jtitles .btn.sel { box-shadow: inset 0 0 0 2px #ffe27a; color: #ffe27a; }
.jach { display: flex; gap: 8px; align-items: flex-start; padding: 5px 2px; border-bottom: 1px solid #0006; opacity: .82; } .jach.done { opacity: 1; background: linear-gradient(90deg, #6a4f2233, transparent); } .jach.secret { opacity: .55; }
.jach b { color: #e9dcba; } .jach.done b { color: #ffe27a; } .jach small { color: #c9b48a; } .jti { color: #ffd0f0 !important; }
.jic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-size: 20px; background: #0005; border: 1px solid #000; box-shadow: inset 0 0 0 1px #6b5230; border-radius: 6px; } .jtx { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
.jbar { position: relative; height: 13px; margin-top: 3px; background: #0c0805; border: 1px solid #000; box-shadow: 0 0 0 1px #6b5230; border-radius: 3px; overflow: hidden; }
.jbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#e0ae3a, #8a5a12); } .jbar.pct i { background: linear-gradient(#8ac86a, #3a7a2a); } .jbar span { position: relative; display: block; text-align: center; font: 600 10px/13px system-ui, sans-serif; color: #fff; text-shadow: 0 1px 1px #000; }
.jgrid { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 3px 10px; align-items: center; font-size: 13px; } .jgrid .jbar { margin: 0; }
.jday, .jrare { margin: 4px 0 0; font-size: 13px; } .jbeasts { font-size: 13px; line-height: 1.5; color: #d9c8a0; }
.jlore { margin: 6px 0; white-space: normal; font-size: 14px; } .jlore h4 { font-size: 15px; }
.jdyes { display: flex; flex-wrap: wrap; gap: 6px; } .jdye { display: flex; align-items: center; gap: 5px; padding: 4px 8px 4px 4px; min-height: 40px; background: #0005; border: 1px solid #000; box-shadow: inset 0 0 0 1px #6b5230; border-radius: 20px; font-size: 12px; color: #e9dcba; }
.jdye i, .jsw { display: block; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #000; box-shadow: inset 0 2px 3px #fff5, inset 0 -3px 4px #0006; background: #3a3026; } .jdye.sel { box-shadow: inset 0 0 0 2px #ffe27a; color: #ffe27a; } .jdye.off { opacity: .5; }
.jshop .jic { font-size: 22px; }
.crow .cn .todo { display: block; font-size: 11.5px; color: #a8e0a8; line-height: 1.2; margin-top: 1px; }