/* Little Throne (branched from Star Forest Idle), in playstarforest.com's own language (Tim, 2026-10-21: "use the style from playstarforest.com and the logos...
   much richer"): deep ink, parchment and gold type, Cinzel for heads, Alegreya for reading, VT323 for numbers, carved recesses for
   slots, engraved strips under heads, struck-metal buttons (ruby for the main act, dark iron for the rest). Wood only as trim. */
@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@500;700&family=Alegreya:ital,wght@0,400;0,500;1,400&family=VT323&display=swap");
@font-face { font-family: CinzelLocal; src: url(../fonts/Cinzel.ttf); }
:root {
  --ink: #080b0f; --panel: #12161b; --line: #262c33; --text: #e9dfc4; --mute: #9c9178; --gold: #d9b05c; --gold2: #f2d488;
  --green: #52b35a; --green2: #8fe07c; --red: #e0705a; --ember: #ff8a3d; --blue: #6fb0ff;
  --head: "Cinzel", CinzelLocal, Georgia, serif; --display: "Cinzel Decorative", "Cinzel", CinzelLocal, Georgia, serif; --body: "Alegreya", Georgia, serif; --mono: "VT323", ui-monospace, monospace;
  --carve: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 6px rgba(0,0,0,.75), 0 1px 0 rgba(255,220,150,.07);
  --raise: inset 0 1px 0 rgba(255,220,150,.10), inset 0 0 0 1px rgba(242,212,136,.06), 0 0 0 1px rgba(0,0,0,.65), 0 8px 24px rgba(0,0,0,.45);
  --plate: linear-gradient(#15191e, #0e1115);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--text); font: 15px/1.38 var(--body); overflow: hidden; }
img { image-rendering: pixelated; }
button { font: 700 11px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: #efe2c2; cursor: pointer; padding: 8px 12px 7px; border: 1px solid #050607; border-radius: 3px;
  background: linear-gradient(#323840, #1d2227 55%, #15191d); box-shadow: inset 0 1px 0 rgba(255,230,190,.16), inset 0 0 0 1px rgba(242,212,136,.10), 0 1px 2px rgba(0,0,0,.6); text-shadow: 0 1px 0 #000; transition: filter .15s, transform .1s; }
button:hover:not(:disabled) { filter: brightness(1.22); color: #fff6dc; } button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: default; filter: grayscale(.6); }
button.go { background: linear-gradient(#a8322a, #6d1812 55%, #4e0f0b); border-color: #1c0605; box-shadow: inset 0 1px 0 rgba(255,200,170,.35), inset 0 0 0 1px rgba(242,212,136,.35), 0 0 0 1px rgba(0,0,0,.6), 0 3px 10px rgba(120,20,10,.35); color: #fff2d8; }
button.bad { background: linear-gradient(#3a2422, #241514); }
button.ghost { background: none; box-shadow: none; border-color: transparent; color: var(--mute); }
h1, h2, h3 { font-family: var(--head); font-weight: 700; margin: 0; color: var(--gold2); }
h2 { font-size: 20px; letter-spacing: .06em; text-shadow: 0 2px 0 #000; }
h3 { font-size: 12px; color: var(--gold); text-transform: uppercase; letter-spacing: .2em; }
small, .mute { color: var(--mute); }
b { color: #fff4da; }
.card { background: var(--plate); border: 1px solid #05070a; border-radius: 4px; box-shadow: var(--raise); }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
input, select { font: 18px var(--mono); color: #f2e6c8; background: #07090b; border: 1px solid #000; border-radius: 3px; padding: 2px 6px; box-shadow: var(--carve); }
/* ---- the frame */
#top { position: fixed; inset: 0 0 auto 0; height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: linear-gradient(#171c21, #0b0e12); border-bottom: 3px solid #3a2818; box-shadow: inset 0 -1px 0 #8a6238, 0 6px 18px rgba(0,0,0,.6); z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: 8px; } .brand img { height: 38px; image-rendering: auto; filter: drop-shadow(0 2px 2px #000); } .brand span { font: italic 14px var(--body); color: var(--mute); }
.stat { display: flex; align-items: center; gap: 7px; padding: 4px 11px; background: #07090b; border-radius: 3px; box-shadow: var(--carve); } .stat img { width: 22px; }
.stat b { color: #fff2d0; font: 24px/1 var(--mono); } .stat span { color: var(--mute); font: 700 10px var(--head); text-transform: uppercase; letter-spacing: .16em; } .stat.where b { font: 700 12px var(--head); letter-spacing: .06em; }
.stat .bar { width: 96px; } .stat .bar i { background: linear-gradient(#ff7a62, #b02a20); box-shadow: 0 0 6px #ff5a4060; }
.spacer { flex: 1; }
#nav { position: fixed; left: 0; top: 56px; bottom: 0; width: 186px; padding: 12px 9px; background: linear-gradient(90deg, #0d1014, #12161b); border-right: 1px solid #000; box-shadow: inset -1px 0 0 #262c33; overflow-y: auto; }
#nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin-bottom: 4px; background: none; box-shadow: none; border: 1px solid transparent; padding: 8px 9px; color: #cdbf9c; }
#nav button img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 1px 1px #000); }
#nav button.on { background: #07090b; color: var(--gold2); box-shadow: var(--carve), inset 3px 0 0 var(--ember); }
#nav button .badge { margin-left: auto; background: linear-gradient(#ffb36a, #d46a20); color: #200; border-radius: 3px; padding: 2px 6px 1px; font: 15px/1 var(--mono); letter-spacing: 0; }
#main { position: fixed; left: 186px; right: 426px; top: 56px; bottom: 0; }
#mapview { position: absolute; inset: 0; background: #0b1622; overflow: hidden; box-shadow: inset 0 0 40px #000; }
#map { display: block; width: 100%; height: 100%; cursor: grab; image-rendering: pixelated; }
#map.drag { cursor: grabbing; }
#zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 5px; } #zoom button { width: 34px; height: 34px; padding: 0; font: 20px/1 var(--mono); }
#legend { position: absolute; left: 12px; bottom: 12px; background: rgba(8, 11, 15, .9); border: 1px solid #000; box-shadow: var(--raise); border-radius: 4px; padding: 7px 11px; font: 700 10px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); display: flex; gap: 14px; flex-wrap: wrap; max-width: calc(100% - 24px); }
#legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px #000; }
#tilecard { position: absolute; left: 12px; top: 12px; width: 380px; max-height: calc(100% - 70px); overflow-y: auto; padding: 14px 16px; background: linear-gradient(rgba(21,25,30,.97), rgba(12,15,18,.97)); box-shadow: var(--raise), 0 10px 34px #000c; }
#tilecard h2 { font: 900 21px var(--display); padding-right: 24px; } #tilecard h3 { margin-top: 12px; padding-bottom: 5px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 #262c33; }
#tilecard .x { position: absolute; right: 8px; top: 8px; }
#page { position: absolute; inset: 0; overflow-y: auto; padding: 20px 26px; background: radial-gradient(ellipse at 50% -10%, #1c2229, var(--ink) 70%); }
#side { position: fixed; right: 0; top: 56px; bottom: 0; width: 426px; padding: 11px; display: flex; flex-direction: column; gap: 11px; background: linear-gradient(90deg, #12161b, #0d1014); border-left: 1px solid #000; box-shadow: inset 1px 0 0 #262c33; }
/* ---- the live window: a framed picture */
#live { position: relative; padding: 0; overflow: hidden; border: 2px solid #2a1c10; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #8a6238, 0 8px 24px #000a; }
#liveCanvas { display: block; width: 100%; image-rendering: pixelated; background: #000; }
#liveCap { position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 11px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, .85) 40%); font-size: 14px; }
#liveCap b { font: 700 13px var(--head); letter-spacing: .05em; color: #fff2d0; } #liveCap .bar { margin-top: 5px; }
/* ---- bars: a carved groove, the fill glowing in it */
.bar { height: 9px; background: #050607; border: 1px solid #000; border-radius: 3px; overflow: hidden; box-shadow: var(--carve); }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(#a6ef8e, #3f9a46); box-shadow: 0 0 8px #6fd06a90; transition: width .25s linear; }
.bar.big { height: 13px; } .bar.xp i { background: linear-gradient(#f6dc8c, #b8862e); box-shadow: 0 0 6px #f2d48850; } .bar.whole i { background: linear-gradient(#8cc8ff, #2e6a9a); box-shadow: none; }
/* ---- the queue and the log */
#queue { padding: 11px 13px; } #queue .job { padding: 10px 0; border-top: 1px solid #000; box-shadow: inset 0 1px 0 #20262d; } #queue .job:first-of-type { border-top: 0; box-shadow: none; }
#queue h3, #feed h3 { padding-bottom: 6px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 #262c33; }
.job .top { display: flex; gap: 10px; align-items: center; } .job .top img { width: 34px; height: 34px; object-fit: contain; background: radial-gradient(#11151a, #06080a); box-shadow: var(--carve); border-radius: 3px; padding: 3px; }
.job .t { font: 700 13px var(--head); letter-spacing: .04em; color: #fff2d0; } .job .w { font-size: 13px; font-style: italic; color: var(--mute); }
.job .meta { display: flex; justify-content: space-between; font: 18px/1 var(--mono); color: #cdbf9c; margin: 7px 0 4px; }
.job .got { font: 18px/1.1 var(--mono); color: var(--green2); margin-top: 6px; } .job .exp { font-size: 13px; font-style: italic; color: var(--mute); }
.job.waiting { opacity: .6; }
#feed { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 11px 10px; font-size: 14px; }
#feed p { margin: 0 0 5px; color: #c8bea4; } #feed p .tm { color: #6a6252; margin-right: 7px; font: 16px var(--mono); }
#feed p.good { color: #a8e898; } #feed p.bad { color: #f4a08e; } #feed p.level { color: var(--gold2); } #feed p.quest { color: #a8d0f4; }
/* ---- pages */
.ph { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 #262c33; } .ph h2 { font: 900 27px var(--display); letter-spacing: .03em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 7px; }
.slot { position: relative; height: 66px; background: radial-gradient(#11151a, #06080a); border: 1px solid #000; box-shadow: var(--carve); border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slot:hover { box-shadow: var(--carve), 0 0 0 1px var(--gold); } .slot img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
.slot .n { position: absolute; right: 4px; bottom: 0; font: 19px/1 var(--mono); color: #fff2d0; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
.slot .lbl { position: absolute; left: 5px; top: 3px; font: 700 8px var(--head); color: var(--mute); text-transform: uppercase; letter-spacing: .1em; }
.slot.empty img { opacity: .15; filter: grayscale(1); }
table.t { width: 100%; border-collapse: collapse; } table.t th { text-align: left; font: 700 10px var(--head); text-transform: uppercase; letter-spacing: .16em; color: var(--gold); padding: 8px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 #262c33; }
table.t td { padding: 7px 8px; border-bottom: 1px solid #1a1f25; vertical-align: middle; } table.t tr:hover td { background: #141920; }
table.t img { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; margin-right: 7px; filter: drop-shadow(0 1px 1px #000); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.box { background: var(--plate); border: 1px solid #05070a; border-radius: 4px; padding: 13px 15px; box-shadow: var(--raise); }
.tabs { display: flex; gap: 5px; margin-bottom: 13px; } .tabs button.on { color: var(--gold2); box-shadow: var(--carve), inset 0 -2px 0 var(--ember); background: #07090b; }
.skillrow { display: grid; grid-template-columns: 34px 130px 52px 1fr 170px; gap: 12px; align-items: center; padding: 9px 6px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 #1c2127; }
.skillrow img { width: 28px; height: 28px; object-fit: contain; } .skillrow > span { font: 700 13px var(--head); letter-spacing: .06em; } .skillrow b { font: 32px/1 var(--mono); color: #fff2d0; text-align: right; }
.skillrow small { font-size: 13px; }
.recipe { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 9px 11px; border: 1px solid #05070a; border-radius: 4px; background: var(--plate); box-shadow: var(--raise); margin-bottom: 7px; }
.recipe img.big { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 2px #000); } .recipe .ins { font: 17px/1.3 var(--mono); color: var(--mute); } .recipe .ins .ok { color: var(--green2); } .recipe .ins .no { color: var(--red); }
.recipe b { font: 700 14px var(--head); letter-spacing: .04em; }
.recipe.locked { opacity: .5; }
.pill { display: inline-block; padding: 3px 8px 2px; border-radius: 3px; font: 700 10px var(--head); letter-spacing: .1em; text-transform: uppercase; background: #07090b; box-shadow: var(--carve); color: var(--mute); }
.pill.good { color: var(--green2); } .pill.bad { color: #f4a08e; } .pill.gold { color: var(--gold2); }
.danger { color: var(--ember); letter-spacing: 1px; }
/* ---- the armoury */
.armoury { display: grid; grid-template-columns: 240px 320px 1fr; gap: 16px; align-items: start; }
.doll { position: relative; height: 380px; background: radial-gradient(ellipse at 50% 35%, #2e3a44, #0a0d10 72%); border: 2px solid #2a1c10; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #8a6238, inset 0 0 40px #000; border-radius: 4px; cursor: ew-resize; }
.doll canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.doll .turn { position: absolute; bottom: 10px; } .doll .turn.l { left: 10px; } .doll .turn.r { right: 10px; }
.gearslots { display: grid; grid-template-columns: repeat(3, 66px); gap: 9px; justify-content: center; }
/* ---- toasts and the modal */
#toasts { position: fixed; left: 50%; top: 66px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 20; pointer-events: none; }
.toast { padding: 9px 18px; background: linear-gradient(#1a1f25, #0e1115); border: 1px solid #000; border-left: 3px solid var(--gold); border-radius: 3px; box-shadow: var(--raise); animation: pop .25s; }
.toast.bad { border-left-color: var(--red); } .toast.good { border-left-color: var(--green); } .toast.level { border-left-color: var(--ember); font: 900 19px var(--display); color: var(--gold2); }
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } }
#modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .65); display: flex; align-items: center; justify-content: center; z-index: 30; }
#modal .card { width: 560px; max-width: calc(100% - 40px); padding: 20px 24px; box-shadow: var(--raise), 0 12px 44px #000; }
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #3a2a1a, #5a3e28); border-radius: 5px; box-shadow: inset 0 0 0 1px #000; } ::-webkit-scrollbar-track { background: #07090b; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- the zone */

/* ---- skills, Melvor's way */
.skillpage { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: start; }
.skilllist button { display: flex; width: 100%; align-items: center; gap: 9px; margin-bottom: 4px; text-align: left; } .skilllist button.on { color: var(--gold2); box-shadow: var(--carve), inset 3px 0 0 var(--ember); background: #07090b; }
.skilllist .lv { font: 22px/1 var(--mono); color: #fff2d0; }
.skillhead h2 { font: 900 24px var(--display); }
.acards { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; margin-top: 12px; }
.acard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px 10px; text-align: center; background: var(--plate); border: 1px solid #05070a; border-radius: 4px; box-shadow: var(--raise); }
.acard img { filter: drop-shadow(0 3px 3px #000); margin: 4px 0; } .acard b { font: 700 14px var(--head); } .acard small { min-height: 16px; font-size: 13px; }
.acard .atop { min-height: 22px; } .acard .lock { font: 700 11px var(--head); color: #f4a08e; letter-spacing: .06em; }
.acard .mrow { display: flex; align-items: center; gap: 6px; width: 100%; } .acard .mlv { font: 18px/1 var(--mono); color: var(--gold2); min-width: 36px; text-align: left; }
.acard button { width: 100%; margin-top: 4px; } .acard.locked { opacity: .45; filter: grayscale(.5); }

/* ---- the auction house */
.ah { display: grid; grid-template-columns: 150px 1fr 480px; gap: 12px; align-items: start; }
.cats button { display: block; width: 100%; margin-bottom: 4px; text-align: left; } .cats button.on { color: var(--gold2); box-shadow: var(--carve), inset 3px 0 0 var(--ember); background: #07090b; }
.ahmain { max-height: calc(100vh - 200px); overflow-y: auto; } table.scan tr { cursor: pointer; } table.scan tr.sel td { background: #1c2128; box-shadow: inset 0 0 0 1px #6a5228; }
.ahbook { background: var(--plate); border: 1px solid #05070a; border-radius: 4px; padding: 12px; box-shadow: var(--raise); max-height: calc(100vh - 200px); overflow-y: auto; }
.mkchart { width: 100%; height: auto; background: #07090b; box-shadow: var(--carve); border-radius: 3px; margin-top: 6px; }
.pickrow { padding: 4px 6px; cursor: pointer; border-radius: 3px; } .pickrow.sel, .pickrow:hover { background: #07090b; box-shadow: var(--carve); }
button.sel { color: var(--gold2); box-shadow: var(--carve), inset 0 -2px 0 var(--ember); }
label { display: inline-flex; gap: 6px; align-items: center; }

/* ====================================================================================================================================
   The game's own frame (Tim, 2026-10-21: "it looks like a web page... use mine from before"): every panel framed in the open world's
   stone-and-brass border (rs_panel_frame, its rivets at the corners), its face the same planks stained dark so the writing stays
   legible, and a painted pixel scene behind the whole screen, the way Aether Kingdoms floats its panels over a picture.
   ==================================================================================================================================== */
body { background: #05070a url(../art/bg/valley.png) center / cover fixed; }
body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(5,7,10,.35), rgba(5,7,10,.82)); pointer-events: none; }
.framed, #nav, #live, #queue, #feed, #tilecard, .box, .acard, .ahbook, .recipe, #modal .card {
  border: 14px solid transparent; border-image: url(../art/ui/rs_frame9.png) 40 / 14px / 0 round; border-radius: 0;
  background: linear-gradient(rgba(12,10,8,.84), rgba(9,8,7,.9)), url(../art/ui/rs_wood.png) 0 0 / 96px; box-shadow: 0 10px 28px rgba(0,0,0,.7); }
#top { background: linear-gradient(rgba(12,10,8,.55), rgba(8,7,6,.78)), url(../art/ui/rs_wood.png) 0 0 / 96px; border-bottom: 0; box-shadow: 0 3px 0 #3c3a38, 0 4px 0 #8a6a3a, 0 10px 24px #000c; }
#top .stat { border: 1px solid #000; }
#nav { top: 64px; left: 8px; bottom: 8px; width: 178px; padding: 8px 6px; }
#nav button { color: #e6d5ae; text-shadow: 0 1px 0 #000, 0 0 6px #000; } #nav button img { width: 26px; height: 26px; }
#nav button.on { background: rgba(0,0,0,.55); }
#main { left: 194px; right: 432px; top: 64px; bottom: 8px; }
#mapview { border: 14px solid transparent; border-image: url(../art/ui/rs_frame9.png) 40 / 14px / 0 round; }
#side { top: 64px; right: 8px; bottom: 8px; width: 418px; padding: 0; gap: 8px; background: none; border: 0; box-shadow: none; }
#live { padding: 0; } #live #liveCanvas { display: block; }
#page { background: linear-gradient(rgba(10,9,8,.86), rgba(8,7,6,.92)), url(../art/ui/rs_wood.png) 0 0 / 96px; }
#queue h3, #feed h3, #tilecard h3 { text-align: center; padding: 4px 0 7px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.55) 20%, rgba(0,0,0,.55) 80%, transparent); border: 0; box-shadow: 0 1px 0 rgba(138,106,58,.5); }
.ph { border-bottom: 0; box-shadow: none; padding-bottom: 6px; } .ph::after { opacity: .75; height: 24px; }
.ph h2, h2 { color: #f6dc8c; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.8); }
table.t td { border-bottom-color: rgba(138,106,58,.18); } table.t tr:hover td { background: rgba(0,0,0,.35); }
.slot, .stat, input, select, .bar { border-color: #000; }


/* the little window while you're in the armoury: the work stands still, dimmed */

/* the armoury: the doll in the middle, the gear round it */
.paperdoll { display: grid; grid-template-columns: 1fr 320px 1fr; gap: 18px; align-items: center; }
.pcol { display: flex; flex-direction: column; gap: 10px; }
.pslot { display: flex; align-items: center; gap: 10px; cursor: pointer; } .pslot.l { flex-direction: row-reverse; text-align: right; }
.pslot .slot { width: 66px; flex: none; } .pinfo { display: flex; flex-direction: column; min-width: 0; } .pinfo .lbl { font: 700 9px var(--head); color: var(--mute); text-transform: uppercase; letter-spacing: .12em; }
.pinfo b { font: 600 14px var(--head); color: #fff2d0; } .pinfo small { color: var(--green2); }
.dollstats { position: absolute; left: 0; right: 0; top: 8px; display: flex; justify-content: center; gap: 14px; font-size: 13px; color: var(--mute); } .dollstats b { color: #fff2d0; }
.flyer { position: fixed; z-index: 50; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 10px 18px #000); }
#dollCv { transition: opacity .15s; }
/* the backpack: its slots, the free ones shown */
.grid.bag { grid-template-columns: repeat(5, 66px); } .slot.free { opacity: .45; } .slot.on { box-shadow: var(--carve), 0 0 0 2px var(--gold); }

/* dragging stacks between the backpack and the chest */
.drop { min-height: 74px; border-radius: 4px; transition: box-shadow .12s, background .12s; } .drop.over { background: rgba(240,207,138,.07); box-shadow: inset 0 0 0 2px var(--gold); }
.slot[draggable="true"] { cursor: grab; } .slot.lifted { opacity: .35; }

/* the side panel's tabs: the log, the backpack, skills and quests at a glance */
.sidetabs { display: flex; gap: 3px; margin-bottom: 8px; } .sidetabs button { flex: 1; padding: 5px 2px; font: 700 10px var(--head); letter-spacing: .08em; text-transform: uppercase; }
.sidetabs button.on { color: #fff2d0; box-shadow: var(--carve), inset 0 -2px 0 var(--gold); }
.sidebody { flex: 1; min-height: 0; overflow-y: auto; }
.grid.minibag { grid-template-columns: repeat(5, 1fr); gap: 4px; } .minibag .slot { height: 48px; } .minibag .slot img { width: 34px; height: 34px; } .minibag .slot .n { font-size: 15px; }
.sskill { display: grid; grid-template-columns: 22px 1fr 26px; grid-template-rows: auto 4px; column-gap: 8px; align-items: center; padding: 4px 2px; cursor: pointer; } .sskill .bar { grid-column: 2 / 4; height: 4px; } .sskill b { text-align: right; color: #fff2d0; } .sskill:hover { background: rgba(255,255,255,.04); }
.squest { padding: 7px 4px; border-bottom: 1px solid rgba(0,0,0,.6); display: grid; grid-template-columns: 1fr auto; gap: 4px; } .squest p { grid-column: 1 / 3; margin: 2px 0 0; color: #c8bea4; font-size: 13px; } .squest.done { opacity: .5; } .squest.now b { color: var(--gold2); }

.regionline { margin: -2px 0 6px; font-size: 13px; color: #c8bea4; } .regionline b { color: var(--gold2); font-family: var(--head); letter-spacing: .06em; }

/* the cursor: a gauntlet, pointing; it grips while you drag */
html, body, *, button, a, canvas, input { cursor: url(../art/ui/cursor_hand.png) 3 2, auto !important; }
.dragging, .dragging *, #map.drag, .slot[draggable="true"]:active { cursor: url(../art/ui/cursor_grab.png) 14 14, grabbing !important; }
input[type="text"], input[type="number"], input:not([type]) { cursor: url(../art/ui/cursor_hand.png) 3 2, text !important; }
/* the right-click menu: the game's own, not the browser's */
#ctx { position: fixed; z-index: 60; min-width: 170px; padding: 6px; background: linear-gradient(#1c1712, #110d09); border: 1px solid #000; box-shadow: 0 0 0 1px #8a6238, 0 10px 24px #000; border-radius: 3px; }
#ctx .ch { font: 700 12px var(--head); color: var(--gold2); letter-spacing: .06em; padding: 4px 8px 6px; border-bottom: 1px solid #2a2016; margin-bottom: 4px; }
#ctx button { display: block; width: 100%; text-align: left; margin: 2px 0; padding: 7px 9px; font-size: 10px; }

/* ---- quests: the tracker, the log's timeline and its card */
.qmark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e8b830; color: #2a1a06; font: 900 13px var(--head); box-shadow: 0 0 0 1px #000, 0 0 8px #e8b83088; flex: none; } .qmark.in { background: #8fb8e8; box-shadow: 0 0 0 1px #000; }
.qtrack { padding: 9px 10px; border: 1px solid #000; border-radius: 4px; background: linear-gradient(#241c12, #17110b); box-shadow: inset 0 0 0 1px #5a4024; margin-bottom: 8px; }
.qt-chap { font: 700 9px var(--head); letter-spacing: .14em; text-transform: uppercase; color: #9a8a6a; } .qt-name { font: 700 15px var(--head); color: var(--gold2); }
.qt-step { display: flex; gap: 4px; margin: 6px 0; } .qt-step span { flex: 1; height: 5px; border-radius: 3px; background: #3a2e20; } .qt-step span.d { background: #8aa868; } .qt-step span.n { background: var(--gold2); box-shadow: 0 0 6px #e8b83066; }
.qt-now { margin: 2px 0 4px; color: #fff2d0; }
.squest { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; }
.qlog { display: grid; grid-template-columns: 270px 1fr; gap: 16px; align-items: start; }
.timeline { position: relative; } .tchap { position: relative; padding: 0 0 10px 18px; border-left: 3px solid var(--rc); margin-left: 8px; } .tch { font: 700 11px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--rc); margin: 0 0 6px -10px; filter: brightness(1.5); }
.tnode { display: flex; gap: 8px; align-items: center; padding: 5px 8px; margin: 2px 0; border-radius: 3px; font-size: 14px; } .tnode:hover { background: rgba(255,255,255,.04); } .tnode.sel { background: rgba(232,184,48,.12); box-shadow: inset 0 0 0 1px #8a6238; }
.tnode .dot { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; background: #2a2218; border: 1px solid #000; } .tnode.done .dot { background: #4a6a3a; color: #e8ffd8; } .tnode.now .dot { background: var(--gold2); color: #2a1a06; } .tnode.open .dot { background: #e8b830; color: #2a1a06; } .tnode.locked { opacity: .45; }
.qcard { padding: 16px 18px; border: 1px solid #000; border-radius: 4px; background: linear-gradient(#efe3c4, #e2d2ae); color: #3b2a1c; box-shadow: inset 0 0 0 1px #b8a070, 0 8px 24px #000a; }
.qcard h2 { color: #3b2a1c; font-size: 24px; } .qcard h3 { color: #6a4a24; margin: 12px 0 6px; border-bottom: 1px solid #b8a070; } .qcard .mute, .qcard small.mute { color: #7a6a4a; } .qc-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.qdesc { font-style: italic; margin: 10px 0 4px; line-height: 1.5; }
.qstep { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 3px; } .qstep .qn { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #6a4a24; font: 700 12px var(--head); flex: none; }
.qstep.done { opacity: .6; } .qstep.done .qn { background: #6a8a4a; color: #fff; border-color: #4a6a3a; } .qstep.now { background: rgba(168,50,42,.08); box-shadow: inset 0 0 0 1px #a8322a55; } .qstep.now .qn { background: #a8322a; color: #fff; border-color: #6a1a14; }
.qstep .bar { margin-top: 4px; height: 6px; background: #c8b48a; } .qstep .bar i { background: #a8322a; }
.qcard .good { color: #3a6a2a; } .qreward { gap: 6px; font-size: 15px; }
/* ---- equipment: sockets and enchantments; the armoury */
.pslot { position: relative; } .socket { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(#0a0c10, #1a1e26); border: 1px solid #000; box-shadow: inset 0 0 0 1px #6a5a8a, 0 0 6px #000; display: grid; place-items: center; top: -6px; }
.pslot.l .socket { right: -6px; } .pslot.r .socket { left: 52px; } .socket.full { box-shadow: inset 0 0 0 1px #c8a2ff, 0 0 10px #a070ff; } .socket img { width: 18px; height: 18px; }
.ench { display: block; font-size: 12px; } .setbadge { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 700 11px var(--head); letter-spacing: .08em; color: var(--gold2); }
.armoury2 { display: grid; grid-template-columns: 190px 320px 1fr; gap: 16px; align-items: start; }
.setlist button { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 6px; text-align: left; padding: 6px 9px; } .setlist button.on { box-shadow: var(--carve), inset 0 0 0 1px var(--gold); color: #fff2d0; }
.setinfo .t td { vertical-align: middle; } .setinfo .good { color: #9fdc8f; } .setinfo .bad { color: #f09080; }
/* ---- the workshop: the room, the station's work down the side */
.wshop { display: grid; grid-template-columns: 1fr 390px; gap: 12px; height: calc(100% - 64px); min-height: 520px; }
.wsview { position: relative; border: 2px solid #2a1c10; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #8a6238, 0 10px 30px #000; background: #000; }
#wsCanvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#wsHint { position: absolute; left: 12px; top: 10px; padding: 5px 10px; background: rgba(10,8,6,.8); border: 1px solid #5a4024; font-size: 13px; color: #c8bea4; } #wsHint b { color: var(--gold2); font-family: var(--head); }
#wsSide { overflow-y: auto; padding-right: 4px; } .wsh { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 8px; } .wsh b { font: 700 16px var(--head); color: var(--gold2); }
#wsSide .recipe { grid-template-columns: 40px 1fr; } .sockbox { flex: 1; min-width: 160px; }
#wsGame { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(520px, 90%); }
.hg { padding: 12px 16px; background: rgba(12,9,6,.92); border: 1px solid #000; box-shadow: 0 0 0 1px #8a6238, 0 10px 30px #000; text-align: center; border-radius: 4px; } .hg b { font: 700 15px var(--head); color: var(--gold2); } .hg small { display: block; color: #9a8a6a; margin-top: 6px; }
.hgbar { position: relative; height: 26px; margin: 10px 0 8px; background: linear-gradient(#2a2420, #14100c); border: 1px solid #000; box-shadow: inset 0 2px 6px #000; border-radius: 3px; overflow: hidden; }
.hgbar i { position: absolute; top: 0; bottom: 0; } .hgbar .ok { background: rgba(232,184,48,.35); } .hgbar .best { background: rgba(255,240,160,.85); box-shadow: 0 0 12px #fff0a0; }
.hgbar .mark { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; background: #ff4a2a; box-shadow: 0 0 8px #ff4a2a; }
.hgs { display: flex; justify-content: center; gap: 18px; font-size: 20px; color: #6a5a4a; } .hgs .perfect { color: #fff2a0; } .hgs .good { color: #e8b830; } .hgs .miss { color: #c0402a; }
.hg.done.masterwork b { color: #fff2a0; } .hg.done.cracked b { color: #f09080; }
.qcard b, .qcard strong { color: #3b2a1c; } .qcard .qstep.now b { color: #6a1a14; }
.wshop { height: calc(100vh - 150px); grid-template-rows: 100%; } #wsSide { height: 100%; overflow-y: auto; } .wsview { min-height: 0; overflow: hidden; }

/* the map's Find: your own key */
#findBtn { position: absolute; left: 12px; bottom: 12px; z-index: 3; }
#findPane { position: absolute; left: 12px; bottom: 50px; z-index: 3; width: 250px; max-height: 60%; overflow-y: auto; padding: 8px 12px; }
#findPane h3 { margin: 8px 0 4px; font-size: 11px; } #findPane label { display: flex; align-items: center; gap: 7px; padding: 2px 0; font-size: 13px; }
#findPane i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px #000; flex: none; } #findPane span:hover { color: var(--gold2); text-decoration: underline; }
#findBtn { left: auto; right: 12px; } #findPane { left: auto; right: 12px; }

/* 2026-10-21: stamina, star shards, the gains over the corner window, the fight, the mini map, the music plate, the keep's grounds */
.stat.stam .bar { width: 90px; } .stat.stam .bar i { background: linear-gradient(#e8c24a, #b8861c); } .stat.stam.low .bar i { background: linear-gradient(#e0603a, #a8321c); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }
#live { position: relative; }
#gains { position: absolute; left: 8px; bottom: 54px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; z-index: 5; }
#gains .gain { display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; background: rgba(20, 13, 6, 0.82); border: 1px solid #6b4a24; border-radius: 3px; color: #f4e6c4; font-size: 13px;
  animation: gainIn 0.25s ease-out; transition: opacity 0.5s, transform 0.5s; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
#gains .gain img { width: 22px; height: 22px; image-rendering: pixelated; } #gains .gain b { color: #9fe07a; font-size: 14px; } #gains .gain small { color: #b8a27a; margin-left: 2px; }
#gains .gain.xp b { color: #8ad0ff; } #gains .gain.gold b { color: #ffd060; } #gains .gain.out { opacity: 0; transform: translateY(-10px); }
@keyframes gainIn { from { opacity: 0; transform: translateX(-14px) scale(0.9); } to { opacity: 1; transform: none; } }
.fight { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; } .fside { flex: 1; } .fside b { font-size: 12px; } .fvs { color: #a88d64; font: 600 11px Cinzel, serif; }
.fbar { position: relative; height: 14px; background: #1a0f08; border: 1px solid #4a321c; margin-top: 2px; } .fbar i { position: absolute; inset: 0 auto 0 0; transition: width 0.25s; }
.fbar.me i { background: linear-gradient(#5ccf5a, #2f8a2e); } .fbar.foe i { background: linear-gradient(#e0603a, #9a2a18); }
.fbar span { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 13px; color: #fff; text-shadow: 0 1px 1px #000; }
.clog { background: rgba(0,0,0,0.22); border: 1px solid rgba(107,74,36,0.5); padding: 4px 7px; max-height: 92px; overflow: hidden; }
.clog p { margin: 1px 0; font-size: 12px; color: #d8c49c; } .clog p.good { color: #9fe07a; } .clog p.bad { color: #ff8a70; } .clog p:first-child { font-weight: 600; }
#mini canvas { display: block; width: 100%; height: 190px; margin-top: 6px; cursor: pointer; image-rendering: auto; }
#nowplaying { position: fixed; left: 16px; bottom: 16px; z-index: 50; display: flex; align-items: center; gap: 4px; padding: 6px 8px; width: 170px;
  background: linear-gradient(#5a3d22, #3a2614); border: 2px solid #1a110a; box-shadow: inset 0 1px 0 rgba(255,220,150,.25), 0 6px 18px rgba(0,0,0,.6); color: #f2d488; font: 15px VT323, monospace; cursor: grab; user-select: none; }
#nowplaying .np-note { font-size: 18px; color: #f4d58d; } #nowplaying .np-t { flex: 1; font: 600 13px Cinzel, serif; color: #f2d488; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nowplaying button { background: linear-gradient(#6b4a2a, #4a321c); border: 1px solid #1a110a; color: #f2e2be; min-width: 28px; height: 24px; padding: 0 6px; cursor: pointer; font-size: 12px; } #nowplaying button.off { opacity: 0.4; }
.keepwrap { position: relative; margin-top: 10px; } #keepHost { height: 460px; border: 2px solid #3b2a1c; box-shadow: inset 0 0 0 2px #1a110a; background: #9fc4d8; } #keepHost canvas { display: block; width: 100%; height: 100%; }
.keepbar { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .keepbar .mute { flex: 1; } .keepbar b { color: #f4d58d; }
.palette h3 { margin: 12px 0 6px; } .bps { display: flex; flex-wrap: wrap; gap: 6px; }
.bp { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 6px; text-align: left; padding: 5px 9px 5px 5px; min-width: 170px; }
.bp img { grid-row: span 2; } .bp span { font: 600 13px Cinzel, serif; } .bp small { color: #b8a27a; font-size: 11px; } .bp.on { outline: 2px solid #f4d58d; } .bp.short small { color: #e07a60; } .bp.done { opacity: 0.55; }
.shardshop { margin: 10px 0 14px; } .shardshop .row { gap: 10px; }
.bps .bp { display: grid !important; grid-template-columns: 34px auto; grid-template-rows: auto auto; justify-items: start; align-content: center; height: auto; line-height: 1.2; }
.bps .bp img { grid-column: 1; grid-row: 1 / span 2; } .bps .bp span { grid-column: 2; grid-row: 1; } .bps .bp small { grid-column: 2; grid-row: 2; white-space: normal; }

/* at your keep, out on your grounds: the little window goes dark */
#live.away canvas { filter: brightness(0.18) saturate(0.4); transition: filter 0.6s; } #live canvas { transition: filter 0.6s; }
/* the crafting menu */
.craftpage { display: grid; grid-template-columns: 150px 1fr 380px; gap: 14px; margin-top: 10px; align-items: start; }
.ccats { display: flex; flex-direction: column; gap: 4px; } .ccats button { text-align: left; } .ccats button.on { outline: 2px solid #f4d58d; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; align-content: start; }
.ccell { position: relative; height: 64px; display: grid; place-items: center; padding: 0; background: rgba(0,0,0,0.3); border: 1px solid #4a321c; }
.ccell img { width: 44px; height: 44px; image-rendering: pixelated; } .ccell.short img { opacity: 0.45; } .ccell.lock img { opacity: 0.2; filter: grayscale(1); }
.ccell.ok { box-shadow: inset 0 0 0 1px rgba(160, 220, 110, 0.45); } .ccell.on { outline: 2px solid #f4d58d; }
.ccell .clv { position: absolute; left: 3px; top: 2px; font: 600 11px Cinzel, serif; color: #e0a060; } .ccell .cq { position: absolute; right: 3px; bottom: 2px; font-size: 11px; color: #fff; text-shadow: 0 1px 1px #000; }
.cdet { background: rgba(0,0,0,0.25); border: 1px solid #4a321c; padding: 12px; } .cdet h3 { margin: 12px 0 6px; } .cdet .bad { color: #ff8a70; }
.cneed { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(107,74,36,0.35); }
.cneed.ok b { color: #9fe07a; } .cneed.no b { color: #ff8a70; } .cneed .csrc { grid-column: 2 / span 2; font-size: 12px; color: #b8a27a; }
.cneed .link, .csrc .link { background: none; border: 0; padding: 0; color: #f4d58d; text-decoration: underline; cursor: pointer; font-size: 12px; min-height: 0; }
.cmake { gap: 6px; margin-top: 10px; } .cmake .grow { flex: 1; }

#keepHost { position: relative; height: auto; } .keephint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 5px 14px; background: rgba(20,13,6,0.78); border: 1px solid #6b4a24; color: #f2e2be; font-size: 14px; pointer-events: none; white-space: nowrap; }
.keephint b { display: inline-block; min-width: 20px; padding: 0 5px; margin-right: 6px; background: #f4d58d; color: #2a1c0e; border-radius: 3px; text-align: center; } .keephint span { color: #b8a27a; } .keephint:empty { display: none; }

.awaybar { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .awaybar .grow { flex: 1; }

/* the keep in 3D (keep3d.js): the view filling its frame, the title in its corner, the names over the stations, the tip under the
   pointer in the map's parchment */
#keepHost { position: relative; height: clamp(440px, 66vh, 780px) !important; background: #070504 !important; overflow: hidden; }
.k3wrap { position: absolute; inset: 0; } .k3wrap canvas.k3cv { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; } .k3wrap canvas.k3cv:active { cursor: grabbing; }
.k3title { position: absolute; left: 24px; top: 18px; pointer-events: none; } .k3title b { display: block; font: 700 22px var(--head); letter-spacing: .34em; text-transform: uppercase; color: #f2e2be; text-shadow: 0 2px 8px #000, 0 0 2px #000; }
.k3title span { display: block; margin-top: 2px; font: italic 15px var(--body); color: #cdb88e; text-shadow: 0 1px 4px #000; }
.k3labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.k3label { position: absolute; left: 0; top: 0; font: italic 600 13px var(--body); color: #f4e8cc; text-shadow: 0 0 4px #000, 0 1px 2px #000, 0 0 1px #000; white-space: nowrap; } .k3label.home { font-size: 14px; }
.k3label.on { color: #ffd76a; } .k3label.on::after { content: "  ·  you’re here"; font-weight: 400; }
.k3tip { position: absolute; transform: translate(-50%, -160%); padding: 4px 11px 5px; background: #efe3c4; color: #3b2a1c; border: 1px solid #6b4a24; border-radius: 2px; font: 600 13px var(--body); white-space: nowrap; pointer-events: none; box-shadow: 0 3px 8px rgba(0,0,0,.55); } .k3tip.bad { color: #a8322a; }
.k3hint { position: absolute; right: 18px; bottom: 12px; font: italic 13px var(--body); color: #8f7f60; pointer-events: none; text-shadow: 0 1px 2px #000; }
.k3load { position: absolute; inset: 0; display: grid; place-items: center; font: italic 18px var(--body); color: #c9b48a; pointer-events: none; }

/* the header, with the plaque in it too: everything on one line (the place name cut short rather than wrapped) */
.brand span, .stat span, .stat small { white-space: nowrap; } .stat.where b { display: inline-block; max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
@media (max-width: 1500px) { .brand span { display: none; } }
/* the header with the plaque: the plaque never pushed off the edge; on narrower screens the place name shorter, then the combat and
   total level (both on the Skills page) and the shards go */
#acct { flex-shrink: 0; } #top .spacer { flex: 1 1 0; min-width: 0; }
@media (max-width: 1750px) { .stat.where b { max-width: 120px; } }
@media (max-width: 1620px) { #top .stat:has(#cb), #top .stat:has(#tl) { display: none; } }
@media (max-width: 1380px) { #top .stat:has(#shards) { display: none; } #top .stat .bar { width: 70px; } }